/* ═══════════════════════════════════════════════════════════════════════
   Palm Beach Garage Door Masters · hoja de estilos única
   369 Creative Agency · septiembre 2026

   Cómo está organizada: secciones numeradas. Si quieres cambiar un color
   o una fuente, hazlo en la sección 0 (variables) y se propaga a todo.
   Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 0 · VARIABLES (lo único que hace falta tocar para re-pintar) ═══ */
:root{
  /* Colores sacados del logo. Contrastes medidos (WCAG 2.2 AA):
     marfil sobre negro 17.6:1 · dorado-claro sobre negro 12.9:1
     negro sobre dorado 8.6:1 · dorado-oscuro sobre marfil 5.1:1
     tinta-suave sobre marfil 6.4:1 · negro sobre atardecer 6.7:1 */
  --negro:#0E0E10;
  --carbon:#17171B;          /* tarjetas y bandas sobre negro */
  --carbon-2:#212127;
  --marfil:#F6F1E6;          /* fondo de las secciones de lectura */
  --marfil-2:#EDE6D6;        /* bloque destacado sobre marfil */
  --dorado:#C9A227;          /* acento; NUNCA como texto pequeño sobre marfil */
  --dorado-claro:#F1D77A;    /* texto dorado sobre negro */
  --dorado-oscuro:#8A6D0B;   /* texto dorado sobre marfil */
  --plata:#D9D9DC;
  --atardecer:#E8791D;       /* solo el punto de "open now" y detalles */
  --tinta:#17171A;
  --tinta-suave:#55555C;
  --ok:#2E7D4F;
  --error:#B3261E;
  --linea-oscura:rgba(201,162,39,.28);   /* hairline dorado sobre negro */
  --linea-clara:rgba(23,23,26,.14);      /* hairline sobre marfil */

  /* Tipografía: Cinzel es la familia del logo; Barlow para todo lo demás */
  --display:"Cinzel",Georgia,"Times New Roman",serif;
  --cuerpo:"Barlow","Segoe UI",Arial,sans-serif;
  --tecnica:"Barlow Condensed","Arial Narrow",sans-serif;

  /* Medidas */
  --ancho:1180px;
  --ancho-texto:68ch;
  --margen:clamp(1rem,4vw,2.5rem);
  --nav-alto:96px;
  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2.5rem; --e5:4rem; --e6:6rem; --e7:8rem;
  --radio:4px;

  /* Movimiento: una salida exponencial para todo */
  --sale:cubic-bezier(.16,1,.3,1);
  --t-rapido:160ms; --t-medio:420ms; --t-lento:900ms;
}

/* ═══ 1 · BASE ═══ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; overflow-x:clip;
  font:400 1.125rem/1.55 var(--cuerpo);
  color:var(--tinta); background:var(--marfil);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.18em; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible{ outline:3px solid var(--dorado-claro); outline-offset:3px; }
.oscuro :focus-visible,.hero :focus-visible,.cabecera :focus-visible{ outline-color:var(--dorado-claro); }
.claro :focus-visible{ outline-color:var(--dorado-oscuro); }
.contenedor{ width:min(100% - 2 * var(--margen), var(--ancho)); margin-inline:auto; }
.contenedor--texto{ max-width:var(--ancho-texto); }

/* Zonas claras y oscuras: el sitio alterna negro y marfil, nada más */
.oscuro{ background:var(--negro); color:var(--marfil); }
.oscuro a:hover{ color:var(--dorado-claro); }
.claro{ background:var(--marfil); color:var(--tinta); }
.claro--2{ background:var(--marfil-2); }
.banda{ padding-block:clamp(3.5rem,8vw,6.5rem); }
.banda--corta{ padding-block:clamp(2.25rem,5vw,3.5rem); }

/* ═══ 2 · TIPOGRAFÍA ═══ */
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.1; text-wrap:balance; overflow-wrap:anywhere; min-width:0; }
h1,.t-h1{ font:700 clamp(2.25rem,4.6vw,4rem)/1.05 var(--display); letter-spacing:-.005em; }
h2,.t-h2{ font:600 clamp(1.75rem,3.2vw,2.75rem)/1.1 var(--display); }
h3,.t-h3{ font:700 clamp(1.25rem,2vw,1.5rem)/1.25 var(--cuerpo); }
h4,.t-h4{ font:700 1.125rem/1.3 var(--cuerpo); }
p{ margin:0 0 1em; max-width:var(--ancho-texto); }
p:last-child{ margin-bottom:0; }
.lead{ font-size:clamp(1.2rem,1.6vw,1.4rem); line-height:1.5; }
.suave{ color:var(--tinta-suave); }
.oscuro .suave{ color:var(--plata); }
.cifra{ font:600 clamp(2rem,4vw,3.25rem)/1 var(--display); color:var(--dorado-claro); font-variant-numeric:tabular-nums; }
.claro .cifra{ color:var(--dorado-oscuro); }
.precio{ font:600 1.05rem/1 var(--tecnica); letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cabeza{ display:grid; gap:var(--e2); margin-bottom:clamp(2rem,4vw,3rem); max-width:52rem; }
.cabeza p{ max-width:60ch; }

/* ═══ 3 · BOTONES Y ENLACES ═══ */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.85rem 1.5rem; border-radius:var(--radio);
  font:700 1.05rem/1 var(--cuerpo); text-decoration:none; white-space:nowrap;
  background:var(--dorado); color:var(--negro);
  border:1px solid var(--dorado);
  transition:background var(--t-rapido), border-color var(--t-rapido), transform var(--t-rapido) var(--sale);
}
.boton:hover{ background:var(--dorado-claro); border-color:var(--dorado-claro); color:var(--negro); }
.boton:active{ transform:translateY(1px); }
.boton--negro{ background:var(--negro); border-color:var(--negro); color:var(--dorado-claro); }
.boton--negro:hover{ background:var(--carbon-2); border-color:var(--carbon-2); color:var(--dorado-claro); }
.boton--fantasma{ background:transparent; border-color:currentColor; color:inherit; }
.boton--fantasma:hover{ background:rgba(201,162,39,.12); color:inherit; }
.boton--grande{ min-height:60px; padding:1rem 1.9rem; font-size:1.15rem; }
.boton--bloque{ width:100%; }
.boton[aria-disabled="true"],.boton:disabled{ opacity:.55; pointer-events:none; }
.boton .ico{ width:20px; height:20px; }
.acciones{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }
.enlace{ font-weight:600; color:var(--dorado-oscuro); }
.oscuro .enlace{ color:var(--dorado-claro); }
.ico{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.tel{ font:700 1.2rem/1 var(--cuerpo); text-decoration:none; letter-spacing:.01em; font-variant-numeric:tabular-nums; }

/* ═══ 4 · CABECERA Y NAVEGACIÓN ═══ */
.cabecera{
  /* Sin backdrop-filter a propósito: convierte a la cabecera en contenedor de
     los hijos con position:fixed y recortaba el menú móvil. */
  position:sticky; top:0; z-index:60; background:var(--negro);
  border-bottom:1px solid var(--linea-oscura); color:var(--marfil);
}
.cabecera__fila{ display:flex; align-items:center; gap:var(--e3); min-height:var(--nav-alto); }
.logo{ display:block; flex-shrink:0; }
.logo img{ height:74px; width:auto; }   /* techo + placa: a menos de 70px no se lee GARAGE DOOR MASTERS */
.nav{ display:flex; align-items:center; gap:clamp(.9rem,1.6vw,1.6rem); margin-left:auto; }
.nav__lista{ list-style:none; display:flex; align-items:center; gap:clamp(.9rem,1.6vw,1.6rem); }
.nav__lista > li{ position:relative; }
.nav a,.nav__grupo > button{ display:inline-flex; align-items:center; gap:.25rem; font:600 1.05rem/1 var(--cuerpo); color:var(--marfil); text-decoration:none; padding:.5rem 0; border-bottom:2px solid transparent; transition:color var(--t-rapido), border-color var(--t-rapido); white-space:nowrap; }
.nav a:hover,.nav a[aria-current="page"],.nav__grupo > button:hover,.nav__grupo > button[aria-expanded="true"],.nav__grupo--actual > button{ color:var(--dorado-claro); border-bottom-color:var(--dorado); }
.nav__grupo > button .ico{ width:16px; height:16px; transition:transform var(--t-medio) var(--sale); }
.nav__grupo > button[aria-expanded="true"] .ico{ transform:rotate(180deg); }
/* Desplegables: se abren con hover, con foco de teclado y con click (aria-expanded) */
.nav__desplegable{ list-style:none; position:absolute; left:-1rem; top:calc(100% + .35rem); min-width:15rem; padding:.5rem; background:var(--carbon); border:1px solid var(--linea-oscura); border-radius:var(--radio); box-shadow:0 18px 40px -18px rgba(0,0,0,.8); display:grid; gap:.1rem;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--t-rapido), transform var(--t-medio) var(--sale), visibility 0s linear var(--t-medio); }
.nav__desplegable::before{ content:""; position:absolute; left:0; right:0; top:-.5rem; height:.5rem; }   /* puente para que el hover no se corte */
.nav__desplegable--dos{ min-width:26rem; grid-template-columns:1fr 1fr; }
.nav__desplegable--dos li:last-child{ grid-column:1 / -1; border-top:1px solid var(--linea-oscura); margin-top:.3rem; padding-top:.3rem; }
.nav__desplegable a{ display:block; padding:.55rem .75rem; border-bottom:0; border-radius:3px; font-weight:500; }
.nav__desplegable a:hover,.nav__desplegable a:focus-visible{ background:rgba(201,162,39,.14); color:var(--dorado-claro); }
.nav__grupo:hover > .nav__desplegable,.nav__grupo:focus-within > .nav__desplegable,.nav__grupo > button[aria-expanded="true"] + .nav__desplegable{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.cabecera__tel{ margin-left:auto; color:var(--dorado-claro); }
.nav .boton{ min-height:44px; padding:.6rem 1.15rem; }
.hamburguesa{ display:none; width:48px; height:48px; align-items:center; justify-content:center; margin-left:.25rem; color:var(--marfil); }
.hamburguesa span{ position:relative; display:block; width:24px; height:2px; background:currentColor; transition:transform var(--t-medio) var(--sale), background var(--t-rapido); }
.hamburguesa span::before,.hamburguesa span::after{ content:""; position:absolute; left:0; width:100%; height:2px; background:currentColor; transition:transform var(--t-medio) var(--sale); }
.hamburguesa span::before{ top:-8px; } .hamburguesa span::after{ top:8px; }
.hamburguesa[aria-expanded="true"] span{ background:transparent; }
.hamburguesa[aria-expanded="true"] span::before{ transform:translateY(8px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span::after{ transform:translateY(-8px) rotate(-45deg); }

/* Menú móvil: pantalla completa, negro, enlaces grandes */
.menu-movil{ display:none; }
@media (max-width:1180px){
  .nav{ display:none; }
  .cabecera__tel{ font-size:1.05rem; }
  .hamburguesa{ display:flex; }
  .menu-movil{
    display:block; position:fixed; inset:var(--nav-alto) 0 0 0; z-index:59; background:var(--negro); color:var(--marfil);
    padding:var(--e3) var(--margen) calc(var(--e4) + 90px); overflow:auto;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity var(--t-medio) var(--sale), transform var(--t-medio) var(--sale), visibility 0s linear var(--t-medio);
  }
  .menu-movil[data-abierto="true"]{ transform:none; opacity:1; visibility:visible; transition-delay:0s; }
  .menu-movil ul{ list-style:none; display:grid; gap:.25rem; }
  .menu-movil a{ display:block; padding:.9rem 0; font:600 1.4rem/1.2 var(--cuerpo); text-decoration:none; border-bottom:1px solid var(--linea-oscura); }
  .menu-movil a[aria-current="page"]{ color:var(--dorado-claro); }
  .menu-movil .menu-movil__sub a{ font-size:1.1rem; padding:.65rem 0 .65rem 1rem; color:var(--plata); }
  .menu-movil .acciones{ margin-top:var(--e3); }
  body.menu-abierto{ overflow:hidden; }
}
@media (max-width:640px){ :root{ --nav-alto:80px; } .logo img{ height:60px; } }
@media (max-width:480px){ .cabecera__tel span{ display:none; } .logo img{ height:56px; } }

/* ═══ 5 · HERO CON LA PUERTA (elemento firma) ═══
   La puerta es CSS puro: 4 paneles en una grilla. El JS mueve --y (subida)
   y --rx (inclinación al doblar la esquina) de cada panel según el scroll.
   Sin JS o con movimiento reducido, la puerta se ve abierta y las fichas
   quietas: nada se pierde. */
.hero{ position:relative; background:var(--negro); color:var(--marfil); overflow:clip; }
.hero__fijo{ position:relative; min-height:calc(100svh - var(--nav-alto)); display:grid; align-items:center; padding-block:var(--e4) var(--e5); }
.hero__luz{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 78% 40%, rgba(232,121,29,.16), transparent 70%), radial-gradient(40% 40% at 10% 100%, rgba(201,162,39,.10), transparent 70%); }
.hero__grilla{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.hero__texto{ display:grid; gap:var(--e3); }
.hero__texto h1{ color:var(--marfil); }
.hero__texto h1 em{ font-style:normal; color:var(--dorado-claro); }
.hero__prueba{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; list-style:none; font:600 .98rem/1.3 var(--cuerpo); color:var(--plata); }
.hero__prueba li{ display:flex; align-items:center; gap:.45rem; }
.hero__prueba .ico{ width:18px; height:18px; color:var(--dorado); }

/* La casa */
.escena{ position:relative; width:100%; max-width:640px; margin-inline:auto; }
.casa{ position:relative; aspect-ratio:4/3; border-radius:6px 6px 0 0; overflow:hidden;
  background:linear-gradient(180deg,#F1EBDD 0%,#E6DECB 55%,#D9D0BC 100%); }
.casa__alero{ position:absolute; left:0; right:0; top:0; height:11%; background:linear-gradient(180deg,#26262B,#3A3A41 70%,#1B1B1F); }
.casa__alero::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px; background:linear-gradient(180deg,rgba(0,0,0,.35),transparent); }
.casa__foco{ position:absolute; top:11%; width:9%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(241,215,122,.85),rgba(241,215,122,.15) 55%,transparent 72%); }
.casa__foco--izq{ left:4%; } .casa__foco--der{ right:4%; }
.casa__lampara{ position:absolute; top:34%; width:3.2%; height:9%; background:linear-gradient(180deg,#F1D77A,#C9A227 60%,#6B5310); border-radius:2px; box-shadow:0 0 28px 6px rgba(241,215,122,.45); }
.casa__lampara--izq{ left:5.5%; } .casa__lampara--der{ right:5.5%; }
.casa__piso{ position:absolute; left:0; right:0; bottom:0; height:9%; background:linear-gradient(180deg,#B9B2A3,#A39C8D); }
.casa__piso::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 24%,rgba(0,0,0,.08) 24% calc(24% + 1px)); }

/* El vano: lo que se ve cuando la puerta sube */
.vano{ position:absolute; left:13%; right:13%; top:22%; bottom:9%; overflow:hidden; perspective:900px; perspective-origin:50% 0;
  background:radial-gradient(70% 40% at 50% 0%, rgba(241,215,122,.22), transparent 70%), linear-gradient(180deg,#101014,#0A0A0C); }
.vano__marco{ position:absolute; inset:0; box-shadow:inset 0 0 0 3px #CFC6B2, inset 0 0 0 5px #A79E8A; pointer-events:none; z-index:3; }
.mecanismo{ position:absolute; inset:0; width:100%; height:100%; color:var(--dorado); }
.mecanismo .traza{ fill:none; stroke:currentColor; stroke-width:1.2; vector-effect:non-scaling-stroke; opacity:.85; }
.mecanismo .relleno{ fill:currentColor; opacity:.9; }
.mecanismo .tenue{ opacity:.35; }
.hoja{ position:absolute; inset:0; display:grid; grid-template-rows:repeat(4,1fr); transform-style:preserve-3d; z-index:2; }
.panel{ position:relative; background:linear-gradient(180deg,#25252B 0%,#1B1B20 12%,#161619 88%,#0C0C0E 100%);
  border-bottom:1px solid #050506; transform-origin:50% 0;
  transform:translateY(calc(var(--y,0) * -1%)) rotateX(calc(var(--rx,0) * 1deg)); will-change:transform; backface-visibility:hidden; }
.panel::before{ content:""; position:absolute; left:0; right:0; top:2px; height:1px; background:rgba(255,255,255,.07); }
.panel__ventanas{ position:absolute; right:7%; top:50%; transform:translateY(-50%); display:grid; grid-auto-flow:column; gap:5%; width:36%; height:46%; }
.panel__ventanas i{ display:block; border:1px solid #2E2E34; background:linear-gradient(160deg,#5F7FA0 0%,#F0A45C 45%,#C9C7BC 46%,#8FA9C4 100%); opacity:.9; }
.escena__pie{ margin-top:var(--e2); font-size:.95rem; color:var(--plata); text-align:center; max-width:none; }

/* Fichas de componentes. Por defecto son una lista debajo de la escena (móvil,
   sin JS, movimiento reducido). Solo cuando el JS activa .hero--viva en
   escritorio flotan sobre la escena y entran una a una con el scroll. */
.fichas{ list-style:none; display:grid; gap:.5rem; margin-top:var(--e3); }
.ficha{ position:relative; background:rgba(14,14,16,.92); border:1px solid var(--dorado); border-radius:var(--radio); padding:.7rem .9rem; color:var(--marfil); display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:1rem; row-gap:.15rem; }
.ficha b{ font:700 1rem/1.2 var(--cuerpo); color:var(--dorado-claro); }
.ficha span{ font-size:.9rem; line-height:1.3; color:var(--plata); }
.ficha .precio{ color:var(--marfil); font-size:1rem; grid-row:1 / span 2; }
.pin{ display:none; position:absolute; left:var(--px); top:var(--py); width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--dorado); box-shadow:0 0 0 5px rgba(201,162,39,.28); z-index:4; pointer-events:none; }
.escena__pie--scroll{ display:none; }
@media (min-width:901px){
  .js .hero--viva .fichas{ position:absolute; inset:0 0 auto 0; aspect-ratio:4/3; margin:0; display:block; pointer-events:none; z-index:5; }
  .js .hero--viva .ficha{ position:absolute; width:min(44%,230px); left:var(--fx); top:var(--fy); pointer-events:auto; display:grid; grid-template-columns:1fr; column-gap:0; }
  .js .hero--viva .ficha .precio{ grid-row:auto; }
  .js .hero--viva .pin{ display:block; }
  .js .hero--viva .ficha,.js .hero--viva .pin{ opacity:var(--o,0); transition:none; }
  .js .hero--viva .ficha{ transform:translateY(calc((1 - var(--o,0)) * 14px)); }
  .js .hero--viva .ficha[data-oculto]{ visibility:hidden; }
  .js .hero--viva .escena__pie--scroll{ display:inline; }
  .js .hero--viva .escena__pie--quieto{ display:none; }
}
@media (max-width:900px){
  .hero__grilla{ grid-template-columns:minmax(0,1fr); }
  .escena{ order:-1; max-width:560px; }
}
/* Movimiento: escritorio es sticky y lo mueve el scroll; móvil abre sola al cargar */
.js .hero--viva{ height:260vh; }
.js .hero--viva .hero__fijo{ position:sticky; top:var(--nav-alto); height:calc(100svh - var(--nav-alto)); min-height:0; }
.js .hero--abriendo .panel{ transition:transform 1.6s var(--sale); }
.js .hero--abriendo .panel:nth-child(1){ transition-delay:.1s; }
.js .hero--abriendo .panel:nth-child(2){ transition-delay:.18s; }
.js .hero--abriendo .panel:nth-child(3){ transition-delay:.26s; }
.js .hero--abriendo .panel:nth-child(4){ transition-delay:.34s; }
/* Sin JS y con movimiento reducido: puerta abierta, fichas visibles */
html:not(.js) .panel,.hero--quieta .panel{ --y:400; --rx:0; }
@media (prefers-reduced-motion:reduce){ .panel{ --y:400!important; transition:none!important; } }

/* ═══ 6 · FRANJA DE PRUEBA (justo debajo del hero) ═══ */
.prueba{ border-top:1px solid var(--linea-oscura); border-bottom:1px solid var(--linea-oscura); }
.prueba ul{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.prueba li{ padding:1.4rem 1.25rem; display:grid; gap:.25rem; border-left:1px solid var(--linea-oscura); }
.prueba li:first-child{ border-left:0; }
.prueba b{ font:700 1.1rem/1.2 var(--cuerpo); color:var(--dorado-claro); }
.prueba span{ font-size:.98rem; color:var(--plata); }
@media (max-width:700px){ .prueba li{ border-left:0; border-top:1px solid var(--linea-oscura); padding-inline:0; } .prueba li:first-child{ border-top:0; } }

/* ═══ 7 · CHEQUEO DE 60 SEGUNDOS ═══ */
.chequeo{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.chequeo-caja{ background:var(--negro); color:var(--marfil); border:1px solid var(--dorado); border-radius:var(--radio); overflow:hidden; }
.chequeo-barra{ height:5px; background:var(--carbon-2); }
.chequeo-barra i{ display:block; height:100%; width:100%; background:var(--dorado); transform:scaleX(0); transform-origin:left center; transition:transform var(--t-medio) var(--sale); }
.chequeo-cuerpo{ padding:clamp(1.5rem,3.5vw,2.5rem); }
.chequeo-paso{ display:none; }
.chequeo-paso.activo{ display:block; animation:entrar var(--t-medio) var(--sale); }
.chequeo-conteo{ display:block; font:600 .95rem/1 var(--tecnica); letter-spacing:.06em; color:var(--plata); margin-bottom:.9rem; }
.chequeo-paso h3{ color:var(--marfil); font-size:1.4rem; }
.opciones{ display:grid; gap:.6rem; margin-top:1.2rem; }
.opcion{ text-align:left; padding:.95rem 1.1rem; border:1px solid var(--linea-oscura); border-radius:var(--radio); background:var(--carbon); color:var(--marfil); font-weight:500; transition:border-color var(--t-rapido), background var(--t-rapido); min-height:52px; }
.opcion:hover{ border-color:var(--dorado); }
.opcion[aria-pressed="true"]{ border-color:var(--dorado); background:rgba(201,162,39,.14); }
.chequeo-pie{ display:flex; justify-content:space-between; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--linea-oscura); }
.chequeo-atras{ font-weight:600; color:var(--plata); text-decoration:underline; padding:.5rem 0; }
.veredicto{ display:none; }
.veredicto.activo{ display:grid; gap:.9rem; animation:entrar var(--t-medio) var(--sale); }
.veredicto-marca{ justify-self:start; font:700 .9rem/1 var(--tecnica); letter-spacing:.08em; text-transform:uppercase; padding:.45rem .7rem; border-radius:2px; }
.riesgo-bajo{ background:#DCE9D6; color:#1F4A1D; } .riesgo-medio{ background:#F3E4C8; color:#6A420E; } .riesgo-alto{ background:#F5D6CA; color:#7A2412; }
.veredicto h3{ color:var(--marfil); font-size:1.5rem; }
.veredicto-lista{ list-style:none; display:grid; gap:.5rem; }
.veredicto-lista li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--plata); }
.veredicto-lista svg{ width:20px; height:20px; flex-shrink:0; margin-top:.2em; color:var(--dorado); fill:none; stroke:currentColor; stroke-width:2; }
.veredicto-precio{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; padding:.9rem 1rem; background:var(--carbon); border-radius:var(--radio); }
.veredicto-precio b{ font:600 1.6rem/1 var(--display); color:var(--dorado-claro); }
.veredicto-nota{ font-size:.92rem; color:var(--plata); }
.chequeo-reinicio{ justify-self:start; color:var(--plata); text-decoration:underline; font-weight:600; }
@keyframes entrar{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@media (max-width:860px){ .chequeo{ grid-template-columns:minmax(0,1fr); } }

/* ═══ 8 · SERVICIOS (lista tipo carta, no tarjetas iguales) ═══ */
.carta{ list-style:none; border-top:1px solid var(--linea-clara); }
.carta__item{ border-bottom:1px solid var(--linea-clara); }
.carta__enlace{ display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:var(--e3); align-items:center; padding:1.25rem 0; text-decoration:none; color:inherit; transition:background var(--t-rapido); }
.carta__enlace:hover{ background:rgba(201,162,39,.07); }
.carta__enlace img{ width:120px; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radio); }
.carta__enlace h3{ font:600 clamp(1.25rem,2.2vw,1.65rem)/1.15 var(--display); margin-bottom:.35rem; }
.carta__enlace p{ color:var(--tinta-suave); max-width:60ch; }
.carta__precio{ display:grid; justify-items:end; gap:.2rem; text-align:right; }
.carta__precio small{ font-size:.85rem; color:var(--tinta-suave); }
.carta__precio .precio{ font-size:1.2rem; color:var(--dorado-oscuro); }
@media (max-width:640px){
  .carta__enlace{ grid-template-columns:88px minmax(0,1fr); }
  .carta__enlace img{ width:88px; }
  .carta__precio{ grid-column:2; justify-items:start; text-align:left; }
}

/* ═══ 9 · PRECIOS (tabla con puntos guía, como una carta) ═══ */
.tarifa{ list-style:none; display:grid; gap:0; max-width:56rem; }
.tarifa li{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--linea-oscura); }
.claro .tarifa li{ border-bottom-color:var(--linea-clara); }
.tarifa b{ font-weight:600; }
.tarifa small{ display:block; font-size:.95rem; color:var(--plata); font-weight:400; }
.claro .tarifa small{ color:var(--tinta-suave); }
.tarifa .precio{ font-size:1.2rem; color:var(--dorado-claro); }
.claro .tarifa .precio{ color:var(--dorado-oscuro); }
.promesa{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--e3); }
.promesa div{ padding:var(--e3); border:1px solid var(--linea-oscura); border-radius:var(--radio); display:grid; gap:.5rem; align-content:start; }
.claro .promesa div{ border-color:var(--linea-clara); background:var(--marfil-2); }
.promesa h3{ color:var(--dorado-claro); }
.claro .promesa h3{ color:var(--dorado-oscuro); }
.dos-col{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width:860px){ .dos-col{ grid-template-columns:minmax(0,1fr); } }
.banderas{ list-style:none; display:grid; gap:.8rem; }
.banderas li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.8rem; align-items:start; }
.banderas .ico{ color:var(--error); margin-top:.15em; }
.banderas b{ display:block; }

/* ═══ 10 · HURACÁN: calculadora y verificador ═══ */
.calculadora{ display:grid; gap:1.1rem; padding:clamp(1.5rem,3vw,2.25rem); background:var(--negro); color:var(--marfil); border-radius:var(--radio); border:1px solid var(--dorado); }
.calculadora label{ display:grid; gap:.4rem; font-weight:600; }
.calculadora select,.calculadora input[type="number"],.forma input,.forma select,.forma textarea{
  width:100%; min-height:52px; padding:.7rem .9rem; border:1px solid var(--linea-oscura); border-radius:var(--radio);
  background:var(--carbon); color:var(--marfil); font-weight:500;
}
.claro .forma input,.claro .forma select,.claro .forma textarea{ background:#fff; color:var(--tinta); border-color:rgba(23,23,26,.28); }
.calculadora input[type="range"]{ width:100%; accent-color:var(--dorado); }
.calculadora output{ display:block; }
.resultado{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; padding-top:1rem; border-top:1px solid var(--linea-oscura); }
.resultado div{ display:grid; gap:.2rem; }
.resultado small{ color:var(--plata); font-size:.92rem; }
.verificador{ display:grid; gap:1rem; }
.verificador fieldset{ border:0; padding:0; margin:0; display:grid; gap:.5rem; }
.verificador legend{ font-weight:600; margin-bottom:.4rem; }
.verificador label{ display:flex; gap:.6rem; align-items:center; padding:.7rem .9rem; border:1px solid var(--linea-clara); border-radius:var(--radio); background:#fff; cursor:pointer; }
.verificador input{ accent-color:var(--dorado-oscuro); width:20px; height:20px; }
.veredicto-huracan{ display:none; padding:1.2rem; border-radius:var(--radio); background:var(--negro); color:var(--marfil); }
.veredicto-huracan.visible{ display:grid; gap:.5rem; }
.veredicto-huracan h3{ color:var(--dorado-claro); }
.pasos{ list-style:none; counter-reset:paso; display:grid; gap:1.25rem; }
.pasos li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem; align-items:start; counter-increment:paso; }
.pasos li::before{ content:counter(paso); font:600 1.4rem/1 var(--display); color:var(--dorado-oscuro); width:2.2rem; height:2.2rem; display:grid; place-items:center; border:1px solid var(--dorado); border-radius:50%; }
.oscuro .pasos li::before{ color:var(--dorado-claro); }
.pasos b{ display:block; }

/* ═══ 11 · FOTOS Y EQUIPO ═══ */
.fotos{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--e2); }
.fotos figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--radio); }
.fotos img{ width:100%; height:100%; object-fit:cover; }
.fotos figcaption{ position:absolute; left:0; right:0; bottom:0; padding:2.5rem 1rem .9rem; color:var(--marfil); font-weight:600; font-size:1rem; background:linear-gradient(180deg,transparent,rgba(14,14,16,.85)); }
.fotos figure:nth-child(1){ grid-column:span 7; aspect-ratio:16/10; }
.fotos figure:nth-child(2){ grid-column:span 5; aspect-ratio:4/3; }
.fotos figure:nth-child(3){ grid-column:span 5; aspect-ratio:4/3; }
.fotos figure:nth-child(4){ grid-column:span 7; aspect-ratio:16/10; }
@media (max-width:760px){ .fotos figure{ grid-column:span 12!important; aspect-ratio:4/3!important; } }
.retrato{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.retrato img{ border-radius:var(--radio); width:100%; }
@media (max-width:860px){ .retrato{ grid-template-columns:minmax(0,1fr); } }

/* ═══ 12 · RESEÑAS ═══ */
.resenas{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--e3); align-items:start; }
.resena{ padding:var(--e3) var(--e3) var(--e3) calc(var(--e3) + 1.6rem); position:relative; border:1px solid var(--linea-clara); border-radius:var(--radio); background:#fff; display:grid; gap:.8rem; }
.oscuro .resena{ background:var(--carbon); border-color:var(--linea-oscura); }
.resena::before{ content:"\201C"; position:absolute; left:.9rem; top:.4rem; font:700 3.4rem/1 var(--display); color:var(--dorado); }
.resena p{ font-size:1.05rem; }
.resena footer{ display:grid; gap:.1rem; font-size:.95rem; color:var(--tinta-suave); }
.oscuro .resena footer{ color:var(--plata); }
.resena footer b{ color:var(--tinta); font-weight:600; }
.oscuro .resena footer b{ color:var(--marfil); }
.estrellas{ display:inline-flex; gap:2px; color:var(--dorado); }
.estrellas svg{ width:18px; height:18px; fill:currentColor; }
.resenas li:nth-child(2){ margin-top:var(--e3); }
.resenas li:nth-child(3){ margin-top:var(--e5); }
@media (max-width:640px){ .resenas li{ margin-top:0!important; } }
.rating{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; }
.rating .cifra{ font-size:2.6rem; }

/* ═══ 13 · ZONAS Y ZIP ═══ */
.zip-forma{ display:flex; gap:.6rem; max-width:24rem; }
.zip-forma input{ flex:1; min-width:0; min-height:52px; padding:.7rem .9rem; border:1px solid rgba(23,23,26,.3); border-radius:var(--radio); background:#fff; font-size:1.1rem; font-variant-numeric:tabular-nums; }
.oscuro .zip-forma input{ background:var(--carbon); color:var(--marfil); border-color:var(--linea-oscura); }
.zip-respuesta{ display:none; margin-top:1rem; padding:1rem 1.2rem; border-radius:var(--radio); background:var(--marfil-2); border:1px solid var(--linea-clara); max-width:36rem; }
.oscuro .zip-respuesta{ background:var(--carbon); border-color:var(--linea-oscura); }
.zip-respuesta.visible{ display:block; }
.zip-respuesta.fuera{ border-color:var(--atardecer); }
.ciudades{ list-style:none; columns:3; column-gap:var(--e3); }
.ciudades li{ break-inside:avoid; padding:.35rem 0; }
.ciudades a{ font-weight:600; text-decoration:none; }
.ciudades a:hover{ text-decoration:underline; }
@media (max-width:760px){ .ciudades{ columns:2; } }

/* ═══ 14 · FAQ ═══ */
.faq{ border-top:1px solid var(--linea-clara); max-width:52rem; }
.oscuro .faq{ border-top-color:var(--linea-oscura); }
.faq__item{ border-bottom:1px solid var(--linea-clara); }
.oscuro .faq__item{ border-bottom-color:var(--linea-oscura); }
.faq__boton{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3); width:100%; padding:1.2rem 0; text-align:left; font:600 1.2rem/1.35 var(--cuerpo); color:inherit; transition:color var(--t-rapido); }
.faq__boton:hover{ color:var(--dorado-oscuro); }
.oscuro .faq__boton:hover{ color:var(--dorado-claro); }
.faq__signo{ position:relative; flex-shrink:0; width:22px; height:22px; margin-top:.25em; color:var(--dorado); }
.faq__signo::before,.faq__signo::after{ content:""; position:absolute; top:50%; left:0; width:100%; height:2px; background:currentColor; transition:transform var(--t-medio) var(--sale); }
.faq__signo::after{ transform:rotate(90deg); }
.faq__boton[aria-expanded="true"] .faq__signo::after{ transform:rotate(0); }
.faq__panel{ display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--t-medio) var(--sale); }
.faq__panel > div{ overflow:hidden; visibility:visible; padding-bottom:1.4rem; }
.js .faq__panel[data-abierto="false"]{ grid-template-rows:0fr; }
.js .faq__panel[data-abierto="false"] > div{ visibility:hidden; transition:visibility 0s linear var(--t-medio); }

/* ═══ 15 · CIERRE Y FORMULARIOS ═══ */
.cierre{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width:860px){ .cierre{ grid-template-columns:minmax(0,1fr); } }
.forma{ display:grid; gap:1rem; }
.forma label{ display:grid; gap:.4rem; font-weight:600; }
.forma label small{ font-weight:400; color:var(--tinta-suave); }
.oscuro .forma label small{ color:var(--plata); }
.forma .fila{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; }
.forma .error{ display:none; color:#F4B3AB; font-size:.95rem; font-weight:500; }
.claro .forma .error{ color:var(--error); }
.forma [aria-invalid="true"]{ border-color:var(--error)!important; }
.forma [aria-invalid="true"] ~ .error,.forma .error.visible{ display:block; }
.forma__ok{ display:none; padding:1.2rem; border-radius:var(--radio); background:rgba(46,125,79,.18); border:1px solid var(--ok); }
.forma__ok.visible{ display:block; }
.forma__nota{ font-size:.92rem; color:var(--plata); }
.claro .forma__nota{ color:var(--tinta-suave); }

/* ═══ 16 · PIE ═══ */
.pie{ background:var(--negro); color:var(--plata); border-top:1px solid var(--linea-oscura); padding-block:var(--e5) var(--e4); }
.pie__grilla{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:var(--e4); }
.pie h3{ color:var(--marfil); font-size:1.05rem; margin-bottom:.8rem; }
.pie ul{ list-style:none; display:grid; gap:.45rem; }
.pie a{ text-decoration:none; }
.pie a:hover{ color:var(--dorado-claro); text-decoration:underline; }
.pie__emblema{ width:200px; margin-bottom:1rem; }
.pie__nap{ font-style:normal; display:grid; gap:.3rem; }
.pie__nap .tel{ color:var(--dorado-claro); font-size:1.35rem; }
.pie__legal{ margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--linea-oscura); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; font-size:.92rem; }
.pie__legal p{ max-width:none; }
@media (max-width:860px){ .pie__grilla{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .pie__grilla{ grid-template-columns:minmax(0,1fr); } }

/* ═══ 17 · PÁGINAS INTERIORES ═══
   Hero a todo el ancho: la foto va de fondo y el texto encima, con un velo
   oscuro a la izquierda para que se lea (no una capa negra uniforme). */
.hero-int{ position:relative; background:var(--negro); color:var(--marfil); overflow:clip; isolation:isolate; }
.hero-int__foto{ position:absolute; inset:0; z-index:0; }
.hero-int__foto img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.hero-int__foto::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(14,14,16,.94) 0%, rgba(14,14,16,.82) 34%, rgba(14,14,16,.42) 62%, rgba(14,14,16,.12) 100%),
             linear-gradient(0deg, rgba(14,14,16,.88) 0%, rgba(14,14,16,0) 42%),
             linear-gradient(180deg, rgba(14,14,16,.45) 0%, rgba(14,14,16,0) 30%); }
.hero-int__grilla{ position:static; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; min-height:min(72vh,680px); padding-block:clamp(3.5rem,8vw,6rem); }
.hero-int__texto{ position:relative; z-index:1; display:grid; gap:var(--e3); max-width:44rem; }   /* por encima de la foto */
.hero-int__texto h1{ color:var(--marfil); text-shadow:0 1px 2px rgba(14,14,16,.6), 0 2px 26px rgba(14,14,16,.7); }
.hero-int__texto .lead{ text-shadow:0 1px 2px rgba(14,14,16,.6), 0 1px 18px rgba(14,14,16,.6); max-width:38rem; }
.hero-int--home .hero-int__grilla{ min-height:min(86vh,800px); }
.hero-int--home h1 em{ font-style:normal; color:var(--dorado-claro); }
.hero-int--home .hero-int__foto img{ object-position:62% 40%; }   /* el técnico queda a la derecha del texto */
.hero .hero__texto h2{ color:var(--marfil); }
.hero{ border-top:1px solid var(--linea-oscura); }
@media (max-width:860px){
  .hero-int__foto img{ object-position:center 40%; }
  .hero-int__foto::after{ background:linear-gradient(180deg, rgba(14,14,16,.55) 0%, rgba(14,14,16,.82) 45%, rgba(14,14,16,.94) 100%); }
  .hero-int__grilla{ min-height:min(80vh,620px); align-items:end; }
}
.miga{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; font-size:.95rem; color:var(--plata); }
.miga li + li::before{ content:"/"; margin-right:.4rem; color:var(--dorado); }
.miga a{ text-decoration:none; }
.miga a:hover{ text-decoration:underline; }
.prosa{ max-width:var(--ancho-texto); }
.prosa h2{ margin-top:var(--e4); margin-bottom:var(--e2); }
.prosa h2:first-child{ margin-top:0; }
.prosa h3{ margin-top:var(--e3); margin-bottom:.6rem; }
.prosa ul,.prosa ol{ padding-left:1.3rem; margin-bottom:1em; display:grid; gap:.4rem; }
.prosa li::marker{ color:var(--dorado-oscuro); }
.oscuro .prosa li::marker{ color:var(--dorado); }
.sintomas{ list-style:none; display:grid; gap:.75rem; }
.sintomas li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.8rem; align-items:start; padding:.9rem 1rem; background:var(--marfil-2); border-radius:var(--radio); }
.oscuro .sintomas li{ background:var(--carbon); }
.sintomas .ico{ color:var(--dorado-oscuro); margin-top:.15em; }
.oscuro .sintomas .ico{ color:var(--dorado); }
.destacado{ padding:clamp(1.5rem,3vw,2.25rem); border:1px solid var(--dorado); border-radius:var(--radio); background:var(--negro); color:var(--marfil); display:grid; gap:.8rem; }
.destacado h3{ color:var(--dorado-claro); }
.destacado .precio{ font-size:1.6rem; color:var(--marfil); }
.lateral{ display:grid; gap:var(--e3); position:sticky; top:calc(var(--nav-alto) + 1.5rem); }
.con-lateral{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:960px){ .con-lateral{ grid-template-columns:minmax(0,1fr); } .lateral{ position:static; } }
.tabla{ width:100%; border-collapse:collapse; font-size:1rem; }
.tabla th,.tabla td{ text-align:left; padding:.8rem .6rem; border-bottom:1px solid var(--linea-clara); vertical-align:top; }
.tabla th{ font-weight:700; }
.tabla td:last-child,.tabla th:last-child{ text-align:right; white-space:nowrap; }
.oscuro .tabla th,.oscuro .tabla td{ border-bottom-color:var(--linea-oscura); }
.tabla-envoltura{ overflow-x:auto; }
.galeria{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--e2); }
.galeria figure{ margin:0; }
.galeria img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radio); }
.galeria figcaption{ padding-top:.5rem; font-size:.95rem; color:var(--tinta-suave); }
.oscuro .galeria figcaption{ color:var(--plata); }
.marcas{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; }
.marcas li{ padding:.5rem .9rem; border:1px solid var(--linea-clara); border-radius:999px; font-weight:600; font-size:.95rem; }
.oscuro .marcas li{ border-color:var(--linea-oscura); }
.enlaces-rel{ list-style:none; display:grid; gap:.4rem; }
.enlaces-rel a{ display:block; padding:.7rem 0; border-bottom:1px solid var(--linea-clara); text-decoration:none; font-weight:600; }
.oscuro .enlaces-rel a{ border-bottom-color:var(--linea-oscura); }
.enlaces-rel a:hover{ color:var(--dorado-oscuro); }
.pagina-404{ min-height:60vh; display:grid; place-items:center; text-align:center; }

/* ═══ 18 · RESERVA EN TRES PASOS ═══ */
.reserva{ max-width:44rem; background:var(--negro); color:var(--marfil); border:1px solid var(--dorado); border-radius:var(--radio); overflow:hidden; }
.reserva__paso{ display:none; padding:clamp(1.5rem,3.5vw,2.5rem); }
.reserva__paso.activo{ display:grid; gap:1.2rem; animation:entrar var(--t-medio) var(--sale); }
html:not(.js) .reserva__paso{ display:grid; gap:1.2rem; }
.reserva__paso h2{ font-size:1.6rem; color:var(--marfil); }
.reserva__pie{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.reserva__resumen{ padding:1rem 1.1rem; background:var(--carbon); border-radius:var(--radio); display:grid; gap:.3rem; font-size:1rem; }
.reserva__resumen b{ color:var(--dorado-claro); }
.fichas-radio{ display:grid; gap:.6rem; }
.fichas-radio label{ display:flex; gap:.7rem; align-items:center; padding:.9rem 1rem; border:1px solid var(--linea-oscura); border-radius:var(--radio); background:var(--carbon); cursor:pointer; font-weight:500; transition:border-color var(--t-rapido); min-height:52px; }
.fichas-radio label:hover{ border-color:var(--dorado); }
.fichas-radio input{ accent-color:var(--dorado); width:20px; height:20px; flex-shrink:0; }
.fichas-radio input:checked + span{ color:var(--dorado-claro); }
.fichas-radio label:has(input:checked){ border-color:var(--dorado); background:rgba(201,162,39,.12); }

/* ═══ 19 · ESTADO, BARRA MÓVIL, AVISO ═══ */
.estado{ display:inline-flex; align-items:center; gap:.5rem; font:600 .95rem/1.2 var(--cuerpo); color:var(--plata); }
.estado__punto{ width:.6em; height:.6em; border-radius:50%; background:var(--plata); flex-shrink:0; }
.estado--abierto .estado__punto{ background:var(--atardecer); box-shadow:0 0 0 4px rgba(232,121,29,.22); }
.barra-movil{ position:fixed; left:0; right:0; bottom:0; z-index:58; display:none; gap:.6rem;
  padding:.6rem var(--margen) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(14,14,16,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--linea-oscura); }
.barra-movil .boton{ flex:1; min-height:54px; }
.barra-movil .boton--fantasma{ color:var(--marfil); border-color:var(--dorado); }
@media (max-width:760px){ .barra-movil{ display:flex; } body.con-barra{ padding-bottom:calc(78px + env(safe-area-inset-bottom)); } }
@media print{ .barra-movil,.cabecera,.pie,.hero,.menu-movil{ display:none!important; } body{ background:#fff; color:#000; } }

/* ═══ 20 · ENTRADAS POR SCROLL Y SEPARADOR FIRMA (el techo del logo) ═══ */
.js [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity var(--t-lento) var(--sale), transform var(--t-lento) var(--sale); }
.js [data-reveal].en-vista{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:100ms; }
[data-reveal][data-delay="2"]{ transition-delay:200ms; }
[data-reveal][data-delay="3"]{ transition-delay:300ms; }
[data-reveal][data-delay="4"]{ transition-delay:400ms; }
.cumbrera{ display:block; width:100%; height:64px; overflow:visible; color:var(--dorado); }
.cumbrera__techo,.cumbrera__linea,.cumbrera__ventana{ vector-effect:non-scaling-stroke; }
.cumbrera--lista .cumbrera__techo{ stroke-dasharray:320; stroke-dashoffset:320; }
.cumbrera--lista.en-vista .cumbrera__techo{ stroke-dashoffset:0; transition:stroke-dashoffset 1.4s var(--sale); }
.cumbrera--lista .cumbrera__ventana,.cumbrera--lista .cumbrera__linea{ opacity:0; }
.cumbrera--lista.en-vista .cumbrera__ventana{ opacity:1; transition:opacity 500ms var(--sale) 900ms; }
.cumbrera--lista.en-vista .cumbrera__linea{ opacity:1; transition:opacity 800ms var(--sale) 500ms; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; }
  .cumbrera *{ opacity:1!important; stroke-dashoffset:0!important; transition:none!important; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
@view-transition{ navigation:auto; }