/* ============================================================
   Aventura Matemática — Landing (PUB-001)
   Maqueta fiel a docs/13 + referencia V3. Paleta del brief (doc 07).
   ============================================================ */
:root{
  --cielo:#0AA8E8; --cielo-prof:#006FCA; --mar:#05A8CF;
  --verde:#20CF87; --verde-claro:#22E9A2; --verde-osc:#16a86c;
  --amarillo:#FFC928; --ambar:#F29A00;
  --azul:#1269D8; --azul-osc:#082F91;
  --tinta:#08213A; --tinta2:#041D35;
  --blanco-calido:#FFF8E8;
  --sombra-suave:0 6px 18px rgba(8,33,58,.12);
  --radio:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--tinta); background:var(--blanco-calido); margin:0;
  font-size:17px; line-height:1.55;
}
h1,h2,h3,.display-font{font-family:'Baloo 2','Nunito',sans-serif; font-weight:800; color:var(--tinta)}
.container-am{max-width:1200px; margin:0 auto; padding:0 24px}
a{color:var(--azul); text-decoration:none}

/* ---------- Botones glossy "caramelo" ---------- */
.btn-am{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  border:none; cursor:pointer; font-family:'Baloo 2',sans-serif; font-weight:700;
  border-radius:var(--radio); text-decoration:none; line-height:1;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-am:active{transform:translateY(2px)}
.btn-jugar{
  background:linear-gradient(180deg,var(--verde-claro),var(--verde));
  color:var(--tinta); font-size:2rem; padding:1.1rem 2.2rem;
  box-shadow:0 8px 0 var(--verde-osc), 0 14px 22px rgba(22,168,108,.45);
  border:2px solid rgba(255,255,255,.5); min-height:64px;
}
.btn-jugar:hover{transform:translateY(-2px); box-shadow:0 10px 0 var(--verde-osc),0 18px 28px rgba(22,168,108,.5)}
.btn-jugar .play{
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.85);
  display:grid;place-items:center;color:var(--verde-osc);font-size:1.2rem;
}
.btn-jugar.pulse{animation:respira 2.6s ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.btn-outline{
  background:#fff;color:var(--azul);border:2px solid var(--azul);
  padding:.6rem 1.2rem;font-size:1rem;box-shadow:var(--sombra-suave);
}
.btn-jugar-mini{
  background:linear-gradient(180deg,var(--verde-claro),var(--verde));color:var(--tinta);
  padding:.55rem 1.1rem;font-size:1rem;box-shadow:0 4px 0 var(--verde-osc);width:100%;
}
.enlace-adulto{display:inline-flex;align-items:center;gap:.4rem;color:var(--tinta);font-weight:700;text-decoration:underline}
.enlace-adulto img{width:22px;height:22px}

/* ---------- Header ---------- */
.am-header{background:#fff;box-shadow:var(--sombra-suave);position:sticky;top:0;z-index:50}
.am-header .container-am{display:flex;align-items:center;justify-content:space-between;min-height:92px;gap:1rem;padding-top:.4rem;padding-bottom:.4rem}
.am-logo img{height:78px;display:block}
.am-nav{display:flex;align-items:center;gap:1.8rem}
.am-nav a{color:var(--tinta);font-weight:700}
.am-nav a:hover{color:var(--azul)}
/* Acciones móvil/tablet: icono login + hamburguesa (ocultas en escritorio) */
.am-mobile-actions{display:none;align-items:center;gap:.55rem}
.am-iconbtn{
  width:48px;height:48px;border-radius:12px;border:2px solid var(--azul);background:#fff;color:var(--azul);
  display:grid;place-items:center;font-size:1.3rem;line-height:1;cursor:pointer;
  box-shadow:var(--sombra-suave);text-decoration:none;padding:0;
}
.am-burger{display:flex;flex-direction:column;justify-content:center;gap:4px}
.am-burger span{display:block;width:22px;height:3px;border-radius:2px;background:var(--azul)}
/* Banda de menú (offcanvas) */
.am-offcanvas{max-width:330px}
.am-offcanvas-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.25rem;color:var(--tinta)}
.am-nav-movil{display:flex;flex-direction:column;margin-bottom:1.2rem}
.am-nav-movil a{color:var(--tinta);font-weight:700;font-size:1.15rem;padding:.8rem .1rem;border-bottom:1px solid #eef1f4}
.am-nav-movil a:hover{color:var(--azul)}
.am-login-menu{font-size:1.05rem}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--cielo),var(--cielo-prof))}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:0}
.hero-bg::after{content:""}
.hero .container-am{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:center;min-height:600px;padding:2.6rem 0}
.hero-card{
  background:rgba(255,248,232,.94);border-radius:24px;padding:2.2rem 2.4rem;
  box-shadow:var(--sombra-suave);backdrop-filter:blur(2px);max-width:580px;
}
.hero h1{font-size:2.9rem;line-height:1.12;margin:.2rem 0 1.2rem}
.hero h1 .destacado{color:var(--verde-osc)}
.hero-sub{font-size:1.1rem;margin-bottom:1.3rem}
.mini-modelo{font-size:.95rem;color:var(--tinta);opacity:.85;margin:.8rem 0 0}
.hero-mascotas{position:absolute;right:0;bottom:0;height:92%;z-index:1;display:flex;align-items:flex-end;gap:0;pointer-events:none}
.hero-mascotas img{height:100%;filter:drop-shadow(0 8px 12px rgba(8,33,58,.25));transform-origin:50% 100%;animation:explora 4.6s ease-in-out infinite}
.hero-mascotas img:nth-child(2){animation-duration:5.4s;animation-delay:1.1s} /* escalonado: no van a la vez */
@keyframes explora{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(-1.2deg)}}
.signo{position:absolute;z-index:3;filter:drop-shadow(0 4px 6px rgba(8,33,58,.3));animation:flota 4s ease-in-out infinite}
/* a la derecha: flotando en el cielo alrededor de los exploradores, sin tapar las caras */
.signo.s1{width:70px;top:7%;left:59%}                       /* + (cielo, sobre el hueco) */
.signo.s2{width:62px;top:4%;left:70%;animation-delay:.6s}   /* × (cielo, entre las cabezas) */
.signo.s3{width:56px;top:29%;left:55%;animation-delay:1.2s} /* ÷ (hueco al que señala el niño) */
.signo.s4{width:48px;top:6%;left:80%;animation-delay:.3s}   /* − (cielo, sobre la niña) */
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Secciones ---------- */
.seccion{padding:3rem 0}
.seccion h2{text-align:center;font-size:2rem;margin-bottom:2rem;color:var(--azul-osc)}
.bg-claro{background:var(--blanco-calido)}


/* Cursos */
.cursos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.card-curso{
  background:#fff;border-radius:var(--radio);padding:1.4rem 1rem;text-align:center;
  box-shadow:var(--sombra-suave);border:2px solid transparent;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.card-curso .curso-num{font-family:'Baloo 2';font-size:2.4rem;font-weight:800;line-height:1}
.card-curso .curso-sub{font-size:1.05rem;font-weight:800;color:#41525f;margin-top:-.15rem}
/* Botón "Próximamente" para cursos bloqueados: misma forma que .btn-jugar-mini pero gris/candado */
.btn-bloqueado{
  background:linear-gradient(180deg,#e9eef3,#d6dee6);color:#5b6b7a;
  padding:.55rem 1.1rem;font-size:1rem;box-shadow:0 4px 0 #b7c2cc;width:100%;
  cursor:default;
}
.card-curso.bloqueado{
  background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.28)),
    url('../img/fondo-bloqueado.jpg') center/cover no-repeat;
}
.card-curso.bloqueado .curso-num,
.card-curso.bloqueado .curso-sub{text-shadow:0 1px 4px rgba(255,255,255,.9)}
.card-curso.activo{border-color:var(--verde);background:#f1fff8;transform:translateY(-6px)}
.card-curso.activo.con-fondo{
  background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.32)),
    url('../img/tarjeta-4-fondo.jpg') center/cover no-repeat;
}
.card-curso.activo.con-fondo .curso-num,
.card-curso.activo.con-fondo .curso-sub{text-shadow:0 1px 5px rgba(255,255,255,.95)}
.card-curso .spacer{flex:1 1 auto;min-height:96px}
.card-curso.activo .badge-disp{
  position:absolute;top:10px;right:-6px;background:var(--verde);color:#fff;
  font-size:.72rem;font-weight:800;padding:.2rem .7rem;border-radius:6px;box-shadow:var(--sombra-suave);
}

/* Beneficios */
.benef-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.benef{
  background:#fff;border-radius:var(--radio);box-shadow:var(--sombra-suave);
  padding:1.5rem 1.4rem;height:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;
}
.benef img{width:54px;height:54px}
.benef h3{font-size:1.05rem;margin:0}
.benef p{font-size:.92rem;margin:0;color:#41525f}
.no-afiliacion{text-align:center;font-size:.85rem;color:#6b7884;margin-top:1.6rem}

/* Footer */
.am-footer{background:var(--tinta);color:var(--blanco-calido);padding:1.6rem 0}
.am-footer .container-am{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.6rem;justify-content:space-between}
.am-footer img{height:42px}
.am-footer nav{display:flex;flex-wrap:wrap;gap:1.1rem}
.am-footer a{color:#cfe6ff;font-size:.9rem}
.am-footer .copy{font-size:.85rem;opacity:.8}

/* ---------- Responsive ---------- */
/* Tablet + móvil (<lg): hamburguesa, hero apilado, símbolos arriba */
@media (max-width:991.98px){
  /* Header: navegación inline -> hamburguesa + icono de login */
  .am-nav{display:none}
  .am-login-desktop{display:none}
  .am-mobile-actions{display:flex}
  /* Hero apilado: mascotas arriba (un poco más abajo del header) y tarjeta debajo */
  .hero h1{font-size:2.2rem}
  .hero-grid{grid-template-columns:1fr;min-height:auto;padding:1rem 0 0}
  .hero-card{max-width:none;margin-bottom:1rem}
  .hero-mascotas{position:relative;height:270px;justify-content:center;margin-top:calc(3rem + 20px)}
  /* Símbolos visibles arriba, repartidos por el cielo sobre las mascotas (bajados ~20px) */
  .signo{display:block}
  .signo.s1{width:52px;top:4.5%;left:13%}   /* + */
  .signo.s2{width:48px;top:2.5%;left:47%}   /* × */
  .signo.s3{width:42px;top:10.5%;left:80%}  /* ÷ */
  .signo.s4{width:38px;top:7.5%;left:31%}   /* − */
  /* Beneficios: 2 columnas perfectamente homogéneas (todas la misma altura) */
  .benef-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0}
  .benef-row > [class*="col-"]{width:auto;max-width:none;padding:0}
}
@media (max-width:768px){
  .am-footer .container-am{flex-direction:column;text-align:center}
  .am-logo img{height:60px}   /* logo un poco más pequeño en móvil */
}
@media (prefers-reduced-motion:reduce){
  .btn-jugar.pulse,.signo,.hero-mascotas img{animation:none}
}