/* ==========================================================================
   El Parque de Brasilito — Invitación 4 años
   Hoja única. Sin frameworks, sin build.
   Orden: tokens · reajuste · tipografía · maquetación · componentes · secciones
   ========================================================================== */

/* --- 1. Fuentes ---------------------------------------------------------- */
/* Rosmie (titulares): rueda redonda de los años setenta, que es justo el
   registro de la rotulación de un parque. Frente a una redondeada de catálogo
   gana en carácter y en ajuste: «Brasil» a 92 px ocupa 10 px menos y se lee
   más firme. Dos pesos estáticos, no una variable: el archivo entero pesa
   menos que la variable que sustituye y no hay eje que ajustar.
   Licencia comercial de por vida, Envato Elements. */
@font-face{
  font-family:'Rosmie';
  src:url('../assets/fuentes/rosmie-extrabold.woff2') format('woff2');
  font-weight:700 800; font-style:normal; font-display:swap;
}
/* Nunito Sans (cuerpo): humanista de terminales apenas redondeados. El texto
   corrido NO se pone en la cara de titulares: Rosmie es cara de display y sus
   contadores cerrados cansan a 17 px. Comparte el parentesco redondo pero
   cambia de estructura, así no compiten. */
@font-face{
  font-family:'Nunito Sans';
  src:url('../assets/fuentes/nunitosans-latin-var.woff2') format('woff2-variations');
  font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- 2. Tokens ----------------------------------------------------------- */
:root{
  /* Color. Es la paleta del propio ilustrador de las atracciones, adoptada
     como paleta del sitio: así la ilustración comprada y la interfaz son una
     sola cosa y no un collage. Sus cinco familias coinciden con las cinco que
     pide el encargo. Medida contra AA una por una; el único ajuste es el
     verde, que en su tono original (#4BA931) sólo da 2.99 con blanco encima. */
  --azul-hielo:#DCF3FF;  --azul-palido:#BFD4F3;
  --azul-medio:#5762C5;  --azul:#313BB9;   --azul-hondo:#1E2478;
  --rojo-claro:#FA785D;  --rojo-vivo:#F7392B; --rojo:#D8251D; --rojo-hondo:#9E1A14;
  --naranja:#F53C0C;
  --amar-claro:#FEDF8F;  --amar-medio:#FED73E; --amarillo:#FEBD36; --amar-oro:#FEC400;
  --amar-hondo:#8A5A00;
  --mora-claro:#A089D9;  --morado:#7F51C1; --mora-hondo:#6246B5;
  --verd-claro:#A8DF97;  --verde-ilus:#4BA931; --verde:#2E7A1E; --verd-hondo:#1E5614;

  --crema:#FFF6E6;
  --canto-papel:#E3D1AC;   /* el grosor del papel: canto de toda tarjeta */
  --crema-hondo:#EFDDBA;   /* el papel de «los datos»: un escalón por debajo
                              del final de «los mundos», que acaba en #F8E9CE.
                              Con el anterior (#F6E8CE) la diferencia era de 2
                              de 255 por canal y los dos apartados leían como
                              uno solo de 1.600 px. */
  --nube:#FFFFFF;
  --tinta:#171918;
  --tinta-suave:#4A5060;

  /* Medida. La columna de texto es un número, no un porcentaje: los fondos y
     los topes de línea se anclan aquí para que no se descuadren a 900 px. */
  --medida:33.5rem;      /* 536 px */
  --medida-ancha:60rem;  /* 960 px, sólo para rejillas de escritorio */
  --canal:1.25rem;       /* 20 px de aire lateral en móvil */

  /* Ritmo vertical en múltiplos de 4 */
  --e1:.25rem; --e2:.5rem;  --e3:.75rem; --e4:1rem;
  --e5:1.5rem; --e6:2rem;   --e7:3rem;   --e8:4rem; --e9:6rem;

  /* Tipografía */
  --display:'Rosmie','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --cuerpo:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --t-xs:.8125rem; --t-s:.9375rem; --t-m:1.0625rem; --t-l:1.3125rem;
  --t-xl:1.75rem;  --t-2xl:2.375rem;

  /* Forma */
  --r-s:.625rem; --r-m:1.125rem; --r-l:1.75rem; --r-full:999px;
  --toque:2.75rem;          /* 44 px mínimo de área táctil */
  --filo:1px;

  /* Movimiento. Dos duraciones y dos curvas para todo el proyecto. */
  --rapido:180ms; --lento:520ms;
  --salida:cubic-bezier(.22,.61,.36,1);
  --rebote:cubic-bezier(.34,1.56,.64,1);

  /* Sombras teñidas del color del elemento, nunca gris neutro */
  --sombra-baja:0 1px 2px rgba(27,34,51,.06), 0 2px 8px rgba(27,34,51,.06);
  --sombra-media:0 2px 4px rgba(27,34,51,.07), 0 8px 22px rgba(12,46,99,.12);
  --sombra-alta:0 4px 8px rgba(27,34,51,.08), 0 18px 44px rgba(12,46,99,.18);
}

/* --- 3. Reajuste --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* el fondo del documento iguala el cielo del hero: sin destello blanco al cargar */
  background:var(--azul-palido);
}
body{
  margin:0;
  font-family:var(--cuerpo);
  font-size:var(--t-m);
  line-height:1.6;
  font-variation-settings:'opsz' 12;     /* el eje óptico se fija, no se deja en auto */
  color:var(--tinta);
  background:var(--azul-palido);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
h1,h2,h3,p,figure,ul,ol,dl,dd,blockquote{margin:0}

/* El canon de composición, por TIPO de elemento y no pieza a pieza: «balance»
   reparte los titulares en renglones parejos y «pretty» impide que la última
   línea de un párrafo se quede con una palabra suelta. Esta regla está
   duplicada en el bloque crítico de index.html, palabra por palabra: si las
   dos partieran los renglones distinto, la portada se pintaría con un reparto
   y saltaría al otro al llegar la hoja.
   No basta por sí sola —Safari tardó en traer «pretty»—, así que las huérfanas
   que sobrevivan se atan con   en el HTML. */
h1,h2,h3,h4{text-wrap:balance}p,li,dd,dt,label,small,figcaption{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--azul);text-decoration-thickness:.08em;text-underline-offset:.18em}
:where(a,button,input,summary):focus-visible{
  outline:3px solid var(--azul-hondo); outline-offset:3px; border-radius:var(--r-s);
}
[hidden]{display:none!important}

/* --- 4. Tipografía ------------------------------------------------------- */
.display{
  font-family:var(--display);
  font-weight:800;
  line-height:1;           /* interlineado 1 en los titulares grandes */
  letter-spacing:-.005em;
}
.rotulo{
  font-family:var(--display); font-weight:700;
  font-size:var(--t-s); letter-spacing:.14em; text-transform:uppercase;
  line-height:1.2;
}
.seccion__titulo{
  font-family:var(--display); font-weight:800;
  font-size:var(--t-2xl); line-height:1.08; letter-spacing:-.01em;
  text-wrap:balance;
}

/* «Tres mundos / en un solo parque» va atado para que el renglón no acabe en
   preposición. Ese bloque mide 290 px y la columna a 320 px de pantalla mide
   280: sin esto, recortaría letra. Se baja el cuerpo sólo por debajo de 360,
   que es donde no cabe, y ningún otro ancho se entera. */
@media (max-width:359px){ .seccion__titulo{font-size:2.1rem} }

/* --- El relieve de los titulares ----------------------------------------
   Un solo mecanismo para todos. El anillo NO está para separar la letra del
   fondo —sobre crema un filete crema sería invisible—: está para separar la
   cara de su propia extrusión, que es lo que da el canto limpio.

   Va con sombras y no con `-webkit-text-stroke`: el trazo nativo se CENTRA y
   adelgaza la letra, y `paint-order`, que lo arreglaría, sólo funciona sobre
   texto HTML en WebKit y Blink —en Firefox las letras saldrían flacas—. El
   anillo de sombras se ve igual y funciona en todos.

   Todo en `em`: la misma regla sirve para un titular de 38 px y para un
   rótulo de 15, sin repetir valores por tamaño.

   La extrusión va ENSANCHADA al radio del anillo: tres copias por paso, en
   0 y en ±.032em. Con la extrusión recta la cara es .045em más ancha que
   ella —el anillo la ensancha—, así que el canto sólo asoma por abajo y
   separado de la cara por el propio anillo: se ve como una segunda letra
   desplazada, no como el costado de la primera. Es lateral, no de
   profundidad: bajar más la extrusión no lo arregla, ensancharla sí.

   LA TRAMPA, que costó seis apartados pintados del mismo color: los valores
   por defecto NO pueden declararse aquí. Una propiedad personalizada escrita
   sobre el propio elemento gana SIEMPRE a la que hereda de un antepasado, así
   que un `#confirmar{--extrusion:verde}` en la sección nunca alcanzaba al
   `h2`, que ya traía el suyo. Los valores por defecto van como respaldo dentro
   de `var()`: así el apartado hereda y manda, y quien quiera saltárselo lo
   declara sobre sí mismo —que es lo que hacen el boleto y las casetas—.
   -------------------------------------------------------------------------- */
.seccion__titulo,
.rotulo,
.mundo__nombre,
.cierre__titulo,
.boleto__marca,
.boleto__dia,
.boleto__num,
.boleto__mes,
.boleto__hora,
.cierre__firma,
.salon__voz,
.marca__letras span,
.boleto__talon .reloj__num{
  --f:var(--filete,var(--crema));
  --x:var(--extrusion,#111A5C);
  text-shadow:
     .045em 0 0 var(--f), -.045em 0 0 var(--f),
     0 .045em 0 var(--f), 0 -.045em 0 var(--f),
     .032em .032em 0 var(--f), -.032em .032em 0 var(--f),
     .032em -.032em 0 var(--f), -.032em -.032em 0 var(--f),
     0 0.01em 0 var(--x), .032em 0.01em 0 var(--x), -.032em 0.01em 0 var(--x),
     0 0.02em 0 var(--x), .032em 0.02em 0 var(--x), -.032em 0.02em 0 var(--x),
     0 0.03em 0 var(--x), .032em 0.03em 0 var(--x), -.032em 0.03em 0 var(--x),
     0 0.04em 0 var(--x), .032em 0.04em 0 var(--x), -.032em 0.04em 0 var(--x),
     0 0.05em 0 var(--x), .032em 0.05em 0 var(--x), -.032em 0.05em 0 var(--x),
     0 0.06em 0 var(--x), .032em 0.06em 0 var(--x), -.032em 0.06em 0 var(--x),
     0 0.07em 0 var(--x), .032em 0.07em 0 var(--x), -.032em 0.07em 0 var(--x),
     0 0.08em 0 var(--x), .032em 0.08em 0 var(--x), -.032em 0.08em 0 var(--x),
     0 .10em .11em rgba(0,0,0,.20);
}
/* Cada apartado pone su par: el filete es el color de SU fondo, la extrusión
   una versión hundida de la tinta. */
#mundos{--extrusion:#3E2A80}
#donde{--extrusion:#111A5C}
/* Sobre fondo OSCURO con letra blanca la cuenta cambia. En los apartados
   claros la extrusión tiene 80 puntos de claridad por debajo del papel y el
   canto se ve solo; aquí el fondo ya está abajo, así que una extrusión «un
   tono más oscura» no se separa de él y el titular sale plano —era el caso:
   6,4 puntos contra el fondo del cierre—. Se baja hasta el suelo: 12 puntos
   en el cierre y 19 en la confirmación, medidos sobre el render. Y el filete
   va igual que la extrusión, porque sobre oscuro no hay nada que separar: la
   cara ya es blanca. */
#confirmar{--filete:#05200A; --extrusion:#05200A}
#cierre{--filete:#04061F; --extrusion:#04061F}
/* El boleto: su papel es crema, y la tinta roja hunde en rojo, no en azul.
   Quedan planos los dos rótulos diminutos —«cuánto falta» y días/hrs/min/seg—
   y la pastilla del año, que ya tiene fondo propio: el relieve dentro de una
   pastilla se lee como un error, no como relieve. */
#cuando{--extrusion:#111A5C}
.boleto__marca{--extrusion:#8E1712}
.boleto__hora{--extrusion:#6B110C}
.boleto__mes i{text-shadow:none}

/* En las casetas el papel es blanco, no crema */
.mundo{--filete:var(--nube)}
.mundo--juguetes{--extrusion:#5C3C00}
.mundo--monstruos{--extrusion:#3E2A80}
.mundo--carreras{--extrusion:#111A5C}
.seccion__entrada{
  font-size:var(--t-m); color:var(--tinta-suave);
  max-width:26ch; margin-inline:auto; text-wrap:pretty;
}

/* --- 5. Maquetación ------------------------------------------------------ */
.medida{
  width:100%; max-width:var(--medida);
  margin-inline:auto;
  padding-inline:max(var(--canal),env(safe-area-inset-left)) max(var(--canal),env(safe-area-inset-right));
}
.medida--ancha{max-width:var(--medida-ancha)}
.seccion{padding-block:var(--e9)}
.seccion--comoda{padding-block:calc(var(--e9) + var(--e6))}
.centrado{text-align:center}
.pila{display:grid; gap:var(--e5)}
.pila--corta{gap:var(--e3)}

/* --- 6. Botones ---------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--toque); padding:.75rem 1.35rem;
  font-family:var(--display); font-weight:700; font-size:var(--t-m);
  line-height:1.15; letter-spacing:.01em;
  border-radius:var(--r-full);
  text-decoration:none; text-align:center;
  transition:transform var(--rapido) var(--salida), box-shadow var(--rapido) var(--salida), background-color var(--rapido) linear;
  will-change:transform;
}
.boton .icono{flex:none; width:1.15em; height:1.15em}

/* El relieve de los rótulos de botón. Sobre color sólido va SÓLO la
   extrusión: el anillo oscuro alrededor de una letra blanca de 17 px le come
   el filo y la ensucia —se probó—. Donde la tinta es oscura sobre fondo claro
   sí entra el anillo, que ahí emborda de verdad. */
.boton--principal,
.boton--azul,
.boton--verde{
  text-shadow:
    0 .01em 0 var(--ext), 0 .02em 0 var(--ext), 0 .03em 0 var(--ext),
    0 .04em 0 var(--ext), 0 .05em 0 var(--ext), 0 .06em 0 var(--ext);
}
/* Mismo respaldo dentro de `var()` que en los titulares: si algún día uno de
   estos se queda sin su par, la sombra cae a un valor bueno en vez de
   invalidar la declaración entera y quedarse sin relieve. */
.boton--hueco,
.limite,
.dato__voz{
  --f:var(--filete,var(--nube));
  --e:var(--ext,#111A5C);
  text-shadow:
     .045em 0 0 var(--f), -.045em 0 0 var(--f),
     0 .045em 0 var(--f), 0 -.045em 0 var(--f),
     .032em .032em 0 var(--f), -.032em .032em 0 var(--f),
     .032em -.032em 0 var(--f), -.032em -.032em 0 var(--f),
     0 0.01em 0 var(--e), .032em 0.01em 0 var(--e), -.032em 0.01em 0 var(--e),
     0 0.02em 0 var(--e), .032em 0.02em 0 var(--e), -.032em 0.02em 0 var(--e),
     0 0.03em 0 var(--e), .032em 0.03em 0 var(--e), -.032em 0.03em 0 var(--e),
     0 0.04em 0 var(--e), .032em 0.04em 0 var(--e), -.032em 0.04em 0 var(--e),
     0 0.05em 0 var(--e), .032em 0.05em 0 var(--e), -.032em 0.05em 0 var(--e),
     0 0.06em 0 var(--e), .032em 0.06em 0 var(--e), -.032em 0.06em 0 var(--e);
}
.boton--hueco{--filete:var(--nube); --ext:#111A5C}
.limite{--filete:var(--amar-claro); --ext:#6B4600}

/* Al pulsar, el botón se HUNDE contra su propio canto: si sólo bajara, el
   canto bajaría con él y no se hundiría nada. */
.boton--principal:active{transform:translateY(2px); box-shadow:0 3px 0 var(--rojo-hondo), var(--sombra-baja)}
.boton--azul:active{transform:translateY(2px); box-shadow:0 3px 0 var(--azul-hondo), var(--sombra-baja)}
.boton--verde:active{transform:translateY(2px); box-shadow:0 3px 0 var(--verd-hondo), var(--sombra-baja)}
.boton--hueco:active{
  transform:translateY(2px);
  box-shadow:inset 0 0 0 2px rgba(12,46,99,.16), 0 3px 0 var(--canto-papel), var(--sombra-baja);
}

.boton--principal{background:var(--rojo); color:#fff; --ext:#7E140F; box-shadow:0 5px 0 var(--rojo-hondo), var(--sombra-media)}
.boton--principal:hover{background:#B81F18}
.boton--azul{background:var(--azul); color:#fff; --ext:#141A5E; box-shadow:0 5px 0 var(--azul-hondo), var(--sombra-media)}
.boton--azul:hover{background:#252C92}
.boton--verde{background:var(--verde); color:#fff; --ext:#0C3407; box-shadow:0 5px 0 var(--verd-hondo), var(--sombra-media)}
.boton--verde:hover{background:#256717}
/* El botón hueco era un contorno flotando sobre el papel y se leía desvaído.
   Pasa a ser papel de verdad: el mismo canto de 5 px que las tarjetas y el
   boleto, y al pulsar se hunde contra él como los demás. */
.boton--hueco{
  background:var(--nube); color:var(--azul-hondo);
  box-shadow:inset 0 0 0 2px rgba(12,46,99,.16),
             0 5px 0 var(--canto-papel), var(--sombra-media);
}
.boton--hueco:hover{
  box-shadow:inset 0 0 0 2px rgba(12,46,99,.30),
             0 5px 0 var(--canto-papel), var(--sombra-media);
}
.boton--ancho{width:100%}
.boton[disabled]{opacity:.55; cursor:default; transform:none}

/* --- 7. Portada: la entrada del parque ----------------------------------
   La escena ocupa la ventana entera, sea cual sea su forma, y cambia de
   IMAGEN según la orientación: vertical en un teléfono de pie, ancha en
   cuanto la ventana es más ancha que alta (ver el apartado 16).

   Su reparto vertical lo hace una REJILLA de tres filas —aire, nombre,
   base— en lugar de una suma de porcentajes puesta a mano: así el solape es
   imposible por construcción. Antes, con posiciones absolutas, el nombre se
   montaba sobre el rótulo del arco a 1000, 1280 y 1440 px de ancho, y la
   rueda medía 257 px en un móvil y 1690 a 2560. Lo único que se topa a mano
   es el rótulo, que es un SVG y crecería con la ventana sin freno.
   -------------------------------------------------------------------------- */
.porton{
  position:fixed; inset:0; z-index:60;
  overflow:hidden;
  background:#8CC6EC;              /* el azul del cielo de la escena */
}
/* La escena es una rejilla de tres filas: aire, nombre y pie. Nada se coloca
   con posiciones absolutas contra la ventana, así que el bloque de texto no
   puede montarse sobre el botón por muy baja que sea la pantalla. */
.escena{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:1fr auto auto;
  transform-origin:50% 62%;        /* el vano del castillo: por ahí entra la cámara */
  will-change:transform,opacity;
}
.escena > picture{position:absolute; inset:0; z-index:0}
.escena__foto{width:100%; height:100%; object-fit:cover; object-position:50% 50%}

/* La bruma. El nombre necesita un fondo limpio y el castillo necesita quedar
   a la vista: el degradado se abre en el suelo del parque —el camino de
   adoquín, que ya es claro— y deja intacta la mitad de arriba. Va anclada al
   bloque de texto y no a un porcentaje de la ventana. */
.escena__aire{
  position:absolute; left:0; right:0; bottom:0; height:50%; z-index:1;
  background:linear-gradient(180deg,
    rgba(255,246,230,0) 0%, rgba(255,246,230,.5) 22%,
    rgba(255,246,230,.88) 44%, rgba(255,246,230,.98) 66%,
    var(--crema) 86%);
}
/* El grano de la bruma. Era la superficie más grande de la invitación y la
   única sin él: media pantalla de crema plana. Va en una capa aparte con una
   MÁSCARA que sigue la misma rampa que la bruma, así los puntos sólo existen
   donde el crema ya es macizo y no ensucian el castillo. */
.escena__aire::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%, rgba(30,36,120,.05) 0 .55px, transparent .55px);
  background-size:9px 9px;
  -webkit-mask-image:linear-gradient(180deg, transparent 40%, #000 72%);
          mask-image:linear-gradient(180deg, transparent 40%, #000 72%);
}

.porton__centro{
  grid-row:2; z-index:2; text-align:center;
  padding-inline:var(--canal);
  will-change:transform,opacity;
}
/* El rótulo de la portada es UN solo SVG con viewBox: el antetítulo curvado,
   el nombre en relieve y la pastilla de la edad escalan juntos y guardan la
   misma relación a cualquier ancho. No hay tamaños en vw que cuadrar uno por
   uno, que es de donde salían los solapes. `overflow:visible` deja salir la
   sombra del filtro sin recortarla. */
.porton__lockup{margin:0 auto; width:100%; max-width:min(100%,30rem)}
.porton__lockup svg{width:100%; height:auto; display:block; overflow:visible}

.porton__pie{
  grid-row:3; z-index:2; text-align:center;
  padding:1.1rem var(--canal) max(1.25rem, min(4vw,3rem), env(safe-area-inset-bottom));
  will-change:transform,opacity;
}
/* --- 7b. La ficha del salón, al pie de la portada ------------------------
   Deja de ser una línea suelta y pasa a decir las tres cosas que se preguntan
   antes de abrir nada: cuándo, dónde y cómo llegar.

   El nombre se compone letra a letra, cada una con su tono y su giro, porque
   el nombre dice «diverti» y una línea recta y monocroma lo desmiente. Los
   cinco tonos son los de la paleta del parque y TODOS pasan AA sobre la bruma
   crema —medidos—; el amarillo entra por su versión honda porque el vivo da
   1,85:1. Los giros son de 3 a 5 grados alternados: más se lee como un error
   de maqueta y menos no se nota.

   Para el lector de pantalla el nombre va UNA vez, en texto normal; las
   letras sueltas van marcadas como decoración, o se leerían deletreadas.
   -------------------------------------------------------------------------- */
/* El aire del pie va escrito pieza a pieza y no con un `gap` único: las
   cuatro no piden lo mismo. La fecha y el logotipo son una sola idea y van
   juntos; la dirección y el botón son otra cosa y necesitan separarse. */
.salon{margin-top:.5rem; display:grid; justify-items:center; gap:0}
/* El mismo filete que separa el rótulo del dato en una tarjeta: aquí separa
   la llamada de la ficha del sitio. */
.salon::before{
  content:''; width:3.5rem; height:2px; border-radius:2px;
  margin-bottom:var(--e3);
  background:linear-gradient(90deg, transparent, rgba(30,36,120,.26), transparent);
}
.salon__voz{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:.9375rem; letter-spacing:.07em; text-transform:uppercase;
  line-height:1.2; color:var(--azul-hondo);
}
/* La dirección en dos alturas: la calle es el dato que se copia y manda; la
   ciudad la enmarca en versalitas espaciadas. Va en la cara de TEXTO, no en la
   de titulares: Rosmie en minúscula corrida a 15 px cierra los contadores. */
.salon__calle{
  margin:.8rem 0 0; display:grid; justify-items:center; gap:.1rem;
  line-height:1.25; text-wrap:balance;
}
.salon__via{font-size:.9375rem; font-weight:800; color:var(--azul-hondo)}
.salon__ciudad{
  font-size:.6875rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#5B6486;
}
.marca{
  margin:.5rem 0 0; display:grid; justify-items:center; gap:.1em;
  font-family:var(--display); font-weight:800; line-height:1;
  font-size:clamp(1.6rem,6vw,2.35rem);
}
.marca__linea{display:flex; justify-content:center; align-items:center}
/* DIVERTI: la letra lleva su color y, por debajo, filete y extrusión del
   mismo tono hondo. Sobre la bruma crema un filete crema haría desaparecer el
   amarillo; con el filete oscuro la letra queda embordada y se lee. */
.marca__letras{letter-spacing:.005em}
.marca__letras span{display:inline-block; color:var(--tinta)}
/* CLUB: ficha girada con letra blanca. Las fichas se pisan un poco, como en
   el logotipo del salón, y llevan el mismo canto que las tarjetas del resto
   de la invitación. */
.marca__fichas{gap:0; margin-top:.06em}
.marca__ficha{
  display:grid; place-items:center;
  width:1.22em; height:1.22em; margin-inline:-.035em;
  border-radius:.24em;
  background:var(--ficha); color:var(--nube);
  rotate:var(--giro); transform-origin:50% 55%;
  box-shadow:0 0 0 .055em var(--crema), 0 .06em 0 var(--canto),
             0 .1em .16em rgba(30,36,120,.24);
  text-shadow:0 .035em 0 var(--canto);
}
/* --- 7c. Cómo llegar: un botón, tres apps -------------------------------
   En el teléfono de un invitado puede haber cualquiera de las tres, y tres
   botones en la portada competirían con «Abrir invitación». El menú se
   despliega hacia ARRIBA porque la portada recorta lo que se sale de ella.
   Los tres enlaces buscan la DIRECCIÓN en texto, no el nombre del negocio:
   ver el README.
   -------------------------------------------------------------------------- */
.rutas{position:relative; display:inline-block; margin-top:1.15rem}
.rutas__llave{gap:.45rem}
.rutas__flecha{transition:rotate var(--rapido) var(--salida)}
.rutas__llave[aria-expanded="true"] .rutas__flecha{rotate:180deg}
.rutas__menu{
  position:absolute; z-index:5;
  min-width:max(100%, 11.5rem);
  margin:0; padding:.3rem; list-style:none;
  background:var(--nube); border-radius:var(--r-m);
  box-shadow:0 5px 0 var(--canto-papel), var(--sombra-alta);
}
.rutas--arriba .rutas__menu{bottom:calc(100% + .7rem); left:50%; translate:-50% 0}
.rutas--abajo  .rutas__menu{top:calc(100% + .55rem);    left:50%; translate:-50% 0}
/* Las opciones son enlaces cuando abren una web y un botón cuando la acción
   ocurre aquí —la descarga del .ics—; las dos se ven igual. */
.rutas__menu a,
.rutas__menu button{
  display:flex; align-items:center; gap:.55rem;
  width:100%; min-height:var(--toque); padding:.5rem .8rem;
  border-radius:calc(var(--r-m) - .35rem);
  font-family:var(--display); font-weight:700; font-size:var(--t-s);
  color:var(--azul-hondo); text-decoration:none; text-align:start;
  transition:background-color var(--rapido) linear;
}
.rutas__menu a:hover,
.rutas__menu button:hover{background:var(--azul-hielo)}
.rutas__menu .icono{width:1.05rem; height:1.05rem; flex:none; opacity:.75}

/* La trampa del formulario y el nombre accesible del salón comparten receta:
   fuera de la vista pero no `display:none`, que sí lo esconde del lector. */
.oculto{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* --- 8. Cuenta regresiva ------------------------------------------------- */
.reloj{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--e2); margin-top:var(--e5);
}
.reloj__caja{
  background:var(--nube); border-radius:var(--r-m);
  padding:.7rem .25rem .55rem;
  box-shadow:var(--sombra-media);
  border-bottom:4px solid var(--paso,var(--azul));
  text-align:center;
}
.reloj__caja:nth-child(1){--paso:var(--rojo)}
.reloj__caja:nth-child(2){--paso:var(--amarillo)}
.reloj__caja:nth-child(3){--paso:var(--verde)}
.reloj__caja:nth-child(4){--paso:var(--morado)}
.reloj__num{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.6rem,8.5vw,2.4rem); line-height:1;
  color:var(--azul-hondo); font-variant-numeric:tabular-nums;
}
.reloj__voz{
  display:block; margin-top:.2rem;
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-suave);
}
.reloj--llegó{grid-template-columns:1fr}
.reloj--llegó .reloj__num{font-size:var(--t-xl)}


/* --- 8b. El boleto ------------------------------------------------------
   La fecha deja de ser texto centrado y pasa a ser lo que de verdad es: el
   boleto de entrada al parque. El troquel de los lados y la perforación son
   gradientes de paso fijo, sin una sola imagen. Aquí es donde el diseño se
   apoya en el contraste tipográfico: el 21 a 7rem contra rótulos de 11px con
   .22em de espaciado; entre ellos hay un salto de diez veces.
   -------------------------------------------------------------------------- */
/* El papel no es un plano de color: lleva un degradado templado —arriba más
   claro, abajo más tostado, como el papel apilado— y una trama de puntos al
   4 % que es lo que separa un boleto de un rectángulo crema. Van en el mismo
   `background`, sin una sola imagen. */
.boleto{
  position:relative;
  background-color:var(--crema);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(30,36,120,.045) 0 .55px, transparent .55px),
    linear-gradient(170deg, #FFFCF5 0%, var(--crema) 46%, #F8EAD0 100%);
  background-size:9px 9px, 100% 100%;
  border-radius:1.25rem;
  box-shadow:0 5px 0 var(--canto-papel),
             0 2px 3px rgba(30,36,120,.08), 0 1.25rem 2.5rem rgba(30,36,120,.16);
  overflow:hidden;
}

.boleto__cuerpo{padding:var(--e6) var(--e5) var(--e5); text-align:center}
.boleto__marca{
  font-family:var(--display); font-weight:700;
  font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rojo); opacity:.9;
}
.boleto__fecha{display:grid; justify-items:center; margin-top:var(--e4)}
.boleto__dia{
  font-family:var(--display); font-weight:700;
  font-size:1.0625rem; letter-spacing:.2em; text-transform:uppercase;
  color:#565C9E;
}
.boleto__num{
  font-family:var(--display); font-weight:800;
  font-size:7rem; line-height:.82; letter-spacing:-.045em;
  color:var(--azul-hondo);
  font-variant-numeric:lining-nums;
  margin-block:.25rem .125rem;
}
.boleto__mes{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:700;
  font-size:.8125rem; letter-spacing:.22em; text-transform:uppercase;
  color:#565C9E;
}
/* La pastilla del año se dibuja contra su propia CIFRA, no contra la caja de
   línea. Heredaba el interlineado 1,6 del cuerpo, así que medía 26 px para
   una cifra de 9,4: la caja quedaba desproporcionada y la cifra 2,3 px alta
   dentro de ella. Con `line-height:1` la caja la define el relleno, y el
   relleno se ajustó midiendo la TINTA, no la caja de avance.

   El `text-indent` compensa el interletrado: la última cifra arrastra su
   espacio de separación, y sin compensarlo el número queda medio espacio a la
   izquierda del centro. */
.boleto__mes i{
  font-style:normal;
  display:inline-block; line-height:1;
  padding:.46em .52em .38em;
  letter-spacing:.14em; text-indent:.14em;
  border-radius:.38em; background:var(--azul-hondo); color:var(--crema);
  box-shadow:0 2px 0 #0C1148;   /* el mismo canto que las tarjetas */
}
.boleto__hora{
  margin-top:var(--e2); font-family:var(--display); font-weight:700;
  font-size:var(--t-l); color:var(--rojo-hondo); letter-spacing:.01em;
}
.boleto__hora b{font-weight:800}
.boleto__hora span{opacity:.45; padding:0 .15rem; font-weight:700; text-shadow:none}

/* La perforación: agujeros troquelados, no una raya de puntos. Son dos capas
   del mismo paso desplazadas un píxel —la clara debajo de la oscura—, que es
   lo que da el relieve del troquel. Sin imágenes.

   Y las dos medias lunas cuelgan de AQUÍ, no de un `top:63%` puesto a ojo:
   así caen siempre en los extremos de la perforación, gire el boleto o no.
   Antes había que recalcular el porcentaje cada vez que cambiaba el
   contenido. */
.boleto__corte{
  position:relative;
  height:3px; margin-inline:1.35rem;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.95) 0 5px, transparent 5px 11px),
    repeating-linear-gradient(90deg, rgba(30,36,120,.30) 0 5px, transparent 5px 11px);
  background-size:100% 2px, 100% 2px;
  background-position:0 1px, 0 0;
  background-repeat:repeat-x;
}
.boleto__corte::before,.boleto__corte::after{
  content:''; position:absolute;
  width:1.5rem; height:1.5rem; border-radius:var(--r-full);
  background:var(--fondo-seccion,#CFE6F7);
}
.boleto__corte::before{top:50%; left:-1.35rem;  translate:-50% -50%}
.boleto__corte::after {top:50%; right:-1.35rem; translate: 50% -50%}

/* El filete grabado: se apaga en las dos puntas, así no parece pegado encima
   del papel sino impreso en él. */
.boleto__regla{
  height:1px; width:min(100%, 9.5rem);
  margin:.85rem auto;
  background:linear-gradient(90deg,
    transparent 0, rgba(30,36,120,.22) 16%, rgba(30,36,120,.22) 84%, transparent 100%);
}
/* El talón va un punto más tostado que el cuerpo. Es el gesto que distingue
   un boleto de dos columnas iguales: el papel del talón nunca es exactamente
   el del cuerpo. Va en un tinte cálido y no en gris, para no sacarlo de la
   familia crema. */
.boleto__talon{
  padding:var(--e5) var(--e5) var(--e6); text-align:center;
  background:linear-gradient(180deg, rgba(186,138,52,.06), rgba(186,138,52,.11));
}
/* La letra menuda del boleto: quién lo emite. Es lo que en un boleto de verdad
   va al pie del talón. */
.boleto__pie{
  margin-top:var(--e4);
  font-family:var(--display); font-weight:700;
  font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase;
  color:#555D7E;   /* 5,43:1 sobre el papel teñido del talón, medido */
}
.boleto__voz{
  font-family:var(--display); font-weight:700;
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--tinta-suave);
}
/* la cuenta regresiva deja de ser cuatro cajas: es una tira con separadores */
.boleto__talon .reloj{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; margin-top:var(--e3);
}
.boleto__talon .reloj__caja{
  background:none; box-shadow:none; border:0; padding:0; border-radius:0;
  background-image:linear-gradient(180deg,
    transparent 0, rgba(30,36,120,.20) 22%, rgba(30,36,120,.20) 78%, transparent 100%);
  background-size:1px 100%; background-position:100% 0; background-repeat:no-repeat;
}
.boleto__talon .reloj__caja:last-child{background-image:none}
.boleto__talon .reloj__num{
  font-size:1.875rem; line-height:1; color:var(--azul-hondo);
  font-variant-numeric:tabular-nums lining-nums;
}
.boleto__talon .reloj__voz{
  margin-top:.2rem; font-size:.5625rem; letter-spacing:.16em;
  color:var(--tinta-suave); font-weight:700;
}
.boleto__talon .reloj--llegó{grid-template-columns:1fr}

/* --- 9. Tarjetas de dato -------------------------------------------------
   Mismo criterio que el boleto: lo que levanta una tarjeta no es adorno, es
   que tenga las partes que tiene una ficha de verdad —papel, un filete que
   separa el rótulo del dato, y una jerarquía de lectura—.

   La tarjeta tiene CANTO, como los botones: 5 px del color del papel hundido.
   Con 7 deja de leerse como una tarjeta y parece una pila.
   -------------------------------------------------------------------------- */
.dato{
  display:grid; grid-template-columns:auto 1fr; gap:var(--e4);
  align-items:start;
  border-radius:var(--r-l);
  padding:var(--e5);
  /* El papel: el mismo lenguaje del boleto —degradado templado y grano fino—,
     a la mitad de intensidad porque aquí el papel es blanco y no crema. */
  background-color:var(--nube);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(30,36,120,.028) 0 .55px, transparent .55px),
    linear-gradient(172deg, #FFFFFF 0%, #FFFDF8 52%, #FBF4E8 100%);
  background-size:9px 9px, 100% 100%;
  box-shadow:0 5px 0 var(--canto-papel), var(--sombra-media);
  --filete:var(--nube);
}
/* El disco del icono deja de ser una mancha plana: lleva un degradado que
   aclara por arriba, así se lee como una ficha con volumen y no como un
   círculo de color. */
.dato__marca{
  display:grid; place-items:center;
  width:2.75rem; height:2.75rem; border-radius:var(--r-full);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 62%),
    var(--tono-claro,var(--azul-palido));
  color:var(--tono,var(--azul-hondo));
  box-shadow:0 3px 0 var(--tono-canto,#8FB0E4), inset 0 0 0 1px rgba(255,255,255,.4);
}
.dato__marca .icono{width:1.5rem; height:1.5rem}
/* El rótulo se separa del dato con un filete corto del color de la tarjeta,
   que se apaga hacia la derecha: el mismo gesto que los filetes del boleto. */
.dato__voz{
  position:relative;
  font-family:var(--display); font-weight:700; font-size:var(--t-s);
  letter-spacing:.1em; text-transform:uppercase; color:var(--tono,var(--azul-hondo));
  padding-bottom:.5rem; margin-bottom:.5rem;
}
.dato__voz::after{
  content:''; position:absolute; left:0; bottom:0;
  width:2.75rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--tono,var(--azul-hondo)), transparent);
}
/* Dos alturas de lectura: la clave es el dato que se busca, el cuerpo lo
   acompaña. Antes iban las dos en el mismo cuerpo con un <strong>. */
.dato__clave{
  font-size:1.125rem; font-weight:800; line-height:1.3;
  color:var(--azul-hondo); text-wrap:pretty;
}
.dato__cuerpo{font-size:var(--t-m); line-height:1.5; color:var(--tinta-suave)}
.dato__cuerpo strong{font-weight:800}
.dato__clave + .dato__cuerpo{margin-top:.35rem}
.dato p + p{margin-top:.3rem}
.dato--azul{--tono:var(--azul-hondo); --tono-claro:var(--azul-palido); --tono-canto:#8FB0E4; --ext:#111A5C}
.dato--amar{--tono:var(--amar-hondo); --tono-claro:var(--amar-claro); --tono-canto:#F0C24A; --ext:#5C3C00}
.dato--mora{--tono:var(--mora-hondo); --tono-claro:#D8CCF2; --tono-canto:#AE99DD; --ext:#3E2A80}
/* El disco morado era el más oscuro de los cuatro —claridad 0,304 contra
   0,63-0,76 de los otros— y el icono encima daba 2,31:1, por debajo del 3:1
   que pide un gráfico con significado. Aclarado a la claridad de sus
   hermanos da 4,52:1. */
.dato--verd{--tono:var(--verd-hondo); --tono-claro:var(--verd-claro); --tono-canto:#6BC888; --ext:#12400B}

/* --- 10. Mundos: el recorrido por dentro del parque ----------------------
   Cada mundo es una caseta de feria: toldo a rayas con festón, la ilustración
   como escaparate y una medalla con el número de parada. El toldo y el festón
   se dibujan con gradientes de paso FIJO en píxeles, igual que la reja del
   portón: la raya mide lo mismo en un móvil que en pantalla grande.
   -------------------------------------------------------------------------- */
#mundos{
  position:relative; overflow:hidden;
  padding-block:var(--e8) var(--e6);
  background:linear-gradient(180deg, var(--crema) 0%, #FFF1DC 52%, #F8E9CE 100%);
}
#mundos > .medida{position:relative; z-index:2}

.mundos__pista{
  position:relative; z-index:2;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:min(78vw,20rem);
  gap:var(--e5);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--canal);
  padding:var(--e3) var(--canal) var(--e6);
  margin-inline:calc(var(--canal) * -1);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.mundos__pista::-webkit-scrollbar{display:none}

.mundo{
  position:relative; z-index:1;
  scroll-snap-align:center;
  display:grid; grid-template-rows:auto auto 1fr;
  filter:drop-shadow(0 10px 18px rgba(80,58,20,.16)) drop-shadow(0 2px 3px rgba(80,58,20,.12));
}

/* toldo: rayas de paso fijo y festón de medios círculos, todo en gradientes */
.mundo__toldo{
  height:1.75rem;
  border-radius:var(--r-l) var(--r-l) 0 0;
  background-image:
    radial-gradient(circle 9px at 9px 0, var(--toldo) 98%, transparent 100%),
    repeating-linear-gradient(90deg, var(--toldo) 0 18px, var(--toldo-claro) 18px 36px);
  background-size:18px 9px, 100% calc(100% - 9px);
  background-position:0 100%, 0 0;
  background-repeat:repeat-x, no-repeat;
}
/* La lona no es un plano de color: coge luz en el doblez de arriba y se apaga
   contra el festón. Era la única pieza del diseño sin volumen, con todo lo
   demás llevando canto. El degradado cubre SÓLO la franja de rayas —no el
   festón—, porque entre sus medios círculos se ve la escena y oscurecerla
   metería una sombra donde no hay tela. */
.mundo__toldo::after{
  content:''; display:block; height:calc(100% - 9px);
  border-radius:var(--r-l) var(--r-l) 0 0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.34) 0%, rgba(255,255,255,.07) 38%,
    rgba(0,0,0,.05) 72%, rgba(0,0,0,.14) 100%);
}

.mundo__lamina{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--lamina-cielo)}
/* La escena está METIDA en la caseta: el toldo le echa sombra por arriba y un
   filo finísimo la encaja. Va en un pseudoelemento y no en `inset box-shadow`
   porque la imagen es un hijo y se pintaría encima de la sombra. */
.mundo__lamina::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(40,26,8,.30) 0%, rgba(40,26,8,0) 9%);
  box-shadow:inset 0 0 0 1px rgba(40,26,8,.12);
}

.mundo__texto{
  position:relative;
  /* el mismo papel de las tarjetas de datos */
  background-color:var(--nube);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(30,36,120,.028) 0 .55px, transparent .55px),
    linear-gradient(172deg, #FFFFFF 0%, #FFFDF8 52%, #FBF4E8 100%);
  background-size:9px 9px, 100% 100%;
  border-radius:0 0 var(--r-l) var(--r-l);
  padding:var(--e6) var(--e5) var(--e6);
  text-align:center;
  box-shadow:0 5px 0 var(--canto-papel);
}
/* la medalla del número de parada, a caballo entre la lámina y el panel */
.mundo__parada{
  position:absolute; left:50%; top:0; translate:-50% -50%;
  display:grid; place-items:center;
  width:2.5rem; height:2.5rem; border-radius:var(--r-full);
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 56%),
    var(--toldo);
  color:#fff;
  font-family:var(--display); font-weight:800; font-size:var(--t-l); line-height:1;
  box-shadow:0 0 0 5px var(--nube), 0 4px 9px rgba(80,58,20,.26),
             inset 0 -2px 0 rgba(0,0,0,.16);
}
.mundo__nombre{
  font-family:var(--display); font-weight:800; font-size:var(--t-l);
  line-height:1.1; color:var(--sello,var(--azul-hondo)); margin-bottom:0;
}
.mundo__nombre::after{
  content:''; display:block;
  width:3.25rem; height:2px; border-radius:2px;
  margin:.55rem auto .65rem;
  background:linear-gradient(90deg,
    transparent 0, var(--sello,var(--azul-hondo)) 20%,
    var(--sello,var(--azul-hondo)) 80%, transparent 100%);
}
.mundo__linea{
  font-size:var(--t-s); color:var(--tinta-suave); line-height:1.55;
  text-wrap:pretty; max-width:26ch; margin-inline:auto;
}

/* las paradas del recorrido, cada una con el color de su mundo */
.mundos__pasos{
  position:relative; z-index:2;
  display:flex; gap:.625rem; justify-content:center; align-items:center;
  margin-top:var(--e2);
}
.mundos__paso{
  width:.5625rem; height:.5625rem; border-radius:var(--r-full);
  background:rgba(140,104,52,.3);
  box-shadow:0 0 0 0 rgba(255,255,255,0);
  transition:background-color var(--rapido) linear, transform var(--rapido) var(--salida),
             box-shadow var(--rapido) var(--salida);
}
.mundos__paso:nth-child(1){--sello-paso:#D89710}
.mundos__paso:nth-child(2){--sello-paso:#7F51C1}
.mundos__paso:nth-child(3){--sello-paso:#313BB9}
.mundos__paso[aria-current="true"]{
  background:var(--sello-paso); transform:scale(1.5);
  box-shadow:0 0 0 4px rgba(255,255,255,.6);
}


/* --- 10b. Láminas de los mundos ------------------------------------------
   Cada mundo entra por su escena, servida en tres anchos y tres formatos. El
   color de fondo de la caseta se toma del propio render, así que mientras la
   imagen carga el hueco ya tiene el color que va a tener después: no hay
   destello blanco ni salto de maqueta, porque el alto lo fija aspect-ratio.
   -------------------------------------------------------------------------- */
.lamina{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  display:block;
}
.mundo--juguetes{
  --lamina-cielo:#8FC9EE;
  --sello:var(--amar-hondo); --toldo:#D89710; --toldo-claro:#FEC400;
}
.mundo--monstruos{
  --lamina-cielo:#6E5AA8;
  --sello:var(--mora-hondo); --toldo:#6246B5; --toldo-claro:#8F68C9;
}
.mundo--carreras{
  --lamina-cielo:#7FC0EA;
  --sello:var(--azul-hondo); --toldo:#313BB9; --toldo-claro:#5762C5;
}

/* --- 11. Formulario ------------------------------------------------------
   La anatomía de un formulario es la INVERSA de la de una tarjeta: una tarjeta
   sobresale y lleva canto por abajo; un campo se hunde, porque es un hueco en
   el que se escribe. Todo el resto de la invitación tiene canto; sin esto los
   campos eran los únicos rectángulos planos de la página.
   -------------------------------------------------------------------------- */
.forma{display:grid; gap:var(--e5)}
.campo{display:grid; gap:.4rem}
/* Adultos y niños son un par: van juntos y se reparten en dos columnas en
   cuanto caben. `auto-fit` contra el ancho mínimo del control decide solo, sin
   media query: en la hoja de escritorio caben dos, en un móvil de 390 no. */
.forma__par{
  display:grid; gap:var(--e5) var(--e5);
  grid-template-columns:repeat(auto-fit, minmax(10.25rem, 1fr));
}
.campo__voz{
  font-family:var(--display); font-weight:700; font-size:var(--t-s);
  letter-spacing:.06em; text-transform:uppercase; color:var(--verd-hondo);
}
.campo__pista{font-size:var(--t-xs); color:var(--tinta-suave)}
.campo input{
  width:100%; min-height:var(--toque);
  padding:.7rem .9rem;
  border:2px solid rgba(17,96,45,.22); border-radius:var(--r-m);
  background:var(--nube);
  box-shadow:inset 0 3px 4px rgba(17,96,45,.10);   /* el hueco */
  font-size:var(--t-m);
  transition:border-color var(--rapido) linear, box-shadow var(--rapido) linear;
}
.campo input::placeholder{color:#8E938A}
.campo input:focus{
  border-color:var(--verde); outline:none;
  box-shadow:0 0 0 4px rgba(25,128,60,.16), inset 0 3px 4px rgba(17,96,45,.10);
}
.campo[data-mal="si"] input{
  border-color:var(--rojo-hondo);
  box-shadow:0 0 0 4px rgba(166,31,23,.14), inset 0 3px 4px rgba(166,31,23,.10);
}
.campo__error{font-size:var(--t-xs); font-weight:700; color:var(--rojo-hondo)}

/* El contador deja de ocupar todo el ancho: con un solo dígito dentro, una
   caja de 250 px se lee como un error de maqueta. Compacto, los tres se leen
   como UN control. */
.paso{
  display:grid; align-items:center; justify-content:start; gap:.35rem;
  grid-template-columns:var(--toque) minmax(3.25rem,6rem) var(--toque);
}
/* Los botones del contador SÍ sobresalen —son botones— con el mismo canto que
   los demás, y al pulsar se hunden contra él. */
.paso__boton{
  width:var(--toque); height:var(--toque);
  display:grid; place-items:center;
  border-radius:var(--r-full); background:var(--verd-claro); color:var(--verd-hondo);
  box-shadow:inset 0 0 0 2px rgba(17,96,45,.2), 0 3px 0 #71B860;
  transition:background-color var(--rapido) linear, transform var(--rapido) var(--salida),
             box-shadow var(--rapido) var(--salida);
}
.paso__boton:hover{background:#9BD888}
.paso__boton:active{
  transform:translateY(2px);
  box-shadow:inset 0 0 0 2px rgba(17,96,45,.2), 0 1px 0 #71B860;
}
.paso__boton svg{width:1.1rem; height:1.1rem}
.paso input{
  text-align:center; font-family:var(--display); font-weight:800;
  font-size:var(--t-l); font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.paso input::-webkit-outer-spin-button,
.paso input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* Trampa para autómatas: fuera de la vista pero no display:none */
.trampa{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.limite{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:var(--r-full);
  background:var(--amar-claro); color:var(--amar-hondo);
  font-family:var(--display); font-weight:700; font-size:var(--t-s);
  box-shadow:0 3px 0 #F0C24A, var(--sombra-baja);   /* su canto, como todo lo demás */
}
.limite svg{width:1.05rem; height:1.05rem; flex:none}

/* --- 12. Resultado del envío -------------------------------------------- */
.resultado{display:grid; gap:var(--e5); justify-items:center; text-align:center}
.resultado__titulo{font-family:var(--display); font-weight:800; font-size:var(--t-xl); line-height:1.1}
.resultado__nota{font-size:var(--t-s); color:var(--tinta-suave); max-width:32ch}
.palomita{width:5.5rem; height:5.5rem}
.palomita__disco{transform-origin:center; transform-box:fill-box}
.palomita__marca{transform-origin:center; transform-box:fill-box}
.aviso{
  display:grid; gap:var(--e3); justify-items:center;
  padding:var(--e5); border-radius:var(--r-l);
  background:#FFEFEC; box-shadow:inset 0 0 0 2px rgba(166,31,23,.2);
  text-align:center;
}
.aviso__titulo{font-family:var(--display); font-weight:800; color:var(--rojo-hondo); font-size:var(--t-l)}
.aviso__cuerpo{font-size:var(--t-s); color:var(--tinta-suave)}
.cargando{position:relative; color:transparent!important}
.cargando::after{
  content:''; position:absolute; inset:0; margin:auto;
  width:1.25rem; height:1.25rem; border-radius:var(--r-full);
  border:3px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:girar 720ms linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* --- 13. Secciones ------------------------------------------------------- */
.pagina{position:relative; z-index:1}

/* El troquel del boleto se punza con el color del apartado. Con un degradado
   de punta a punta ese color depende de lo alto que acabe siendo la sección:
   al pasar el boleto a horizontal en escritorio, la media luna de abajo caía
   ya sobre crema y se veía un bulto azul. Así que el apartado es PLANO donde
   vive el boleto y sólo se funde en sus dos bordes, con alturas FIJAS
   —5 rem— siempre menores que el relleno de 6 rem: la media luna nunca puede
   alcanzarlas, mida lo que mida el boleto. */
#cuando{
  --fondo-seccion:#CFE6F7;
  position:relative;
  background:var(--fondo-seccion);
  padding-block:calc(var(--e9) + env(safe-area-inset-top)) var(--e9);
  overflow:hidden;
}
#cuando::before,#cuando::after{
  content:''; position:absolute; left:0; right:0; z-index:0; height:5rem; pointer-events:none;
}
#cuando::before{top:0;    background:linear-gradient(180deg,var(--azul-palido) 0%, rgba(207,230,247,0) 100%)}
#cuando::after {bottom:0; background:linear-gradient(180deg,rgba(207,230,247,0) 0%, var(--crema) 100%)}
#cuando .medida{position:relative; z-index:2}
/* Los banderines no se vuelven a dibujar: son el mismo trozo de la escena de
   la portada, recortado. Así el objeto es literalmente el mismo al bajar. */
.cuando__banderines{position:absolute; left:0; right:0; top:0; height:min(23vw,7rem); pointer-events:none; z-index:1}
/* El pie de la tira se disuelve con una máscara y no con un velo de color:
   el fondo del apartado es un degradado, así que cualquier color fijo dejaría
   una raya. Con máscara, la tira se apaga sobre lo que haya debajo, sea lo
   que sea. */
.cuando__banderines img{
  width:100%; height:100%; object-fit:cover; object-position:50% 0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,0) 100%);
}
/* La fecha en tres alturas: el número manda y las palabras lo enmarcan.
   Resuelve de raíz el reparto de "Sábado 21 de noviembre de 2026" a 390 px. */
.fecha{display:grid; justify-items:center; gap:.1rem; color:var(--azul-hondo)}
.fecha__dia,.fecha__mes{
  font-family:var(--display); font-weight:700;
  font-size:var(--t-l); line-height:1.1; letter-spacing:.16em;
  text-transform:uppercase;
}
.fecha__dia{font-size:var(--t-m); opacity:.9}
.fecha__num{
  font-family:var(--display); font-weight:800;
  font-size:clamp(4.5rem,26vw,7rem); line-height:.86;
  letter-spacing:-.03em; font-variant-numeric:lining-nums;
}
.fecha__mes{font-size:var(--t-s); letter-spacing:.2em; opacity:.9}
.cuando__hora{
  margin-top:var(--e4); font-family:var(--display); font-weight:700;
  font-size:var(--t-l); color:var(--rojo-hondo);
}

#donde{
  position:relative; overflow:hidden;
  background-color:var(--crema-hondo);
  /* el mismo grano del resto de superficies: era el último campo de color
     plano que quedaba */
  background-image:radial-gradient(circle at 50% 50%, rgba(30,36,120,.035) 0 .55px, transparent .55px);
  background-size:9px 9px;
  /* El filete del relieve es el color del PAPEL del apartado: si el papel
     cambia y el filete no, el anillo se ve como un halo claro alrededor del
     titular. Iba en crema mientras el fondo ya era más tostado. */
  --filete:var(--crema-hondo);
  /* y el canto de las tarjetas baja con él, o sobre el papel nuevo se pierde */
  --canto-papel:#D8C295;
}
#donde .medida{position:relative; z-index:2}

#confirmar{
  --banda:min(64vw,19rem);
  position:relative; overflow:hidden;
  /* el verde se mantiene plano mientras dura la banda, por lo mismo que en el
     cierre: si el degradado arrancara arriba, los dos lados de la costura
     serían colores distintos */
  background:linear-gradient(180deg,
    #1B4E12 0%, #1B4E12 var(--banda),
    var(--verd-hondo) calc(var(--banda) + 12rem), #2E7A1E 100%);
  color:var(--crema);
  padding-block:calc(var(--banda) + var(--e6)) calc(var(--e9) + var(--e6));
}

/* La ventanilla del parque: es literalmente donde se pide el lugar, así que
   encabeza el apartado en el que se confirma. Misma receta que el cierre:
   máscara arriba para que emerja del verde y velo abajo para que el texto se
   apoye en color plano. */
.taquilla{
  position:absolute; left:0; right:0; top:0;
  height:var(--banda); z-index:0; pointer-events:none;
}
.taquilla__foto{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 16%,#000 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 16%,#000 100%);
}
.taquilla::after{
  content:''; position:absolute; inset:0 0 -2px 0;
  background:linear-gradient(180deg,
    rgba(27,78,18,0) 0%, rgba(27,78,18,0) 42%,
    rgba(27,78,18,.34) 68%, rgba(27,78,18,.88) 88%, #1B4E12 100%);
}
#confirmar .seccion__titulo{color:var(--nube)}
#confirmar .seccion__entrada{color:#DFF2D6}
.confirmar__hoja{
  color:var(--tinta);
  /* El mismo papel del boleto: degradado templado y grano fino. Era la única
     superficie de crema plana que quedaba. */
  background-color:var(--crema);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(30,36,120,.04) 0 .55px, transparent .55px),
    linear-gradient(172deg, #FFFCF5 0%, var(--crema) 48%, #F8EAD0 100%);
  background-size:9px 9px, 100% 100%;
  border-radius:var(--r-l); padding:var(--e6) var(--e5);
  box-shadow:0 5px 0 #D8BE8E, var(--sombra-alta);
  margin-top:var(--e6);
}
#cierre{
  --banda:min(56vw,17rem);
  position:relative; overflow:hidden;
  /* El azul se mantiene plano mientras dura la banda de la escena y sólo
     después empieza a aclararse: si el degradado arrancara en el 0 %, el
     velo de la foto acabaría en un azul distinto del que hay debajo y se
     vería una raya horizontal a lo ancho de la pantalla. */
  background:linear-gradient(180deg,
    #171C5C 0%, #171C5C var(--banda),
    var(--azul-hondo) calc(var(--banda) + 14rem), #2A3290 100%);
  color:var(--crema);
  padding-block:calc(var(--banda) + var(--e6)) calc(var(--e7) + env(safe-area-inset-bottom));
  text-align:center;
}

/* Los globos se van. La escena ocupa la cabecera del apartado y se hunde en
   el azul por un degradado que arranca transparente: el cielo del render y el
   fondo del apartado acaban en el mismo azul, así que la costura no se ve. El
   alto va en min(vw,rem) y sube por tramos, para que no quede en un recorte
   de dos dedos en escritorio ni se coma la pantalla en un móvil. */
.cierre__cielo{
  position:absolute; left:0; right:0; top:0;
  height:var(--banda); z-index:0; pointer-events:none;
}
/* La banda se enciende desde el azul: sin la máscara, el cielo claro del
   render chocaría de golpe con el verde del apartado anterior. */
.cierre__foto{
  width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 18%,#000 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 18%,#000 100%);
}
.cierre__cielo::after{
  /* dos píxeles por debajo del borde: el alto de la banda es fraccionario y
     la última fila dejaba asomar la foto como una raya clara */
  content:''; position:absolute; inset:0 0 -2px 0;
  /* Medido en una columna de píxeles: con .26/.8 el velo llegaba al azul
     macizo 100 px antes de acabar la banda, así que ese tramo era navy liso y
     los globos se perdían. Con estos valores la escena vive hasta abajo y la
     costura sigue sin verse. */
  background:linear-gradient(180deg,
    rgba(23,28,92,0) 0%, rgba(23,28,92,.18) 48%,
    rgba(23,28,92,.66) 80%, #171C5C 100%);
}
#cierre .medida{position:relative; z-index:2}
.cierre__titulo{font-family:var(--display); font-weight:800; font-size:var(--t-2xl); line-height:1.06; color:var(--nube); text-wrap:balance}
.cierre__cuerpo{margin-top:var(--e5); color:#D5E6FA; text-wrap:pretty}
/* La firma es el cierre: se separa del mensaje con un filete de su propio
   color, el mismo gesto que el rótulo de una tarjeta o el nombre de un mundo. */
.cierre__firma{
  margin-top:var(--e6); font-family:var(--display); font-weight:700;
  font-size:var(--t-l); color:var(--amarillo);
}
.cierre__firma::before{
  content:''; display:block;
  width:3.5rem; height:2px; border-radius:2px;
  margin:0 auto var(--e5);
  background:linear-gradient(90deg, transparent, rgba(254,189,54,.55), transparent);
}
/* El colofón: de qué es esto arriba, cuándo y dónde abajo. */
.cierre__pie{
  margin-top:var(--e7);
  display:grid; justify-items:center; gap:.35rem;
}
.cierre__pie::before{
  content:''; width:3.5rem; height:2px; border-radius:2px;
  margin-bottom:var(--e4);
  background:linear-gradient(90deg, transparent, rgba(213,230,250,.32), transparent);
}
.cierre__acto{
  font-family:var(--display); font-weight:700; font-size:.6875rem;
  letter-spacing:.24em; text-transform:uppercase; color:#B9CDEE;
}
.cierre__sitio{font-size:var(--t-xs); color:#9FB2D8; text-wrap:balance}


/* --- 13b. Ilustración de las secciones restantes -------------------------
   Los datos cierran con la taquilla y el antifaz apoyados en un suelo de
   feria; la confirmación lleva los boletos, que es la metáfora de lo que se
   está haciendo; y el cierre es el parque de noche con las atracciones
   encendidas, no una silueta plana.
   -------------------------------------------------------------------------- */
#donde{padding-block:var(--e8) var(--e9)}

/* --- 14. Lienzo del confeti --------------------------------------------- */
.confeti{position:fixed; inset:0; z-index:70; pointer-events:none}

/* --- 15. Movimiento ----------------------------------------------------- */
.entra{opacity:0; transform:translateY(18px)}
.entra--visible{
  animation:asomar var(--lento) var(--salida) forwards;
  animation-delay:var(--retardo,0ms);
}
@keyframes asomar{to{opacity:1; transform:none}}

.gira-lento{animation:girar 34s linear infinite; transform-origin:center; transform-box:fill-box}
.ondea{animation:ondear 5.5s ease-in-out infinite; transform-origin:top center; transform-box:fill-box}
@keyframes ondear{
  0%,100%{transform:rotate(-1.6deg) translateY(0)}
  50%{transform:rotate(1.6deg) translateY(2px)}
}
.parpadea{animation:parpadear 2.6s ease-in-out infinite}
@keyframes parpadear{0%,100%{opacity:1}50%{opacity:.42}}
.deriva{animation:derivar var(--dur,44s) linear infinite; animation-delay:var(--fase,0s)}
@keyframes derivar{
  from{transform:translateX(-14%)}
  to{transform:translateX(14%)}
}
/* El parallax lo alimenta el guion con --y; el CSS sólo lo aplica. */
.aleja{transform:translate3d(0,calc(var(--y,0) * var(--fuerza,.16) * 1px),0)}

body[data-abierto="no"]{overflow:hidden}
body[data-abierto="no"] .pagina{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .entra{opacity:1; transform:none}
  .aleja{transform:none!important}
}

/* --- 16. La invitación se ADAPTA --------------------------------------
   Aquí no hay marco de teléfono. La composición de móvil es la base y a
   partir de dos topes —48 rem para tableta y apaisado, 64 rem para
   escritorio— se recompone de verdad: la portada cambia de ESCENA, el
   boleto se gira, el recorrido deja de ser carrusel y pasa a rejilla, los
   datos van a dos columnas y el formulario se pone al lado de su texto.

   Los topes van en rem y no en píxeles: si alguien agranda la letra del
   sistema, la maqueta cambia cuando el texto lo pide, no cuando el cristal
   lo dice.
   -------------------------------------------------------------------------- */

/* Bloques de texto dentro de un contenedor ancho: la MEDIDA manda igual.
   Ensanchar el contenedor no puede ensanchar la columna de lectura. */
.bloque-texto{max-width:var(--medida); margin-inline:auto}
.pila--datos,
.mapas{max-width:var(--medida); margin-inline:auto}
.mapas{display:grid; gap:var(--e3); margin-top:var(--e5)}
.confirmar__reja > *{max-width:var(--medida); margin-inline:auto}

/* --- 16a. La portada en apaisado ---------------------------------------
   La escena ancha ya entra por `<picture>`; lo que cambia aquí es el reparto.
   El rótulo es un SVG y crecería sin freno, así que se topa por ancho Y por
   alto: en un portátil bajo el bloque entero cabía justo, y con el tope de
   alto se estrecha en vez de empujar el botón fuera de la pantalla. */
@media (orientation:landscape){
  .escena__aire{height:64%}
  .porton__lockup{max-width:min(36rem,58dvh)}
}

/* --- 16a-bis. El rótulo contra el castillo ------------------------------
   MEDIDO: en escritorio la escena ancha casi nunca se recorta en vertical
   —su proporción, 1,776, es más ancha que la de cualquier ventana normal—,
   así que la base del castillo cae SIEMPRE en el 62 % del alto de la
   ventana. El rótulo, en cambio, cuelga del bloque de abajo, cuyo alto es
   casi constante en píxeles: iba del 42 % en una ventana de 700 px al 68 %
   en una de 1440, y ahí «Brasil» quedaba ya por DEBAJO de la base del
   castillo, sobre el suelo en vez de contra la fachada.

   Se ata haciendo que el rótulo crezca con el ALTO de la ventana, no con el
   ancho. La recta se despeja fijando el TAMAÑO del rótulo en la ventana de
   referencia —36 % del ancho a 1440x900, que es la presencia con la que se
   diseñó la portada— y dejando que la separación caiga donde caiga: sale
   constante, 168 px, en todas las formas de ventana.

   Al revés no sirve: fijar la separación en 130 dejaba el rótulo en el 26 %
   del ancho a 1280x800 y la portada perdía su pieza principal. Lo que hay
   que garantizar es que «Brasil» quede SIEMPRE por encima de la base del
   castillo —antes caía 88 px por debajo a 2560x1440—, no un número exacto.

   LA CONSTANTE LLEVA DENTRO EL ALTO DEL PIE (356 px a 1440x900). Al crecer
   el pie 38 px, la separación se movió en TODAS las ventanas a la vez: el
   mecanismo sigue bien, lo que caduca es el número. Se vuelve a despejar y se
   comprueba con la sonda del castillo.
   -------------------------------------------------------------------------- */
@media (orientation:landscape) and (min-height:36rem){
  .porton__lockup{max-width:min(90vw, clamp(20rem, calc(122.74dvh - 36.94rem), 76rem))}
}
/* Teléfono acostado: apaisado Y bajo. El pie ya no es una línea —lleva fecha,
   salón, dirección y botón—, y ahí el alto es el recurso escaso: sin apretarlo
   se salía 19 px por abajo. El tope de 36 rem separa el teléfono acostado del
   portátil, que tiene alto de sobra y no debe encoger. */
@media (orientation:landscape) and (max-height:36rem){
  .porton__lockup{max-width:min(36rem,44dvh)}
  .porton__pie{padding-top:.5rem}
  .salon{margin-top:.4rem}
  .marca{font-size:min(1.9rem,6.6dvh); margin-top:.15rem}
  .salon__calle{margin-top:.3rem}
  .rutas{margin-top:.5rem}
}

/* --- 16b. Tableta y apaisado: 48 rem ------------------------------------ */
@media (min-width:48rem){
  :root{--canal:2rem; --t-2xl:2.75rem}

  /* 26 ch es la medida de una columna de móvil: con ancho, la entradilla se
     partía en dos líneas sin necesidad. */
  .seccion__entrada{max-width:44ch}

  /* La tira de banderines es la del render ANCHO: estirar la vertical a lo
     largo de una pantalla de escritorio la dejaba en un zoom borroso. */
  .cuando__banderines{height:clamp(7rem, 12vw, 11rem)}

  /* El boleto se gira: cuerpo y talón dejan de estar uno encima del otro y
     pasan a estar uno al lado del otro, con la perforación vertical entre
     ellos. Es la forma que tiene un boleto de verdad cuando hay sitio. */
  #cuando .medida{max-width:42rem}
  /* Ahora las dos mitades pesan parecido —fecha contra hora y cuenta atrás—,
     así que el corte vuelve al medio y no hace falta ningún porcentaje a ojo:
     las medias lunas cuelgan de la propia perforación. */
  .boleto{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
  }
  .boleto__cuerpo{padding:var(--e6) var(--e5)}
  /* `align-items:center` en el boleto deja a la perforación con altura 0
     —no tiene contenido—: se estira a mano. */
  .boleto__corte{
    width:3px; height:auto; align-self:stretch;
    margin:var(--e5) 0; margin-inline:0;
    background-image:
      repeating-linear-gradient(180deg, rgba(255,255,255,.95) 0 5px, transparent 5px 11px),
      repeating-linear-gradient(180deg, rgba(30,36,120,.30) 0 5px, transparent 5px 11px);
    background-size:2px 100%, 2px 100%;
    background-position:1px 0, 0 0;
    background-repeat:repeat-y;
  }
  /* las medias lunas, ahora en los extremos de la perforación */
  .boleto__corte::before,.boleto__corte::after{left:50%; right:auto}
  .boleto__corte::before{top:calc(-1 * var(--e5)); translate:-50% -50%}
  .boleto__corte::after {top:auto; bottom:calc(-1 * var(--e5)); translate:-50% 50%}
  /* El talón crece para no quedar flotando en su mitad: con las cifras a
     1,75 rem el lado derecho era casi todo aire. */
  .boleto__talon{
    padding:var(--e5);
    background:linear-gradient(90deg, rgba(186,138,52,.06), rgba(186,138,52,.11));
  }
  .boleto__voz{font-size:.6875rem}
  .boleto__talon .reloj{margin-top:var(--e4)}
  .boleto__talon .reloj__num{font-size:2rem}
  .boleto__talon .reloj__voz{font-size:.625rem; letter-spacing:.18em}

  /* El recorrido deja de ser carrusel: los tres mundos caben a la vez, así
     que se ven a la vez. Con ellos a la vista, las paradas sobran. */
  .mundos__pista{
    grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-columns:auto; gap:var(--e5);
    overflow:visible; scroll-snap-type:none;
    margin-inline:0; padding:var(--e3) 0 var(--e6);
  }
  .mundo{scroll-snap-align:none}
  .mundos__pasos{display:none}

  /* Los datos a dos columnas; el de vestimenta, que lleva más texto, ocupa
     la fila entera en vez de dejar un hueco al lado. */
  .pila--datos{max-width:none; grid-template-columns:repeat(2,minmax(0,1fr))}
  .pila--datos > :nth-child(3){grid-column:1 / -1}
  .mapas{max-width:none; grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Las bandas de escena son franjas a lo ancho de la ventana: con el alto
     de móvil quedaban en un recorte de dos dedos. */
  #confirmar{--banda:min(34vw,22rem)}
  #cierre{--banda:min(30vw,20rem)}
}

/* --- 16c. Escritorio: 64 rem -------------------------------------------- */
@media (min-width:64rem){
  :root{--canal:2.5rem; --t-2xl:3rem}

  #cuando{padding-block:calc(var(--e9) + var(--e4) + env(safe-area-inset-top)) calc(var(--e9) + var(--e4))}
  #cuando .medida{max-width:46rem}
  .boleto__num{font-size:7.5rem}
  #mundos{padding-block:var(--e9) var(--e7)}
  #donde{padding-block:var(--e9) calc(var(--e9) + var(--e4))}

  /* El formulario se pone AL LADO de su texto, no debajo: es la diferencia
     entre una página de escritorio y una de móvil estirada. El texto se
     alinea a la izquierda porque ya no es un bloque centrado en la pantalla,
     es una columna. */
  .confirmar__reja{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,27rem);
    gap:var(--e8); align-items:start;
  }
  .confirmar__reja > *{max-width:none; margin-inline:0}
  #confirmar .bloque-texto{text-align:start}
  #confirmar .seccion__entrada{margin-inline:0; max-width:34ch}
  .confirmar__hoja{margin-top:0; padding:var(--e6)}

  #confirmar{--banda:min(30vw,24rem)}
  #cierre{--banda:min(26vw,21rem)}
}