/* PlayLife · el interior de la app (rediseño 4-oct-2026).
   La idea: «el amanecer de la familia, un paisaje que se recorre». El inicio es un cielo de madrugada sobre las colinas
   donde están los hijos; la ruta de cada niño es un sendero con estaciones. Piezas de juguete: contorno de tinta de 2-3 px,
   sombra sólida desplazada (se ve en cualquier pantalla barata), paredes de color por tramo y cero emojis.
   Tipos: Bricolage (títulos de papás) · Fredoka (cifras, botones y lo del niño) · Inter (texto). */
:root {
  --noche: #24193D; --papel: #FFF8F0; --blanco: #FFFFFF; --suave: #5E5470;
  --coral: #FF6B4A; --ambar: #FFB84A; --sol: #FFD23F; --teal: #12B5A6; --teal-osc: #0A7C72; --violeta: #5B3FD9; --morado: #7C5CFF;
  --coral-f: #FFE4DC; --sol-f: #FFF1C2; --teal-f: #DDF6F2; --violeta-f: #ECE7FF; --gris-f: #EEEAF3;
  --mal: #B23A1F; --bien: #0A7C72;
  --r: 22px; --r-s: 14px;
  --sombra: 4px 4px 0 var(--noche); --sombra-g: 6px 6px 0 var(--noche); --sombra-s: 2px 2px 0 var(--noche);
  --ruta: #FF6B4A;
  --rebote: cubic-bezier(.2, .9, .3, 1.25);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* que ninguna regla de diseño le gane a «esconder» */
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--papel); color: var(--noche); font: 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation; overflow-x: hidden;
  background-image: radial-gradient(rgba(36, 25, 61, .07) 1px, transparent 1.3px); background-size: 18px 18px; }
h1, h2, h3 { font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif; line-height: 1.12; text-wrap: balance; margin: 0 0 .35em; letter-spacing: -.015em; }
h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 800; }
h3 { font-size: 1.02rem; font-weight: 700; margin-top: 1.1em; }
p { margin: 0 0 .8em; }
a { color: var(--violeta); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 10px; }
.suave { color: var(--suave); font-size: .94rem; }
.centro { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marcador { background: linear-gradient(transparent 58%, var(--sol) 58%); padding: 0 2px; }

/* íconos del sprite */
.ic { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -.22em; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.ic .d { fill: currentColor; fill-opacity: .2; stroke: none; }
.ic .f { fill: currentColor; stroke: none; }
.ic.lleno .d { fill-opacity: 1; }
.av { width: 100%; height: 100%; display: block; }
.ilus { display: block; width: 100%; height: 100%; }

/* ═══ la cabecera ═══ */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 58px;
  padding: calc(6px + env(safe-area-inset-top)) 12px 6px; background: var(--noche); color: #fff; }
.marca { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-decoration: none; color: #fff;
  font: 800 1.3rem "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; min-height: 44px; }
.marca b { color: var(--sol); }
.marca-sol { width: 32px; height: 32px; flex: none; }
.barra-volver { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; color: #fff; background: rgba(255, 255, 255, .1); }
.barra-volver .ic { width: 24px; height: 24px; stroke-width: 2.4; }
.barra-volver:active { transform: scale(.94); }
.barra-hijo { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 99px; background: rgba(255, 255, 255, .12);
  font: 600 .95rem Fredoka, Inter, sans-serif; max-width: 52%; }
.barra-hijo .av { width: 34px; height: 34px; flex: none; }
.barra-hijo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-escritorio { display: none; }

/* ═══ la barra inferior (celular) ═══ */
.tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--blanco); border-top: 3px solid var(--noche); }
.tabbar a { display: grid; justify-items: center; gap: 2px; min-height: 56px; padding: 4px 2px; color: var(--suave); text-decoration: none;
  font: 600 .78rem Fredoka, Inter, sans-serif; border-radius: 14px; }
.tab-ic { display: grid; place-items: center; width: 52px; height: 32px; border-radius: 99px; transition: background .2s, transform .2s var(--rebote); }
.tab-ic .ic { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--noche); }
.tabbar a[aria-current="page"] .tab-ic { background: var(--sol); border: 2px solid var(--noche); }
.tabbar a:active .tab-ic { transform: scale(.9); }

/* ═══ el lienzo ═══ */
.contenido { display: grid; gap: 30px; padding: 0 0 calc(48px + env(safe-area-inset-bottom)); }
.con-nav .contenido { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
/* La pared de color que cierra la página llega hasta el borde de abajo (sin franja de papel suelta). */
.con-nav .contenido > .pared:last-child { margin-bottom: calc(-110px - env(safe-area-inset-bottom)); padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
.modo-nino .contenido { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.contenido > * { width: min(100% - 32px, 760px); margin-inline: auto; }
.contenido > .amanecer, .contenido > .nino-hola, .contenido > .pared, .contenido > .cabeza-pared { width: 100%; }
.contenido > :first-child:not(.amanecer):not(.nino-hola):not(.cabeza-pared):not(.pared) { margin-top: 22px; }
.bloque { display: grid; gap: 14px; }
.titulo-seccion { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.35rem; }
.titulo-seccion > .ic { width: 38px; height: 38px; padding: 7px; border-radius: 50%; background: var(--sol); border: 2px solid var(--noche); stroke-width: 2.2; }
.contador-chip { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px; background: var(--coral);
  border: 2px solid var(--noche); font: 700 .95rem Fredoka, sans-serif; }
.nota { display: flex; gap: 8px; align-items: flex-start; color: var(--suave); font-size: .92rem; margin: 0; }
.nota .ic { margin-top: 2px; color: var(--violeta); }
.enlace-suave { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--suave); font-weight: 600; text-decoration: none; }

/* ═══ botones ═══ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 20px; border-radius: var(--r-s);
  font: 600 1.05rem Fredoka, Inter, sans-serif; text-decoration: none; cursor: pointer; color: var(--noche); background: var(--blanco);
  border: 2.5px solid var(--noche); box-shadow: 3px 3px 0 var(--noche); transition: transform .12s, box-shadow .12s; }
.btn .ic { width: 22px; height: 22px; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--noche); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--noche); }
.btn-sol { background: var(--coral); }
.btn-teal { background: var(--teal); }
.btn-linea { background: var(--blanco); }
.btn-noche { background: var(--noche); color: #fff; box-shadow: 3px 3px 0 var(--sol); }
.btn-ruta { background: var(--noche); color: #fff; }
.btn-ruta .ic { color: var(--sol); }
.btn-salir { color: var(--mal); }
.btn.grande { min-height: 58px; font-size: 1.15rem; width: 100%; border-radius: 18px; box-shadow: 4px 4px 0 var(--noche); }
.btn.grande:active { box-shadow: 1px 1px 0 var(--noche); }
.btn[disabled] { opacity: .5; box-shadow: none; transform: none; }
.btn.sig::after { content: ""; width: 9px; height: 9px; margin-left: 4px; border: solid currentColor; border-width: 3px 3px 0 0; transform: rotate(45deg); flex: none; }
.btn.ant::before { content: ""; width: 9px; height: 9px; margin-right: 2px; border: solid currentColor; border-width: 0 0 3px 3px; transform: rotate(45deg); flex: none; }
.btn-icono { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-s); border: 2.5px solid var(--noche);
  background: var(--blanco); color: var(--noche); box-shadow: 2px 2px 0 var(--noche); }
.btn-icono .ic { width: 22px; height: 22px; }
.btn-icono:active { transform: translate(2px, 2px); box-shadow: none; }
.fila-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.fila-botones .btn { flex: 1 1 140px; }
.pildora { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 8px 14px; border-radius: 99px; text-decoration: none;
  font: 600 .98rem Fredoka, Inter, sans-serif; color: var(--noche); background: var(--sol); border: 2.5px solid var(--noche); box-shadow: var(--sombra-s); }
.pildora-clara { background: var(--blanco); }
.pildora:active { transform: translate(2px, 2px); box-shadow: none; }

/* chips y sellos */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: var(--blanco); border: 2px solid var(--noche);
  font: 600 .84rem Fredoka, Inter, sans-serif; color: var(--noche); white-space: nowrap; }
.chip .ic { width: 16px; height: 16px; }
.chip-ruta .ic { color: var(--c, var(--ruta)); stroke-width: 2.4; }
.chip-sol { background: var(--sol); }
.chip-sol .ic { color: var(--coral); }
.chip-violeta { background: var(--violeta-f); }
.sello { display: inline-flex; align-items: center; gap: 6px; justify-self: start; width: fit-content; margin: 0 0 10px; padding: 4px 12px;
  border-radius: 99px; background: var(--sol); border: 2px solid var(--noche); font: 600 .86rem Fredoka, sans-serif; rotate: -2deg; color: var(--noche); }
.sello-coral { background: var(--coral); }
.sello-claro { background: var(--blanco); }

/* el avance */
.avance { display: block; height: 12px; border-radius: 99px; background: var(--blanco); border: 2px solid var(--noche); overflow: hidden; }
.avance i { display: block; height: 100%; background: var(--teal); transform-origin: left center; transform: scaleX(var(--p, 0));
  animation: llenar .6s cubic-bezier(.3, .8, .3, 1) .1s both; }
.avance-claro i { background: var(--sol); }
@keyframes llenar { from { transform: scaleX(0); } }
.pasitos { display: inline-flex; gap: 5px; }
.pasitos i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--noche); background: var(--blanco); }
.pasitos i.si { background: var(--teal); }

/* ═══ INICIO · el amanecer ═══ */
/* El cielo de arriba es CSS (texto siempre sobre violeta: contraste 6,6:1); la escena dibujada ocupa solo la franja de abajo. */
.amanecer { --escena: 240px; position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 22px 16px calc(var(--escena) - 26px); display: grid; align-content: start;
  background: #5B3FD9 linear-gradient(#24193D, #5B3FD9) no-repeat 0 0 / 100% calc(100% - var(--escena) + 1px);
  background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 255, 255, .55) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 78% 12%, rgba(255, 255, 255, .5) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 58% 30%, rgba(255, 255, 255, .4) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 92% 40%, rgba(255, 255, 255, .45) 50%, transparent 52%),
    linear-gradient(#24193D, #5B3FD9);
  background-size: 100% calc(100% - var(--escena) + 1px); background-repeat: no-repeat; }
.amanecer-escena { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--escena); z-index: -1; }
.amanecer-txt { max-width: 560px; width: 100%; margin-inline: auto; }
.amanecer-dia { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 600 1rem Fredoka, sans-serif; color: var(--sol); }
.amanecer h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); margin: 0 0 .2em; color: #fff; }
.amanecer-txt > p:not(.amanecer-dia) { max-width: 32ch; font-size: 1.04rem; color: #fff; }
.amanecer-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.am-sol { animation: amanece .75s cubic-bezier(.2, .8, .2, 1) both; transform-box: fill-box; }
@keyframes amanece { from { transform: translateY(46px); opacity: .3; } }
.am-colina { animation: colina .6s cubic-bezier(.2, .8, .2, 1) both; }
.am-c2 { animation-delay: .06s; } .am-c3 { animation-delay: .12s; }
@keyframes colina { from { transform: translateY(24px); } }
.colina-hijos { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0 auto; padding: 0 16px; list-style: none; display: flex; gap: 6px;
  max-width: 592px; overflow-x: auto; scrollbar-width: none; }
.colina-hijos::-webkit-scrollbar { display: none; }
.colina-hijos li { flex: none; animation: brincar .4s var(--rebote) both; animation-delay: calc(.15s + var(--i) * 50ms); }
.colina-hijos a { display: grid; justify-items: center; gap: 4px; min-width: 72px; text-decoration: none; color: var(--noche); }
.colina-hijos .av { width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--noche); background: #fff; box-shadow: 0 4px 0 var(--noche); transition: transform .2s var(--rebote); }
.colina-hijos a:hover .av, .colina-hijos a:active .av { transform: translateY(-4px) rotate(-4deg); }
.colina-hijos span { padding: 1px 10px; border-radius: 99px; background: #fff; border: 2px solid var(--noche); font: 600 .82rem Fredoka, sans-serif;
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes brincar { from { transform: translateY(18px) scale(.7); opacity: 0; } }

/* estado vacío */
.vacio { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 8px 0; }
.vacio-ilus { width: 220px; height: 165px; }
.vacio p { max-width: 36ch; color: var(--suave); }

/* «Continuar donde iban» */
.seguir-lista { display: grid; gap: 14px; }
.seguir { position: relative; display: grid; grid-template-columns: 64px 1fr 48px; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r);
  background: var(--blanco); border: 3px solid var(--noche); box-shadow: 5px 5px 0 var(--noche); color: var(--noche); text-decoration: none;
  transition: transform .15s, box-shadow .15s; animation: subir .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.seguir:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--noche); }
.seguir:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--noche); }
.seguir-av { width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid var(--noche); overflow: hidden; background: #fff; }
.seguir-txt { display: grid; gap: 3px; min-width: 0; }
.seguir-txt small { color: var(--suave); font-size: .86rem; font-weight: 600; }
.seguir-txt b { font: 600 1.15rem/1.2 Fredoka, Inter, sans-serif; }
.seguir-paso { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 2px 10px; border-radius: 99px; background: var(--coral-f);
  font: 600 .84rem Fredoka, sans-serif; }
.seguir-paso .ic { width: 16px; height: 16px; }
.seguir-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--coral); border: 2.5px solid var(--noche); }
.seguir-btn .ic { width: 24px; height: 24px; stroke-width: 3; }
.seguir-cerrado { background: var(--violeta-f); } .seguir-cerrado .seguir-paso { background: var(--blanco); }
.seguir-listo { background: var(--teal-f); } .seguir-listo .seguir-paso { background: var(--blanco); }
@keyframes subir { from { transform: translateY(14px); opacity: 0; } }

/* pendientes: el reto como tiquete troquelado */
.tiquete { display: grid; gap: 10px; padding: 18px 22px; background: var(--sol-f); border: 2.5px solid var(--noche); border-radius: 18px;
  -webkit-mask: radial-gradient(circle 11px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.tiquete-cab { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.tiquete-cab .av, .tiquete-cab .ic { width: 48px; height: 48px; }
.tiquete-cab p { margin: 0; }
.tiquete-nota { display: flex; gap: 8px; margin: 0; padding-top: 10px; border-top: 2px dashed rgba(36, 25, 61, .35); font-size: .92rem; color: var(--suave); }
.tiquete-nota .ic { color: var(--violeta); margin-top: 2px; }

/* el plan, como invitación */
.plan-cta { display: grid; grid-template-columns: 96px 1fr; gap: 6px 14px; align-items: center; padding: 16px; border-radius: var(--r); text-decoration: none; color: var(--noche);
  background: var(--sol); border: 3px solid var(--noche); box-shadow: 5px 5px 0 var(--noche); }
.plan-cta-ilus { width: 96px; height: 72px; }
.plan-cta-txt { display: grid; gap: 4px; }
.plan-cta-txt b { font: 800 1.2rem "Bricolage Grotesque", sans-serif; }
.plan-cta-txt > span:not(.plan-cta-precio) { font-size: .92rem; }
.plan-cta-precio { font: 700 1.3rem Fredoka, sans-serif; } .plan-cta-precio small { font: 500 .9rem Inter, sans-serif; }
.plan-cta .btn { grid-column: 1 / -1; }

/* los hijos */
.hijos { display: grid; gap: 14px; }
.hijo { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--blanco); border: 3px solid var(--noche); box-shadow: var(--sombra);
  animation: subir .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.hijo-principal { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.hijo-av { width: 72px; height: 72px; border-radius: 50%; padding: 4px; background: var(--c); border: 3px solid var(--noche); }
.hijo-av .av { border-radius: 50%; }
.hijo-txt { display: grid; gap: 6px; min-width: 0; }
.hijo-txt b { font: 800 1.4rem/1.1 "Bricolage Grotesque", sans-serif; }
.hijo-avance { display: grid; gap: 4px; }
.hijo-avance small { color: var(--suave); font-size: .84rem; font-weight: 600; }
.hijo-acc { display: flex; gap: 10px; }
.hijo-acc .btn { flex: 1; }
.hijo-nuevo { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 120px; padding: 18px; border-radius: var(--r);
  border: 3px dashed var(--noche); color: var(--noche); text-decoration: none; font: 600 1.05rem Fredoka, sans-serif; background: rgba(255, 255, 255, .6); }
.hijo-nuevo span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sol); border: 2.5px solid var(--noche); }
.hijo-nuevo .ic { width: 24px; height: 24px; stroke-width: 2.6; }

/* ═══ paredes de color (con borde de festón) ═══ */
.pared, .cabeza-pared { --ancho: 760px; position: relative; padding: 34px max(16px, calc((100% - var(--ancho)) / 2)) 40px; margin-top: 14px; }
.pared::before, .cabeza-pared.pared-violeta::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px;
  background: radial-gradient(circle at 14px 14px, var(--violeta) 13px, transparent 13.5px) repeat-x; background-size: 28px 14px; }
.pared-violeta { background-color: var(--violeta); color: #fff;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1.2px, transparent 1.5px); background-size: 16px 16px; }
.pared-violeta a:not(.pilar):not(.btn) { color: #fff; }
.pared-cab { margin-bottom: 18px; }
.pared-cab h2 { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; color: #fff; }
.pared-cab h2 .ic { width: 40px; height: 40px; padding: 7px; border-radius: 50%; background: var(--sol); color: var(--noche); border: 2px solid var(--noche); }
.pared-cab p { max-width: 46ch; }
.pared-sol { background-color: var(--sol); color: var(--noche);
  background-image: radial-gradient(rgba(36, 25, 61, .1) 1.2px, transparent 1.5px); background-size: 16px 16px; }
.cabeza-pared { margin-top: 0; display: grid; gap: 4px; padding-top: 26px; }
.cabeza-pared h1 { margin: 0; }
.cabeza-pared.pared-violeta h1 { color: #fff; }
.cabeza-pared > p:not(.sello) { max-width: 48ch; }
.cabeza-pared::after { content: ""; position: absolute; left: 0; right: 0; bottom: -13px; height: 14px; background: radial-gradient(circle at 14px 0, var(--feston, var(--violeta)) 13px, transparent 13.5px) repeat-x; background-size: 28px 14px; }
.cabeza-pared.pared-sol::after { --feston: var(--sol); }
.cabeza-pared.pared-violeta::before { display: none; }
.cabeza-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--sol); color: var(--noche); border: 3px solid var(--noche); margin: 0 0 8px; }
.cabeza-ic .ic { width: 30px; height: 30px; }
.cabeza-ilus { width: 128px; height: 96px; margin: 0 0 4px; }
.cabeza-avance { display: grid; gap: 4px; max-width: 320px; margin: 8px 0 0; }
.cabeza-avance small { font-weight: 600; }

/* los pilares (escuela para padres) */
.pilares { display: grid; gap: 12px; }
.pilar { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 20px; text-decoration: none;
  background: var(--blanco); color: var(--noche); border: 2.5px solid var(--noche); box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s; animation: subir .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.pilar:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--noche); }
.pilar:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--noche); }
.pilar-ilus { width: 96px; height: 76px; padding: 2px; border-radius: 16px; background: var(--sol-f); }
.pilar:nth-child(2n) .pilar-ilus { background: var(--teal-f); }
.pilar-t { display: grid; gap: 4px; min-width: 0; }
.pilar-t b { font: 800 1.1rem/1.15 "Bricolage Grotesque", sans-serif; }
.pilar-t small { color: var(--suave); font-size: .86rem; }
.pilar-avance { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.pilar-avance em { font: 600 .8rem Fredoka, sans-serif; font-style: normal; color: var(--suave); }
.pronto-tit { margin: 22px 0 8px; font: 600 1rem Fredoka, sans-serif; }
.pronto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pronto li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; border: 2px dashed rgba(255, 255, 255, .7);
  font: 500 .86rem Fredoka, sans-serif; color: #fff; }
.pronto-claro li { border-color: rgba(36, 25, 61, .45); color: var(--suave); background: var(--blanco); }
.pilares-grandes .pilar { grid-template-columns: 112px 1fr; align-items: start; }
.pilares-grandes .pilar-ilus { width: 112px; height: 88px; }

/* temas del pilar (padres) */
.temas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.temas li { animation: subir .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
.tema { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; text-decoration: none;
  background: var(--blanco); color: var(--noche); border: 2.5px solid var(--noche); box-shadow: var(--sombra-s); }
.tema:active { transform: translate(2px, 2px); box-shadow: none; }
.tema-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--noche); background: var(--sol-f);
  font: 700 1.05rem Fredoka, sans-serif; }
.tema-n .ic { width: 22px; height: 22px; stroke-width: 3; }
.tema.hecho .tema-n { background: var(--teal); }
.tema-ic { display: none; }
.tema-t { display: grid; gap: 2px; min-width: 0; }
.tema-t b { font: 600 1.05rem/1.25 Fredoka, Inter, sans-serif; }
.tema-t small { color: var(--suave); font-size: .86rem; }
.tema-e { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; border: 2px solid var(--noche); font: 600 .8rem Fredoka, sans-serif; }
.e-gratis { background: var(--sol); } .e-abrir { background: var(--coral-f); } .e-leida { background: var(--teal-f); }
.e-cerrado { background: var(--gris-f); padding: 5px; } .e-cerrado .ic { width: 18px; height: 18px; }
.tema.cerrado { background: var(--gris-f); box-shadow: none; border-style: dashed; }
.tema.cerrado .tema-t b { color: var(--suave); }

/* la guía */
.guia { display: grid; gap: 16px; }
.guia-cab, .leccion-cab { display: grid; grid-template-columns: 68px 1fr; gap: 14px; align-items: center; }
.guia-ic, .leccion-ic { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; rotate: -4deg; border: 3px solid var(--noche);
  box-shadow: var(--sombra); background: var(--violeta-f); color: var(--violeta); }
.guia-ic .ic, .leccion-ic .ic { width: 36px; height: 36px; }
.guia-cab h1, .leccion-cab h1 { margin: 6px 0 0; }
.idea { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 16px; border-radius: 18px; background: var(--sol-f); border: 2.5px solid var(--noche);
  font: 600 1.12rem/1.4 Fredoka, Inter, sans-serif; }
.idea > .ic { width: 28px; height: 28px; flex: none; color: var(--coral); }
.seccion { display: grid; gap: 4px; padding: 18px; border-radius: var(--r); background: var(--blanco); border: 2.5px solid var(--noche); box-shadow: var(--sombra); }
.seccion > h2 { display: flex; align-items: center; gap: 10px; }
.sec-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--violeta-f); color: var(--violeta); border: 2px solid var(--noche); }
.sec-ic .ic { width: 22px; height: 22px; }
.seccion-aviso { background: var(--coral-f); } .seccion-aviso .sec-ic { background: var(--blanco); color: var(--mal); }
.paso-num { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--coral); border: 2px solid var(--noche); font: 700 1.05rem Fredoka, sans-serif; }
.pasos { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.pasos-num { list-style: none; padding: 0; counter-reset: paso; }
.pasos-num li { counter-increment: paso; display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.pasos-num li::before { content: counter(paso); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sol);
  border: 2px solid var(--noche); font: 700 .9rem Fredoka, sans-serif; }
.momentos, .seccion-aviso ul, .por-edad ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.momentos li, .seccion-aviso li, .por-edad li { position: relative; padding-left: 22px; }
.momentos li::before, .seccion-aviso li::before, .por-edad li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border-radius: 3px;
  background: var(--teal); border: 2px solid var(--noche); rotate: 45deg; }
.seccion-aviso li::before { background: var(--coral); }
.pestanas { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 4px -2px 4px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 99px; cursor: pointer;
  border: 2px solid var(--noche); background: var(--blanco); color: var(--noche); font: 600 .95rem Fredoka, Inter, sans-serif; }
.pestanas button .ic { color: var(--c); stroke-width: 2.4; }
.pestanas button[aria-selected="true"] { background: var(--noche); color: #fff; box-shadow: 2px 2px 0 var(--c); }
.punto-hijo { width: 9px; height: 9px; border-radius: 50%; background: var(--sol); border: 1.5px solid var(--noche); }
.por-edad h3 { display: flex; align-items: center; gap: 8px; }
.por-edad h3 .ic { color: var(--violeta); }
.por-edad:not([hidden]) { animation: aparecer .3s ease-out both; }
.actividad { background: var(--teal-f); border-radius: 14px; padding: 12px 14px; border: 2px solid var(--noche); }
.cierre-guia { display: grid; gap: 10px; }
.video { width: 100%; max-height: 72vh; border-radius: var(--r); background: #000; border: 3px solid var(--noche); }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } }

/* ═══ formularios ═══ */
.formulario { display: grid; gap: 14px; }
.tarjeta-papel { max-width: 560px; padding: 22px 18px; border-radius: 26px; background: var(--blanco); border: 3px solid var(--noche); box-shadow: var(--sombra-g); }
.formulario label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.formulario input:not([type=checkbox]):not([type=radio]):not([type=file]), .formulario select {
  font: 500 1.05rem Inter, sans-serif; min-height: 52px; padding: 12px 14px; border-radius: var(--r-s); border: 2.5px solid var(--noche); background: var(--papel); color: var(--noche); width: 100%; }
.formulario input:focus, .formulario select:focus { outline: none; border-color: var(--violeta); box-shadow: 3px 3px 0 var(--violeta); background: #fff; }
.casilla { grid-template-columns: 26px 1fr !important; align-items: start; font-weight: 400 !important; font-size: .86rem !important; color: var(--suave); }
.casilla input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--violeta); }
.trampa { position: absolute; left: -9999px; }
.error, .ok { display: flex; gap: 8px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; margin: 0; font-size: .93rem; border: 2px solid currentColor; }
.error { background: var(--coral-f); color: var(--mal); }
.ok { background: var(--teal-f); color: var(--noche); border-color: var(--teal-osc); font-weight: 600; }
.ok .ic { color: var(--teal-osc); }
.form-sol { display: block; width: 120px; height: 64px; margin: 0 auto 2px; }
.form-entrada h1 { text-align: center; margin-bottom: 0; }
.form-entrada > .suave:first-of-type { text-align: center; }
.form-cabeza { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; }
.form-cabeza h1 { margin: 0; font-size: clamp(1.5rem, 6vw, 2rem); }
.avatar-vista { width: 88px; height: 88px; border-radius: 50%; border: 3px solid var(--noche); box-shadow: var(--sombra); overflow: hidden; background: #fff; }
.avatares { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatares legend { font-weight: 600; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.avatares label { display: block; position: relative; }
.avatares input { position: absolute; opacity: 0; inset: 0; }
.avatares span { display: grid; justify-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 16px; border: 2.5px solid transparent; cursor: pointer;
  transition: transform .18s var(--rebote), background .15s; }
.avatares span .av { width: 100%; max-width: 64px; aspect-ratio: 1; height: auto; border-radius: 50%; border: 2px solid var(--noche); }
.avatares small { font: 500 .76rem Fredoka, sans-serif; color: var(--suave); }
.avatares input:checked + span { border-color: var(--noche); background: var(--sol); transform: scale(1.04); box-shadow: var(--sombra-s); }
.avatares input:checked + span small { color: var(--noche); }
.avatares input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.opciones-pago { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opciones-pago legend { font-weight: 600; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.opciones-pago label { position: relative; display: block; }
.opciones-pago input { position: absolute; opacity: 0; inset: 0; }
.opciones-pago span { display: grid; justify-items: center; gap: 4px; min-height: 64px; padding: 10px 4px; border-radius: 14px; border: 2.5px solid var(--noche);
  background: var(--blanco); font: 600 .85rem Fredoka, sans-serif; text-align: center; cursor: pointer; }
.opciones-pago span .ic { width: 22px; height: 22px; }
.opciones-pago input:checked + span { background: var(--sol); box-shadow: var(--sombra-s); }
.opciones-pago input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.subir-archivo { position: relative; }
.subir-caja { display: grid; justify-items: center; gap: 4px; padding: 20px 14px; border-radius: 18px; border: 3px dashed var(--noche); background: var(--papel); text-align: center; cursor: pointer; }
.subir-caja .ic { width: 36px; height: 36px; color: var(--violeta); }
.subir-caja small { color: var(--suave); font-weight: 500; word-break: break-all; }
.subir-archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.subir-archivo.con-archivo .subir-caja { background: var(--teal-f); border-style: solid; }

/* ═══ el plan ═══ */
.plan-cabeza h1 { max-width: 18ch; }
.precio { font: 700 clamp(2.6rem, 12vw, 3.4rem)/1 Fredoka, sans-serif; margin: 6px 0 4px; }
.precio small { font: 500 1rem Inter, sans-serif; }
.aviso-estado { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r); border: 2.5px solid var(--noche);
  background: var(--blanco); box-shadow: var(--sombra); color: var(--noche); text-decoration: none; }
.aviso-estado.exito { background: var(--teal-f); }
.aviso-estado b { font: 600 1.15rem Fredoka, sans-serif; }
.aviso-estado p { margin: 4px 0 10px; }
.aviso-ilus { width: 110px; height: 82px; }
.aviso-estado.compacto { grid-template-columns: 48px 1fr auto; }
.aviso-estado.compacto p { margin: 2px 0 0; font-size: .92rem; }
.aviso-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--noche); }
.aviso-ic .ic { width: 24px; height: 24px; }
.aviso-plan { background: var(--sol-f); }
.aviso-chev { width: 24px; height: 24px; stroke-width: 3; }
.incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.incluye li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.incluye .ic { width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: var(--teal); border: 2px solid var(--noche); stroke-width: 3.2; }
.metodos { display: grid; gap: 12px; margin: 6px 0 10px; }
.metodo { display: grid; gap: 6px; justify-items: start; padding: 14px; border-radius: 16px; background: var(--papel); border: 2px solid var(--noche); }
.metodo-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sol); border: 2px solid var(--noche); }
.metodo-ic .ic { width: 22px; height: 22px; }
.metodo b { font: 600 1.05rem Fredoka, sans-serif; }
.metodo p { margin: 0; font-size: .9rem; color: var(--suave); }
.metodo img { width: 100%; max-width: 180px; height: auto; border-radius: 10px; background: #fff; border: 2px solid var(--noche); }
.llave { font: 700 1.3rem Fredoka, sans-serif; letter-spacing: .03em; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 10px; background: #fff; border: 2px dashed var(--noche); }

/* ═══ la cuenta ═══ */
.perfil { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.perfil h1 { margin: 0; font-size: clamp(1.5rem, 6vw, 2rem); }
.perfil p { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; }
.perfil-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--sol); border: 3px solid var(--noche); box-shadow: var(--sombra); }
.perfil-ic .ic { width: 36px; height: 36px; }
.lista-hijos { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 10px; }
.lista-hijos li { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.lista-hijos .av { width: 48px; height: 48px; }
.lista-hijos span { display: grid; } .lista-hijos small { color: var(--suave); }

/* ═══ MODO NIÑO ═══ */
.modo-nino { font-size: 17px; }
.nino-hola { position: relative; isolation: isolate; overflow: hidden; min-height: 200px; padding: 22px 16px 34px; color: #fff; display: grid; align-content: end; }
.nino-cielo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.nino-hola-fila { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; width: 100%; max-width: 760px; margin-inline: auto; }
.nino-av { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--noche); background: #fff; box-shadow: 0 5px 0 var(--noche); overflow: hidden;
  animation: brincar .55s var(--rebote) both; }
.nino-hola h1 { color: #fff; margin: 0 0 6px; font-size: clamp(1.7rem, 7.5vw, 2.4rem); text-shadow: 0 3px 0 var(--noche); }
.nino-hola .chip-ruta .ic { color: var(--c); }

/* el sendero de la ruta */
.pilar-ruta { display: grid; gap: 4px; }
.pilar-cab { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 20px; background: var(--blanco);
  border: 2.5px solid var(--noche); box-shadow: var(--sombra); }
.pilar-cab-ilus { width: 96px; height: 72px; }
.pilar-cab h2 { margin: 0 0 2px; font-size: 1.2rem; }
.pilar-cab small { display: block; color: var(--suave); font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
.camino { position: relative; list-style: none; margin: 8px 0 0; padding: 0; height: calc(var(--n) * 136px); }
.camino-linea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.camino-linea .sendero { fill: none; stroke: #FFE3B8; stroke-width: 26; stroke-linecap: round; }
.camino-linea .borde { fill: none; stroke: var(--noche); stroke-width: 30; stroke-linecap: round; opacity: .9; }
.camino-linea .huellas { fill: none; stroke: var(--noche); stroke-width: 3; stroke-dasharray: 3 11; stroke-linecap: round; opacity: .45; }
.estacion { position: relative; height: 136px; animation: brincar .4s var(--rebote) both; animation-delay: calc(.05s + var(--i) * 45ms); }
.estacion a { position: absolute; inset: 0; color: var(--noche); text-decoration: none; }
.nodo { position: absolute; top: 50%; left: 25%; translate: -50% -50%; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  background: var(--blanco); border: 3px solid var(--noche); box-shadow: 0 5px 0 var(--noche); transition: transform .18s var(--rebote); }
.der .nodo { left: 75%; }
.nodo > .ic { width: 34px; height: 34px; }
.estacion a:hover .nodo { transform: translateY(-3px); }
.estacion a:active .nodo { transform: translateY(3px); box-shadow: 0 2px 0 var(--noche); }
.estacion-txt { position: absolute; top: 50%; translate: 0 -50%; left: calc(25% + 48px); right: 0; display: grid; gap: 3px; justify-items: start; }
.der .estacion-txt { left: 0; right: calc(25% + 48px); justify-items: end; text-align: right; }
.estacion-txt b { font: 600 1.06rem/1.2 Fredoka, Inter, sans-serif; padding: 2px 6px; margin: 0 -6px; border-radius: 8px; background: rgba(255, 248, 240, .85); }
.estacion-txt small { font-size: .84rem; font-weight: 600; color: var(--suave); }
.completo .nodo { background: var(--teal); }
.completo .nodo > .ic { stroke-width: 3.2; }
.nodo-estrella { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--sol); border: 2.5px solid var(--noche); color: var(--coral); }
.nodo-estrella .ic { width: 18px; height: 18px; }
.actual .nodo { width: 88px; height: 88px; background: var(--coral); }
.actual .nodo::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid var(--coral); animation: latir 1.8s ease-out infinite; }
@keyframes latir { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.3); opacity: 0; } }
.aqui { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: var(--noche); color: #fff; font: 600 .78rem Fredoka, sans-serif; }
.aqui .ic { width: 14px; height: 14px; color: var(--sol); }
.espera .nodo { background: var(--ambar); }
.cerrado .nodo { background: var(--gris-f); border-style: dashed; box-shadow: none; color: var(--suave); }
.cerrado .estacion-txt b { color: var(--suave); }

.barra-seguir { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(255, 248, 240, 0), var(--papel) 36%); pointer-events: none; }
.barra-seguir .btn { pointer-events: auto; max-width: 560px; margin-inline: auto; display: flex; }
.barra-seguir:empty { display: none; }
.barra-seguir-txt { display: grid; min-width: 0; text-align: left; }
.barra-seguir-txt small { font: 500 .8rem Inter, sans-serif; }
.barra-seguir .btn { overflow: hidden; }
.barra-seguir-txt { overflow: hidden; }
.barra-seguir-txt, .barra-seguir-txt small { white-space: nowrap; text-overflow: ellipsis; }

/* la hoja (dialog) */
.hoja { width: 100%; max-width: 520px; margin: auto auto 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); border: 3px solid var(--noche); border-bottom: 0;
  border-radius: 28px 28px 0 0; background: var(--blanco); color: var(--noche); text-align: center; }
.hoja[open] { animation: hoja .3s cubic-bezier(.2, .8, .2, 1) both; }
.hoja::backdrop { background: rgba(36, 25, 61, .55); }
.hoja-ilus { width: 180px; height: 135px; margin: 0 auto 4px; }
.hoja h2 { font-size: 1.4rem; }
@keyframes hoja { from { transform: translateY(40px); opacity: 0; } }

/* el tema del niño */
.leccion { display: grid; gap: 18px; }
.leccion-ic { background: var(--sol); color: var(--noche); }
.leccion-titulo { font-size: clamp(1.55rem, 6.8vw, 2.1rem); }
.chip-claro { background: var(--blanco); }
.pasos-nav { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pasos-nav::before { content: ""; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 4px;
  background: repeating-linear-gradient(90deg, var(--noche) 0 8px, transparent 8px 14px); opacity: .35; }
.pasos-nav button { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 0 4px; min-height: 76px; border: 0; background: none; cursor: pointer;
  color: var(--noche); font: 600 .84rem Fredoka, Inter, sans-serif; }
.pn-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blanco); border: 3px solid var(--noche);
  transition: transform .2s var(--rebote), background .2s; }
.pn-ic .ic { width: 26px; height: 26px; grid-area: 1 / 1; }
.pn-ic .pn-check { display: none; stroke-width: 3.2; }
.pasos-nav button.listo .pn-ic { background: var(--teal); }
.pasos-nav button.listo .pn-ic .ic:not(.pn-check) { display: none; }
.pasos-nav button.listo .pn-check { display: block; }
.pasos-nav button[aria-current="true"] .pn-ic { background: var(--coral); transform: scale(1.1); box-shadow: 0 4px 0 var(--noche); }
.pasos-nav button[aria-current="true"] .pn-txt { text-decoration: underline 3px var(--coral); text-underline-offset: 4px; }
.paso { display: grid; gap: 16px; }
.paso:not([hidden]) { animation: aparecer .32s ease-out both; }
.video-nino { aspect-ratio: 16 / 9; max-height: 70vh; object-fit: contain; }   /* clases en video: horizontales (1920×1080) */
.video-pronto { display: grid; justify-items: center; text-align: center; padding: 18px; border-radius: 24px; background: var(--blanco); border: 3px solid var(--noche); box-shadow: var(--sombra); }
.video-pronto-ilus { width: 170px; height: 128px; }
.video-pronto p { margin: 0 0 4px; }
.video-pronto blockquote { margin: 12px 0 0; text-align: left; background: var(--sol-f); border-radius: 16px; padding: 14px 16px; font-size: 1.04rem; border: 2px solid var(--noche); }
.tarjetas-lectura { display: grid; }
.tl { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 320px; padding: 26px 20px 18px; text-align: center; border-radius: 28px;
  background: var(--blanco); border: 3px solid var(--noche); box-shadow: var(--sombra-g); rotate: calc((var(--k, 0) - 1.5) * .7deg); animation: carta .35s var(--rebote) both; }
.tl-ic { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--noche); background: var(--coral-f); }
.tl[style*="--k: 1"] .tl-ic { background: var(--teal-f); } .tl[style*="--k: 2"] .tl-ic { background: var(--violeta-f); } .tl[style*="--k: 3"] .tl-ic { background: var(--sol-f); }
.tl-ic .ic { width: 50px; height: 50px; stroke-width: 1.8; }
.tl h2 { font: 700 1.45rem Fredoka, sans-serif; margin: 4px 0 0; }
.tl p { font-size: 1.15rem; margin: 0; max-width: 32ch; }
.tl-n { margin-top: 6px; padding: 2px 10px; border-radius: 99px; background: var(--papel); border: 2px solid var(--noche); font: 600 .8rem Fredoka, sans-serif; }
@keyframes carta { from { transform: translateX(22px) rotate(3deg); opacity: 0; } }
.frase { text-align: center; margin: 0; font: 600 1.12rem/1.6 Fredoka, sans-serif; text-wrap: balance; }
.frase .ic { width: 26px; height: 26px; color: var(--coral); vertical-align: -.4em; margin-right: 4px; }
.frase span { background: linear-gradient(transparent 62%, var(--sol) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; }

/* los juegos (los pinta app.js) */
.juego { display: grid; gap: 14px; min-height: 340px; padding: 18px; border-radius: 26px; background: var(--blanco); border: 3px solid var(--noche); box-shadow: var(--sombra-g); }
.instruccion { font-weight: 600; margin: 0; }
.instruccion .ic { color: var(--coral); }
.contador { justify-self: center; padding: 2px 12px; border-radius: 99px; background: var(--papel); border: 2px solid var(--noche); font: 600 .84rem Fredoka, sans-serif; }
.carta { display: grid; justify-items: center; gap: 8px; padding: 22px 14px; border-radius: 22px; background: var(--sol-f); border: 2.5px solid var(--noche); text-align: center;
  animation: carta .3s var(--rebote) both; }
.carta > span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--blanco); border: 2.5px solid var(--noche); }
.carta > span .ic { width: 46px; height: 46px; stroke-width: 1.8; }
.carta b { font: 600 1.22rem/1.25 Fredoka, Inter, sans-serif; }
.carta small { color: var(--suave); font-weight: 600; }
.grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grupo, .opcion, .pieza { border: 2.5px solid var(--noche); background: var(--blanco); color: var(--noche); border-radius: 16px; padding: 14px 12px; min-height: 60px;
  font: 600 1.02rem Fredoka, Inter, sans-serif; cursor: pointer; box-shadow: 3px 3px 0 var(--noche); transition: transform .1s, box-shadow .1s; }
.grupo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 68px; }
.grupo .ic { width: 22px; height: 22px; }
.grupo:active, .opcion:active, .pieza:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--noche); }
.grupo:disabled, .opcion:disabled { cursor: default; }
.opciones { display: grid; gap: 10px; }
.opcion { text-align: left; font: 600 1rem/1.35 Inter, sans-serif; }
.correcto { border-color: var(--bien) !important; background: var(--teal-f) !important; box-shadow: 3px 3px 0 var(--bien) !important; animation: acierto .4s var(--rebote); }
.incorrecto { border-color: var(--mal) !important; background: var(--coral-f) !important; box-shadow: 3px 3px 0 var(--mal) !important; animation: fallo .35s ease; }
@keyframes acierto { 40% { transform: scale(1.05); } }
@keyframes fallo { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pregunta { font: 600 1.15rem/1.35 Fredoka, Inter, sans-serif; margin: 0; }
.retro { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--noche); animation: aparecer .25s ease-out both; }
.retro.bien { background: var(--teal-f); } .retro.mal { background: var(--coral-f); }
.retro .ic { color: var(--coral); }
.orden-tuyo { margin: 0; padding-left: 28px; display: grid; gap: 8px; min-height: 60px; }
.orden-tuyo li::marker { font: 700 1rem Fredoka, sans-serif; }
.orden-tuyo button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; min-height: 48px;
  border: 2.5px solid var(--violeta); background: var(--violeta-f); color: var(--noche); border-radius: 12px; font: 600 .96rem Inter, sans-serif; cursor: pointer; animation: aparecer .2s ease-out both; }
.orden-tuyo button .ic { color: var(--violeta); flex: none; }
.orden-tuyo .vacio { list-style: none; margin-left: -28px; padding: 12px; border-radius: 12px; border: 2px dashed rgba(36, 25, 61, .4); color: var(--suave); text-align: center; }
.orden-piezas { display: grid; gap: 8px; }
.pieza { text-align: left; font: 600 .98rem/1.35 Inter, sans-serif; }
.orden-final { margin: 0; padding-left: 24px; display: grid; gap: 4px; text-align: left; }
.orden-final .o-si { color: var(--bien); font-weight: 600; }
.orden-final .o-si::marker { color: var(--bien); }
.orden-final .o-no { color: var(--suave); }
.juego-fin { text-align: center; display: grid; gap: 10px; }
.juego-fin .fila-botones { flex-direction: column-reverse; }
.juego-fin .fila-botones .btn { flex: none; width: 100%; }
.estrellas-fin { display: flex; justify-content: center; gap: 8px; }
.estrellas-fin span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gris-f); border: 3px solid var(--noche); color: var(--suave);
  animation: brincar .45s var(--rebote) both; animation-delay: calc(var(--k) * 120ms); }
.estrellas-fin span:nth-child(2) { translate: 0 -10px; }
.estrellas-fin span.gana { background: var(--sol); color: var(--coral); }
.estrellas-fin .ic { width: 36px; height: 36px; }
.juego-fin h2 { font: 700 1.6rem Fredoka, sans-serif; margin: 6px 0 0; }
.puntaje { font: 700 1.2rem Fredoka, sans-serif; margin: 0; }
.alc-meta { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--teal-f); border: 2.5px solid var(--noche); }
.alc-meta > span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--blanco); border: 2.5px solid var(--noche); }
.alc-meta > span .ic { width: 34px; height: 34px; }
.alc-meta small { display: block; color: var(--suave); font-weight: 600; margin-bottom: 4px; }
.alc-ingreso { display: flex; justify-content: center; align-items: center; gap: 6px; text-align: center; font-size: 1.05rem; margin: 0; }
.alc-ingreso .ic { color: var(--ambar); width: 24px; height: 24px; }
.tentacion { border: 3px dashed var(--ambar); background: var(--blanco); }
.alc-fin { display: grid; gap: 8px; }

/* el reto en casa */
.reto { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 22px 18px; border-radius: 26px; background: var(--blanco); border: 3px solid var(--noche); box-shadow: var(--sombra-g); }
.reto-ic { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--teal-f); border: 3px solid var(--noche); rotate: -5deg; }
.reto-ic .ic { width: 44px; height: 44px; }
.reto h2 { font: 700 1.4rem Fredoka, sans-serif; }
.reto .pasos { list-style: none; padding: 0; counter-reset: paso; text-align: left; width: 100%; }
.reto .pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.reto .pasos li::before { content: counter(paso); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sol); border: 2px solid var(--noche);
  font: 700 .95rem Fredoka, sans-serif; }
.nota-papa { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--violeta-f); border: 2px solid var(--noche); font-size: .94rem; }
.nota-papa .ic { width: 24px; height: 24px; color: var(--violeta); flex: none; }
.celebra { display: grid; justify-items: center; gap: 4px; text-align: center; margin: 0; padding: 14px; border-radius: 20px; background: var(--teal-f); border: 2.5px solid var(--noche);
  font: 600 1.06rem Fredoka, Inter, sans-serif; animation: brincar .45s var(--rebote) both; }
.celebra p { margin: 0; }
.celebra-espera { background: var(--sol-f); }
.celebra-ilus { width: 140px; height: 105px; }
.celebra-ic { width: 40px; height: 40px; color: var(--coral); }
p.celebra { display: block; }
p.celebra .celebra-ic { width: 26px; height: 26px; vertical-align: -.4em; }

/* el confeti (app.js) */
.confeti { position: fixed; z-index: 90; left: var(--x0); top: var(--y0); width: 0; height: 0; pointer-events: none; }
.confeti i { position: absolute; left: -5px; top: -7px; width: 10px; height: 14px; border-radius: 2px; animation: volar 1.1s cubic-bezier(.15, .7, .35, 1) forwards; }
.confeti i.redondo { width: 11px; height: 11px; border-radius: 50%; }
@keyframes volar {
  0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 1; }
  55% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * .6)) scale(1); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 150px)) rotate(var(--r)) scale(1); opacity: 0; }
}

/* ═══ pantallas medianas y escritorio ═══ */
@media (min-width: 600px) {
  .seguir-lista, .hijos { grid-template-columns: repeat(2, 1fr); }
  .pilares { grid-template-columns: repeat(2, 1fr); }
  .metodos { grid-template-columns: repeat(3, 1fr); }
  .tema { grid-template-columns: 40px 48px 1fr auto; }
  .tema-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--violeta-f); color: var(--violeta); }
  .tema-ic .ic { width: 26px; height: 26px; }
  .tarjeta-papel { padding: 28px 26px; }
  .amanecer { --escena: 260px; padding-top: 34px; }
  .avatares { grid-template-columns: repeat(6, 1fr); }
  .plan-cta { grid-template-columns: 120px 1fr auto; }
  .plan-cta-ilus { width: 120px; height: 90px; }
  .plan-cta .btn { grid-column: auto; }
}
@media (min-width: 900px) {
  .contenido > * { width: min(100% - 48px, 1000px); }
  .contenido > .guia, .contenido > .leccion, .contenido > .formulario, .contenido > .temas, .contenido > .seccion, .contenido > .perfil,
  .contenido > .aviso-estado, .contenido > .pilar-ruta, .contenido > p, .contenido > .vacio { width: min(100% - 48px, 760px); }
  .pared, .cabeza-pared { --ancho: 1000px; }
  .nav-escritorio { display: flex; gap: 4px; }
  .nav-escritorio a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 99px; color: #fff; text-decoration: none;
    font: 600 .98rem Fredoka, sans-serif; }
  .nav-escritorio a:hover { background: rgba(255, 255, 255, .12); }
  .nav-escritorio a[aria-current="page"] { background: var(--sol); color: var(--noche); }
  .tabbar { display: none; }
  .con-nav .contenido { padding-bottom: 64px; }
  .con-nav .contenido > .pared:last-child { margin-bottom: -64px; padding-bottom: 72px; }
  .barra { padding-inline: 24px; }
  .amanecer { --escena: 300px; padding: 48px 24px calc(var(--escena) - 20px); }
  .amanecer-txt, .colina-hijos { max-width: 1000px; }
  .colina-hijos { padding: 0 24px; }
  .colina-hijos .av { width: 76px; height: 76px; }
  .seguir-lista { grid-template-columns: repeat(3, 1fr); }
  .hijos { grid-template-columns: repeat(3, 1fr); }
  .pilares { grid-template-columns: repeat(3, 1fr); }
  .pilares-grandes { grid-template-columns: repeat(2, 1fr); }
  .camino { width: 100%; max-width: 560px; margin-inline: auto; }
  .nino-hola { min-height: 230px; }
  .hoja { margin: auto; border-radius: 28px; border-bottom: 3px solid var(--noche); padding-bottom: 24px; }
}

/* movimiento reducido: todo queda quieto y en su estado final */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* enlaces sueltos dentro del texto: zona de toque de 44 px sin mover el renglón */
.formulario .centro a, .nota a { display: inline-block; padding: 13px 4px; margin: -13px -4px; }

/* ═══════════ EL CALENDARIO POR FAMILIA (5-oct-2026) ═══════════
   La semana del niño (nino.php), la semana de la familia (inicio y escuela para padres), el aviso de nivel y la
   celebración. Mismas piezas de juguete: contorno de tinta, sombra sólida, colores de la marca. */
.semana-cab { display: grid; gap: 10px; margin-top: -8px; }
.semana-num { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 600 1.05rem/1.3 Fredoka, Inter, sans-serif; }
.semana-num > .ic { width: 26px; height: 26px; color: var(--coral); }
.semana-num b { font-size: 1.25rem; }
.semana-num span { color: var(--suave); }
.temporada-barra { display: flex; gap: 6px; }
.temporada-barra i { flex: 1; height: 14px; border-radius: 99px; border: 2px solid var(--noche); background: var(--blanco); }
.temporada-barra i.si { background: var(--teal); }
.temporada-barra i.hoy:not(.si) { background: repeating-linear-gradient(-45deg, var(--sol) 0 6px, var(--sol-f) 6px 12px); }

.semana-card { position: relative; display: grid; gap: 14px; padding: 18px; border-radius: var(--r); background: var(--blanco); border: 3px solid var(--noche);
  box-shadow: var(--sombra-g); animation: subir .45s cubic-bezier(.2, .8, .2, 1) both; }
.semana-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; border-radius: 19px 19px 0 0; background: var(--c, var(--coral)); }
.semana-etq { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 4px 0 0; padding: 3px 12px; border-radius: 99px; background: var(--sol);
  border: 2px solid var(--noche); font: 700 .9rem Fredoka, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.semana-etq .ic { width: 18px; height: 18px; color: var(--coral); }
.semana-tema { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; }
.semana-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--c, var(--coral)); color: #fff; border: 3px solid var(--noche); box-shadow: var(--sombra-s); }
.semana-ic .ic { width: 38px; height: 38px; stroke-width: 2.2; }
.semana-area { display: flex; align-items: center; gap: 5px; margin: 0 0 2px; color: var(--suave); font-size: .9rem; font-weight: 600; }
.semana-tema h2 { margin: 0; font: 600 clamp(1.35rem, 6vw, 1.7rem)/1.15 Fredoka, Inter, sans-serif; }
.semana-dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.semana-dias li { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 16px; background: var(--papel); border: 2px solid var(--noche); text-align: center; }
.semana-dias small { font-size: .74rem; font-weight: 600; color: var(--suave); line-height: 1.1; min-height: 2.2em; display: grid; place-items: center; }
.semana-dias .dia-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--noche); }
.semana-dias .dia-ic .ic { width: 22px; height: 22px; }
.semana-dias b { font: 600 .9rem/1.15 Fredoka, sans-serif; }
.semana-dias li.listo { background: var(--teal-f); }
.semana-dias li.listo .dia-ic { background: var(--teal); color: #fff; }
.semana-dias li.toca { background: var(--sol-f); box-shadow: var(--sombra-s); }
.semana-dias li.toca .dia-ic { background: var(--sol); }
.semana-nota { margin: -4px 0 0; font-size: .85rem; color: var(--suave); text-align: center; }
.semana-candado { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--violeta-f); border: 2px dashed var(--noche); font-weight: 600; }
.semana-candado .ic { width: 24px; height: 24px; color: var(--violeta); }
.semana-card.est-cola .semana-ic, .semana-card.est-plan .semana-ic { background: var(--gris-f); color: var(--violeta); }
.semana-fin { justify-items: center; text-align: center; }
.semana-fin-ilus { width: 160px; height: 120px; }
.semana-fin h2 { margin: 0; font: 600 1.6rem Fredoka, sans-serif; }

.puente { display: flex; gap: 10px; align-items: flex-start; margin-top: -10px; padding: 12px 14px; border-radius: 16px; background: var(--violeta-f); border: 2px solid var(--noche); font-size: .95rem; }
.puente > .ic { width: 22px; height: 22px; margin-top: 2px; color: var(--violeta); }

.lista-sem { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-sem li { animation: subir .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
.item-sem { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--blanco);
  border: 2.5px solid var(--noche); box-shadow: var(--sombra-s); color: var(--noche); text-decoration: none; }
a.item-sem:not([aria-disabled]):active { transform: translate(2px, 2px); box-shadow: none; }
.item-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--coral-f); border: 2px solid var(--noche); }
.item-ic .ic { width: 26px; height: 26px; }
.item-txt { display: grid; gap: 2px; min-width: 0; }
.item-txt small { color: var(--suave); font-size: .82rem; font-weight: 600; }
.item-txt b { font: 600 1.05rem/1.2 Fredoka, Inter, sans-serif; }
.item-estado { font-size: .85rem; color: var(--suave); }
.item-ir { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--coral); border: 2px solid var(--noche); }
.item-ir .ic { width: 20px; height: 20px; stroke-width: 3; }
.opcional { font-style: normal; padding: 0 8px; border-radius: 99px; background: var(--sol-f); border: 1.5px solid var(--noche); color: var(--noche); }
.item-sem.cola, .item-sem.plan, .item-sem.futuro { background: var(--gris-f); border-style: dashed; box-shadow: none; }
.item-sem.cola .item-ic, .item-sem.plan .item-ic, .item-sem.futuro .item-ic { background: var(--blanco); color: var(--violeta); }
.item-sem.completo .item-ic { background: var(--teal); color: #fff; }
.item-sem.espera .item-ic { background: var(--sol-f); }
.item-sem.repaso .item-ic { background: var(--sol); }
.lista-sem.compacta .item-sem { grid-template-columns: 40px 1fr; padding: 10px; }
.lista-sem.compacta .item-ic { width: 40px; height: 40px; }
.por-area { padding: 14px 16px; border-radius: var(--r); background: var(--blanco); border: 2.5px solid var(--noche); }
.por-area summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font: 600 1.1rem Fredoka, sans-serif; }
.por-area summary small { font: 500 .85rem Inter, sans-serif; color: var(--suave); }
.por-area summary .ic { width: 24px; height: 24px; color: var(--violeta); }
.por-area h3 { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; }

.hoja-nivel { text-align: center; }
.hoja-nivel::before { content: ""; position: absolute; inset: 0 0 auto; height: 12px; background: var(--c); }
.nivel-insignia { display: grid; place-items: center; width: 112px; height: 112px; margin: 10px auto 6px; border-radius: 50%; background: var(--c); color: #fff;
  border: 3px solid var(--noche); box-shadow: var(--sombra-g); animation: nivel .7s var(--rebote) both; }
.nivel-insignia .ic { width: 60px; height: 60px; stroke-width: 2.2; }
.nivel-antes { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; color: var(--suave); font-weight: 600; }
.nivel-antes b { color: var(--noche); }
.hoja-nivel h2 { font: 600 1.7rem Fredoka, sans-serif; margin: 6px 0; }
@keyframes nivel { from { transform: scale(.3) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }

.semana-familia { display: grid; gap: 12px; padding: 18px; border-radius: var(--r); background: var(--blanco); border: 3px solid var(--noche); box-shadow: var(--sombra-g); }
.semana-familia h2 { margin: 0; font-size: 1.35rem; }
.semana-familia h2 span { font-weight: 700; color: var(--suave); font-size: 1.05rem; }
.semana-familia h3 { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; }
.semana-familia h3 .ic { color: var(--violeta); }
.sf-tema { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.sf-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--violeta); color: #fff; border: 2.5px solid var(--noche); }
.sf-ic .ic { width: 30px; height: 30px; }
.sf-tema small { display: flex; align-items: center; gap: 5px; color: var(--suave); font-weight: 600; font-size: .88rem; }
.sf-tema b { display: block; font: 600 1.3rem/1.2 Fredoka, Inter, sans-serif; }
.sf-candado { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--violeta-f); border: 2px dashed var(--noche); color: var(--noche); text-decoration: none; font-weight: 600; }
.sf-candado .ic { width: 24px; height: 24px; color: var(--violeta); }
.sf-preguntas { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.sf-hijos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-hijos a { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 16px; background: var(--papel);
  border: 2px solid var(--noche); color: var(--noche); text-decoration: none; }
.sf-hijos .av { width: 44px; height: 44px; }
.sf-hijos span { display: grid; min-width: 0; }
.sf-hijos .pasitos { display: inline-flex; }
.sf-hijos small { color: var(--suave); font-size: .85rem; }
.sf-hijos li.completo a { background: var(--teal-f); }
.sf-hijos li.espera a { background: var(--sol-f); }
.sf-fin p { margin: 0; }

.aviso-nivel { display: grid; grid-template-columns: 52px 1fr 48px; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r); background: var(--blanco);
  border: 2.5px solid var(--noche); box-shadow: var(--sombra); border-left: 10px solid var(--c); }
.aviso-nivel p { margin: 0; font-size: .95rem; }
.aviso-nivel p b { display: block; font: 600 1.1rem Fredoka, sans-serif; }
.aviso-nivel-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c); color: #fff; border: 2.5px solid var(--noche); }
.aviso-nivel-ic .ic { width: 28px; height: 28px; }

@media (min-width: 900px) {
  .modo-nino .contenido > :not(.nino-hola), .contenido > .semana-familia, .contenido > .aviso-nivel { width: min(100% - 48px, 760px); }
}

/* ── Registro formal en 4 pasos (10-oct-2026) ───────────────────────── */
.reg-pasos { list-style: none; margin: 0 auto 18px; padding: 0; max-width: 720px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: none; }
.reg-pasos li { display: grid; justify-items: center; text-align: center; gap: 6px; position: relative; color: var(--suave); }
.reg-pasos li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 3px; border-radius: 3px; background: var(--gris-f); }
.reg-pasos li.hecho:not(:last-child)::after { background: var(--teal); }
.reg-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem Fredoka, sans-serif; background: var(--blanco); border: 2.5px solid var(--gris-f); }
.reg-n .ic { width: 18px; height: 18px; }
.reg-t b { display: block; font-size: .86rem; color: var(--noche); }
.reg-t small { display: none; font-size: .74rem; line-height: 1.25; }
.reg-pasos .actual .reg-n { background: var(--coral); border-color: var(--noche); color: #fff; box-shadow: var(--sombra-s); }
.reg-pasos .hecho .reg-n { background: var(--teal); border-color: var(--teal); color: #fff; }
.reg-pasos .espera .reg-n { background: var(--sol); border-color: var(--noche); }
@media (min-width: 640px) { .reg-t small { display: block; } }
.reg-form { max-width: 640px; margin: 0 auto; }
.reg-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.reg-form legend { font: 800 1.05rem "Bricolage Grotesque", Inter, sans-serif; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.reg-dos { display: grid; gap: 12px; }
@media (min-width: 560px) { .reg-dos { grid-template-columns: 1fr 1fr; } .reg-dos.doc { grid-template-columns: 1fr 1.4fr; } }
.reg-ayuda { font-weight: 400; font-size: .8rem; color: var(--suave); }
.reg-legal { background: var(--papel); border: 2px dashed var(--gris-f); border-radius: var(--r-s); padding: 14px; display: grid; gap: 10px; }
.reg-legal .casilla { font-size: .88rem !important; color: var(--noche); }
.reg-legal .opcional { color: var(--suave); }
.reg-nota { display: flex; gap: 10px; align-items: flex-start; background: var(--violeta-f); border-radius: var(--r-s); padding: 12px 14px; font-size: .9rem; margin: 0; }
.reg-nota .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--violeta); }
.reg-ref { font: 700 1.3rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; background: var(--sol-f); border: 2px solid var(--noche); border-radius: 10px; padding: 4px 10px; display: inline-block; }
.reg-instr { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.reg-hijos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reg-hijos li { display: flex; gap: 10px; align-items: center; background: var(--teal-f); border-radius: var(--r-s); padding: 10px 12px; }
.reg-hijos .av { width: 40px; height: 40px; }
.legal { max-width: 760px; margin: 0 auto; background: var(--blanco); border: 2px solid var(--noche); border-radius: var(--r); padding: 22px 20px; }
.legal h2 { font-size: 1.1rem; margin-top: 1.4em; } .legal p, .legal li { font-size: .95rem; }
.reg-error { display: block; color: var(--mal); font-weight: 600; font-size: .82rem; }
.formulario [aria-invalid="true"] { border-color: var(--mal) !important; background: var(--coral-f) !important; }

/* ── Cronograma del año para los padres (10-oct-2026) ───────────────── */
.crono-ritmo { text-align: center; margin: 4px 0 16px; }
.crono-temp { margin: 0 0 22px; }
.crono-tn { display: inline-block; font: 600 .8rem Fredoka, sans-serif; background: var(--noche); color: #fff; border-radius: 999px; padding: 2px 10px; margin-right: 6px; vertical-align: middle; }
.crono-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.crono-item a { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: var(--r-s); background: var(--blanco); border: 2px solid var(--gris-f); color: inherit; text-decoration: none; }
.crono-item a:hover { border-color: var(--violeta); }
.crono-item.ahora a { border-color: var(--noche); box-shadow: var(--sombra); background: var(--sol-f); }
.crono-item.fuera a { opacity: .72; }
.crono-n { display: grid; justify-items: center; background: var(--violeta-f); border-radius: 12px; padding: 4px 0; }
.crono-n small { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.crono-n b { font: 700 1.35rem Fredoka, sans-serif; line-height: 1.1; }
.crono-txt { display: grid; gap: 3px; min-width: 0; }
.crono-meta { font-size: .8rem; color: var(--suave); display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.crono-meta .ic { width: 15px; height: 15px; }
.crono-tema { font-size: 1rem; }
.crono-rutas { display: grid; gap: 1px; font-size: .84rem; color: var(--suave); }
.crono-chip { grid-column: 2; justify-self: start; font: 600 .74rem Fredoka, sans-serif; border-radius: 999px; padding: 2px 10px; background: var(--gris-f); color: var(--noche); }
.crono-chip.ahora { background: var(--coral); color: #fff; } .crono-chip.abierta { background: var(--teal-f); color: var(--teal-osc); }
.crono-chip.proxima { background: var(--violeta-f); color: var(--violeta); } .crono-chip.fuera { background: var(--coral-f); color: var(--mal); }
.crono-semana .crono-chip { display: inline-block; }
.crono-hijo { border-left: 6px solid var(--ruta); padding-left: 14px; }
.crono-hijo h2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .crono-hijo h2 .av { width: 34px; height: 34px; }
.crono-hijo h3 { display: flex; gap: 6px; align-items: center; } .crono-hijo h3 .ic { width: 18px; height: 18px; color: var(--ruta); }
.crono-nav { justify-content: center; margin: 20px 0; }
@media print {
  .barra, .tabbar, .nav-escritorio, .fila-botones, .crono-nav, .aviso-plan, .reg-nota { display: none !important; }
  body { background: #fff !important; font-size: 11px; }
  .crono-item a { border: 1px solid #ccc; box-shadow: none !important; padding: 6px; break-inside: avoid; }
  .crono-temp { break-inside: auto; } .cabeza-pared { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
}

/* ── Modo colegio (11-oct-2026) ─────────────────────────────────────── */
.col-grados { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0 0 22px; }
.col-grado { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-s); background: var(--blanco); border: 2px solid var(--gris-f); border-top: 6px solid var(--c); color: inherit; text-decoration: none; }
.col-grado:hover { border-color: var(--violeta); border-top-color: var(--c); }
.col-grado b { font: 800 1.6rem "Bricolage Grotesque", Inter, sans-serif; }
.col-grado span { font-size: .85rem; color: var(--suave); }
.col-grado .col-grado-ruta { color: var(--c); font-weight: 700; }
.col-grado small { font-size: .78rem; color: var(--suave); }
.col-tabla-envoltura { overflow-x: auto; }
.col-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--blanco); border-radius: var(--r-s); overflow: hidden; }
.col-tabla th, .col-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--gris-f); text-align: left; white-space: nowrap; }
.col-tabla th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); background: var(--papel); }
.col-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.col-pasos li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; background: var(--papel); border-radius: var(--r-s); padding: 12px; }
.col-pasos p { margin: 4px 0 0; }
.col-pasos b { display: flex; gap: 6px; align-items: center; } .col-pasos b .ic { width: 18px; height: 18px; color: var(--violeta); }
.col-min { font: 700 .9rem Fredoka, sans-serif; background: var(--noche); color: #fff; border-radius: 10px; padding: 6px 4px; text-align: center; }
.col-clase .video { width: 100%; border-radius: var(--r-s); background: #000; }
@media print { .col-clase video, .col-clase details summary { display: none !important; } .col-clase details { display: block; } .col-pasos li { break-inside: avoid; } }
.col-grados { margin: 0 16px 22px; }
.crono-temp { margin-inline: 16px; }
.col-clase .idea, .col-clase .nota-papa { display: block; }

/* registro corto (15-oct-2026): «Ver» la clave y texto solo para lectores de pantalla */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.reg-clave{position:relative;display:block}
.reg-clave input{padding-right:5.5rem}
.reg-ver{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);min-height:44px;padding:0 .9rem;border:0;border-radius:.6rem;background:transparent;font:inherit;font-weight:700;color:inherit;cursor:pointer}
.reg-ver:focus-visible{outline:3px solid currentColor;outline-offset:2px}

/* selector de plan trimestral / anual (15-oct-2026) */
.plan-elegir{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1rem 0}
.plan-op{position:relative;display:flex;flex-direction:column;gap:.15rem;min-height:44px;padding:1rem .9rem .9rem;border:3px solid currentColor;border-radius:1.1rem;background:rgba(255,255,255,.08);color:inherit;text-decoration:none;opacity:.75}
.plan-op b{font-size:1rem}
.plan-op span{font-size:1.5rem;font-weight:800;line-height:1.1}
.plan-op small{font-size:.85rem;opacity:.9}
.plan-op em{position:absolute;top:-.8rem;left:.7rem;padding:.1rem .55rem;border-radius:999px;background:#12CDBD;color:#12100E;font-style:normal;font-size:.75rem;font-weight:800}
.plan-op.activo{opacity:1;background:rgba(255,184,74,.18);box-shadow:0 0 0 3px #FFB84A}
.plan-op:focus-visible{outline:3px solid #FFB84A;outline-offset:3px}

/* familia trae familia (15-oct-2026) */
.ref-tarjeta{margin:1.25rem 0;padding:1.25rem;border:3px solid currentColor;border-radius:1.25rem;background:rgba(255,184,74,.12)}
.ref-tarjeta h2{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1.2rem}
.ref-tarjeta .btn{margin:.75rem 0 .5rem}
.ref-enlace{font-size:.85rem;opacity:.85;overflow-wrap:anywhere}

/* muestra gratis (16-oct-2026) */
.muestra h1{margin:.6rem 0 .4rem}
.muestra-edades{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.25rem}
.muestra-edades a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.5rem .9rem;border:2px solid var(--c);border-radius:999px;color:inherit;text-decoration:none;font-weight:700;font-size:.92rem}
.muestra-edades a[aria-current="true"]{background:var(--c);color:#fff}
.muestra-edades a:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.muestra-paso{margin:1.5rem 0;padding:1.1rem;border:2px solid rgba(0,0,0,.12);border-radius:1.2rem;background:#fff}
.muestra-paso h2{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;margin:0 0 .6rem}
.muestra-lectura{display:grid;gap:.75rem}
.muestra-lectura article{padding:.85rem;border-radius:.9rem;background:#FFF6EC}
.muestra-lectura h3{margin:.3rem 0 .2rem;font-size:1rem}
.muestra-padres{background:#F3EEFF}
.muestra-cierre{margin:2rem 0 1rem;padding:1.4rem;border-radius:1.4rem;background:#24193D;color:#FFF3E6;text-align:center;display:grid;gap:.75rem}
.muestra-cierre h2{margin:0;font-size:1.35rem}
.muestra-precio{font-size:1.1rem}
.muestra-cierre .btn-linea{color:#FFF3E6;border-color:#FFF3E6}