/* ═══════════════════════════════════════════════════════════════════════
   BOYNTON GARAGE DOORS EXPERTS · hoja de estilos
   369 Creative Agency · septiembre 2026

   El mundo: el sello del logo. Papel crema, tinta casi negra y bronce,
   como una placa de taller con historia ("Est. 2020"). Nada de lujo
   (eso es Masters) ni de playa (eso es 561).

   La firma: Second Opinion, el presupuesto corregido con rotulador.
   Es el único lugar donde aparece el rojo.

   Público: Boynton tiene un cuarto de la población con más de 65 años.
   Por eso el texto base es grande (20 px) y la letra es Red Hat Text, de
   ojo grande y formas abiertas. Se probó Atkinson Hyperlegible, pero su
   cero tachado convertía "$180" en "$18Ø": en un sitio cuyo argumento son
   los precios, eso confunde más de lo que ayuda.

   Secciones:
    0  Variables          10 Second Opinion (firma)
    1  Base                11 Servicios
    2  Utilidades          12 Quién llega (banda oscura)
    3  Botones             13 HOA y 55+
    4  Cabecera y menú     14 Pasos de la visita
    5  Hero                15 Prueba y credenciales
    6  Secciones           16 Zonas y ZIP
    7  Fotos               17 FAQ
    8  Listas y tablas     18 Páginas internas
    9  Formularios         19 Pie y barra móvil
                           20 Apertura "Entintado"
                           21 Movimiento reducido e impresión
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 0 · VARIABLES ═══ */
:root{
  /* Colores medidos sobre el logo del cliente. Contraste anotado (WCAG). */
  --crema:#F9F6F0;          /* fondo principal, el papel del sello */
  --crema-2:#EFE7D8;        /* sección alterna, papel kraft */
  --papel:#FDFBF6;          /* el ticket de Second Opinion */
  --tinta:#1F2022;          /* texto y bandas oscuras · 15.1:1 sobre crema */
  --tinta-2:#4E4A43;        /* texto secundario · 8.2:1 sobre crema, 7.2:1 sobre crema-2 */
  --bronce:#A98051;         /* anillos, líneas, íconos · 3.3:1: SOLO decorativo sobre crema */
  --bronce-hondo:#7A5A2E;   /* texto bronce sobre crema (5.9:1) y botón con texto blanco (6.3:1) */
  --bronce-claro:#D8B98B;   /* texto bronce sobre tinta · 8.7:1 */
  --crema-tenue:#C9C2B5;    /* texto secundario sobre tinta · 9.2:1 */
  --linea:#DDD3C1;          /* filetes sobre crema */
  --linea-oscura:#3A3936;   /* filetes sobre tinta */
  --rotulador:#B3261E;      /* SOLO las marcas del rotulador · 6.3:1 sobre papel */
  --verde:#2F6B3F;          /* veredicto "Fair", línea normal y oficina abierta · 6.2:1 sobre papel */
  --ambar:#9A5B13;          /* veredicto "Ask" y líneas dudosas · 5.2:1 sobre papel */
  --foco:#1A5FD0;

  --display:"Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --texto:"Red Hat Text", "Segoe UI", system-ui, sans-serif;
  --mano:"Permanent Marker", "Comic Sans MS", cursive;

  /* Escala: texto base 20 px, títulos de 44 a 84 px */
  --t-base:clamp(1.1875rem, 1.12rem + .3vw, 1.25rem);
  --t-chico:clamp(1rem, .97rem + .15vw, 1.0625rem);
  --t-h1:clamp(2.6rem, 1.7rem + 4vw, 5.25rem);
  --t-h2:clamp(2.05rem, 1.5rem + 2.3vw, 3.5rem);
  --t-h3:clamp(1.35rem, 1.2rem + .6vw, 1.7rem);

  --e1:.5rem; --e2:.75rem; --e3:1.25rem; --e4:2rem; --e5:3rem; --e6:clamp(4rem, 3rem + 5vw, 7.5rem);
  --ancho:min(100% - 2.5rem, 1240px);
  --ancho-texto:66ch;
  --radio:6px;

  --sombra:0 2px 4px rgba(31,32,34,.06), 0 12px 28px -8px rgba(31,32,34,.18);
  --sombra-alta:0 4px 8px rgba(31,32,34,.08), 0 28px 50px -18px rgba(31,32,34,.35);

  --sale:cubic-bezier(.16,1,.3,1);
  --t-rapido:160ms; --t-medio:320ms; --t-lento:700ms;
}

/* ═══ 1 · BASE ═══ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px; }
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font:400 var(--t-base)/1.6 var(--texto);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@view-transition{ navigation:auto; }
img,svg,video{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4{ font-family:var(--display); color:inherit; margin:0 0 var(--e3); text-wrap:balance; }
h1{ font-size:var(--t-h1); font-weight:900; line-height:.98; letter-spacing:-.03em; }
h2{ font-size:var(--t-h2); font-weight:900; line-height:1.04; letter-spacing:-.025em; }
h3{ font-size:var(--t-h3); font-weight:800; line-height:1.2; letter-spacing:-.01em; }
h4{ font-size:1.2rem; font-weight:800; line-height:1.3; }
p{ margin:0 0 var(--e3); max-width:var(--ancho-texto); }
a{ color:var(--bronce-hondo); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color:var(--tinta); }
strong{ font-weight:700; }
ul,ol{ padding-left:1.2em; margin:0 0 var(--e3); }
li{ margin-bottom:.35em; }
:focus-visible{ outline:3px solid var(--foco); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--bronce-claro); color:var(--tinta); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
table{ border-collapse:collapse; width:100%; }

/* ═══ 2 · UTILIDADES ═══ */
.contenedor{ width:var(--ancho); margin-inline:auto; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.saltar{ position:absolute; left:1rem; top:-4rem; z-index:100; background:var(--tinta); color:var(--crema); padding:.7rem 1rem; border-radius:var(--radio); }
.saltar:focus{ top:1rem; }
.suave{ color:var(--tinta-2); }
.lead{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height:1.5; color:var(--tinta-2); max-width:34em; }
.mt-4{ margin-top:var(--e4); } .mt-5{ margin-top:var(--e5); }
.sin-margen{ margin:0; }
.num{ font-variant-numeric:tabular-nums; }
.ico{ width:1.25em; height:1.25em; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Reservado: espacios que esperan dato o material del cliente.
   Solo se ven en modo demo (MODO_DEMO en el JS). */
.reservado{ display:flex; gap:var(--e2); align-items:flex-start; padding:var(--e3); border:2px dashed var(--bronce); border-radius:var(--radio); background:rgba(169,128,81,.08); color:var(--tinta-2); font-size:var(--t-chico); }
.reservado .ico{ color:var(--bronce-hondo); margin-top:.15em; }
html:not(.modo-demo) .reservado{ display:none; }

/* Entradas por scroll: sin JS todo visible */
.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity var(--t-lento) var(--sale), transform var(--t-lento) var(--sale); }
.js [data-reveal].en-vista{ opacity:1; transform:none; }
.js [data-reveal][data-delay="1"]{ transition-delay:110ms; }
.js [data-reveal][data-delay="2"]{ transition-delay:220ms; }
.js [data-reveal][data-delay="3"]{ transition-delay:330ms; }

/* ═══ 3 · BOTONES ═══
   Regla de la casa: texto blanco sobre el acento (bronce hondo, 6.3:1). */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:56px; padding:.8rem 1.6rem; border-radius:999px;
  font:800 1.125rem/1.1 var(--display); text-decoration:none; letter-spacing:.005em;
  background:var(--bronce-hondo); color:#fff; border:2px solid var(--bronce-hondo);
  transition:background var(--t-rapido), border-color var(--t-rapido), transform var(--t-rapido) var(--sale), box-shadow var(--t-rapido);
}
.boton:hover{ background:#664a24; border-color:#664a24; color:#fff; transform:translateY(-2px); box-shadow:var(--sombra); }
.boton:active{ transform:translateY(0); }
.boton--tinta{ background:var(--tinta); border-color:var(--tinta); color:var(--crema); }
.boton--tinta:hover{ background:#000; border-color:#000; color:#fff; }
.boton--linea{ background:transparent; color:var(--tinta); border-color:var(--tinta); }
.boton--linea:hover{ background:var(--tinta); color:var(--crema); border-color:var(--tinta); }
.oscuro .boton--linea{ color:var(--crema); border-color:var(--crema); }
.oscuro .boton--linea:hover{ background:var(--crema); color:var(--tinta); }
.boton .ico{ width:1.2em; height:1.2em; }
.botones{ display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center; }
.boton-tel strong{ font-variant-numeric:tabular-nums; }

/* ═══ 4 · CABECERA Y MENÚ ═══ */
.cabecera{ position:sticky; top:0; z-index:50; background:rgba(249,246,240,.96); border-bottom:1px solid var(--linea); }
@supports (backdrop-filter:blur(8px)){ .cabecera{ background:rgba(249,246,240,.88); backdrop-filter:blur(10px) saturate(1.2); } }
.cabecera__fila{ display:flex; align-items:center; gap:var(--e3); min-height:84px; }
.marca{ display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--tinta); margin-right:auto; }
.marca img{ width:60px; height:60px; }
.marca__nombre{ font:900 1.15rem/1 var(--display); letter-spacing:-.01em; }
.marca__nombre small{ display:block; margin-top:.3rem; font:700 .8rem/1 var(--texto); color:var(--bronce-hondo); letter-spacing:.04em; }

.nav{ display:flex; align-items:center; gap:.2rem; }
.nav > a, .nav__grupo > button{
  display:flex; align-items:center; gap:.35rem; min-height:48px; padding:.5rem .8rem; border-radius:var(--radio);
  font:800 1.05rem/1 var(--display); color:var(--tinta); text-decoration:none;
}
.nav > a:hover, .nav__grupo > button:hover, .nav > a[aria-current="page"]{ background:var(--crema-2); color:var(--tinta); }
.nav > a[aria-current="page"]{ box-shadow:inset 0 -3px 0 var(--bronce); }
.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); }
.desplegable{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-42%);
  width:min(880px, 92vw); padding:var(--e4); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e4);
  background:var(--papel); border:1px solid var(--linea); border-radius:10px; box-shadow:var(--sombra-alta);
}
.desplegable[hidden]{ display:none; }
.desplegable h3{ font-size:.95rem; font-weight:800; color:var(--bronce-hondo); margin-bottom:var(--e2); }
.desplegable ul{ list-style:none; padding:0; margin:0; }
.desplegable li{ margin:0; }
.desplegable a{ display:block; padding:.55rem .6rem; margin-inline:-.6rem; border-radius:var(--radio); text-decoration:none; color:var(--tinta); font-weight:700; line-height:1.3; }
.desplegable a small{ display:block; font-weight:400; font-size:.92rem; color:var(--tinta-2); margin-top:.15rem; }
.desplegable a:hover{ background:var(--crema-2); }
.desplegable__pie{ grid-column:1/-1; display:flex; gap:var(--e3); padding-top:var(--e3); border-top:1px solid var(--linea); font-weight:700; }

.cabecera__tel{ display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; }
.cabecera__tel .boton{ min-height:52px; padding:.7rem 1.2rem; }
.estado{ display:inline-flex; align-items:center; gap:.45rem; font-size:.9rem; font-weight:700; color:var(--tinta-2); }
.estado__punto{ width:.6em; height:.6em; border-radius:50%; background:var(--bronce); }
.estado--abierto .estado__punto{ background:var(--verde); box-shadow:0 0 0 4px rgba(47,107,63,.18); }

.hamburguesa{ display:none; width:52px; height:52px; border-radius:var(--radio); align-items:center; justify-content:center; border:2px solid var(--tinta); }
.hamburguesa .ico{ width:26px; height:26px; }
.menu-movil{ display:none; }

@media (max-width:1180px){
  .nav, .cabecera__tel .estado{ display:none; }
  .hamburguesa{ display:inline-flex; }
  .cabecera__tel .boton span{ display:none; }
  .cabecera__tel .boton{ padding:.7rem 1rem; }
  .menu-movil{
    display:block; position:fixed; inset:84px 0 0 0; z-index:49; overflow-y:auto;
    background:var(--crema); padding:var(--e4) 1.25rem calc(var(--e6) + 60px);
    transform:translateX(100%); visibility:hidden; transition:transform var(--t-medio) var(--sale), visibility 0s linear var(--t-medio);
  }
  .menu-movil[data-abierto="true"]{ transform:translateX(0); visibility:visible; transition:transform var(--t-medio) var(--sale); }
  .menu-movil h3{ font-size:1rem; color:var(--bronce-hondo); margin:var(--e4) 0 var(--e1); }
  .menu-movil ul{ list-style:none; padding:0; margin:0; }
  .menu-movil li{ margin:0; border-bottom:1px solid var(--linea); }
  .menu-movil a:not(.boton){ display:block; padding:.9rem 0; font:800 1.2rem/1.2 var(--display); color:var(--tinta); text-decoration:none; }
  .menu-movil .botones{ margin-top:var(--e4); }
  .menu-movil .boton{ width:100%; }
}
@media (max-width:520px){
  .marca img{ width:50px; height:50px; }
  .marca__nombre{ font-size:1rem; }
  .marca__nombre small{ display:none; }
}

/* ═══ 5 · HERO ═══ */
.hero{ padding:clamp(2.5rem, 2rem + 3vw, 5rem) 0 var(--e6); position:relative; overflow:clip; }
.hero__rejilla{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:center; }
.hero h1{ margin-bottom:var(--e4); }
.hero .lead{ margin-bottom:var(--e4); }
.hero .botones{ margin-bottom:var(--e4); }
.hero__foto{ position:relative; }
.hero__foto .foto{ border-radius:14px; box-shadow:var(--sombra-alta); }
.hero__foto .foto img{ aspect-ratio:4/3.4; object-fit:cover; object-position:62% 50%; }
.hero__sello{
  position:absolute; left:-44px; bottom:-44px; width:clamp(130px, 9vw + 60px, 190px);
  filter:drop-shadow(0 14px 18px rgba(31,32,34,.3)); transform:rotate(-8deg);
}
.pruebas{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,auto); gap:var(--e3); justify-content:start; }
.pruebas li{ display:flex; gap:.6rem; align-items:flex-start; margin:0; font-size:var(--t-chico); line-height:1.35; color:var(--tinta-2); }
.pruebas strong{ display:block; color:var(--tinta); font-family:var(--display); font-weight:800; }
.pruebas .ico{ color:var(--bronce-hondo); width:1.6em; height:1.6em; }
@media (max-width:980px){
  .hero__rejilla{ grid-template-columns:1fr; }
  .hero__foto{ order:-1; margin:0 0 var(--e3) 0; }
  .hero__sello{ left:auto; right:-10px; bottom:-38px; width:118px; }
  .pruebas{ grid-template-columns:1fr; }
}

/* Hero de páginas internas */
.hero--interno{ padding-bottom:var(--e5); }
.hero--interno h1{ font-size:clamp(2.3rem, 1.6rem + 3vw, 4.2rem); }
.migas{ font-size:.95rem; margin-bottom:var(--e3); color:var(--tinta-2); }
.migas ol{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.migas li{ margin:0; }
.migas li + li::before{ content:"/"; margin-right:.4rem; color:var(--bronce); }
.migas a{ color:var(--tinta-2); }
.ficha-datos{ display:flex; flex-wrap:wrap; gap:var(--e2); list-style:none; padding:0; margin:0 0 var(--e4); }
.ficha-datos li{ margin:0; padding:.55rem .9rem; border:1px solid var(--linea); border-radius:999px; background:var(--papel); font-size:var(--t-chico); }
.ficha-datos strong{ font-family:var(--display); font-weight:800; }

/* ═══ 6 · SECCIONES ═══ */
.banda{ padding:var(--e6) 0; }
.banda--kraft{ background:var(--crema-2); }
.oscuro{ background:var(--tinta); color:var(--crema); }
.oscuro .suave, .oscuro p{ color:var(--crema-tenue); }
.oscuro h2, .oscuro h3, .oscuro strong{ color:var(--crema); }
.oscuro a:not(.boton){ color:var(--bronce-claro); }
.cabeza-seccion{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e4); align-items:end; margin-bottom:var(--e5); }
.cabeza-seccion h2{ margin:0; }
.cabeza-seccion p{ margin:0; }
.dos-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:center; }
.dos-col--arriba{ align-items:start; }
@media (max-width:900px){
  .cabeza-seccion, .dos-col{ grid-template-columns:1fr; }
}

/* Separador firma: el doble anillo del sello con la puerta, dibujado en línea */
.filete{ display:flex; align-items:center; gap:1rem; width:var(--ancho); margin:0 auto; color:var(--bronce); }
.filete::before, .filete::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.55; }
.filete svg{ width:46px; height:46px; }
.js .filete--lista circle, .js .filete--lista path{ stroke-dasharray:160; stroke-dashoffset:160; }
.js .filete--lista.en-vista circle, .js .filete--lista.en-vista path{ stroke-dashoffset:0; transition:stroke-dashoffset 1.3s var(--sale); }

/* ═══ 7 · FOTOS ═══ */
.foto{ margin:0; overflow:hidden; border-radius:10px; background:var(--crema-2); }
.foto img{ width:100%; height:100%; object-fit:cover; }
figure figcaption{ font-size:.95rem; color:var(--tinta-2); margin-top:.6rem; }
.oscuro figure figcaption{ color:var(--crema-tenue); }
.antes-despues{ position:relative; }
.antes-despues__rotulos{ position:absolute; inset:auto 0 1rem 0; display:flex; justify-content:space-between; padding:0 1rem; pointer-events:none; }
.antes-despues__rotulos span{ padding:.35rem .8rem; border-radius:999px; background:var(--tinta); color:var(--crema); font:800 .95rem/1 var(--display); }
.antes-despues__rotulos span:last-child{ background:var(--bronce-hondo); color:#fff; }

/* ═══ 8 · LISTAS Y TABLAS ═══ */
.tabla-rangos{ font-size:var(--t-chico); background:var(--papel); border-radius:10px; overflow:hidden; box-shadow:var(--sombra); }
.tabla-rangos caption{ text-align:left; padding-bottom:var(--e2); color:var(--tinta-2); font-size:.95rem; caption-side:bottom; padding-top:var(--e2); }
.tabla-rangos th, .tabla-rangos td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--linea); vertical-align:top; }
.tabla-rangos thead th{ font-family:var(--display); font-weight:800; background:var(--tinta); color:var(--crema); }
.tabla-rangos td:last-child, .tabla-rangos th:last-child{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700; }
.tabla-rangos tbody th{ font-weight:700; }
.tabla-rangos small{ display:block; font-weight:400; color:var(--tinta-2); }
.lista-check{ list-style:none; padding:0; }
.lista-check li{ position:relative; padding-left:1.9rem; margin-bottom:.7rem; }
.lista-check li::before{ content:""; position:absolute; left:0; top:.28em; width:1.1rem; height:1.1rem; border-radius:50%; border:2px solid var(--bronce); background:radial-gradient(circle, var(--bronce-hondo) 0 38%, transparent 40%); }

/* ═══ 9 · FORMULARIOS ═══ */
.campo{ display:grid; gap:.4rem; margin-bottom:var(--e3); }
.campo label, .campo legend{ font-weight:700; }
.campo small{ color:var(--tinta-2); font-size:.95rem; }
input, select, textarea{
  width:100%; min-height:56px; padding:.75rem 1rem; font:inherit; color:var(--tinta);
  background:var(--papel); border:2px solid #B9AE9B; border-radius:var(--radio);
}
textarea{ min-height:130px; resize:vertical; }
input:focus, select:focus, textarea:focus{ outline:3px solid var(--foco); outline-offset:1px; border-color:var(--tinta); }
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2022' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:22px; padding-right:3rem; }
.campo--error input, .campo--error select{ border-color:var(--rotulador); }
.campo__error{ color:var(--rotulador); font-weight:700; font-size:.95rem; }
.trampa{ position:absolute; left:-9999px; }
.formulario{ background:var(--papel); padding:clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius:12px; box-shadow:var(--sombra); }
.formulario__exito{ padding:var(--e3); border-radius:var(--radio); background:rgba(47,107,63,.1); border:2px solid var(--verde); }
.fila-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e3); }
@media (max-width:620px){ .fila-2{ grid-template-columns:1fr; } }

/* ═══ 10 · SECOND OPINION (elemento firma) ═══
   Un presupuesto en papel que el rotulador rojo corrige: tacha las piezas que el
   trabajo casi nunca necesita. Sin precios (pedido del cliente): arriba va el
   tiempo normal en sitio. Sin JS se ve un ejemplo ya corregido. */
.segunda{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:start; }
.segunda__entrada h2{ margin-bottom:var(--e3); }
.segunda__forma{ margin-top:var(--e4); }
.segunda__forma .campo{ margin-bottom:var(--e3); }
.segunda__aviso{ font-size:.95rem; color:var(--tinta-2); margin-top:var(--e3); }

.ticket{
  position:relative; background:var(--papel); color:var(--tinta);
  padding:clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 1rem + 2vw, 2.5rem) clamp(1.75rem, 1rem + 2vw, 2.75rem);
  box-shadow:var(--sombra-alta); transform:rotate(.6deg);
  /* borde de arriba perforado, como un talonario */
  -webkit-mask:radial-gradient(circle 7px at 50% 0, transparent 97%, #000) 0 0/22px 51% repeat-x, linear-gradient(#000 0 0) 0 100%/100% 50% no-repeat;
          mask:radial-gradient(circle 7px at 50% 0, transparent 97%, #000) 0 0/22px 51% repeat-x, linear-gradient(#000 0 0) 0 100%/100% 50% no-repeat;
}
.ticket::after{ /* renglones del papel */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(180deg, transparent 0 39px, #E4DACA 39px 40px);
}
.ticket > *{ position:relative; z-index:1; }
.ticket__cabeza{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem; align-items:baseline; padding-bottom:var(--e2); border-bottom:2px solid var(--tinta); margin-bottom:var(--e3); }
.ticket__cabeza strong{ font:900 1.05rem/1.2 var(--display); }
.ticket__cabeza span{ font-size:.9rem; color:var(--tinta-2); font-variant-numeric:tabular-nums; }
.ticket__linea{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:var(--e1); }
.ticket__trabajo{ font-weight:700; }
.ticket__monto{ position:relative; flex-shrink:0; font:900 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.1 var(--display); padding:.35em .6em; text-align:center; max-width:14em; }
.ticket__circulo{ position:absolute; inset:-.1em -.15em; width:calc(100% + .3em); height:calc(100% + .2em); overflow:visible; pointer-events:none; }
.ticket__circulo path{ fill:none; stroke:var(--rotulador); stroke-width:3.2; stroke-linecap:round; }
.ticket__nota{ font:400 clamp(1.25rem, 1.1rem + .6vw, 1.55rem)/1.25 var(--mano); color:var(--rotulador); margin:var(--e2) 0 var(--e3); transform:rotate(-1.5deg); max-width:none; }

.ticket__tiempo{ margin:-.2rem 0 0; font-size:.95rem; color:var(--tinta-2); text-align:right; max-width:none; }

/* Las líneas del presupuesto: lo normal pasa, lo dudoso se subraya, lo que
   sobra se tacha con rotulador */
.lineas{ list-style:none; padding:0; margin:var(--e3) 0; border-top:1px dashed #CFC3AE; }
.linea{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:0; padding:.6rem 0; border-bottom:1px dashed #CFC3AE; }
.linea__txt{ position:relative; font-weight:500; }
.linea__nota{ flex-shrink:0; font:400 1rem/1.2 var(--mano); text-align:right; }
.linea--ok .linea__nota{ color:var(--verde); }
.linea--duda .linea__nota{ color:var(--ambar); }
.linea--duda .linea__txt{ text-decoration:underline wavy var(--ambar); text-decoration-thickness:1.5px; text-underline-offset:5px; }
.linea--no .linea__nota{ color:var(--rotulador); }
.linea--no .linea__txt{ color:var(--tinta-2); }
.linea--no .linea__txt::after{ /* el tachón del rotulador */
  content:""; position:absolute; left:-.2em; right:-.2em; top:52%; height:3px; border-radius:3px;
  background:var(--rotulador); transform:rotate(-2deg); transform-origin:left center;
}
.ticket.corrigiendo .linea--no .linea__txt::after{ animation:tachar .35s var(--sale) both; }
.ticket.corrigiendo .linea--no:nth-child(2) .linea__txt::after{ animation-delay:.1s; }
.ticket.corrigiendo .linea--no:nth-child(3) .linea__txt::after{ animation-delay:.2s; }
.ticket.corrigiendo .linea--no:nth-child(4) .linea__txt::after{ animation-delay:.3s; }
@keyframes tachar{ from{ transform:rotate(-2deg) scaleX(0); } to{ transform:rotate(-2deg) scaleX(1); } }

/* Casillas del formulario: grandes, fáciles de tocar */
.casillas{ border:0; padding:0; margin:0 0 var(--e3); display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.casillas legend{ grid-column:1/-1; font-weight:700; margin-bottom:.4rem; padding:0; }
.casillas small, .casillas .campo__error{ grid-column:1/-1; }
.casilla{ display:flex; align-items:center; gap:.65rem; min-height:52px; padding:.5rem .8rem; background:var(--papel); border:2px solid #B9AE9B; border-radius:var(--radio); cursor:pointer; font-size:1.02rem; line-height:1.25; transition:border-color var(--t-rapido), background var(--t-rapido); }
.casilla:hover{ border-color:var(--tinta); }
.casilla input{ width:22px; height:22px; min-height:0; flex-shrink:0; margin:0; accent-color:var(--bronce-hondo); }
.casilla:has(input:checked){ border-color:var(--bronce-hondo); background:#F4ECDD; }
.casillas.campo--error .casilla{ border-color:var(--rotulador); }
@media (max-width:520px){ .casillas{ grid-template-columns:1fr; } }

/* El sello del veredicto: el doble anillo del logo, estampado */
.veredicto{ display:flex; gap:var(--e3); align-items:center; margin:var(--e4) 0 var(--e3); }
.veredicto__sello{
  flex-shrink:0; width:128px; height:128px; border-radius:50%; display:grid; place-items:center; text-align:center;
  border:4px solid currentColor; box-shadow:inset 0 0 0 5px var(--papel), inset 0 0 0 7px currentColor;
  font:900 1.3rem/1 var(--display); letter-spacing:.04em; transform:rotate(-12deg); color:var(--verde);
}
.veredicto__sello small{ display:block; font:700 .72rem/1.2 var(--texto); letter-spacing:.06em; margin-top:.25rem; }
.veredicto[data-veredicto="ask"] .veredicto__sello{ color:var(--ambar); }
.veredicto[data-veredicto="stop"] .veredicto__sello{ color:var(--rotulador); }
.veredicto h3{ margin:0 0 .3rem; font-size:1.45rem; }
.veredicto p{ margin:0; }
.preguntas{ counter-reset:p; list-style:none; padding:0; margin:0 0 var(--e3); }
.preguntas li{ counter-increment:p; position:relative; padding-left:2.4rem; margin-bottom:.8rem; }
.preguntas li::before{ content:counter(p); position:absolute; left:0; top:-.05em; width:1.75rem; height:1.75rem; border-radius:50%; border:2px solid var(--rotulador); color:var(--rotulador); font:400 1rem/1.55rem var(--mano); text-align:center; }
.ticket__consejo{ padding:var(--e2) var(--e3); background:rgba(169,128,81,.12); border-radius:var(--radio); font-size:var(--t-chico); }
.ticket__acciones{ margin-top:var(--e4); }
.ticket__acciones .boton{ min-height:52px; font-size:1.02rem; padding:.7rem 1.2rem; }
.ticket__letra{ font-size:.9rem; color:var(--tinta-2); margin-top:var(--e3); margin-bottom:0; }

/* Animación del rotulador: solo cuando el JS corrige un presupuesto nuevo */
.ticket.corrigiendo .ticket__circulo path{ stroke-dasharray:var(--largo, 400); stroke-dashoffset:var(--largo, 400); animation:trazar .75s var(--sale) .15s forwards; }
.ticket.corrigiendo .ticket__nota{ animation:escribir .5s var(--sale) .65s both; }
.ticket.corrigiendo .veredicto__sello{ animation:estampar .45s cubic-bezier(.2,1.6,.4,1) .9s both; }
@keyframes trazar{ to{ stroke-dashoffset:0; } }
@keyframes escribir{ from{ opacity:0; clip-path:inset(0 100% 0 0); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes estampar{ from{ opacity:0; transform:rotate(-12deg) scale(1.6); } to{ opacity:1; transform:rotate(-12deg) scale(1); } }

@media (max-width:980px){
  .segunda{ grid-template-columns:1fr; }
  .ticket{ transform:none; }
}
@media (max-width:520px){
  .veredicto{ flex-direction:column; align-items:flex-start; }
  .veredicto__sello{ width:108px; height:108px; font-size:1.1rem; }
}

/* ═══ 11 · SERVICIOS ═══ */
.servicios{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem, 1rem + 2vw, 3rem); }
.servicios__grupo h3{ padding-bottom:var(--e2); border-bottom:3px solid var(--tinta); }
.servicios__lista{ list-style:none; padding:0; margin:0; }
.servicios__lista li{ margin:0; border-bottom:1px solid var(--linea); }
.servicios__lista a{ display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; padding:1rem 0; text-decoration:none; color:var(--tinta); transition:padding var(--t-rapido) var(--sale); }
.servicios__lista a:hover{ padding-left:.5rem; color:var(--tinta); }
.servicios__lista strong{ font:800 1.18rem/1.25 var(--display); }
.servicios__lista span{ grid-column:1; color:var(--tinta-2); font-size:var(--t-chico); line-height:1.4; }
.servicios__lista em{ grid-row:1/3; grid-column:2; align-self:center; font-style:normal; font-weight:700; font-size:.95rem; color:var(--bronce-hondo); white-space:nowrap; font-variant-numeric:tabular-nums; }
.servicios__foto{ margin-bottom:var(--e5); display:grid; grid-template-columns:1.3fr 1fr; gap:var(--e4); align-items:center; }
.servicios__foto .foto img{ aspect-ratio:16/9; }
@media (max-width:980px){ .servicios{ grid-template-columns:1fr; } .servicios__foto{ grid-template-columns:1fr; } }

/* ═══ 12 · QUIÉN LLEGA (banda oscura) ═══ */
.quien{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:center; }
.quien__fotos{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:var(--e3); }
.quien__fotos figure:first-child{ grid-row:1/3; }
.quien__fotos .foto img{ height:100%; min-height:220px; }
.quien__fotos figure:first-child img{ object-position:40% 50%; }
.quien__lista{ list-style:none; padding:0; margin:var(--e4) 0; display:grid; gap:var(--e3); }
.quien__lista li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; margin:0; }
.quien__lista .ico{ width:2rem; height:2rem; color:var(--bronce-claro); }
.quien__lista strong{ display:block; font:800 1.2rem/1.3 var(--display); margin-bottom:.2rem; }
.aviso-seguridad{ padding:var(--e3); border:2px solid var(--bronce); border-radius:10px; }
.aviso-seguridad p{ margin:0; }
@media (max-width:980px){ .quien{ grid-template-columns:1fr; } }

/* ═══ 13 · HOA Y 55+ ═══ */
.comunidades{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:var(--e3) 0 var(--e4); }
.comunidades li{ margin:0; padding:.5rem 1rem; border:2px solid var(--tinta); border-radius:999px; font-weight:700; font-size:var(--t-chico); background:var(--papel); }
.paquete{ counter-reset:paq; list-style:none; padding:0; margin:0 0 var(--e4); }
.paquete li{ counter-increment:paq; display:grid; grid-template-columns:2.6rem 1fr; gap:.8rem; margin-bottom:var(--e3); }
.paquete li::before{ content:counter(paq); width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; background:var(--tinta); color:var(--crema); font:900 1.1rem/1 var(--display); }

/* ═══ 14 · PASOS DE LA VISITA ═══ */
.pasos{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e4); counter-reset:paso; }
.pasos li{ counter-increment:paso; margin:0; padding-top:var(--e3); border-top:3px solid var(--bronce); }
.pasos li::before{ content:counter(paso); display:block; font:900 3rem/1 var(--display); color:var(--bronce-hondo); margin-bottom:var(--e2); }
.oscuro .pasos li::before{ color:var(--bronce-claro); }
.pasos h3{ font-size:1.3rem; margin-bottom:var(--e1); }
.pasos p{ font-size:var(--t-chico); margin:0; }
@media (max-width:980px){ .pasos{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pasos{ grid-template-columns:1fr; } }

/* ═══ 15 · PRUEBA Y CREDENCIALES ═══ */
.credenciales{ list-style:none; padding:0; margin:0; }
.credenciales li{ display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--linea); margin:0; }
.credenciales .k{ font:800 1.05rem/1.4 var(--display); color:var(--bronce-hondo); }
@media (max-width:560px){ .credenciales li{ grid-template-columns:1fr; gap:.2rem; } }
.resenas{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e4); }
.resena{ margin:0; padding:var(--e4) var(--e3) var(--e3); background:var(--papel); border-radius:10px; box-shadow:var(--sombra); }
.resena blockquote{ margin:0 0 var(--e3); font-size:1.1rem; }
.resena figcaption{ font-weight:700; color:var(--tinta); }
.resena figcaption span{ display:block; font-weight:400; color:var(--tinta-2); }
@media (max-width:900px){ .resenas{ grid-template-columns:1fr; } }

/* ═══ 16 · ZONAS Y ZIP ═══ */
.zip-forma{ display:flex; gap:var(--e2); max-width:30rem; }
.zip-forma input{ flex:1; font:800 1.3rem/1 var(--display); letter-spacing:.08em; }
.zip-respuesta{ display:none; margin-top:var(--e3); padding:var(--e3); border-radius:var(--radio); background:var(--papel); border:2px solid var(--verde); max-width:34rem; }
.zip-respuesta.visible{ display:block; }
.zip-respuesta.fuera{ border-color:var(--bronce-hondo); }
.zip-respuesta p{ margin:0; }
.zonas{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--e4); }
.zonas li{ margin:0; border-bottom:1px solid var(--linea); }
.zonas a{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1rem 0; text-decoration:none; color:var(--tinta); font:800 1.2rem/1.2 var(--display); }
.zonas a span{ font:400 .95rem/1.2 var(--texto); color:var(--tinta-2); text-align:right; }
.zonas a:hover{ color:var(--bronce-hondo); }
@media (max-width:560px){ .zonas{ grid-template-columns:1fr; } .zip-forma{ flex-direction:column; } }

/* ═══ 17 · FAQ ═══ */
.faq{ border-top:2px solid var(--tinta); max-width:900px; }
.faq__item{ border-bottom:1px solid var(--linea); }
.faq__item h3{ margin:0; font-size:inherit; }
.faq__boton{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3); width:100%; padding:var(--e3) 0; text-align:left; font:800 1.25rem/1.35 var(--display); transition:color var(--t-rapido); }
.faq__boton:hover{ color:var(--bronce-hondo); }
.faq__signo{ position:relative; flex-shrink:0; width:24px; height:24px; margin-top:.2em; color:var(--bronce-hondo); }
.faq__signo::before, .faq__signo::after{ content:""; position:absolute; top:50%; left:0; width:100%; height:3px; margin-top:-1.5px; background:currentColor; border-radius:2px; 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; padding-bottom:var(--e3); }
.js .faq__panel[data-abierto="false"]{ grid-template-rows:0fr; }
.js .faq__panel[data-abierto="false"] > div{ visibility:hidden; padding-bottom:0; transition:visibility 0s linear var(--t-medio), padding var(--t-medio); }
.oscuro .faq{ border-top-color:var(--crema); }
.oscuro .faq__item{ border-color:var(--linea-oscura); }

/* ═══ 18 · PÁGINAS INTERNAS ═══ */
.articulo{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(2rem, 1rem + 4vw, 5rem); align-items:start; }
.prosa h2{ font-size:clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); margin-top:var(--e5); }
.prosa h2:first-child{ margin-top:0; }
.prosa h3{ margin-top:var(--e4); }
.prosa figure{ margin:var(--e4) 0; }
.nota-honesta{ margin:var(--e4) 0; padding:var(--e3) var(--e4); background:var(--tinta); color:var(--crema); border-radius:10px; }
.nota-honesta h3{ margin:0 0 var(--e1); color:var(--bronce-claro); font-size:1.2rem; }
.nota-honesta p{ margin:0; color:var(--crema); max-width:none; }
.nota-honesta a{ color:var(--bronce-claro); }
.lateral{ position:sticky; top:110px; display:grid; gap:var(--e3); }
.caja{ padding:var(--e4) var(--e3); background:var(--papel); border-radius:12px; box-shadow:var(--sombra); }
.caja h2, .caja h3{ font-size:1.3rem; margin-bottom:var(--e2); }
.caja p{ font-size:var(--t-chico); }
.caja .boton{ width:100%; }
.caja .botones{ flex-direction:column; align-items:stretch; }
.caja--oscura{ background:var(--tinta); color:var(--crema); }
.caja--oscura p{ color:var(--crema-tenue); }
.caja ul{ font-size:var(--t-chico); }
.relacionados{ list-style:none; padding:0; margin:0; }
.relacionados li{ margin:0; border-bottom:1px solid var(--linea); }
.relacionados a{ display:block; padding:.65rem 0; font-weight:700; text-decoration:none; color:var(--tinta); }
.relacionados a:hover{ color:var(--bronce-hondo); }
@media (max-width:980px){ .articulo{ grid-template-columns:1fr; } .lateral{ position:static; } }

.error-404{ min-height:60vh; display:grid; place-items:center; text-align:center; }
.error-404 img{ margin:0 auto var(--e4); width:180px; }
.error-404 p{ margin-inline:auto; }

/* Cierre */
.cierre{ text-align:center; }
.cierre img{ width:120px; margin:0 auto var(--e4); }
.cierre h2{ max-width:18em; margin-inline:auto; }
.cierre p{ margin-inline:auto; }
.cierre .botones{ justify-content:center; margin-top:var(--e4); }

/* ═══ 19 · PIE Y BARRA MÓVIL ═══ */
.pie{ background:var(--tinta); color:var(--crema-tenue); padding:var(--e6) 0 var(--e4); font-size:var(--t-chico); }
.pie a{ color:var(--crema); text-decoration:none; }
.pie a:hover{ color:var(--bronce-claro); text-decoration:underline; }
.pie__rejilla{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:var(--e4); }
.pie h2{ font-size:1.05rem; color:var(--bronce-claro); margin-bottom:var(--e2); }
.pie ul{ list-style:none; padding:0; margin:0; }
.pie li{ margin-bottom:.5rem; }
.pie__marca img{ width:110px; margin-bottom:var(--e3); }
.pie__marca p{ color:var(--crema-tenue); }
.pie__tel{ font:900 1.6rem/1.2 var(--display); color:var(--crema)!important; }
.horario{ width:100%; font-size:.98rem; }
.horario th, .horario td{ padding:.3rem 0; text-align:left; font-weight:400; border-bottom:1px solid var(--linea-oscura); }
.horario td{ text-align:right; font-variant-numeric:tabular-nums; }
.horario tr[data-hoy] th, .horario tr[data-hoy] td{ color:var(--crema); font-weight:700; }
.horario__hoy{ margin-left:.4rem; font-size:.8rem; color:var(--bronce-claro); }
.pie__legal{ margin-top:var(--e5); padding-top:var(--e3); border-top:1px solid var(--linea-oscura); display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--e2); font-size:.92rem; }
.pie__legal p{ margin:0; max-width:none; }
@media (max-width:980px){ .pie__rejilla{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pie__rejilla{ grid-template-columns:1fr; } }

.barra-movil{ display:none; }
@media (max-width:760px){
  .barra-movil{
    display:flex; gap:.6rem; position:fixed; left:0; right:0; bottom:0; z-index:45;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(31,32,34,.96); border-top:1px solid var(--linea-oscura);
  }
  .barra-movil .boton{ flex:1; min-height:54px; padding:.6rem .8rem; font-size:1.05rem; }
  .barra-movil .boton--linea{ color:var(--crema); border-color:var(--crema); }
  body{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
}


/* ═══ 20 · APERTURA "ENTINTADO" ═══
   Tercera versión de la puerta que se abre (FL Garage = puerta de acero en el
   hero; 561 = sol y telón). Aquí:
   1. La pantalla es una puerta seccional crema (seis listones).
   2. El sello REAL del logo se entinta en un barrido circular, como un sello
      de goma que se apoya.
   3. La puerta del logo sube y se enciende la luz del garaje.
   4. La pantalla se recoge listón por listón, de abajo hacia arriba.
   Solo en la home, una vez por sesión, se salta con clic o tecla.
   Sin JS o con "reducir movimiento" no existe. */
@property --giro{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.apertura{ display:none; }
.js .apertura{ display:block; position:fixed; inset:0; z-index:80; cursor:pointer; }
.sin-apertura .apertura{ display:none!important; }
.apertura__listones{ position:absolute; inset:0; display:grid; grid-template-rows:repeat(6,1fr); }
.apertura__liston{
  background:linear-gradient(180deg, #FBF9F4 0%, var(--crema) 55%, #F1EBDF 100%);
  border-bottom:2px solid #E3D8C4; box-shadow:inset 0 1px 0 #fff;
  transform-origin:50% 0; transition:transform .5s cubic-bezier(.7,0,.3,1);
}
.apertura__centro{ position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:1.4rem; transition:opacity .35s ease-out, transform .5s cubic-bezier(.7,0,.3,1); }
.apertura__sello{ position:relative; width:min(62vw, 58vh, 440px); aspect-ratio:1; }
.apertura__sello > img{ position:absolute; inset:0; width:100%; height:100%; }
.apertura__tinta{
  position:absolute; inset:0;
  -webkit-mask:conic-gradient(from -90deg, #000 var(--giro), transparent 0);
          mask:conic-gradient(from -90deg, #000 var(--giro), transparent 0);
  transition:--giro .8s cubic-bezier(.45,0,.2,1);
}
.apertura__tinta > img{ width:100%; height:100%; }
/* El hueco del garaje, medido sobre el logo: 31.2% / 38.37% / 37.69% × 19.38% */
.apertura__hueco{ position:absolute; left:31.2%; top:38.37%; width:37.7%; height:19.38%; overflow:hidden; }
.apertura__luz{ position:absolute; inset:0; background:radial-gradient(120% 110% at 50% 100%, #FFE6B8 0%, #E0AE6A 45%, #1F2022 100%); opacity:0; transition:opacity .6s ease-out .15s; }
.apertura__puerta{ position:absolute; inset:0; transition:transform .8s cubic-bezier(.65,0,.25,1); }
.apertura__puerta img{ width:100%; height:100%; }
.apertura__lema{ margin:0; max-width:none; font:800 clamp(1rem, .9rem + .5vw, 1.3rem)/1.3 var(--display); color:var(--bronce-hondo); opacity:0; transform:translateY(8px); transition:opacity .45s ease-out, transform .5s var(--sale); text-align:center; padding:0 1rem; }
.apertura__saltar{ position:absolute; right:1.2rem; bottom:1.2rem; font-size:.9rem; font-weight:700; color:var(--tinta-2); }

.apertura.entinta .apertura__tinta{ --giro:360deg; }
.apertura.abre .apertura__puerta{ transform:translateY(-101%); }
.apertura.abre .apertura__luz{ opacity:1; }
.apertura.abre .apertura__lema{ opacity:1; transform:none; }
.apertura.recoge .apertura__centro{ opacity:0; transform:translateY(-6vh) scale(.94); }
.apertura.recoge .apertura__liston{ transform:scaleY(0); }
/* Listón por listón, de abajo hacia arriba: el de abajo se va primero */
.apertura.recoge .apertura__liston:nth-child(6){ transition-delay:0ms; }
.apertura.recoge .apertura__liston:nth-child(5){ transition-delay:70ms; }
.apertura.recoge .apertura__liston:nth-child(4){ transition-delay:140ms; }
.apertura.recoge .apertura__liston:nth-child(3){ transition-delay:210ms; }
.apertura.recoge .apertura__liston:nth-child(2){ transition-delay:280ms; }
.apertura.recoge .apertura__liston:nth-child(1){ transition-delay:350ms; }
.apertura.fuera{ display:none!important; }
/* Navegadores sin @property (el JS pone .sin-property): el sello aparece con un
   fundido en lugar del barrido, porque la máscara no se podría animar */
.sin-property .apertura__tinta{ -webkit-mask:none; mask:none; opacity:0; transition:opacity .6s ease-out; }
.sin-property .apertura.entinta .apertura__tinta{ opacity:1; }

/* ═══ 21 · MOVIMIENTO REDUCIDO E IMPRESIÓN ═══ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0ms!important; }
  .js [data-reveal]{ opacity:1!important; transform:none!important; }
  .js .apertura{ display:none!important; }
  .ticket{ transform:none; }
}
@media print{
  .cabecera, .menu-movil, .barra-movil, .apertura, .pie, .segunda__entrada, .ticket__acciones, .cierre{ display:none!important; }
  body{ background:#fff; font-size:12pt; }
  .banda{ padding:1rem 0; }
  .ticket{ box-shadow:none; transform:none; -webkit-mask:none; mask:none; border:1px solid #999; }
}

/* Dato provisional: etiqueta "pending" junto a lo que falta confirmar con el
   cliente. Solo aparece en modo demo; en producción no se ve nada. */
.provisional{ display:none; }
html.modo-demo .provisional{ display:inline-block; vertical-align:.12em; margin-left:.25rem; padding:.05rem .45rem; border-radius:999px; border:1px dashed currentColor; font:700 .68rem/1.4 var(--texto); letter-spacing:.04em; text-transform:uppercase; color:var(--bronce-hondo); }
html.modo-demo .oscuro .provisional, html.modo-demo .pie .provisional, html.modo-demo .caja--oscura .provisional{ color:var(--bronce-claro); }