/* Rutta · Landing. Móvil primero. Colores y espacios de tokens.css; fuentes Anton y Barlow. */

:root {
  --pad: var(--space-4);
  --nav: 64px;
  --fs: 19vw;
  --corte: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--surface-100); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + var(--space-3)); }
body { margin: 0; background: var(--surface-100); color: var(--ink); font: 400 17px/26px var(--font-body); overflow-x: clip; overflow-wrap: break-word; }
body.menu-abierto { overflow: hidden; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: 3px; }
img { display: block; }
b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
[hidden] { display: none !important; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 60; background: var(--ink); color: var(--on-ink); padding: var(--space-2) var(--space-4); }
.skip:focus { top: var(--space-2); }
.num { font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Piezas comunes */
.raya { display: inline-block; width: 32px; height: 3px; margin-right: var(--space-3); background: var(--pulse); vertical-align: middle; }
.etiqueta, .hero-sup { font: 600 14px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.etiqueta .num { font-size: 14px; margin-right: var(--space-2); letter-spacing: .08em; }
.gigante { font: 400 clamp(84px, 25vw, 240px)/.92 var(--font-display); letter-spacing: -.005em; text-transform: uppercase; overflow-wrap: normal; }

/* Botones con esquina cortada */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 56px; padding: 14px var(--space-5); border: 0; font: 700 15px/20px var(--font-body); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; clip-path: var(--corte); transition: background-color .15s; }
.btn .ic { transition: transform .2s; }
.btn:hover .ic { transform: translateX(4px); }
.btn:focus-visible { outline: 3px solid var(--night); outline-offset: -7px; }
.btn-1 { background: var(--pulse); color: var(--on-pulse); }
.btn-1:hover { background: var(--pulse-hover); }
.btn-1:active { background: var(--pulse-press); }
.btn-1[disabled] { background: var(--surface-300); color: var(--ink-muted); cursor: progress; }
.btn-sm { min-height: 44px; padding: 10px var(--space-4); font-size: 13px; line-height: 16px; letter-spacing: .14em; }
.btn-full { width: 100%; }
.enlace { padding-block: var(--space-2); font: 700 15px/20px var(--font-body); letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.enlace:hover { text-decoration-color: var(--pulse); }
.enlace-sub { font: 600 14px/20px var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Barra de navegación */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: var(--nav); padding-inline: var(--pad); background: var(--night); color: var(--cloud); }
.logo { display: inline-flex; align-items: baseline; font: 400 30px/1 var(--font-display); letter-spacing: .01em; color: var(--cloud); text-decoration: none; }
.logo-punto { display: inline-block; width: .2em; height: .2em; margin-left: .07em; background: var(--pulse); }
.nav-km { display: none; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.nav-der { display: flex; align-items: center; gap: var(--space-3); }
.menu-btn { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; min-width: 44px; justify-content: center; padding: 0; background: none; border: 0; color: var(--cloud); font: 700 13px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.menu-txt { display: none; }
.menu-ic { display: grid; gap: 7px; width: 28px; }
.menu-ic i { display: block; height: 3px; background: currentColor; transition: transform .2s; }
.menu-btn[aria-expanded=true] .menu-ic i:first-child { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded=true] .menu-ic i:last-child { transform: translateY(-5px) rotate(-45deg); }
.nav-linea { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pulse); transform: scaleX(0); transform-origin: left; }

.menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); padding: calc(var(--nav) + var(--space-4)) var(--pad) var(--space-5); background: var(--night); color: var(--cloud); overflow-y: auto; }
.menu li { border-top: 1px solid var(--line-soft); }
.menu li:last-child { border-bottom: 1px solid var(--line-soft); }
.menu a { display: flex; align-items: baseline; gap: var(--space-4); padding-block: var(--space-3); font: 400 clamp(44px, 12vh, 104px)/1 var(--font-display); text-transform: uppercase; text-decoration: none; }
.menu a:hover { color: var(--pulse); }
.menu small { font-size: 18px; color: var(--ink-muted); }
.menu > p { font: 600 14px/20px var(--font-body); letter-spacing: .16em; text-transform: uppercase; }

/* Explicación de cómo funciona */
.nav-como { display: none; padding-block: var(--space-2); font: 700 13px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.nav-como:hover { text-decoration: underline; text-decoration-color: var(--pulse); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Ventana de la lista de espera */
.ventana { width: min(560px, calc(100vw - var(--space-5))); max-height: calc(100dvh - var(--space-5)); padding: var(--space-7) var(--space-4) var(--space-5); border: 0; background: var(--night); color: var(--cloud); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.ventana::backdrop { background: var(--night); opacity: .88; }
.ventana-cerrar span { display: none; }
.ventana-cerrar { position: absolute; top: var(--space-3); right: var(--space-5); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--cloud); font: 700 13px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }

/* Cómo funciona */
.como { display: grid; gap: var(--space-6); background: var(--surface-200); color: var(--cloud); padding: var(--space-7) var(--pad) var(--space-8); }
.como h2 { margin-top: var(--space-4); font: 400 clamp(40px, 11vw, 72px)/1 var(--font-display); text-transform: uppercase; }
.como-aviso { display: grid; gap: var(--space-1); margin-top: var(--space-5); padding: var(--space-4); background: var(--pulse); color: var(--on-pulse); font-size: 16px; line-height: 23px; }
.como-aviso b { font: 400 22px/1.15 var(--font-display); text-transform: uppercase; }
.como-boton { margin-top: var(--space-5); }
.como-pasos { border-bottom: 1px solid var(--line-strong); }
.como-pasos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-4); border-top: 1px solid var(--line-strong); }
.como-pasos .num { font-size: 40px; line-height: 1; color: var(--pulse); }
.como-pasos h3 { font: 400 24px/1.1 var(--font-display); text-transform: uppercase; }
.como-pasos p { margin-top: var(--space-1); color: var(--ink-muted); font-size: 16px; line-height: 24px; }

.como-pasos p b, .como-casos b { color: var(--cloud); }
.como-casos { display: grid; gap: var(--space-2); margin-block: var(--space-2); color: var(--ink-muted); font-size: 16px; line-height: 24px; }
.como-casos li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-2); padding: 0; border: 0; }
.como-casos .ic { width: 22px; height: 22px; margin-top: 1px; color: var(--pulse); }
.como-pasos .como-nota { font-size: 14px; line-height: 20px; }

/* Portada */
.hero { position: relative; display: flex; flex-direction: column; overflow: clip; min-height: min(100vh, 1000px); min-height: min(100svh, 1000px); padding: calc(var(--nav) + var(--space-5)) var(--pad) var(--space-6); background: var(--night); color: var(--cloud); }
.hero-sup { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); font-size: 12px; }
.hero-sup span { color: var(--pulse); }
.hero-estado { color: var(--cloud); }
.punto-vivo { display: inline-block; width: 8px; height: 8px; margin-right: var(--space-2); background: var(--pulse); animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .25; } }

/* Carretera: el punto de fuga está al 50 % y 20 % de esta caja, igual que en main.js. */
.carretera { --s: 100vw; position: absolute; z-index: 1; right: calc(var(--s) * -.4); top: calc(var(--nav) + 206px); width: calc(var(--s) * 1.8); height: var(--s); -webkit-mask-image: linear-gradient(var(--night) 62%, transparent 86%); mask-image: linear-gradient(var(--night) 62%, transparent 86%); }
.carretera-capa { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.carretera-capa path { fill: var(--cloud); }
.carretera-pintura { transform-origin: 50% 20%; will-change: transform; }

.titular { position: relative; z-index: 2; margin-top: var(--space-6); font: 400 var(--fs)/.96 var(--font-display); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
.linea { display: block; }
.linea > span { display: inline-block; }
.linea-contorno { color: transparent; -webkit-text-stroke: 2px var(--cloud); margin-left: .28em; }
/* El punto rosa del logo, al final de la frase. */
.titular-punto { display: inline-block; width: .19em; height: .19em; margin-left: .05em; background: var(--pulse); }
.hero-pie { position: relative; z-index: 2; margin-top: auto; padding-top: calc(36px + 46vw); }
.hero-texto { max-width: 30em; font-size: 18px; line-height: 27px; }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-5); }
.hero-lateral { display: none; }

html.js .linea > span { animation: subir .9s cubic-bezier(.2, .8, .2, 1) both; }
html.js .linea:nth-child(2) > span { animation-delay: .1s; }
html.js .linea:nth-child(3) > span { animation-delay: .2s; }
html.js .linea { overflow: clip; overflow-clip-margin: .08em; padding-top: .06em; margin-top: -.06em; }
html.js .carretera { animation: entrar 1.1s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 20%; }
@keyframes subir { from { transform: translateY(110%); } }
@keyframes entrar { from { transform: scale(.82); opacity: 0; } }

/* Cinta */
.cinta { overflow: clip; background: var(--pulse); color: var(--on-pulse); }
.cinta-pista { display: flex; align-items: center; gap: var(--space-5); width: max-content; padding-block: var(--space-3); font: 400 22px/28px var(--font-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; animation: cinta 36s linear infinite; }
.cinta-pista i { display: block; width: 10px; height: 10px; background: var(--on-pulse); }
@keyframes cinta { to { transform: translateX(calc(-50% - 12px)); } }

/* Cómo funciona: filas que se cruzan y se llenan al bajar */
.cinetica { position: relative; background: var(--night); color: var(--cloud); }
html.js .cinetica { height: 200vh; }
.cinetica-fija { display: flex; flex-direction: column; overflow: clip; padding: calc(var(--nav) + var(--space-4)) var(--pad) var(--space-4); }
html.js .cinetica-fija { position: sticky; top: 0; height: 100vh; height: 100svh; }
.seccion-cab { display: grid; gap: var(--space-3); }
.seccion-cab h2 { margin-top: var(--space-3); font: 400 clamp(30px, 8vw, 40px)/1.05 var(--font-display); text-transform: uppercase; }
.seccion-cab > p { display: none; max-width: 30em; }
.filas { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); margin-inline: calc(var(--pad) * -1); min-height: 0; }
/* Marcas del centro: ahí es donde se llenan las palabras. */
.filas::before, .filas::after { content: ""; position: absolute; z-index: 3; left: 50%; width: 16px; height: 10px; margin-left: -8px; background: var(--pulse); }
.filas::before { top: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.filas::after { bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fila { position: relative; flex: 0 1 auto; padding-bottom: 22px; }
.pista { display: flex; align-items: center; gap: .22em; width: max-content; font: 400 min(15vh, 27vw)/1.04 var(--font-display); text-transform: uppercase; transform: translateX(calc(-50% + 50vw)); will-change: transform; }
.pista > i { display: block; width: .1em; height: .1em; flex: none; border: 2px solid var(--line-strong); }
.w { position: relative; display: block; font-weight: 400; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.w::after { content: attr(data-t); position: absolute; inset: 0; color: var(--pulse); -webkit-text-stroke: 0; clip-path: inset(calc((1 - var(--f, 0)) * 100%) 0 0 0); }
.w.lleno { --f: 1; }
html.js .w.lleno { --f: 0; }
.fila-etq { position: absolute; z-index: 2; left: var(--pad); bottom: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); max-width: calc(100% - var(--pad) * 2); padding: 2px var(--space-2); background: var(--night); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.fila-etq b { color: var(--cloud); letter-spacing: .08em; text-transform: uppercase; }
.fila-etq .num { color: var(--cloud); }
.marcador { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.marcador-datos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-4); }
.marcador-fila { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.marcador-fila b { font-size: 22px; letter-spacing: .02em; color: var(--cloud); }
.marcador-fila small { font-size: 16px; color: var(--ink-muted); }
.segmentos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); }
.segmentos i { display: block; height: 8px; background: var(--line-soft); }
.segmentos i.on { background: var(--pulse); }
.marcador-frase { font: 400 20px/1.2 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
mark { padding-inline: 4px; background: var(--pulse); color: var(--on-pulse); }

/* Carreras */
.carreras { background: var(--surface-100); color: var(--ink); padding: var(--space-7) var(--pad) var(--space-8); }
.carreras .gigante { font-size: min(24vw, 240px); }
.carreras-cab { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.carreras-cab > p { max-width: 30em; font-size: 18px; line-height: 28px; }
.filtros { display: flex; gap: var(--space-5); margin-top: var(--space-6); border-bottom: 1px solid var(--line-strong); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.filtro { background: none; border: 0; border-bottom: 3px solid transparent; padding: var(--space-3) 0; min-height: 44px; color: var(--ink-muted); font: 700 13px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.filtro:hover { color: var(--ink); }
.filtro[aria-pressed=true] { color: var(--ink); border-bottom-color: var(--pulse); }
.cards { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.cards > li { display: grid; }
.card { position: relative; display: flex; flex-direction: column; background: var(--surface-100); border: 1px solid var(--line-strong); }
.card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--night); color: var(--cloud); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card-img img { transform: scale(1.04); }
.card-img::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(transparent, var(--night)); }
.card-estado { position: absolute; z-index: 1; left: var(--space-3); top: var(--space-3); padding: 4px var(--space-2); background: var(--pulse); color: var(--on-pulse); font: 700 12px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.card-tipo { position: absolute; z-index: 1; right: var(--space-3); top: var(--space-3); padding: 4px var(--space-2); background: var(--night); font: 700 12px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.card-img h3 { position: absolute; z-index: 1; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); font: 400 34px/1 var(--font-display); letter-spacing: .005em; text-transform: uppercase; }
.facts { display: grid; grid-template-columns: auto auto 1fr; padding: var(--space-4) var(--space-3); }
.facts > div { padding-inline: var(--space-3); border-left: 1px solid var(--line-soft); }
.facts > div:first-child { padding-left: 0; border-left: 0; }
.facts dt { font: 600 12px/16px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.facts dd { margin-top: var(--space-1); }
.facts dd.num { font-size: 30px; line-height: 30px; }
.facts dd small { font: 600 13px/16px var(--font-body); }
.facts dd.txt { font: 400 18px/26px var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.card-accion { display: flex; justify-content: space-between; align-items: center; margin: auto var(--space-3) 0; padding-block: var(--space-3); min-height: 48px; border-top: 1px solid var(--line-soft); font: 700 14px/20px var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.card-accion::after { content: ""; position: absolute; inset: 0; }
.card:hover .card-accion { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pulse); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card:has(.card-accion:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.card-accion:focus-visible { outline: none; }

/* Bloque final: lista de espera */
.final { display: grid; gap: var(--space-6); background: var(--pulse); color: var(--on-pulse); padding: var(--space-7) var(--pad); scroll-margin-top: var(--nav); }
.final .raya { background: var(--on-pulse); }
.final-titulo { margin-top: var(--space-4); font: 400 clamp(68px, 21vw, 150px)/.96 var(--font-display); text-transform: uppercase; overflow-wrap: normal; }
.final-titulo span { display: block; }
.final-blanco { color: var(--cloud); }
.final-contorno { color: transparent; -webkit-text-stroke: 2px var(--on-pulse); }
.final-texto { margin-top: var(--space-4); max-width: 30em; font-weight: 500; }
.faq-list { margin-top: var(--space-5); border-top: 2px solid var(--on-pulse); }
.faq-list details { border-bottom: 1px solid var(--on-pulse); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 60px; padding-block: var(--space-3); font: 700 17px/22px var(--font-body); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; background: var(--night); color: var(--cloud); }
.faq-ic .ic { width: 16px; height: 16px; transition: transform .15s; }
.faq-list details[open] .faq-ic .ic { transform: rotate(45deg); }
.faq-list details p { padding-bottom: var(--space-4); max-width: 34em; }

.tarjeta-form { align-self: start; padding: var(--space-5) var(--space-4); background: var(--night); color: var(--cloud); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); scroll-margin-top: calc(var(--nav) + var(--space-3)); }
.tarjeta-form h2, .ventana h2 { font: 400 34px/1.05 var(--font-display); text-transform: uppercase; }
.tarjeta-sub { margin-top: var(--space-2); color: var(--ink-muted); font-size: 16px; line-height: 22px; }
form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.campos { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); align-content: start; }
.field > label:not(.check) { font: 600 12px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
input[type=text], input[type=email], input[type=tel] { width: 100%; height: 48px; padding: 10px 0; border: 0; border-bottom: 2px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: 500 17px/24px var(--font-body); }
input[type=text]:focus-visible, input[type=email]:focus-visible, input[type=tel]:focus-visible { outline: none; border-bottom-color: var(--pulse); box-shadow: 0 2px 0 0 var(--pulse); }
input::placeholder { color: var(--ink-muted); opacity: 1; }
.is-bad input[type=text], .is-bad input[type=email], .is-bad input[type=tel] { border-bottom-color: var(--danger); }
.hint { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.field > label .opcional { letter-spacing: .08em; text-transform: none; }
#compartir-estado { min-height: 20px; }
.error { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--danger); }
.error::before { content: "×"; font: 700 18px/20px var(--font-body); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 20px; cursor: pointer; }
.check input { position: absolute; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.box { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 2px solid var(--line-strong); color: transparent; }
.check input:checked + .box { background: var(--pulse); border-color: var(--pulse); color: var(--on-pulse); }
.check input:focus-visible + .box { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.is-bad .box { border-color: var(--danger); }
.elegida { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); background: var(--pulse); color: var(--on-pulse); font-size: 14px; line-height: 20px; }
.elegida .link { flex: none; }
.notice { display: flex; gap: var(--space-3); padding: 14px var(--space-4); border: 2px solid currentColor; }
.notice b { display: block; font: 400 18px/24px var(--font-display); text-transform: uppercase; }
.notice span { display: block; color: var(--ink); font-size: 14px; line-height: 20px; }
.notice-danger { background: var(--danger-soft); color: var(--danger); }
.notice-info { background: var(--surface-200); color: var(--ink-muted); }
#exito { display: grid; gap: var(--space-3); outline: none; }
.tarjeta-form .exito-titulo, .ventana .exito-titulo { font-size: 56px; line-height: 1; }
.exito-extra { color: var(--ink-muted); }

/* Pie */
.foot { background: var(--night); color: var(--cloud); overflow: clip; padding: var(--space-7) var(--pad) var(--space-4); }
.foot-cols { display: grid; gap: var(--space-5); }
.foot-tit { margin-bottom: var(--space-2); font: 700 13px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.foot-cols a { display: inline-block; padding-block: 6px; }
.foot-gigante { position: relative; margin: var(--space-6) calc(var(--pad) * -1) var(--space-3); font: 400 39.5vw/.98 var(--font-display); letter-spacing: 0; text-align: center; white-space: nowrap; }
.foot-base { display: block; color: transparent; -webkit-text-stroke: 2px var(--line-strong); }
.foot-relleno { position: absolute; inset: 0; color: var(--pulse); clip-path: inset(calc((1 - var(--f, 1)) * 100%) 0 0 0); }
.foot-base-linea { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 20px; }

/* Aparición suave */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s, transform .7s cubic-bezier(.2, .8, .2, 1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* Tableta */
@media (min-width: 640px) {
  :root { --pad: var(--space-6); --nav: 72px; --fs: 17.6vw; }
  .logo { font-size: 34px; }
  .menu-txt { display: inline; }
  .nav-como { display: inline-block; }
  .ventana { padding-inline: var(--space-6); }
  .ventana-cerrar span { display: inline; }
  .nav-der { gap: var(--space-5); }
  .hero-sup { font-size: 14px; }
  .carretera { --s: 84vw; right: calc(var(--s) * -.4 - 8vw); top: calc(var(--nav) + 24vw); -webkit-mask-image: linear-gradient(var(--night) 70%, transparent 92%); mask-image: linear-gradient(var(--night) 70%, transparent 92%); }
  .hero-pie { padding-top: var(--space-6); }
  .gigante { font-size: min(20vw, 240px); }
  .seccion-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-6); }
  .seccion-cab > p { display: block; }
  .carreras .gigante { font-size: min(14vw, 240px); }
  .carreras-cab { grid-template-columns: max-content minmax(220px, 340px); justify-content: space-between; align-items: end; column-gap: var(--space-6); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila-etq { font-size: 14px; }
  .marcador { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--space-6); }
  .marcador-frase { text-align: right; font-size: 24px; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Escritorio */
@media (min-width: 1000px) {
  :root { --fs: min(13.4vw, 21.5vh); }
  .titular { margin-top: var(--space-4); }
  .nav-km { display: block; }
  .carretera { --s: max(70vw, 104vh); top: auto; bottom: 0; right: calc(var(--s) * -.4); -webkit-mask-image: linear-gradient(90deg, transparent 24%, var(--night) 38%); mask-image: linear-gradient(90deg, transparent 24%, var(--night) 38%); }
  .final-titulo { font-size: min(10.4vw, 150px); }
  .hero-texto { max-width: 30em; }
  .hero-lateral { position: absolute; z-index: 2; right: var(--space-3); bottom: var(--space-6); display: block; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 12px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pista { font-size: min(15.5vh, 15vw); }
  .fila { padding-bottom: 0; padding-top: 24px; }
  .fila-etq { bottom: auto; top: 0; left: 8%; }
  .fila-etq-der { left: auto; right: 8%; }
  .final { grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); column-gap: var(--space-7); padding-block: var(--space-8); }
  .tarjeta-form { position: sticky; top: calc(var(--nav) + var(--space-4)); padding: var(--space-6); }
  .como { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--space-8); align-items: start; padding-block: var(--space-8); }
  .como-cab { position: sticky; top: calc(var(--nav) + var(--space-5)); }
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
  .foot-gigante { font-size: 39.5vw; }
}

/* Portátiles con poca altura: que el botón de la portada se vea sin bajar. */
@media (min-width: 1000px) and (max-height: 800px) {
  :root { --fs: 18vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .cinetica { height: auto; }
  html.js .cinetica-fija { position: static; height: auto; }
  html.js .w.lleno { --f: 1; }
  html.js .reveal { opacity: 1; transform: none; }
  .filas { padding-block: var(--space-5); }
  .fila { padding-block: 0; }
  .fila-etq { position: static; margin: var(--space-1) var(--pad) 0; }
  .filas::before, .filas::after { display: none; }
}

/* Las filas de La idea se ajustan al alto que queda libre: en pantallas bajas no se montan sobre el título ni sobre el marcador. */
@media (prefers-reduced-motion: no-preference) {
  html.js .filas { container-type: size; }
  html.js .pista { font-size: min(15vh, 27vw, calc((100cqh - 82px) / 3.12)); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  html.js .pista { font-size: min(15.5vh, 15vw, calc((100cqh - 88px) / 3.12)); }
}