/* =============================================================
   PLAYBOOK WHATSAPP · FRANQUIAS AGM
   v1 · jun/2026 · identidade visual derivada de julianaboccaletti.com.br
   ============================================================= */

:root{
  --bg:#e6e3dc;
  --bg-soft:#efece6;
  --paper:#ffffff;
  --ink:#0a0a0a;
  --ink-2:#3a3a3a;
  --ink-3:#6a6a6a;
  --ink-4:#9a9a9a;
  --line:rgba(10,10,10,0.12);
  --line-soft:rgba(10,10,10,0.06);
  --red:#C8102E;
  --red-deep:#9A0C24;
  --accent:#D4A437;
  --pink:#E91E63;

  --sidebar-w: 296px;
  --topbar-h: 60px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink); background:var(--bg);
  line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{text-decoration:none; color:inherit}
button{font-family:inherit; cursor:pointer; border:none; background:none}
em{font-family:'Fraunces',serif; font-style:italic; font-weight:500}

/* =============== TOPBAR =============== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--topbar-h);
  background:rgba(230,227,220,0.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:14px; padding:0 18px;
}
.menu-toggle{
  display:flex; flex-direction:column; gap:4px;
  width:36px; height:36px; align-items:center; justify-content:center;
  border-radius:8px;
}
.menu-toggle span{
  display:block; width:18px; height:2px; background:var(--ink);
  transition:.2s;
}
.menu-toggle:hover{background:rgba(10,10,10,0.05)}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:13px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--ink); flex:1;
}
.brand-dot{
  width:7px; height:7px; background:var(--red);
  border-radius:50%; display:inline-block;
}
.brand-name{white-space:nowrap}

.mode-switch{
  display:flex; gap:0;
  background:rgba(10,10,10,0.06);
  border-radius:99px; padding:3px;
}
.mode-btn{
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:700; padding:7px 14px; color:var(--ink-2);
  border-radius:99px; transition:.2s; white-space:nowrap;
}
.mode-btn.active{background:var(--ink); color:var(--bg)}

/* =============== APP LAYOUT =============== */
.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  padding-top:var(--topbar-h);
  min-height:100vh;
}

/* =============== SIDEBAR =============== */
.sidebar{
  position:fixed;
  top:var(--topbar-h);
  left:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--bg-soft);
  border-right:1px solid var(--line-soft);
  overflow-y:auto;
  padding:32px 24px 80px;
  display:flex; flex-direction:column;
  transition: transform .25s ease;
  z-index:40;
}
.sidebar-head{margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line-soft)}
.kicker{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:8px;
}
.sidebar-title{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:26px; line-height:0.95; color:var(--ink);
  letter-spacing:-0.04em; text-transform:uppercase;
}
.sidebar-title em{
  font-family:'Inter',sans-serif; font-style:normal;
  color:var(--red); font-weight:900;
}
.sidebar-sub{
  margin-top:10px; font-size:11px; color:var(--ink-3);
  letter-spacing:.5px;
}

.toc{display:flex; flex-direction:column; gap:22px; flex:1}
.toc-group{display:flex; flex-direction:column; gap:2px}
.toc-label{
  font-size:9px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--ink-4); font-weight:800; margin-bottom:6px;
  padding-left:10px;
}
.toc-link{
  display:block;
  font-size:13px; font-weight:500; color:var(--ink-2);
  padding:7px 12px; border-radius:8px;
  border-left:2px solid transparent;
  transition:.15s;
  line-height:1.3;
}
.toc-link:hover{background:rgba(10,10,10,0.04); color:var(--ink)}
.toc-link.active{
  background:var(--paper);
  color:var(--ink);
  border-left-color:var(--red);
  font-weight:600;
  box-shadow:0 2px 8px rgba(10,10,10,0.04);
}
.toc-num{
  display:inline-block; min-width:18px;
  font-family:'Fraunces',serif; font-weight:500;
  font-size:14px; color:var(--red);
  margin-right:6px; font-style:italic;
}
.toc-link.toc-empty{color:var(--ink-4)}
.toc-link.toc-empty::after{
  content:' · em breve';
  font-size:9px; color:var(--ink-4);
  letter-spacing:.5px; opacity:.6;
  text-transform:lowercase; font-weight:500;
}

.sidebar-foot{
  margin-top:auto; padding-top:20px;
  border-top:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.5px; color:var(--ink-4);
}
.version{margin-bottom:4px; font-weight:600}
.footer-link{display:block; color:var(--red); font-weight:500}

.sidebar-backdrop{
  display:none;
  position:fixed; top:var(--topbar-h); left:0; right:0; bottom:0;
  background:rgba(10,10,10,0.4);
  z-index:35;
}

/* =============== MAIN CONTENT =============== */
.main{
  grid-column:2;
  padding: 56px 64px 120px;
  max-width:980px;
  margin: 0 auto;
  width:100%;
}

.page{display:none}
.page.active{display:block; animation: fadeIn .25s ease}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}

.page-header{margin-bottom:56px}
.page-title{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:clamp(40px,5.5vw,72px); line-height:0.92;
  color:var(--ink);
  letter-spacing:-0.04em; text-transform:uppercase;
  margin-top:20px;
}
.page-title em{
  font-family:'Inter',sans-serif; font-style:normal;
  color:var(--red); font-weight:900;
}
.page-title.display{
  font-size:clamp(56px,8.5vw,120px);
  letter-spacing:-0.045em;
  line-height:0.88;
  color:var(--red);
}
.page-title.display em{
  color:var(--ink);
}
.page-lead{
  margin-top:28px; font-size:17px; line-height:1.65;
  color:var(--ink-2); max-width:680px; font-weight:400;
  letter-spacing:0.15px;
}
.page-lead strong{color:var(--ink); font-weight:700}

.kicker-mark{
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  font-weight:800; color:var(--red);
}
.kicker-mark::before{
  content:''; display:inline-block;
  width:24px; height:1px; background:var(--red);
  vertical-align:middle; margin-right:10px;
}

/* =============== CAPA-ESPECIFICO =============== */
.capa-meta{
  display:flex; gap:48px; margin-top:48px;
  padding-top:32px; border-top:1px solid var(--line);
  font-size:11px;
}
.capa-meta > div{display:flex; flex-direction:column; gap:4px}
.capa-meta span{
  color:var(--ink-3); letter-spacing:1.5px; text-transform:uppercase;
  font-weight:600;
}
.capa-meta strong{
  font-size:14px; color:var(--ink); font-weight:700;
}

.capa-quote{
  margin:64px 0 56px;
  padding:40px;
  background:var(--paper);
  border-radius:16px;
  border-left:3px solid var(--red);
}
.capa-quote p{
  font-family:'Fraunces',serif;
  font-style:italic; font-weight:400;
  font-size:24px; line-height:1.4; color:var(--ink);
}
.capa-quote cite{
  display:block; margin-top:18px; font-style:normal;
  font-size:11px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
}

.how-to-use{margin-top:64px}
.h2{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:clamp(22px,2.6vw,32px); color:var(--ink);
  margin-bottom:28px; text-transform:uppercase;
  letter-spacing:-0.02em;
}
.how-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.how-card{
  background:var(--paper);
  border-radius:14px; padding:28px;
  border:1px solid var(--line-soft);
}
.how-num{
  display:inline-block; font-weight:800; font-size:11px;
  letter-spacing:1.5px; color:var(--red);
  background:rgba(200,16,46,0.08); padding:5px 10px;
  border-radius:6px; width:fit-content;
  text-transform:uppercase; margin-bottom:18px;
}
.how-card h3{
  font-size:16px; font-weight:800; color:var(--ink);
  margin-bottom:10px; letter-spacing:-0.01em;
  text-transform:uppercase; line-height:1.2;
}
.how-card p{
  font-size:13px; line-height:1.55; color:var(--ink-2);
}

/* =============== CARDS DAS 6 ETAPAS (capa) =============== */
.etapas-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:48px;
}
.etapa-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--paper);
  border-radius:14px;
  padding:24px 22px;
  border:1px solid var(--line-soft);
  transition:.2s;
  min-height:110px;
  justify-content:space-between;
}
.etapa-card:hover{
  border-color:var(--red);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(200,16,46,.08);
}
.etapa-num{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:34px; line-height:1; color:var(--red);
  letter-spacing:-1px;
}
.etapa-name{
  font-size:14px; font-weight:700; color:var(--ink);
  line-height:1.3; letter-spacing:.1px;
}

/* =============== CALLOUT IMPORTANTE =============== */
.callout{
  background:var(--bg-soft);
  border-radius:14px;
  padding:32px 36px;
  border-left:3px solid var(--accent);
  margin-bottom:48px;
}
.callout-title{
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; color:var(--accent); margin-bottom:14px;
}
.callout p{
  font-size:15px; line-height:1.6; color:var(--ink-2);
  margin-bottom:10px;
}
.callout p:last-child{margin-bottom:0}

/* =============== SUB-SEÇÃO (2.1, 2.2 etc) =============== */
.sub{
  margin-bottom:40px;
}
.sub-label{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; color:var(--red);
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line-soft);
}

/* =============== TABS (perfis Kids/Teens/Adults) =============== */
.tabs{
  display:flex; gap:8px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
  padding-bottom:0;
  flex-wrap:wrap;
}
.tab{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent;
  padding:12px 22px;
  font-size:13px; font-weight:700;
  letter-spacing:0.3px;
  color:var(--ink-3);
  border-bottom:2px solid transparent;
  transition:.18s;
  margin-bottom:-1px;
}
.tab:hover{color:var(--ink)}
.tab.active{
  color:var(--red);
  border-bottom-color:var(--red);
}
.tab-icon{font-size:18px; line-height:1}

.tab-panel{display:none; animation: fadeIn .25s ease}
.tab-panel.active{display:block}

@media (max-width:880px){
  .tabs{gap:0; overflow-x:auto; flex-wrap:nowrap}
  .tab{padding:10px 16px; font-size:12px; white-space:nowrap}
}

/* =============== BOX OBJETIVO 🎯 =============== */
.objetivo{
  display:flex; gap:18px;
  background:var(--paper);
  border-radius:14px;
  padding:24px 28px;
  border:1px solid var(--line-soft);
  border-left:3px solid var(--red);
  margin-bottom:28px;
}
.objetivo-icon{
  font-size:24px; line-height:1.2;
  flex-shrink:0;
}
.objetivo-body{flex:1}
.objetivo-label{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; color:var(--red);
  margin-bottom:10px;
}
.objetivo-body p{
  font-size:15px; line-height:1.6; color:var(--ink-2);
  margin-bottom:8px;
}
.objetivo-body p:last-child{margin-bottom:0}
.objetivo-body strong{color:var(--ink); font-weight:700}
.objetivo-list{
  list-style:none; padding:0; margin:14px 0 4px;
  display:flex; flex-direction:column; gap:8px;
}
.objetivo-list li{
  font-size:14px; line-height:1.55; color:var(--ink-2);
  padding-left:18px; position:relative;
}
.objetivo-list li::before{
  content:''; position:absolute;
  left:0; top:9px; width:6px; height:6px;
  background:var(--red); border-radius:50%;
}
.objetivo-list strong{color:var(--ink); font-weight:700}

/* =============== IMAGENS DE APOIO (kids etc) =============== */
.imagens-kids{
  display:flex; flex-direction:column; gap:18px;
  margin:8px 0 24px;
}
.img-card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:14px;
  overflow:hidden;
  transition:.2s;
}
.img-card:hover{
  border-color:var(--red);
  box-shadow:0 8px 22px rgba(200,16,46,0.08);
}
.img-card img{
  display:block; width:100%; height:auto;
  background:#f7f5f0;
}
.img-card figcaption{
  font-size:12px; letter-spacing:0.3px;
  color:var(--ink-3);
  padding:14px 20px;
  border-top:1px solid var(--line-soft);
  font-weight:500;
}

/* =============== CHECKLIST · REGRAS (cards) =============== */
.regras-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:24px;
}
.regra-card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:26px 28px;
  display:flex; flex-direction:column; gap:10px;
  transition:.2s;
}
.regra-card:hover{
  border-color:var(--red);
  box-shadow:0 6px 18px rgba(200,16,46,0.06);
}
.regra-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:4px;
}
.regra-dot{
  display:inline-block;
  width:11px; height:11px; border-radius:50%;
  background:var(--red);
  flex-shrink:0;
}
.regra-head h3{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:14px; text-transform:uppercase;
  color:var(--ink); letter-spacing:0.3px;
  line-height:1.2;
}
.regra-card p{
  font-size:14px; line-height:1.6; color:var(--ink-2);
}
.regra-card strong{color:var(--ink); font-weight:700}
.regra-foot{
  font-size:13px !important;
  color:var(--ink-3) !important;
  font-style:italic;
  padding-top:8px;
  border-top:1px solid var(--line-soft);
  margin-top:4px;
}

.regra-list{
  list-style:none; padding:0; margin:4px 0;
  display:flex; flex-direction:column; gap:6px;
}
.regra-list li{
  font-size:13px; line-height:1.55; color:var(--ink-2);
  padding-left:16px; position:relative;
}
.regra-list li::before{
  content:''; position:absolute;
  left:0; top:8px; width:5px; height:5px;
  background:var(--red); border-radius:50%;
}
.regra-list strong{color:var(--ink); font-weight:700}

.regra-naopode{
  list-style:none; padding:0; margin:4px 0;
  display:flex; flex-direction:column; gap:6px;
}
.regra-naopode li{
  font-size:13px; line-height:1.5;
  color:var(--ink-2);
  padding-left:24px; position:relative;
}
.regra-naopode li::before{
  content:'🚫'; position:absolute;
  left:0; top:1px; font-size:13px;
}

.regra-destaque{
  background:rgba(200,16,46,0.06);
  border-left:3px solid var(--red);
  border-radius:8px;
  padding:12px 16px;
  font-size:14px; line-height:1.55;
  color:var(--ink-2);
  margin-top:4px;
}
.regra-destaque strong{color:var(--red); font-weight:800}

@media (max-width:880px){
  .regras-grid{grid-template-columns:1fr; gap:12px}
  .regra-card{padding:22px 22px}
}

/* =============== FAQ =============== */
.faq-list{
  display:flex; flex-direction:column; gap:14px;
  margin-bottom:48px;
}
.faq-item{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:22px 26px;
  border-left:3px solid var(--red);
}
.faq-q{
  font-family:'Inter',sans-serif; font-weight:800;
  font-size:15px;
  color:var(--ink);
  margin-bottom:8px;
  letter-spacing:-0.005em;
}
.faq-a{
  font-size:14px; line-height:1.6; color:var(--ink-2);
}
.faq-a strong{color:var(--ink); font-weight:700}

@media (max-width:880px){
  .faq-item{padding:18px 20px}
  .faq-q{font-size:14px}
}

/* =============== MATERIAL CARD (Canva, etc) =============== */
.material-card{
  display:flex; align-items:center; gap:24px;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:18px;
  padding:32px 36px;
  transition:.2s;
  margin-bottom:18px;
}
.material-card:hover{
  border-color:var(--red);
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(200,16,46,0.10);
}
.material-icon{
  font-size:42px; line-height:1;
  flex-shrink:0;
}
.material-body{flex:1}
.material-tag{
  display:inline-block;
  font-size:10px; letter-spacing:1.8px; text-transform:uppercase;
  font-weight:800; color:var(--red);
  border:1px solid rgba(200,16,46,0.3);
  padding:4px 10px; border-radius:99px;
  margin-bottom:10px;
}
.material-titulo{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:22px; text-transform:uppercase;
  color:var(--ink); letter-spacing:-0.01em;
  line-height:1.2; margin-bottom:8px;
}
.material-desc{
  font-size:14px; line-height:1.6; color:var(--ink-2);
}
.material-arrow{
  font-size:28px; font-weight:300;
  color:var(--ink-3);
  flex-shrink:0;
  transition:.2s;
}
.material-card:hover .material-arrow{
  color:var(--red);
  transform:translateX(6px);
}

@media (max-width:880px){
  .material-card{padding:24px; gap:16px}
  .material-icon{font-size:32px}
  .material-titulo{font-size:18px}
}

/* =============== CTA GRANDE (botão de acesso) =============== */
.cta-wrap{margin-top:32px}
.cta-grande{
  display:flex; align-items:center; gap:18px;
  background:var(--ink);
  color:var(--paper);
  padding:22px 28px;
  border-radius:14px;
  transition:.2s;
  border:1px solid var(--ink);
}
.cta-grande:hover{
  background:var(--red);
  border-color:var(--red);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(200,16,46,0.25);
}
.cta-icon{
  font-size:24px; line-height:1;
  flex-shrink:0;
}
.cta-text{flex:1; display:flex; flex-direction:column; gap:2px}
.cta-label{
  font-family:'Inter',sans-serif; font-weight:800;
  font-size:16px; text-transform:uppercase;
  letter-spacing:0.5px;
}
.cta-sub{
  font-size:11px; letter-spacing:1.5px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase; font-weight:600;
}
.cta-arrow{
  font-size:22px; font-weight:300;
  transition:transform .2s;
}
.cta-grande:hover .cta-arrow{transform:translateX(6px)}

@media (max-width:880px){
  .cta-grande{padding:18px 20px; gap:14px}
  .cta-label{font-size:14px}
  .cta-sub{font-size:10px}
}

/* =============== FERRAMENTAS DE APOIO (cards das IAs) =============== */
.ferramentas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:24px;
}
.ferramenta-card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:28px 28px 26px;
  position:relative;
  transition:.2s;
}
.ferramenta-card:hover{
  border-color:var(--red);
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(200,16,46,.08);
}
.ferramenta-num{
  position:absolute; top:22px; right:24px;
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:32px; line-height:1; color:var(--red);
  opacity:.85;
}
.ferramenta-emoji{
  font-size:32px; line-height:1; margin-bottom:14px;
}
.ferramenta-titulo{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:17px; text-transform:uppercase;
  color:var(--ink); letter-spacing:-0.01em;
  line-height:1.2; margin-bottom:10px;
}
.ferramenta-desc{
  font-size:14px; line-height:1.6; color:var(--ink-2);
  margin-bottom:18px;
}
.ferramenta-titulo em{
  font-family:'Fraunces',serif; font-style:italic;
  font-weight:500; color:var(--red);
  text-transform:none; letter-spacing:0;
  font-size:0.78em;
}
.ferramenta-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--paper);
  padding:11px 18px;
  border-radius:99px;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:800;
  transition:.2s;
}
.ferramenta-btn:hover{
  background:var(--red);
}
.ferramenta-btn-arrow{
  font-size:14px; font-weight:300;
  transition:transform .2s;
}
.ferramenta-btn:hover .ferramenta-btn-arrow{transform:translateX(4px)}

@media (max-width:880px){
  .ferramentas{grid-template-columns:1fr; gap:12px}
  .ferramenta-card{padding:22px 22px 20px}
}

/* =============== TÓPICO GRANDE (divider de sub-tema dentro da etapa) =============== */
.topico-grande{
  margin:64px 0 36px;
  padding:48px 0 36px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.topico-grande::before{
  content:'';
  position:absolute;
  top:-1px; left:0;
  width:120px; height:3px;
  background:var(--red);
}
.topico-label{
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  font-weight:800; color:var(--red);
  margin-bottom:18px;
}
.topico-titulo{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:clamp(36px,5vw,64px);
  line-height:0.95;
  color:var(--ink);
  letter-spacing:-0.04em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.topico-titulo em{
  font-family:'Fraunces',serif;
  font-style:italic; font-weight:500;
  color:var(--red);
  text-transform:none;
  letter-spacing:-0.01em;
}
.topico-sub{
  font-size:17px; line-height:1.55;
  color:var(--ink-2);
  max-width:680px;
}
.topico-sub strong{color:var(--ink); font-weight:700}

@media (max-width:880px){
  .topico-grande{margin:40px 0 24px; padding:32px 0 24px}
  .topico-titulo{font-size:32px}
  .topico-sub{font-size:15px}
}

/* =============== AGORA-BLOCK · A PERGUNTA DO AGORA (dark) =============== */
.agora-block{
  background:#0a0a0a;
  background-image:
    radial-gradient(ellipse at top right, rgba(200,16,46,0.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(200,16,46,0.08), transparent 60%);
  color:#e6e6e6;
  border-radius:18px;
  padding:48px 44px;
  margin:48px 0 24px;
  position:relative;
  overflow:hidden;
}
.agora-tag{
  display:inline-block;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; color:var(--red);
  border:1px solid rgba(200,16,46,0.4);
  padding:6px 14px; border-radius:99px;
  margin-bottom:32px;
}
.agora-head{margin-bottom:48px}
.agora-kicker{
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--red); font-weight:800;
  margin-bottom:18px;
}
.agora-title{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:clamp(80px,12vw,180px);
  line-height:0.85;
  color:#ffffff;
  letter-spacing:-0.05em;
  text-transform:uppercase;
  margin-bottom:24px;
  text-shadow:0 0 40px rgba(200,16,46,0.25);
}
.agora-accent{
  color:var(--red);
  text-shadow:0 0 28px rgba(200,16,46,0.55);
}
.agora-lead{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:clamp(18px,2.2vw,26px);
  line-height:1.3; color:#ffffff;
  text-transform:uppercase; letter-spacing:-0.01em;
  margin-bottom:14px;
}
.agora-lead strong{color:var(--red)}
.agora-sub{
  font-size:15px; line-height:1.6; color:rgba(255,255,255,0.65);
  font-weight:400;
}
.agora-sub strong{color:#ffffff; font-weight:600}

/* A PERGUNTA EXATA */
.agora-question{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(200,16,46,0.25);
  border-left:3px solid var(--red);
  border-radius:12px;
  padding:28px 32px;
  margin-bottom:48px;
}
.agora-question-label{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; color:var(--red);
  margin-bottom:14px;
}
.agora-question-text{
  font-family:'Fraunces',serif;
  font-style:italic; font-weight:500;
  font-size:clamp(18px,2.1vw,24px);
  line-height:1.5;
  color:#ffffff;
}
.agora-question-text strong{
  font-family:'Inter',sans-serif; font-style:normal; font-weight:800;
  color:var(--red);
}
.agora-highlight{
  display:inline; background:linear-gradient(180deg, transparent 60%, rgba(200,16,46,0.25) 60%);
  padding:0 4px;
}
.agora-highlight em{
  font-family:'Fraunces',serif; font-style:italic;
  color:var(--red); font-weight:700;
}
.agora-variant{
  margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:12px; color:rgba(255,255,255,0.5);
}
.agora-variant em{color:rgba(255,255,255,0.75)}

/* SEÇÃO TÍTULO INTERNO */
.agora-section-title{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:clamp(20px,2.6vw,30px);
  text-transform:uppercase;
  color:#ffffff;
  letter-spacing:-0.02em;
  margin-bottom:8px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.agora-sub-text{
  font-size:14px; line-height:1.6;
  color:rgba(255,255,255,0.6);
  margin-bottom:28px;
}
.agora-sub-text em{color:var(--red); font-style:italic; font-weight:600}

/* 4 RAZÕES */
.razoes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:24px 0 48px;
}
.razao{
  display:flex; gap:16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:22px 22px;
  transition:.2s;
}
.razao:hover{
  border-color:rgba(200,16,46,0.4);
  background:rgba(200,16,46,0.04);
}
.razao-num{
  flex-shrink:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--red);
  color:#ffffff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:15px;
}
.razao-body h4{
  font-family:'Inter',sans-serif; font-weight:800;
  font-size:14px; text-transform:uppercase;
  color:#ffffff; letter-spacing:0.3px;
  margin-bottom:6px; line-height:1.3;
}
.razao-body p{
  font-size:13px; line-height:1.55;
  color:rgba(255,255,255,0.6);
  font-style:italic;
}

/* TERMÔMETRO LEAD */
.lead-cards{
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:24px;
}
.lead-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:20px 24px;
  transition:.2s;
}
.lead-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:12px;
}
.lead-dot{
  display:inline-block;
  width:14px; height:14px; border-radius:50%;
  flex-shrink:0;
}
.lead-name{
  font-family:'Inter',sans-serif; font-weight:900;
  font-size:16px; text-transform:uppercase;
  color:#ffffff; letter-spacing:0.3px;
  font-style:italic;
}
.lead-eq{
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:700; padding:5px 10px;
  border-radius:6px;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.7);
}
.lead-examples{
  font-size:13px; line-height:1.6;
  color:rgba(255,255,255,0.55);
  font-style:italic;
  margin-bottom:10px;
}
.lead-diag{
  font-size:13px; line-height:1.5;
  color:#ffffff; font-weight:600;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.lead-quente{border-left:3px solid #ef4444}
.lead-quente .lead-dot{background:#ef4444; box-shadow:0 0 12px rgba(239,68,68,0.6)}
.lead-quente .lead-name{color:#ff7676}
.lead-morno{border-left:3px solid #f59e0b}
.lead-morno .lead-dot{background:#f59e0b}
.lead-morno .lead-name{color:#fbbf24}
.lead-frio{border-left:3px solid #3b82f6}
.lead-frio .lead-dot{background:#3b82f6}
.lead-frio .lead-name{color:#60a5fa}

.agora-foot{
  margin-top:36px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:11px; color:rgba(255,255,255,0.45);
  letter-spacing:0.3px;
  line-height:1.7;
}
.agora-foot strong{color:rgba(255,255,255,0.75); font-weight:700}

@media (max-width:880px){
  .agora-block{padding:32px 22px; border-radius:14px}
  .agora-title{font-size:64px}
  .agora-lead{font-size:16px}
  .agora-question{padding:22px 20px}
  .agora-question-text{font-size:16px}
  .razoes-grid{grid-template-columns:1fr; gap:12px}
  .razao{padding:18px 18px}
  .lead-card{padding:18px 20px}
  .agora-section-title{font-size:18px}
}

/* =============== BOX ERRO COMUM 🚫 =============== */
.erro{
  display:flex; gap:18px;
  background:#1a1a1a;
  color:#e0e0e0;
  border-radius:14px;
  padding:24px 28px;
  margin-bottom:28px;
  border-left:3px solid #ef4444;
}
.erro-icon{
  font-size:22px; line-height:1.2;
  flex-shrink:0;
}
.erro-body{flex:1}
.erro-label{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; color:#ff7676;
  margin-bottom:12px;
}
.erro-body p{
  font-size:15px; line-height:1.6; color:#cfcfcf;
  margin-bottom:10px;
}
.erro-body p:last-child{margin-bottom:0}
.erro-body strong{color:#ffffff; font-weight:700}
.erro-list{
  list-style:none; padding:0; margin:14px 0;
  display:flex; flex-direction:column; gap:8px;
}
.erro-list li{
  font-size:14px; line-height:1.55;
  color:#999;
  font-style:italic;
  padding-left:22px; position:relative;
  text-decoration:line-through;
  text-decoration-color:rgba(255,118,118,0.45);
  text-decoration-thickness:1px;
}
.erro-list li::before{
  content:'✕'; position:absolute;
  left:0; top:0; color:#ff7676; font-weight:900;
  font-size:13px; font-style:normal;
}

/* =============== CENÁRIO (cards de exemplo) =============== */
.cenario{
  margin-bottom:28px;
  padding:0 0 0 18px;
  border-left:2px solid var(--line-soft);
}
.cenario-label{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:700; color:var(--ink-3);
  margin-bottom:6px;
  line-height:1.4;
}
.cenario .dialog{padding:8px 0 0}

@media (max-width:880px){
  .erro{padding:20px 22px}
  .erro-body p, .erro-list li{font-size:13px}
  .cenario{padding-left:14px}
}

/* =============== BOX OBSERVAÇÃO 📌 (atenção, dourado) =============== */
.observacao{
  display:flex; gap:18px;
  background:#fdf8ec;
  border-radius:14px;
  padding:24px 28px;
  border:1px solid rgba(212,164,55,0.25);
  border-left:3px solid var(--accent);
  margin-bottom:28px;
}
.observacao-icon{
  font-size:22px; line-height:1.2;
  flex-shrink:0;
}
.observacao-body{flex:1}
.observacao-label{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; color:#a07d1e;
  margin-bottom:10px;
}
.observacao-body p{
  font-size:15px; line-height:1.6; color:var(--ink-2);
  margin-bottom:8px;
}
.observacao-body p:last-child{margin-bottom:0}
.observacao-body strong{color:var(--ink); font-weight:700}
.observacao-list{
  list-style:none; padding:0; margin:8px 0 4px;
  display:flex; flex-direction:column; gap:10px;
}
.observacao-list li{
  font-size:14px; line-height:1.55; color:var(--ink-2);
  padding-left:18px; position:relative;
}
.observacao-list li::before{
  content:''; position:absolute;
  left:0; top:9px; width:6px; height:6px;
  background:var(--accent); border-radius:50%;
}
.observacao-list strong{color:var(--ink); font-weight:700}

.exemplo-mini{
  background:rgba(212,164,55,0.07);
  border-radius:10px;
  padding:16px 20px;
  margin:14px 0;
}
.exemplo-mini-label{
  font-size:9px; letter-spacing:1.8px; text-transform:uppercase;
  font-weight:800; color:#a07d1e;
  margin-bottom:10px;
}

/* =============== HORÁRIO-CHIP (dentro do balão) =============== */
.horario-chip{
  display:inline-block;
  background:rgba(200,16,46,0.06);
  color:var(--red);
  border:1px solid rgba(200,16,46,0.18);
  padding:8px 14px;
  border-radius:8px;
  font-size:14px; font-weight:700;
  letter-spacing:0.3px;
  margin:6px 0;
}

/* =============== PRINCÍPIO AGM (citação final) =============== */
.principio{
  background:var(--ink);
  color:var(--paper);
  border-radius:18px;
  padding:48px 40px;
  margin-top:48px;
  text-align:center;
}
.principio-kicker{
  font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent); font-weight:700;
  margin-bottom:28px;
}
.principio-frase{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(22px,3vw,32px); line-height:1.35;
  color:var(--paper);
  max-width:680px; margin:0 auto;
  letter-spacing:-0.005em;
}
.principio-frase em{
  font-family:'Fraunces',serif; font-style:italic;
  color:rgba(255,255,255,0.65); font-weight:500;
}
.principio-divider{
  width:48px; height:1px;
  background:rgba(255,255,255,0.2);
  margin:32px auto;
}
.principio-sub{
  font-family:'Inter',sans-serif;
  font-size:14px; line-height:1.7;
  color:rgba(255,255,255,0.75);
  font-weight:400; max-width:520px; margin:0 auto;
}

@media (max-width:880px){
  .observacao{padding:20px 22px}
  .observacao-body p{font-size:14px}
  .principio{padding:36px 24px}
  .principio-frase{font-size:20px}
}

/* =============== AÇÃO INLINE (no meio do diálogo) =============== */
.msg-action{
  align-self:center;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(10,10,10,0.06);
  padding:8px 16px;
  border-radius:99px;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:700; color:var(--ink-3);
  margin:6px 0;
}
.msg-action-icon{font-size:13px}

/* =============== DIÁLOGO (balões de mensagem) =============== */
.dialog{
  display:flex; flex-direction:column; gap:10px;
  padding:24px 0;
}
.msg{
  display:flex;
  max-width:78%;
}
.msg-op{align-self:flex-start}
.msg-cli{align-self:flex-end}

.msg-bubble{
  background:var(--paper);
  border-radius:14px 14px 14px 4px;
  padding:14px 18px;
  font-size:15px; line-height:1.55;
  color:var(--ink);
  box-shadow:0 1px 2px rgba(10,10,10,.04);
  position:relative;
}
.msg-bubble p{margin-bottom:6px}
.msg-bubble p:last-child{margin-bottom:0}
.msg-bubble strong{color:var(--red); font-weight:700}

.msg-bubble-cli{
  background:var(--bg-soft);
  border-radius:14px 14px 4px 14px;
  color:var(--ink-3);
  font-style:italic;
  font-size:13px;
}

/* =============== BALÃO LARGO (cards de oferta) =============== */
.msg-wide{max-width:92%}
.msg-bubble-oferta{
  padding:24px 28px;
  border:1px solid var(--line-soft);
}
.msg-bubble-destaque{
  background:#fef6f6;
  border:1px solid rgba(200,16,46,0.18);
  border-left:3px solid var(--red);
}
.oferta-title{
  font-family:'Inter',sans-serif;
  font-weight:800;
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--ink);
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.oferta-list, .oferta-checklist, .oferta-premios{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.oferta-list li{
  font-size:14px; line-height:1.6; color:var(--ink-2);
  padding-left:16px; position:relative;
}
.oferta-list li::before{
  content:''; position:absolute;
  left:0; top:9px; width:5px; height:5px;
  background:var(--red); border-radius:50%;
}
.oferta-list strong{color:var(--ink); font-weight:800; font-size:15px}
.oferta-nota{color:var(--ink-3); font-style:italic; font-size:12px; font-weight:500}

.oferta-checklist li{
  font-size:14px; line-height:1.6; color:var(--ink-2);
  padding-left:24px; position:relative;
}
.oferta-checklist li::before{
  content:'✓'; position:absolute;
  left:0; top:0; color:var(--red); font-weight:900;
  font-size:14px;
}
.oferta-checklist strong{color:var(--ink); font-weight:700}

.oferta-premios{
  margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--line-soft);
  gap:8px;
}
.oferta-premios li{
  font-size:14px; line-height:1.55; color:var(--ink-2);
  font-weight:500;
}

.bloco-num{
  font-size:16px; line-height:1;
  margin-right:4px; vertical-align:middle;
}

@media (max-width:880px){
  .msg-wide{max-width:100%}
  .msg-bubble-oferta{padding:18px 20px}
  .oferta-title{font-size:15px}
  .oferta-list li, .oferta-checklist li, .oferta-premios li{font-size:13px}
  .oferta-list strong{font-size:14px}
}

/* =============== PLACEHOLDER =============== */
.placeholder{
  background:var(--paper);
  border-radius:14px;
  padding:36px 40px;
  border:1px dashed var(--line);
  color:var(--ink-3);
}
.placeholder > p{
  font-size:13px; letter-spacing:.5px;
  text-transform:uppercase; font-weight:700;
  color:var(--ink-4); margin-bottom:18px;
}
.placeholder ul{
  list-style:none; display:flex; flex-direction:column; gap:10px;
}
.placeholder li{
  font-size:15px; color:var(--ink-2);
  padding-left:18px; position:relative;
  line-height:1.5;
}
.placeholder li::before{
  content:''; position:absolute;
  left:0; top:11px; width:6px; height:6px;
  background:var(--red); border-radius:50%;
}

/* =============== PAGE NAV (MODO TREINAMENTO) =============== */
.page-nav{
  display:none;
  margin-top:64px; padding-top:32px;
  border-top:1px solid var(--line);
  align-items:center; justify-content:space-between;
}
.page-nav.show{display:flex}
.page-nav-btn{
  padding:12px 24px;
  background:var(--ink); color:var(--bg);
  border-radius:99px;
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  font-weight:700; transition:.2s;
}
.page-nav-btn:hover{background:var(--red)}
.page-nav-btn:disabled{
  opacity:.3; cursor:not-allowed;
}
.page-nav-progress{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
}

/* =============== MOBILE =============== */
@media (max-width: 880px){
  :root{ --sidebar-w: 280px }

  .topbar{padding:0 14px}
  .brand-name{font-size:12px}
  .mode-btn{padding:6px 10px; font-size:10px}

  .app{grid-template-columns: 1fr}
  .main{
    grid-column:1;
    padding: 32px 24px 100px;
  }

  .sidebar{
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,0.1);
  }
  .sidebar.open{transform: translateX(0)}
  .sidebar-backdrop.show{display:block}

  .page-title{font-size:38px; letter-spacing:-1px}
  .page-title.display{font-size:48px}
  .page-lead{font-size:16px}
  .page-header{margin-bottom:32px}

  .capa-quote{padding:28px; margin:40px 0}
  .capa-quote p{font-size:18px}
  .capa-meta{gap:24px; flex-wrap:wrap}

  .how-grid{grid-template-columns:1fr; gap:14px}
  .how-card{padding:20px}

  .placeholder{padding:24px}

  .page-nav-btn{padding:10px 16px; font-size:11px}

  .etapas-grid{grid-template-columns:1fr 1fr; gap:10px}
  .etapa-card{padding:18px 16px; min-height:90px}
  .etapa-num{font-size:28px}
  .etapa-name{font-size:12px}

  .callout{padding:22px 24px; margin-bottom:32px}
  .callout p{font-size:14px}

  .msg{max-width:90%}
  .msg-bubble{padding:12px 14px; font-size:14px}
}

@media (max-width: 480px){
  .topbar{gap:10px}
  .brand{font-size:11px; letter-spacing:1px}
  .mode-switch{padding:2px}
  .mode-btn{padding:6px 8px; font-size:9px; letter-spacing:1px}
}