/* Aprende con Silvia — sistema visual de la maqueta
   Dos temperaturas de una misma familia de diseño:
   - adulto: portada, login, padres, admin (limpio, confiable)
   - kids:   alumno (alegre, ilustrado) — body[data-zone="kids"]
   Todo el movimiento se apaga con prefers-reduced-motion. */

:root{
  --ink:#1c2433;
  --ink-soft:#4a5468;
  --bg:#f6f7fb;
  --card:#ffffff;
  --line:#e4e7f0;
  --night:#14162b;

  --brand-800:#312e81;
  --brand-700:#3730a3;
  --brand-600:#4f46e5;
  --brand-500:#6366f1;
  --brand-300:#a5b4fc;
  --brand-100:#e9e8fd;

  --teal-700:#0f766e;
  --teal-600:#0d9488;
  --teal-100:#d9f5f0;

  --coral-700:#c2410c;
  --coral-600:#f0653e;
  --coral-100:#ffe6dc;

  --amber-700:#b45309;
  --amber-600:#d97706;
  --amber-400:#fbbf24;
  --amber-100:#fef1d7;

  --ok-600:#15803d;
  --ok-100:#dcfce7;

  --radius-lg:22px;
  --radius-md:14px;

  --shadow-sm:0 1px 2px rgba(28,36,51,.06), 0 2px 6px -2px rgba(28,36,51,.06);
  --shadow-md:0 12px 28px -12px rgba(55,48,163,.28), 0 2px 6px -2px rgba(28,36,51,.08);
  --shadow-lg:0 28px 60px -20px rgba(55,48,163,.40), 0 8px 16px -8px rgba(28,36,51,.14);

  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --font-ui:"Nunito","Segoe UI",system-ui,sans-serif;
  --font-display:"Baloo 2","Nunito",sans-serif;
  --mq-h:0px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  animation:pageIn .55s var(--ease-out) backwards;
  overflow-x:hidden;
}
body.page-out{ opacity:0; transition:opacity .22s ease-in; }
@keyframes pageIn{ from{ opacity:0; } }

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; line-height:1.15; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--brand-500); outline-offset:3px; border-radius:8px; }

.container{ width:min(1180px, 100% - 40px); margin-inline:auto; }

/* ---------- Marca ---------- */
.brand-mark{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:20px; text-decoration:none; color:inherit; }
.dot{ width:12px; height:12px; border-radius:50%; background:var(--coral-600); flex-shrink:0; animation:dotPulse 2.8s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(240,101,62,.28); } 50%{ box-shadow:0 0 0 8px rgba(240,101,62,.08); } }

/* ---------- Botones ---------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; border:none; cursor:pointer;
  font-weight:800; font-size:15px; text-decoration:none;
  transition:transform .25s var(--ease-spring), box-shadow .25s, background-color .2s, border-color .2s, opacity .2s;
}
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .75s var(--ease-out);
}
.btn:hover::after{ transform:translateX(130%); }
.btn:active{ transform:scale(.96); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-primary{ background:linear-gradient(180deg,#5b53ee,#4338ca); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-md); }
.btn-primary:hover:not([disabled]){ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-lg); }
.btn-ghost{ background:#fff; color:var(--brand-700); border:2px solid var(--brand-100); }
.btn-ghost:hover{ border-color:var(--brand-500); transform:translateY(-1px); }
.btn-glass{ background:rgba(255,255,255,.08); color:#fff; border:2px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.btn-glass:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.btn-soft{ background:var(--brand-100); color:var(--brand-700); }
.btn-soft:hover{ background:#dedcfc; transform:translateY(-1px); }
.btn-dark{ background:linear-gradient(180deg,#2a3147,#1c2433); color:#fff; box-shadow:var(--shadow-md); }
.btn-dark:hover{ transform:translateY(-2px); }
.btn-sm{ padding:8px 16px; font-size:13px; }
.btn-block{ width:100%; }
.btn-kids{
  background:linear-gradient(180deg,#d24f16,#a8360a); color:#fff; font-size:17px; padding:15px 24px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25), inset 0 -4px 0 rgba(0,0,0,.18), 0 12px 24px -10px rgba(168,54,10,.7);
}
.btn-kids:hover{ transform:translateY(-3px) scale(1.02); }
.btn-kids.ready{ animation:readyPulse 1.4s ease-in-out infinite; }
@keyframes readyPulse{
  0%,100%{ box-shadow:inset 0 2px 0 rgba(255,255,255,.25), inset 0 -4px 0 rgba(0,0,0,.18), 0 12px 24px -10px rgba(168,54,10,.7), 0 0 0 0 rgba(234,88,12,.45); }
  50%{ box-shadow:inset 0 2px 0 rgba(255,255,255,.25), inset 0 -4px 0 rgba(0,0,0,.18), 0 12px 24px -10px rgba(168,54,10,.7), 0 0 0 14px rgba(234,88,12,0); }
}
.btn.loading{ color:transparent; }
.btn.loading::before{
  content:""; position:absolute; width:18px; height:18px; border-radius:50%;
  border:3px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:800; white-space:nowrap; }
.chip-brand{ background:var(--brand-100); color:var(--brand-700); }
.chip-teal{ background:var(--teal-100); color:var(--teal-700); }
.chip-amber{ background:var(--amber-100); color:var(--amber-700); }
.chip-coral{ background:var(--coral-100); color:var(--coral-700); }
.chip-ok{ background:var(--ok-100); color:var(--ok-600); }
.chip-ghost{ background:#fff; border:1px solid var(--line); color:var(--ink-soft); }
.chip-shine{ position:relative; overflow:hidden; }
.chip-shine::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform:translateX(-120%); animation:chipShine 4.5s ease-in-out infinite;
}
@keyframes chipShine{ 0%,65%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }

/* ---------- Selector de idioma y pestañas con píldora deslizante ---------- */
.lang-switch, .role-tabs{ position:relative; display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; box-shadow:var(--shadow-sm); }
.lang-switch button, .role-tabs button{
  position:relative; z-index:1; border:none; background:transparent; border-radius:999px; cursor:pointer;
  font-weight:800; color:var(--ink-soft); transition:color .3s;
}
.lang-switch button{ padding:6px 14px; font-size:13px; }
.lang-switch button.active, .role-tabs button.active{ color:#fff; }
.lang-switch:not(.has-pill) button.active, .role-tabs:not(.has-pill) button.active{ background:var(--brand-600); }
.ls-pill, .rt-pill{
  position:absolute; top:3px; bottom:3px; left:3px; z-index:0; border-radius:999px;
  background:linear-gradient(180deg,#5b53ee,#4338ca); box-shadow:0 6px 14px -6px rgba(79,70,229,.8);
  transition:transform .5s var(--ease-spring), width .35s var(--ease-out);
}
[data-zone="kids"] .ls-pill{ background:linear-gradient(180deg,#d24f16,#a8360a); box-shadow:0 6px 14px -6px rgba(168,54,10,.8); }
[data-zone="kids"] .lang-switch:not(.has-pill) button.active{ background:var(--coral-700); }

/* ---------- Tarjetas ---------- */
.card{ background:var(--card); border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.card-pad{ padding:26px; }

/* ---------- Revelado al hacer scroll ---------- */
.rv{ opacity:0; translate:0 28px; scale:.985; transition:opacity .8s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-out); transition-delay:var(--rv-delay,0ms); }
.rv.rv-in{ opacity:1; translate:0 0; scale:1; }
[data-split] .w{ display:inline-block; animation:wordUp .9s var(--ease-out) both; animation-delay:calc(var(--i) * 65ms + 120ms); }
@keyframes wordUp{ from{ opacity:0; transform:translateY(.55em) rotate(3deg); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }

/* ---------- Progreso ---------- */
.progress-track{ background:var(--brand-100); border-radius:999px; height:10px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(28,36,51,.1); }
.progress-fill{ position:relative; overflow:hidden; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--brand-500),var(--teal-600)); transition:width 1.4s var(--ease-out); }
.progress-fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform:translateX(-100%); animation:barShine 3s ease-in-out 1.4s infinite;
}
@keyframes barShine{ 55%,100%{ transform:translateX(100%); } }
[data-zone="kids"] .progress-fill{ background:linear-gradient(90deg,var(--coral-600),var(--amber-400)); }

/* ---------- Pequeñas vidas ---------- */
.flame{ display:inline-block; transform-origin:50% 90%; animation:flicker 1.3s ease-in-out infinite; }
@keyframes flicker{ 0%,100%{ transform:scale(1) rotate(-3deg); } 25%{ transform:scale(1.08,1.15) rotate(2deg); } 50%{ transform:scale(.96,1.02) rotate(-2deg); } 75%{ transform:scale(1.05,1.1) rotate(3deg); } }
.ic-bounce{ display:inline-block; }
.rv-in .ic-bounce{ animation:icBounce .9s var(--ease-spring) .25s both; }
@keyframes icBounce{ from{ transform:scale(.2) rotate(-30deg); opacity:0; } }
.wiggle{ display:inline-block; transform-origin:70% 70%; animation:wiggle 3.4s ease-in-out infinite; }
@keyframes wiggle{ 0%,78%,100%{ transform:rotate(0); } 82%{ transform:rotate(-16deg); } 86%{ transform:rotate(13deg); } 90%{ transform:rotate(-8deg); } 94%{ transform:rotate(4deg); } }
.bump{ animation:bump .55s var(--ease-spring); }
@keyframes bump{ 40%{ transform:scale(1.28); } }
.star-pop{ display:inline-block; animation:starPop .65s var(--ease-spring) both; }
@keyframes starPop{ from{ opacity:0; transform:scale(0) rotate(-120deg); } }
.live-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#22c55e; vertical-align:middle; animation:livePulse 1.8s ease-out infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); } 70%,100%{ box-shadow:0 0 0 9px rgba(34,197,94,0); } }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-12px) rotate(8deg); } }

/* ---------- Kiwi, la mascota ---------- */
.kiwi{ position:relative; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.kiwi:focus-visible{ outline-offset:6px; border-radius:24px; }
.kiwi-svg{ display:block; width:100%; height:auto; overflow:visible; }
.kiwi .k-shadow{ fill:rgba(20,22,43,.2); transform-box:fill-box; transform-origin:50% 50%; animation:kShadow 3.6s ease-in-out infinite; }
.kiwi .k-all{ transform-box:fill-box; transform-origin:50% 100%; animation:kFloat 3.6s ease-in-out infinite; }
.kiwi .k-body{ transform-box:fill-box; transform-origin:50% 100%; animation:kBreathe 3.6s ease-in-out infinite; }
.kiwi .k-wing-l{ transform-box:fill-box; transform-origin:85% 6%; animation:kWingL 3.6s ease-in-out infinite; }
.kiwi .k-wing-r{ transform-box:fill-box; transform-origin:15% 6%; animation:kWingR 3.6s ease-in-out infinite; }
.kiwi .k-tuft-l{ transform-box:fill-box; transform-origin:70% 100%; animation:kTwitchL 5.5s ease-in-out infinite; }
.kiwi .k-tuft-r{ transform-box:fill-box; transform-origin:30% 100%; animation:kTwitchR 5.5s ease-in-out .12s infinite; }
.kiwi .k-tassel{ transform-box:fill-box; transform-origin:0% 0%; animation:kSwing 2.6s ease-in-out infinite; }
.kiwi .k-scarf-tail{ transform-box:fill-box; transform-origin:25% 0%; animation:kFlutter 2.3s ease-in-out infinite alternate; }
.kiwi .k-face{ transform-box:fill-box; transform-origin:50% 50%; transition:translate .3s var(--ease-out); }
.kiwi .k-pupil{ transition:translate .2s ease-out; }
.kiwi .k-lid{ transform-box:fill-box; transform-origin:50% 0; transform:scaleY(0); transition:transform .07s ease-in; }
.kiwi.blink .k-lid{ transform:scaleY(1); }
.kiwi .k-eye, .kiwi .k-happy{ transition:opacity .15s; }
.kiwi .k-happy{ opacity:0; }
.kiwi.is-happy .k-happy{ opacity:1; }
.kiwi.is-happy .k-eye{ opacity:0; }
.kiwi .k-cheek{ opacity:.5; transition:opacity .3s; }
.kiwi.is-happy .k-cheek, .kiwi:hover .k-cheek{ opacity:1; }
.kiwi .k-beak{ transform-box:fill-box; transform-origin:50% 0; }
.kiwi.talking .k-beak{ animation:kTalk .19s ease-in-out infinite alternate; }
.kiwi.is-hop .k-all{ animation:kHop .65s ease-out; }
.kiwi.is-jump .k-all{ animation:kJump .85s var(--ease-out); }
.kiwi.is-jump .k-shadow{ animation:kShadowJump .85s var(--ease-out); }
.kiwi.is-flap .k-wing-l{ animation:kFlapL .16s ease-in-out 6 alternate; }
.kiwi.is-flap .k-wing-r{ animation:kFlapR .16s ease-in-out 6 alternate; }
.kiwi.is-wave .k-wing-r{ animation:kWave 1.4s ease-in-out; }
.kiwi.is-tilt .k-face{ animation:kTilt 1.9s ease-in-out; }

@keyframes kFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes kShadow{ 0%,100%{ transform:scaleX(1); opacity:1; } 50%{ transform:scaleX(.82); opacity:.65; } }
@keyframes kBreathe{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(.985,1.025); } }
@keyframes kWingL{ 50%{ transform:rotate(6deg); } }
@keyframes kWingR{ 50%{ transform:rotate(-6deg); } }
@keyframes kFlapL{ to{ transform:rotate(38deg); } }
@keyframes kFlapR{ to{ transform:rotate(-38deg); } }
@keyframes kWave{ 18%{ transform:rotate(-100deg); } 34%{ transform:rotate(-72deg); } 50%{ transform:rotate(-104deg); } 66%{ transform:rotate(-72deg); } 82%{ transform:rotate(-96deg); } 100%{ transform:rotate(0); } }
@keyframes kTwitchL{ 0%,86%,100%{ transform:rotate(0); } 89%{ transform:rotate(-16deg); } 93%{ transform:rotate(7deg); } 96%{ transform:rotate(-3deg); } }
@keyframes kTwitchR{ 0%,86%,100%{ transform:rotate(0); } 89%{ transform:rotate(16deg); } 93%{ transform:rotate(-7deg); } 96%{ transform:rotate(3deg); } }
@keyframes kSwing{ 0%,100%{ transform:rotate(-7deg); } 50%{ transform:rotate(11deg); } }
@keyframes kFlutter{ from{ transform:rotate(-5deg); } to{ transform:rotate(8deg); } }
@keyframes kTalk{ to{ transform:scaleY(.7); } }
@keyframes kTilt{ 25%,70%{ transform:rotate(-10deg); } }
@keyframes kHop{ 0%,100%{ transform:translateY(0) scale(1); } 20%{ transform:translateY(3px) scale(1.06,.92); } 50%{ transform:translateY(-16px) scale(.97,1.04); } 78%{ transform:translateY(0) scale(1.04,.96); } }
@keyframes kJump{
  0%{ transform:translateY(0) scale(1,1); }
  15%{ transform:translateY(4px) scale(1.12,.86); }
  45%{ transform:translateY(-36px) scale(.93,1.09); }
  70%{ transform:translateY(0) scale(1.09,.9); }
  85%{ transform:translateY(-4px) scale(.98,1.03); }
  100%{ transform:translateY(0) scale(1,1); }
}
@keyframes kShadowJump{ 45%{ transform:scaleX(.5); opacity:.35; } }

/* Bocadillo con escritura y hueco reservado (no salta al teclear) */
.mascot-bubble{
  position:relative; background:#fff; border:2px solid var(--brand-100); border-radius:20px; padding:14px 18px;
  font-weight:800; font-size:15px; line-height:1.4; color:var(--brand-700); max-width:300px;
  box-shadow:var(--shadow-md); transform-origin:24px 100%;
  transition:opacity .3s, transform .5s var(--ease-spring);
}
.mascot-bubble::after{
  content:""; position:absolute; left:34px; bottom:-10px; width:18px; height:18px; background:#fff;
  border-right:2px solid var(--brand-100); border-bottom:2px solid var(--brand-100); transform:rotate(45deg);
}
.mascot-bubble.tail-left{ transform-origin:0 50%; }
.mascot-bubble.tail-left::after{ left:-10px; top:50%; bottom:auto; margin-top:-9px; border:none; border-left:2px solid var(--brand-100); border-bottom:2px solid var(--brand-100); }
.mascot-bubble.is-hidden{ opacity:0; transform:scale(.5); }
.mascot-bubble.pop{ animation:bubblePop .5s var(--ease-spring); }
@keyframes bubblePop{ from{ transform:scale(.86); } }
.mascot-bubble .bt-ghost{ visibility:hidden; }
.mascot-bubble .bt-live{ position:absolute; left:18px; right:18px; top:14px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Capas decorativas: orbes y letras flotantes ---------- */
.orbs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.orbs > div{ position:absolute; inset:0; }
.orb{ position:absolute; border-radius:50%; filter:blur(56px); opacity:.55; animation:orbDrift 18s ease-in-out infinite alternate; }
.orb.o1{ width:440px; height:440px; background:#7c6cf6; top:-140px; right:-90px; }
.orb.o2{ width:380px; height:380px; background:#14b8a6; top:30px; left:-150px; animation-duration:22s; }
.orb.o3{ width:320px; height:320px; background:#f0653e; bottom:-190px; left:42%; opacity:.32; animation-duration:26s; }
@keyframes orbDrift{ 0%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(46px,30px) scale(1.12); } 100%{ transform:translate(-34px,54px) scale(.94); } }
.glyph-field{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.fg{ position:absolute; font-family:var(--font-display); font-weight:800; color:#fff; line-height:1; animation:glyphBob ease-in-out infinite; }
@keyframes glyphBob{ 0%,100%{ transform:translateY(0) rotate(-8deg); } 50%{ transform:translateY(-24px) rotate(8deg); } }

/* ---------- Portada ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate; border-radius:0 0 44px 44px; color:#fff; padding-bottom:110px;
  background:
    radial-gradient(900px 500px at 85% -10%, #5b50e8 0%, transparent 60%),
    radial-gradient(700px 500px at 5% 0%, #0d7d73 0%, transparent 55%),
    linear-gradient(160deg,#241f6b, #141032 70%);
}
.hero > .container{ position:relative; z-index:2; padding-top:26px; }
.topnav{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 0 44px; }
.topnav .brand-mark{ color:#fff; font-size:21px; }
.topnav .links{ display:flex; gap:28px; font-weight:700; font-size:14.5px; }
.topnav .links a{ position:relative; text-decoration:none; color:#dcdcff; padding:4px 0; }
.topnav .links a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px; background:#a6ffe4; transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--ease-out); }
.topnav .links a:hover{ color:#fff; }
.topnav .links a:hover::after{ transform:scaleX(1); }
.topnav .actions{ display:flex; gap:12px; align-items:center; }

.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; backdrop-filter:blur(6px); }
.hero h1{ font-size:clamp(34px, 4.6vw, 54px); margin-top:18px; }
.hero h1 em{
  font-style:normal; color:#a6ffe4;
  background:linear-gradient(90deg,#a6ffe4,#7dd3fc,#c4b5fd,#a6ffe4); background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 7s linear infinite;
}
.hero h1[data-split] em.w{ animation:wordUp .9s var(--ease-out) both, shimmer 7s linear infinite; animation-delay:calc(var(--i) * 65ms + 120ms), 0s; }
@keyframes shimmer{ to{ background-position:300% 0; } }
.hero p.lead{ color:#dcdcff; font-size:17px; margin-top:18px; max-width:520px; line-height:1.6; }
.cta-row{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.trust-row{ display:flex; gap:22px; margin-top:34px; flex-wrap:wrap; color:#d0d1f7; font-size:13.5px; font-weight:700; }
.trust-row > span{ display:flex; align-items:center; gap:7px; }

.hero-visual{ position:relative; }
.hero-card{
  position:relative; overflow:hidden; z-index:2;
  background:#fff; border-radius:26px; padding:22px; color:var(--ink);
  box-shadow:0 44px 80px -26px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.7) inset;
  transition:transform .6s var(--ease-out);
}
.hero-card::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(380px circle at var(--gx,30%) var(--gy,0%), rgba(99,102,241,.12), transparent 50%); }
.hero-card .me{ display:flex; gap:14px; align-items:center; margin:14px 0 16px; }
.mini-prog{ padding:14px; margin-bottom:10px; border:none; }
.mini-prog.teal{ background:var(--teal-100); }
.mini-prog.brand{ background:var(--brand-100); margin-bottom:0; }
.mini-prog .row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:800; margin-bottom:8px; }
.mini-prog.teal .row{ color:var(--teal-700); }
.mini-prog.brand .row{ color:var(--brand-700); }
.mini-prog .progress-track{ background:rgba(255,255,255,.75); }

.float-card{
  position:absolute; z-index:3; display:flex; align-items:center; gap:8px; white-space:nowrap;
  background:#fff; color:var(--ink); border-radius:14px; padding:9px 13px; font-size:12.5px; font-weight:800;
  box-shadow:var(--shadow-lg);
  animation:fcIn .8s var(--ease-spring) 1.2s both, fcBob 5s ease-in-out 2s infinite;
}
.float-card.fc1{ top:-24px; right:-18px; }
.float-card.fc2{ top:-26px; left:-28px; animation-delay:1.5s, 2.4s; }
@keyframes fcIn{ from{ opacity:0; scale:.5; } }
@keyframes fcBob{ 0%,100%{ transform:translateY(0) rotate(2deg); } 50%{ transform:translateY(-10px) rotate(-1.5deg); } }
.hero-kiwi{ position:absolute; z-index:4; width:140px; left:-70px; bottom:-92px; }
.hero-bubble{ position:absolute; z-index:5; left:84px; bottom:-78px; max-width:300px; font-size:14px; }
.plus-chip{
  position:absolute; z-index:6; pointer-events:none; white-space:nowrap;
  background:#fff; color:var(--amber-700); font-weight:900; font-size:13px; border-radius:999px; padding:5px 11px;
  box-shadow:var(--shadow-md); animation:plusUp 1.7s var(--ease-out) forwards;
}
.plus-chip.big{ color:var(--brand-700); font-size:14px; }
@keyframes plusUp{
  0%{ opacity:0; transform:translate(-50%, 10px) scale(.6); }
  20%{ opacity:1; transform:translate(-50%, 0) scale(1.06); }
  100%{ opacity:0; transform:translate(-50%, -52px) scale(1); }
}

.section{ padding:84px 0; }
.section-head{ text-align:center; max-width:660px; margin:0 auto 46px; }
.section-head .chip{ margin-bottom:14px; }
.section-head h2{ font-size:clamp(26px, 3vw, 34px); }
.section-head p{ color:var(--ink-soft); margin-top:12px; font-size:15.5px; }

.stage-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stage-card{
  position:relative; overflow:hidden; isolation:isolate; min-height:178px;
  border-radius:var(--radius-lg); padding:24px; color:#fff;
  box-shadow:0 18px 40px -18px rgba(28,36,51,.5);
  transition:transform .45s var(--ease-spring), box-shadow .3s;
}
.stage-card::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(160deg, rgba(255,255,255,.26), transparent 45%); }
.stage-card:hover{ transform:translateY(-8px) rotate(-.6deg); box-shadow:0 32px 54px -20px rgba(28,36,51,.6); }
.stage-card h3{ font-size:21px; }
.stage-card p{ font-size:13.5px; margin-top:6px; }
.stage-card .ages{ display:inline-block; font-size:12px; margin-top:14px; font-weight:800; background:rgba(0,0,0,.18); padding:4px 10px; border-radius:999px; }
.stage-card h3, .stage-card p{ text-shadow:0 1px 2px rgba(0,0,0,.22); }
.stage-art{ position:absolute; right:-4px; bottom:-16px; z-index:-1; font-size:92px; line-height:1; filter:drop-shadow(0 12px 14px rgba(0,0,0,.3)); animation:artFloat 5s ease-in-out infinite; }
.stage-card:nth-child(2) .stage-art{ animation-delay:-1.2s; }
.stage-card:nth-child(3) .stage-art{ animation-delay:-2.4s; }
.stage-card:nth-child(4) .stage-art{ animation-delay:-3.6s; }
.stage-card:hover .stage-art{ animation:artHop .8s var(--ease-spring); }
@keyframes artFloat{ 0%,100%{ transform:rotate(-8deg) translateY(0); } 50%{ transform:rotate(4deg) translateY(-9px); } }
@keyframes artHop{ 40%{ transform:rotate(12deg) translateY(-20px) scale(1.12); } }
.bg-infantil{ background:linear-gradient(160deg,#c94410,#9a3412); }
.bg-primaria{ background:linear-gradient(160deg,#4f46e5,#312e81); }
.bg-eso{ background:linear-gradient(160deg,#0f766e,#134e4a); }
.bg-bili{ background:linear-gradient(160deg,#b45309,#78350f); }

.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease-spring), box-shadow .3s, border-color .3s;
}
.feature:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:transparent; }
.feature .ic{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:25px; margin-bottom:16px;
  box-shadow:inset 0 -3px 0 rgba(28,36,51,.07); transition:transform .55s var(--ease-spring);
}
.feature:hover .ic{ transform:rotate(-12deg) scale(1.16); }
.feature h3{ font-size:17.5px; }
.feature p{ color:var(--ink-soft); font-size:14px; margin-top:8px; line-height:1.55; }

.bilingual-strip{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(120deg,var(--brand-700),#1a1550); border-radius:32px; color:#fff; padding:46px;
  display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
}
.bilingual-strip > *:not(.orbs){ position:relative; z-index:2; }
.bilingual-strip .flags{ display:flex; gap:10px; margin-top:18px; }
.bilingual-strip .flags span{ background:rgba(255,255,255,.14); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:800; }
.flip-demo{ padding:20px; color:var(--ink); }
.flip-demo .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-weight:900; }
.flip-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; perspective:900px; }
.flip{ height:96px; padding:0; border:none; background:none; cursor:pointer; font:inherit; }
.flip-in{ position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .85s var(--ease-spring); }
.flip.is-flipped .flip-in{ transform:rotateY(180deg); }
.flip-face{
  position:absolute; inset:0; border-radius:16px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-weight:900; font-size:15px;
  box-shadow:inset 0 -3px 0 rgba(28,36,51,.08);
}
.flip-face .e{ font-size:30px; line-height:1.1; }
.flip-face small{ font-size:10.5px; letter-spacing:.1em; }
.flip-face.front{ background:var(--brand-100); color:var(--brand-700); }
.flip-face.back{ background:var(--teal-100); color:var(--teal-700); transform:rotateY(180deg); }

.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testimonial{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease-spring), box-shadow .3s;
}
.testimonial:hover{ transform:translateY(-6px) rotate(.4deg); box-shadow:var(--shadow-lg); }
.testimonial::before{ content:"\201C"; position:absolute; right:20px; top:-4px; font-family:var(--font-display); font-size:100px; line-height:1; color:var(--brand-100); }
.testimonial .stars{ color:#f59e0b; font-size:16px; letter-spacing:2px; }
.testimonial p{ position:relative; margin-top:12px; font-size:14.5px; line-height:1.6; }
.testimonial.how::before{ content:none; }
.how-ic{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:27px; margin-bottom:16px; box-shadow:inset 0 -3px 0 rgba(28,36,51,.07); transition:transform .55s var(--ease-spring); }
.testimonial.how:hover .how-ic{ transform:rotate(-10deg) scale(1.14); }
.testimonial.how h3{ font-size:19px; }
.testimonial.how p{ color:var(--ink-soft); margin-top:8px; }
.testimonial .who{ margin-top:18px; display:flex; align-items:center; gap:10px; font-weight:800; font-size:13.5px; }

.footer-cta{
  position:relative; overflow:hidden; isolation:isolate; text-align:center; color:#fff; border-radius:44px; padding:70px 30px; margin-bottom:60px;
  background:linear-gradient(120deg,#241f6b,#141032,#2b1f6b,#0f4f4a); background-size:300% 300%; animation:gradShift 14s ease-in-out infinite;
}
.footer-cta > .cta-inner{ position:relative; z-index:2; }
.footer-cta h2{ font-size:clamp(24px,3vw,32px); }
.footer-cta p{ color:#dcdcff; margin-top:10px; }
.footer-cta .cta-row{ justify-content:center; margin-top:26px; }
@keyframes gradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

.site-footer{ padding:40px 0 60px; color:var(--ink-soft); font-size:13.5px; }
.site-footer .cols{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:24px; margin-bottom:30px; }
.site-footer .brand-mark{ color:var(--ink); }
.site-footer h5{ color:var(--ink); font-size:13px; margin:0 0 10px; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.site-footer a{ text-decoration:none; color:var(--ink-soft); transition:color .2s; }
.site-footer a:hover{ color:var(--brand-600); }

.avatar{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:18px; flex-shrink:0; box-shadow:inset 0 -3px 0 rgba(0,0,0,.12); }
.avatar.sm{ width:34px; height:34px; font-size:13px; }

/* ---------- Login ---------- */
.login-wrap{ min-height:calc(100vh - var(--mq-h)); display:grid; grid-template-columns:1fr 1fr; }
.login-side{
  position:relative; overflow:hidden; isolation:isolate; color:#fff; padding:48px 54px;
  display:flex; flex-direction:column; justify-content:space-between; gap:30px;
  background:linear-gradient(160deg,#241f6b,#141032);
}
.login-side > .ls-content{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:30px; }
.login-side .brand-mark{ color:#fff; }
.login-kiwi-wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:26px; }
.login-kiwi{ width:150px; }
.login-side .quote{ font-family:var(--font-display); font-size:clamp(20px,2.2vw,27px); line-height:1.35; max-width:430px; }
.login-side .quote-by{ opacity:.8; margin-top:12px; font-size:13.5px; }
.login-form-col{ display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.login-box{ width:100%; max-width:430px; }
.role-tabs{ display:flex; width:100%; margin-bottom:28px; }
.role-tabs button{ flex:1; padding:10px 8px; font-size:13.5px; }
.auth-panel{ display:none; }
.auth-panel.active{ display:block; animation:panelIn .45s var(--ease-out); }
@keyframes panelIn{ from{ opacity:0; transform:translateX(16px); } }
.auth-panel .lead{ color:var(--ink-soft); margin-top:8px; font-size:14px; }
.lbl{ display:block; font-size:13px; font-weight:800; color:var(--ink-soft); margin-bottom:8px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:800; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); font-size:14.5px; font-family:inherit; background:#fff; color:var(--ink);
  transition:border-color .2s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(99,102,241,.18); }

.pin-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pin-grid button{
  aspect-ratio:1; border-radius:18px; border:2px solid var(--line); background:#fff; cursor:pointer; font-size:26px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 -3px 0 rgba(28,36,51,.05);
  transition:transform .35s var(--ease-spring), border-color .2s, background .2s, box-shadow .2s;
}
.pin-grid button:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--brand-100); }

.kid-mode{ display:none; }
.kid-mode.active{ display:block; animation:panelIn .45s var(--ease-out); }
.class-chip{
  display:flex; align-items:center; gap:10px; margin-bottom:18px; padding:9px 12px 9px 14px;
  background:var(--teal-100); color:var(--teal-700); border-radius:14px; font-size:13.5px; font-weight:700;
}
.class-chip .cc-text{ flex:1; }
.link-btn{ border:none; background:none; padding:2px 4px; font:inherit; font-weight:800; color:var(--brand-700); text-decoration:underline; text-underline-offset:3px; cursor:pointer; border-radius:6px; }
.link-btn:hover{ color:var(--brand-600); }
.class-chip .link-btn{ color:var(--teal-700); }
.kid-name{ margin-bottom:18px; }
.kid-name-box{ position:relative; }
.kid-name-box input{
  width:100%; padding:14px 48px 14px 18px; border-radius:16px; border:2px solid var(--line); background:#fff; color:var(--ink);
  font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:.01em;
  box-shadow:inset 0 -3px 0 rgba(28,36,51,.05); transition:border-color .2s, box-shadow .25s;
}
.kid-name-box input::placeholder{ color:#6b7385; font-family:var(--font-ui); font-size:17px; font-weight:700; }
.kid-name-box input:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(99,102,241,.18); }
.kid-name-ok{
  position:absolute; right:12px; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%;
  display:grid; place-items:center; background:var(--ok-600); color:#fff; font-weight:900; font-size:16px;
  transform:scale(0); transition:transform .45s var(--ease-spring);
}
.kid-name.ok .kid-name-ok{ transform:scale(1); }
.kid-name.ok input{ border-color:var(--ok-600); }
.shake{ animation:shake .45s ease-in-out; }
@keyframes shake{ 20%{ transform:translateX(-8px); } 40%{ transform:translateX(7px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(3px); } }
.maq-hint{ margin-top:18px; padding:10px 12px; border:1.5px dashed #b9bdd3; border-radius:12px; font-size:12.5px; font-weight:700; color:var(--ink-soft); background:#fafaff; }
.pin-grid button.tap{ animation:tap .35s var(--ease-spring); }
@keyframes tap{ 40%{ transform:scale(.84); } }
.pin-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pin-clear{ border:none; background:none; color:var(--brand-700); font-weight:800; font-size:13px; cursor:pointer; padding:4px 8px; border-radius:8px; }
.pin-clear:hover{ background:var(--brand-100); }
.pin-dots{ display:flex; gap:10px; justify-content:center; margin:0 0 14px; }
.pin-dots .d{ width:44px; height:44px; border-radius:13px; border:2px dashed #c9cde0; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; transition:border-color .2s, background .2s; }
.pin-dots .d.on{ border-style:solid; border-color:var(--brand-500); background:var(--brand-100); animation:dotIn .5s var(--ease-spring); }
@keyframes dotIn{ from{ transform:scale(.3) rotate(-25deg); } }
.login-alt{ text-align:center; margin-top:16px; font-size:13px; color:var(--ink-soft); }
.login-alt a{ color:var(--brand-700); font-weight:800; }

/* ---------- Paneles de padres y admin ---------- */
.app-shell{ display:grid; grid-template-columns:252px 1fr; min-height:calc(100vh - var(--mq-h)); }
.app-side{
  position:sticky; top:var(--mq-h); height:calc(100vh - var(--mq-h)); overflow-x:hidden; overflow-y:auto; isolation:isolate;
  color:#c6cbf0; padding:22px 16px; display:flex; flex-direction:column; gap:3px;
  background:radial-gradient(320px 260px at 0% 100%, rgba(99,102,241,.42), transparent 70%), radial-gradient(260px 200px at 100% 0%, rgba(13,148,136,.22), transparent 70%), var(--night);
  background-size:140% 140%, 140% 140%, auto;
  animation:sideGlow 12s ease-in-out infinite alternate;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
}
@keyframes sideGlow{ to{ background-position:30% 0%, 0% 60%, 0 0; } }
.app-side .brand-mark{ color:#fff; font-size:19px; padding:6px 10px 22px; }
.app-side a.nav{
  position:relative; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; text-decoration:none;
  color:#c6cbf0; font-weight:700; font-size:14.5px; transition:background .25s, color .25s, padding-left .35s var(--ease-out);
}
.app-side a.nav:hover{ background:rgba(255,255,255,.06); color:#fff; padding-left:17px; }
.app-side a.nav.active{ background:linear-gradient(90deg, rgba(99,102,241,.38), rgba(99,102,241,.06)); color:#fff; }
.app-side a.nav.active::before{ content:""; position:absolute; left:-16px; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(180deg,#c7d2fe,#6366f1); box-shadow:0 0 12px rgba(165,180,252,.9); }
.app-side .side-group{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8c92bd; margin:16px 12px 4px; font-weight:800; }
.app-side .side-foot{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:10px; }
.app-side .logout{ color:#ffb4a0; text-decoration:none; font-weight:800; font-size:14px; padding:6px 12px; }
.app-mobilebar{ display:none; }

.app-main{ padding:28px 34px 70px; max-width:1200px; width:100%; }
.app-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.app-topbar h1{ font-size:28px; }
.app-topbar .sub{ color:var(--ink-soft); font-size:14.5px; margin-top:4px; }

.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
.kpi{
  position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 20px;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease-spring), box-shadow .3s;
}
.kpi:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.kpi::before{ content:""; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand-500),var(--teal-600)); transform-origin:0 50%; transition:transform 1s var(--ease-out) .25s; }
.kpi.rv:not(.rv-in)::before{ transform:scaleX(0); }
.kpi .n{ font-family:var(--font-display); font-size:30px; display:inline-block; }
.kpi .l{ color:var(--ink-soft); font-size:13px; font-weight:700; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px; }
.admin-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:22px; margin-bottom:26px; align-items:start; }
.card-head{ padding:20px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.card-head h3{ font-size:17px; display:flex; align-items:center; gap:10px; }
.child-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.child-head .name{ font-weight:900; font-size:16px; }
.child-head .grade{ color:var(--ink-soft); font-size:13px; }
.child-head .btn{ margin-left:auto; }
.prog-line{ margin-bottom:14px; }
.prog-line .row{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.child-note{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.btn.attn{ animation:attn 1.1s ease-in-out 2; }
@keyframes attn{ 50%{ box-shadow:0 0 0 8px rgba(99,102,241,.25); transform:scale(1.05); } }

.week-chart{ display:grid; grid-template-columns:repeat(7,1fr); gap:14px; align-items:end; height:150px; padding:10px 24px 0; }
.wk{ display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; }
.wk-bars{ flex:1; width:100%; display:flex; gap:4px; align-items:flex-end; justify-content:center; }
.wk-bars i{ display:block; width:40%; max-width:18px; border-radius:6px 6px 3px 3px; transform-origin:50% 100%; }
.wk-bars i.a{ background:linear-gradient(180deg,#fb923c,#ea580c); }
.wk-bars i.b{ background:linear-gradient(180deg,#2dd4bf,#0f766e); }
.rv-in .wk-bars i{ animation:growY .9s var(--ease-out) both; animation-delay:calc(var(--d) * 70ms + 250ms); }
@keyframes growY{ from{ transform:scaleY(0); } }
.wk small{ font-size:12px; font-weight:800; color:var(--ink-soft); }
.legend{ display:flex; gap:16px; padding:14px 24px 20px; font-size:13px; font-weight:700; color:var(--ink-soft); }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }

table.simple{ width:100%; border-collapse:collapse; font-size:14px; }
table.simple th{ text-align:left; color:var(--ink-soft); font-size:12px; text-transform:uppercase; letter-spacing:.05em; padding:10px 18px; border-bottom:1px solid var(--line); }
table.simple td{ padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.simple tr:last-child td{ border-bottom:none; }
table.simple tbody tr{ transition:background .2s; }
table.simple tbody tr:hover{ background:#f7f7ff; }
.rv-in table.simple tbody tr{ animation:rowIn .55s var(--ease-out) both; animation-delay:calc(var(--r,0) * 75ms + 220ms); }
@keyframes rowIn{ from{ opacity:0; transform:translateX(-12px); } }
tr.row-new td, .tree-row.row-new{ animation:rowFlash 3s ease-out; }
tr.row-new{ animation:rowIn .6s var(--ease-out); }
@keyframes rowFlash{ 0%,20%{ background:#e0e7ff; } 100%{ background:transparent; } }
.fam{ display:flex; align-items:center; gap:10px; }
.fam .t{ font-weight:800; }
.fam .s{ color:var(--ink-soft); font-size:12px; }

.notice{ display:flex; gap:14px; align-items:flex-start; background:linear-gradient(135deg,var(--brand-100),#f3f2ff); border:none; }
.notice .big{ font-size:28px; }
.notice h3{ font-size:16px; color:var(--brand-700); }
.notice p{ margin-top:6px; font-size:14px; line-height:1.55; }

/* Árbol del catálogo */
.tree{ padding:14px 18px; font-size:14px; }
.tree-head{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:8px 8px; border-radius:10px; font-weight:700; color:var(--ink); font-size:14px; transition:background .2s;
}
.tree-head:hover{ background:var(--bg); }
.tree-head .caret{ display:inline-block; width:12px; color:var(--ink-soft); transition:transform .35s var(--ease-out); }
.tree-node.open > .tree-head .caret{ transform:rotate(90deg); }
.tree-head .chip{ margin-left:4px; }
.tree-kids{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out); }
.tree-node.open > .tree-kids{ grid-template-rows:1fr; }
.tree-kids > div{ overflow:hidden; padding-left:20px; }
.tree-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; transition:background .2s; flex-wrap:wrap; }
.tree-row:hover{ background:var(--bg); }
.tree-chips{ display:flex; gap:6px; flex-wrap:wrap; }

.upload{ padding:20px 24px 24px; border-top:1px solid var(--line); background:linear-gradient(180deg,#fafbff,#f3f4fb); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.upload h4{ font-size:15px; margin-bottom:10px; }
.dropzone{ position:relative; border-radius:16px; padding:26px; text-align:center; background:#fff; cursor:pointer; transition:background .25s, transform .35s var(--ease-spring); }
.dropzone:hover{ transform:translateY(-2px); }
.dropzone.is-over{ background:var(--brand-100); transform:scale(1.02); }
.dz-border{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.dz-border rect{ fill:none; stroke:var(--brand-300); stroke-width:2; stroke-dasharray:8 7; transition:stroke .2s; }
.dropzone:hover .dz-border rect, .dropzone.is-over .dz-border rect{ stroke:var(--brand-500); animation:ants .8s linear infinite; }
@keyframes ants{ to{ stroke-dashoffset:-30; } }
.dz-ic{ display:inline-block; font-size:30px; margin-bottom:6px; animation:bob 2.6s ease-in-out infinite; }
.dropzone p{ font-weight:800; font-size:14px; }
.dropzone .hint{ color:var(--ink-soft); font-size:12.5px; margin-top:4px; font-weight:600; }
.file-card{ display:none; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-top:12px; box-shadow:var(--shadow-sm); }
.file-card.show{ display:flex; animation:panelIn .4s var(--ease-out); }
.file-card .fc-ic{ width:40px; height:40px; border-radius:11px; background:var(--coral-100); display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.file-card .fc-main{ flex:1; min-width:0; }
.file-card .fc-name{ font-weight:800; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.file-card .fc-size{ color:var(--ink-soft); font-size:12px; }
.file-card .fc-bar{ height:6px; border-radius:999px; background:var(--brand-100); overflow:hidden; margin-top:6px; }
.file-card .fc-bar i{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--brand-500),var(--teal-600)); transition:width 1.6s var(--ease-out); }
.file-card .fc-ok{ font-size:20px; transform:scale(0); transition:transform .5s var(--ease-spring); }
.file-card.done .fc-ok{ transform:scale(1); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.form-row select, .compose select, .compose textarea{ padding:10px 12px; border-radius:10px; border:1.5px solid var(--line); font-family:inherit; font-size:14px; background:#fff; color:var(--ink); width:100%; transition:border-color .2s, box-shadow .25s; }
.form-row select:focus, .compose select:focus, .compose textarea:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 4px rgba(99,102,241,.18); }
.compose textarea{ resize:vertical; min-height:84px; margin-top:12px; line-height:1.5; }

/* ---------- Zona alumno ---------- */
[data-zone="kids"]{
  --bg:#fff8ef;
  background:
    radial-gradient(700px 400px at 90% -10%, var(--teal-100), transparent 60%),
    radial-gradient(600px 380px at -5% 10%, var(--amber-100), transparent 55%),
    var(--bg);
}
.kids-sky{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.cloud{ position:absolute; left:0; filter:drop-shadow(0 8px 12px rgba(13,148,136,.14)); animation:cloudDrift linear infinite; }
.cloud svg, .sky-bit svg{ display:block; width:100%; height:auto; }
@keyframes cloudDrift{ from{ transform:translateX(-30vw); } to{ transform:translateX(110vw); } }
.sky-bit{ position:absolute; animation:bob ease-in-out infinite; }
[data-zone="kids"] .kids-top, [data-zone="kids"] main{ position:relative; z-index:1; }
.kids-top{ padding:14px 0; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.kids-top-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.kids-top-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.me{ display:flex; align-items:center; gap:8px; font-weight:900; }
.streak-pill{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:2px solid var(--amber-100);
  border-radius:999px; padding:7px 16px; font-weight:800; color:var(--amber-700); box-shadow:var(--shadow-sm);
}
.kids-main{ padding-bottom:70px; }
.kids-hero{ text-align:center; padding:28px 0 14px; }
.kids-hero h1{ font-size:clamp(30px,4vw,40px); color:var(--brand-700); margin-top:10px; }
.mascot-row{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; }
.kids-kiwi{ width:130px; }
[data-zone="kids"] .kpi{
  border:none; text-align:center;
  background:linear-gradient(165deg,#fff, #fff5e8);
  box-shadow:0 12px 26px -16px rgba(217,119,6,.55), inset 0 -3px 0 rgba(217,119,6,.14);
}
[data-zone="kids"] .kpi::before{ background:linear-gradient(90deg,var(--coral-600),var(--amber-400)); }
.kids-kpis{ grid-template-columns:repeat(3,1fr); max-width:660px; margin-inline:auto; }
.shelf-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:40px 0 18px; flex-wrap:wrap; }
.shelf-head h2{ font-size:24px; display:flex; align-items:center; gap:10px; }
.shelf-head h2 .tag-ic{ width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-size:21px; box-shadow:inset 0 -3px 0 rgba(28,36,51,.08); }
.kids-shelf{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-bottom:26px; }
.kids-shelf::after{
  content:""; position:absolute; left:-12px; right:-12px; bottom:0; height:16px; border-radius:9px;
  background:linear-gradient(180deg,#e9bd8e,#c48954);
  box-shadow:0 12px 16px -8px rgba(120,70,30,.45), inset 0 3px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.08);
}
.kids-tile{
  position:relative; z-index:1; overflow:hidden; background:var(--card); border-radius:24px; text-align:center; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); box-shadow:0 10px 18px -12px rgba(28,36,51,.35);
  transition:transform .45s var(--ease-spring), box-shadow .3s;
}
.kids-tile:hover{ transform:translateY(-10px) rotate(-1.2deg); box-shadow:var(--shadow-lg); }
.kids-tile:nth-child(even):hover{ transform:translateY(-10px) rotate(1.2deg); }
.kids-tile .cover{ position:relative; height:132px; display:flex; align-items:center; justify-content:center; font-size:58px; overflow:hidden; }
.kids-tile .cover::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 18%, rgba(255,255,255,.85), transparent 55%), radial-gradient(rgba(28,36,51,.08) 1.5px, transparent 1.7px) 0 0/14px 14px;
}
.kids-tile .cover::after{
  content:"\25B6"; position:absolute; right:12px; bottom:10px; width:36px; height:36px; border-radius:50%;
  background:#fff; color:var(--coral-700); display:grid; place-items:center; font-size:13px; box-shadow:var(--shadow-md);
  transform:scale(0); transition:transform .4s var(--ease-spring);
}
.kids-tile:hover .cover::after{ transform:scale(1); }
.kids-tile .emo{ position:relative; display:inline-block; filter:drop-shadow(0 10px 10px rgba(28,36,51,.2)); animation:emoBob 3.4s ease-in-out infinite; }
.kids-tile:nth-child(2) .emo{ animation-delay:-.85s; }
.kids-tile:nth-child(3) .emo{ animation-delay:-1.7s; }
.kids-tile:nth-child(4) .emo{ animation-delay:-2.55s; }
.kids-tile:hover .emo{ animation:emoWiggle .75s var(--ease-spring); }
@keyframes emoBob{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-8px) rotate(3deg); } }
@keyframes emoWiggle{ 30%{ transform:scale(1.22) rotate(-12deg); } 60%{ transform:scale(1.15) rotate(9deg); } }
.kids-tile .body{ padding:14px 16px 18px; }
.kids-tile .body h4{ font-size:16.5px; }
.kids-tile .meta{ color:var(--ink-soft); font-size:12.5px; margin-top:4px; font-weight:700; }
.kids-tile .stars{ margin-top:8px; font-size:15px; min-height:20px; }
.cv-brand{ background:linear-gradient(160deg,#eef0ff,#dcdcfd); }
.cv-teal{ background:linear-gradient(160deg,#e3f8f4,#c7efe7); }
.cv-amber{ background:linear-gradient(160deg,#fff4e0,#fde2b3); }
.cv-coral{ background:linear-gradient(160deg,#ffece4,#ffd3c2); }
.kids-notice{ margin-top:44px; text-align:center; background:linear-gradient(160deg,#fff,var(--amber-100)); border:none; box-shadow:0 14px 30px -18px rgba(217,119,6,.6); }
.kids-notice h3{ font-size:20px; }
.kids-notice p{ margin-top:8px; color:var(--ink-soft); font-weight:700; }

/* ---------- Avisos flotantes y confeti ---------- */
.toasts{ position:fixed; right:18px; bottom:18px; z-index:500; display:flex; flex-direction:column; gap:10px; width:min(390px, calc(100vw - 36px)); }
.toast{
  position:relative; overflow:hidden; display:flex; gap:12px; align-items:flex-start;
  background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:14px 16px 17px;
  box-shadow:var(--shadow-lg); font-size:14px; font-weight:700; line-height:1.45;
  animation:toastIn .6s var(--ease-spring) both;
}
.toast.out{ animation:toastOut .35s ease-in forwards; }
.toast-ic{ font-size:21px; line-height:1.2; }
.toast-bar{ position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:0 50%; background:linear-gradient(90deg,var(--brand-500),var(--teal-600)); animation:toastBar linear forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(24px) scale(.92); } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(44px); } }
@keyframes toastBar{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
.confetti{ position:fixed; left:0; top:0; z-index:600; width:9px; height:13px; border-radius:2px; pointer-events:none; }
.confetti.glyph{ width:auto; height:auto; font-size:20px; background:none; }

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .admin-grid{ grid-template-columns:1fr; }
}
@media (max-width:1100px){
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  .kids-kpis{ grid-template-columns:repeat(3,1fr); }
  .two-col, .admin-grid{ grid-template-columns:1fr; }
  .stage-row, .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .kids-shelf{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:960px){
  .app-shell{ grid-template-columns:1fr; }
  .app-side{ display:none; }
  .app-main{ padding:20px 18px 60px; }
  .app-mobilebar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
  .app-mobilebar .brand-mark{ font-size:18px; }
  .hero-grid{ grid-template-columns:1fr; gap:80px; }
  .hero-kiwi{ left:-6px; width:112px; bottom:-84px; }
  .hero-bubble{ left:112px; bottom:-70px; max-width:220px; font-size:13px; }
  .float-card.fc2{ left:-6px; }
  .login-wrap{ grid-template-columns:1fr; }
  .login-side{ display:none; }
  .bilingual-strip{ grid-template-columns:1fr; padding:30px; }
  .testimonial-grid{ grid-template-columns:1fr; }
  .site-footer .cols{ grid-template-columns:1fr 1fr; }
  .topnav .links{ display:none; }
  .kids-shelf{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .stage-row, .feature-grid{ grid-template-columns:1fr; }
  .kpi-row, .kids-kpis{ grid-template-columns:1fr 1fr; }
  .week-chart{ gap:6px; padding:10px 12px 0; }
  .form-row{ grid-template-columns:1fr; }
  .float-card{ display:none; }
}

/* ---------- Movimiento reducido: todo quieto, todo visible ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
  .glyph-field, .orbs, .kids-sky{ display:none; }
}

/* =====================================================================
   Plataforma: componentes que no estaban en la maqueta
   ===================================================================== */
.h2{ font-size:clamp(22px,2.6vw,28px); }
.h3{ font-size:18px; display:flex; align-items:center; gap:10px; }
.h4{ font-size:16px; }
.h5{ font-size:13px; font-family:var(--font-ui); font-weight:800; color:var(--ink); margin:0 0 10px; }
.mt{ margin-top:16px; } .mt-l{ margin-top:30px; } .mb{ margin-bottom:22px; }
.lead{ color:var(--ink-soft); font-size:15px; line-height:1.55; margin-top:8px; }
.nota{ color:var(--ink-soft); font-size:13px; font-weight:600; line-height:1.5; margin-top:6px; }
.mono{ font-family:ui-monospace,"Cascadia Code",Consolas,monospace; }
.derecha{ text-align:right; }
.fila{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.fila-entre{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.solo-movil{ display:none; }
.sin-arriba{ padding-top:0; }

.salto{ position:absolute; left:12px; top:-60px; z-index:1000; background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; font-weight:800; }
.salto:focus{ top:12px; }

.alerta{ background:#fff1ec; color:#9a3412; border:1.5px solid #fdc9b5; border-radius:12px; padding:11px 14px; font-weight:700; font-size:14px; margin:12px 0; }
.checks{ list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:14px; }
.checks .mal{ color:#9a3412; }
.check{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin:8px 0; cursor:pointer; }
.check input{ width:18px; height:18px; accent-color:var(--brand-600); }
.check small{ color:var(--ink-soft); font-weight:600; }

.centro-caja{ min-height:100vh; display:grid; place-items:center; padding:30px 16px; }
.caja-estrecha{ width:100%; max-width:470px; }
.caja-media{ max-width:560px; }

.field textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); font-size:14.5px; font-family:inherit; line-height:1.5; resize:vertical; background:#fff; color:var(--ink); }
fieldset{ border:none; padding:0; margin:0 0 16px; }
legend{ font-size:13px; font-weight:800; color:var(--ink-soft); margin-bottom:8px; padding:0; }

.btn-xs{ padding:5px 10px; font-size:12px; }
.btn-peligro{ background:#fff1ec; color:#9a3412; border:1.5px solid #fdc9b5; }
.btn-peligro:hover{ background:#ffe3d8; }
.chip-cristal{ background:rgba(255,255,255,.16); color:#fff; }

/* Barra «estás viendo como…» */
.barra-como{
  position:sticky; top:0; z-index:250; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:9px 16px; background:linear-gradient(90deg,#312e81,#4338ca); color:#fff; font-weight:800; font-size:14px;
}
.barra-como form{ margin:0; }

/* Estados vacíos */
.vacio{ text-align:center; padding:26px 12px; }
.vacio-ic{ width:74px; height:74px; margin:0 auto 12px; border-radius:24px; display:grid; place-items:center; font-size:36px; background:linear-gradient(160deg,var(--brand-100),#fff); box-shadow:inset 0 -3px 0 rgba(28,36,51,.06); animation:bob 4s ease-in-out infinite; }
.vacio h3, .vacio .h3{ font-size:18px; justify-content:center; }
.vacio p{ color:var(--ink-soft); font-size:14px; margin-top:6px; max-width:420px; margin-inline:auto; line-height:1.55; }
.vacio.compacto{ padding:10px 0 4px; text-align:left; }
.vacio.compacto .vacio-ic{ margin:0 0 10px; }
.vacio.compacto p{ margin-inline:0; }

/* Menú lateral: el idioma y salir son formularios */
.app-side nav{ display:flex; flex-direction:column; gap:3px; }
.app-side .side-foot form{ margin:0; }
.app-side .logout{ background:none; border:none; cursor:pointer; font:inherit; font-weight:800; color:#ffb4a0; padding:6px 12px; text-align:left; }
.app-side .logout:hover{ color:#fff; }

/* Listas de frases (actividad) */
.lista-frases{ list-style:none; margin:0; padding:6px 0; }
.lista-frases li{ display:flex; align-items:center; gap:12px; padding:11px 22px; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; line-height:1.45; }
.lista-frases li:last-child{ border-bottom:none; }
.lista-frases span:not(.avatar){ flex:1; }
.lista-frases time{ color:var(--ink-soft); font-size:12.5px; white-space:nowrap; font-weight:700; }

.aviso h2{ color:var(--brand-700); }
.aviso p{ margin-top:8px; font-size:14.5px; line-height:1.6; }
.aviso .tree-chips{ margin-top:12px; }

/* Credenciales y fichas de acceso imprimibles */
.credencial, .credenciales{ border:2px dashed var(--brand-300); background:linear-gradient(160deg,#fff,#f5f4ff); margin-bottom:22px; }
.credenciales{ border-radius:var(--radius-lg); padding:20px 22px; }
.fichas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:14px; }
.ficha-acceso{ background:#fff; border:2px solid var(--line); border-radius:18px; padding:16px; text-align:center; break-inside:avoid; }
.fa-top{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-size:14px; color:var(--brand-700); }
.fa-top .dot{ animation:none; box-shadow:none; }
.fa-nombre{ font-family:var(--font-display); font-size:24px; margin-top:8px; }
.fa-clase{ color:var(--ink-soft); font-size:12.5px; font-weight:700; }
.fa-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:800; margin-top:12px; }
.fa-pin{ display:flex; justify-content:center; gap:6px; font-size:32px; margin-top:4px; }
.fa-pin span{ width:46px; height:46px; display:grid; place-items:center; border:2px solid var(--line); border-radius:12px; }
.fa-dato{ font-size:18px; font-weight:800; margin-top:2px; word-break:break-all; }
.fa-web{ margin-top:12px; font-size:11.5px; color:var(--ink-soft); }

/* Subpestañas, tablas y menús de acciones */
.subtabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.subtabs a{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:#fff; border:1.5px solid var(--line); text-decoration:none; font-weight:800; font-size:14px; color:var(--ink-soft); transition:border-color .2s, color .2s; }
.subtabs a.active{ border-color:var(--brand-500); color:var(--brand-700); background:var(--brand-100); }
.tabla-scroll{ overflow-x:auto; }
table.simple tr.inactivo td{ opacity:.6; }
.acciones{ display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
table.simple td.acciones{ display:table-cell; text-align:right; white-space:nowrap; }
table.simple td.acciones > *{ display:inline-flex; vertical-align:middle; margin-left:4px; }
.acciones form{ margin:0; display:inline-flex; gap:4px; }
.menu-acciones{ position:relative; display:inline-block; }
.menu-acciones summary{ list-style:none; }
.menu-acciones summary::-webkit-details-marker{ display:none; }
.menu-panel{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:220px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; display:flex; flex-direction:column; animation:panelIn .25s var(--ease-out);
}
.menu-panel a, .menu-panel button{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:9px; border:none; background:none;
  font:inherit; font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap;
}
.menu-panel a:hover, .menu-panel button:hover{ background:var(--bg); }
.menu-panel form{ margin:0; display:block; }
.menu-panel .peligro{ color:#9a3412; }

.grad-infantil{ background:linear-gradient(160deg,#fb923c,#c2410c) !important; }
.grad-primaria{ background:linear-gradient(160deg,#6366f1,#3730a3) !important; }
.grad-eso{ background:linear-gradient(160deg,#2dd4bf,#0f766e) !important; }

.avatares{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
.avatares legend{ grid-column:1/-1; }
.avatares label{ cursor:pointer; position:relative; }
.avatares input{ position:absolute; opacity:0; }
.avatares span{ display:grid; place-items:center; aspect-ratio:1; font-size:22px; border-radius:12px; border:2px solid var(--line); background:#fff; transition:transform .3s var(--ease-spring), border-color .2s; }
.avatares input:checked + span{ border-color:var(--brand-600); background:var(--brand-100); transform:scale(1.08); }
.avatares input:focus-visible + span{ outline:3px solid var(--brand-500); outline-offset:2px; }
.hijos{ max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.hijos-clase{ margin-bottom:10px; }
.hijos-clase b{ font-size:13px; color:var(--brand-700); }

.aviso-config{ border-color:#fdc9b5; background:#fffaf6; }
.aviso-config ul{ margin:8px 0 0 18px; padding:0; font-size:14px; font-weight:600; color:var(--ink-soft); }
.lote{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:linear-gradient(135deg,var(--teal-100),#fff); border:none; }
.lista-errores{ font-size:12.5px; margin:8px 0 0 18px; padding:0; color:#9a3412; }

/* Recursos */
.tree-link{ text-decoration:none; color:var(--ink); }
.tree-link.activo{ background:var(--brand-100); color:var(--brand-700); font-weight:800; }
.lista-recursos{ list-style:none; margin:0; padding:6px 0; }
.lista-recursos li{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--line); }
.lista-recursos li:last-child{ border-bottom:none; }
.lista-recursos li.inactivo .lr-main{ opacity:.55; }
.lr-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--bg); font-size:19px; flex-shrink:0; }
.lr-main{ flex:1; min-width:0; }
.lr-main b{ display:block; margin-bottom:5px; }
.form-recurso .dropzone{ display:block; margin-bottom:14px; }
.dropzone .dz-txt{ display:block; font-weight:800; font-size:14px; }
.dropzone .hint{ display:block; color:var(--ink-soft); font-size:12.5px; margin-top:4px; font-weight:600; }
.dropzone .dz-nombre{ display:block; margin-top:8px; font-weight:800; color:var(--brand-700); font-size:13.5px; }
.dropzone.tiene{ background:var(--brand-100); }
.dropzone:focus-within .dz-border rect{ stroke:var(--brand-600); }
.segmento{ display:flex; gap:8px; flex-wrap:wrap; }
.segmento legend{ width:100%; }
.segmento label{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:14px; cursor:pointer; }
.segmento label:has(input:checked){ border-color:var(--brand-500); background:var(--brand-100); color:var(--brand-700); }
.checks-linea{ display:flex; gap:14px; flex-wrap:wrap; }
.checks-linea legend{ width:100%; }
.criterios-lista{ max-height:280px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.criterios-lista label{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:10px; font-size:13px; line-height:1.45; cursor:pointer; }
.criterios-lista label:hover{ background:var(--bg); }
.criterios-lista label b{ color:var(--brand-700); white-space:nowrap; }
.criterios-lista input{ margin-top:3px; accent-color:var(--brand-600); }
.alumnos-sel{ max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:14px; padding:6px 14px; margin-bottom:6px; }

/* Progreso */
.frase-resumen{ font-size:15px; font-weight:600; line-height:1.6; }
.mini-barra{ display:inline-block; width:70px; height:8px; border-radius:999px; background:var(--brand-100); overflow:hidden; vertical-align:middle; margin-right:6px; }
.mini-barra span{ display:block; height:100%; background:linear-gradient(90deg,var(--brand-500),var(--teal-600)); border-radius:999px; }

/* Ajustes */
.acentos{ display:flex; gap:10px; flex-wrap:wrap; }
.acentos legend{ width:100%; }
.acentos label{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:800; cursor:pointer; position:relative; }
.acentos input{ position:absolute; opacity:0; }
.acentos span{ width:46px; height:46px; border-radius:14px; border:3px solid #fff; box-shadow:0 0 0 2px var(--line); transition:transform .3s var(--ease-spring), box-shadow .2s; }
.acentos input:checked + span{ box-shadow:0 0 0 3px var(--ink); transform:scale(1.08); }
.acentos input:focus-visible + span{ outline:3px solid var(--brand-500); outline-offset:3px; }
.plantilla{ border:1px solid var(--line); border-radius:14px; padding:12px 16px; margin-top:12px; }
.plantilla summary{ cursor:pointer; font-weight:800; }
.plantilla[open] summary{ margin-bottom:12px; }
.barra-guardar{ position:sticky; bottom:0; padding:14px 0; background:linear-gradient(0deg,var(--bg) 60%,transparent); z-index:20; }

/* Panel del alumnado */
.me .avatar{ width:40px; height:40px; }
.insignias{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:-6px 0 10px; }
.insignia{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; background:#fff; border:2px solid var(--amber-100); font-weight:800; font-size:13px; color:var(--amber-700); box-shadow:var(--shadow-sm); }
.kids-tile .h4{ font-size:16.5px; }
.tile-foot{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; flex-wrap:wrap; min-height:26px; }
.tile-foot .stars{ margin:0; }

/* ESO: la misma casa, con menos purpurina */
[data-zone="teen"]{ --bg:#f3f5fb; background:radial-gradient(800px 420px at 100% -10%, #e0e7ff, transparent 60%), var(--bg); }
[data-zone="teen"] .kids-top, [data-zone="teen"] main{ position:relative; z-index:1; }
[data-zone="teen"] .kids-kiwi{ width:96px; }
[data-zone="teen"] .kids-hero h1{ color:var(--ink); }
[data-zone="teen"] .kids-shelf::after{ background:linear-gradient(180deg,#cbd5e1,#94a3b8); height:10px; }
[data-zone="teen"] .kids-tile{ border-radius:18px; }
[data-zone="teen"] .kids-tile .cover{ height:108px; font-size:46px; }
[data-zone="teen"] .kpi{ text-align:center; }

/* Visor de recursos */
.pagina-ver{ min-height:100vh; }
.ver-top{ display:flex; align-items:center; gap:16px; padding:14px 20px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); position:relative; z-index:2; flex-wrap:wrap; }
.ver-titulo{ flex:1; display:flex; align-items:center; gap:12px; min-width:220px; }
.ver-titulo h1{ font-size:clamp(18px,2.2vw,24px); }
.ver-area{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:22px; background:var(--brand-100); }
.ver-meta{ color:var(--ink-soft); font-size:13px; font-weight:700; margin-top:2px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ver-main{ max-width:1200px; margin:0 auto; padding:20px 16px 50px; position:relative; z-index:1; }
.ver-desc{ font-size:15.5px; color:var(--ink-soft); font-weight:600; margin-bottom:16px; max-width:760px; }
.ver-marco{ position:relative; background:#fff; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line); }
.ver-marco iframe{ display:block; width:100%; border:0; }
.ver-marco.juego iframe{ height:min(76vh, 760px); }
.ver-marco.pdf iframe{ height:80vh; }
.ver-marco.video{ aspect-ratio:16/9; }
.ver-marco.video iframe{ height:100%; }
.ver-pie{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.ver-imagen img{ margin:0 auto; border-radius:18px; box-shadow:var(--shadow-lg); max-height:80vh; }
.plan-b{ display:flex; gap:12px; align-items:center; justify-content:center; margin-top:14px; color:var(--ink-soft); font-weight:700; font-size:14px; flex-wrap:wrap; }
.ver-audio{ display:flex; flex-direction:column; align-items:center; gap:16px; max-width:560px; margin:0 auto; }
.ver-audio-ic{ font-size:54px; animation:bob 3s ease-in-out infinite; }
.ver-audio audio{ width:100%; }
.ver-enlace{ max-width:560px; margin:0 auto; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center; }

/* Páginas legales */
.legal{ padding:26px 0 60px; max-width:860px; }
.legal-top{ margin-bottom:18px; }
.legal-nav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.legal-nav a{ padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); text-decoration:none; font-weight:800; font-size:14px; background:#fff; color:var(--ink-soft); }
.legal-nav a.active{ border-color:var(--brand-500); color:var(--brand-700); background:var(--brand-100); }
.legal article p{ margin-top:14px; line-height:1.7; font-size:15px; }

/* Portada */
.hero-card .me{ position:relative; }
.me-nombre{ font-weight:900; font-size:16px; }
.me-curso{ color:var(--ink-soft); font-size:12.5px; font-weight:700; }
.hero-card .ej{ margin-left:auto; font-size:11px; }
.bili-h{ margin-top:14px; font-size:clamp(24px,2.6vw,30px); }
.bili-p{ color:#dcdcff; margin-top:12px; font-size:15px; line-height:1.6; }
.pie-texto{ margin-top:12px; max-width:280px; line-height:1.55; }

/* Preferencias de accesibilidad elegidas por la familia */
html.texto-grande{ font-size:112.5%; }
html.texto-grande body{ font-size:17px; }
html.texto-grande .kids-tile .h4{ font-size:19px; }
html.sin-movimiento *, html.sin-movimiento *::before, html.sin-movimiento *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
html.sin-movimiento .glyph-field, html.sin-movimiento .orbs, html.sin-movimiento .kids-sky{ display:none; }

@media (max-width:960px){
  .solo-movil{ display:flex; }
  .pagina-login .app-mobilebar{ margin-bottom:18px; }
  .avatares{ grid-template-columns:repeat(6,1fr); }
}

/* Impresión: solo las fichas de acceso */
@media print{
  body{ background:#fff !important; animation:none !important; }
  body *{ visibility:hidden; }
  .credenciales, .credenciales *{ visibility:visible; }
  .credenciales{ position:absolute; inset:0; border:none; background:#fff; padding:0; }
  .no-imprimir{ display:none !important; }
  .fichas{ grid-template-columns:repeat(3,1fr); }
  .ficha-acceso{ border:2px dashed #999; }
}

/* El selector de idioma es un formulario: que no se estire en columnas flexibles */
.login-side .lang-switch, .side-foot .lang-switch{ align-self:flex-start; }
.pin-grid-sm{ max-width:360px; }
.pin-grid-sm button{ font-size:22px; border-radius:14px; }
.pin-editor .pin-dots{ justify-content:flex-start; }

/* En tablet y móvil, Kiwi sigue guiando a los peques desde una franja arriba */
@media (max-width:960px){
  .login-side{ display:block; padding:22px 22px 16px; }
  .login-side .ls-content{ gap:0; }
  .login-side .ls-content > .brand-mark, .login-side .ls-content > .lang-switch, .login-side .quote, .login-side .quote-by{ display:none; }
  .login-kiwi-wrap{ flex-direction:row-reverse; justify-content:flex-end; align-items:center; margin:0; gap:14px; }
  .login-kiwi{ width:84px; flex-shrink:0; }
  .login-kiwi-wrap .mascot-bubble{ font-size:14px; transform-origin:0 50%; }
  .login-kiwi-wrap .mascot-bubble::after{ left:-10px; top:50%; bottom:auto; margin-top:-9px; border:none; border-left:2px solid var(--brand-100); border-bottom:2px solid var(--brand-100); }
}

/* ---------- Acceso único (login.php) ---------- */
.acceso-separador{display:flex;align-items:center;gap:14px;margin:30px 0 6px;font-family:var(--font-ui);font-size:14px;font-weight:800;color:var(--ink-soft)}
.acceso-separador::before,.acceso-separador::after{content:"";flex:1;height:1px;background:var(--line)}
.clave-caja{position:relative}
.clave-caja input{padding-right:92px}
.clave-ver{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:var(--brand-100);color:var(--brand-700);
  font:800 13px var(--font-ui);padding:7px 12px;border-radius:999px;cursor:pointer}
.clave-ver:hover{background:var(--brand-300)}
.clave-mayus{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--amber-700)}
.login-nota{font-size:13.5px;color:var(--ink-soft);margin-top:10px;line-height:1.5}
/* Casilla trampa del anti-robot (recuperar.php): fuera de la vista, sin display:none (algunos robots lo detectan) */
.trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Páginas HTML (tareas y juegos) a página completa: barra fina y el resto es la página */
.ver-completa{ height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
.ver-completa .ver-top{ padding:6px 12px; gap:10px; flex:0 0 auto; }
.ver-completa .ver-area{ width:34px; height:34px; font-size:18px; border-radius:10px; }
.ver-completa .ver-titulo h1{ font-size:17px; }
.ver-completa .ver-meta{ display:none; }
.ver-completa .ver-main{ flex:1 1 auto; min-height:0; max-width:none; width:100%; padding:0; display:flex; }
.ver-completa .ver-marco.juego{ flex:1; border-radius:0; border:0; box-shadow:none; }
.ver-completa .ver-marco.juego iframe{ height:100%; }
@media (max-width:600px){ .ver-completa .ver-top .lang-switch{ display:none; } .ver-completa .ver-titulo{ min-width:0; } }

/* Botón del Campus Abierto en «Acceder» */
.login-campus{ display:flex; align-items:center; gap:14px; margin-top:16px; padding:14px 18px; border-radius:20px; text-decoration:none; color:var(--ink);
  background:linear-gradient(135deg,#e3f8f4,#dff0ff); border:2px solid #9fdccf; box-shadow:0 6px 18px rgba(15,118,110,.12); transition:transform .15s; }
.login-campus:hover{ transform:translateY(-2px); }
.login-campus b{ display:block; font-size:17px; }
.login-campus small{ display:block; color:var(--ink-soft); font-weight:600; }
.login-campus > span:nth-child(2){ flex:1; }
.login-campus-ic{ font-size:32px; }