/* PequeMisiones — las escenas en movimiento de la portada (ES y EN), 18-oct-2026.
   Regla de experiencia de usuario: NINGUNA escena retiene la pantalla. Cada animación se
   reproduce sola cuando aparece y la página baja siempre normal (Pedro: «mucho scroll…»).
   1 el móvil manda la misión (con el cohete, el dado y las pegatinas) · 2 de la bronca al «¡mira!» · 3 una tarde de misión, en
   historias · 4 los mundos, vivos, en carrusel · 5 el despegue en la banda final · y un botón
   fijo abajo en el móvil. Las mueve escenas.js; con «reducir movimiento» se quedan quietas.
   Usa los colores de estilo.css y añade solo los que faltaban. */
:root{
  --menta-osc:#0d8a7e; --ambar-osc:#9a6400; --blanco:#ffffff;
  --noche:#1b1f3b; --noche-cielo:#1d2150; --tarde:#fff7ea;
}
.pal{display:inline-block; white-space:nowrap;}
.le{display:inline-block;}

/* Escenas dibujadas a un tamaño fijo y escaladas enteras (las mide escenas.js) */
.lienzo{position:relative; width:100%;}
.lienzo-in{position:absolute; left:0; top:0; transform-origin:0 0;}

/* ---- 1. El principio: el móvil manda la misión, con el cohete, el dado y las pegatinas de siempre ----
   Escena dibujada a 560 × 490 (380 × 610 en el móvil) y escalada entera. Papá escribe en el móvil, el
   cohetito vuela por la línea de puntos hasta la tablet de casa (y el cohete grande lo saluda al pasar),
   la tablet lo lee palabra a palabra mientras suena «leído en voz alta», ¡Empezar! da la gema y la
   insignia, y el dado rueda hasta un mundo. */
.hero-escena{position:relative; width:100%; max-width:560px; justify-self:center;}
.hero-in .chip{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:6px; background:var(--blanco); border:1px solid var(--linea);
  border-radius:999px; padding:6px 12px 6px 8px; font-weight:800; font-size:14px; box-shadow:var(--sombra); white-space:nowrap;}
.hero-in .chip img{width:22px; height:22px;}
.chip-papa{left:24px; top:4px; transform:rotate(-4deg);}
.chip-casa{left:356px; top:162px; transform:rotate(3deg);}
.movil{position:absolute; z-index:3; left:10px; top:44px; width:180px; height:350px; border-radius:30px; background:var(--noche); padding:9px;
  box-shadow:var(--sombra-alta); transform:rotate(-5deg);}
.movil-pantalla{position:relative; height:100%; border-radius:22px; background:var(--blanco); padding:30px 12px 12px; display:flex; flex-direction:column; gap:7px; overflow:hidden;}
.movil-pantalla::before{content:""; position:absolute; top:8px; left:50%; width:52px; height:13px; margin-left:-26px; border-radius:9px; background:var(--noche);}
.mv-cab{font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-muy-suave);}
.mv-para{font-family:var(--titulo); font-weight:600; font-size:19px; line-height:1.15;}
.mv-chips{display:flex; flex-wrap:wrap; gap:5px;}
.mv-chips span{font-size:11.5px; font-weight:800; border-radius:8px; padding:2px 8px; background:var(--menta-suave); color:var(--menta-osc);}
.mv-chips span + span{background:var(--primario-suave); color:var(--primario-osc);}
.mv-label{font-size:11.5px; font-weight:800; color:var(--tinta-suave); margin-top:4px;}
.mv-texto{flex:1; border:1.5px solid var(--linea); border-radius:12px; padding:8px 10px; font-size:14px; line-height:1.4; font-weight:700; color:var(--tinta); background:var(--fondo);}
.caret{display:inline-block; width:2px; height:1.05em; background:var(--primario); vertical-align:-.15em; margin-left:1px;}
.mv-boton{text-align:center; font-family:var(--titulo); font-weight:600; font-size:15px; color:var(--blanco); background:var(--primario);
  border-radius:999px; padding:10px 8px; box-shadow:0 8px 18px -8px rgba(91,94,244,.8); transition:background .2s;}
.mv-boton.ok{background:var(--menta);}
.tablet{position:absolute; z-index:2; left:206px; top:196px; width:344px; height:252px; transform:rotate(3deg);}
.tablet-golpe{width:100%; height:100%; border-radius:26px; background:var(--noche); padding:10px; box-shadow:var(--sombra-alta);}
.tb-pantalla{position:relative; width:100%; height:100%; border-radius:18px; overflow:hidden; background:var(--noche-cielo);}
.tb-fondo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.tb-reposo{position:absolute; inset:0; z-index:3; background:rgba(13,16,40,.92); color:var(--blanco); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--titulo); font-size:46px; font-weight:500; line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums;}
.tb-reposo small{font-family:var(--texto); font-size:13px; font-weight:700; color:#aab0e0; margin-top:8px; letter-spacing:0;}
.tb-tarjeta{position:absolute; z-index:2; left:22px; right:22px; top:18px; background:var(--blanco); border-radius:16px; padding:11px 13px 12px; box-shadow:var(--sombra-alta);}
.tb-cab{display:flex; align-items:center; gap:7px; font-family:var(--titulo); font-weight:600; font-size:15px;}
.tb-cab img{width:20px; height:20px;}
.tb-cab i{font-style:normal; margin-left:auto; background:var(--menta-suave); color:var(--menta-osc); border-radius:7px; padding:1px 7px; font-size:11.5px; font-family:var(--texto); font-weight:800;}
.tb-msg{position:relative; display:flex; gap:9px; align-items:flex-start; background:var(--primario-suave); border-radius:12px; padding:9px 10px; margin:8px 0 9px; font-size:13.5px; line-height:1.4;}
.tb-alt{position:relative; flex:none; width:30px; height:30px;}
.tb-alt img{width:30px; height:30px; position:relative; z-index:1;}
.onda{position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; border:2px solid var(--primario); opacity:0;}
.tb-msg b{color:var(--primario-osc);}
.karaoke .w{border-radius:4px; transition:background .12s, color .12s; color:var(--tinta-muy-suave);}
.karaoke .w.leida{color:var(--tinta);}
.karaoke .w.ahora{background:var(--ambar); color:var(--tinta); box-shadow:0 0 0 2px var(--ambar);}
.tb-empezar{position:relative; text-align:center; font-family:var(--titulo); font-weight:600; font-size:15px; color:var(--blanco); background:var(--menta);
  border-radius:999px; padding:8px; box-shadow:0 8px 18px -8px rgba(18,181,165,.8);}
.tb-toque{position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:rgba(255,255,255,.75); opacity:0; pointer-events:none;}
.ruta-svg{position:absolute; inset:0; z-index:6; overflow:visible; pointer-events:none;}
.puntos{fill:none; stroke:var(--primario); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:.1 11;}
.cohetito{position:absolute; z-index:7; left:0; top:0; width:30px; height:40px; transform-origin:15px 20px; opacity:0; filter:drop-shadow(0 6px 8px rgba(91,94,244,.35));}
.chispa{position:absolute; z-index:8; left:0; top:0; width:22px; height:22px; margin:-11px 0 0 -11px; opacity:0; pointer-events:none;}
.chispa.punto{width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;}
.burbuja-hero{position:absolute; z-index:8; font-weight:800; font-size:13px; background:var(--blanco); border-radius:999px; padding:5px 11px; box-shadow:var(--sombra); opacity:0; white-space:nowrap;}
/* el cohete grande de la marca, arriba a la derecha, con su llamita */
.cohete-esc{position:absolute; z-index:1; left:404px; top:-8px; width:112px; height:149px; transform-origin:50% 60%; filter:drop-shadow(0 18px 22px rgba(91,94,244,.28));}
.h-llama{position:absolute; z-index:0; left:0; top:0; width:30px; height:52px; margin-left:-15px; border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
  background:radial-gradient(ellipse at 50% 18%, #fff6c8 0%, var(--ambar) 40%, var(--coral) 75%, rgba(255,111,97,0) 100%); transform-origin:50% 0; pointer-events:none;}
/* las pegatinas y el dado de siempre, colocados en la escena */
.hero-in .pegatina-deco{position:absolute; z-index:5; white-space:nowrap;}
#h-insignia{left:228px; top:26px;}
#h-gema{left:236px; top:98px;}
#h-voz{left:372px; top:436px;}
.h-ondas{position:absolute; left:12px; top:50%; width:0; height:0;}
.h-ondas i{position:absolute; left:-13px; top:-13px; width:26px; height:26px; border-radius:50%; border:2px solid var(--primario); opacity:0;}
.h-vuela{position:absolute; z-index:8; left:0; top:0; width:30px; height:30px; margin:-15px 0 0 -15px; opacity:0; pointer-events:none;}
.hero-in .dado-escena{position:absolute; z-index:4; left:26px; top:406px; bottom:auto; width:76px; height:76px; perspective:600px; cursor:pointer;}
.hero-in .dado{animation:none;}
.hero-in .cara{font-size:2rem; border-radius:14px;}
.hero-in .cara:nth-child(1){transform:rotateY(0deg) translateZ(38px);}
.hero-in .cara:nth-child(2){transform:rotateY(90deg) translateZ(38px);}
.hero-in .cara:nth-child(3){transform:rotateY(180deg) translateZ(38px);}
.hero-in .cara:nth-child(4){transform:rotateY(-90deg) translateZ(38px);}
.hero-in .cara:nth-child(5){transform:rotateX(90deg) translateZ(38px);}
.hero-in .cara:nth-child(6){transform:rotateX(-90deg) translateZ(38px);}
.h-mundo{position:absolute; left:50%; top:100%; margin-top:8px; transform:translateX(-50%); background:var(--blanco); border:1px solid var(--linea); border-radius:999px;
  padding:4px 11px; font-weight:800; font-size:13px; white-space:nowrap; box-shadow:var(--sombra); opacity:0; pointer-events:none; color:var(--tinta);}
/* versión estrecha (móvil): el móvil arriba a la izquierda, el cohete y las pegatinas a su derecha y la tablet debajo */
.hero-in.estrecho .chip-papa{left:16px; top:2px;}
.hero-in.estrecho .movil{left:8px; top:40px; width:164px; height:318px;}
.hero-in.estrecho .chip-casa{left:200px; top:296px;}
.hero-in.estrecho .tablet{left:26px; top:336px; width:344px; height:252px; transform:rotate(2deg);}
.hero-in.estrecho .cohete-esc{left:262px; top:18px; width:92px; height:123px;}
.hero-in.estrecho #h-insignia{left:202px; top:160px;}
.hero-in.estrecho #h-gema{left:266px; top:212px;}
.hero-in.estrecho #h-voz{display:none;}
.hero-in.estrecho .dado-escena{left:200px; top:206px; width:62px; height:62px;}
.hero-in.estrecho .cara{font-size:1.7rem; border-radius:12px;}
.hero-in.estrecho .cara:nth-child(1){transform:rotateY(0deg) translateZ(31px);}
.hero-in.estrecho .cara:nth-child(2){transform:rotateY(90deg) translateZ(31px);}
.hero-in.estrecho .cara:nth-child(3){transform:rotateY(180deg) translateZ(31px);}
.hero-in.estrecho .cara:nth-child(4){transform:rotateY(-90deg) translateZ(31px);}
.hero-in.estrecho .cara:nth-child(5){transform:rotateX(90deg) translateZ(31px);}
.hero-in.estrecho .cara:nth-child(6){transform:rotateX(-90deg) translateZ(31px);}
.hero-in.estrecho .h-mundo{display:none;}

/* ---- 2. De la bronca al «¡mira!» (dentro de la banda de las discusiones) ---- */
.bronca{position:relative; margin:0 auto 22px; text-align:center;}
.bronca-burbujas{position:relative; height:3.1em; font-size:clamp(.9rem,2.4vw,1.08rem);}
.bronca-burbujas > div{position:absolute; inset:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 12px;}
.burbuja{position:relative; display:inline-block; background:var(--blanco); border-radius:20px; padding:7px 14px; font-weight:800; box-shadow:var(--sombra);
  transform:rotate(var(--r, 0deg)); white-space:nowrap;}
.burbuja::after{content:""; position:absolute; bottom:-6px; left:20px; width:13px; height:13px; background:inherit; transform:rotate(45deg); border-radius:3px;}
.burbuja-a{color:var(--tinta-suave); border:1.5px solid var(--linea);}
.burbuja-b{color:var(--primario-osc);}
.frases{display:grid; margin-top:12px;}
@media (max-width:560px){ .bronca-burbujas{height:5.6em;} }
.frase{grid-area:1/1; font-family:var(--titulo); font-weight:700; font-size:clamp(2.2rem,7vw,4.3rem); line-height:1.05; letter-spacing:-.025em; text-wrap:balance;}
.frase-a{color:var(--tinta-suave);}
.frase-b{opacity:0;}

/* ---- 3. Una tarde de misión, en historias ---- */
.historia{--t-fondo:var(--tarde); --t-tinta:var(--tinta); --t-suave:var(--tinta-suave); --t-reloj:var(--blanco);
  margin-top:26px; border-radius:32px; background:var(--t-fondo); color:var(--t-tinta); box-shadow:var(--sombra-alta);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:10px 26px; align-items:center; padding:30px 30px 30px 36px; overflow:hidden;
  transition:background-color .5s, color .5s;}
.historia-texto{min-width:0;}
.historia-escenario{position:relative; width:100%; aspect-ratio:540 / 440; max-width:100%;}
.historia-escenario .lienzo{height:100%;}
.reloj-fila{display:flex; align-items:center; gap:14px;}
.reloj{width:58px; height:58px; flex:none; color:var(--t-tinta);}
.reloj .esfera{fill:var(--t-reloj); stroke:currentColor; stroke-width:3;}
.reloj .marca{stroke:currentColor; stroke-width:2.4; stroke-linecap:round; opacity:.55;}
.reloj .aguja{stroke:currentColor; stroke-linecap:round;}
.reloj .eje{fill:var(--coral);}
.hora{font-family:var(--titulo); font-weight:600; font-size:2.1rem; line-height:1; font-variant-numeric:tabular-nums;}
.hora-pie{font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--t-suave); margin-top:4px;}
.hist-tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:18px 0 16px; padding:0; list-style:none;}
.hist-tab{display:flex; flex-direction:column; gap:6px; align-items:stretch; background:none; border:0; padding:4px 0; margin:0; cursor:pointer;
  font:800 .74rem var(--texto); letter-spacing:.02em; color:var(--t-suave); text-align:left;}
.hist-tab .barra-h{height:5px; border-radius:9px; background:rgba(127,132,170,.25); overflow:hidden;}
.hist-tab .barra-h i{display:block; height:100%; width:0; background:var(--primario); border-radius:inherit;}
.hist-tab[aria-current="true"]{color:var(--t-tinta);}
.capitulos{position:relative; min-height:11.6em;}
.cap{position:absolute; inset:0 0 auto 0;}
.cap h3{font-size:clamp(1.45rem,2.6vw,2rem); margin:0 0 .35em; color:var(--t-tinta);}
.cap p{font-size:1.04rem; line-height:1.55; color:var(--t-suave); margin:0;}
.cap + .cap{opacity:0;}
@media (max-width:820px){
  .historia{grid-template-columns:1fr; padding:16px 16px 20px; border-radius:26px;}
  .historia-escenario{order:-1;}
  .reloj{width:44px; height:44px;} .hora{font-size:1.6rem;} .hora-pie{font-size:.72rem;}
  .hist-tabs{margin:12px 0 12px;}
  .hist-tab span:not(.barra-h){display:none;}
  .capitulos{min-height:9.6em;}
  .cap h3{font-size:1.35rem;} .cap p{font-size:.98rem;}
}
/* el escenario de la tarde: medidas en píxeles de diseño (540 × 440) */
.tb2{position:absolute; left:10px; top:20px; width:520px; height:380px; border-radius:34px; background:var(--noche); padding:12px; box-shadow:var(--sombra-alta); transform-origin:50% 50%;}
.tb2-pantalla{position:relative; width:100%; height:100%; border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#f2f4ff 0%,var(--blanco) 75%); color:var(--tinta);}
.tb2-noche{position:absolute; inset:0; z-index:9; background:var(--noche-cielo); opacity:0; pointer-events:none;}
.capa{position:absolute; inset:0;}
.capa > *{position:absolute;}
.pill{background:var(--menta-suave); color:var(--menta-osc); font-weight:800; border-radius:10px; padding:4px 12px; font-size:17px; line-height:1.3;}
.consigna{font-family:var(--titulo); font-weight:600; font-size:26px; line-height:1.15; color:var(--tinta);}
.marco{border-radius:20px; background:var(--blanco); border:2px solid var(--linea); box-shadow:var(--sombra);}
.celda{border-radius:14px; background:var(--primario-suave); display:grid; place-items:center;}
.celda .num{font-family:var(--titulo); font-weight:700; font-size:24px; color:var(--primario-osc); opacity:0;}
.celda.hueco{background:var(--blanco); border:2.5px dashed #c9cdf2;}
.fch{border-radius:50%; box-shadow:inset 0 -4px 0 rgba(0,0,0,.13), 0 3px 6px rgba(21,24,51,.12);}
.fch.azul{background:radial-gradient(circle at 34% 30%, #a3a5ff 0%, var(--primario) 55%, var(--primario-osc) 100%);}
.fch.menta{background:radial-gradient(circle at 34% 30%, #74e6da 0%, var(--menta) 55%, var(--menta-osc) 100%);}
.ecuacion{left:0; right:0; top:262px; display:flex; justify-content:center; gap:14px; font-family:var(--titulo); font-weight:700; font-size:52px; line-height:1; color:var(--tinta);}
.ecuacion .ver{color:var(--menta-osc);}
.insignia{display:inline-flex; align-items:center; gap:8px; background:var(--ambar); color:var(--tinta); font-family:var(--titulo); font-weight:600; font-size:21px;
  border-radius:999px; padding:7px 16px 7px 9px; box-shadow:0 10px 20px -8px rgba(255,176,32,.9); transform-origin:50% 50%; white-space:nowrap;}
.insignia img{width:32px; height:32px;}
.pregunta{left:22px; right:22px; top:16px; font-family:var(--titulo); font-weight:600; font-size:24px; line-height:1.18; color:var(--tinta);}
.opcion{width:62px; height:62px; border-radius:50%; background:var(--blanco); border:2.5px solid var(--linea); display:grid; place-items:center;
  font-family:var(--titulo); font-weight:700; font-size:30px; color:var(--tinta); box-shadow:var(--sombra); transition:background .25s, color .25s, border-color .25s;}
.opcion.brilla{border-color:var(--ambar); animation:brilla 1s ease-in-out infinite;}
.opcion.bien{background:var(--menta); border-color:var(--menta); color:var(--blanco); animation:none;}
@keyframes brilla{0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.7), var(--sombra);} 50%{box-shadow:0 0 0 12px rgba(255,176,32,0), var(--sombra);}}
.katy{width:84px; height:84px; filter:drop-shadow(0 6px 8px rgba(21,24,51,.2));}
.bocadillo{background:var(--primario-suave); color:var(--primario-osc); font-weight:800; font-size:17px; line-height:1.3; border-radius:16px 16px 16px 4px; padding:9px 13px; width:168px; transform-origin:0 100%;}
.dedo{width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:rgba(21,24,51,.16); border:3px solid rgba(255,255,255,.95); box-shadow:0 4px 12px rgba(21,24,51,.25); z-index:5;}
.dedo-onda{width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; border:3px solid var(--primario); opacity:0; z-index:4;}
.logro{left:0; right:0; top:104px; display:flex; justify-content:center; z-index:6;}
.logro span{font-family:var(--titulo); font-weight:700; font-size:34px; color:var(--blanco); background:var(--menta); border-radius:999px; padding:8px 26px;
  box-shadow:0 14px 26px -10px rgba(18,181,165,.9);}
.mas-gema{display:inline-flex; align-items:center; gap:6px; font-family:var(--titulo); font-weight:700; font-size:22px; color:var(--primario-osc); z-index:6;}
.mas-gema img{width:30px; height:30px;}
.cumplida{left:0; right:0; top:20px; text-align:center;}
.cumplida strong{display:block; font-family:var(--titulo); font-weight:700; font-size:32px; line-height:1.1;}
.cumplida span{font-size:17px; font-weight:800; color:var(--tinta-suave);}
.gema-sitio{width:46px; height:46px; border-radius:50%; border:2.5px dashed #c9cdf2;}
.vuela{left:0; top:0; width:46px; height:46px; z-index:5; filter:drop-shadow(0 4px 6px rgba(21,24,51,.2));}
.hucha{left:48px; top:172px; width:400px; background:var(--blanco); border:1.5px solid var(--linea); border-radius:20px; padding:16px 20px 15px; box-shadow:var(--sombra);}
.hucha-cab{display:flex; align-items:center; gap:10px; font-size:21px; font-weight:800;}
.hucha-cab img{width:36px; height:36px;}
.hucha-premio{font-family:var(--titulo); font-weight:600; font-size:20px; margin-top:6px;}
.hucha-barra{height:18px; border-radius:99px; background:var(--primario-suave); margin-top:8px; overflow:hidden;}
.hucha-barra i{display:block; height:100%; width:70%; border-radius:inherit; background:var(--marca);}
.hucha-pie{position:relative; height:30px; margin-top:7px; font-size:16px; font-weight:700; color:var(--tinta-suave);}
.hucha-pie > *{position:absolute; left:0; top:0;}
.pedir{background:var(--menta-suave); color:var(--menta-osc); font-weight:800; border-radius:9px; padding:3px 10px; white-space:nowrap; transform-origin:0 50%; opacity:0;}
.mv2{position:absolute; left:318px; top:14px; width:212px; height:412px; border-radius:32px; background:var(--noche); padding:9px; box-shadow:0 30px 60px -20px rgba(0,0,0,.55); opacity:0;}
.mv2-pantalla{height:100%; border-radius:24px; background:var(--blanco); padding:30px 14px 14px; position:relative; overflow:hidden; color:var(--tinta);}
.mv2-pantalla::before{content:""; position:absolute; top:9px; left:50%; width:58px; height:14px; margin-left:-29px; border-radius:9px; background:var(--noche);}
.mv2 .zona{font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-muy-suave);}
.mv2 .quien{font-family:var(--titulo); font-weight:600; font-size:23px; line-height:1.1; margin-top:2px;}
.mv2 .quien small{display:block; font-family:var(--texto); font-size:13px; font-weight:700; color:var(--tinta-suave);}
.grafica{display:flex; align-items:flex-end; justify-content:space-between; height:104px; margin:12px 4px 4px; border-bottom:2px solid var(--linea);}
.barra{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; width:24px; height:100%;}
.barra i{display:block; width:100%; border-radius:7px 7px 3px 3px; background:var(--primario-suave); transform-origin:50% 100%;}
.barra.hoy i{background:var(--primario);}
.dias{display:flex; justify-content:space-between; margin:0 4px; font-size:12px; font-weight:800; color:var(--tinta-muy-suave);}
.dias span{width:24px; text-align:center;}
.dias .hoy{color:var(--primario-osc);}
.etqs{display:flex; flex-direction:column; gap:7px; margin-top:13px;}
.etq{font-size:13.5px; font-weight:800; line-height:1.3; border-radius:10px; padding:6px 9px; background:var(--primario-suave); color:var(--primario-osc);}
.etq.brillo{background:var(--menta-suave); color:var(--menta-osc);}
.etq.costo{background:var(--ambar-suave); color:var(--ambar-osc);}
.ficha{position:absolute; left:6px; top:150px; width:300px; z-index:3; background:var(--blanco); color:var(--tinta); border-radius:20px; padding:15px 17px 13px;
  box-shadow:0 26px 50px -18px rgba(0,0,0,.5); border:1.5px solid var(--linea); opacity:0;}
.ficha h4{margin:0 0 8px; font-family:var(--titulo); font-weight:600; font-size:19px; line-height:1.15; display:flex; align-items:center; gap:8px;}
.ficha h4 img{width:28px; height:28px;}
.fila{font-size:15px; line-height:1.38; padding:6px 0; border-top:1px solid var(--linea);}
.fila b{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave);}
.fila.no b{color:var(--coral);}

/* ---- 4. Los mundos, vivos: un carrusel que avanza solo ---- */
.esc-mundos{--m-fondo:var(--fondo); --m-tinta:var(--tinta); position:relative; overflow:hidden; margin-top:56px; padding:44px 0 40px; background:var(--m-fondo); color:var(--m-tinta);}
.mundos-ola{position:absolute; inset:0; z-index:0; background:var(--m-ola, transparent); clip-path:circle(0 at 85% 52%); pointer-events:none;}
.mundos-cab{position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 20px;}
.mundos-cab h2{margin:0; color:var(--m-tinta); text-align:left;}
.mundos-cuenta{margin:0; font-weight:800; color:var(--m-tinta); opacity:.72; font-variant-numeric:tabular-nums;}
.carrusel{--mw:min(78vw, 540px); position:relative; z-index:1; height:calc(var(--mw) * 2 / 3 + 24px); margin-top:20px; perspective:1500px; touch-action:pan-y; cursor:grab; user-select:none;}
.carrusel.arrastrando{cursor:grabbing;}
.tarjeta-mundo{position:absolute; left:50%; top:0; width:var(--mw); margin:0 0 0 calc(var(--mw) / -2); transform-style:preserve-3d;}
.tarjeta-mundo .mundo-img{position:relative; aspect-ratio:3 / 2; max-width:100%; border-radius:26px; overflow:hidden; background:var(--primario-suave);
  box-shadow:0 34px 60px -26px var(--acento, rgba(21,24,51,.4)), 0 6px 14px rgba(21,24,51,.08); transform:translateZ(0);}
.tarjeta-mundo .mundo-img img{position:absolute; left:-8%; top:-6%; width:116%; height:112%; max-width:none; object-fit:cover; display:block; -webkit-user-drag:none;}
.vida{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.tarjeta-mundo figcaption{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
.mundos-pie{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:14px; margin-top:8px;}
.mundo-nombre{min-width:0; min-height:1.05em; text-align:center; text-wrap:balance; font-family:var(--titulo); font-weight:700; font-size:clamp(2.1rem,6.6vw,4.8rem);
  line-height:1.02; letter-spacing:-.03em; color:var(--m-nombre, var(--primario));}
.mundo-nombre .pal span{display:inline-block; animation:letra .75s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes letra{from{opacity:0; transform:translateY(.5em) rotate(10deg) scale(.6);} to{opacity:1; transform:none;}}
.flecha{flex:none; width:48px; height:48px; border-radius:50%; border:0; background:var(--blanco); color:var(--tinta); box-shadow:var(--sombra); cursor:pointer;
  font:700 1.5rem/1 var(--titulo); display:grid; place-items:center; transition:transform .15s;}
.flecha:hover{transform:scale(1.08);}
@media (max-width:480px){ .flecha{width:42px; height:42px;} .esc-mundos{padding:34px 0 30px;} }

/* ---- 5. El despegue, dentro de la banda final ---- */
.banda-azul > .wrap > .d-cielo{position:absolute; inset:0; z-index:0; pointer-events:none;}
.banda-azul > .wrap > :not(.d-cielo):not(.d-base){z-index:2;}
.d-cielo i{position:absolute; border-radius:50%; background:var(--blanco); animation:titila 2.6s ease-in-out infinite;}
@keyframes titila{0%,100%{opacity:.25;} 50%{opacity:.9;}}
.banda-azul > .wrap > .d-base{position:absolute; z-index:1; right:7%; bottom:22px; width:0; height:0; pointer-events:none;}
.cohete-d{position:absolute; left:0; bottom:0; width:92px; aspect-ratio:3 / 4; transform:translateX(-50%);}
.cohete-d svg{width:100%; height:100%; display:block; filter:drop-shadow(0 14px 18px rgba(0,0,0,.3));}
.llama{position:absolute; left:50%; top:88%; width:36%; height:60%; margin-left:-18%; border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;
  background:radial-gradient(ellipse at 50% 20%, #fff6c8 0%, var(--ambar) 40%, var(--coral) 75%, rgba(255,111,97,0) 100%); transform-origin:50% 0; opacity:0;
  animation:llama .12s ease-in-out infinite alternate;}
@keyframes llama{from{scale:1 .9;} to{scale:.92 1.08;}}
.humo{position:absolute; left:0; bottom:0; width:56px; height:56px; margin-left:-28px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(230,233,255,.75) 55%, rgba(230,233,255,0) 72%); opacity:0;}
@media (max-width:860px){
  .banda-azul > .wrap{padding-bottom:104px;}
  .banda-azul > .wrap > .d-base{right:50%; bottom:16px;}
  .cohete-d{width:62px;}
}

/* ---- Botón fijo abajo en el móvil ---- */
.cta-fija{display:none;}
@media (max-width:860px){
  .cta-fija{display:flex; position:fixed; z-index:60; left:0; right:0; bottom:0; align-items:center; gap:12px;
    padding:10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background:rgba(251,251,254,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--linea);
    box-shadow:0 -10px 30px -18px rgba(21,24,51,.35); transform:translateY(110%); transition:transform .35s ease; visibility:hidden;}
  .cta-fija.ver{transform:none; visibility:visible;}
  .cta-fija .btn{flex:1 1 auto; min-height:48px; padding:11px 16px; font-size:1.02rem;}
  .cta-fija small{flex:none; font-weight:800; font-size:.82rem; line-height:1.2; color:var(--tinta-suave); text-align:center;}
  footer{padding-bottom:120px;}
}

/* ---- Quietas si el aparato pide poco movimiento ---- */
@media (prefers-reduced-motion: reduce){
  .frase-a{opacity:0;} .frase-b{opacity:1;}
  .bronca-burbujas .burbujas-a{display:none;}
  .vida, .mundos-ola{display:none;}
  .cta-fija{transition:none;}
}

/* ---- 6. La parte de abajo, con chispa (18-oct, Pedro: «¿puedes hacerlo más espectacular?») ----
   El espectáculo donde ayuda a decidir y sin estorbar la lectura: Pro con borde de colores que gira
   y un destello; gemas que saltan del «0 €»; los ✓ de la confianza se dibujan uno a uno; Katy en las
   preguntas; y cada herramienta gratis enseña en pequeño lo que hace. Todo con html.vivo-abajo (lo pone
   escenas.js; sin JS o con «reducir movimiento» se queda como estaba). */
@property --giro{syntax:"<angle>"; inherits:false; initial-value:0deg;}
html.vivo-abajo .pro-brilla{border:3px solid transparent;
  background:linear-gradient(160deg, var(--primario-suave) 0%, var(--lila-suave) 100%) padding-box,
             conic-gradient(from var(--giro), #5b5ef4, #22c1e0, #12b5a5, #ffb020, #ff6f61, #5b5ef4) border-box;
  animation:giro-borde 7s linear infinite; box-shadow:0 22px 50px -20px rgba(91,94,244,.55);}
@keyframes giro-borde{to{--giro:360deg;}}
html.vivo-abajo .precio{overflow:hidden;}
html.vivo-abajo .precio::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; transform:translateX(-130%);
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);}
html.vivo-abajo .precio.visto::after{animation:destello 1.5s ease .4s both;}
html.vivo-abajo .precio.pro-brilla.visto::after{animation-delay:.9s;}
@keyframes destello{to{transform:translateX(130%);}}
#precio, #price{position:relative;}
.chispa-precio{position:absolute; z-index:5; left:0; top:0; width:26px; height:26px; margin:-13px 0 0 -13px; pointer-events:none;}
.chispa-precio.punto{width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;}
/* los ✓ se dibujan uno detrás de otro, como quien marca una lista de promesas */
.check-item i svg{width:18px; height:18px; display:block;}
.check-item i svg path{fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:0;}
html.vivo-abajo .check-item i svg path{stroke-dashoffset:24;}
html.vivo-abajo .checks.sellar .check-item i svg path{animation:trazo .45s ease forwards;}
html.vivo-abajo .checks.sellar .check-item i{animation:sello .6s cubic-bezier(.34,1.56,.64,1) both;}
.checks.sellar .check-item:nth-child(2) i, .checks.sellar .check-item:nth-child(2) i svg path{animation-delay:.22s;}
.checks.sellar .check-item:nth-child(3) i, .checks.sellar .check-item:nth-child(3) i svg path{animation-delay:.44s;}
.checks.sellar .check-item:nth-child(4) i, .checks.sellar .check-item:nth-child(4) i svg path{animation-delay:.66s;}
.checks.sellar .check-item:nth-child(5) i, .checks.sellar .check-item:nth-child(5) i svg path{animation-delay:.88s;}
.checks.sellar .check-item:nth-child(6) i, .checks.sellar .check-item:nth-child(6) i svg path{animation-delay:1.1s;}
@keyframes trazo{to{stroke-dashoffset:0;}}
@keyframes sello{from{transform:scale(.3) rotate(-25deg);} to{transform:none;}}
/* Katy en las preguntas: flota y da un salto cada vez que se abre una */
.faq-katy{display:flex; align-items:center; justify-content:center; gap:10px; margin:2px auto 4px;}
.faq-katy img{width:58px; height:58px; filter:drop-shadow(0 6px 8px rgba(21,24,51,.2));}
.faq-katy span{background:var(--blanco); border:1px solid var(--linea); border-radius:16px 16px 16px 4px; padding:7px 13px; font-weight:800; font-size:.95rem;
  box-shadow:var(--sombra); color:var(--primario-osc);}
html.vivo-abajo .faq-katy img{animation:katy-flota 3.2s ease-in-out infinite;}
html.vivo-abajo .faq-katy img.salta{animation:katy-salta .65s cubic-bezier(.34,1.56,.64,1);}
@keyframes katy-flota{0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-6px) rotate(3deg);}}
@keyframes katy-salta{0%{transform:none;} 40%{transform:translateY(-20px) scale(1.1) rotate(-10deg);} 100%{transform:none;}}
/* las miniescenas de las herramientas */
.miniescena{position:relative; width:min(100%, 220px); height:92px; margin:0 auto 10px; border-radius:18px; background:#fff; box-shadow:0 8px 18px -10px rgba(21,24,51,.3);
  overflow:hidden; display:grid; place-items:center;}
.miniescena > img.i3d{width:46px; height:46px;}
.miniescena.vivo > img.i3d{display:none;}
.mn-impresora{position:absolute; z-index:2; left:50%; bottom:2px; width:56px; height:56px; margin-left:-28px; filter:drop-shadow(0 4px 6px rgba(21,24,51,.2));}
.mn-hoja{position:absolute; z-index:1; left:50%; bottom:36px; width:62px; height:54px; margin-left:-31px; background:#fff; border:1.5px solid var(--linea); border-radius:5px;
  box-shadow:0 4px 8px rgba(21,24,51,.12); display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:5px;}
.mn-hoja i{border-radius:2px; opacity:0;}
.mn-cien{display:grid; grid-template-columns:repeat(10,6px); gap:2px;}
.mn-cien i{width:6px; height:6px; border-radius:2px; background:#e9ecf8;}
.mn-cuenta{font-family:var(--titulo); font-weight:700; font-size:40px; line-height:1; color:var(--primario-osc); font-variant-numeric:tabular-nums;}
.mn-mas{position:absolute; right:22px; top:14px; font-weight:800; font-size:14px; color:var(--menta-osc); opacity:0;}
.mn-carta{width:132px; height:58px; perspective:420px;}
.mn-cara{width:100%; height:100%; border-radius:14px; display:grid; place-items:center; font-family:var(--titulo); font-weight:700; font-size:28px;
  background:var(--primario-suave); color:var(--primario-osc); backface-visibility:hidden;}
.mn-cara.res{background:var(--menta); color:#fff; font-size:34px;}
.mn-pista{position:relative; display:flex; gap:5px; padding-top:22px;}
.mn-pista i{width:24px; height:24px; border-radius:7px; background:#e9ecf8; transition:background .2s, box-shadow .2s;}
.mn-pista i:last-child{background:var(--cian-suave); border:2px dashed var(--cian);}
.mn-pista i.luz{background:var(--cian); border-style:solid; box-shadow:0 0 0 4px rgba(34,193,224,.25), 0 0 18px 4px rgba(34,193,224,.6);}
.mn-robot{position:absolute; left:0; top:0; width:30px; height:30px; filter:drop-shadow(0 3px 4px rgba(21,24,51,.25));}

/* ---- El regalo: papiroflexia (herramientas gratis, solo en español) ---- */
.regalo-fila{display:flex; justify-content:center; align-items:center; max-width:640px; margin:0 auto 6px;}
.regalo-fila img{width:25%; height:auto; margin:0 -2.5%; animation:regalo-flota 5.5s ease-in-out infinite;}
.regalo-fila img:nth-child(2){animation-delay:-1.1s;}
.regalo-fila img:nth-child(3){width:31%; animation-delay:-2.2s; position:relative; z-index:1;}
.regalo-fila img:nth-child(4){animation-delay:-3.3s;}
.regalo-fila img:nth-child(5){animation-delay:-4.4s;}
@keyframes regalo-flota{0%,100%{transform:translateY(3px) rotate(-2.5deg);} 50%{transform:translateY(-7px) rotate(2.5deg);}}
@media (prefers-reduced-motion: reduce){.regalo-fila img{animation:none;}}