/* Fonte de interface do portal (11/07/2026): Nunito para body/títulos/marca.
   As frases de inglês (.frase) e os textos da Lily (.texto-lily) SEGUEM em Georgia
   por identidade pedagógica (ar de livro no conteúdo em inglês). */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

/* ============================================================
   styles.css — Kimberly | Mentoria VIP Step by Step
   Folha de estilo COMPARTILHADA do portal (criada 08/07/2026).
   Extraída dos 10 HTML sem mudança visual — identidade §5 do Guia.

   Regra de arquitetura:
   - O que aparece em 2+ páginas mora AQUI (um fato, um lugar).
   - O que é exclusivo de uma página fica no <style> da própria
     página, SEMPRE depois do <link> — assim a página pode
     sobrescrever esta folha quando precisar.
   - Página nova de Dia (Semana 2+) nasce sem CSS próprio além de
     body{padding-bottom:60px} — herda tudo da seção 6.

   Seções:
   1. Reset + tokens de identidade
   2. Base (body, títulos)
   3. Topo (topbar, marca) + rodapé
   4. Botões
   5. Componentes comuns (instrução, aviso de áudio, overlay/modal)
   6. Fluxo do dia — Dia 1–5 (stepper, cartões, grades, Lily)
   ============================================================ */

/* ---------- 1. Reset + tokens ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --azul:#1e3651; --azul-2:#2c4e73;
  --verde:#2f7d52; --verde-2:#4fa37a; --verde-escuro:#1f5a3a;
  --dourado:#c9a84c; --dourado-2:#e3c878;
  --creme:#f8f5ef; --creme-2:#edf4f4;
  --texto:#1e3651;
  --sombra:0 10px 30px rgba(30,54,81,.12);
}

/* ---------- 2. Base ---------- */
body{
  font-family:'Nunito',Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,var(--creme) 0%,var(--creme-2) 100%);
  color:var(--texto);
  min-height:100vh;
}
h1,h2{ font-family:'Nunito',Arial,sans-serif; font-weight:800; }

/* Largura padrão de conteúdo (Dia 1–5 e Passos). Outras páginas ajustam no próprio <style>. */
.wrap{ max-width:760px; margin:0 auto; padding:28px 18px; }

/* ---------- 3. Topo + rodapé ---------- */
header.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background:var(--azul); color:#fff;
}
header.topbar a{ color:#fff; text-decoration:none; font-size:.9rem; opacity:.9; }
header.topbar a:hover{ opacity:1; text-decoration:underline; }
.topbar-acoes{ display:flex; gap:16px; align-items:center; }
.brand{ font-family:'Nunito',Arial,sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:.02em; display:inline-flex; align-items:center; gap:9px; }
.brand b{ color:var(--dourado-2); }
.brand img.logo{ width:30px; height:30px; object-fit:contain; border-radius:50%; }

footer{ text-align:center; padding:24px; color:#9aa3ad; font-size:.8rem; }

/* ---------- 4. Botões ---------- */
button, .btn{
  font-family:Arial,sans-serif; cursor:pointer; border:none; border-radius:999px;
  padding:11px 22px; font-size:.92rem; font-weight:bold; transition:.2s;
}
.btn-ouvir{ background:var(--azul); color:#fff; }
.btn-ouvir:hover{ background:var(--azul-2); }
.btn-principal{ background:var(--verde); color:#fff; }
.btn-principal:hover{ background:var(--verde-2); }
.btn-principal:disabled{ background:#cfd6cf; color:#8b938b; cursor:not-allowed; }
.btn-dourado{ background:var(--dourado); color:var(--azul); }
.btn-dourado:hover{ background:var(--dourado-2); }
.btn-dourado:disabled{ background:#e7decb; color:#a89a6f; cursor:not-allowed; }
.btn-fantasma{ background:transparent; color:var(--azul); border:1.5px solid var(--azul); }

/* ---------- 5. Componentes comuns ---------- */
.instrucao{
  background:#fff; border-left:4px solid var(--dourado); border-radius:10px;
  padding:16px 20px; margin-bottom:26px; box-shadow:var(--sombra); font-size:.97rem; line-height:1.5;
}

.audio-fallback{ font-size:.85rem; color:#a08a3f; margin-top:6px; display:none; }

.overlay{ position:fixed; inset:0; background:rgba(30,54,81,.55); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
.overlay.on{ display:flex; }
.modal{ background:#fff; border-radius:18px; padding:36px 30px; max-width:420px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.modal .arvore-emoji{ font-size:3rem; margin-bottom:10px; }
.modal h2{ color:var(--azul); margin-bottom:10px; }
.modal p{ color:#5a6b7a; margin-bottom:22px; line-height:1.5; }
.modal .acoes{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- 6. Fluxo do dia — Dia 1–5 ---------- */
.titulo-dia{ text-align:center; margin-bottom:6px; }
.titulo-dia h1{ font-size:1.8rem; color:var(--azul); }
.titulo-dia p{ color:var(--azul-2); font-size:.95rem; margin-top:4px; }

/* stepper */
.stepper{ display:flex; justify-content:center; gap:10px; margin:24px 0 30px; flex-wrap:wrap; }
.step{
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:#fff; border:1px solid #e3ddd0; font-size:.82rem; color:#9aa3ad;
  transition:.25s;
}
.step .dot{ width:20px; height:20px; border-radius:50%; background:#e3ddd0; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:bold; }
.step.ativo{ background:var(--azul); color:#fff; border-color:var(--azul); box-shadow:var(--sombra); }
.step.ativo .dot{ background:var(--dourado); color:var(--azul); }
.step.feito{ background:var(--verde); color:#fff; border-color:var(--verde); }
.step.feito .dot{ background:#fff; color:var(--verde); }

.etapa{ display:none; }
.etapa.ativa{ display:block; }

/* Etapa 1: Decifrar (um a um) */
.progresso-decifrar{ text-align:center; color:var(--azul-2); font-size:.85rem; margin-bottom:14px; }
.card-unico{
  background:#fff; border-radius:18px; box-shadow:var(--sombra); padding:32px 26px;
  text-align:center; min-height:260px; display:flex; flex-direction:column; justify-content:center; gap:16px;
}
.cenario{ font-size:.92rem; color:#5a6b7a; line-height:1.5; }
.frase{ font-family:Georgia,'Times New Roman',serif; font-size:1.7rem; color:var(--azul); font-weight:bold; }
.traducao{ font-size:1.15rem; color:var(--verde-escuro); font-weight:bold; }
.sensacao{ font-size:.92rem; color:#5a6b7a; line-height:1.5; font-style:italic; }

.acoes-card{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:6px; }

/* Etapas 2 e 3: Escutar / Anki — grade */
.total-escutas{ text-align:center; margin-bottom:18px; }
.barra{ background:#e3ddd0; border-radius:999px; height:10px; overflow:hidden; max-width:340px; margin:8px auto 0; }
.barra > div{ background:linear-gradient(90deg,var(--verde),var(--verde-2)); height:100%; width:0%; transition:.3s; }

.grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-bottom:24px; }
.mini-card{ background:#fff; border-radius:14px; box-shadow:var(--sombra); padding:16px; text-align:center; }
.mini-card .frase{ font-size:1.05rem; margin-bottom:10px; }
.mini-card .cenario{ font-size:.78rem; color:#5a6b7a; line-height:1.4; margin-bottom:10px; }
.mini-card .traducao{ font-size:.98rem; color:var(--verde-escuro); font-weight:bold; margin-bottom:6px; }
.mini-card .sensacao{ font-size:.78rem; color:#5a6b7a; font-style:italic; line-height:1.4; }
.mini-card .verso{ display:none; margin-top:4px; }
.mini-card.virado .frente{ display:none; }
.mini-card.virado .verso{ display:block; }
.contador{ font-size:.8rem; color:var(--azul-2); margin-top:8px; font-weight:bold; }
.contador.completo{ color:var(--verde-escuro); }
.check-baixado{ font-size:.78rem; color:var(--verde-escuro); font-weight:bold; margin-top:8px; display:none; }
.check-baixado.on{ display:block; }

.rodape-etapa{ text-align:center; margin-top:10px; }

/* Etapa 4: Com a Lily */
.lily-box{ background:#fff; border-radius:18px; box-shadow:var(--sombra); padding:30px; text-align:center; }
.lily-box h2{ color:var(--azul); font-size:1.4rem; margin-bottom:6px; }
.lily-box p.legenda{ color:#5a6b7a; font-size:.9rem; margin-bottom:20px; }
.texto-lily{ display:none; text-align:left; background:var(--creme-2); border-radius:10px; padding:18px 20px; margin-top:18px; font-family:Georgia,serif; font-size:1.05rem; line-height:1.9; color:var(--azul); }
.texto-lily.on{ display:block; }
audio{ width:100%; max-width:380px; margin:10px auto; display:block; }

@media(max-width:480px){
  .frase{ font-size:1.4rem; }
  .card-unico{ padding:24px 18px; }
  .stepper{ gap:6px; }
  .step{ padding:7px 10px; font-size:.74rem; }
}