/* PequeMisiones — sistema visual de la landing (ES y EN).
   Estilo "playful moderno": fondo blanco limpio, tarjetas con sombras
   suaves y tintas pastel, gradiente índigo→cian como color de marca,
   botones redondeados con sombra de color. Sin build, sin JS. */

:root{
  --primario:#5b5ef4; --primario-osc:#4346d6; --primario-suave:#eef0ff;
  --cian:#22c1e0;     --cian-suave:#e3f7fb;
  --menta:#12b5a5;    --menta-suave:#e3f8f5;
  --ambar:#ffb020;    --ambar-suave:#fff3d6;
  --coral:#ff6f61;    --coral-suave:#ffe9e6;
  --lila-suave:#f3efff;
  --tinta:#151833;    --tinta-suave:#5d6280;  --tinta-muy-suave:#8b90ad;
  --fondo:#fbfbfe;    --linea:#e7e9f5;
  --marca:linear-gradient(135deg,#5b5ef4 0%,#22c1e0 100%);
  --sombra:0 10px 30px -10px rgba(21,24,51,.18), 0 2px 6px rgba(21,24,51,.04);
  --sombra-alta:0 24px 50px -16px rgba(21,24,51,.28), 0 4px 10px rgba(21,24,51,.05);
  --radio:24px;
  --titulo:"Fredoka","Baloo 2",system-ui,sans-serif;
  --texto:"Nunito","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--texto); color:var(--tinta); background:var(--fondo);
  line-height:1.6; font-size:17px; overflow-x:hidden;}
img,svg{max-width:100%;}
h1,h2,h3{font-family:var(--titulo); font-weight:600; line-height:1.1; margin:0 0 .4em; letter-spacing:-.015em;}
h1{font-size:clamp(2.4rem,6vw,4rem); font-weight:700;}
h2{font-size:clamp(1.75rem,4vw,2.5rem); text-align:center;}
h3{font-size:1.2rem; margin:.3em 0 .3em;}
p{margin:.6em 0;}
a{color:var(--primario-osc);}
b,strong{font-weight:800;}
.sub{color:var(--tinta-suave);}
.centro{text-align:center;}
.mini{font-size:.92rem;}

.wrap{max-width:1080px; margin:0 auto; padding:0 22px;}
section{padding:64px 0 8px;}
.banda{background:rgba(255,255,255,.55); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); padding:60px 0 52px; margin-top:48px;}
.banda-azul{margin:72px auto 0; max-width:1080px; padding:0 22px;}
.banda-azul > .wrap{background:var(--marca); color:#fff; border-radius:32px; padding:56px 40px 48px; box-shadow:var(--sombra-alta);
  position:relative; overflow:hidden;}
.banda-azul > .wrap::before{content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.12); top:-160px; right:-100px;}
.banda-azul > .wrap::after{content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.1); bottom:-120px; left:-60px;}
.banda-azul > .wrap > *{position:relative;}
.banda-azul h2{color:#fff;}
.banda-azul .sub{color:rgba(255,255,255,.85);}
.banda-azul a:not(.btn){color:#fff;}

/* ---- Cielo: fondo dinámico que cambia con el scroll ---- */
.cielo{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--fondo);
  transition:background .4s linear;}
.cielo i{position:absolute; width:80vmax; height:80vmax; border-radius:50%; opacity:.55; will-change:transform;
  background:radial-gradient(circle at center, var(--c) 0%, transparent 60%); transition:background .4s linear;}
.cielo i:nth-child(1){--c:#5b5ef4; top:-45vmax; left:-25vmax;}
.cielo i:nth-child(2){--c:#22c1e0; top:5vh; right:-45vmax;}
.cielo i:nth-child(3){--c:#ffb020; bottom:-55vmax; left:15vw;}

/* ---- Foco y movimiento reducido ---- */
:focus-visible{outline:3px solid var(--primario); outline-offset:3px; border-radius:8px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
}

/* ---- Botones ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--titulo); font-weight:600; font-size:1.1rem; line-height:1.1;
  padding:15px 28px; min-height:54px; border:2px solid transparent; border-radius:999px;
  background:#fff; color:var(--tinta); text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s; text-align:center;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(1px);}
.btn-azul{background:var(--primario); color:#fff; box-shadow:0 10px 24px -8px rgba(91,94,244,.7);}
.btn-azul:hover{background:var(--primario-osc); box-shadow:0 14px 28px -8px rgba(91,94,244,.75);}
.btn-lima{background:var(--menta); color:#fff; box-shadow:0 10px 24px -8px rgba(18,181,165,.7);}
.btn-lima:hover{box-shadow:0 14px 28px -8px rgba(18,181,165,.75);}
.btn-sol{background:var(--ambar); color:var(--tinta); box-shadow:0 10px 24px -8px rgba(255,176,32,.7);}
.btn-sol:hover{box-shadow:0 14px 28px -8px rgba(255,176,32,.8);}
.btn-coral{background:var(--coral); color:#fff; box-shadow:0 10px 24px -8px rgba(255,111,97,.7);}
.btn-blanco{background:#fff; color:var(--tinta); border-color:var(--linea); box-shadow:var(--sombra);}
.btn-blanco:hover{border-color:var(--primario); color:var(--primario-osc);}
.btn-peq{font-size:.98rem; padding:9px 18px; min-height:42px; white-space:nowrap;}
.btn-ancho{width:100%;}
.botones{display:flex; gap:14px; flex-wrap:wrap; margin:24px 0 10px;}
.botones.centro{justify-content:center;}

/* ---- Nav ---- */
.nav{position:sticky; top:0; z-index:50; background:rgba(251,251,254,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);}
.nav .wrap{display:flex; align-items:center; gap:18px; height:68px;}
.logo{display:inline-flex; align-items:center; gap:9px; font-family:var(--titulo); font-weight:700;
  font-size:1.35rem; color:var(--tinta); text-decoration:none; letter-spacing:-.01em;}
.logo svg{width:34px; height:34px;}
.logo span{background:var(--marca); -webkit-background-clip:text; background-clip:text; color:transparent;}
.nav-links{display:flex; gap:26px; margin-left:auto; font-weight:800; font-size:.95rem;}
.nav-links a{color:var(--tinta-suave); text-decoration:none; padding:4px 0; transition:color .15s;}
.nav-links a:hover{color:var(--primario-osc);}
.nav-cta{display:flex; align-items:center; gap:10px;}
.lang{font-weight:800; font-size:.88rem; color:var(--tinta-suave); text-decoration:none; border:1.5px solid var(--linea);
  border-radius:999px; padding:7px 12px; background:#fff; white-space:nowrap; transition:border-color .15s, color .15s;}
.lang:hover{border-color:var(--primario); color:var(--primario-osc);}

/* ---- Hero ---- */
.hero{padding:64px 0 48px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; position:relative;}
.hero h1{margin-bottom:.4em;}
.hero .sub{font-size:1.18rem; max-width:560px;}
.hero-visual{position:relative; min-height:420px; display:flex; align-items:center; justify-content:center;}
.subrayado{position:relative; display:inline-block; background:var(--marca); -webkit-background-clip:text; background-clip:text; color:transparent;}
.subrayado svg{display:none;}
.etiqueta{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--linea); color:var(--tinta-suave);
  border-radius:999px; padding:6px 14px; font-weight:800; font-size:.88rem; box-shadow:var(--sombra); margin-bottom:20px;}
.cohete-grande{width:min(46vw,290px); filter:drop-shadow(0 24px 30px rgba(91,94,244,.28)); position:relative; z-index:2;}
.flota{animation:flotar 4s ease-in-out infinite;}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-16px) rotate(2deg);}}
.mision-card{position:absolute; right:0; bottom:10px; width:min(80%,300px); background:#fff; border:1px solid var(--linea);
  border-radius:20px; box-shadow:var(--sombra-alta); padding:16px 18px; transform:rotate(3deg); z-index:3;}
.mision-card .cab{display:flex; align-items:center; gap:8px; font-family:var(--titulo); font-weight:600; font-size:1.05rem;}
.mision-card .cab i{font-style:normal; background:var(--menta-suave); color:#0d8a7e; border-radius:8px; padding:2px 8px; font-size:.78rem; font-family:var(--texto); font-weight:800;}
.mision-card .msg{background:var(--primario-suave); border-radius:12px; padding:10px 12px; margin:10px 0; font-size:.93rem; line-height:1.45;}
.mision-card .msg b{color:var(--primario-osc);}
.mision-card .btn{width:100%;}
.pegatina-deco{position:absolute; border-radius:999px; background:#fff; box-shadow:var(--sombra); border:1px solid var(--linea);
  padding:7px 12px; font-weight:800; font-size:.92rem; z-index:4; display:inline-flex; align-items:center; gap:6px; color:var(--tinta);}
.deco-1{top:10%; left:2%; transform:rotate(-6deg); animation:flotar 5s 1s ease-in-out infinite;}
.deco-2{top:3%; right:8%; transform:rotate(5deg); animation:flotar 6s .5s ease-in-out infinite;}
.deco-3{bottom:60%; left:0; transform:rotate(-4deg); animation:flotar 5.5s 1.5s ease-in-out infinite;}
.estrellas{position:absolute; inset:0; z-index:1; pointer-events:none;}
.estrellas span{position:absolute; width:12px; height:12px; border-radius:50%; background:var(--ambar); animation:brillar 3s ease-in-out infinite;}
.estrellas span:nth-child(2){background:var(--cian);}
.estrellas span:nth-child(3){background:var(--coral);}
.estrellas span:nth-child(4){background:var(--menta);}
@keyframes brillar{0%,100%{opacity:.35; transform:scale(.7);} 50%{opacity:1; transform:scale(1.2);}}

/* ---- Dado 3D con los mundos ---- */
.dado-escena{position:absolute; left:2%; bottom:4%; width:112px; height:112px; perspective:700px; z-index:3;}
.dado{position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:girar 16s linear infinite;}
.dado-escena:hover .dado{animation-play-state:paused;}
.cara{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:3rem; line-height:1;
  border-radius:18px; border:1px solid var(--linea); box-shadow:inset 0 0 0 4px rgba(255,255,255,.6);}
.cara:nth-child(1){background:var(--primario-suave); transform:rotateY(0deg) translateZ(56px);}
.cara:nth-child(2){background:var(--menta-suave);    transform:rotateY(90deg) translateZ(56px);}
.cara:nth-child(3){background:var(--cian-suave);     transform:rotateY(180deg) translateZ(56px);}
.cara:nth-child(4){background:var(--lila-suave);     transform:rotateY(-90deg) translateZ(56px);}
.cara:nth-child(5){background:var(--ambar-suave);    transform:rotateX(90deg) translateZ(56px);}
.cara:nth-child(6){background:var(--coral-suave);    transform:rotateX(-90deg) translateZ(56px);}
@keyframes girar{from{transform:rotate3d(1,1,0,0deg);} to{transform:rotate3d(1,1,0,360deg);}}

/* ---- Iconos 3D (Fluent Emoji 3D, MIT, en assets/emoji3d) ---- */
.i3d{width:1.15em; height:1.15em; vertical-align:-.22em; display:inline-block; object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(21,24,51,.18));}
.pegatina .em .i3d{width:40px; height:40px; vertical-align:middle;}
.pegatina-deco .i3d{width:1.3em; height:1.3em;}
.mundo .i3d{width:1.3em; height:1.3em; vertical-align:-.3em;}
.cara-img{width:66%; height:66%; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(21,24,51,.22));}
.pegatina:hover .em .i3d{animation:saltito .5s ease;}
@keyframes saltito{0%,100%{transform:translateY(0) rotate(0);} 40%{transform:translateY(-6px) rotate(-8deg);} 70%{transform:translateY(-2px) rotate(5deg);}}

/* ---- Marquee de módulos ---- */
.marquee{overflow:hidden; padding:8px 0 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
/* 60s desde la it. 51: al entrar Naturaleza, los mapas y el inglés la lista pasó
   de 15 a 18 tarjetas, y con los 48s de antes el bucle iba un 20% más rápido.
   Si se añaden más módulos, subir esto a la par (Pedro, 10-sep-2026). */
.marquee ul{display:flex; gap:12px; margin:0; padding:10px 0; list-style:none; width:max-content; animation:desplazar 60s linear infinite;}
.marquee:hover ul{animation-play-state:paused;}
.marquee li{background:#fff; border:1px solid var(--linea); border-radius:999px; padding:9px 18px; font-weight:800; font-size:.95rem; white-space:nowrap;
  box-shadow:var(--sombra); color:var(--tinta);}
.marquee li.prox{color:var(--tinta-muy-suave); background:var(--fondo);}
@keyframes desplazar{to{transform:translateX(-50%);}}

/* ---- Tarjetas y bento ---- */
.pegatina{background:#fff; border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:26px 26px;
  transition:transform .2s ease, box-shadow .2s ease; position:relative;}
.pegatina:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta);}
.pegatina .em{font-size:1.9rem; line-height:1; width:58px; height:58px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--primario-suave); margin-bottom:12px;}
.pegatina p{color:var(--tinta-suave); margin:.3em 0 0; font-size:1rem;}
.pegatina .btn{margin-top:16px;}
.top-azul .em{background:var(--primario-suave);}
.top-lima .em{background:var(--menta-suave);}
.top-sol .em{background:var(--ambar-suave);}
.top-coral .em{background:var(--coral-suave);}
.top-turquesa .em{background:var(--cian-suave);}
.fondo-azul{background:var(--primario-suave); border-color:transparent;}
.fondo-lima{background:var(--menta-suave); border-color:transparent;}
.fondo-sol{background:var(--ambar-suave); border-color:transparent;}
.fondo-coral{background:var(--coral-suave); border-color:transparent;}
.fondo-lila{background:var(--lila-suave); border-color:transparent;}
.fondo-turquesa{background:var(--cian-suave); border-color:transparent;}
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; margin-top:26px;}
.b6{grid-column:span 6;} .b3{grid-column:span 3;} .b2{grid-column:span 2;} .b4{grid-column:span 4;}
.intro{max-width:640px; margin:0 auto 6px; text-align:center; color:var(--tinta-suave); font-size:1.1rem;}

/* ---- Pasos ---- */
.paso{display:flex; gap:16px; align-items:flex-start;}
.paso .n{flex:none; width:50px; height:50px; border-radius:16px; color:#fff; box-shadow:0 8px 18px -6px rgba(21,24,51,.35);
  display:flex; align-items:center; justify-content:center; font-family:var(--titulo); font-weight:700; font-size:1.5rem;}
.paso p{color:var(--tinta-suave); margin:0;}
.paso p b{display:block; color:var(--tinta); font-family:var(--titulo); font-weight:600; font-size:1.2rem; margin-bottom:4px;}

/* ---- Mundos (temas) ---- */
.mundos{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px 0 0;}
.mundo{border:1px solid var(--linea); border-radius:999px; padding:7px 16px; font-weight:800; font-size:.95rem; background:#fff; box-shadow:var(--sombra);}

/* ---- Checks (uso responsable) ---- */
.checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:26px;}
.check-item{display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--linea); border-radius:18px; padding:16px 18px;
  box-shadow:var(--sombra); font-weight:800;}
.check-item i{flex:none; width:34px; height:34px; border-radius:50%; background:var(--menta-suave); color:#0d8a7e;
  display:flex; align-items:center; justify-content:center; font-style:normal; font-size:1rem;}

/* ---- Precio ---- */
.precio{max-width:560px; margin:26px auto 0; text-align:center; padding:36px 28px;}
.precio .pv{font-family:var(--titulo); font-weight:700; font-size:4.2rem; line-height:1; margin:6px 0;
  background:var(--marca); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block;}
.precio .pv small{font-size:1.2rem; color:var(--tinta-suave); font-family:var(--texto); font-weight:800; -webkit-text-fill-color:var(--tinta-suave);}
.precio p{color:var(--tinta);}
.badge{display:inline-block; background:var(--ambar-suave); color:#8a5a00; border-radius:999px; padding:8px 16px; font-weight:800; font-size:.9rem; margin-top:10px;}

/* ---- Formulario ---- */
.form{max-width:640px; margin:26px auto 0;}
label{font-weight:800; display:block; margin:16px 0 6px;}
input[type=email], select, textarea{width:100%; font-family:inherit; font-size:1.05rem; padding:13px 16px;
  border:2px solid var(--linea); border-radius:14px; color:var(--tinta); background:#fff; transition:border-color .15s, box-shadow .15s;}
input[type=email]:focus, select:focus, textarea:focus{outline:none; border-color:var(--primario); box-shadow:0 0 0 4px var(--primario-suave);}
.check{display:flex; gap:12px; align-items:flex-start; margin:18px 0; font-size:.95rem;}
.check input{width:22px; height:22px; margin-top:3px; accent-color:var(--primario); flex:none;}
.check label{margin:0; font-weight:600; color:var(--tinta-suave);}
/* Campo trampa para robots. Se saca de pantalla en vez de ocultarlo con
   display:none porque hay bots que descartan lo que está oculto así. */
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.ok-msg{background:var(--menta-suave); color:#0d6e65; border-radius:14px; padding:14px 16px; font-weight:800; margin-top:14px;}
.err-msg{background:var(--coral-suave); color:#b83a2e; border-radius:14px; padding:14px 16px; font-weight:800; margin-top:14px;}

/* ---- FAQ ---- */
.faq{max-width:740px; margin:26px auto 0;}
.faq details{background:#fff; border:1px solid var(--linea); border-radius:18px; box-shadow:var(--sombra); margin:12px 0; padding:0 20px;}
.faq summary{font-family:var(--titulo); font-weight:600; font-size:1.1rem; cursor:pointer; padding:16px 0; list-style:none; display:flex; align-items:center; gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+"; flex:none; width:30px; height:30px; border-radius:50%; background:var(--primario-suave); color:var(--primario-osc);
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--texto); font-weight:800; transition:transform .2s;}
.faq details[open] summary::before{transform:rotate(45deg);}
.faq p{margin:0 0 18px; color:var(--tinta-suave);}

/* ---- Footer ---- */
footer{text-align:center; padding:44px 22px 52px; color:var(--tinta-suave); font-size:.9rem; border-top:1px solid var(--linea); margin-top:72px; background:rgba(255,255,255,.55);}
footer a{color:var(--tinta);}

/* ---- Aparición al hacer scroll ---- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .45s ease;}
.reveal.visto{opacity:1; transform:none;}

/* ---- Móvil ---- */
@media (max-width:860px){
  .nav-links{display:none;}
  .hero{grid-template-columns:1fr; gap:24px; padding-top:40px;}
  .hero-visual{min-height:380px; order:2;}
  .b3,.b2,.b4{grid-column:span 6;}
  .banda-azul > .wrap{padding:44px 26px 40px; border-radius:26px;}
}
@media (max-width:480px){
  body{font-size:16px;}
  .nav .wrap{height:62px; gap:10px;}
  .logo{font-size:1.15rem;}
  .btn{font-size:1.05rem; padding:13px 20px;}
  .botones .btn{flex:1 1 100%;}
  .hero-visual{min-height:340px;}
  .cohete-grande{width:180px;}
  .mision-card{width:84%; right:0;}
  .nav-cta{gap:6px;}
  .nav-cta .btn-peq{padding:8px 12px; font-size:.9rem; min-height:38px;}
  .lang{padding:6px 9px; font-size:.82rem;}
  .deco-1{top:34%; left:0;}
  .deco-3{display:none;}
  .dado-escena{width:88px; height:88px; left:0; top:0; bottom:auto;}
  .cara{font-size:2.3rem; border-radius:14px;}
  .cara:nth-child(1){transform:rotateY(0deg) translateZ(44px);}
  .cara:nth-child(2){transform:rotateY(90deg) translateZ(44px);}
  .cara:nth-child(3){transform:rotateY(180deg) translateZ(44px);}
  .cara:nth-child(4){transform:rotateY(-90deg) translateZ(44px);}
  .cara:nth-child(5){transform:rotateX(90deg) translateZ(44px);}
  .cara:nth-child(6){transform:rotateX(-90deg) translateZ(44px);}
  .pegatina{padding:20px 20px;}
  .precio .pv{font-size:3.4rem;}
  section{padding-top:48px;}
  .banda-azul{padding:0 16px;}
}

/* Las ilustraciones del portal, también en la lista de mundos de la web. */
.mundos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.mundo.mundo-ilustrado{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;border-radius:18px;background:#fff}
.mundo-ilustrado>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.mundo-ilustrado>span{padding:10px 8px;text-align:center}
@media(max-width:500px){.mundos{grid-template-columns:repeat(2,minmax(0,1fr))}}