/* PLABS_KIDS_MODALS_V2 — premium Kids: abejas/pájaros/cohete/estrellas + quizzes coloridos */
body.pl-kids {
  --kids-blue: #1646b8;
  --kids-blue-deep: #0d2d78;
  --kids-stage: #335db2;
  --kids-gold: #ffd34d;
  --kids-red: #c82909;
  --kids-ink: #0f172a;
  --kids-soft: #e8f1ff;
  --kids-sky: #38bdf8;
  --kids-mint: #34d399;
}

/* Backdrop azul suave (no negro plano) */
body.pl-kids .modal {
  background: rgba(7, 28, 78, 0.55);
  backdrop-filter: blur(8px);
}
body.pl-kids .modal__backdrop {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 211, 77, 0.18), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(56, 189, 248, 0.16), transparent 32%),
    rgba(7, 28, 78, 0.62);
}

/* Decoración: pájaros, abejas, cohete, estrellas — sin fondo pesado */
.kids-stage-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.kids-stage-deco img,
.kids-stage-deco span {
  position: absolute;
  user-select: none;
  background: transparent !important;
  mix-blend-mode: normal;
}
.kids-stage-deco__rocket {
  width: min(78px, 18vw);
  right: 6%;
  top: 8%;
  animation: kidsRocket 5s ease-in-out infinite;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.22));
  z-index: 1;
}
.kids-stage-deco__bird {
  width: min(56px, 14vw);
  image-rendering: auto;
  animation: kidsBird 6.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16));
  z-index: 1;
}
.kids-stage-deco__bee {
  width: min(50px, 12vw);
  animation: kidsBee 4.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.14));
  z-index: 1;
}
.kids-stage-deco__bird.is-mirror,
.kids-stage-deco__bee.is-mirror {
  transform: scaleX(-1);
  animation-name: kidsBirdMirror;
}
.kids-stage-deco__bee.is-mirror {
  animation-name: kidsBeeMirror;
}
.kids-stage-deco__star {
  color: var(--kids-gold);
  opacity: 0.9;
  animation: kidsStarPulse 2.8s ease-in-out infinite;
  text-shadow: 0 0 14px rgba(255, 211, 77, 0.65);
  z-index: 1;
  line-height: 1;
}

@keyframes kidsRocket {
  0%, 100% { transform: translate(0, 0) rotate(8deg); }
  50% { transform: translate(-12px, -18px) rotate(-4deg); }
}
@keyframes kidsBird {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -14px); }
}
@keyframes kidsBirdMirror {
  0%, 100% { transform: scaleX(-1) translate(0, 0); }
  50% { transform: scaleX(-1) translate(20px, -14px); }
}
@keyframes kidsBee {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(14px, -14px) rotate(6deg); }
}
@keyframes kidsBeeMirror {
  0%, 100% { transform: scaleX(-1) translate(0, 0) rotate(4deg); }
  50% { transform: scaleX(-1) translate(14px, -14px) rotate(-6deg); }
}
@keyframes kidsStarPulse {
  0%, 100% { transform: scale(0.85) rotate(0); opacity: 0.5; }
  50% { transform: scale(1.25) rotate(18deg); opacity: 1; }
}
@keyframes kidsChallengePop {
  0% { opacity: 0; transform: translateY(70px) scale(0.5); }
  70% { opacity: 1; transform: translateY(-6px) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes kidsChallengeBurst {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes kidsMascotBounce {
  50% { transform: translateY(-9px) rotate(4deg); }
}
@keyframes kidsCtaPulse {
  50% { box-shadow: 0 0 0 12px rgba(200, 41, 9, 0); transform: scale(1.03); }
}

/* ===== WIN ===== */
body.pl-kids .win {
  width: min(460px, 94vw);
  padding: 34px 28px 28px;
  border: 4px solid #fff;
  border-radius: 28px;
  background: linear-gradient(145deg, var(--kids-blue), var(--kids-blue-deep) 72%);
  color: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  animation: kidsChallengePop 0.55s cubic-bezier(0.2, 1.35, 0.35, 1) both;
  overflow: hidden;
}
body.pl-kids .win > *:not(.kids-stage-deco):not(.win__burst):not(.win__rays) {
  position: relative;
  z-index: 2;
}
body.pl-kids .win__rays {
  position: absolute;
  z-index: 0;
  inset: 50% auto auto 50%;
  width: 430px;
  height: 430px;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 211, 77, 0.22) 0 7deg, transparent 7deg 18deg);
  animation: kidsChallengeBurst 12s linear infinite;
  pointer-events: none;
}
body.pl-kids .win__burst { z-index: 3; }
body.pl-kids .win__mascot {
  width: 112px;
  height: 112px;
  margin: 0 auto 6px;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
  animation: kidsMascotBounce 1.2s ease-in-out infinite;
}
body.pl-kids .win__badge {
  display: inline-block;
  margin: 0 0 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--kids-gold);
  color: #111820;
  font: 900 11px/1 Nunito, system-ui, sans-serif;
  letter-spacing: 0.12em;
}
body.pl-kids .win h2 {
  margin: 12px 0 10px;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  color: #fff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}
body.pl-kids .win__rewards { margin-bottom: 10px; }
body.pl-kids .reward {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 16px;
}
body.pl-kids .reward b { color: var(--kids-gold); }
body.pl-kids .win__streak { color: #ffe08a; }
body.pl-kids .win .btn--primary,
body.pl-kids #winNextLesson {
  background: var(--kids-red) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 0 0 0 rgba(200, 41, 9, 0.38);
  animation: kidsCtaPulse 1.8s ease-in-out infinite;
}
body.pl-kids .win .btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* ===== Lección ===== */
body.pl-kids .lesson {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 211, 77, 0.2), transparent 34%),
    linear-gradient(180deg, #3a6fd1 0%, #1e4aab 38%, #f4f8ff 38%, #ffffff 100%);
  border: 3px solid #fff;
  color: var(--kids-ink);
  box-shadow: 0 24px 70px rgba(13, 45, 120, 0.35);
}
body.pl-kids .lesson > *:not(.kids-stage-deco) { position: relative; z-index: 2; }
body.pl-kids .lesson__close {
  background: rgba(255, 255, 255, 0.9);
  color: var(--kids-blue-deep);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
body.pl-kids .lesson__title { color: #fff; }
body.pl-kids .lesson__goal { color: #dce7ff; }
body.pl-kids .lesson__badge {
  background: linear-gradient(180deg, var(--kids-gold), #e3b629);
  color: #111820;
  border: 2px solid #fff;
}
body.pl-kids .lesson__tabs { margin-top: 4px; }
body.pl-kids .ltab {
  background: rgba(255, 255, 255, 0.9);
  color: #334155;
  border: 1px solid #c7d7f5;
}
body.pl-kids .ltab.is-active {
  background: var(--kids-red);
  color: #fff;
  border-color: var(--kids-red);
}
body.pl-kids .ltab-panel {
  background: #fff;
  border: 1px solid #d7e4fb;
  border-radius: 18px;
  padding: 14px;
}
body.pl-kids .learn-step {
  background: #f4f8ff;
  border-color: #d7e4fb;
  color: #1e293b;
}
body.pl-kids .studio__objective {
  background: #ecfeff;
  border-color: #7dd3fc;
  color: #0e7490;
}
body.pl-kids .ai__chat,
body.pl-kids .ai__inputrow input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* Mapa conceptual + interactivos dentro de Kids */
body.pl-kids .plcmap__lead { color: #334155 !important; }
body.pl-kids .plcmap__hint { color: #0369a1 !important; }
body.pl-kids .plcmap__card {
  background: linear-gradient(165deg, #ffffff 0%, #eef6ff 100%) !important;
  box-shadow: 0 12px 28px rgba(22, 70, 184, 0.12), 0 0 0 1px rgba(22, 70, 184, 0.12) !important;
}
body.pl-kids .plcmap__card.is-open {
  box-shadow: 0 18px 40px rgba(200, 41, 9, 0.18), 0 0 0 2px var(--kids-red) !important;
}
body.pl-kids .plcmap__num {
  background: linear-gradient(145deg, #38bdf8, var(--kids-blue)) !important;
}
body.pl-kids .plcmap__card.is-open .plcmap__num {
  background: linear-gradient(145deg, var(--kids-gold), #e3b629) !important;
}
body.pl-kids .plint {
  background: linear-gradient(165deg, #ffffff, #eaf2ff 60%, #fff9e8) !important;
  border-color: #c7d7f5 !important;
}
body.pl-kids .plint__title { color: var(--kids-blue-deep) !important; }
body.pl-kids .plmm__core {
  background: linear-gradient(135deg, #38bdf8, var(--kids-blue)) !important;
}
body.pl-kids .pltl__row.is-on .pltl__dot {
  background: linear-gradient(145deg, var(--kids-gold), #e3b629) !important;
  box-shadow: 0 0 0 4px rgba(255, 211, 77, 0.35) !important;
}

/* Quiz práctica Kids */
body.pl-kids .plpq__card {
  background: linear-gradient(165deg, #ffffff, #eaf2ff) !important;
  border: 2px solid #c7d7f5 !important;
  color: var(--kids-ink) !important;
  box-shadow: 0 14px 36px rgba(22, 70, 184, 0.12) !important;
}
body.pl-kids .plpq__prog { color: var(--kids-blue) !important; }
body.pl-kids .plpq__q { color: var(--kids-ink) !important; }
body.pl-kids .plpq__opt {
  background: #fff !important;
  border: 2px solid #c7d7f5 !important;
  color: var(--kids-ink) !important;
}
body.pl-kids .plpq__opt:hover { border-color: var(--kids-sky) !important; }
body.pl-kids .plpq__opt.is-ok {
  border-color: #16a34a !important;
  background: #ecfdf5 !important;
}
body.pl-kids .plpq__opt.is-bad {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}
body.pl-kids .plpq__fb.ok { color: #15803d !important; }
body.pl-kids .plpq__fb.bad { color: #b91c1c !important; }
body.pl-kids .plpq__note { color: #64748b !important; }
body.pl-kids .plpq .btn--primary {
  background: var(--kids-red) !important;
  color: #fff !important;
  border: 0 !important;
}

/* Quiz final modal Kids — nada de gris/negro */
body.pl-kids .quizmodal__backdrop {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 211, 77, 0.22), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.2), transparent 34%),
    rgba(7, 28, 78, 0.58) !important;
}
body.pl-kids .quizmodal__card {
  background: linear-gradient(155deg, var(--kids-blue) 0%, var(--kids-blue-deep) 55%, #123a9a 100%) !important;
  border: 4px solid #fff !important;
  border-radius: 26px !important;
  color: #fff !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden;
  padding: 24px 22px 20px !important;
}
body.pl-kids .quizmodal__card > *:not(.kids-stage-deco) {
  position: relative;
  z-index: 2;
}
body.pl-kids .quizmodal__prog {
  color: var(--kids-gold) !important;
  font-weight: 900 !important;
}
body.pl-kids .quizmodal__q {
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}
body.pl-kids .quizmodal__opt {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  color: var(--kids-ink) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}
body.pl-kids .quizmodal__opt:hover:not(:disabled) {
  border-color: var(--kids-gold) !important;
  background: #fff !important;
  transform: translateY(-1px);
}
body.pl-kids .quizmodal__opt.is-ok {
  border-color: #16a34a !important;
  background: #ecfdf5 !important;
  color: #14532d !important;
}
body.pl-kids .quizmodal__opt.is-bad {
  border-color: #f87171 !important;
  background: #fef2f2 !important;
  color: #7f1d1d !important;
}
body.pl-kids .quizmodal__fb.ok { color: #86efac !important; }
body.pl-kids .quizmodal__fb.bad { color: #fecaca !important; }
body.pl-kids .quizmodal__next {
  background: var(--kids-red) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}

/* Planes / cuenta / tips / teacher */
body.pl-kids .plans,
body.pl-kids .acctcard,
body.pl-kids .tips,
body.pl-kids .teacher,
body.pl-kids .ethics {
  background: linear-gradient(165deg, #eaf2ff 0%, #ffffff 45%, #fff9e8 100%);
  border: 3px solid #fff;
  color: var(--kids-ink);
  box-shadow: 0 22px 60px rgba(13, 45, 120, 0.28);
  overflow: hidden;
}
body.pl-kids .plans > *:not(.kids-stage-deco),
body.pl-kids .acctcard > *:not(.kids-stage-deco),
body.pl-kids .tips > *:not(.kids-stage-deco),
body.pl-kids .teacher > *:not(.kids-stage-deco),
body.pl-kids .ethics > *:not(.kids-stage-deco) {
  position: relative;
  z-index: 2;
}
body.pl-kids .plans__title,
body.pl-kids .acctcard__name,
body.pl-kids .tips h2,
body.pl-kids .teacher h2 {
  color: var(--kids-blue-deep);
}
body.pl-kids .plans__sub,
body.pl-kids .acctcard__email,
body.pl-kids .plans__legal {
  color: #475569;
}
body.pl-kids .plan {
  background: #fff;
  border: 1px solid #c7d7f5;
  color: var(--kids-ink);
}
body.pl-kids .plan__feats li { color: #475569; }
body.pl-kids .plan--pop {
  border-color: var(--kids-gold);
  box-shadow: 0 0 0 2px rgba(255, 211, 77, 0.35);
}

/* Responsive */
@media (max-width: 860px) {
  html.pl-mobile body.pl-kids .win {
    width: min(100% - 24px, 440px);
    height: auto;
    max-height: calc(var(--pl-vvh, 100dvh) - 32px);
    margin: auto;
    border-radius: 24px;
    padding: 28px 18px 22px;
  }
  html.pl-mobile body.pl-kids #winModal.modal {
    padding: 12px;
    align-items: center;
    justify-items: center;
  }
  html.pl-mobile body.pl-kids .lesson {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  body.pl-kids .kids-stage-deco__rocket { width: 52px; }
  body.pl-kids .kids-stage-deco__bird { width: 40px; }
  body.pl-kids .kids-stage-deco__bee { width: 34px; }
  body.pl-kids .quizmodal__card {
    width: min(100% - 20px, 440px) !important;
    padding: 20px 16px 16px !important;
  }
  body.pl-kids .quizmodal__q { font-size: 16px !important; }
}

@media (max-width: 480px) {
  body.pl-kids .kids-stage-deco__bird:nth-of-type(n+5),
  body.pl-kids .kids-stage-deco__bee:nth-of-type(n+4) {
    display: none;
  }
  body.pl-kids .kids-stage-deco__star {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.pl-kids .kids-stage-deco img,
  body.pl-kids .kids-stage-deco span,
  body.pl-kids .win__mascot,
  body.pl-kids .win__rays,
  body.pl-kids .win .btn--primary {
    animation: none !important;
  }
}

/* PLABS_LINGO_WIZARD_V1 — Mira → Juega → Quiz */
.lingo-wiz {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 16px 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #fff7ed, #ecfeff);
  border: 3px solid #fff;
  border-radius: 18px;
  box-shadow: 0 6px 0 rgba(42, 31, 69, 0.1);
}
.lingo-wiz.is-on { display: flex; }
.lingo-wiz__step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #6b5f86;
  background: rgba(255,255,255,0.65);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lingo-wiz__n {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}
.lingo-wiz__step.is-active {
  background: #fff;
  color: #2a1f45;
  box-shadow: 0 3px 0 rgba(42, 31, 69, 0.12);
  transform: translateY(-1px);
}
.lingo-wiz__step.is-active .lingo-wiz__n {
  background: #f97316;
  color: #fff;
}
.lingo-wiz__step.is-done {
  color: #166534;
}
.lingo-wiz__step.is-done .lingo-wiz__n {
  background: #86efac;
  color: #14532d;
}
.lingo-wiz__rail {
  width: 18px; height: 4px;
  border-radius: 4px;
  background: #fdba74;
  opacity: 0.7;
}
#lessonModal.lesson--lingo .btn--lingo-cta {
  width: 100%;
  margin-top: 12px;
  border-radius: 16px !important;
  font-family: Fredoka, Nunito, sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  padding: 14px 18px !important;
  background: linear-gradient(180deg, #fb923c, #ea580c) !important;
  border: none !important;
  box-shadow: 0 6px 0 #c2410c !important;
  color: #fff !important;
}
#lessonModal.lesson--lingo .btn--lingo-cta:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #c2410c !important;
}
@media (max-width: 480px) {
  .lingo-wiz { margin: 0 10px 8px; padding: 8px; gap: 4px; }
  .lingo-wiz__step { font-size: 12px; padding: 5px 8px; }
  .lingo-wiz__rail { width: 10px; }
}