/* =========================================================
   kids.css — Winner Eagles KIDS (tema separado)
   Vibe: banner (céu azul + ouro + contorno forte + brinquedo)
   Uso:
     <link rel="stylesheet" href="./style.css?v=1">
     <link rel="stylesheet" href="./kids.css?v=1">
========================================================= */

/* =========================
   KIDS THEME TOKENS
========================= */
:root{
  /* Fundo céu */
  --kids-sky1: #49b6ff;
  --kids-sky2: #2c86ff;
  --kids-sky3: #1c4fd7;

  /* Ouro Winner Eagles */
  --kids-gold1: #ffd24a;
  --kids-gold2: #ffb703;

  /* Cores brinquedo */
  --kids-red:  #ff3b30;
  --kids-green:#34c759;
  --kids-blue: #2f6bff;
  --kids-pink: #ff4fd8;
  --kids-orange:#ff7a00;

  /* Neutros */
  --kids-ink: #101827;
  --kids-white: #ffffff;

  /* Contorno “cartoon” */
  --kids-stroke: rgba(16,24,39,.85);
  --kids-stroke-soft: rgba(16,24,39,.35);

  /* Cards */
  --kids-card: rgba(255,255,255,.14);
  --kids-glass: rgba(255,255,255,.10);

  /* Raios de sol */
  --kids-sun: rgba(255,236,153,.35);

  /* Layout */
  --kids-radius: 26px;
  --kids-shadow: 0 18px 45px rgba(0,0,0,.30);

  /* Tipos */
  --kids-font: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   BASE OVERRIDES (só KIDS)
========================= */
body.kids,
.kids body{
  font-family: var(--kids-font);
  color: rgba(255,255,255,.96);

  /* Céu com nuvens/raios */
  background:
    radial-gradient(1000px 520px at 70% 10%, var(--kids-sun), transparent 55%),
    radial-gradient(900px 520px at 15% 0%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1200px 800px at 40% -10%, rgba(255,255,255,.18), transparent 65%),
    linear-gradient(180deg, var(--kids-sky1), var(--kids-sky2) 45%, var(--kids-sky3));
}

/* Se você não quiser colocar class="kids" no body,
   pode envolver a página em <main class="kids-page"> e trocar o seletor. */
.kids-page{
  font-family: var(--kids-font);
  color: rgba(255,255,255,.96);
}

/* Links */
.kids-page a,
body.kids a{ color: inherit; }

/* Container do site continua o mesmo, só deixa mais “fofo” */
.kids-page .container,
body.kids .container{
  max-width: 1080px;
}

/* =========================
   HEADER KIDS
========================= */
body.kids .site-header,
.kids-page .site-header{
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.06));
  border-bottom: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}

body.kids .main-nav a,
.kids-page .main-nav a{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(16,24,39,.25);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 1000;
}

body.kids .main-nav a:hover,
.kids-page .main-nav a:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* Dropdown mais “toy” */
body.kids .dropdown-toggle,
.kids-page .dropdown-toggle{
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(16,24,39,.22);
  color: rgba(255,255,255,.96);
  font-weight: 1000;
}
body.kids .dropdown-menu,
.kids-page .dropdown-menu{
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.18);
}

/* =========================
   HERO / BADGES / RIBBONS
========================= */
.kids-badge,
.kids-page .kids-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: var(--kids-ink);
  background: linear-gradient(135deg, var(--kids-gold1), var(--kids-gold2));
  border: 3px solid rgba(16,24,39,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.kids-ribbon{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 16px;
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,59,48,.98), rgba(255,122,0,.98));
  border: 3px solid rgba(16,24,39,.35);
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
}
.kids-ribbon::before,
.kids-ribbon::after{
  content:"";
  position:absolute;
  top: 50%;
  width: 14px;
  height: 18px;
  transform: translateY(-50%);
  background: rgba(0,0,0,.18);
  filter: blur(.2px);
}
.kids-ribbon::before{ left:-10px; border-radius: 6px 0 0 6px; }
.kids-ribbon::after{ right:-10px; border-radius: 0 6px 6px 0; }

/* =========================
   CARDS KIDS (glass + contorno)
========================= */
body.kids .card,
.kids-page .card,
body.kids .kids-card,
.kids-page .kids-card{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border: 3px solid rgba(16,24,39,.28);
  border-radius: var(--kids-radius);
  box-shadow: var(--kids-shadow);
}

body.kids .card.highlight,
.kids-page .card.highlight{
  border-color: rgba(255,210,74,.65);
  box-shadow: 0 20px 55px rgba(0,0,0,.34);
}

/* Texto padrão KIDS */
body.kids p,
.kids-page p{
  color: rgba(255,255,255,.92);
}
body.kids .muted,
.kids-page .muted{
  color: rgba(255,255,255,.82);
}

/* =========================
   TITLES KIDS (mais “cartoon”)
========================= */
body.kids h1,
body.kids h2,
body.kids h3,
.kids-page h1,
.kids-page h2,
.kids-page h3{
  color: rgba(255,255,255,.98);
  text-shadow:
    0 2px 0 rgba(16,24,39,.55),
    0 8px 22px rgba(0,0,0,.25);
  letter-spacing: -0.3px;
}

/* =========================
   BOTÕES KIDS (contorno forte + brilho)
========================= */
body.kids .btn,
.kids-page .btn{
  border-radius: 999px;
  border: 3px solid rgba(16,24,39,.30);
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.98);
  font-weight: 1000;
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body.kids .btn:hover,
.kids-page .btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
}

/* Primary KIDS (ouro) */
body.kids .btn-primary,
.kids-page .btn-primary{
  background: linear-gradient(135deg, var(--kids-gold1), var(--kids-gold2));
  color: var(--kids-ink);
  border-color: rgba(16,24,39,.35);
}

/* CTA especial “Treino de Hoje” */
.btn-kids-cta{
  background: linear-gradient(135deg, rgba(58,167,255,.98), rgba(255,79,216,.98));
  color: var(--kids-ink);
  border: 3px solid rgba(16,24,39,.35);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.12),
    0 18px 45px rgba(0,0,0,.28);
  position: relative;
}
.btn-kids-cta::after{
  content:"";
  position:absolute;
  inset: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 55%);
  pointer-events:none;
}

/* Botões do treino (ouvir/repetir/próxima) */
.btn-kids-listen{
  background: linear-gradient(135deg, rgba(52,199,89,.98), rgba(47,107,255,.98));
  color: var(--kids-ink);
}
.btn-kids-repeat{
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.98);
}
.btn-kids-next{
  background: linear-gradient(135deg, rgba(255,210,74,.98), rgba(255,122,0,.98));
  color: var(--kids-ink);
}

/* =========================
   WORKOUT KIDS (1 frase por vez)
========================= */
.kids-workout{
  border-radius: var(--kids-radius);
  border: 3px solid rgba(16,24,39,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  box-shadow: var(--kids-shadow);
  overflow: hidden;
}

.kids-workout-head{
  background: rgba(0,0,0,.18);
  border-bottom: 2px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}

.kids-sentence{
  border-radius: 22px;
  border: 3px solid rgba(16,24,39,.22);
  background: rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

.kids-en{
  font-weight: 1100;
  text-shadow: 0 2px 0 rgba(16,24,39,.45);
}

.kids-pt{
  color: rgba(255,255,255,.88);
}

/* =========================
   PROGRESS BAR KIDS
========================= */
.kids-bar{
  border: 2px solid rgba(16,24,39,.22);
  background: rgba(255,255,255,.16);
}
.kids-bar > i{
  background: linear-gradient(135deg, rgba(58,167,255,.98), rgba(255,79,216,.98));
}

/* =========================
   MINI BOXES (Hoje, tempo, frases)
========================= */
.kids-mini .mini{
  border: 3px solid rgba(16,24,39,.22);
  background: rgba(255,255,255,.14);
  border-radius: 18px;
}

/* =========================
   SECTIONS “NINHO” (faixa inferior)
========================= */
.kids-nest-strip{
  border-radius: var(--kids-radius);
  border: 3px solid rgba(16,24,39,.26);
  background:
    linear-gradient(180deg, rgba(255,210,74,.18), rgba(255,122,0,.08));
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  padding: 18px;
}

/* =========================
   FOOTER KIDS
========================= */
body.kids .site-footer,
.kids-page .site-footer{
  background: rgba(0,0,0,.12);
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
}

/* =========================
   ACESSIBILIDADE / TOQUE
========================= */
@media (pointer: coarse){
  body.kids .btn,
  .kids-page .btn{
    min-height: 48px;
  }
}

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 980px){
  body.kids .main-nav a,
  .kids-page .main-nav a{
    padding: 10px 12px;
  }
}
:root{
  --kids-font: "Comic Sans MS",
               "Comic Neue",
               "Baloo 2",
               "Fredoka",
               ui-rounded,
               system-ui,
               -apple-system,
               Segoe UI,
               Roboto,
               Arial,
               sans-serif;
}
/* =========================
   FRASE DO DIA — KIDS
========================= */

.kids-en{
  font-family: var(--kids-font);
  font-size: clamp(34px, 6vw, 56px); /* BEM grande */
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.2px;

  color: #ffffff;

  text-align: center;

  text-shadow:
    0 3px 0 rgba(16,24,39,.55),
    0 10px 28px rgba(0,0,0,.35);
}
.kids-pt{
  font-family: var(--kids-font);
  font-size: clamp(18px, 3.2vw, 24px);
  font-weight: 700;
  line-height: 1.5;

  text-align: center;

  color: rgba(255,255,255,.90);
}
.kids-sentence{
  padding: 26px 22px;
  border-radius: 28px;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.10)
    );

  border: 4px solid rgba(16,24,39,.28);

  box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    inset 0 2px 0 rgba(255,255,255,.35);
}
.kids-controls .btn{
  font-family: var(--kids-font);
  font-size: 20px;
  font-weight: 900;
  padding: 18px 20px;
  border-radius: 999px;
}
@media (max-width: 420px){
  .kids-en{
    font-size: 32px;
  }

  .kids-controls{
    gap: 14px;
  }
}
/* Botão extra PT */
.btn-kids-pt{
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  color: rgba(255,255,255,.98);
  border: 3px solid rgba(16,24,39,.22);
}

/* Quando a tradução aparece, dá sensação de “cartão extra” */
.kids-pt{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 3px dashed rgba(255,210,74,.55);
  background: rgba(0,0,0,.14);
}
/* Lessons buttons (lado direito) */
.archive-item{
  display:block;
  width:100%;
  padding:12px 12px;
  margin:10px 0;
  border-radius:18px;
  border:3px solid rgba(16,24,39,.22);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.96);
  cursor:pointer;
}
.archive-item:hover{ transform: translateY(-1px); }

.archive-item.is-active{
  border-color: rgba(255,210,74,.70);
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
}
.kids-hero-card{
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.kids-badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  font-weight: 1000;
}

.kids-title{
  margin: 10px 0 4px;
  font-size: 28px;
  line-height: 1.05;
}

.kids-subtitle{
  margin: 0 0 14px;
  opacity: .9;
  font-weight: 700;
}

.kids-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin: 10px 0 14px;
}

.kids-big-btn{
  flex: 1 1 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 56px;
  border-radius: 18px;
  text-decoration:none;
  font-weight: 1000;
  font-size: 18px;
  background: linear-gradient(180deg, #ffe680, #f7c40f);
  border: 2px solid rgba(120,70,10,.55);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 12px 24px rgba(0,0,0,.28);
  color: #10131a;
}

.kids-secondary-btn{
  flex: 1 1 180px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 56px;
  border-radius: 18px;
  text-decoration:none;
  font-weight: 1000;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.96);
}

.kids-howto{
  margin-top: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px;
}
.kids-howto h2{ margin: 0 0 10px; font-size: 18px; }
.kids-howto ol{ margin: 0; padding-left: 18px; }
.kids-howto li{ margin: 7px 0; font-weight: 800; }

.kids-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.kids-tile{
  display:flex;
  gap: 12px;
  align-items:center;
  text-decoration:none;
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,.22);
  border: 2px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.96);
}
.kids-tile .emoji{ font-size: 28px; }
.kids-tile .t{ font-weight: 1000; font-size: 18px; }
.kids-tile .s{ opacity:.85; font-weight: 800; margin-top: 2px; }

.kids-tile.is-soon{
  opacity: .55;
  pointer-events: none;
}

.kids-parents{
  margin-top: 12px;
}
.kids-parents summary{
  cursor:pointer;
  font-weight: 1000;
  padding: 10px 0;
}
.kids-parents-box{
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 14px;
}
.kids-controls.kids-controls-4{
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.kids-controls.kids-controls-4 .btn{
  width: 100%;
}

@media (max-width: 520px){
  .kids-controls.kids-controls-4{
    grid-template-columns: 1fr 1fr;
  }
}