/* Sistema de las tres paginas de NINTH ZONE: ABOUT, HOW TO USE y PRICING.
   Sale de las laminas de spec del dueno (2026-09-09). Movil primero, porque la
   lamina que manda es la de 375; el escritorio de 1440 amplia, no rehace.

   Dos apartes del spec, decididos y anotados:
   - El neon se queda en #E7FF00 y no en el #EAF200 de la lamina, porque
     marca.md lo declara normativo y la diferencia no se ve.
   - Anton e Inter SI entran: la lamina las nombra, y Anton resuelve mejor que
     Archivo el "Geist Condensed" que la guia pedia y que no existe. */

:root{
  --neon:#E7FF00; --on-neon:#0B0B0B;
  --carbon:#0B0B0B; --carbon-rgb:11,11,11;
  --surface:#1A1A1A; --linea:#262626; --borde:#3A3A3A;
  --smoke:#A0A0A0; --white:#F5F5F5;
  /* No hay escalon de gris por debajo de --smoke: #6B6B6B da 3.69:1
     sobre carbon, medido, y no alcanza para texto. Lo tenue se hace
     con tamano y peso, no bajando el gris hasta que no se lee. */
  --ok:#5EE6A8; --danger:#FF5A5F;
  /* La maqueta de telefono necesita un negro por debajo de --carbon
     (la pantalla dentro del marco) y un gris de marco entre --linea y
     --borde. Con nombre, para que no vuelvan a ser numeros sueltos. */
  --pantalla:#101010; --marco:#2E2E2E; --sombra:0 24px 60px rgba(0,0,0,.55);
  --display:"Anton","Archivo Narrow","Barlow Condensed",system-ui,sans-serif;
  --ui:"Inter",system-ui,-apple-system,sans-serif;
  --mano:"Permanent Marker",cursive;
  --ancho:1180px;

  /* ---------- ESCALA DE ESPACIO ----------
     Siete escalones, cada uno ~1.5x el anterior, y todos fluidos: el mismo
     paso se estrecha en un telefono y respira en un escritorio sin puntos de
     ruptura. Antes cada margen era un clamp inventado en su sitio, y por eso
     el rotulo tocaba el titular a 0px mientras dos franjas se separaban 22.

     Como elegir: e1 dentro de una linea, e2 entre lineas de un mismo bloque,
     e3 entre elementos de un bloque, e4 entre bloques, e5 entre grupos, e6
     entre secciones, e7 para el respiro grande. Si un espacio no cabe en la
     escala, casi siempre es que el bloque esta mal agrupado. */
  --e1:clamp(6px,1.2vw,10px);
  --e2:clamp(11px,2.2vw,16px);
  --e3:clamp(18px,3.4vw,26px);
  --e4:clamp(28px,5.2vw,40px);
  --e5:clamp(42px,7.5vw,62px);
  --e6:clamp(64px,11vw,100px);
  --e7:clamp(96px,16vw,150px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--carbon); color:var(--white);
  font-family:var(--ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}

.marco{max-width:var(--ancho); margin:0 auto; padding:0 20px}
@media (min-width:1024px){ .marco{padding:0 40px} }

/* Titulares. Anton solo trae un peso; la jerarquia la hace el tamano. */
/* .96 y no .92: Anton es condensada y aguanta el interlineado corto, pero un
   titular de cuatro renglones a .92 se lee como un bloque y no como cuatro
   lineas. Los de una o dos lineas no notan la diferencia. */
.tit{font-family:var(--display); font-weight:400; line-height:.96;
  letter-spacing:.005em; text-transform:uppercase; margin:0; text-wrap:balance}
.tit em{font-style:normal; color:var(--neon)}
h1.tit{font-size:clamp(40px,11.6vw,74px); margin-top:var(--e3)}
h2.tit{font-size:clamp(32px,8.5vw,56px)}
h3.tit{font-size:clamp(20px,5vw,28px)}

/* Rotulo con su filete, el gesto que repite toda la lamina. */
.rotulo{font-family:var(--display); font-weight:400; font-size:clamp(11px,2.9vw,13px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--white); line-height:1.75; margin:0}
.rotulo.tenue{color:var(--smoke)}
.filete{display:block; width:34px; height:3px; background:var(--neon); margin:var(--e2) 0 0; border:0}
.filete.centrado{margin-inline:auto}

.parrafo{color:var(--smoke); margin:var(--e3) 0 0; max-width:56ch; text-wrap:pretty}
.parrafo b{color:var(--white); font-weight:600}

/* ---------- NAVEGACION ---------- */
.nav{background:var(--carbon); border-bottom:1px solid var(--linea);
  position:sticky; top:0; z-index:50}
.nav-int{max-width:var(--ancho); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:14px}
@media (min-width:1024px){ .nav-int{padding:14px 40px; gap:28px} }
.nav-logo{flex:none; display:flex; align-items:center; min-height:44px}
.nav-logo img{width:clamp(52px,13vw,74px); height:auto}
.nav-menu{display:flex; gap:clamp(10px,3.2vw,26px); margin-inline:auto; align-items:center}
.nav-menu a{font-family:var(--display); font-weight:400; font-size:clamp(9.5px,2.5vw,12px);
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--white);
  padding:12px 6px; min-height:44px; min-width:44px; justify-content:center;
  display:flex; align-items:center;
  border-bottom:2px solid transparent}
/* El interruptor cuelga BAJO la barra, sobre la foto: la barra negra termina
   con el menu, que es lo que la hace legible. La fila mide 0 de alto y el
   boton desborda hacia abajo, asi que no empuja el heroe ni un pixel y la
   imagen le queda de fondo. Va fuera del <nav>, por eso se va con el scroll
   en vez de quedarse flotando encima del texto que pasa por debajo. */
.nav-idioma{position:relative; z-index:40; height:0;
  max-width:var(--ancho); margin:0 auto; padding:0 20px;
  display:flex; align-items:flex-start; justify-content:flex-end}
@media (min-width:1024px){ .nav-idioma{padding:0 40px} }
.nav-idioma .idioma{margin-top:10px}
.nav-menu a[aria-current="page"]{border-bottom-color:var(--neon)}
.nav-menu a:hover{color:var(--neon)}
/* En telefono el boton no cabe: con la cuarta entrada del menu la barra media
   428px sobre una ventana de 390 y se salia por la derecha. Se esconde ahi,
   porque "Early access" ya esta en el menu y la pagina tiene el suyo propio.
   Vuelve en cuanto hay sitio. */
/* `.nav .nav-cta` y no `.nav-cta` a secas: `.boton{display:inline-flex}` se
   declara despues en este archivo y, con la misma especificidad, gana por
   orden. Es el tipo de regla que "no hace nada" sin decir por que. */
.nav .nav-cta{display:none; flex:none}
@media (min-width:680px){ .nav .nav-cta{display:inline-flex} }

/* El interruptor de idioma. Dos botones y no un desplegable: son dos opciones
   y un desplegable esconde la mitad. `aria-pressed` dice cual esta activo, que
   es lo unico que un lector de pantalla puede oir del color. */
.idioma{display:flex; flex:none; border:1px solid rgba(245,245,245,.34); border-radius:999px;
  overflow:hidden; background:rgba(var(--carbon-rgb),.52); backdrop-filter:blur(7px)}
.idioma button{background:transparent; border:0; cursor:pointer; color:var(--smoke);
  font-family:var(--display); font-weight:400; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:0 10px; min-width:44px; min-height:38px}
.idioma button[aria-pressed="true"]{background:var(--white); color:var(--carbon)}
.idioma button:hover{color:var(--white)}
.idioma button[aria-pressed="true"]:hover{color:var(--carbon)}
.idioma button:focus-visible{outline:2px solid var(--neon); outline-offset:2px}

/* ---------- BOTONES ---------- */
.boton{display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--display); font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:0; border-radius:999px; cursor:pointer; min-height:44px}
.boton-1{background:var(--neon); color:var(--on-neon); padding:16px 26px; font-size:clamp(13px,3.4vw,16px)}
.boton-1.ancho{display:flex; width:100%; padding:19px 24px}
.boton-2{background:transparent; color:var(--white); border:1px solid var(--borde); padding:14px 22px; font-size:13px}
.boton-nav{background:var(--neon); color:var(--on-neon); padding:10px 14px; font-size:clamp(9px,2.4vw,11px); letter-spacing:.1em}
/* El boton del heroe cuelga del parrafo y no de un contenedor con hueco:
   sin esto salia pegado al texto. */
.heroe-col .boton{margin-top:var(--e4)}
.boton:focus-visible, .nav-menu a:focus-visible, summary:focus-visible{
  outline:2px solid var(--neon); outline-offset:3px}
.boton-1:hover{filter:brightness(1.08)}
.boton-2:hover{border-color:var(--white)}

/* ---------- HEROE ---------- */
.heroe{position:relative; overflow:hidden; isolation:isolate}
.heroe-foto{position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2}
.heroe-velo{position:absolute; inset:0; z-index:-1; background:
  linear-gradient(180deg,rgba(var(--carbon-rgb),.62) 0%,rgba(var(--carbon-rgb),.55) 34%,rgba(var(--carbon-rgb),.92) 78%,var(--carbon) 100%)}
@media (min-width:900px){
  .heroe-velo{background:
    linear-gradient(90deg,rgba(var(--carbon-rgb),.95) 0%,rgba(var(--carbon-rgb),.80) 44%,rgba(var(--carbon-rgb),.28) 100%),
    linear-gradient(180deg,rgba(var(--carbon-rgb),.45) 0%,rgba(var(--carbon-rgb),0) 30%,rgba(var(--carbon-rgb),.85) 100%)}
}
.heroe-int{position:relative; max-width:var(--ancho); margin:0 auto;
  padding:clamp(150px,30vw,230px) 20px var(--e5)}
@media (min-width:900px){ .heroe-int{padding:clamp(90px,10vw,130px) 40px clamp(70px,9vw,110px); max-width:var(--ancho)}
  .heroe-col{max-width:640px} }

/* ---------- SECCIONES ---------- */
/* Un solo paso entre secciones: el de arriba. La ultima cierra con el de
   abajo desde main, para que el pie no se pegue. Asi no hace falta apagar
   el padding a mano en cada pagina, que es lo que dejaba huecos de cero. */
.seccion{padding:var(--e6) 0 0}
main{padding-bottom:var(--e6)}
.seccion-tenue{background:var(--surface); padding-bottom:var(--e6)}

/* Los tres o cuatro valores, con filete entre columnas como en la lamina. */
.valores{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea)}
.valores.cuatro{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .valores.cuatro{grid-template-columns:repeat(4,1fr)} }
.valores li{list-style:none; padding:var(--e4) var(--e2); border-left:1px solid var(--linea)}
.valores li:first-child{border-left:0; padding-left:0}
@media (min-width:760px){ .valores li{padding:var(--e4) var(--e3)} .valores li:first-child{padding-left:var(--e3)} }
.valores svg{width:26px; height:26px; stroke:var(--white); fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.valores .que{display:block; margin-top:var(--e2); font-family:var(--display); font-weight:400;
  font-size:clamp(10px,2.6vw,12px); letter-spacing:.09em; text-transform:uppercase; line-height:1.5}
.valores .como{display:block; margin-top:var(--e1); color:var(--smoke); font-size:12.5px; line-height:1.45}

/* Franja de imagen con su frase encima. */
.franja{position:relative; overflow:hidden; margin-top:var(--e4)}
.franja img{width:100%; height:clamp(200px,46vw,340px); object-fit:cover}
.franja-txt{position:absolute; left:0; bottom:0; padding:var(--e3);
  background:linear-gradient(0deg,rgba(var(--carbon-rgb),.96) 0%,rgba(var(--carbon-rgb),.86) 46%,rgba(var(--carbon-rgb),.24) 100%);
  width:100%}

/* ---------- CUENTA ATRAS ---------- */
/* El recuadro del reloj. La banda a sangre que hubo antes quedaba como un tajo
   entre el menu y la foto: un rectangulo sin borde ni relacion con nada.

   Esto es lo que marca.md manda para el caso, y no un invento: "sobre fondo
   oscuro la jerarquia la da el color de superficie y el borde de 1px", y el
   glow de acento va "solo en el elemento focal". El reloj lo es. Las sombras
   difusas estan prohibidas por la lamina 09, asi que el glow es la unica
   excepcion y por eso se gasta aqui y en ningun otro sitio de la pagina.

   Es opaco, asi que la foto tampoco queda detras de los digitos. Y vive dentro
   de la columna del heroe, compartiendo borde izquierdo con el titular y el
   parrafo: destaca sin desalinearse. */
.reloj-recuadro{display:inline-block; background:var(--surface);
  padding:var(--e4); margin-top:var(--e5);
  box-shadow:0 0 0 1px var(--neon), 0 0 24px rgba(231,255,0,.22)}

/* El reloj focal de la portada. Mas grande que el de las otras paginas porque
   aqui NO acompana: es el foco. Alineado a la izquierda como el resto de la
   reja, no centrado como el bloque de cierre.

   Se llama `evento-foco` y no `evento-heroe`: el nombre viejo decia donde
   estaba, y en cuanto se movio empezo a mentir. */
/* `.evento.evento-foco` y no `.evento-foco` a secas: `.evento{text-align:
   center}` se declara despues en este archivo y, con la misma especificidad,
   gana por orden. Es la segunda vez que pasa en esta hoja. */
.evento.evento-foco{text-align:left}
.evento.evento-foco .donde{color:var(--white)}
.evento.evento-foco .cuando{margin-top:var(--e1); color:var(--smoke)}
.reloj-grande{justify-content:flex-start; margin-top:var(--e3); gap:clamp(10px,3.6vw,24px)}
.reloj-grande b{font-size:clamp(46px,15vw,92px); line-height:.92}
.reloj-grande .dosp{font-size:clamp(30px,9vw,58px)}
.reloj-grande span{font-size:clamp(9.5px,2.5vw,12px); margin-top:var(--e2)}

.evento{text-align:center}
.evento .donde{font-family:var(--display); font-weight:400; font-size:clamp(11px,2.9vw,13px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--smoke)}
.evento .cuando{font-family:var(--display); font-weight:400; font-size:clamp(13px,3.4vw,16px);
  letter-spacing:.2em; text-transform:uppercase; margin-top:var(--e1)}
.reloj{display:flex; justify-content:center; align-items:flex-start; gap:clamp(8px,3vw,20px); margin-top:var(--e2)}
.reloj b{display:block; font-family:var(--display); font-weight:400; color:var(--neon);
  font-size:clamp(32px,10vw,48px); line-height:1; font-variant-numeric:tabular-nums}
.reloj span{display:block; margin-top:var(--e1); font-family:var(--display); font-weight:400;
  font-size:clamp(9px,2.3vw,11px); letter-spacing:.16em; text-transform:uppercase; color:var(--white)}
.reloj .dosp{align-self:center; font-family:var(--display); color:var(--neon); font-size:clamp(24px,7vw,36px); line-height:1.2}
.abierta{margin-top:var(--e2); font-family:var(--display); font-size:clamp(22px,6vw,34px); color:var(--neon)}
.evento .boton{margin-top:var(--e4)}
.evento .cola{margin:var(--e3) 0 0; font-family:var(--display); font-weight:400;
  font-size:clamp(10px,2.6vw,12px); letter-spacing:.16em; text-transform:uppercase; color:var(--smoke)}

/* ---------- PIE ---------- */
.pie{border-top:1px solid var(--linea); margin-top:var(--e6)}
.pie-int{max-width:var(--ancho); margin:0 auto; padding:var(--e4) 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
@media (min-width:1024px){ .pie-int{padding:26px 40px} }
.pie img{width:56px}
.pie-enl{display:flex; gap:16px; margin-inline:auto}
.pie-enl a{font-family:var(--display); font-weight:400; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--smoke); text-decoration:none;
  min-height:44px; min-width:44px; padding-inline:4px;
  display:flex; align-items:center; justify-content:center}
.pie-enl a:hover{color:var(--white)}
.pie-soc{display:flex; gap:8px}
.pie-soc a{min-width:44px; min-height:44px; display:grid; place-items:center; color:var(--smoke)}
.pie-soc a:hover{color:var(--neon)}
.pie-soc svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6}
.pie-dom{font-family:var(--display); font-weight:400; font-size:11px; letter-spacing:.2em; color:var(--smoke)}

/* ---------- MANUSCRITA ---------- */
.mano{font-family:var(--mano); text-transform:uppercase; line-height:1.3;
  font-size:clamp(17px,4.4vw,26px); transform:rotate(-5deg); transform-origin:left center}
.mano i{display:block; width:110px; height:4px; background:var(--neon); margin-top:var(--e2);
  transform:rotate(2deg)}

/* ---------- LA VENTANA ----------
   R1 del documento de diseno: la Zone existe solo en su ventana y sus datos
   mueren con ella. Es la regla que da sentido a los cuatro pasos, asi que va
   ANTES de ellos y no como una nota al pie.

   La linea de tiempo es tres marcas sobre un filete vertical: es la mecanica
   que mas cuesta contar con palabras y la que mas define al producto. */
.ventana{background:var(--surface); border-block:1px solid var(--linea)}
.ventana-int{max-width:var(--ancho); margin:0 auto; padding:var(--e6) 20px}
@media (min-width:1024px){ .ventana-int{padding-inline:40px} }
@media (min-width:900px){
  .ventana-reja{display:grid; grid-template-columns:1fr 1fr; gap:var(--e5); align-items:start}
}
.linea{list-style:none; margin:var(--e4) 0 0; padding:0; border-left:2px solid var(--linea)}
.linea li{position:relative; padding:0 0 var(--e4) var(--e3)}
.linea li:last-child{padding-bottom:0}
.linea li::before{content:""; position:absolute; left:-7px; top:7px;
  width:12px; height:12px; background:var(--carbon); border:2px solid var(--concrete)}
/* Las dos primeras marcas son futuro que va a ocurrir; la ultima es el final,
   y va apagada a proposito. */
.linea li.viva::before{border-color:var(--neon); background:var(--neon)}
.linea .cuando{font-family:var(--display); font-weight:400;
  font-size:clamp(15px,4vw,20px); letter-spacing:.06em; text-transform:uppercase; line-height:1.15}
.linea .que{color:var(--smoke); font-size:14px; margin:var(--e1) 0 0; max-width:44ch}
.ventana-cierre{margin:var(--e5) 0 0; padding-top:var(--e3);
  border-top:1px solid var(--linea)}
.ventana-cierre b{color:var(--white); font-weight:600}

/* ---------- LOS CUATRO PASOS (HOW TO USE) ---------- */
.paso{padding-top:var(--e6)}
.paso-num{font-family:var(--display); font-weight:400; font-size:clamp(34px,9vw,52px);
  line-height:1; color:var(--neon)}
.paso h3{margin:var(--e1) 0 0}
.paso .parrafo{margin-top:var(--e3)}
.paso .apunte{margin:var(--e3) 0 0; display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:400; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--neon)}
.paso .apunte svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6}
.paso-cuerpo{display:grid; gap:var(--e4)}
@media (min-width:900px){
  .paso-cuerpo{grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--e5)}
  .paso-cuerpo > .paso-detalle{order:3}
}
/* Lista de detalles de cada paso, la columna derecha de la lamina de 1440. */
.detalle{list-style:none; margin:0; padding:0; display:grid; gap:2px;
  background:var(--surface); border:1px solid var(--linea)}
.detalle li{display:flex; gap:var(--e2); align-items:flex-start; padding:var(--e3)}
.detalle li + li{border-top:1px solid var(--linea)}
.detalle svg{width:17px; height:17px; flex:none; margin-top:2px; stroke:var(--white); fill:none; stroke-width:1.5}
.detalle span{font-size:13.5px; color:var(--smoke); line-height:1.45}

/* ---------- MAQUETA DE TELEFONO ---------- */
.tel{width:min(232px,64vw); margin-inline:auto; border:2px solid var(--marco); border-radius:26px;
  background:var(--pantalla); padding:8px; box-shadow:var(--sombra)}
.tel-int{border-radius:19px; overflow:hidden; background:var(--carbon)}
.tel-foto{width:100%; height:186px; object-fit:cover}
.tel-cuerpo{padding:12px}
.tel-nom{font-family:var(--display); font-weight:400; font-size:16px; letter-spacing:.03em}
.tel-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.chip{font-size:10.5px; letter-spacing:.04em; padding:4px 9px; border-radius:999px;
  background:var(--surface); border:1px solid var(--linea); color:var(--white)}
.chip.neon{background:var(--neon); color:var(--on-neon); border-color:var(--neon); font-weight:600}
.tel-lista{list-style:none; margin:11px 0 0; padding:0; display:grid; gap:8px}
.tel-lista li{display:flex; gap:8px; align-items:center; font-size:11.5px; color:var(--smoke)}
.tel-lista svg{width:13px; height:13px; flex:none; stroke:var(--neon); fill:none; stroke-width:1.8}
.tel-acciones{display:flex; justify-content:center; gap:22px; padding:12px 0 4px}
.tel-acciones span{width:38px; height:38px; border-radius:999px; border:1px solid var(--linea);
  display:grid; place-items:center; font-size:15px}
.tel-acciones .si{border-color:var(--neon); color:var(--neon)}
.tel-acciones .no{color:var(--danger)}
/* Pantalla de coincidencia */
.tel-conectados{padding:16px 12px; text-align:center}
.tel-conectados .titu{font-family:var(--mano); font-size:21px; color:var(--white)}
.tel-caras{display:flex; justify-content:center; margin-top:12px}
.tel-caras img{width:62px; height:62px; border-radius:999px; object-fit:cover; border:2px solid var(--carbon)}
.tel-caras img:last-child{margin-left:-14px}
.tel-conectados p{margin:10px 0 0; font-size:11px; color:var(--smoke); line-height:1.5}
.tel-boton{display:block; margin:12px 0 0; background:var(--white); color:var(--on-neon);
  border-radius:8px; padding:9px; font-size:11.5px; font-weight:600; text-align:center}
.tel-canales{display:flex; justify-content:center; gap:12px; padding:12px 0 2px}
.tel-canales span{width:34px; height:34px; border-radius:999px; border:1px solid var(--linea);
  display:grid; place-items:center; color:var(--white)}
.tel-canales svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6}
/* Lista de seguidos y horario */
.tel-fila{display:flex; align-items:center; gap:9px; padding:9px 0; border-top:1px solid var(--linea)}
.tel-fila:first-of-type{border-top:0}
.tel-fila img{width:29px; height:29px; border-radius:999px; object-fit:cover; flex:none}
.tel-fila .quien{flex:1; min-width:0}
.tel-fila .quien b{display:block; font-size:11.5px; font-weight:600}
.tel-fila .quien small{display:block; font-size:10px; color:var(--smoke)}
.tel-fila .marca-b{font-size:9.5px; letter-spacing:.06em; padding:4px 8px; border-radius:999px;
  background:var(--neon); color:var(--on-neon); font-weight:600}
.tel-fila .marca-b.gris{background:transparent; border:1px solid var(--linea); color:var(--smoke)}
.tel-horario{list-style:none; margin:0; padding:0}
.tel-horario li{display:flex; justify-content:space-between; gap:10px; padding:9px 10px;
  font-size:11.5px; color:var(--smoke); border-top:1px solid var(--linea)}
.tel-horario li:first-child{border-top:0}
.tel-horario li.ahora{background:var(--neon); color:var(--on-neon); font-weight:600}
.tel-cab{font-family:var(--display); font-weight:400; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; padding:12px 12px 8px}

/* ---------- PRECIO ---------- */
.precio{border:1px solid var(--linea); background:var(--surface); border-radius:14px;
  padding:var(--e4); margin-top:var(--e4)}
.precio-eti{display:inline-flex; background:var(--neon); color:var(--on-neon); border-radius:999px;
  padding:8px 18px; font-family:var(--display); font-weight:400; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase}
.precio-gancho{margin:var(--e3) 0 0; font-family:var(--display); font-weight:400;
  font-size:clamp(12px,3.2vw,14px); letter-spacing:.13em; text-transform:uppercase; color:var(--white)}
.precio-cifra{display:flex; align-items:baseline; gap:var(--e2); flex-wrap:wrap; margin-top:var(--e3)}
.precio-cifra b{font-family:var(--display); font-weight:400; font-size:clamp(44px,13vw,64px);
  line-height:1; color:var(--neon)}
.precio-cifra .div{font-family:var(--display); font-size:clamp(18px,5vw,24px); color:var(--white)}
.precio-usd{margin:var(--e1) 0 0; font-family:var(--display); font-weight:400;
  font-size:clamp(15px,4vw,19px); letter-spacing:.08em; color:var(--white)}
/* El precio tachado es el REGULAR futuro, no uno que se haya cobrado antes.
   La copia de al lado lo dice; sin ella el tachon seria una rebaja inventada. */
.precio-antes{margin:var(--e2) 0 0; font-family:var(--display); font-weight:400;
  font-size:clamp(14px,3.6vw,17px); letter-spacing:.06em; color:var(--smoke);
  text-decoration:line-through}
.precio-nota{margin:var(--e2) 0 0; font-size:13px; color:var(--smoke)}
.incluye{list-style:none; margin:var(--e4) 0 0; padding:0; display:grid; gap:var(--e2)}
@media (min-width:760px){ .incluye{grid-template-columns:1fr 1fr; gap:var(--e2) var(--e4)} }
.incluye li{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--white)}
.incluye svg{width:19px; height:19px; flex:none; margin-top:1px; stroke:var(--neon); fill:none; stroke-width:1.8}
.precio .boton{margin-top:var(--e4)}
.precio-pie{margin:var(--e3) 0 0; font-size:12.5px; color:var(--smoke); text-align:center}

/* ---------- PREGUNTAS ---------- */
.faq{border:1px solid var(--linea); background:var(--surface); border-radius:10px; margin-top:var(--e2)}
.faq summary{cursor:pointer; list-style:none; padding:var(--e3); font-size:14.5px;
  display:flex; justify-content:space-between; gap:14px; align-items:center; min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--neon); font-size:19px; line-height:1; flex:none}
.faq[open] summary::after{content:"\2212"}
.faq p{margin:0; padding:0 var(--e3) var(--e3); color:var(--smoke); font-size:13.5px; max-width:64ch}

/* ---------- ENTRADA ---------- */
@keyframes surge{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes traza{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.heroe-col > *{animation:surge .6s cubic-bezier(.22,1,.36,1) both}
.heroe-col > :nth-child(1){animation-delay:.04s}
.heroe-col > :nth-child(2){animation-delay:.12s}
.heroe-col > :nth-child(3){animation-delay:.20s}
.heroe-col > :nth-child(4){animation-delay:.28s}
.heroe-col > :nth-child(5){animation-delay:.34s}
.filete{transform-origin:left center; animation:traza .45s cubic-bezier(.22,1,.36,1) .4s both}
/* El estado final es el natural: si la animacion no corre, la pagina se ve
   completa igual. Nada se esconde detras de una transicion. */
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* El descargo de independencia. La lamina de plan B lo exige completo; estas
   paginas no lo dibujan, asi que cierra el pie de las tres. En smoke y no en
   concrete: si no se distingue, ponerlo no cumple nada. */
.descargo{max-width:var(--ancho); margin:0 auto; padding:var(--e4) 20px 0;
  color:var(--smoke); font-size:11.5px; line-height:1.55; text-wrap:pretty}
@media (min-width:1024px){ .descargo{padding:22px 40px 0; max-width:calc(var(--ancho)); }
  .descargo{max-width:78ch} }

/* Enlace de salto. Invisible hasta que recibe el foco: quien navega con
   teclado o lector lo encuentra primero y se salta el menu, y quien no, no lo
   ve nunca. Sin el hay que atravesar la navegacion entera en cada pagina. */
.saltar{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--neon); color:var(--on-neon); padding:12px 18px;
  font-family:var(--display); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none}
.saltar:focus{left:0}