/* =========================================================
   Mandamás · estilos (mobile-first, 360 px primero)
   Paleta y tipografía según el manual de marca.
   ========================================================= */

/* ---- Fuentes autoalojadas (subset latino, OFL) ---- */
@font-face{font-family:"Anton";src:url(/fonts/anton-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/spacemono-700-latin.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --negro:#0A0A0A;
  --grafito:#2E2E2E; /* bordes y líneas */
  --concreto:#EDEBE6;
  --brasa:#FF4A1C;
  --humo:#8A8A8A;  /* 5,9:1 sobre negro: OK para texto secundario */
  --f-titulo:"Anton",Impact,"Arial Narrow",sans-serif;
  --f-mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-texto:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:16px;
  --barra-alto:73px; /* 10 + 52 + 10 + 1 de borde */
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--negro);color:var(--concreto);
  font:400 16px/1.55 var(--f-texto);
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
[hidden]{display:none!important}
/* Espacio para la barra fija: solo en móvil y si el JS la activa (html.con-barra) */
@media (max-width:767px){
  .con-barra body{padding-bottom:calc(var(--barra-alto) + 16px + env(safe-area-inset-bottom))}
}

:focus-visible{outline:3px solid var(--concreto);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-9999px;top:0;background:var(--concreto);color:var(--negro);padding:12px 16px;z-index:100;font-weight:600}
.saltar:focus{left:8px;top:8px}

/* ---- Tipos de la marca ---- */
h1,h2,h3,.titulo{font-family:var(--f-titulo);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.005em;margin:0 0 .4em}
h1{font-size:clamp(48px,13.5vw,120px);line-height:.92}
h2{font-size:clamp(34px,10vw,64px)}
h3{font-size:clamp(22px,6.4vw,30px);line-height:1.05}
.tag{font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--humo);margin:0 0 14px}
.tag-brasa{color:var(--brasa)}
.brasa{color:var(--brasa)}
.secundario{color:var(--humo)}
.mono{font-family:var(--f-mono);font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ---- Layout ---- */
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 var(--gutter)}
.seccion{padding:64px 0;border-top:1px solid var(--grafito)}
.lead{font-size:18px;max-width:38em}

/* ---- Barra superior ---- */
.top{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.94);border-bottom:1px solid var(--grafito)}
@supports (backdrop-filter:blur(8px)){.top{background:rgba(10,10,10,.8);backdrop-filter:blur(8px)}}
/* Móvil: fila 1 logo + menú; fila 2 nombre bajo el logo. Desde 768 px: logo y nombre a la izquierda, enlaces a la derecha. */
.top .wrap{display:grid;grid-template-columns:auto auto;grid-template-areas:"logo nav" "txt txt";justify-content:space-between;align-items:center;column-gap:16px;row-gap:4px;padding-top:8px;padding-bottom:8px}
.marca{display:contents}
.top .logo{grid-area:logo}
.nav{grid-area:nav;justify-self:end}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-weight:600}
.nav a:hover{text-decoration:underline}
.nav a[aria-current="page"]{color:var(--brasa)}
.nav-ancho{display:none}
.nav-movil{position:relative}
.nav-movil summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--humo);border-radius:6px;cursor:pointer;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.nav-movil summary::-webkit-details-marker{display:none}
.nav-movil summary::after{content:"+";font-family:var(--f-titulo);font-size:22px;line-height:1;color:var(--brasa);transition:transform .15s}
.nav-movil[open] summary::after{transform:rotate(45deg)}
.nav-movil ul{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:6px 0;background:var(--negro);border:1px solid var(--grafito);border-radius:8px;z-index:40}
.nav-movil a{display:flex;align-items:center;min-height:44px;padding:0 18px;font-size:16px}
@media (min-width:768px){
  .top .wrap{grid-template-areas:"logo nav" "txt nav"}
  .nav-movil{display:none}
  .nav-ancho{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 22px}
  .nav-ancho a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
}
.marca-txt{grid-area:txt;margin:0;font-family:var(--f-mono);font-weight:700;font-size:12px;line-height:1.3;letter-spacing:.02em;color:var(--humo)}

/* Logo oficial (img/mandamas-perfil-1.png, 1080×1080, fondo #0A0A0A).
   Se muestra solo la zona del logo (x 179–905, y 426–652 del archivo) sin estirar ni recolorear.
   --lw = ancho visible del logo; mínimo 120 px según el manual. */
.logo{--lw:132px;display:block;position:relative;overflow:hidden;width:var(--lw);aspect-ratio:726/226;background:var(--negro);flex:none}
.logo img{position:absolute;max-width:none;width:calc(var(--lw) * 1080 / 726);height:auto;left:calc(var(--lw) * -179 / 726);top:calc(var(--lw) * -426 / 726)}
/* ---- Botones ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 20px;border-radius:6px;border:2px solid transparent;
  font-family:var(--f-titulo);font-size:19px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;
  text-decoration:none;text-align:center;cursor:pointer;transition:transform .12s ease,background-color .12s ease;
}
.btn:active{transform:scale(.98)}
.btn-brasa{background:var(--brasa);color:var(--negro)}           /* texto negro sobre brasa (5,9:1) */
.btn-linea{background:transparent;color:var(--concreto);border-color:var(--humo)} /* borde 5,7:1 (WCAG 1.4.11) */
.btn-linea:hover{border-color:var(--concreto)}
.btn-sm{min-height:44px;padding:8px 16px;font-size:17px}
.btn-xl{width:100%;min-height:60px;font-size:21px;padding:14px 18px}
.btn small{font-family:var(--f-texto);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none}

/* ---- Hero ---- */
.hero{padding:18px 0 40px}
.hero h1{margin-bottom:10px}
.hero .tag{margin-bottom:10px}
.hero .sub{font-size:17px;color:var(--concreto);margin-bottom:10px}
.precio-hero{font-family:var(--f-mono);font-weight:700;font-size:16px;letter-spacing:.04em;color:var(--concreto);margin:0 0 8px}
.estado{font-family:var(--f-mono);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;color:var(--concreto)}
.estado b{color:var(--brasa);font-weight:700}
.nota-cta{font-family:var(--f-mono);font-weight:700;font-size:12px;line-height:1.45;letter-spacing:.03em;color:var(--humo);margin:6px 0 0;text-align:center}
.cta-bloque .nota-cta{text-align:left}
.confianza{font-size:14px;color:var(--humo);margin:6px 0 0;text-align:center}
.cuenta{font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--humo);text-align:center;margin:12px 0 0}
.hero .cuenta{text-align:left;margin:0 0 14px;color:var(--brasa)}
.hero-media{margin-top:28px;display:grid;gap:12px;align-content:start;position:relative;max-width:420px}

/* ---- Contador de 50 piezas ---- */
.contador{margin:0 0 18px}
.contador-num{font-family:var(--f-mono);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px}
.contador-num b{font-family:var(--f-titulo);font-weight:400;font-size:34px;letter-spacing:0;color:var(--brasa);vertical-align:-4px}
.barra50{display:grid;grid-template-columns:repeat(25,1fr);gap:3px}
.barra50 i{display:block;aspect-ratio:1;border:1px solid var(--grafito);border-radius:2px}
.barra50 i.on{background:var(--brasa);border-color:var(--brasa)}

/* ---- Bloques de contenido ---- */
.caja-lista{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid var(--grafito)}
.caja-lista li{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--grafito);font-size:17px}
.caja-lista li span:last-child{font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--humo);text-transform:uppercase;align-self:center}
.precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:8px 0 24px}
.precio .valor{font-family:var(--f-titulo);font-size:56px;line-height:1}
.precio .nota{font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--humo)}

.mas-grande{font-family:var(--f-titulo);font-size:clamp(120px,40vw,220px);line-height:.8;color:var(--brasa);margin:0 0 8px}
.mas-hoy{display:inline-block;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--brasa);color:var(--brasa);padding:8px 12px;border-radius:4px}

.pasos{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:paso}
.pasos li{background:var(--negro);border:1px solid var(--grafito);border-radius:8px;padding:20px 18px;counter-increment:paso}
.pasos li::before{content:"0" counter(paso);display:block;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--brasa);margin-bottom:8px}
.pasos h3{margin-bottom:6px}
.pasos p{margin:0;color:var(--humo)}

/* ---- Verificador de zona ---- */
.zona-form{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.zona-form label{font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}
.zona-form .fila{display:flex;gap:8px}
.zona-form input{
  flex:1;min-width:0;min-height:52px;padding:12px 14px;border-radius:6px;
  border:1px solid var(--humo);background:var(--negro);color:var(--concreto);font:400 17px var(--f-texto);
}
.zona-form input::placeholder{color:var(--humo)}
.zona-form input:focus-visible{outline:3px solid var(--concreto);outline-offset:1px}
.zona-res{min-height:1px}
.zona-res .resp{background:var(--negro);border:1px solid var(--grafito);border-radius:8px;padding:18px}
.zona-res .resp p{font-size:17px}
.zona-res .si{border-color:var(--brasa)}
.lista-barrios,.texto .lista-barrios{columns:1;column-gap:32px;padding:0;margin:0;list-style:none}
.lista-barrios li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--grafito);break-inside:avoid}
.lista-barrios .km{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--humo);white-space:nowrap}

/* ---- FAQ ---- */
.faq details{border-bottom:1px solid var(--grafito)}
.faq details:first-of-type{border-top:1px solid var(--grafito)}
.faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;position:relative;font-weight:600;font-size:17px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:8px;font-family:var(--f-titulo);font-size:36px;line-height:1;color:var(--brasa);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .r{padding:0 0 18px;color:var(--concreto)}
.faq .r p:last-child{margin:0}

/* ---- Bitácora ---- */
.bitacora{width:100%;border-collapse:collapse;font-size:15px}
.bitacora th,.bitacora td{text-align:left;padding:12px 8px 12px 0;border-bottom:1px solid var(--grafito);vertical-align:top}
.bitacora th{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}
.bitacora td:first-child{font-family:var(--f-mono);font-weight:700;color:var(--brasa);white-space:nowrap}

/* ---- Páginas de texto ---- */
.texto{max-width:42em}
.texto h2{font-size:clamp(28px,8vw,44px);margin-top:1.4em}
.texto h3{margin-top:1.2em}
.texto ul,.texto ol{padding-left:1.2em}
.texto li{margin-bottom:.4em}
.migas{font-family:var(--f-mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--humo);margin:24px 0 18px}
.migas a{color:var(--humo);display:inline-block;padding:6px 0}
.pendiente{background:transparent;color:var(--concreto);outline:1px dashed var(--brasa);padding:0 4px;border-radius:2px}

/* ---- Cierre, redes y pie ---- */
.cierre{text-align:left}
.redes{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.redes a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--grafito);border-radius:6px;text-decoration:none;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.redes a:hover{border-color:var(--concreto)}
.pie{border-top:1px solid var(--grafito);padding:40px 0 32px;font-size:15px;color:var(--humo)}
.logo-pie{--lw:200px;margin-bottom:16px}
.pie p{margin:0 0 8px}
.pie a{color:var(--concreto)}
.pie nav ul{list-style:none;padding:0;margin:20px 0;display:flex;flex-wrap:wrap;gap:4px 18px}
.pie nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.pie nav a:hover{text-decoration:underline}

/* ---- Barra fija inferior (solo móvil; la muestra el JS cuando el botón principal sale de pantalla) ---- */
.barra-fija{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(10,10,10,.96);border-top:1px solid var(--grafito);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}
.barra-fija .wrap{display:flex;padding:0;max-width:640px}
.barra-fija .btn-brasa{flex:1;min-height:52px;font-size:19px}
@media (min-width:768px){.barra-fija{display:none!important}}

/* ---- Foto (cuando existan las imágenes reales) ---- */
.foto{margin:0;border-radius:8px;overflow:hidden;background:var(--negro);border:1px solid var(--grafito)}
.foto img,.foto video{width:100%;height:auto}
.galeria{display:grid;gap:12px}

/* ---- Pantallas grandes ---- */
@media (min-width:760px){
  :root{--gutter:28px}
  .seccion{padding:96px 0}
  .hero{padding:24px 0 64px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
  .hero-media{margin-top:0}
  .btn-xl{width:auto;min-width:420px}
  .confianza,.cuenta,.nota-cta{text-align:left}
  .dos-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
  .pasos{grid-template-columns:repeat(3,1fr)}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .lista-barrios{columns:2}
}

/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- Utilidades y etiqueta de caja (hero sin foto) ---- */
.mt{margin-top:16px}
.etiqueta-caja{border:1px solid var(--grafito);border-radius:8px;background:var(--negro);padding:28px 22px;display:grid;gap:6px;justify-items:start;transition:border-color .2s ease}
.etiqueta-caja p{margin:0}
.etiqueta-llama{width:72px;height:72px;margin-bottom:8px}
.etiqueta-pieza{font-family:var(--f-titulo);font-size:56px;line-height:1;text-transform:uppercase;white-space:nowrap}
@media (min-width:760px) and (max-width:1023px){.hero h1{font-size:9.6vw}.etiqueta-pieza{font-size:46px}}
@media (min-width:1024px){.hero h1{font-size:clamp(96px,8.8vw,116px)}}

/* ---- Páginas legales en borrador ---- */
.borrador{margin:0;background:var(--brasa);color:var(--negro);font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:12px var(--gutter);line-height:1.4}

/* ---- Historia ---- */
.historia .firma{font-family:var(--f-titulo);text-transform:uppercase;font-size:clamp(26px,8vw,40px);line-height:1.05;color:var(--brasa);margin-top:1.2em}

/* =========================================================
   VIDA Y RITMO (marquesina, sello, cuenta, momento brasa, apariciones)
   Solo transform/opacity en animaciones. Sin degradados ni sombras.
   ========================================================= */
.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}

/* ---- Secciones de concreto: texto negro, títulos negros, líneas grafito ---- */
.fondo-concreto{background:var(--concreto);color:var(--negro);border-top:0}
.fondo-concreto + .seccion,.fondo-concreto + .banda,.marquesina + .seccion,.banda + .fondo-concreto{border-top:0}
.fondo-concreto .tag,.fondo-concreto .secundario,.fondo-concreto .precio .nota,.fondo-concreto .caja-lista li span:last-child{color:var(--grafito)}
.fondo-concreto a{color:var(--negro)}
.fondo-concreto :focus-visible,.momento :focus-visible,.marquesina :focus-visible,.nav-movil[open] ul :focus-visible{outline-color:var(--negro)}

/* ---- Bandas de páginas de contenido (pollo-al-barril) ---- */
.cabeza-pagina{padding-bottom:40px}
.banda{padding:56px 0;border-top:1px solid var(--grafito)}
.banda .texto > :first-child{margin-top:0}

/* ---- Marquesina (bloque brasa 1/2) ---- */
.marquesina{background:var(--brasa);color:var(--negro);overflow:hidden;padding:14px 0;contain:paint}
.marquesina-pista{display:flex;width:max-content;animation:marquesina 36s linear infinite}
.marquesina-pista span{font-family:var(--f-titulo);font-size:clamp(28px,6vw,48px);line-height:1.15;text-transform:uppercase;white-space:nowrap}
.marquesina:hover .marquesina-pista{animation-play-state:paused}
@keyframes marquesina{to{transform:translate3d(-50%,0,0)}}

/* ---- Sello giratorio (botón principal desde 768 px) ---- */
.sello{display:none}
@media (min-width:768px){
  .hero .btn-xl{display:none}                       /* el sello ES el botón principal */
  .sello{display:block;position:absolute;top:-58px;right:-14px;width:140px;height:140px;border-radius:50%;background:var(--brasa);color:var(--negro);text-decoration:none;z-index:2;transition:transform .2s ease}
  .sello:hover,.sello:focus-visible{transform:scale(1.06)}
  .sello:focus-visible{outline:3px solid var(--concreto);outline-offset:4px;border-radius:50%}
}
@media (min-width:1200px){.sello{width:160px;height:160px;top:-66px}}
.sello-anillo{position:absolute;inset:4px;animation:girar 20s linear infinite}
.sello-anillo svg{display:block;width:100%;height:100%;animation:girar 40s linear infinite reverse;animation-play-state:paused}
.sello:hover .sello-anillo svg,.sello:focus-visible .sello-anillo svg{animation-play-state:running} /* resta giro: va más lento */
.sello-anillo text{font-family:var(--f-mono);font-weight:700;font-size:12.5px;letter-spacing:.06em;fill:var(--negro)}
.sello-flecha{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-titulo),system-ui,sans-serif;font-size:46px;line-height:1}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---- La cuenta: 50 gigante y 50 cuadros ---- */
.cuenta50-num{font-size:clamp(170px,58vw,420px);line-height:.78;letter-spacing:-.01em;margin:0 0 12px;color:var(--negro)}
.cuenta50-lema{font-family:var(--f-mono);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px}
.cuenta50-quedan{min-height:28px;margin-bottom:14px}
.cuenta50-quedan p{margin:0;font-family:var(--f-mono);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.cuadros50{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;max-width:640px}
.cuadros50 i{display:block;aspect-ratio:1;border:2px solid var(--grafito);border-radius:3px;transition:opacity .22s ease,transform .22s ease,background-color .22s ease;transition-delay:calc(var(--i) * 20ms)}
.cuadros50 i.lleno{background:var(--negro);border-color:var(--negro)}
.cuadros50.espera i{opacity:0;transform:scale(.5)}
@media (min-width:768px){.cuadros50{grid-template-columns:repeat(25,1fr);max-width:none;gap:8px}}

/* ---- Momento brasa (bloque brasa 2/2) ---- */
.momento{background:var(--brasa);color:var(--negro);padding:72px 0 64px}
.momento h2{font-size:clamp(48px,13vw,150px);line-height:.92;color:var(--negro);margin:0 0 24px;max-width:12ch}
.momento p{margin:0;font-size:20px;font-weight:600}
.momento a{color:var(--negro)}
@media (min-width:768px){.momento{padding:110px 0 96px}}

/* ---- Video del hero (cuando exista; bloque comentado en index.html) ---- */
.hero-video{position:absolute;inset:0;margin:0;border-radius:8px;overflow:hidden;z-index:0;background:var(--negro)}
.hero-video video{width:100%;height:100%;object-fit:cover}
.hero-video::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.55)} /* velo negro plano al 55 % */
.hero-video ~ .etiqueta-caja{position:relative;z-index:1;background:transparent;min-height:340px;align-content:end}

/* ---- Apariciones al hacer scroll (la clase .revela solo la pone el JS) ---- */
.revela{opacity:0;transform:translate3d(0,14px,0);transition:opacity .45s ease,transform .45s ease}
.revela.visto{opacity:1;transform:none}

/* ---- Microinteracciones (sin sombras) ---- */
main a:not(.btn):not(.sello),.pie a{text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-thickness .15s ease,color .15s ease}
main a:not(.btn):not(.sello):hover,main a:not(.btn):not(.sello):focus-visible{text-decoration-thickness:3px}
.pie a:hover,.pie a:focus-visible{color:var(--brasa)}
.pasos li{transition:border-color .2s ease}
.pasos li:hover,.pasos li:focus-within,.etiqueta-caja:hover,.faq details:focus-within{border-color:var(--brasa)}

/* ---- Menú móvil abierto: panel brasa, enlaces Anton negros ---- */
.menu-cerrar{display:none}
.nav-movil[open] .menu-abrir{display:none}
.nav-movil[open] .menu-cerrar{display:inline}
.nav-movil[open] summary{background:var(--brasa);border-color:var(--brasa);color:var(--negro)}
.nav-movil[open] summary::after{color:var(--negro)}
.nav-movil[open] ul{background:var(--brasa);border-color:var(--brasa);width:min(340px,calc(100vw - 32px));padding:10px 0}
.nav-movil[open] a{font-family:var(--f-titulo);font-weight:400;font-size:28px;line-height:1;text-transform:uppercase;color:var(--negro);min-height:56px;padding:0 22px}
.nav-movil[open] a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.15em}

/* ---- Movimiento reducido: todo quieto y en su estado final ---- */
@media (prefers-reduced-motion:reduce){
  .marquesina-pista{animation:none;width:auto;display:block}
  .marquesina-pista span{white-space:normal;display:block}
  .marquesina-pista span + span{display:none}
  .sello-anillo,.sello-anillo svg{animation:none}
  .sello:hover,.sello:focus-visible{transform:none}
  .cuadros50.espera i{opacity:1;transform:none}
  .revela{opacity:1;transform:none}
}