/* Hallmark · macrostructure: coastal badge (custom) · tone: vecino soleado · anchor hue: marino 250° + sol 40°
   Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 */
/* ═══════════════════════════════════════════════════════════════════════
   561 Palm Beach Garage Doors · hoja de estilos única
   369 Creative Agency · septiembre 2026

   Cómo está organizada: secciones numeradas. Para cambiar un color o una
   fuente, hazlo en la sección 0 (variables) y se propaga a todo el sitio.
   El idioma visual sale del logo: marino, sol, celeste, placas con borde
   dorado y el sol con franjas horizontales.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 0 · VARIABLES ═══ */
:root{
  /* Colores medidos sobre el logo. Contrastes WCAG 2.2 (medidos):
     marino sobre blanco 16.1:1 · marino sobre sol 9.3:1 · marino sobre espuma 14.4:1
     celeste-claro sobre marino 9.9:1 · celeste sobre marino 6.1:1
     mar sobre blanco 6.2:1 · mar sobre espuma 5.6:1 · tinta-2 sobre blanco 7.6:1
     palmera sobre blanco 6.4:1 · sol sobre marino-2 6.7:1
     OJO: blanco sobre celeste da 2.6:1 y blanco sobre sol menos de 2:1.
     Por eso los botones amarillos llevan texto MARINO, no blanco. No "corregirlo". */
  --marino:#012242;
  --marino-2:#0B3A66;        /* tarjetas y placas sobre marino */
  --marino-3:#021A33;        /* fondo más hondo (tormenta, pie) */
  --sol:#FDB93A;             /* botón principal y acentos */
  --sol-vivo:#FFC95E;        /* hover del botón sol */
  --sol-borde:#D48E12;       /* canto inferior del botón, como el borde de las placas del logo */
  --celeste:#34AEC4;         /* líneas, íconos, detalles sobre marino */
  --celeste-claro:#8FD6E3;   /* texto celeste sobre marino */
  --mar:#0A6A7C;             /* texto celeste-verdoso sobre blanco o espuma */
  --espuma:#E8F5F7;          /* banda clara */
  --arena:#FFF6E6;           /* banda cálida, solo en bloques puntuales */
  --blanco:#FFFFFF;
  --tinta:#012242;
  --tinta-2:#3E5670;         /* texto secundario */
  --palmera:#1D6B55;         /* "open now", confirmaciones */
  --error:#B3261E;
  --linea:rgba(1,34,66,.14);
  --linea-osc:rgba(143,214,227,.24);

  /* Tipografía: Alfa Slab One tiene el peso y la losa del "561" y de "PALM BEACH".
     Rethink Sans para todo lo demás: humanista, legible a 18 px. */
  --display:"Alfa Slab One","Rockwell","Roboto Slab",Georgia,serif;
  --cuerpo:"Rethink Sans","Segoe UI",system-ui,sans-serif;

  --t-base:1.125rem;         /* 18 px: la regla de la casa es texto grande */
  --t-chico:1rem;
  --t-micro:.875rem;
  --t-h1:clamp(2.4rem,1.5rem + 3.4vw,4.3rem);
  --t-h2:clamp(2rem,1.3rem + 2.8vw,3.4rem);
  --t-h3:clamp(1.35rem,1.1rem + .9vw,1.7rem);

  /* Espaciado en escala de 4 */
  --e1:.25rem; --e2:.5rem; --e3:1rem; --e4:1.5rem; --e5:2rem; --e6:3rem; --e7:4.5rem; --e8:6.5rem;
  --margen:clamp(1rem,4vw,2.5rem);
  --ancho:1200px;
  --ancho-texto:66ch;
  --radio:14px;              /* el de las placas del logo */
  --radio-chico:8px;

  --sale:cubic-bezier(.16,1,.3,1);
  --entra:cubic-bezier(.7,0,.84,0);
  --t-rapido:160ms; --t-medio:320ms; --t-lento:700ms;
  --sombra:0 10px 30px -12px rgba(1,34,66,.35);
}

/* ═══ 1 · BASE ═══ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; overflow-x:clip;
  font:400 var(--t-base)/1.6 var(--cuerpo); color:var(--tinta); background:var(--blanco);
  text-rendering:optimizeLegibility;
}
@media (max-width:760px){ body{ font-size:1.0625rem; } }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:var(--mar); text-underline-offset:.18em; text-decoration-thickness:1.5px; }
a:hover{ color:var(--marino); }
h1,h2,h3,h4{ margin:0 0 var(--e3); line-height:1.08; font-weight:400; text-wrap:balance; overflow-wrap:anywhere; min-width:0; }
h1,h2{ font-family:var(--display); letter-spacing:-.01em; }
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font:800 var(--t-h3)/1.2 var(--cuerpo); letter-spacing:-.01em; }
p{ margin:0 0 var(--e3); max-width:var(--ancho-texto); }
ul,ol{ margin:0 0 var(--e3); padding-left:1.2em; }
strong{ font-weight:700; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
:focus-visible{ outline:3px solid var(--sol); outline-offset:3px; border-radius:4px; }
.oscuro :focus-visible{ outline-color:var(--sol); }
.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; }
.saltar{ position:absolute; left:var(--e3); top:-100px; z-index:100; padding:var(--e2) var(--e3); background:var(--sol); color:var(--marino); font-weight:700; border-radius:var(--radio-chico); }
.saltar:focus{ top:var(--e3); }
.ico{ width:1.25em; height:1.25em; flex-shrink:0; }
@view-transition{ navigation:auto; }

/* ═══ 2 · ESTRUCTURA ═══ */
.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--margen); }
.banda{ padding-block:var(--e8); position:relative; }
.banda--corta{ padding-block:var(--e7); }
.oscuro{ background:var(--marino); color:var(--blanco); }
/* Todo fondo marino (bandas oscuras, hero, tormenta, cierre) comparte estas reglas */
:is(.oscuro,.hero,.tormenta,.cierre) a:not(.boton){ color:var(--celeste-claro); }
:is(.oscuro,.hero,.tormenta,.cierre) a:not(.boton):hover{ color:var(--blanco); }
:is(.oscuro,.hero,.tormenta,.cierre) .suave{ color:var(--celeste-claro); }
.espuma{ background:var(--espuma); }
.arena{ background:var(--arena); }
.suave{ color:var(--tinta-2); }
.lead{ font-size:clamp(1.15rem,1rem + .5vw,1.35rem); line-height:1.55; }
.cabeza-seccion{ max-width:52rem; margin-bottom:var(--e6); }
.cabeza-seccion p{ font-size:1.2rem; }
.dos-col{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e7); align-items:center; }
@media (max-width:900px){ .dos-col{ grid-template-columns:minmax(0,1fr); gap:var(--e5); } }
.foto{ border-radius:var(--radio); overflow:hidden; background:var(--espuma); }
.foto img{ width:100%; height:100%; object-fit:cover; }
figure{ margin:0; }
figcaption{ margin-top:var(--e2); font-size:var(--t-micro); color:var(--tinta-2); }
.oscuro figcaption{ color:var(--celeste-claro); }

/* ═══ 3 · BOTONES ═══
   El botón sol copia las placas del logo: fondo amarillo, texto marino y
   un canto inferior más oscuro que le da peso de "placa". */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:52px; padding:.8rem 1.4rem;
  font:800 1.0625rem/1.1 var(--cuerpo); letter-spacing:.005em; text-decoration:none; white-space:nowrap;
  color:var(--marino); background:var(--sol);
  border:0; border-radius:var(--radio-chico); box-shadow:inset 0 -4px 0 var(--sol-borde);
  transition:background var(--t-rapido), transform var(--t-rapido) var(--sale);
}
.boton:hover{ background:var(--sol-vivo); color:var(--marino); transform:translateY(-1px); }
.boton:active{ transform:translateY(1px); box-shadow:inset 0 -2px 0 var(--sol-borde); }
.boton--marino{ background:var(--marino); color:var(--blanco); box-shadow:inset 0 -4px 0 var(--marino-3); }
.boton--marino:hover{ background:var(--marino-2); color:var(--blanco); }
.boton--linea{ background:transparent; color:var(--marino); box-shadow:inset 0 0 0 2px var(--marino); }
.boton--linea:hover{ background:var(--marino); color:var(--blanco); }
.boton .ico{ width:1.15em; height:1.15em; }
:is(.oscuro,.hero,.tormenta,.cierre) .boton--linea{ color:var(--blanco); box-shadow:inset 0 0 0 2px var(--celeste-claro); }
:is(.oscuro,.hero,.tormenta,.cierre) .boton--linea:hover{ background:var(--celeste-claro); color:var(--marino); }
.boton--grande{ min-height:60px; padding:1rem 1.7rem; font-size:1.15rem; }
.boton--bloque{ width:100%; }
.boton[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }
.acciones{ display:flex; flex-wrap:wrap; gap:var(--e3); align-items:center; }
@media (max-width:480px){ .acciones .boton{ width:100%; } }

/* ═══ 4 · FRANJA SUPERIOR Y CABECERA ═══ */
.franja{ background:var(--marino-3); color:var(--celeste-claro); font-size:var(--t-micro); }
.franja .contenedor{ display:flex; justify-content:space-between; gap:var(--e3); padding-block:.45rem; }
.franja a{ color:var(--blanco); font-weight:700; text-decoration:none; }
@media (max-width:760px){ .franja__extra{ display:none; } }

.estado{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; }
.estado__punto{ width:.6em; height:.6em; border-radius:50%; background:var(--sol); flex-shrink:0; }
.estado--abierto .estado__punto{ background:#5FD39A; box-shadow:0 0 0 4px rgba(95,211,154,.22); }

.cabecera{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--linea); }
.cabecera .contenedor{ display:flex; align-items:center; gap:var(--e4); min-height:84px; }
.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--marino); flex-shrink:0; }
.marca img{ width:66px; height:auto; }
.marca__texto{ display:flex; flex-direction:column; line-height:1; }
.marca__uno{ font-family:var(--display); font-size:1.35rem; }
.marca__dos{ font-weight:800; font-size:.8rem; letter-spacing:.14em; color:var(--mar); margin-top:.3rem; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:var(--e1); }
.nav > a, .nav__grupo > button{
  display:inline-flex; align-items:center; gap:.3em; min-height:44px; padding:.4rem .7rem;
  font-weight:700; font-size:1.0625rem; color:var(--marino); text-decoration:none; border-radius:var(--radio-chico);
  white-space:nowrap;   /* un enlace de menú nunca se parte en dos líneas */
}
.nav > a:hover, .nav__grupo > button:hover{ background:var(--espuma); color:var(--marino); }
.nav a[aria-current="page"]{ box-shadow:inset 0 -3px 0 var(--sol); }
.nav__grupo{ position:relative; }
.nav__grupo > button .ico{ width:1em; height:1em; transition:transform var(--t-rapido); }
.nav__grupo > button[aria-expanded="true"] .ico{ transform:rotate(180deg); }
.nav__panel{
  position:absolute; top:calc(100% + .4rem); left:-1rem; width:22rem; padding:var(--e2);
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra);
  display:none;
}
.nav__grupo > button[aria-expanded="true"] + .nav__panel{ display:block; }
.no-js .nav__grupo:hover .nav__panel, .no-js .nav__grupo:focus-within .nav__panel{ display:block; }
.nav__panel a{ display:block; padding:.6rem .8rem; border-radius:var(--radio-chico); text-decoration:none; color:var(--marino); font-weight:700; }
.nav__panel a span{ display:block; font-weight:400; font-size:var(--t-micro); color:var(--tinta-2); }
.nav__panel a:hover{ background:var(--espuma); }
.cabecera__tel{ margin-left:var(--e2); }
.hamburguesa{ display:none; margin-left:auto; width:48px; height:48px; align-items:center; justify-content:center; color:var(--marino); border-radius:var(--radio-chico); }
.hamburguesa .ico{ width:28px; height:28px; }
.menu-movil{ display:none; }
@media (max-width:1260px){
  .nav, .cabecera__tel{ display:none; }
  .hamburguesa{ display:inline-flex; }
  .cabecera .contenedor{ min-height:72px; }
  .marca img{ width:54px; }
  .menu-movil{
    position:fixed; inset:72px 0 0 0; z-index:49; overflow-y:auto;
    background:var(--marino); color:var(--blanco); padding:var(--e4) var(--margen) var(--e7);
  }
  .menu-movil[data-abierto="true"]{ display:block; }
  .menu-movil a{ display:block; padding:.85rem 0; font-size:1.3rem; font-weight:800; color:var(--blanco); text-decoration:none; border-bottom:1px solid var(--linea-osc); }
  .menu-movil .sub a{ font-size:1.1rem; font-weight:600; padding-left:1rem; color:var(--celeste-claro); }
  .menu-movil .boton{ margin-top:var(--e4); border:0; font-size:1.15rem; }
  body.menu-abierto{ overflow:hidden; }
}

/* ═══ 5 · SOL CON FRANJAS (motivo del logo) ═══
   El sol del logo es un círculo amarillo cortado por franjas horizontales.
   Se dibuja con un degradado repetido y una máscara circular: cero imágenes. */
.sol-franjas{
  position:absolute; pointer-events:none; aspect-ratio:1; border-radius:50%;
  background:repeating-linear-gradient(180deg,var(--sol) 0 16%,transparent 16% 20%);
  -webkit-mask:linear-gradient(180deg,#000 0 55%,rgba(0,0,0,.35) 100%); mask:linear-gradient(180deg,#000 0 55%,rgba(0,0,0,.35) 100%);
}

/* ═══ 6 · HERO ═══ */
.hero{ position:relative; overflow:hidden; background:var(--marino); color:var(--blanco); }
.hero .contenedor{ position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--e6); align-items:center; padding-block:var(--e7) var(--e8); }
.hero .sol-franjas{ width:min(46vw,560px); right:-6%; top:-18%; opacity:.9; }
.hero h1{ color:var(--blanco); margin-bottom:var(--e4); }
.hero h1 .num{ color:var(--sol); }
.hero .lead{ color:#DDEFF3; max-width:36rem; margin-bottom:var(--e5); }
.hero__foto{ position:relative; z-index:1; }
.hero__foto .foto{ aspect-ratio:4/3.3; border:4px solid var(--sol); box-shadow:0 0 0 6px var(--marino), 0 0 0 8px var(--celeste); border-radius:22px; }
.hero__sello{
  position:absolute; left:-2.2rem; bottom:-2.2rem; width:132px; height:132px; border-radius:50%;
  background:var(--blanco); box-shadow:var(--sombra); display:grid; place-items:center; padding:.5rem;
}
.pruebas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e4); margin:var(--e6) 0 0; padding:var(--e4) 0 0; list-style:none; border-top:1px solid var(--linea-osc); }
.pruebas li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1rem; line-height:1.4; color:#DDEFF3; }
.pruebas strong{ display:block; color:var(--blanco); font-size:1.0625rem; }
.pruebas .ico{ color:var(--sol); width:28px; height:28px; margin-top:.1rem; }
@media (max-width:900px){
  .hero .contenedor{ grid-template-columns:minmax(0,1fr); padding-block:var(--e5) var(--e7); }
  .hero__foto{ order:-1; }
  .hero__sello{ width:96px; height:96px; left:auto; right:.6rem; bottom:-1.6rem; }
  .pruebas{ grid-template-columns:minmax(0,1fr); gap:var(--e3); }
  .hero .sol-franjas{ width:80vw; right:-30%; top:-8%; opacity:.5; }
}

/* Hero de páginas internas: más bajo, foto a la derecha, migas arriba */
.hero--interno .contenedor{ padding-block:var(--e6) var(--e7); }
.hero--interno h1{ font-size:clamp(2.3rem,1.3rem + 3.6vw,4.2rem); }
.hero--sinfoto .contenedor{ grid-template-columns:minmax(0,1fr); max-width:var(--ancho); }
.hero--sinfoto h1{ max-width:18ch; }
.migas{ font-size:var(--t-micro); margin-bottom:var(--e4); color:var(--celeste-claro); }
.migas ol{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.migas li + li::before{ content:"/"; margin-right:.4rem; opacity:.6; }
.migas a{ color:var(--celeste-claro); }
.precio-hero{ display:inline-flex; flex-direction:column; margin-bottom:var(--e5); padding:.7rem 1.1rem; border:2px solid var(--sol); border-radius:var(--radio-chico); }
.precio-hero span{ font-size:var(--t-micro); color:var(--celeste-claro); }
.precio-hero strong{ font-family:var(--display); font-weight:400; font-size:1.8rem; color:var(--sol); line-height:1.1; }

/* ═══ 7 · SERVICIOS (lista con foto, no tarjetas iguales) ═══ */
.servicios{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--e6); align-items:start; }
.servicios__destacado{ position:sticky; top:110px; }
.servicios__destacado .foto{ aspect-ratio:4/3; margin-bottom:var(--e4); }
.servicios__destacado h2{ font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem); }
.lista-servicios{ list-style:none; padding:0; margin:0; border-top:2px solid var(--marino); }
.lista-servicios li{ border-bottom:1px solid var(--linea); }
.lista-servicios a{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:var(--e4); align-items:center;
  padding:var(--e4) var(--e2); text-decoration:none; color:var(--tinta); border-radius:var(--radio-chico);
  transition:background var(--t-rapido);
}
.lista-servicios a:hover{ background:var(--espuma); }
.lista-servicios img{ width:96px; height:72px; object-fit:cover; border-radius:var(--radio-chico); }
.lista-servicios h3{ margin:0 0 .2rem; font-size:1.3rem; }
.lista-servicios p{ margin:0; font-size:1rem; color:var(--tinta-2); }
.lista-servicios .desde{ text-align:right; font-size:var(--t-micro); color:var(--tinta-2); white-space:nowrap; }
.lista-servicios .desde strong{ display:block; font-family:var(--display); font-weight:400; font-size:1.2rem; color:var(--marino); }
@media (max-width:900px){
  .servicios{ grid-template-columns:minmax(0,1fr); }
  .servicios__destacado{ position:static; }
}
@media (max-width:560px){
  .lista-servicios a{ grid-template-columns:72px minmax(0,1fr); }
  .lista-servicios img{ width:72px; height:56px; }
  .lista-servicios .desde{ grid-column:2; text-align:left; }
  .lista-servicios .desde strong{ display:inline; margin-left:.3rem; }
}

/* ═══ 8 · STORM SLIDER (elemento firma) ═══
   La escena del logo dentro de su propio anillo: el visitante sube el viento
   y ve qué le pasa a una puerta común frente a una aprobada. */
.tormenta{ background:var(--marino-3); color:var(--blanco); overflow:hidden; }
.tormenta__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--e7); align-items:center; }
.escena{ position:relative; width:100%; max-width:560px; margin-inline:auto; aspect-ratio:1; }
.escena svg{ width:100%; height:100%; overflow:visible; }
.escena__anillo{ fill:none; stroke:var(--sol); stroke-width:7; }
.escena__anillo2{ fill:none; stroke:var(--celeste); stroke-width:3; }
/* Las piezas se mueven con variables que el JS actualiza: --v (0-1 viento), --falla (0/1) */
.escena{ --v:0; --falla:0; --flex:0; }
.escena__nubes{ opacity:calc(var(--v) * 1.1); transition:opacity .4s; }
.escena__noche{ opacity:calc(var(--v) * .78); transition:opacity .4s; }
.escena__sol{ transform:translateY(calc(var(--v) * 70px)); opacity:calc(1 - var(--v) * .85); transition:transform .5s var(--sale), opacity .5s; }
.escena__lluvia{ opacity:calc((var(--v) - .25) * 1.6); }
.escena__lluvia line{ stroke:#B9DDE8; stroke-width:1.6; stroke-linecap:round; }
.escena__palmera{ transform-box:view-box; transform-origin:318px 330px; transform:rotate(calc(var(--v) * -14deg)); transition:transform .5s var(--sale); }
.escena__hojas{ transform-box:view-box; transform-origin:300px 128px; transform:rotate(calc(var(--v) * -18deg)) scaleX(calc(1 - var(--v) * .18)); transition:transform .5s var(--sale); }
.escena__gaviotas{ opacity:calc(1 - var(--v) * 3); transition:opacity .4s; }
.escena__mar path{ transition:transform .5s var(--sale); }
.escena__puerta{ transition:transform .45s var(--sale); transform-box:view-box; transform-origin:200px 330px; }
.escena__panel{ transition:d .35s var(--sale); }
.escena__hueco{ opacity:var(--falla); transition:opacity .3s; }
.escena__grietas{ opacity:var(--falla); transition:opacity .2s; }
.escena[data-falla="1"] .escena__puerta{ transform:skewX(-9deg) rotate(4deg) translate(10px,6px); }
.escena__etiqueta{ font:800 11px var(--cuerpo); letter-spacing:.06em; }
@media (prefers-reduced-motion:no-preference){
  .js .escena__lluvia g{ animation:lluvia .55s linear infinite; }
  .js .escena__hojas-mov{ animation:mecer 3.2s ease-in-out infinite alternate; transform-box:view-box; transform-origin:300px 128px; }
}
@keyframes lluvia{ from{ transform:translate(0,-40px); } to{ transform:translate(-26px,40px); } }
@keyframes mecer{ from{ transform:rotate(-2deg); } to{ transform:rotate(3deg); } }

.mando{ display:flex; flex-direction:column; gap:var(--e4); }
.mando h2{ color:var(--blanco); }
.lectura{ display:flex; align-items:baseline; gap:var(--e3); flex-wrap:wrap; }
.lectura__mph{ font-family:var(--display); font-size:clamp(3.4rem,2.4rem + 4vw,5.6rem); line-height:.9; color:var(--sol); font-variant-numeric:tabular-nums; }
.lectura__mph small{ font-size:.38em; color:var(--blanco); margin-left:.15em; }
.lectura__cat{ font-weight:800; font-size:1.15rem; color:var(--celeste-claro); }
.pista{ position:relative; padding-top:1.9rem; }
.pista__codigo{
  position:absolute; top:0; height:calc(100% - .2rem); border-left:2px dashed var(--sol); border-right:2px dashed var(--sol);
  background:rgba(253,185,58,.12); border-radius:4px;
  /* 160-170 mph sobre una escala 0-180 */
  left:calc(160 / 180 * 100%); width:calc(10 / 180 * 100%);
}
.pista__codigo span{ position:absolute; bottom:100%; right:-.2rem; white-space:nowrap; font-size:.8rem; font-weight:800; color:var(--sol); transform:translateY(-.1rem); }
.rango{ -webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; position:relative; z-index:1; margin:0; cursor:pointer; }
.rango::-webkit-slider-runnable-track{ height:10px; border-radius:6px; background:linear-gradient(90deg,var(--celeste) 0 var(--p,0%),rgba(143,214,227,.25) var(--p,0%)); }
.rango::-moz-range-track{ height:10px; border-radius:6px; background:rgba(143,214,227,.25); }
.rango::-moz-range-progress{ height:10px; border-radius:6px; background:var(--celeste); }
.rango::-webkit-slider-thumb{ -webkit-appearance:none; width:36px; height:36px; margin-top:-13px; border-radius:50%; background:var(--sol); border:4px solid var(--marino-3); box-shadow:0 0 0 3px var(--sol); }
.rango::-moz-range-thumb{ width:28px; height:28px; border-radius:50%; background:var(--sol); border:4px solid var(--marino-3); box-shadow:0 0 0 3px var(--sol); }
.pista__marcas{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--celeste-claro); margin-top:.2rem; }
.conmutador{ display:inline-flex; padding:4px; gap:4px; border-radius:12px; background:var(--marino-2); flex-wrap:wrap; }
.conmutador button{ min-height:46px; padding:.5rem 1rem; border-radius:9px; font-weight:800; color:var(--celeste-claro); }
.conmutador button[aria-pressed="true"]{ background:var(--sol); color:var(--marino); }
.veredicto{ margin:0; padding:var(--e3) var(--e4); border-radius:var(--radio-chico); background:var(--marino-2); font-size:1.05rem; min-height:5.2em; }
.veredicto strong{ color:var(--sol); }
.veredicto[data-tono="mal"] strong{ color:#FF9C8F; }
.veredicto[data-tono="bien"] strong{ color:#7BE0AE; }
.dato-fuerza{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e3); margin:0; }
.dato-fuerza div{ border-top:2px solid var(--linea-osc); padding-top:.6rem; }
.dato-fuerza dt{ font-size:var(--t-micro); color:var(--celeste-claro); }
.dato-fuerza dd{ margin:0; font:400 1.6rem/1.2 var(--display); color:var(--blanco); font-variant-numeric:tabular-nums; }
.nota-dibujo{ font-size:var(--t-micro); color:var(--celeste-claro); }
@media (max-width:900px){ .tormenta__grid{ grid-template-columns:minmax(0,1fr); gap:var(--e5); } .escena{ max-width:420px; } }

/* ═══ 9 · DOOR PASSPORT ═══ */
.pasaporte{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--e7); align-items:center; }
.calco-y-foto{ position:relative; }
.calco-y-foto .foto{ aspect-ratio:4/3; }
/* La etiqueta física: redonda como el logo, anillo sol + marino */
.calco{
  position:absolute; right:-1.5rem; bottom:-2.5rem; width:clamp(150px,34%,210px); aspect-ratio:1; border-radius:50%;
  background:var(--marino); box-shadow:0 0 0 5px var(--sol), 0 0 0 9px var(--marino), var(--sombra);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; padding:1rem; text-align:center; color:var(--blanco);
  transform:rotate(-8deg);
}
.calco__titulo{ font-family:var(--display); font-size:clamp(.8rem,.6rem + .5vw,1rem); line-height:1; color:var(--sol); }
.calco__qr{ width:44%; background:var(--blanco); padding:5px; border-radius:4px; }
.calco__codigo{ font-weight:800; font-size:.7rem; letter-spacing:.08em; color:var(--celeste-claro); }
.lista-check{ list-style:none; padding:0; margin:0 0 var(--e5); display:grid; gap:var(--e3); }
.lista-check li{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:.8rem; align-items:start; }
.lista-check .ico{ width:26px; height:26px; color:var(--mar); margin-top:.1rem; }
.oscuro .lista-check .ico{ color:var(--sol); }
@media (max-width:900px){
  .pasaporte{ grid-template-columns:minmax(0,1fr); gap:var(--e7); }
  .calco{ right:.5rem; bottom:-2.8rem; }
}

/* ═══ 10 · PRECIO EN TRES TOQUES ═══ */
.cotizador{ background:var(--blanco); border-radius:22px; box-shadow:var(--sombra); padding:clamp(1.25rem,3vw,2.5rem); border:2px solid var(--marino); }
.cotizador__pasos{ display:flex; gap:var(--e2); list-style:none; padding:0; margin:0 0 var(--e4); font-size:var(--t-micro); font-weight:700; color:var(--tinta-2); flex-wrap:wrap; }
.cotizador__pasos li{ padding:.25rem .7rem; border-radius:999px; background:var(--espuma); }
.cotizador__pasos li[aria-current="step"]{ background:var(--marino); color:var(--blanco); }
.paso{ border:0; padding:0; margin:0; }
.paso legend{ font:400 clamp(1.5rem,1.1rem + 1.4vw,2.1rem)/1.15 var(--display); margin-bottom:var(--e4); padding:0; }
.js .paso[hidden]{ display:none; }
.opciones{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--e3); }
.opcion{
  display:flex; align-items:center; gap:.8rem; min-height:64px; padding:.8rem 1rem; text-align:left;
  border:2px solid var(--linea); border-radius:12px; background:var(--blanco); font-weight:700; line-height:1.25;
  transition:border-color var(--t-rapido), background var(--t-rapido);
}
.opcion .ico{ width:30px; height:30px; color:var(--mar); }
.opcion:hover{ border-color:var(--mar); background:var(--espuma); }
.opcion[aria-pressed="true"]{ border-color:var(--marino); background:var(--marino); color:var(--blanco); }
.opcion[aria-pressed="true"] .ico{ color:var(--sol); }
.resultado{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e5); }
.resultado__precio{ background:var(--marino); color:var(--blanco); border-radius:var(--radio); padding:var(--e5); }
.resultado__precio .grande{ font:400 clamp(2rem,1.4rem + 2vw,3rem)/1.05 var(--display); color:var(--sol); margin:.3rem 0 var(--e3); }
.resultado__precio p{ color:#DDEFF3; font-size:1rem; }
.resultado__honesto{ padding:var(--e3) var(--e4); background:var(--arena); border-radius:var(--radio-chico); font-size:1rem; }
.volver{ margin-top:var(--e4); font-weight:700; color:var(--mar); text-decoration:underline; }
@media (max-width:760px){ .resultado{ grid-template-columns:minmax(0,1fr); } }

/* ═══ 11 · VISITA EN CUATRO PASOS ═══
   Aquí los números sí informan: es una secuencia real. */
.visita{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--e4); counter-reset:paso; }
.visita li{ counter-increment:paso; padding-top:var(--e4); border-top:3px solid var(--sol); }
.visita li::before{ content:counter(paso); display:block; font:400 2.6rem/1 var(--display); color:var(--celeste); margin-bottom:var(--e2); }
.visita h3{ font-size:1.25rem; }
.visita p{ font-size:1rem; color:var(--celeste-claro); }
@media (max-width:900px){ .visita{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .visita{ grid-template-columns:minmax(0,1fr); } }
.fotos-par{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--e4); margin-top:var(--e7); }
.fotos-par .foto{ height:clamp(240px,30vw,420px); }
@media (max-width:700px){ .fotos-par{ grid-template-columns:minmax(0,1fr); } }

/* ═══ 12 · PRUEBA, RESEÑAS Y ESPACIOS RESERVADOS ═══ */
.credenciales{ list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:2px solid var(--marino); }
.credenciales li{ display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:var(--e4); padding:var(--e3) 0; border-bottom:1px solid var(--linea); }
.credenciales dt, .credenciales .k{ font-weight:800; }
@media (max-width:560px){ .credenciales li{ grid-template-columns:minmax(0,1fr); gap:.2rem; } }
.resenas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--e4); margin-top:var(--e5); }
.resena{ margin:0; padding:var(--e4); border-radius:var(--radio); background:var(--espuma); }
.resena p{ font-size:1.05rem; }
.resena footer{ font-size:var(--t-micro); color:var(--tinta-2); font-weight:700; }
/* Espacio reservado: visible solo en modo demo (CONFIGURACIÓN → MODO_DEMO) */
.reservado{
  border:2px dashed var(--mar); border-radius:var(--radio); padding:var(--e4); color:var(--mar); background:rgba(232,245,247,.6);
  display:flex; gap:var(--e3); align-items:flex-start; font-size:1rem;
}
.reservado .ico{ width:28px; height:28px; }
body:not(.modo-demo) .reservado{ display:none; }

/* ═══ 13 · ANTES Y DESPUÉS ═══ */
.antes-despues{ position:relative; }
.antes-despues .foto{ aspect-ratio:4/3; }
.antes-despues__rotulos{ position:absolute; inset:auto var(--e3) var(--e3) var(--e3); display:flex; justify-content:space-between; pointer-events:none; }
.antes-despues__rotulos span{ background:var(--marino); color:var(--blanco); font-weight:800; font-size:var(--t-micro); padding:.35rem .8rem; border-radius:6px; }

/* ═══ 14 · ZONAS Y ZIP ═══ */
.zip-forma{ display:flex; gap:var(--e2); max-width:28rem; }
.zip-forma input{ flex:1; min-width:0; min-height:56px; padding:.7rem 1rem; font-size:1.2rem; font-weight:700; letter-spacing:.08em; border:2px solid var(--marino); border-radius:var(--radio-chico); background:var(--blanco); color:var(--marino); }
.zip-respuesta{ display:none; margin-top:var(--e3); padding:var(--e3) var(--e4); border-radius:var(--radio-chico); background:var(--blanco); border:2px solid var(--palmera); max-width:36rem; }
.zip-respuesta.visible{ display:block; }
.zip-respuesta.fuera{ border-color:var(--sol-borde); }
.ciudades{ list-style:none; padding:0; margin:0; columns:2; column-gap:var(--e6); }
.ciudades li{ break-inside:avoid; border-bottom:1px solid var(--linea); }
.ciudades a{ display:flex; justify-content:space-between; gap:var(--e3); padding:.8rem 0; font-weight:800; font-size:1.15rem; color:var(--marino); text-decoration:none; }
.ciudades a span{ font-weight:400; font-size:var(--t-micro); color:var(--tinta-2); }
.ciudades a:hover{ color:var(--mar); }
@media (max-width:560px){ .ciudades{ columns:1; } }

/* ═══ 15 · FAQ ═══ */
.faq{ border-top:2px solid var(--marino); max-width:56rem; }
.faq__item{ border-bottom:1px solid var(--linea); }
.faq__item h3{ margin:0; }
.faq__boton{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e4); width:100%; padding:var(--e4) 0; text-align:left; font:800 1.2rem/1.4 var(--cuerpo); color:var(--marino); }
.faq__boton:hover{ color:var(--mar); }
.faq__signo{ position:relative; flex-shrink:0; width:22px; height:22px; margin-top:.25em; color:var(--mar); }
.faq__signo::before,.faq__signo::after{ content:""; position:absolute; top:50%; left:0; width:100%; height:3px; margin-top:-1.5px; border-radius: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; }
.faq__panel > div > *:last-child{ margin-bottom:var(--e4); }
.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); }

/* ═══ 16 · CIERRE ═══ */
.cierre{ position:relative; overflow:hidden; background:var(--marino); color:var(--blanco); text-align:center; }
.cierre .sol-franjas{ width:min(70vw,620px); left:50%; bottom:-58%; transform:translateX(-50%); opacity:.95; }
.cierre .contenedor{ position:relative; z-index:1; padding-bottom:clamp(6rem,14vw,11rem); }
.cierre h2{ color:var(--blanco); max-width:20ch; margin-inline:auto; }
.cierre p{ margin-inline:auto; color:#DDEFF3; }
.cierre .acciones{ justify-content:center; margin-top:var(--e5); }

/* ═══ 17 · PIE ═══ */
.pie{ background:var(--marino-3); color:#C9E3EA; font-size:1rem; padding-block:var(--e7) var(--e5); }
.pie a{ color:var(--blanco); text-decoration:none; }
.pie a:hover{ text-decoration:underline; }
.pie__grid{ display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:var(--e5); }
.pie h2{ font:800 1rem/1.3 var(--cuerpo); color:var(--sol); letter-spacing:.02em; margin-bottom:var(--e3); }
.pie ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.pie__marca{ display:inline-block; background:var(--blanco); border-radius:50%; padding:.5rem; width:128px; margin-bottom:var(--e3); }
.pie__legal{ margin-top:var(--e6); padding-top:var(--e4); border-top:1px solid var(--linea-osc); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--e3); font-size:var(--t-micro); }
.horario{ border-collapse:collapse; width:100%; font-size:.95rem; }
.horario th,.horario td{ padding:.3rem 0; text-align:left; font-weight:400; border-bottom:1px solid var(--linea-osc); }
.horario td{ text-align:right; }
.horario tr[data-hoy] th,.horario tr[data-hoy] td{ color:var(--blanco); font-weight:800; }
.horario__hoy{ margin-left:.4rem; font-size:.75rem; color:var(--sol); }
@media (max-width:900px){ .pie__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .pie__grid{ grid-template-columns:minmax(0,1fr); } }

/* ═══ 18 · BARRA MÓVIL Y WHATSAPP ═══ */
.barra-movil{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; gap:.6rem;
  padding:.65rem var(--margen) calc(.65rem + env(safe-area-inset-bottom));
  background:var(--marino); border-top:3px solid var(--sol); }
.barra-movil .boton{ flex:1; min-height:52px; padding-inline:.8rem; }
.barra-movil .boton--linea{ color:var(--blanco); box-shadow:inset 0 0 0 2px var(--celeste-claro); }
@media (max-width:760px){ .barra-movil{ display:flex; } body.con-barra{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); } }
.wa-flotante{
  position:fixed; right:clamp(1rem,2.5vw,1.75rem); bottom:clamp(1rem,2.5vw,1.75rem); z-index:39;
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:#1F8F4E; color:var(--blanco); box-shadow:var(--sombra);
}
.wa-flotante .ico{ width:32px; height:32px; }
.wa-flotante:hover{ background:#197A42; color:var(--blanco); }
@media (max-width:760px){ .wa-flotante{ bottom:calc(96px + env(safe-area-inset-bottom)); width:54px; height:54px; } }

/* ═══ 19 · CONTENIDO DE SERVICIO Y PÁGINAS DE TEXTO ═══ */
.sintomas{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e3) var(--e5); }
.sintomas li{ padding:var(--e3) 0 var(--e3) 2.2rem; border-bottom:1px solid var(--linea); position:relative; }
.sintomas li::before{ content:""; position:absolute; left:0; top:1.25rem; width:1.1rem; height:.55rem; background:repeating-linear-gradient(180deg,var(--sol) 0 2px,transparent 2px 4px); border-radius:0 0 1rem 1rem; }
@media (max-width:700px){ .sintomas{ grid-template-columns:minmax(0,1fr); } }
.tabla-precios{ width:100%; border-collapse:collapse; font-size:1.05rem; }
.tabla-precios caption{ text-align:left; font-size:var(--t-micro); color:var(--tinta-2); caption-side:bottom; padding-top:var(--e3); }
.tabla-precios th,.tabla-precios td{ padding:.95rem .6rem; border-bottom:1px solid var(--linea); text-align:left; vertical-align:top; }
.tabla-precios thead th{ border-bottom:2px solid var(--marino); font-size:var(--t-micro); color:var(--tinta-2); }
.tabla-precios td:last-child, .tabla-precios th:last-child{ text-align:right; white-space:nowrap; }
.tabla-precios td:last-child{ font-family:var(--display); color:var(--marino); font-size:1.15rem; }
.tabla-precios td small{ display:block; color:var(--tinta-2); font-size:.9rem; }
.honesto{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--e4); align-items:start; padding:var(--e5); border-radius:var(--radio); background:var(--arena); }
.honesto .ico{ width:40px; height:40px; color:var(--sol-borde); }
.honesto h2{ font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem); }
.honesto p:last-child{ margin-bottom:0; }
.relacionados{ display:flex; flex-wrap:wrap; gap:var(--e2); list-style:none; padding:0; margin:0; }
.relacionados a{ display:inline-flex; min-height:44px; align-items:center; padding:.5rem 1rem; border-radius:999px; border:2px solid var(--marino); color:var(--marino); font-weight:700; text-decoration:none; }
.relacionados a:hover{ background:var(--marino); color:var(--blanco); }
.texto-largo{ max-width:var(--ancho-texto); }
.texto-largo h2{ font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem); margin-top:var(--e6); }
.texto-largo h3{ margin-top:var(--e5); }

/* ═══ 20 · FORMULARIO ═══ */
.forma{ display:grid; gap:var(--e3); }
.forma .fila{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e3); }
@media (max-width:560px){ .forma .fila{ grid-template-columns:minmax(0,1fr); } }
.campo label{ display:block; font-weight:700; margin-bottom:.35rem; }
.campo input,.campo select,.campo textarea{ width:100%; min-height:52px; padding:.7rem .9rem; border:2px solid var(--tinta-2); border-radius:var(--radio-chico); background:var(--blanco); }
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--marino); outline:3px solid var(--sol); outline-offset:1px; }
.campo .error{ display:none; color:var(--error); font-size:var(--t-micro); font-weight:700; margin-top:.3rem; }
.campo[data-error="true"] .error{ display:block; }
.campo[data-error="true"] input{ border-color:var(--error); }
.forma__ok{ padding:var(--e4); border-radius:var(--radio-chico); background:var(--espuma); border:2px solid var(--palmera); }
.forma__nota{ font-size:var(--t-micro); color:var(--tinta-2); }

/* ═══ 21 · PASAPORTE DE MUESTRA (registro) ═══ */
.registro{ max-width:760px; margin-inline:auto; background:var(--blanco); border:2px solid var(--marino); border-radius:22px; overflow:hidden; box-shadow:var(--sombra); }
.registro__cabeza{ display:flex; align-items:center; gap:var(--e4); padding:var(--e4) var(--e5); background:var(--marino); color:var(--blanco); }
.registro__cabeza img{ width:72px; background:var(--blanco); border-radius:50%; padding:4px; }
.registro__cabeza h1{ font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem); margin:0; color:var(--blanco); }
.registro__cabeza p{ margin:0; color:var(--celeste-claro); font-size:var(--t-micro); }
.registro__muestra{ background:var(--sol); color:var(--marino); font-weight:800; text-align:center; padding:.45rem; font-size:var(--t-micro); }
.registro__cuerpo{ padding:var(--e5); display:grid; gap:var(--e5); }
.registro dl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e3) var(--e4); margin:0; }
.registro dt{ font-size:var(--t-micro); color:var(--tinta-2); }
.registro dd{ margin:0; font-weight:800; }
.registro h2{ font:800 1.25rem/1.3 var(--cuerpo); margin-bottom:var(--e3); padding-bottom:.4rem; border-bottom:2px solid var(--sol); }
.garantias{ list-style:none; padding:0; margin:0; display:grid; gap:var(--e3); }
.garantias li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.3rem var(--e3); }
.garantias .barra{ grid-column:1 / -1; height:10px; border-radius:6px; background:var(--espuma); overflow:hidden; }
.garantias .barra span{ display:block; height:100%; width:var(--resta,100%); background:var(--palmera); border-radius:6px; }
.garantias .dias{ font-weight:800; color:var(--palmera); }
.historial{ list-style:none; padding:0; margin:0; position:relative; }
/* la línea de tiempo es un trazo propio, no un borde de tarjeta */
.historial::before{ content:""; position:absolute; left:0; top:.4rem; bottom:1.5rem; width:3px; border-radius:2px; background:var(--celeste); }
.historial li{ position:relative; padding:0 0 var(--e4) var(--e4); }
.historial li::before{ content:""; position:absolute; left:-6px; top:.35rem; width:15px; height:15px; border-radius:50%; background:var(--sol); border:3px solid var(--marino); }
.historial time{ font-weight:800; display:block; }
@media (max-width:560px){ .registro dl{ grid-template-columns:minmax(0,1fr); } .registro__cuerpo{ padding:var(--e4); } }

/* ═══ 22 · ENTRADAS POR SCROLL ═══
   Sin JS: todo visible. Solo se esconde para animar si <html> tiene .js. */
.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; }
@media (prefers-reduced-motion:reduce){ .js [data-reveal]{ opacity:1!important; transform:none!important; transition:none; } }

/* ═══ 23 · 404 Y UTILIDADES ═══ */
.centro{ text-align:center; }
.mt-5{ margin-top:var(--e5); }
.mt-6{ margin-top:var(--e6); }
.sin-margen{ margin:0; }

/* ═══ 24 · IMPRESIÓN (pasaporte y precios) ═══ */
@media print{
  .franja,.cabecera,.menu-movil,.pie,.barra-movil,.wa-flotante,.cierre,.acciones,.no-imprimir{ display:none!important; }
  body{ padding:0!important; font-size:12pt; }
  .registro{ box-shadow:none; border-width:1px; }
  a{ color:inherit; text-decoration:none; }
}
/* Migas sobre fondo claro (pasaporte de muestra) */
.espuma .migas, .espuma .migas a{ color:var(--tinta-2); }

/* ═══ 25 · AJUSTES ═══ */
/* Notas locales de cada ciudad: tres columnas con canto sol, sobre blanco */
.notas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e5); }
.notas > div{ border-top:3px solid var(--sol); padding-top:var(--e4); }
.notas h3{ font-size:1.25rem; }
.notas p{ font-size:1.05rem; color:var(--tinta-2); }
@media (max-width:900px){ .notas{ grid-template-columns:minmax(0,1fr); } }
/* Pasos sobre fondo claro (página Door Passport) */
.visita--claro p{ color:var(--tinta-2); }
.tabla-precios small{ display:block; font-family:var(--cuerpo); font-weight:400; }
.registro__muestra{ max-width:none; margin:0; }

/* ═══ 26 · MENÚ DE SERVICIOS EN COLUMNAS Y SERVICIOS AGRUPADOS ═══
   Con 14 servicios, el desplegable ocupa el ancho del contenedor en tres
   columnas (Repairs · Openers & access · New doors & care). */
.cabecera .contenedor{ position:relative; }
.nav__grupo{ position:static; }
.nav__panel--mega{
  left:var(--margen); right:var(--margen); width:auto; top:calc(100% - .5rem);
  padding:var(--e4); gap:var(--e4); grid-template-columns:repeat(3,minmax(0,1fr));
}
.nav__grupo > button[aria-expanded="true"] + .nav__panel--mega,
.no-js .nav__grupo:hover .nav__panel--mega, .no-js .nav__grupo:focus-within .nav__panel--mega{ display:grid; }
.nav__grupo-t{ margin:0 0 .4rem; padding:0 .8rem .5rem; font-family:var(--display); font-size:1.15rem; color:var(--marino); border-bottom:3px solid var(--sol); }
.nav__col{ display:flex; flex-direction:column; }

/* Home: foto + texto arriba, y debajo los grupos. Repairs (7) a la izquierda,
   los otros dos grupos apilados a la derecha: quedan del mismo alto. */
.servicios{ display:block; }
.servicios__destacado{ position:static; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--e6); align-items:center; margin-bottom:var(--e7); }
.servicios__destacado .foto{ margin-bottom:0; }
.grupos-servicios{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e4) var(--e6); align-items:start; }
.grupo-servicios:first-child{ grid-row:span 2; }
.grupo-servicios h3{ font:400 1.6rem/1.1 var(--display); color:var(--marino); margin-bottom:var(--e3); }
.grupo-servicios .lista-servicios a{ grid-template-columns:80px minmax(0,1fr) auto; padding:var(--e3) var(--e2); }
.grupo-servicios .lista-servicios img{ width:80px; height:60px; }
.lista-servicios h4{ margin:0 0 .15rem; font:800 1.2rem/1.25 var(--cuerpo); }
@media (max-width:900px){
  .servicios__destacado{ grid-template-columns:minmax(0,1fr); gap:var(--e4); }
  .grupos-servicios{ grid-template-columns:minmax(0,1fr); }
  .grupo-servicios:first-child{ grid-row:auto; }
}
@media (max-width:560px){
  .grupo-servicios .lista-servicios a{ grid-template-columns:64px minmax(0,1fr); }
  .grupo-servicios .lista-servicios img{ width:64px; height:48px; }
}
/* Menú móvil: con 14 servicios, los subtítulos de grupo ordenan la lista */
.menu-movil .sub p{ margin:var(--e3) 0 0; font-weight:800; color:var(--sol); font-size:.95rem; }

/* ═══ 27 · APERTURA "AMANECER 561" (solo home) ═══
   El sol del logo sale detrás del techo, la puerta con el 561 sube, adentro
   hay luz, y toda la escena sube como cortina. Una vez por sesión, menos de
   2,5 s, se salta con un clic. Sin JS o con "reducir movimiento" no existe. */
.amanecer{ display:none; }
.js .amanecer{
  position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--e3);
  background:radial-gradient(120% 90% at 50% 62%, #0B3A66 0%, #062A4E 45%, var(--marino-3) 100%);
  clip-path:inset(0 0 0 0); transition:clip-path .8s cubic-bezier(.7,0,.3,1); cursor:pointer;
}
.js .amanecer.sube{ clip-path:inset(0 0 100% 0); }
.js .amanecer.fuera{ display:none; }
.amanecer__svg{ width:min(82vw,560px); max-height:66vh; height:auto; overflow:visible; filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.amanecer__sol{ transform:translateY(120px); opacity:0; transition:transform 1s cubic-bezier(.16,1,.3,1), opacity .5s ease-out; }
.amanecer.sale-sol .amanecer__sol{ transform:none; opacity:1; }
.amanecer__halo{ transform-box:fill-box; transform-origin:center; transform:scale(.8); transition:transform 1.4s cubic-bezier(.16,1,.3,1) .3s; }
.amanecer.sale-sol .amanecer__halo{ transform:scale(1.12); }
.amanecer__gaviotas{ opacity:0; transition:opacity .5s ease-out .6s; }
.amanecer.sale-sol .amanecer__gaviotas{ opacity:1; }
.amanecer__puerta{ transform-box:fill-box; transition:transform .85s cubic-bezier(.65,0,.25,1); }
.amanecer.abre .amanecer__puerta{ transform:translateY(-100%); }
.amanecer__luz{ opacity:.35; transition:opacity .7s ease-out .15s; }
.amanecer.abre .amanecer__luz{ opacity:1; }
.amanecer__561{ font-family:var(--display); font-size:58px; fill:#FFF9F0; stroke:#FDB93A; stroke-width:3; paint-order:stroke; }
.amanecer__lema{
  margin:0; max-width:none; font-weight:800; font-size:clamp(.95rem,.8rem + .6vw,1.25rem); letter-spacing:.18em; text-transform:uppercase; color:var(--celeste-claro);
  opacity:0; transform:translateY(10px); transition:opacity .5s ease-out, transform .6s cubic-bezier(.16,1,.3,1);
}
.amanecer.abre .amanecer__lema{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .amanecer{ display:none; } }
@media print{ .amanecer{ display:none!important; } }