/* =========================================================
   PGH · Puertas de Garaje Horta
   Lenguaje visual: "ACERO Y ÁMBAR" — taller de noche.
   Nada que ver con las otras dos webs (papel/plano ni mosaico).
   ========================================================= */

/* ---------- 1. VARIABLES ---------- */
:root{
  --negro:#090c10;
  --fondo:#0d1116;
  --fondo2:#121924;
  --carta:#151c26;
  --carta2:#1b2431;
  --linea:#26313f;
  --linea2:#334053;
  --tinta:#eef3f9;
  --suave:#9dabbb;
  --tenue:#6b7887;
  --ambar:#ffa51f;
  --ambar-cl:#ffc773;
  --ambar-os:#c97a00;
  --rojo:#ff5f4d;
  --verde:#48cf8b;
  --azul:#5aa9e6;
  --radio:14px;
  --radio-s:9px;
  --sombra:0 18px 45px -22px rgba(0,0,0,.9);
  --ancho:1180px;
  --lamas:repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 1px,transparent 1px 9px);
  --trans:.45s cubic-bezier(.22,.85,.3,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.1;letter-spacing:-.025em;font-weight:800}
h1{font-size:clamp(2.1rem,6.2vw,4rem)}
h2{font-size:clamp(1.75rem,4vw,2.8rem)}
h3{font-size:clamp(1.15rem,2.1vw,1.4rem)}
p{margin:0 0 1.05em}
ul{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.45em}
strong{color:#fff;font-weight:700}
::selection{background:var(--ambar);color:#101010}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:4px}

.contenedor{width:min(100% - 2.4rem,var(--ancho));margin-inline:auto}
.seccion{padding:clamp(3.6rem,8vw,6.6rem) 0;position:relative}
.seccion--oscura{background:var(--negro)}
.seccion--tono{background:linear-gradient(180deg,var(--fondo2),var(--fondo))}
.centro{text-align:center}
.oculto-visual{position:absolute;width:1px;height:1px;padding:0 !important;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* el enlace de saltar al contenido solo aparece al llegar con el tabulador */
.oculto-visual:focus-visible{
  position:fixed;top:.8rem;left:.8rem;width:auto;height:auto;padding:.8rem 1.3rem !important;margin:0;
  clip:auto;z-index:200;
}

/* franja de lamas que separa secciones */
.lamas-sep{height:14px;background:var(--lamas);opacity:.6}

/* ---------- 3. TIPOGRAFÍA DE SECCIÓN ---------- */
.etiqueta{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ambar);margin-bottom:1rem;
}
.etiqueta::before{content:"";width:34px;height:3px;background:var(--ambar);border-radius:2px}
.cabeza{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.cabeza p{color:var(--suave);font-size:1.08rem;margin-bottom:0}
.cabeza--centro{margin-inline:auto;text-align:center}
.cabeza--centro .etiqueta{justify-content:center}

/* ---------- 4. BOTONES ---------- */
.btn{
  --bg:var(--ambar);--fg:#141005;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:var(--radio-s);border:0;cursor:pointer;
  background:var(--bg);color:var(--fg);font-weight:750;font-size:1rem;
  letter-spacing:.01em;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .18s ease,box-shadow .25s ease,background .25s ease;
  box-shadow:0 10px 24px -14px rgba(255,165,31,.9);
}
.btn::after{ /* brillo que barre */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 45%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(255,165,31,.95)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--linea{--bg:transparent;--fg:var(--tinta);border:1.5px solid var(--linea2);box-shadow:none}
.btn--linea:hover{border-color:var(--ambar);color:var(--ambar-cl);box-shadow:none}
.btn--wasap{--bg:#1fb855;--fg:#04180c;box-shadow:0 10px 24px -14px rgba(31,184,85,.9)}
.btn--rojo{--bg:var(--rojo);--fg:#1b0703;box-shadow:0 10px 24px -14px rgba(255,95,77,.9)}
.btn--gr{padding:1.1rem 1.9rem;font-size:1.06rem}
.botonera{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- 5. CORTINA DE ENTRADA (animación de inicio) ---------- */
.cortina{
  position:fixed;inset:0;z-index:999;display:none;
  background:var(--negro);overflow:hidden;
}
html.cargando .cortina{display:block}
html.cargando{overflow:hidden}
.cortina__lamas{position:absolute;inset:0;display:flex;flex-direction:column}
.cortina__lama{
  flex:1;position:relative;
  background:linear-gradient(180deg,#1b232e 0%,#10161e 42%,#0a0e13 60%,#161d27 100%);
  border-bottom:1px solid rgba(0,0,0,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  transform-origin:top center;
  transition:transform .62s cubic-bezier(.7,0,.25,1),opacity .5s ease;
}
.cortina.abre .cortina__lama{transform:translateY(-102%) scaleY(.55);opacity:.15}
.cortina__texto{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;text-align:center;padding:1.5rem;
  transition:opacity .45s ease,transform .6s ease;
}
.cortina.abre .cortina__texto{opacity:0;transform:translateY(-26px)}
.cortina__palabra{
  display:flex;gap:.02em;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.6rem,11vw,7rem);line-height:1;
  background:linear-gradient(180deg,#fff 20%,#b9c6d6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cortina__palabra span{
  display:inline-block;transform:translateY(115%);opacity:0;
  animation:letra .62s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes letra{to{transform:translateY(0);opacity:1}}
.cortina__hilo{
  width:0;height:3px;border-radius:2px;background:var(--ambar);
  box-shadow:0 0 22px 2px rgba(255,165,31,.7);
  animation:hilo .75s .32s cubic-bezier(.2,.9,.25,1) forwards;
}
@keyframes hilo{to{width:min(260px,52vw)}}
.cortina__pie{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tenue);
  opacity:0;animation:aparece .6s .6s forwards;
}
@keyframes aparece{to{opacity:1}}
/* el contenido entra mientras la cortina sube */
.envoltorio{opacity:1}
html.cargando .envoltorio{opacity:0;transform:scale(.985)}
.envoltorio{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.3,1)}

/* ---------- 6. BARRA SUPERIOR + CABECERA ---------- */
.barra-util{
  background:var(--negro);border-bottom:1px solid var(--linea);
  font-size:.82rem;color:var(--suave);
}
.barra-util .contenedor{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;flex-wrap:wrap}
.barra-util strong{color:var(--ambar-cl)}
.punto{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rojo);
  margin-right:.5rem;box-shadow:0 0 0 0 rgba(255,95,77,.7);animation:latido 2.2s infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(255,95,77,.65)}
  70%{box-shadow:0 0 0 11px rgba(255,95,77,0)}
  100%{box-shadow:0 0 0 0 rgba(255,95,77,0)}
}

.cabecera{
  position:sticky;top:0;z-index:80;
  background:rgba(13,17,22,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);transition:padding .3s ease,background .3s ease;
}
.cabecera.encogida{background:rgba(9,12,16,.94)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;transition:padding .3s ease}
.cabecera.encogida .cabecera__fila{padding:.55rem 0}
.progreso{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--ambar-os),var(--ambar));box-shadow:0 0 12px rgba(255,165,31,.8)}

.marca{display:flex;align-items:center;gap:.7rem}
.marca__icono{width:40px;height:40px;flex:none}
.marca__texto{display:flex;flex-direction:column;line-height:1.05}
.marca__nombre{font-weight:800;font-size:1.02rem;letter-spacing:-.02em}
.marca__lema{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ambar)}

.menu{display:flex;align-items:center;gap:.15rem}
.menu a{
  padding:.55rem .85rem;border-radius:var(--radio-s);font-size:.95rem;font-weight:600;
  color:var(--suave);position:relative;transition:color .2s ease,background .2s ease;
}
.menu a:hover{color:var(--tinta);background:var(--carta)}
.menu a[aria-current="page"]{color:var(--tinta)}
.menu a[aria-current="page"]::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;
  background:var(--ambar);border-radius:2px;
}
.cabecera__acciones{display:flex;align-items:center;gap:.6rem}
.tel-cabecera{display:inline-flex;align-items:center;gap:.5rem;font-weight:750;color:var(--ambar-cl)}
.hamburguesa{display:none;background:var(--carta);border:1px solid var(--linea);border-radius:var(--radio-s);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.hamburguesa span{display:block;width:20px;height:2px;background:var(--tinta);position:relative;transition:.25s}
.hamburguesa span::before,.hamburguesa span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--tinta);transition:.25s}
.hamburguesa span::before{top:-6px}.hamburguesa span::after{top:6px}
.hamburguesa[aria-expanded="true"] span{background:transparent}
.hamburguesa[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.hamburguesa[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- 7. HÉROE ---------- */
.heroe{position:relative;overflow:hidden;background:var(--negro);padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,7vw,5rem)}
.heroe::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 420px at var(--mx,70%) var(--my,15%),rgba(255,165,31,.16),transparent 65%);
  transition:background .3s ease;pointer-events:none;
}
.heroe::after{content:"";position:absolute;inset:0;background:var(--lamas);opacity:.5;pointer-events:none}
.heroe__rejilla{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
.heroe h1{margin-bottom:.6rem}
.heroe h1 em{font-style:normal;color:var(--ambar);position:relative;white-space:nowrap}
.heroe__entrada{font-size:1.14rem;color:var(--suave);max-width:56ch}
.heroe .botonera{margin:1.7rem 0 1.9rem}
.promesas{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;max-width:52ch}
.promesas li{display:flex;gap:.85rem;align-items:flex-start;margin:0;color:var(--suave);font-size:.97rem}
.promesas b{color:var(--tinta);font-weight:700}
.promesas .num{
  flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--carta2);border:1px solid var(--linea2);color:var(--ambar);
  font-size:.78rem;font-weight:800;letter-spacing:.02em;
}

/* --- puerta interactiva del héroe --- */
.puerta{
  position:relative;border:1px solid var(--linea2);border-radius:var(--radio);
  background:linear-gradient(180deg,var(--carta),#0c1117);padding:1.1rem;box-shadow:var(--sombra);
}
.puerta__marco{
  position:relative;aspect-ratio:4/3.1;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#08243a 0%,#0a3350 38%,#123f5e 60%,#1d2c35 61%,#0e141a 100%);
}
.puerta__calle{position:absolute;inset:0}
.puerta__sol{
  position:absolute;left:16%;top:14%;width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle,#ffd88a,#ffa51f 55%,transparent 72%);filter:blur(1px);opacity:.9;
}
.puerta__finca{position:absolute;bottom:39%;width:100%;height:34%;display:flex;align-items:flex-end;gap:6px;padding:0 8%}
.puerta__finca i{flex:1;background:#0b1a26;border-top:2px solid #16303f;border-radius:3px 3px 0 0;position:relative}
.puerta__finca i:nth-child(1){height:70%}
.puerta__finca i:nth-child(2){height:92%}
.puerta__finca i:nth-child(3){height:58%}
.puerta__finca i:nth-child(4){height:80%}
.puerta__finca i::after{
  content:"";position:absolute;inset:14% 22% auto;height:8px;border-radius:2px;
  background:rgba(255,196,110,.5);box-shadow:0 16px 0 rgba(255,196,110,.25),0 32px 0 rgba(255,196,110,.16);
}
.puerta__suelo{position:absolute;bottom:0;left:0;right:0;height:39%;background:linear-gradient(180deg,#12181f,#0a0d11)}
.puerta__coche{position:absolute;bottom:12%;left:50%;width:56%;transform:translateX(-50%) translateX(-12%);opacity:0;transition:opacity .6s .35s ease,transform 1.1s .3s cubic-bezier(.2,.8,.3,1)}
.puerta.abierta .puerta__coche{opacity:1;transform:translateX(-50%)}
.puerta__hoja{position:absolute;left:0;right:0;top:0;height:100%;display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.15s cubic-bezier(.62,0,.2,1)}
.puerta.abierta .puerta__hoja{transform:translateY(-100%)}
.puerta__lama{
  flex:1;background:linear-gradient(180deg,#2b3542 0%,#1a222c 45%,#111820 55%,#242e3a 100%);
  border-bottom:1px solid rgba(0,0,0,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.puerta__lama:first-child{background:linear-gradient(180deg,#3a4553,#232c38)}
.puerta__guia{position:absolute;top:0;bottom:0;width:9px;background:linear-gradient(90deg,#39424f,#1a212a);z-index:2}
.puerta__guia--i{left:0;border-radius:0 3px 3px 0}
.puerta__guia--d{right:0;border-radius:3px 0 0 3px}
.puerta__dintel{position:absolute;top:0;left:0;right:0;height:11px;background:linear-gradient(180deg,#454f5d,#232b36);z-index:3}
.puerta__luz{
  position:absolute;top:12px;right:14px;width:10px;height:10px;border-radius:50%;z-index:4;
  background:var(--rojo);box-shadow:0 0 12px var(--rojo);transition:background .4s,box-shadow .4s;
}
.puerta.abierta .puerta__luz{background:var(--verde);box-shadow:0 0 12px var(--verde)}
.puerta__pie{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;flex-wrap:wrap}
.puerta__estado{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
.puerta__estado b{color:var(--ambar)}
.mando{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  background:var(--carta2);border:1px solid var(--linea2);border-radius:40px;padding:.5rem .95rem .5rem .55rem;
  font-size:.92rem;font-weight:650;transition:border-color .25s,transform .15s;
}
.mando:hover{border-color:var(--ambar);transform:translateY(-1px)}
.mando i{width:26px;height:26px;border-radius:50%;background:var(--ambar);display:grid;place-items:center;color:#141005;font-style:normal;font-weight:800;font-size:.85rem}

/* ---------- 8. TARJETAS ---------- */
.rejilla{display:grid;gap:1.1rem}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}

.tarjeta{
  position:relative;background:var(--carta);border:1px solid var(--linea);
  border-radius:var(--radio);padding:1.5rem;overflow:hidden;
  transition:transform var(--trans),border-color var(--trans),background var(--trans);
}
.tarjeta::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--ambar),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s ease;
}
.tarjeta:hover{transform:translateY(-5px);border-color:var(--linea2);background:var(--carta2)}
.tarjeta:hover::before{transform:scaleX(1)}
.tarjeta h3{margin-bottom:.45rem}
.tarjeta p{color:var(--suave);margin-bottom:.8rem;font-size:.97rem}
.tarjeta ul{list-style:none;padding:0;margin:0 0 1rem;font-size:.93rem;color:var(--suave)}
.tarjeta ul li{padding-left:1.35rem;position:relative}
.tarjeta ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--ambar)}
.tarjeta__icono{
  width:52px;height:52px;border-radius:12px;display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(150deg,rgba(255,165,31,.18),rgba(255,165,31,.04));
  border:1px solid rgba(255,165,31,.28);transition:transform .5s var(--trans);
}
.tarjeta:hover .tarjeta__icono{transform:rotate(-7deg) scale(1.06)}
.tarjeta__icono svg{width:26px;height:26px;stroke:var(--ambar);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.enlace-flecha{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--ambar);font-size:.95rem}
.enlace-flecha svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s ease}
.enlace-flecha:hover svg{transform:translateX(5px)}
.tarjeta--marcada{border-color:rgba(255,95,77,.4);background:linear-gradient(180deg,rgba(255,95,77,.07),var(--carta))}

/* tarjeta compacta de confianza */
.confianza{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.confianza div{
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--radio);padding:1.15rem 1.25rem;
}
.confianza h3{font-size:1.02rem;margin-bottom:.3rem}
.confianza p{font-size:.9rem;color:var(--suave);margin:0}

/* ---------- 9. PASOS (línea de tiempo) ---------- */
.pasos{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:1.6rem}
.pasos::before{content:"";position:absolute;left:21px;top:12px;bottom:12px;width:2px;background:var(--linea)}
.pasos__hilo{position:absolute;left:21px;top:12px;width:2px;height:0;background:linear-gradient(180deg,var(--ambar),var(--ambar-os));box-shadow:0 0 12px rgba(255,165,31,.6);transition:height .25s linear}
.pasos li{position:relative;padding-left:4rem;margin:0}
.pasos li b.n{
  position:absolute;left:0;top:-2px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--fondo2);border:1px solid var(--linea2);color:var(--tenue);font-size:1rem;font-weight:800;
  transition:background .4s,color .4s,border-color .4s,transform .4s;z-index:1;
}
.pasos li.activo b.n{background:var(--ambar);color:#141005;border-color:var(--ambar);transform:scale(1.06)}
.pasos li h3{margin-bottom:.35rem}
.pasos li p{color:var(--suave);margin:0}

/* ---------- 10. DESPLEGABLES ---------- */
.desp{
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--carta);
  margin-bottom:.75rem;overflow:hidden;transition:border-color .3s,background .3s;
}
.desp[open]{border-color:var(--linea2);background:var(--carta2)}
.desp summary{
  list-style:none;cursor:pointer;padding:1.1rem 3.4rem 1.1rem 1.35rem;position:relative;
  font-weight:700;font-size:1.04rem;line-height:1.35;
}
.desp summary::-webkit-details-marker{display:none}
.desp summary:hover{color:var(--ambar-cl)}
.desp summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;width:15px;height:15px;margin-top:-7px;
  background:
    linear-gradient(var(--ambar),var(--ambar)) center/15px 2.4px no-repeat,
    linear-gradient(var(--ambar),var(--ambar)) center/2.4px 15px no-repeat;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.desp[open] summary::after{transform:rotate(135deg)}
.desp__cuerpo{padding:0 1.35rem 1.25rem;color:var(--suave)}
.desp__cuerpo p:last-child,.desp__cuerpo ul:last-child{margin-bottom:0}
.desp__cuerpo b{color:var(--tinta)}
.aviso-ojo{
  border-left:3px solid var(--rojo);background:rgba(255,95,77,.08);
  padding:.7rem .95rem;border-radius:0 var(--radio-s) var(--radio-s) 0;color:#ffd6d0;font-size:.94rem;
}
.desp--sintoma summary{padding-left:3.5rem}
.desp--sintoma summary::before{
  content:"";position:absolute;left:1.3rem;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:var(--rojo);box-shadow:0 0 10px rgba(255,95,77,.7);
}

/* ---------- 11. CIFRAS ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0 0}
.cifras div{
  text-align:center;padding:1.4rem .8rem;border:1px solid var(--linea);border-radius:var(--radio);
  background:linear-gradient(180deg,var(--carta),transparent);
}
.cifras b{display:block;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--ambar);letter-spacing:-.03em;line-height:1}
.cifras span{font-size:.86rem;color:var(--suave);display:block;margin-top:.35rem}

/* ---------- 12. GALERÍA ---------- */
.galeria{position:relative}
.galeria__pista{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,340px);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin;
}
.galeria__pista::-webkit-scrollbar{height:6px}
.galeria__pista::-webkit-scrollbar-thumb{background:var(--linea2);border-radius:3px}
.galeria figure{margin:0;scroll-snap-align:start;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--carta)}
.galeria img{width:100%;height:230px;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1);filter:saturate(.92)}
.galeria figure:hover img{transform:scale(1.06)}
.galeria figcaption{padding:.85rem 1rem;font-size:.9rem;color:var(--suave)}
.galeria figcaption b{display:block;color:var(--tinta);font-size:.95rem;margin-bottom:.15rem}
.galeria__botones{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.4rem}
.galeria__botones button{
  width:44px;height:44px;border-radius:50%;background:var(--carta);border:1px solid var(--linea2);
  cursor:pointer;display:grid;place-items:center;transition:border-color .25s,transform .15s;
}
.galeria__botones button:hover{border-color:var(--ambar);transform:translateY(-2px)}
.galeria__botones svg{width:18px;height:18px;stroke:var(--tinta);fill:none;stroke-width:2}

/* ---------- 13. BLOQUE MIXTO (texto + foto) ---------- */
.mixto{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.mixto--inv .mixto__foto{order:-1}
.mixto--arriba{align-items:start}
.mixto__foto{margin:0;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--carta)}
.mixto__foto img{width:100%;height:100%;max-height:430px;object-fit:cover}
.mixto__foto figcaption{padding:.8rem 1rem;font-size:.88rem;color:var(--tenue)}
.lista-marcada{list-style:none;padding:0;margin:0 0 1.4rem}
.lista-marcada li{position:relative;padding-left:1.9rem;color:var(--suave);margin-bottom:.6rem}
.lista-marcada li::before{
  content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:3px;
  border:2px solid var(--ambar);transform:rotate(45deg);
}
.lista-marcada b{color:var(--tinta)}

/* ---------- 14. COLUMNAS DE COBRO ---------- */
.cobro{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.cobro > div{border:1px solid var(--linea);border-radius:var(--radio);padding:1.4rem;background:var(--carta)}
.cobro h3{font-size:1.1rem;display:flex;align-items:center;gap:.55rem}
.cobro ul{list-style:none;padding:0;margin:0;font-size:.95rem;color:var(--suave)}
.cobro li{padding-left:1.5rem;position:relative}
.cobro--si{border-color:rgba(72,207,139,.35)}
.cobro--si h3{color:var(--verde)}
.cobro--si li::before{content:"✓";position:absolute;left:0;color:var(--verde);font-weight:800}
.cobro--tal{border-color:rgba(255,165,31,.32)}
.cobro--tal h3{color:var(--ambar)}
.cobro--tal li::before{content:"•";position:absolute;left:.25rem;color:var(--ambar);font-weight:800}
.cobro--no{border-color:rgba(255,95,77,.32)}
.cobro--no h3{color:var(--rojo)}
.cobro--no li::before{content:"✕";position:absolute;left:0;color:var(--rojo);font-weight:800}

/* ---------- 15. ZONAS ---------- */
.zonas{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;padding:0;margin:0 0 1.4rem}
.zonas li{margin:0}
.zonas span{
  display:inline-block;padding:.5rem .95rem;border-radius:40px;border:1px solid var(--linea);
  background:var(--carta);font-size:.92rem;color:var(--suave);
  transition:transform .25s ease,border-color .25s ease,color .25s ease;
}
.zonas span:hover{transform:translateY(-3px) rotate(-1.5deg);border-color:var(--ambar);color:var(--ambar-cl)}
.zonas--fuerte span{border-color:var(--linea2);color:var(--tinta)}

/* ---------- 16. FORMULARIO ---------- */
.form-caja{
  background:linear-gradient(180deg,var(--carta),var(--fondo2));
  border:1px solid var(--linea2);border-radius:var(--radio);padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--sombra);
}
.paso-form{margin-bottom:1.6rem}
.paso-form > b{
  display:flex;align-items:center;gap:.6rem;font-size:.98rem;margin-bottom:.85rem;
}
.paso-form > b i{
  width:26px;height:26px;border-radius:7px;background:var(--ambar);color:#141005;
  display:grid;place-items:center;font-style:normal;font-size:.8rem;font-weight:800;
}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem}
.opcion{position:relative}
.opcion input{position:absolute;opacity:0;width:0;height:0}
.opcion span{
  display:block;padding:.8rem 1rem;border:1px solid var(--linea);border-radius:var(--radio-s);
  background:var(--fondo);cursor:pointer;font-size:.95rem;font-weight:650;transition:.22s;
}
.opcion small{display:block;font-weight:400;color:var(--tenue);font-size:.82rem;margin-top:.15rem}
.opcion span:hover{border-color:var(--linea2)}
.opcion input:checked + span{border-color:var(--ambar);background:rgba(255,165,31,.1);box-shadow:inset 0 0 0 1px var(--ambar)}
.opcion input:focus-visible + span{outline:3px solid var(--ambar);outline-offset:2px}

.campos{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:.88rem;color:var(--suave);font-weight:600}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.85rem 1rem;border-radius:var(--radio-s);border:1px solid var(--linea);
  background:var(--fondo);color:var(--tinta);font:inherit;font-size:.98rem;transition:border-color .2s,box-shadow .2s;
}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--ambar);box-shadow:0 0 0 3px rgba(255,165,31,.18)}
.campo small{color:var(--tenue);font-size:.8rem}
.acepto{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--suave);margin:1rem 0}
.acepto input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--ambar);flex:none}
.acepto a{color:var(--ambar-cl);text-decoration:underline}
.nota-form{font-size:.85rem;color:var(--tenue);margin:.8rem 0 0}
.aviso-envio{margin-top:1rem;padding:.9rem 1.1rem;border-radius:var(--radio-s);font-size:.95rem}
.aviso-envio--ok{background:rgba(72,207,139,.12);border:1px solid rgba(72,207,139,.4);color:#c9f4de}
.aviso-envio--error{background:rgba(255,95,77,.12);border:1px solid rgba(255,95,77,.4);color:#ffd6d0}

.urgente-caja{
  border:1px solid rgba(255,95,77,.45);background:linear-gradient(180deg,rgba(255,95,77,.12),transparent);
  border-radius:var(--radio);padding:1.4rem;margin-bottom:1.4rem;
}
.urgente-caja h3{color:#ffd6d0;margin-bottom:.4rem}
.urgente-caja p{color:#f4c2ba;font-size:.97rem}
.enlace-suave{background:none;border:0;color:var(--suave);text-decoration:underline;cursor:pointer;font-size:.9rem;padding:0}
.enlace-suave:hover{color:var(--tinta)}
[hidden]{display:none !important}

/* ---------- 17. LLAMADA FINAL ---------- */
.cta{position:relative;overflow:hidden;background:var(--negro);text-align:center;padding:clamp(3.2rem,7vw,5.4rem) 0}
.cta::before{content:"";position:absolute;inset:0;background:var(--lamas);opacity:.55}
.cta::after{content:"";position:absolute;left:50%;top:0;width:min(760px,90vw);height:100%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,165,31,.16),transparent)}
.cta .contenedor{position:relative}
.cta h2{max-width:20ch;margin-inline:auto}
.cta p{color:var(--suave);max-width:58ch;margin-inline:auto;margin-bottom:1.6rem}
.cta .botonera{justify-content:center}

/* ---------- 18. PIE ---------- */
/* El pie va más oscuro que el resto y se abre con una línea ámbar
   y una franja de lamas: se nota que has llegado al final. */
.pie{
  position:relative;background:linear-gradient(180deg,#05070a,#0a0d11 40%,#070a0d);
  padding:3.9rem 0 1.6rem;font-size:.94rem;
}
.pie::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--ambar-os) 12%,var(--ambar) 50%,var(--ambar-os) 88%,transparent);
  box-shadow:0 0 20px rgba(255,165,31,.45);
}
.pie::after{
  content:"";position:absolute;top:3px;left:0;right:0;height:22px;
  background:var(--lamas);opacity:.8;pointer-events:none;
}
.pie__rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2rem}
.pie h4{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ambar);margin-bottom:.9rem}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.5rem}
.pie a{color:var(--suave);transition:color .2s}
.pie a:hover{color:var(--ambar-cl)}
.pie p{color:var(--suave)}
.pie__legal{
  margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--linea);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--tenue);font-size:.85rem;
}

/* ---------- 19. BARRA MÓVIL + SUBIR ---------- */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:1fr 1fr;gap:.5rem;padding:.5rem;
  background:rgba(9,12,16,.94);backdrop-filter:blur(10px);border-top:1px solid var(--linea);
}
.barra-movil .btn{width:100%;padding:.85rem 1rem;font-size:.97rem}
.arriba{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;width:46px;height:46px;border-radius:50%;
  background:var(--carta2);border:1px solid var(--linea2);cursor:pointer;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(12px);transition:.3s;
}
.arriba.visible{opacity:1;pointer-events:auto;transform:none}
.arriba svg{width:18px;height:18px;stroke:var(--tinta);fill:none;stroke-width:2}

/* ---------- 20. MIGAS ---------- */
.migas{font-size:.85rem;color:var(--tenue);padding:1rem 0 0}
.migas a{color:var(--suave)}
.migas a:hover{color:var(--ambar)}

/* ---------- 21. REVELADO AL BAJAR ---------- */
[data-revela]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.3,1)}
[data-revela].visible{opacity:1;transform:none}

/* ---------- 22. LEGAL ---------- */
.legal{max-width:74ch}
.legal h3{margin-top:2rem}
.legal p,.legal li{color:var(--suave)}

/* ---------- 23. RESPONSIVE ---------- */
/* con 6 apartados en el menú, en pantallas medianas se aprieta un poco
   para que no se salga de la barra antes de convertirse en hamburguesa */
@media (max-width:1180px){
  .menu a{padding:.55rem .5rem;font-size:.88rem}
  .menu{gap:0}
}
@media (max-width:1040px){
  .heroe__rejilla{grid-template-columns:1fr}
  .puerta{max-width:520px}
  .rejilla--4,.confianza,.cifras{grid-template-columns:repeat(2,1fr)}
  .pie__rejilla{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.2rem;
    background:var(--negro);border-bottom:1px solid var(--linea);padding:.8rem 1.2rem 1.2rem;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s;
  }
  .menu.abierto{transform:none;opacity:1;pointer-events:auto}
  .menu a{padding:.8rem .6rem;font-size:1.02rem}
  .menu a[aria-current="page"]::after{left:.6rem;right:auto;width:22px;bottom:.5rem}
  .hamburguesa{display:flex}
  .tel-cabecera span{display:none}
  .rejilla--3,.cobro,.mixto{grid-template-columns:1fr}
  .mixto--inv .mixto__foto{order:0}
  .barra-movil{display:grid}
  body{padding-bottom:70px}
  .arriba{bottom:5.2rem}
  .barra-util .contenedor span:last-child{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .rejilla--2,.rejilla--4,.confianza,.cifras{grid-template-columns:1fr}
  .campos{grid-template-columns:1fr}
  .seccion{padding:3rem 0}
  .cortina__palabra{font-size:clamp(2.2rem,13vw,3.6rem)}
}

/* ---------- 24. SIN ANIMACIONES ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  html.cargando .cortina{display:none}
  html.cargando{overflow:auto}
  html.cargando .envoltorio{opacity:1;transform:none}
  [data-revela]{opacity:1;transform:none}
}

/* ---------- 25. IMPRESIÓN ---------- */
@media print{
  .cortina,.barra-movil,.arriba,.cabecera,.barra-util,.galeria__botones{display:none !important}
  body{background:#fff;color:#000}
}