/* Guia "30 Dias de Recuperação Segura" — CenterPlástica
   Reaproveita os tokens de marca definidos em assets/style.css (:root),
   mas usa um shell próprio (mais simples que o site institucional) porque
   esta área funciona como um aplicativo de aula (estilo EAD). */

.guia-body{background:var(--cream);min-height:100vh;color:var(--ink);font-family:Montserrat,Arial,sans-serif}

/* ---------- Barra superior ---------- */
.guia-top{position:sticky;top:0;z-index:30;background:rgba(251,246,239,.94);backdrop-filter:blur(10px);border-bottom:1px solid #85615026;display:flex;align-items:center;justify-content:space-between;padding:16px 5vw}
.guia-top-brand{display:flex;align-items:center;gap:16px}
.guia-top-brand img{height:36px;width:auto;max-width:190px;object-fit:contain}
.guia-top-brand span{font:600 13px/1.3 Montserrat;color:var(--deep)}
.guia-top-brand em{display:block;font-style:normal;font-weight:400;font-size:10.5px;color:var(--coffee)}
.guia-top-links{display:flex;align-items:center;gap:22px;font-size:12px;font-weight:500}
.guia-top-links a{color:var(--coffee);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s}
.guia-top-links a:hover{border-color:var(--coffee)}
.guia-top-links .guia-user{color:var(--deep);font-weight:600}

/* ---------- Container geral ---------- */
.guia-wrap{max-width:880px;margin:0 auto;padding:52px 6vw 100px}
.guia-wrap.wide{max-width:1040px}
.guia-wrap.treino{max-width:1240px}
.guia-eyebrow{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--coffee);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.guia-eyebrow:before{content:"";width:34px;height:1px;background:var(--coffee)}
.guia-wrap h1{font:500 clamp(30px,4vw,46px)/1.1 'Playfair Display',serif;color:var(--deep);margin:0 0 16px;letter-spacing:-.02em}
.guia-lead{font-size:15px;line-height:1.75;color:#5c4a3e;max-width:640px}

/* ---------- Landing (deslogado) ---------- */
.guia-hero{background:linear-gradient(140deg,#eadbcc,#cdb39a 55%,var(--taupe));padding:80px 6vw 90px;text-align:center}
.guia-hero-inner{max-width:720px;margin:0 auto}
.guia-hero h1{font:500 clamp(34px,5vw,58px)/1.08 'Playfair Display',serif;color:var(--deep);margin:18px 0 20px;letter-spacing:-.02em}
.guia-hero p{font-size:15.5px;line-height:1.8;color:#4d3b30;max-width:560px;margin:0 auto 34px}
.guia-hero .guia-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

.guia-actions{display:flex;gap:14px;flex-wrap:wrap}
.guia-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:linear-gradient(135deg,var(--coffee),var(--deep));color:#fff;padding:15px 26px;font-size:12px;font-weight:600;letter-spacing:.03em;cursor:pointer;text-decoration:none;box-shadow:0 13px 32px #6b4b3e3b;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.guia-btn:hover{transform:translateY(-3px);box-shadow:0 18px 42px #6b4b3e52}
.guia-btn.ghost{background:none;border:1.5px solid #85615055;color:var(--deep);box-shadow:none}
.guia-btn.ghost:hover{border-color:var(--coffee);transform:none;box-shadow:none}
.guia-btn.full{width:100%;justify-content:center}
.guia-btn:disabled,.guia-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.guia-highlights{max-width:900px;margin:0 auto;padding:64px 6vw;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.guia-highlights article{background:#fff;padding:28px 24px;box-shadow:var(--shadow-md);border-top:3px solid var(--coffee)}
.guia-highlights h3{font:500 17px 'Playfair Display',serif;color:var(--deep);margin:0 0 8px}
.guia-highlights p{font-size:12.5px;line-height:1.7;color:#6f5a4b;margin:0}
.guia-highlights small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--coffee);font-weight:600}
@media(max-width:760px){.guia-highlights{grid-template-columns:1fr}}

/* ---------- Cartões de autenticação (cadastro / login) ---------- */
.guia-auth-wrap{min-height:calc(100vh - 74px);display:grid;place-items:center;background:linear-gradient(135deg,var(--cream),#e6d5c4);padding:40px 20px}
.guia-auth-card{width:100%;max-width:440px;background:#fff;padding:44px 38px;box-shadow:var(--shadow-lg);border-top:5px solid var(--coffee)}
.guia-auth-card img{width:190px;display:block;margin:0 auto 22px}
.guia-auth-card h1{font:500 24px 'Playfair Display',serif;color:var(--deep);text-align:center;margin:0 0 6px}
.guia-auth-card p.sub{text-align:center;font-size:11.5px;color:#6f5a4b;margin:0 0 26px;line-height:1.6}
.guia-auth-card form{display:grid;gap:16px}
.guia-auth-card label{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--coffee);display:block;margin-bottom:7px}
.guia-auth-card input{width:100%;border:1px solid #dccbc4;background:#fffaf7;padding:13px;font-size:13px;box-sizing:border-box}
.guia-auth-card input:focus{outline:2px solid var(--coffee);outline-offset:1px}
.guia-auth-card button{border:0;background:linear-gradient(135deg,var(--coffee),var(--deep));color:#fff;padding:14px;font-size:12px;letter-spacing:.04em;margin-top:6px;cursor:pointer}
.guia-auth-note{margin-top:20px;font-size:11px;color:#6f5a4b;text-align:center;line-height:1.6}
.guia-auth-note a{color:var(--coffee);font-weight:600;border-bottom:1px solid var(--coffee)}
.guia-hp{position:absolute;left:-9999px;opacity:0}
.guia-alert{font-size:11.5px;color:#7a2f22;background:#f6e3dd;border-left:3px solid #a04a3c;padding:12px 14px;margin:0 0 18px;text-align:left}
.guia-alert.success{color:#3e5a37;background:#e8f0e2;border-left-color:#5c7a56}

/* ---------- Boas-vindas ---------- */
.guia-welcome{min-height:calc(100vh - 74px);display:grid;place-items:center;text-align:center;padding:40px 6vw}
.guia-welcome-inner{max-width:600px}
.guia-welcome .guia-eyebrow{justify-content:center}
.guia-welcome h1{margin-bottom:18px}
.guia-welcome p{font-size:15px;line-height:1.8;color:#5c4a3e;margin-bottom:34px}
.guia-parabens-icon{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f1e0c4,#e6c99a);box-shadow:var(--shadow-md)}
.guia-parabens-icon .guia-ico{width:44px;height:44px;color:var(--deep)}
.guia-parabens-voltar{margin:22px 0 0!important;font-size:12px}
.guia-parabens-voltar a{color:var(--coffee);border-bottom:1px solid var(--coffee)}
.guia-parabens-selo{display:inline-flex;align-items:center;gap:10px;margin:6px 0 30px!important;padding:10px 18px;border-radius:30px;background:linear-gradient(135deg,#f1e0c4,#e6c99a);border:1px solid var(--gold);box-shadow:0 6px 16px #c79a5640;font-size:12.5px;color:var(--deep)}
.guia-parabens-selo.gold{background:linear-gradient(135deg,#f8e3a3,#d9ad55);border-color:#a8752e;box-shadow:0 8px 22px #c79a5670}
.guia-parabens-selo .guia-ico{width:20px;height:20px;flex:0 0 20px}
.guia-parabens-selo strong{font-weight:700}

/* ---------- Dashboard: lista de capítulos ---------- */
.guia-progress-bar{height:8px;background:#e3d2c0;border-radius:20px;overflow:hidden;margin:22px 0 8px}
.guia-progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--coffee));transition:width .5s var(--ease)}
.guia-progress-label{font-size:11px;color:#6f5a4b;margin-bottom:38px}

.guia-chapters{display:flex;flex-direction:column;gap:14px}
.guia-chapter{display:flex;align-items:center;gap:20px;background:#fff;padding:20px 24px;box-shadow:var(--shadow-md);border-left:4px solid #d9c6b3;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.guia-chapter.is-done{border-left-color:#5c7a56}
.guia-chapter.is-active{border-left-color:var(--coffee)}
.guia-chapter.is-locked{opacity:.55}
.guia-chapter.is-link:hover{transform:translateX(4px);box-shadow:0 20px 50px #6b4b3e24}
.guia-chapter-num{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;font:500 16px 'Playfair Display',serif;background:#f1e5d6;color:var(--coffee)}
.guia-chapter.is-done .guia-chapter-num{background:#5c7a56;color:#fff}
.guia-chapter.is-active .guia-chapter-num{background:var(--coffee);color:#fff}
.guia-chapter-num-ico{width:20px;height:20px;color:var(--coffee)}
.guia-chapter-body h3{display:flex;align-items:center;gap:8px}
.guia-chapter-body-ico{width:18px;height:18px;flex:0 0 18px;color:var(--coffee);opacity:.8}
.guia-chapter-body{flex:1;min-width:0}
.guia-chapter-body small{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--coffee);font-weight:600}
.guia-chapter-body h3{font:500 18px 'Playfair Display',serif;color:var(--deep);margin:4px 0 2px}
.guia-chapter-body p{font-size:12px;color:#8a7365;margin:0}
.guia-chapter-status{font-size:11px;font-weight:600;color:var(--coffee);white-space:nowrap}
.guia-chapter.is-done .guia-chapter-status{color:#5c7a56}
.guia-chapter.is-locked .guia-chapter-status{color:#a8988a}
.guia-lock-icon{font-size:16px}

.guia-cert-cta{margin-top:36px;padding:28px 26px;background:linear-gradient(135deg,#f1e0c4,#e6c99a);text-align:center;box-shadow:var(--shadow-md)}
.guia-cert-cta h3{font:500 20px 'Playfair Display',serif;color:var(--deep);margin:0 0 8px}
.guia-cert-cta p{font-size:12.5px;color:#5c4a3e;margin:0 0 18px}
.guia-cert-cta-nota{margin:16px 0 0!important;font-size:10.5px;color:#7a6653!important;font-style:italic}
.guia-btn .guia-ico{width:15px;height:15px}

/* ---------- Layout da área de treinamento (etapas + conteúdo + selos) ---------- */
.guia-treino-layout{display:grid;grid-template-columns:232px minmax(0,1fr) 216px;gap:30px;align-items:start}
.guia-treino-content{min-width:0}

.guia-etapas-panel,.guia-selos-panel{background:#fff;box-shadow:var(--shadow-md);padding:22px 18px;position:sticky;top:90px}
.guia-etapas-panel h2,.guia-selos-panel h2{font:700 10.5px Montserrat;text-transform:uppercase;letter-spacing:.1em;color:var(--coffee);margin:0 0 16px}

.guia-etapas-lista{display:flex;flex-direction:column;gap:3px}
.guia-etapa-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:5px;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--deep);text-decoration:none;transition:background .25s}
.guia-etapa-item:not(.locked):hover{background:#f7f0e6}
.guia-etapa-item.done{color:var(--ink)}
.guia-etapa-item.active{color:var(--ink);font-weight:600}
.guia-etapa-item.is-viewing{background:#f1e5d6;font-weight:700;color:var(--ink)}
.guia-etapa-item .num{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:#f1e5d6;color:var(--coffee)}
.guia-etapa-item.done .num{background:#5c7a56;color:#fff}
.guia-etapa-item.active .num{background:var(--coffee);color:#fff}
.guia-etapa-item.locked{color:#a8988a;font-weight:500;cursor:default}
.guia-etapa-item.locked .num{background:transparent}
.guia-etapa-item.locked .num .guia-ico{width:13px;height:13px;color:#bcac9c}
.guia-etapa-item span.titulo{flex:1}

.guia-selos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.guia-selo{position:relative;width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#f5efe5;border:2px solid #e3d2c0;color:#c9b9a8;cursor:default}
.guia-selo .guia-ico{width:18px;height:18px}
.guia-selo.earned{background:linear-gradient(135deg,#f1e0c4,#e6c99a);border-color:var(--gold);color:var(--deep);box-shadow:0 6px 16px #c79a5640}
.guia-selo.gold{background:linear-gradient(135deg,#f8e3a3,#d9ad55);border-color:#a8752e;box-shadow:0 8px 22px #c79a5670}
.guia-selo.gold .guia-ico{width:22px;height:22px}

/* Tooltip explicativo ao passar o cursor sobre o selo */
.guia-selo:before,.guia-selo:after{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:30}
.guia-selo:after{content:attr(data-tooltip);width:150px;padding:9px 11px;border-radius:6px;background:var(--deep);color:#fff;font-size:10.5px;font-weight:500;line-height:1.5;text-align:center;white-space:normal;box-shadow:var(--shadow-md)}
.guia-selo:before{content:"";bottom:calc(100% + 3px);border:6px solid transparent;border-top-color:var(--deep);width:0;height:0}
.guia-selo:hover:before,.guia-selo:hover:after,.guia-selo:focus-visible:before,.guia-selo:focus-visible:after{opacity:1;transform:translateX(-50%) translateY(0)}
.guia-selos-nota{font-size:10.5px;color:#8a7365;line-height:1.7;margin:16px 0 0;text-align:center}
.guia-selos-nota a{color:var(--coffee);font-weight:600;border-bottom:1px solid var(--coffee)}

@media(max-width:980px){
  .guia-treino-layout{display:flex;flex-direction:column}
  .guia-etapas-panel,.guia-selos-panel{position:static;order:2}
  .guia-treino-content{order:1}
  .guia-selos-grid{grid-template-columns:repeat(9,1fr);max-width:420px;margin:0 auto}
  .guia-etapas-lista{flex-direction:row;flex-wrap:wrap;gap:8px}
  .guia-etapa-item{flex:0 0 auto}
  .guia-etapa-item span.titulo{display:none}
}

/* ---------- Leitura do capítulo ---------- */
.guia-chapter-head{margin-bottom:8px}
.guia-chapter-head small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--coffee);font-weight:600}
.guia-chapter-icon{width:64px;height:64px;margin-bottom:18px;border-radius:50%;display:grid;place-items:center;background:#f1e5d6;border:1px solid var(--gold-soft)}
.guia-chapter-icon .guia-ico{width:32px;height:32px;color:var(--coffee)}
.guia-ico{display:block}
.guia-article{font-size:15px;line-height:1.85;color:#4a3a2f}
.guia-article h3{font:500 21px 'Playfair Display',serif;color:var(--deep);margin:34px 0 14px}
.guia-article p{margin:0 0 18px}
.guia-article ul{margin:0 0 18px;padding-left:22px}
.guia-article li{margin-bottom:8px}
.guia-article strong{color:var(--deep)}
.guia-article blockquote{margin:26px 0;padding:20px 24px;border-left:3px solid var(--coffee);background:#f4ece0;font-style:italic;color:#5c4a3e}
.guia-tabela{width:100%;border-collapse:collapse;margin:20px 0 26px;font-size:12.5px}
.guia-tabela th{background:var(--deep);color:#fff;text-align:left;padding:10px 12px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.guia-tabela th:first-child:before{content:"✓ ";color:#bfe0a8}
.guia-tabela th:last-child:before{content:"⚠ ";color:#e8c98a}
.guia-tabela td{padding:9px 12px;border-bottom:1px solid #e6d7c8;vertical-align:top}
.guia-tabela tr:nth-child(odd) td{background:#fbf6ef}

.guia-chapter-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:40px 0 0;padding-top:24px;border-top:1px solid #85615026}
.guia-chapter-nav>span{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Quiz ---------- */
.guia-quiz{margin-top:50px;background:#fff;box-shadow:var(--shadow-lg);padding:34px 32px;border-top:5px solid var(--gold)}
.guia-quiz h2{font:500 24px 'Playfair Display',serif;color:var(--deep);margin:0 0 6px}
.guia-quiz > p.sub{font-size:12px;color:#6f5a4b;margin:0 0 30px}
.guia-quiz-q{margin-bottom:28px;padding-bottom:26px;border-bottom:1px solid #efe3d4}
.guia-quiz-q:last-of-type{border-bottom:0;margin-bottom:8px}
.guia-quiz-q p.pergunta{font-size:14px;font-weight:600;color:var(--deep);margin:0 0 14px}
.guia-quiz-opt{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;margin-bottom:8px;background:#faf5ec;cursor:pointer;font-size:13px;transition:background .25s}
.guia-quiz-opt:hover{background:#f1e5d3}
.guia-quiz-opt input{margin-top:3px}

/* ---------- Certificado ---------- */
.guia-cert-page{background:#e9ded0;min-height:100vh;display:grid;place-items:center;padding:40px 20px}
.guia-cert{width:100%;max-width:820px;background:#fffaf3;padding:70px 60px;box-shadow:var(--shadow-lg);border:10px solid var(--coffee);outline:1px solid var(--gold-soft);outline-offset:-18px;text-align:center;position:relative}
.guia-cert img{width:160px;margin-bottom:14px}
.guia-cert .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--coffee);margin-bottom:10px}
.guia-cert h1{font:500 clamp(26px,4vw,40px)/1.2 'Playfair Display',serif;color:var(--deep);margin:0 0 26px}
.guia-cert .nome{font:600 italic clamp(28px,4vw,40px)/1.2 'Playfair Display',serif;color:var(--coffee);margin:18px 0;border-bottom:1px solid var(--gold-soft);display:inline-block;padding-bottom:10px}
.guia-cert p{font-size:14px;line-height:1.8;color:#5c4a3e;max-width:560px;margin:0 auto}
.guia-cert .assinatura{margin-top:46px;font-size:13px;color:var(--deep)}
.guia-cert .assinatura strong{display:block;font:500 16px 'Playfair Display',serif;margin-bottom:2px}
.guia-cert .data{margin-top:6px;font-size:11px;color:#8a7365}
.guia-cert-actions{margin-top:30px;text-align:center}
@media print{
  body *{visibility:hidden}
  .guia-cert,.guia-cert *{visibility:visible}
  .guia-cert{position:absolute;inset:0;margin:0;box-shadow:none;max-width:none;width:100%}
  .guia-cert-actions,.guia-top{display:none!important}
}

/* ---------- Responsivo ---------- */
@media(max-width:720px){
  .guia-top{padding:14px 5vw}
  .guia-top-links{gap:14px;font-size:11px}
  .guia-wrap{padding:38px 6vw 70px}
  .guia-chapter{padding:16px 18px;gap:14px}
  .guia-chapter-num{width:36px;height:36px;flex:0 0 36px;font-size:14px}
  .guia-quiz{padding:26px 20px}
  .guia-cert{padding:44px 24px;border-width:6px}
}