/* spacecols.com 2.0 (19-10-2026): el estilo de la app 1.2 — plano, claro y alegre. Bandas de color como la ficha del
   App Store, tarjetas blancas con labio, un solo verde para descargar y Bitri en vivo (assets/v2/bitri-motor.js).
   Contrastes medidos: blanco solo en letra grande y negrita sobre azul hondo y rojo; tinta sobre verde, amarillo y cielo. */
@font-face { font-family: "Nunito"; src: url("/assets/v2/nunito.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }

:root {
  --azul: #1CB0F6; --azul-hondo: #1899D6; --azul-texto: #0F7AB8;
  --verde: #58CC02; --verde-hondo: #58A700; --verde-texto: #4B7A00;
  --oro: #FFC800; --oro-hondo: #E7A601; --oro-texto: #8A5F00;
  --rojo: #FF4B4B; --rojo-hondo: #EA2B2B; --rojo-texto: #C9302F;
  --cielo: #3AD6FF; --cielo-hondo: #1FB8E3;
  --tinta: #2B3A55; --suave: #56657F; --labio: #D6E6F5; --linea: #E3EBF4;
  --lienzo: #FFFFFF; --lienzo-2: #EAF5FE; --tarjeta: #FFFFFF;
  --letra: "SF Pro Rounded", ui-rounded, "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 24px; --caja: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--letra); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--tinta); background: var(--lienzo); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.6vw, 70px); }
h2 { font-size: clamp(32px, 4.2vw, 52px); }
h3 { font-size: 24px; }
p { margin: 0 0 1em; text-wrap: pretty; }
.caja { width: 100%; max-width: var(--caja); margin: 0 auto; padding-inline: 20px; }
.angosta { max-width: 820px; }
.nw { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 10px; }

/* la palabra resaltada, como los titulares de la ficha */
mark { background: #fff; color: var(--marca, var(--azul-texto)); padding: 0 .22em; border-radius: .22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 52px; padding: 0 26px; border-radius: 16px; font: 800 18px/1 var(--letra); text-decoration: none; border: 0; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.boton:active { transform: translateY(4px); }
.boton.verde { background: var(--verde-hondo); color: #fff; box-shadow: 0 5px 0 #4A8C00; }
.boton.verde:active { box-shadow: 0 1px 0 #4A8C00; }
.boton.blanco { background: #fff; color: var(--azul-texto); box-shadow: 0 5px 0 rgba(0,0,0,.14); }
.boton.azul { background: var(--azul-texto); color: #fff; box-shadow: 0 5px 0 #0B5E8E; }
.boton.contorno { background: var(--tarjeta); color: var(--tinta); box-shadow: 0 0 0 2px var(--linea) inset, 0 5px 0 var(--labio); }
.boton.chico { min-height: 44px; padding: 0 18px; font-size: 19px; border-radius: 13px; box-shadow: 0 4px 0 var(--verde-hondo); }
.boton.ancho { width: 100%; }
/* el verde de la app sobre blanco no da 4.5 con letra de 18: el texto del botón va más grande y pesado (3:1 de letra grande) */
.boton.verde { font-size: 19px; }
.boton.verde.chico { font-size: 19px; background: var(--verde-hondo); box-shadow: 0 4px 0 #4A8C00; }

.tienda { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 18px; background: #000; color: #fff; text-decoration: none; box-shadow: 0 5px 0 rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s; }
.tienda:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.tienda img { width: 48px; height: 48px; border-radius: 11px; }
.tienda span { display: grid; line-height: 1.1; }
.tienda small { font-size: 13px; font-weight: 700; opacity: .85; }
.tienda b { font-size: 22px; font-weight: 800; }

/* ---------- barra ---------- */
.barra { position: sticky; top: 0; z-index: 50; background: var(--tarjeta); box-shadow: 0 3px 0 var(--labio); padding-top: env(safe-area-inset-top); }
.barra-dentro { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.logo { display: block; width: 74px; height: 35px; flex: none;
  background: var(--verde); -webkit-mask: url("/assets/v2/logo-junto.webp") center / contain no-repeat; mask: url("/assets/v2/logo-junto.webp") center / contain no-repeat; }
.logo img { opacity: 0; }
.menu { display: flex; gap: 4px; margin-inline: auto; }
.menu a { padding: 10px 14px; border-radius: 12px; text-decoration: none; font-weight: 800; font-size: 16px; color: var(--tinta); }
.menu a:hover { background: var(--lienzo-2); }
.barra-fin { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.idioma { position: relative; }
.idioma summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 12px; font-weight: 800; font-size: 15px; box-shadow: 0 0 0 2px var(--linea) inset; }
.idioma summary::-webkit-details-marker { display: none; }
.idioma nav { position: absolute; right: 0; top: calc(100% + 8px); display: grid; min-width: 150px; padding: 6px; background: var(--tarjeta); border-radius: 16px; box-shadow: 0 0 0 2px var(--linea), 0 6px 0 var(--labio); }
.idioma nav a { padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.idioma nav a:hover { background: var(--lienzo-2); }
.hamburguesa { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--lienzo-2); cursor: pointer; padding: 12px 11px; flex-direction: column; justify-content: space-between; }
.hamburguesa span { display: block; height: 3px; border-radius: 2px; background: var(--tinta); }
@media (max-width: 920px) {
  .hamburguesa { display: flex; }
  .menu { position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); flex-direction: column; padding: 8px; background: var(--tarjeta); border-radius: 20px; box-shadow: 0 0 0 2px var(--linea), 0 6px 0 var(--labio); display: none; }
  .barra.abierto .menu { display: flex; }
  .menu a { padding: 14px; font-size: 18px; }
  .barra-dentro { justify-content: space-between; }
}
@media (max-width: 420px) { .idioma summary { padding: 10px 9px; } .idioma summary span { display: none; } .barra .boton.chico { padding: 0 12px; font-size: 18.7px; } .barra-dentro { gap: 8px; } .logo { width: 62px; height: 30px; } }

/* ---------- bandas ---------- */
.banda { position: relative; padding-block: clamp(64px, 9vw, 120px); overflow: clip; }
.banda.azul { background: var(--azul-hondo); color: #fff; --marca: var(--azul-texto); }
.banda.roja { background: var(--rojo); color: #fff; --marca: var(--rojo-texto); }
.banda.verde { background: var(--verde); color: #24310F; --marca: var(--verde-texto); }
.banda.amarilla { background: var(--oro); color: #3A2B00; --marca: var(--oro-texto); }
.banda.cielo-claro { background: var(--cielo); color: #10324A; --marca: var(--azul-texto); }
.banda.clara { background: var(--lienzo); }
.banda.clara + .banda.clara { background: var(--lienzo-2); }
.banda.clara mark { background: var(--azul-hondo); color: #fff; }
/* letra de cuerpo sobre color: grande y gruesa (3:1 de letra grande) */
.banda.azul p, .banda.roja p { font-size: 20px; font-weight: 700; }
.banda.verde p, .banda.amarilla p, .banda.cielo-claro p { font-size: 20px; font-weight: 700; }
.titulo-seccion { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); }
.titulo-seccion p { font-size: 20px; color: inherit; opacity: 1; }
.banda.clara .titulo-seccion p, .banda.clara .grande { color: var(--suave); font-size: 20px; }

/* el cielo con estrellitas (como la app): puntos planos que titilan */
.cielo { position: absolute; inset: 0; pointer-events: none; background-image:
  radial-gradient(2px 2px at 8% 18%, #fff8 99%, #0000), radial-gradient(3px 3px at 22% 72%, #fff6 99%, #0000), radial-gradient(2px 2px at 37% 34%, #fff7 99%, #0000),
  radial-gradient(3px 3px at 52% 12%, #fff8 99%, #0000), radial-gradient(2px 2px at 66% 82%, #fff6 99%, #0000), radial-gradient(3px 3px at 79% 26%, #fff7 99%, #0000),
  radial-gradient(2px 2px at 91% 64%, #fff8 99%, #0000), radial-gradient(2px 2px at 14% 92%, #fff6 99%, #0000), radial-gradient(3px 3px at 46% 56%, #fff5 99%, #0000); }

/* ---------- héroe ---------- */
.heroe { min-height: calc(100svh - 68px); display: grid; align-items: center; padding-block: clamp(28px, 4vw, 56px); }
.banda.azul.vivo { background: var(--azul); --marca: var(--azul-texto); }
.banda.azul.vivo { color: #0C2C47; }
.banda.azul.vivo p, .banda.azul.vivo .bajada, .banda.azul.vivo h1, .banda.azul.vivo h2 { color: #0C2C47; }
.heroe-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: center; }

.heroe .bajada { font-size: clamp(19px, 1.7vw, 22px); font-weight: 700; max-width: 34em; }
.acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 28px 0 26px; }
.sellos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.sellos li { padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--azul-texto); font-weight: 800; font-size: 15px; }
.escena-heroe { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; justify-self: center; }
.escena-heroe .bitri { position: absolute; inset: -12% -20% 0; width: 140%; height: 112%; z-index: 2; }
.orbita { position: absolute; inset: 0; }
.orbita .isla { position: absolute; left: 50%; top: 50%; width: 21%; margin: -9% 0 0 -10.5%; will-change: transform; }
.globo { position: absolute; z-index: 4; margin: 0; padding: 12px 16px; background: #fff; color: #2B3A55; border-radius: 18px; font-weight: 800; font-size: 17px; line-height: 1.25; box-shadow: 0 4px 0 rgba(0,0,0,.12); max-width: 230px; }
.globo b { color: var(--azul-texto); }
.globo::after { content: ""; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 0 0 0 4px; }
.escena-heroe .globo { right: -2%; top: 13%; }
.escena-heroe .globo::after { left: 24px; bottom: -8px; transform: rotate(-45deg) skew(10deg, 10deg); }
.globo.salta { animation: salta .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes salta { from { transform: scale(.8); opacity: 0; } }

/* ---------- planetas ---------- */
.planetas { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.escena-planeta { position: sticky; top: 92px; aspect-ratio: 1 / 1.05; border-radius: 32px; background: var(--azul); overflow: hidden; }
.escena-planeta .bitri { position: absolute; inset: 0; width: 100%; height: 100%; }
.escena-planeta .globo { left: 50%; transform: translateX(-50%); bottom: 18px; top: auto; max-width: calc(100% - 36px); text-align: center; white-space: nowrap; }
.escena-planeta .globo::after { left: calc(50% - 9px); top: -8px; transform: rotate(135deg); }
.lista-planetas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.planeta { width: 100%; height: 100%; display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px; text-align: left; padding: 18px; border: 0; border-radius: var(--radio);
  background: var(--tarjeta); color: var(--tinta); font: inherit; cursor: pointer; box-shadow: 0 0 0 2px var(--linea) inset, 0 5px 0 var(--labio); transition: transform .1s, box-shadow .1s; }
.planeta:hover { transform: translateY(-2px); }
.planeta:active { transform: translateY(3px); box-shadow: 0 0 0 2px var(--linea) inset, 0 2px 0 var(--labio); }
.planeta.activo { box-shadow: 0 0 0 3px var(--azul-hondo) inset, 0 5px 0 var(--azul-hondo); background: color-mix(in srgb, var(--azul) 9%, var(--tarjeta)); }
.planeta img { grid-row: 1 / span 3; width: 76px; align-self: start; }
.planeta .nombre { font-weight: 800; font-size: 20px; line-height: 1.15; }
.planeta .nombre em { font-style: normal; display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--rojo-texto); color: #fff; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; vertical-align: 3px; }
.planeta .detalle { font-size: 15.5px; color: var(--suave); margin-top: 6px; line-height: 1.4; }
.lista-planetas li { position: relative; }
/* el enlace a la página de la materia (con la pizarra animada), en la fila de «48 temas» */
.lista-planetas .planeta { padding-bottom: 54px; }
.ver-pizarra { position: absolute; left: 96px; bottom: 12px; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px;
  color: #0B65A0; font-weight: 800; font-size: 15.5px; text-decoration: none; }
.ver-pizarra:hover { background: var(--lienzo-2); }
@media (max-width: 620px) { .ver-pizarra { left: 82px; } }
.paso-texto .boton { margin-top: 10px; }
/* la racha: color liso, sin paisaje (él: «el de la racha puede ser color») */
.banda.racha { background: #FFC97A; color: #3B2300; --marca: #9A4A00; }
.banda.racha h2, .banda.racha p { color: #3B2300; }
.banda.racha p { font-size: 20px; font-weight: 700; }
.planeta .cuenta { justify-self: start; margin-top: 12px; padding: 5px 12px; border-radius: 999px; background: var(--lienzo-2); color: #0B65A0; font-weight: 800; font-size: 16px; }

/* ---------- pasos (bandas de color con el teléfono) ---------- */
.paso-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 6vw, 96px); align-items: center; }
.al-reves .paso-grid { grid-template-columns: auto 1fr; }
.al-reves .paso-texto { order: 2; }
.paso-texto { max-width: 520px; }
.telefono { margin: 0; width: clamp(230px, 24vw, 300px); padding: 8px; background: #1D2B44; border-radius: 46px; box-shadow: 0 8px 0 rgba(0,0,0,.18); }
.telefono img { border-radius: 38px; width: 100%; }
.dos-telefonos { display: flex; gap: 20px; align-items: flex-start; }
.dos-telefonos .telefono { width: clamp(200px, 20vw, 260px); }
.dos-telefonos .telefono:last-child { margin-top: 64px; }

/* ---------- elige a tu Bitri ---------- */
.elige-grid { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.escena-elige { position: relative; aspect-ratio: 1 / 1; }
.escena-elige .bitri { position: absolute; inset: -10%; width: 120%; height: 120%; }
.selector { display: inline-flex; gap: 6px; padding: 6px; border-radius: 20px; background: rgba(255,255,255,.55); margin: 8px 0 22px; }
.selector button { min-height: 50px; padding: 0 20px; border: 0; border-radius: 15px; background: transparent; color: #10324A; font: 800 18px var(--letra); cursor: pointer; }
.selector button[aria-checked="true"] { background: #fff; box-shadow: 0 4px 0 rgba(16,50,74,.18); }
.elige .nota { font-size: 17px; font-weight: 700; max-width: 30em; }

/* ---------- padres ---------- */
.padres-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.confianza { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.confianza li { padding: 18px 20px; border-radius: 20px; background: var(--tarjeta); box-shadow: 0 0 0 2px var(--linea) inset, 0 4px 0 var(--labio); font-size: 16px; color: var(--suave); line-height: 1.4; }
.confianza b { display: block; color: var(--tinta); font-size: 18px; margin-bottom: 4px; }

/* ---------- precio ---------- */
.precio .titulo-seccion p { color: #0C2C47; }
.precios { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; max-width: 920px; margin: 0 auto; align-items: start; }
.pase, .gratis { border-radius: 28px; background: #fff; color: #2B3A55; padding: 30px; box-shadow: 0 8px 0 rgba(0,0,0,.16); }
.pase-marca { margin: 0 0 6px; color: #1E5FD9; font-weight: 800; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.pase h3 { font-size: 34px; margin-bottom: 18px; }
.pase-ruta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-weight: 800; font-size: 20px; padding-bottom: 22px; border-bottom: 3px dashed #D6E2F0; }
.pase-ruta small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #56657F; }
.pase-ruta .avion { color: #56657F; font-size: 22px; }
.pase-ruta .siempre { margin-left: auto; padding: 6px 14px; border-radius: 999px; background: #E4EEFF; color: #1E4FC2; font-size: 16px; }
.pase-talon { margin: 0 -30px 22px; padding: 22px 30px; background: #FFF4D6; }
.pase-talon .total { margin: 0 0 6px; font-size: 20px; color: #56657F; }
.pase-talon .total b { font-size: 56px; line-height: 1; color: #2B3A55; margin-right: 6px; }
.pase-talon .monto { margin: 0; font-size: 38px; font-weight: 800; line-height: 1.1; }
.pase-talon .monto small { display: block; font-size: 16px; font-weight: 700; color: #56657F; }
.letra-chica { margin: 18px 0 0; font-size: 15px !important; font-weight: 600 !important; color: #56657F; line-height: 1.45; }
.gratis h3 { margin-bottom: 14px; }
.gratis ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gratis li { position: relative; padding-left: 34px; font-weight: 700; }
.gratis li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 8px; background: var(--verde-hondo); color: #fff; font-size: 15px; display: grid; place-items: center; font-weight: 900; }

/* ---------- libros ---------- */
.libros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.libros p { color: var(--suave); font-size: 19px; }
.estante-portada { display: flex; justify-content: center; }
.estante-portada img { width: 30%; max-width: 170px; border-radius: 14px; box-shadow: 0 6px 0 var(--labio); margin-inline: -3%; transition: transform .2s; }
.estante-portada img:nth-child(1) { transform: rotate(-8deg) translateY(14px); }
.estante-portada img:nth-child(2) { transform: rotate(-2deg); z-index: 1; }
.estante-portada img:nth-child(3) { transform: rotate(3deg); z-index: 1; }
.estante-portada img:nth-child(4) { transform: rotate(9deg) translateY(16px); }
.estante-portada:hover img { transform: none; }

/* ---------- preguntas ---------- */
.preguntas h2 { text-align: center; margin-bottom: 32px; }
.preguntas details { border-radius: 20px; background: var(--tarjeta); box-shadow: 0 0 0 2px var(--linea) inset, 0 4px 0 var(--labio); margin-bottom: 14px; }
.preguntas summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 800; font-size: 19px; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 20px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 10px; background: var(--lienzo-2); color: var(--azul-texto); display: grid; place-items: center; font-size: 22px; }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { padding: 0 22px 20px; margin: 0; color: var(--suave); }
.preguntas .ayuda { text-align: center; margin-top: 28px; color: var(--suave); }

/* ---------- cierre y pie ---------- */
.cierre { padding-block: clamp(48px, 7vw, 88px); }
.cierre-grid { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center; }
.cierre .bitri { width: 300px; height: 300px; }
.cierre h2 { margin-bottom: 24px; }
.pie2 { background: #1D2B44; color: #DDE6F5; padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 16px; }
.pie2-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.pie2 img { width: 96px; margin-bottom: 14px; }
.pie2 h4 { margin: 0 0 12px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #9FB2D1; }
.pie2 nav, .pie2-grid > div:last-child { display: grid; align-content: start; gap: 0; }
.pie2 nav a, .pie2-grid > div:last-child > a, .pie2-grid > div:last-child > span { padding-block: 10px; }
.pie2 a { text-decoration: none; font-weight: 700; }
.pie2 a:hover { text-decoration: underline; }
.redes { display: flex; gap: 10px; margin-top: 16px; }
.redes a { width: 44px; height: 44px; border-radius: 12px; background: #2C3D5C; display: grid; place-items: center; }
.redes svg { width: 22px; height: 22px; }
.legal { margin-top: 40px; font-size: 13px; color: #9FB2D1; }

/* ---------- celular y tableta ---------- */
@media (max-width: 900px) {
  .heroe-grid, .planetas, .paso-grid, .al-reves .paso-grid, .elige-grid, .padres-grid, .libros-grid, .precios, .cierre-grid { grid-template-columns: 1fr; }
  .heroe-texto { text-align: center; }
  .acciones, .sellos { justify-content: center; }
  .escena-heroe { max-width: 440px; margin-top: 8px; }
  .escena-heroe .globo { right: -4px; top: -2%; font-size: 16px; }
  .escena-planeta { position: sticky; top: 76px; z-index: 5; aspect-ratio: auto; height: 300px; max-width: 520px; width: 100%; justify-self: center; }
  .paso-texto, .elige-texto { text-align: center; max-width: none; }
  .al-reves .paso-texto { order: 0; }
  .telefono { justify-self: center; margin-inline: auto; }
  .dos-telefonos { justify-content: center; }
  .dos-telefonos .telefono { width: 44%; max-width: 240px; margin-inline: 0; }
  .padres-grid .telefono { order: 2; }
  .escena-elige { max-width: 340px; width: 100%; justify-self: center; }
  .cierre-grid { justify-items: center; text-align: center; }
  .cierre .bitri { width: 240px; height: 240px; }
  .pie2-grid { grid-template-columns: 1fr 1fr; }
  .pie2-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .lista-planetas, .confianza { grid-template-columns: 1fr; }
  .planeta { grid-template-columns: 64px 1fr; padding: 14px 16px; }
  .planeta img { width: 64px; }
  .escena-planeta { height: 260px; }
  .pase, .gratis { padding: 24px; }
  .pase-talon { margin-inline: -24px; padding-inline: 24px; }
  .pase-ruta .siempre { margin-left: 0; }
  .selector button { padding: 0 14px; font-size: 16px; }
}

/* ---------- paisajes de la app (19-10-2026, él: «siento que suena Duolingo… usa paisajes o cosas de nuestra app»):
   el cielo de día (cielo_1 = 84D8FF) con las nubes de la app, el pasto con flores donde se para Bitri, y los suelos de
   cada planeta (pasto, arena, circuitos, lila, rosa, coral) como fondo de las bandas. ---------- */
.banda.dia { background: #84D8FF; color: #0C2C47; --marca: var(--azul-texto); }
.banda.dia h1, .banda.dia h2, .banda.dia p { color: #0C2C47; }
.banda.dia p { font-size: 20px; font-weight: 700; }
.nubes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nube { position: absolute; width: clamp(160px, 18vw, 300px); opacity: .95; animation: nube 80s linear infinite; }
.nube.n1 { top: 9%; animation-duration: 95s; animation-delay: -30s; }
.nube.n2 { top: 34%; width: clamp(120px, 13vw, 220px); animation-duration: 120s; animation-delay: -80s; opacity: .85; }
.nube.n3 { top: 62%; width: clamp(110px, 11vw, 190px); animation-duration: 140s; animation-delay: -10s; opacity: .8; }
@keyframes nube { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }
/* lugares del juego (19-10-2026, él: «tenemos varios fondos en el juego… esta feo tener mucho ruido»): cielo de color
   plano arriba y la franja del lugar (herramientas/lugares_web.py, SVG de lh_duo.py) pegada al pie de la banda. Nada de
   patrones repetidos. --r = alto/ancho de la franja; --suelo = dónde pisa Bitri, medido desde abajo. El paisaje no pasa
   de 1000 px de ancho (él: «está muy gigante»): en pantallas más anchas sigue a los lados con su copia en espejo en vez de agrandarse. */
.pasto { display: none; }
.banda.lugar { position: relative; color: #0C2C47; --marca: var(--azul-texto); --ancho: clamp(640px, 100vw, 1000px);
  background: var(--cielo) var(--img) center bottom / calc(var(--ancho) * 3) auto no-repeat;
  padding-bottom: calc(var(--ancho) * var(--r) * .35 + 16px); }
.heroe.lugar { --ancho: clamp(640px, 100vw, 1800px); }
.banda.lugar h1, .banda.lugar h2, .banda.lugar p { color: #0C2C47; }
.banda.lugar p { font-size: 20px; font-weight: 700; }
.lugar.prado  { --cielo: #9ED9FF; --img: url("/assets/v2/lugar/prado.svg");  --r: .23; --suelo: calc(var(--ancho) * .085); }
.lugar.mar    { --cielo: #84D8FF; --img: url("/assets/v2/lugar/mar.svg");    --r: .27; }
.lugar.canon  { --cielo: #84D8FF; --img: url("/assets/v2/lugar/canon.svg");  --r: .23; --suelo: calc(var(--ancho) * .06); }
.lugar.muelle { --cielo: #FFB45C; --img: url("/assets/v2/lugar/muelle.svg"); --r: .27; --marca: #9A4A00; }
.lugar.polo   { --cielo: #5CC8F5; --img: url("/assets/v2/lugar/polo.svg");   --r: .3; --suelo: calc(var(--ancho) * .05); }
.lugar.selva  { --cielo: #C9F2B0; --img: url("/assets/v2/lugar/selva.svg");  --r: .23; --suelo: calc(var(--ancho) * .06); --marca: var(--verde-texto); }
.lugar.salon  { --cielo: #EBCFA8; --img: url("/assets/v2/lugar/salon.svg");  --r: .23; }
/* los listones de madera de la pared del estudio de Bitri, en toda la banda (el SVG solo trae el zócalo y el piso) */
.banda.lugar.salon { background: var(--img) center bottom / calc(var(--ancho) * 3) auto no-repeat,
  repeating-linear-gradient(90deg, #EBCFA8 0 11px, #E2C296 11px 14px), var(--cielo); }
.lugar.egipto { --cielo: #84D8FF; --img: url("/assets/v2/lugar/egipto.svg"); --r: .23; --suelo: calc(var(--ancho) * .05); }
/* donde se para Bitri (portada, elige, cierre, páginas de materia) la banda no reserva la franja: Bitri la pisa */
.heroe.lugar, .elige.lugar, .cierre.lugar { padding-bottom: 0; }
.heroe { --pasto: var(--suelo, 0px); }
.heroe .heroe-grid { align-items: center; }
.heroe .escena-heroe { align-self: end; margin-bottom: var(--suelo); }
.heroe .acciones { position: relative; z-index: 3; }
.heroe-texto { position: relative; z-index: 3; padding-bottom: calc(var(--ancho) * var(--r) * .3 + 12px); }
.heroe-materia .heroe-texto { padding-bottom: calc(var(--ancho) * var(--r) * .25 + 12px); }
.elige .elige-grid { position: relative; }
.elige .escena-elige { align-self: end; margin-bottom: var(--suelo); }
.elige-texto { padding-bottom: calc(var(--ancho) * var(--r) * .45); }
.cierre.lugar .cierre-grid { align-items: end; }
.cierre.lugar .bitri { margin-bottom: var(--suelo); }
.cierre.lugar .cierre-grid > div { padding-bottom: calc(var(--ancho) * var(--r) * .45); }
/* el escenario de los planetas: un color liso por planeta (19-10-2026, él: «flotan ahí, puedes seguir usando colores»)
   y un piso más claro justo bajo los pies de Bitri (pie: 0,8 en inicio.js), para que se pare en algo */
.escena-planeta { background: var(--fondo-planeta, #1CB0F6); transition: background-color .3s; }
.escena-planeta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 79%; background: rgba(255,255,255,.22); }
.escena-planeta[data-materia="ia"]   { --fondo-planeta: #1CB0F6; }
.escena-planeta[data-materia="code"] { --fondo-planeta: #58CC02; }
.escena-planeta[data-materia="mate"] { --fondo-planeta: #FFC800; }
.escena-planeta[data-materia="ing"]  { --fondo-planeta: #FF9600; }
.escena-planeta[data-materia="cien"] { --fondo-planeta: #00C2A8; }
.escena-planeta[data-materia="com"]  { --fondo-planeta: #FF4B4B; }
@media (prefers-reduced-motion: reduce) { .nube { animation: none; } .nube.n1 { left: 8%; } .nube.n2 { left: 62%; } .nube.n3 { left: 30%; } }

/* ---------- páginas por materia (apps.py + materia.js) ---------- */
.sello-materia { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 16px 6px 8px; border-radius: 999px; background: #fff; color: var(--azul-texto) !important; font-weight: 800; font-size: 16px !important; }
.sello-materia img { width: 46px; height: auto; }
.heroe-materia { align-items: end; }
.heroe-materia .escena-pizarra { position: relative; align-self: end; margin-bottom: calc(var(--pasto) * .3); width: 100%; max-width: 620px; justify-self: center; aspect-ratio: 1.25 / 1; }
.pizarra { position: absolute; left: 0; top: 4%; width: 68%; height: 66%; border-radius: 22px; background: #2D4FA0;
  box-shadow: 0 0 0 10px #fff, 0 10px 0 6px rgba(12,44,71,.18);
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 22px 22px;
  display: grid; place-items: center; overflow: hidden; }
.pizarra .lineas { display: grid; justify-items: center; gap: 2px; font-weight: 900; font-size: clamp(30px, 4vw, 52px); line-height: 1.12; color: #fff; text-align: center; }
.pizarra .linea { display: flex; gap: .12em; justify-content: center; white-space: nowrap; }
.pizarra .linea.chica { font-size: .6em; opacity: .85; }
.pizarra .c { display: inline-block; width: .72em; text-align: center; }
.pizarra .raya { display: block; width: 3.2em; height: 5px; border-radius: 3px; background: #fff; margin: 4px 0; }
.pizarra .sol { color: #FFD84A; } .pizarra .lima { color: #7CF29A; } .pizarra .celeste { color: #8FE3FF; } .pizarra .rosa { color: #FF9BD2; } .pizarra .uva { color: #D7B8FF; }
/* la tiza escribe con trazos (materia.js): el texto HTML queda de molde invisible y encima se dibujan las letras en SVG */
.pizarra .lineas.con-trazos, .pizarra .lineas.con-trazos * { color: transparent !important; }
.pizarra .lineas.con-trazos .raya { background: transparent; }
.pizarra .trazos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.polvo { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.75); pointer-events: none; animation: polvo .9s ease-in forwards; }
@keyframes polvo { to { transform: translate(-6px, 28px); opacity: 0; } }
.tiza { position: absolute; left: 0; top: 0; width: 26px; height: 9px; border-radius: 4px; background: #fff; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.escena-pizarra .bitri { position: absolute; left: -10%; bottom: 0; width: 150%; height: 100%; }
.pestanas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.pestanas button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--tarjeta); color: var(--tinta); font: 800 17px var(--letra); cursor: pointer; box-shadow: 0 0 0 2px var(--linea) inset, 0 4px 0 var(--labio); }
.pestanas button[aria-selected="true"] { background: var(--azul-texto); color: #fff; box-shadow: 0 4px 0 #0B5E8E; }
.temas-caja { max-width: 980px; margin: 0 auto; }
.lista-temas { columns: 3 220px; column-gap: 28px; margin: 0; padding: 26px 30px; border-radius: 24px; background: var(--tarjeta); box-shadow: 0 0 0 2px var(--linea) inset, 0 5px 0 var(--labio); counter-reset: t; list-style: none; }
.lista-temas li { break-inside: avoid; padding: 9px 0 9px 38px; position: relative; font-weight: 700; font-size: 17px; line-height: 1.35; counter-increment: t; }
.lista-temas li::before { content: counter(t); position: absolute; left: 0; top: 8px; width: 28px; height: 24px; border-radius: 8px; background: var(--lienzo-2); color: #0B65A0; font-size: 14px; font-weight: 800; display: grid; place-items: center; }
.precios.dos { grid-template-columns: 1fr 1fr; max-width: 720px; }
.precios.dos .pase { text-align: center; padding: 26px; }
.precios.dos .pase-talon { margin: 6px -26px 0; padding: 18px 26px; }
.precios.dos .destacado { box-shadow: 0 0 0 4px var(--oro), 0 8px 0 rgba(0,0,0,.16); }
.precios.dos .destacado .letra-chica { margin: 12px 0 0; }
.precio-pie { text-align: center; max-width: 620px; margin: 28px auto 0; }
.precio-pie .letra-chica { color: #0C2C47 !important; margin-top: 16px; }
.otras-materias h2 { text-align: center; margin-bottom: 28px; }
.otras { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.otra { display: grid; justify-items: center; gap: 6px; width: 150px; padding: 16px 10px; border-radius: 22px; background: var(--tarjeta); text-decoration: none; font-weight: 800; box-shadow: 0 0 0 2px var(--linea) inset, 0 5px 0 var(--labio); transition: transform .1s; }
.otra:hover { transform: translateY(-3px); }
.otra img { width: 92px; height: auto; }
@media (max-width: 900px) {
  .heroe-materia .escena-pizarra { max-width: 460px; margin-top: 10px; }
  .sello-materia { margin-inline: auto; }
}
@media (max-width: 620px) {
  .precios.dos { grid-template-columns: 1fr; }
  .lista-temas { padding: 18px 20px; }
}

/* ---------- soporte y privacidad (paginas_ayuda.py) ---------- */
.ayuda { padding-top: clamp(40px, 6vw, 72px); }
.ayuda h1 { font-size: clamp(36px, 5vw, 56px); }
.ayuda h2 { font-size: 26px; margin: 34px 0 10px; }
.ayuda p, .ayuda li { color: var(--suave); }
.ayuda b, .ayuda em { color: var(--tinta); }
.ayuda section + section { margin-top: 44px; padding-top: 8px; border-top: 2px solid var(--linea); }
.saltos { display: flex; gap: 8px; flex-wrap: wrap; }
.saltos a { padding: 11px 16px; border-radius: 999px; background: var(--lienzo-2); color: #0B65A0; font-weight: 800; text-decoration: none; }
.correo { display: inline-block; padding: 12px 18px; border-radius: 14px; background: var(--azul-texto); color: #fff !important; font-weight: 800; font-size: 20px; text-decoration: none; box-shadow: 0 4px 0 #0B5E8E; }
.ayuda details { border-radius: 18px; background: var(--tarjeta); box-shadow: 0 0 0 2px var(--linea) inset, 0 4px 0 var(--labio); margin-bottom: 12px; }
.ayuda summary { cursor: pointer; padding: 16px 20px; font-weight: 800; }
.ayuda details p { padding: 0 20px 16px; margin: 0; }
/* en el celular el texto va ENCIMA de Bitri: no reserva el alto del paisaje (eso lo pisa Bitri, que va debajo) */
@media (max-width: 900px) {
  .heroe-texto, .heroe-materia .heroe-texto, .elige-texto, .cierre.lugar .cierre-grid > div { padding-bottom: 8px; }
}
/* portada: una sola nube quieta arriba a la derecha, lejos del texto (él: «hay mucha bulla») */
.heroe:not(.heroe-materia) .nube.n1 { animation: none; left: auto; right: 7%; top: 7%; }
@media (max-width: 900px) { .heroe:not(.heroe-materia) .nube.n1 { display: none; } }   /* en el celular caía detrás del titular */

/* la pizarra en la portada (19-10-2026, él: «que se anime ahí de frente en el Home»): la misma de las materias, con
   islitas para elegir la materia y el botón a sus temas */
.paso .escena-pizarra { position: relative; width: clamp(340px, 40vw, 560px); aspect-ratio: 1.25 / 1; }
.elegir-pizarra { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.elegir-pizarra button { width: 60px; height: 52px; padding: 4px; border: 0; border-radius: 16px; background: rgba(255,255,255,.55); cursor: pointer; transition: transform .1s, background .15s; }
.elegir-pizarra button img { width: 100%; height: 100%; object-fit: contain; }
.elegir-pizarra button:hover { transform: translateY(-2px); }
.elegir-pizarra button[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 3px var(--azul-texto), 0 4px 0 #0B5E8E; }
@media (max-width: 900px) {
  .paso .escena-pizarra { width: 100%; max-width: 460px; justify-self: center; }
  .elegir-pizarra { justify-content: center; }
  /* el escenario de los planetas, fijo arriba, tapaba media pantalla y los títulos de las tarjetas */
  .escena-planeta { height: 230px; }
}
@media (max-width: 620px) { .escena-planeta { height: 200px; } }
/* Bitri y la pizarra se paran en el piso del salón; el texto queda sobre la pared */
.paso.con-pizarra { padding-bottom: 0; }
.con-pizarra .paso-grid { align-items: end; }
.con-pizarra .escena-pizarra { margin-bottom: calc(var(--ancho) * var(--r) * .48); }
.con-pizarra .paso-texto { padding-bottom: calc(var(--ancho) * var(--r) * 1.02); }
@media (max-width: 900px) { .con-pizarra .paso-texto { padding-bottom: 0; } }
@media (max-width: 620px) { .elegir-pizarra { gap: 6px; } .elegir-pizarra button { width: 50px; height: 46px; border-radius: 13px; } }
.ver-pizarra { min-height: 44px; bottom: 8px; }   /* área táctil de 44 px (WCAG 2.5.8) */
/* la repisa del estudio de Bitri (libros, planta y lámpara), encima de la pizarra (no va en el celular: no hay sitio) */
.con-pizarra .escena-pizarra::before { content: ""; position: absolute; left: 4%; width: 60%; bottom: calc(96% + 34px); aspect-ratio: 300 / 100;
  background: url("/assets/v2/lugar/estante-salon.svg") center / contain no-repeat; }
@media (max-width: 900px) { .con-pizarra .escena-pizarra::before { display: none; } }