/* Cartilla · portada. Afiche plano y suave: colores enteros en paneles redondeados, letra pesada
   y una ola que sube como la línea del olvido. */
:root {
  --amarillo: #ffd249;
  --amarillo-2: #f5c63c;
  --blanco: #ffffff;
  --gris: #f2f2f0;
  --rosa: #ffc4ef;
  --cian: #a4f6f8;
  --cian-2: #c9fbfc;
  --naranja: #f9a21f;
  --tinta: #0a0a0a;
  --suave: #4d4d4d;
  --hondo: #0b4f55;
  --magenta: #f53fd6;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --texto: "Work Sans", system-ui, sans-serif;
  --m: clamp(16px, 2vw, 28px);
  --hueco: clamp(8px, 1vw, 14px);
  --r: clamp(24px, 2.6vw, 40px);
  --r-s: 18px;
  --sale: cubic-bezier(.22, 1, .36, 1);
  --resorte: cubic-bezier(.34, 1.4, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font-family: var(--texto); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.55; }
main, footer { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; }
button, input { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.saltar { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--tinta); color: #fff; padding: 12px 16px; border-radius: 999px; }
.saltar:focus { top: 12px; }
.banda { position: relative; z-index: 30; background: var(--tinta); color: #fff; padding: 14px var(--m); }

/* Botón único: píldora magenta. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--magenta); color: var(--tinta); font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  transition: transform .45s var(--resorte), background-color .3s ease;
}
.boton:hover { background: #ff63e3; transform: translateY(-3px); }
.boton:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.boton--grande { min-height: 62px; min-width: 200px; font-size: 1.125rem; }

/* Las secciones de color son paneles redondeados separados por aire, no bloques pegados. */
.panel { margin: 0 var(--hueco) var(--hueco); border-radius: var(--r); overflow: hidden; }

/* ---------- Cabecera ---------- */
.cabecera { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 26px var(--m); pointer-events: none; }
.cabecera > * { pointer-events: auto; }
.cabecera__marca { font-family: var(--display); font-size: 2rem; line-height: 1; text-transform: uppercase; text-decoration: none; }
.cabecera__nav { display: flex; align-items: center; gap: 22px; }
.cabecera__enlace { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- La ola: el agua sube detrás del titular ---------- */
.ola { position: relative; height: 210svh; }
.ola__escena { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--blanco); --nivel: 0; }
.ola__agua { position: absolute; left: 0; right: 0; bottom: 0; height: 115%; background: var(--cian); transform: translateY(calc(57% - var(--nivel) * 60%)); will-change: transform; }
.ola__cresta { position: absolute; left: 0; bottom: calc(100% - 2px); width: 200%; height: clamp(60px, 9vw, 120px); }
.ola__onda { fill: var(--cian); }
.ola__onda--fondo { fill: var(--cian-2); animation: oleaje 14s linear infinite; }
.ola__onda--frente { animation: oleaje 9s linear infinite reverse; }
@keyframes oleaje { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ola__capa { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--m); }
.titular {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; text-align: center; color: var(--tinta);
  font-size: min(18vw, 31svh); line-height: .9; letter-spacing: -0.01em;
  transform: translateY(calc(var(--nivel) * 6svh)); opacity: calc(1 - var(--nivel) * .68); will-change: transform, opacity;
}
.linea { display: block; overflow: hidden; padding-top: .04em; }
.linea > span { display: block; }
.js .linea > span { animation: subir 1.2s var(--sale) both; }
.js .linea + .linea > span { animation-delay: .14s; }
@keyframes subir { from { transform: translateY(108%); } to { transform: none; } }
.ola__apoyo { position: absolute; left: 50%; bottom: 44px; width: min(40ch, calc(100% - 2 * var(--m))); text-align: center; font-size: 1.25rem; font-weight: 600; color: var(--hondo); transform: translate(-50%, calc(var(--nivel) * 30px)); opacity: calc(1 - var(--nivel) * 2.4); }
.js .ola__apoyo { animation: aparecer 1s .55s var(--sale) backwards; }
@keyframes aparecer { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.ola__hundido { position: absolute; left: 50%; bottom: 44px; width: min(30ch, calc(100% - 2 * var(--m))); text-align: center; font-family: var(--display); text-transform: uppercase; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.05; color: var(--hondo); transform: translate(-50%, calc((1 - var(--nivel)) * 40px)); opacity: calc((var(--nivel) - .45) * 2.4); }

/* ---------- Cuatro campos, una tarjeta que avanza ---------- */
.campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hueco); padding: var(--hueco); padding-top: 0; }
.campo-color { position: relative; min-height: 82svh; padding: 28px; display: flex; flex-direction: column; border-radius: var(--r); }
.campo-color--amarillo { background: var(--amarillo); }
.campo-color--blanco { background: var(--gris); }
.campo-color--rosa { background: var(--rosa); }
.campo-color--cian { background: var(--cian); }
.campos__titulo { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.75rem); line-height: .92; position: absolute; top: 28px; left: 28px; right: 28px; }
.campo-color__frase { margin-top: auto; font-weight: 600; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.15; max-width: 18ch; }
.ficha { position: relative; margin: 20svh auto 32px; width: min(290px, 100%); background: #fff; border-radius: var(--r-s); padding: 20px; display: grid; gap: 12px; transition: transform .6s var(--resorte); }
.ficha:hover { transform: translateY(-8px) rotate(-.6deg); }
.ficha__rotulo { font-size: .875rem; font-weight: 600; color: var(--suave); }
.ficha__texto { font-size: 1.0625rem; line-height: 1.45; }
.ficha__hueco { display: inline-block; min-width: 84px; border-bottom: 3px solid var(--tinta); margin: 0 4px; padding: 0 6px; text-align: center; font-weight: 600; border-radius: 6px 6px 0 0; transition: background-color .4s ease; }
.ficha__hueco.bien { background: var(--cian); }
.ficha__hueco.mal { background: var(--cian); }
.ficha__hueco s { color: #8a1f6d; margin-right: 4px; }
.ficha__banco { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha__banco li { padding: 5px 12px; background: var(--gris); border-radius: 999px; font-size: .9375rem; }
.ficha__opciones { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ficha__opciones label { position: relative; cursor: pointer; }
.ficha__opciones input { position: absolute; opacity: 0; inset: 0; }
.ficha__opciones span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--gris); border-radius: 999px; font-size: .9375rem; transition: background-color .25s ease, color .25s ease, transform .45s var(--resorte); }
.ficha__opciones label:hover span { background: #e4e4e2; transform: translateY(-2px); }
.ficha__opciones input:checked + span { background: var(--tinta); color: #fff; }
.ficha__opciones input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 2px; }
.ficha__opciones input:disabled + span { cursor: default; transform: none; }
.ficha__boton { min-height: 46px; border: 0; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 600; cursor: pointer; transition: transform .45s var(--resorte), background-color .25s; }
.ficha__boton:hover { background: #2a2a2a; }
.ficha__boton:active { transform: scale(.97); transition-duration: .12s; }
.ficha__estado { font-size: 1rem; line-height: 1.45; }
.ficha__estado b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.75rem; line-height: 1; margin-bottom: 4px; }
.cajas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-size: .8125rem; text-align: center; }
.cajas li { background: var(--gris); padding: 6px 0; border-radius: 10px; transition: background-color .4s ease, color .4s ease, transform .5s var(--resorte); }
.cajas li .num { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.cajas li.activa { background: var(--tinta); color: #fff; transform: translateY(-4px); }

/* ---------- Un control, en tamaño afiche ---------- */
.interruptor-sec { position: relative; min-height: 88svh; padding: 48px var(--m); background: var(--naranja); transition: background-color .7s ease; }
.interruptor-sec[data-modo="con"] { background: var(--cian); }
.interruptor-sec__texto { position: relative; z-index: 2; max-width: 46%; display: grid; gap: 14px; }
.interruptor-sec h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem); line-height: .95; }
.interruptor-sec__cifra { display: grid; margin-top: 18px; }
.interruptor-sec__cifra .num { font-family: var(--display); font-size: clamp(5rem, 3rem + 9vw, 12rem); line-height: .85; }
.interruptor-sec__cifra span:last-child { font-weight: 600; }
.interruptor-sec__nota { font-size: .9375rem; max-width: 46ch; }
.control-gigante { position: absolute; z-index: 1; right: -1.2em; bottom: -.6em; font-size: min(7.4vh, 5.2vw); width: 11.5em; background: #fff; border-radius: .7em; padding: .5em; display: grid; gap: .4em; }
.curva { width: 100%; height: 3.4em; color: var(--tinta); }
.curva path { transition: d .9s var(--sale); }
.segmentos { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--gris); padding: .12em; border-radius: 999px; }
.segmentos::before { content: ""; position: absolute; top: .12em; bottom: .12em; left: .12em; width: calc(50% - .12em); border-radius: 999px; background: var(--tinta); transition: transform .6s var(--resorte); }
.interruptor-sec[data-modo="con"] .segmentos::before { transform: translateX(100%); }
.segmentos button { position: relative; z-index: 1; border: 0; background: transparent; min-height: 1.9em; font-size: .62em; font-weight: 600; cursor: pointer; border-radius: 999px; transition: color .4s ease; }
/* El botón activo recibe su fondo cuando la píldora ya llegó: el texto blanco nunca queda sobre gris. */
.segmentos button[aria-checked="true"] { color: #fff; background: var(--tinta); transition: color .4s ease, background-color 0s .5s; }

/* ---------- Título fijo, filas que pasan ---------- */
.rasgos { background: var(--rosa); display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; padding: 140px var(--m); overflow: visible; }
.rasgos__titulo { grid-column: 1 / span 5; align-self: start; position: sticky; top: 32px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(3.5rem, 1.6rem + 5.4vw, 7.25rem); line-height: .9; }
.rasgos__lista { grid-column: 7 / span 6; display: grid; gap: 120px; }
.rasgo { display: grid; gap: 18px; }
.rasgo h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.15; }
.rasgo__fila { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.rasgo__marco { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 3 / 4; }
.rasgo__fila img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--sale); }
.rasgo:hover .rasgo__fila img { transform: scale(1.1); }
.rasgo--invertido .rasgo__fila { grid-template-columns: 1fr 220px; }
.rasgo--invertido .rasgo__marco { order: 2; }
.rasgo__fila ul { display: grid; gap: 12px; font-size: 1.125rem; }
.rasgo__fila li { padding-left: 18px; position: relative; }
.rasgo__fila li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); }

/* ---------- Tablero de hechos ---------- */
.hechos { background: var(--amarillo); padding: 120px var(--m); }
.hechos__tablero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hecho { background: var(--amarillo-2); aspect-ratio: 3 / 2; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--r-s); transition: transform .6s var(--resorte); }
.hecho:hover { transform: translateY(-4px); }
.hecho--titulo { grid-column: span 2; aspect-ratio: auto; background: var(--tinta); color: #fff; justify-content: flex-start; }
.hecho--titulo:hover { transform: none; }
.hecho--titulo h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.5rem, 1.4rem + 3vw, 4.5rem); line-height: .92; }
.hecho__dato { font-size: 1.0625rem; font-weight: 600; }
.hecho__cifra { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(3.5rem, 2rem + 4vw, 6rem); line-height: .9; margin-bottom: 8px; }
.hecho--curso { justify-content: space-between; }
.hecho__nombre { font-weight: 600; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.15; }

/* ---------- El boleto ---------- */
.boleto-sec { background: var(--naranja); padding: 140px var(--m); display: grid; place-items: center; }
.boleto { position: relative; width: min(64vw, 1000px); aspect-ratio: 2.3 / 1; background: #fff; display: grid; grid-template-columns: 7fr 3fr; border-radius: var(--r); transition: transform .8s var(--resorte); }
.boleto:hover { transform: rotate(-1deg) scale(1.01); }
.boleto::before, .boleto::after { content: ""; position: absolute; left: 70%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: var(--naranja); }
.boleto::before { top: -16px; }
.boleto::after { bottom: -16px; }
.boleto__cuerpo { padding: 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.boleto__cuerpo h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem); line-height: .92; }
.boleto__cuerpo ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; font-size: 1.0625rem; }
.boleto__talon { border-left: 6px dotted var(--naranja); padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 20px; text-align: center; }
.boleto__precio { font-family: var(--display); font-size: clamp(4rem, 2rem + 5vw, 7rem); line-height: .9; }
.boleto__barra { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 999px; background: var(--magenta); font-weight: 600; text-decoration: none; transition: background-color .3s, transform .45s var(--resorte); }
.boleto__barra:hover { background: #ff63e3; transform: translateY(-3px); }
.boleto__barra:active { transform: scale(.97); transition-duration: .12s; }

/* ---------- Dudas: acordeón suave ---------- */
.dudas { background: var(--gris); display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; padding: 140px var(--m); overflow: visible; }
.dudas h2 { grid-column: 1 / span 4; align-self: start; position: sticky; top: 96px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.75rem); line-height: .92; }
.dudas__lista { grid-column: 5 / span 8; display: grid; gap: 8px; }
.dudas details { background: #fff; border-radius: var(--r-s); transition: background-color .45s ease; }
.dudas details[open] { background: var(--cian); }
.dudas details::details-content { block-size: 0; overflow: hidden; transition: block-size .55s var(--sale), content-visibility .55s allow-discrete; }
.dudas details[open]::details-content { block-size: auto; }
.dudas summary { list-style: none; cursor: pointer; min-height: 72px; padding: 20px 64px 20px 24px; position: relative; font-size: 1.1875rem; font-weight: 600; display: flex; align-items: center; border-radius: var(--r-s); }
.dudas summary::-webkit-details-marker { display: none; }
.dudas summary::before, .dudas summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 16px; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--tinta); transition: transform .5s var(--resorte); }
.dudas summary::after { transform: rotate(90deg); }
.dudas details[open] summary::after { transform: rotate(0); }
.dudas details p { padding: 0 24px 24px; max-width: 58ch; font-size: 1.0625rem; }

/* ---------- La pregunta en los dos bordes ---------- */
.eleccion { position: relative; min-height: 96svh; background: var(--tinta); color: #fff; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; padding: 32px var(--m) 24px; }
.eleccion__pregunta { display: contents; }
.eleccion__l1, .eleccion__l2 { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(5rem, 2rem + 10vw, 11rem); line-height: 1; }
.eleccion__l1 { grid-row: 1; }
.eleccion__l2 { grid-row: 3; }
.eleccion__centro { grid-row: 2; align-self: center; display: grid; gap: 16px; justify-items: center; }
.eleccion__botones { display: flex; align-items: center; gap: 40px; }
.eleccion__o { color: #a9a9a9; font-size: 1.125rem; }
.eleccion__centro p { color: #cfcfcf; font-size: 1rem; }
.eleccion__centro a:not(.boton) { color: #fff; }

/* ---------- Pie: foto y menú ---------- */
.pie { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hueco); min-height: 96svh; margin: 0 var(--hueco) var(--hueco); }
.pie__foto { overflow: hidden; border-radius: var(--r); }
.pie__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pie__menu { background: var(--amarillo); border-radius: var(--r); padding: 72px var(--m) 28px 8%; display: flex; flex-direction: column; }
.pie__marca { font-family: var(--display); font-size: 2rem; text-transform: uppercase; line-height: 1; margin-bottom: 40px; }
.pie__enlaces { display: grid; gap: 20px; }
.pie__enlaces a { display: inline-block; font-weight: 600; font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem); line-height: 1.05; text-decoration: none; transition: transform .5s var(--resorte), color .3s ease; }
.pie__enlaces:hover a { color: #6b5a1c; }
.pie__enlaces a:hover, .pie__enlaces a:focus-visible { color: var(--tinta); transform: translateX(14px); }
.pie__bloques { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; font-size: 1rem; }
.pie__legal { margin-top: auto; padding-top: 40px; font-size: .8125rem; line-height: 1.5; color: #3d3410; }

/* ---------- Entradas suaves al aparecer (solo con JS; sin JS todo se ve) ---------- */
/* Solo se oculta mientras no ha entrado; al entrar vuelven a mandar las reglas propias (hover incluido). */
.js .entra:not(.visto) { opacity: 0; transform: translateY(36px) scale(.98); }
.js .entra { transition: opacity 1s var(--sale) var(--d, 0ms), transform 1.1s var(--sale) var(--d, 0ms); }
.js .entra.visto.listo { transition: transform .6s var(--resorte), background-color .45s ease; }

/* ---------- Teléfono y tableta ---------- */
@media (max-width: 900px) {
  .titular { font-size: min(22vw, 26svh); }
  .ola__apoyo, .ola__hundido { left: var(--m); width: calc(100% - 2 * var(--m)); text-align: left; bottom: 28px; }
  .ola__apoyo { font-size: 1.0625rem; transform: translateY(calc(var(--nivel) * 30px)); }
  .ola__hundido { transform: translateY(calc((1 - var(--nivel)) * 40px)); }
  .cabecera { padding: 18px var(--m); }
  .cabecera__marca { font-size: 1.6rem; }
  .cabecera__nav { gap: 14px; }
  .cabecera .boton { min-height: 44px; padding: 0 16px; font-size: .9375rem; }

  .campos { grid-template-columns: 1fr 1fr; }
  .campo-color { min-height: 64svh; padding: 24px 20px 32px; gap: 24px; }
  .campos__titulo { position: static; order: -2; }
  .campo-color__frase { order: -1; margin-top: 0; font-size: 1.4rem; max-width: 22ch; }
  .ficha { margin: 0; width: 100%; max-width: 420px; }

  .interruptor-sec { min-height: 86svh; padding: 88px var(--m) 40px; }
  .control-gigante { font-size: 11vw; right: auto; left: -1em; bottom: -.6em; width: 11em; }
  .interruptor-sec__texto { padding-bottom: 60vw; max-width: none; }

  .rasgos { grid-template-columns: 1fr; padding: 0 0 72px; }
  .rasgos__titulo { grid-column: 1; position: sticky; top: 0; z-index: 3; background: var(--rosa); padding: 16px var(--m) 12px; font-size: 9vw; line-height: 1; }
  .rasgos__lista { grid-column: 1; gap: 64px; padding: 36px var(--m) 0; }
  .rasgo__fila, .rasgo--invertido .rasgo__fila { grid-template-columns: 1fr; }
  .rasgo__marco, .rasgo--invertido .rasgo__marco { order: 0; aspect-ratio: 4 / 3; }
  .rasgo__fila ul { font-size: 1.0625rem; }

  .hechos { padding: 72px var(--m); }
  .hechos__tablero { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hecho { padding: 16px; aspect-ratio: auto; min-height: 150px; }
  .hecho__cifra { font-size: 3.5rem; }
  .hecho--titulo { min-height: 120px; }
  .hecho__nombre { font-size: 1.125rem; }

  .boleto-sec { padding: 72px 14px; }
  .boleto { width: 100%; aspect-ratio: auto; grid-template-columns: 1fr; }
  .boleto:hover { transform: none; }
  .boleto::before, .boleto::after { left: auto; top: auto; bottom: auto; margin: 0; }
  .boleto::before { left: -16px; top: calc(38% - 16px); }
  .boleto::after { right: -16px; top: calc(38% - 16px); }
  .boleto__cuerpo { padding: 28px 22px; }
  .boleto__cuerpo h2 { font-size: 13vw; }
  .boleto__cuerpo ul { grid-template-columns: 1fr; }
  .boleto__talon { border-left: 0; border-bottom: 6px dotted var(--naranja); order: -1; }
  .boleto__precio { font-size: 22vw; }

  .dudas { grid-template-columns: 1fr; padding: 72px var(--m); gap: 28px; }
  .dudas h2 { grid-column: 1; position: static; font-size: 13vw; }
  .dudas__lista { grid-column: 1; gap: 6px; }
  .dudas summary { font-size: 1.125rem; min-height: 64px; padding: 16px 56px 16px 20px; }
  .dudas details p { padding: 0 20px 20px; font-size: 1rem; }

  .eleccion { min-height: 80svh; }
  .eleccion__l1, .eleccion__l2 { font-size: 18vw; }
  .eleccion__botones { flex-direction: column; gap: 12px; width: 72%; }
  .eleccion__botones .boton { width: 100%; }

  .pie { grid-template-columns: 1fr; min-height: 0; }
  .pie__foto { height: 50svh; }
  .pie__menu { padding: 40px var(--m) 28px; }
  .pie__enlaces { gap: 14px; }
  .pie__enlaces a { font-size: 8vw; }
  .pie__bloques { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .pie__legal { margin-top: 40px; }
}

@media (max-width: 600px) {
  .hechos__tablero { grid-template-columns: 1fr; gap: 10px; }
  .hecho__dato { font-size: 1.25rem; display: flex; align-items: center; gap: 16px; }
  .hecho, .hecho--curso { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; }
  .hecho__cifra { margin: 0; font-size: 3rem; min-width: 2.6ch; }
  .hecho--curso { flex-direction: column; align-items: flex-start; }
  .hecho--titulo { grid-column: 1; }
  .campos { grid-template-columns: 1fr; }
  .campo-color { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ola { height: auto; }
  .ola__escena { position: relative; }
  .js .entra:not(.visto) { opacity: 1; transform: none; }
}