:root{--preto:#080908;--branco:#fff;--papel:#f5f5f0;--lima:#c4ef78;--verde:#728b43;--borda:#d8d9d2;--texto:#3f413d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--papel);color:var(--preto);font:16px/1.75 Poppins,system-ui,sans-serif}.wrap{width:min(1080px,calc(100% - 68px));margin:auto}.bar{background:#000;color:#fff}.bar-in{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{color:#fff;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}.bar nav{display:flex;gap:24px}.bar nav a{color:#aaa;text-decoration:none;font-size:13px}.bar nav a:hover{color:var(--lima)}.hero{background:#000;color:#fff;padding:84px 0 88px}.eyebrow,.label{color:var(--lima);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}.hero .wrap{width:min(900px,100%);text-align:center}.hero .eyebrow{display:flex;align-items:center;justify-content:center;gap:10px}.hero .eyebrow .lo{display:inline-block;width:7px;height:7px;background:currentColor;transform:rotate(45deg);flex:0 0 auto}.hero h1{max-width:none;margin:14px auto 22px;font-size:clamp(42px,6vw,70px);font-weight:600;line-height:1.02;letter-spacing:-.05em}.hero .lead{max-width:64ch;margin:0 auto;color:#c8c8c8;font-size:18px}.toc{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:34px}.toc a{padding:9px 13px;border:1px solid #383838;color:#ddd;text-decoration:none;font-size:12px}.toc a:hover{border-color:var(--lima);color:var(--lima)}main{padding:68px 0 100px}.chapter-bridge{max-width:850px;margin:0 0 42px;padding:24px 0 26px;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);color:#555a52;font-size:17px;line-height:1.8}.chapter-bridge span{display:block;margin-bottom:7px;color:var(--verde);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}.chapter{display:grid;grid-template-columns:230px 1fr;gap:70px;padding:58px 0;border-top:1px solid var(--borda)}.chapter h2{margin:5px 0 0;font-size:30px;font-weight:400;line-height:1.18;letter-spacing:-.025em}.content{max-width:740px}.content p{color:var(--texto);margin:0 0 20px;line-height:1.85}.content p:last-child{margin-bottom:0}.takeaway{border-left:5px solid var(--lima);background:#fff;padding:22px 26px;margin-top:30px;color:#383c35}.takeaway b{display:block;margin-bottom:5px}.qa-title{margin:85px 0 8px;font-size:36px;font-weight:300}.qa-intro{color:var(--texto);margin-bottom:30px}.qa{border-top:1px solid var(--borda)}details{border-bottom:1px solid var(--borda)}summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px 1fr 30px;gap:18px;padding:24px 0;font-weight:600}summary::-webkit-details-marker{display:none}.num{color:var(--verde);font-size:12px}.plus{font-size:24px;font-weight:300}.answer{max-width:720px;margin:0 0 26px 58px;color:var(--texto)}.next{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:70px;padding-top:28px;border-top:1px solid var(--borda)}.next a{color:#000;text-decoration:none;font-size:13px;font-weight:600;border-bottom:2px solid var(--lima)}.pergunta-propria{text-decoration:none}footer{background:#000;color:#888;padding:34px 0;font-size:12px}footer a{color:#fff}.source{max-width:760px;font-size:12px;color:#777;margin-top:48px}@media(max-width:720px){.wrap{width:min(100% - 38px,1080px)}.bar-in{align-items:flex-start;padding:18px 0}.bar nav{gap:12px;flex-wrap:wrap;justify-content:flex-end}.hero{padding:58px 0}.chapter-bridge{font-size:15px}.chapter{grid-template-columns:1fr;gap:18px;padding:42px 0}.chapter h2{font-size:27px}.answer{margin-left:0}.next{align-items:flex-start;flex-direction:column}}

/* ---------- título em cima, como nos capítulos 2 e 7 ---------- */
/*
  O layout antigo punha o rótulo e o título numa coluna de 230px à esquerda
  e o corpo à direita. Com o marca-página ocupando a lateral, a página virava
  três colunas e a esquerda ficava vazia abaixo do título. Agora o título
  abre a seção em largura inteira e o texto ganha a medida de leitura.
*/
.chapter{grid-template-columns:1fr;gap:0;padding:clamp(40px,4.4vw,62px) 0}
.chapter>div:first-child{margin-bottom:26px;max-width:74ch}
.chapter .label{display:flex;align-items:center;gap:9px;margin:0 0 12px}
.chapter .label::before{content:"";width:8px;height:8px;background:var(--lima);
  transform:rotate(45deg);flex:0 0 auto}
.chapter h2{margin:0;font-size:clamp(27px,3.1vw,38px);font-weight:300;line-height:1.14;
  letter-spacing:-.035em}
.chapter .content{max-width:74ch}

/* primeiro parágrafo da seção funciona como resposta direta */
.chapter .content>p:first-of-type{padding-left:22px;border-left:3px solid var(--lima);
  font-size:17.5px;line-height:1.72;color:#262c22}

.reading-flow .chapter-bridge{border:0;padding:0;margin-bottom:28px}
.reading-flow .chapter:first-of-type{border-top:0;padding-top:0}

@media(max-width:980px){
  .chapter>div:first-child{max-width:none;margin-bottom:20px}
  .chapter .content>p:first-of-type{font-size:16.5px}
}

.chapter .takeaway{background:transparent;border-left-width:3px;padding:16px 0 16px 22px}

/* ---------- temas do capítulo em cards, mesmo padrão dos passos 1, 2 e 3 ---------- */
:root{--page:#f4f4f2;--ink:#080908;--muted:#62665f}

.temas-wrap{padding:76px 0 90px;position:relative;background-color:var(--page);background-image:linear-gradient(90deg,rgba(244,244,242,.98) 0%,rgba(244,244,242,.9) 42%,rgba(244,244,242,.58) 100%),url('assets/autoconhecimento-temas-bg.png');background-position:center,right center;background-size:cover,cover;background-repeat:no-repeat}
.temas-wrap>.wrap{position:relative;z-index:1}
.temas-wrap h2{font-size:clamp(30px,3vw,42px);font-weight:300;line-height:1.2;letter-spacing:-.035em;margin:14px 0 18px;color:var(--ink)}
.temas-sub{margin:0 0 17px;color:var(--muted);font-size:1.05rem}
.temas-sub:after{content:"";display:block;width:54px;height:4px;background:var(--lima);margin-top:23px}

.temas-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.tema{background:rgba(255,255,255,.96);border:1px solid rgba(217,220,212,.9);box-shadow:0 16px 40px rgba(14,20,8,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.tema:hover{transform:scale(1.015);box-shadow:0 20px 46px rgba(14,20,8,.09);border-color:var(--lima)}
.tema summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;padding:26px 28px;-webkit-tap-highlight-color:transparent}
.tema summary::-webkit-details-marker{display:none}
.tema-num{flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--muted);padding-top:3px}
.tema-tit{flex:1 1 auto;min-width:0}
.tema-tit h3{margin:0 0 8px;font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.tema-tit p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.tema-plus{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#f0f1ec;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink);transition:transform .2s ease,background .2s ease}
.tema:hover .tema-plus{background:var(--lima)}
.tema[open] .tema-plus{transform:rotate(45deg);background:var(--lima)}
.tema[open]{box-shadow:0 22px 52px rgba(14,20,8,.09);grid-column:1/-1}
.tema-corpo{padding:0 44px 34px;max-width:920px;margin-inline:auto}
.tema-corpo p{font-size:15.5px;line-height:1.75;color:#454943;margin:0 0 18px}
.tema-corpo p:last-child{margin-bottom:0}
.tema-corpo b{color:var(--ink);font-weight:600}
.tema-corpo .puxa-linha,.tema-corpo .puxa-cap,.tema-corpo .cap-nota{margin-top:0;margin-bottom:18px}
.tema-lista{margin:0 0 18px;padding-left:20px;color:#454943;font-size:15.5px;line-height:1.7}
.tema-lista li+li{margin-top:8px}

.temas-gancho{max-width:920px;margin:44px auto 0;text-align:center;font-size:.98rem;line-height:1.7;color:var(--texto)}
.temas-gancho b{color:var(--preto)}

.temas-saiba-mais{margin:16px 0 0;text-align:center}
.temas-saiba-mais .volta{display:inline-flex;align-items:center;gap:9px;color:var(--preto);text-decoration:none;font-size:.9rem;font-weight:500;border-bottom:2px solid var(--lima);padding-bottom:2px}
.temas-saiba-mais .volta:hover{border-bottom-color:var(--preto)}

/* nota lateral dentro do card (bastidor, jargão, iniciativa) */
.cap-nota{margin:8px 0 24px;padding:22px 24px;background:#eef1e8;border-left:3px solid #7FAD2E}
.cap-nota .cap-nota-rot{margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5b7a2a}
.cap-nota p{margin:0 0 12px;font-size:15px;line-height:1.72;color:#3d443a}
.cap-nota p:last-child{margin-bottom:0}

/* grades de 3 ou 5 colunas dentro do card (critérios, fases, passos) */
.grade3,.fases-grid{display:grid;gap:1px;background:#dcdcd4;border:1px solid #dcdcd4;margin:8px 0 22px}
.grade3{grid-template-columns:repeat(3,1fr)}
.fases-grid{grid-template-columns:repeat(5,1fr)}
.grade3>div,.fases-grid>div{background:#f9f9f6;padding:22px 18px 24px}
.grade3 .fases-num,.fases-grid .fases-num{display:block;margin:0 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#5b7a2a}
.grade3 h3,.fases-grid h3{margin:0 0 10px;font-size:16px;font-weight:500;line-height:1.25;letter-spacing:-.01em;color:#111}
.grade3 p,.fases-grid p{margin:0!important;font-size:13.5px!important;line-height:1.55!important;color:#575f52!important}

@media(max-width:980px){
  .temas-grid{grid-template-columns:1fr}
  .fases-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:700px){
  .temas-wrap{padding:54px 0 64px;background-image:linear-gradient(rgba(244,244,242,.88),rgba(244,244,242,.94)),url('assets/autoconhecimento-temas-bg.png');background-position:center,68% center;background-size:cover,auto 100%}
  .tema summary{padding:20px 20px;gap:12px}
  .tema-corpo{padding:0 20px 24px;max-width:none}
  .tema-num{font-size:11px}
  .tema-tit h3{font-size:17px}
  .fases-grid{grid-template-columns:1fr}
  .grade3{grid-template-columns:1fr}
}

.wrap.fim{width:min(1320px,calc(100% - 44px));margin:auto;padding-top:64px;padding-bottom:78px}
.fim-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.fim .rot{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--verde)}
.fim .rot .lo{width:8px;height:8px;background:var(--lima);transform:rotate(45deg);flex:0 0 auto}
.fim-grid h2{font-size:clamp(28px,4vw,48px);font-weight:300;letter-spacing:-.045em;line-height:1.1;margin:0}
.fim-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.fim-links .volta{display:inline-flex;align-items:center;gap:9px;color:var(--preto);text-decoration:none;font-size:.9rem;font-weight:500;border-bottom:2px solid var(--lima);padding-bottom:2px}
.fim-links .volta:hover{border-bottom-color:var(--preto)}
@media(max-width:700px){.fim-grid{grid-template-columns:1fr;gap:30px}}