/*
 * BIBLIOTECA DE COMPONENTES — compartilhada por todos os guias.
 * Consome exclusivamente os tokens de ./tokens.css. Novos componentes
 * entram aqui só depois de revisados (ver system/lint-tokens.js).
 */
@import url('./tokens.css');

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--wash); color:var(--body); font-family:var(--sans); font-size:16px; line-height:1.62; }
a { color:inherit; text-decoration:none; } button { font:inherit; } button,summary,a,label { -webkit-tap-highlight-color:transparent; }

.reading-progress { position:fixed; z-index:20; inset:0 0 auto; height:3px; background:transparent; }.reading-progress span { display:block; width:0; height:100%; background:var(--gold); transition:width .1s linear; }
.topbar { height:68px; padding:0 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:rgba(246,246,246,.96); position:sticky; top:0; z-index:15; backdrop-filter:blur(10px); }.brand img { width:124px; max-height:28px; object-fit:contain; object-position:left center; }.menu-toggle { padding:8px 0; border:0; background:none; display:flex; align-items:center; gap:7px; color:var(--navy); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.menu-toggle svg { width:18px; }.topbar-cta { display:none; }
.chapter-nav { position:fixed; z-index:14; top:68px; left:0; right:0; padding:22px 24px 26px; border-bottom:1px solid var(--line); background:var(--paper); box-shadow:0 10px 24px rgba(35,34,34,.08); transform:translateY(-110%); transition:transform .25s ease; }.chapter-nav.is-open { transform:translateY(0); }.chapter-nav .eyebrow { margin-bottom:10px; }.chapter-nav nav { display:grid; gap:4px; }.chapter-nav a { display:flex; gap:10px; align-items:baseline; padding:7px 0; font-size:13px; line-height:1.25; color:var(--muted); border-bottom:1px solid transparent; }.chapter-nav a.active { color:var(--navy); font-weight:700; }.chapter-nav a span { flex:1; }

.hero { color:#eaf1ff; background:var(--navy); min-height:calc(100svh - 68px); display:flex; flex-direction:column; justify-content:space-between; padding:44px 24px 20px; }.hero-inner { max-width:780px; margin:auto 0; }.eyebrow { margin:0 0 13px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.15em; line-height:1.35; text-transform:uppercase; }.hero .eyebrow { color:var(--gold); }.eyebrow span { margin:0 4px; }.hero h1 { max-width:760px; margin:0; font-size:clamp(39px,11vw,70px); letter-spacing:-.045em; line-height:.99; font-weight:700; }.hero-subtitle { max-width:585px; margin:25px 0 0; font-size:20px; line-height:1.34; letter-spacing:-.02em; }.hero-promise { max-width:500px; margin:18px 0 0; color:#bfcdea; font-size:15px; line-height:1.5; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:33px; }.button { min-height:48px; padding:12px 16px; border:1px solid transparent; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:14px; line-height:1.2; transition:transform .18s ease,background .18s ease; }.button:active { transform:translateY(1px); }.button svg { width:17px; }.button-gold { background:var(--gold); color:var(--ink); }.button-gold:hover { background:#ddccae; }.reading-time { display:flex; align-items:center; gap:8px; color:#bfcdea; font-family:var(--mono); font-size:11px; }.reading-time svg { width:15px; }.hero-index { display:flex; justify-content:space-between; padding-top:36px; color:#bfcdea; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }

.section-prose { max-width:820px; margin:0 auto; padding:68px 24px; }.section-prose h2,.chapter h2 { margin:0; color:var(--ink); font-size:clamp(30px,8vw,48px); line-height:1.06; letter-spacing:-.04em; }.intro > p:not(.eyebrow):not(.audience),.conclusion > p { max-width:650px; margin:24px 0 0; font-size:18px; line-height:1.67; }.audience { margin:30px 0 0; padding:16px 0 16px 18px; border-left:2px solid var(--gold); color:var(--navy); font-size:15px; font-weight:500; line-height:1.45; }.principles { margin-top:42px; border-top:1px solid var(--line); }.principles article { display:grid; grid-template-columns:35px 1fr; column-gap:12px; padding:19px 0; border-bottom:1px solid var(--line); }.principles span { grid-row:span 2; color:var(--gold); font:500 11px var(--mono); }.principles h3 { margin:0; color:var(--navy); font-size:16px; line-height:1.3; }.principles p { grid-column:2; margin:3px 0 0; color:var(--muted); font-size:14px; line-height:1.45; }

.journey { background:var(--paper); }

.summary { background:var(--cream); max-width:none; padding-left:24px; padding-right:24px; }.summary > * { max-width:772px; margin-left:auto!important; margin-right:auto!important; }.summary ol { margin-top:31px; padding:0; list-style:none; border-top:1px solid #d9cfbd; }.summary li { border-bottom:1px solid #d9cfbd; }.summary a { min-height:62px; display:grid; grid-template-columns:34px 1fr 20px; gap:8px; align-items:center; color:var(--navy); }.summary a span { color:var(--gold); font:500 11px var(--mono); }.summary strong { font-size:15px; line-height:1.25; }.summary svg { width:16px; }

.chapter { max-width:1050px; margin:0 auto; padding:70px 24px; display:grid; grid-template-columns:1fr; gap:14px; }.chapter + .chapter { border-top:1px solid var(--line); }.chapter-number { color:var(--gold); font:500 13px var(--mono); }.chapter-content { max-width:735px; }.chapter-lead { margin:22px 0 0; font-size:18px; line-height:1.67; }.callout { display:flex; gap:13px; margin:33px 0 0; padding:17px; border-left:3px solid var(--navy); background:var(--warm); }.callout svg { flex:0 0 auto; width:18px; color:var(--navy); }.callout strong { color:var(--navy); font-size:14px; }.callout p { margin:3px 0 0; font-size:14px; line-height:1.5; }
.chapter-check-label { margin:34px 0 0; color:var(--muted); font:700 10px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; }.chapter .checklist { margin-top:12px; }

.bucket-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:32px; }.bucket { min-height:143px; padding:20px; border:1px solid var(--line); background:var(--paper); }.bucket span { color:var(--gold); font:500 10px var(--mono); text-transform:uppercase; }.bucket h3 { margin:17px 0 0; color:var(--navy); font-size:18px; line-height:1.15; }.bucket p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.4; }

.profile-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:32px; }.profile { padding:20px; border:1px solid var(--line); border-left:3px solid var(--gold); background:var(--paper); }.profile h3 { margin:0; color:var(--navy); font-size:17px; line-height:1.2; }.profile-situation { margin:6px 0 0; color:var(--muted); font:500 12px var(--mono); }.profile-insight { margin:12px 0 0; color:var(--body); font-size:14px; line-height:1.5; }

.accordions { margin-top:31px; border-top:1px solid var(--line); }.accordions details { border-bottom:1px solid var(--line); }.accordions summary { cursor:pointer; padding:17px 3px; display:flex; justify-content:space-between; align-items:center; color:var(--navy); font-size:16px; font-weight:700; list-style:none; }.accordions summary::-webkit-details-marker { display:none; }.accordions summary svg { width:17px; transition:transform .2s ease; }.accordions details[open] summary svg { transform:rotate(45deg); }.accordions p { max-width:620px; margin:0; padding:0 3px 19px; font-size:15px; line-height:1.55; }

.chart-card { margin-top:33px; padding:18px; border:1px solid var(--line); background:var(--paper); }.chart-head h3 { margin:0; color:var(--navy); font-size:19px; line-height:1.2; }.chart-head > p { margin:10px 0 0; color:var(--muted); font-size:12px; }.chart { height:280px; position:relative; margin:29px 4px 10px 28px; border-left:1px solid var(--body); border-bottom:1px solid var(--body); background:repeating-linear-gradient(to bottom, transparent 0,transparent 55px,#efebe7 56px),repeating-linear-gradient(to right,transparent 0,transparent 25%,#efebe7 25.2%); }.axis { position:absolute; color:var(--muted); font:400 9px var(--mono); text-transform:uppercase; letter-spacing:.05em; }.axis-y { transform:rotate(-90deg); transform-origin:left top; left:-23px; top:100%; }.axis-x { right:0; bottom:-22px; }.plot { position:absolute; left:var(--x); bottom:var(--y); transform:translate(-50%,50%); padding:5px 7px; border:1px solid var(--navy); border-radius:3px; color:var(--navy); background:var(--paper); font-size:10px; cursor:pointer; }.plot:nth-of-type(4n + 1) { border-color:var(--gold); }.plot:focus-visible,.button:focus-visible,.menu-toggle:focus-visible,summary:focus-visible,.tab-list button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(11,40,89,.22); }.chart-note { min-height:41px; margin:27px 0 0; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.4; }

/* flow-card usa navy/gold + --flow-life (token aprovado em tokens.css). */
.flow-card { margin-top:33px; padding:18px; border:1px solid var(--line); background:var(--paper); }
.flow-bar { display:flex; gap:4px; height:52px; margin:26px 0 0; }
.flow-seg { display:flex; align-items:center; justify-content:center; border-radius:4px; color:#fff; font:500 13px var(--mono); }
.flow-seg-0 { background:var(--navy); }
.flow-seg-1 { background:var(--flow-life); }
.flow-seg-2 { background:var(--gold); color:var(--ink); }
.flow-legend { display:grid; grid-template-columns:1fr; gap:14px; margin-top:22px; }
.flow-item { display:flex; gap:11px; align-items:flex-start; }
.flow-swatch { flex:0 0 auto; width:13px; height:13px; margin-top:3px; border-radius:3px; }
.flow-item strong { display:block; color:var(--navy); font-size:14px; }
.flow-item p { margin:3px 0 0; color:var(--muted); font-size:13px; line-height:1.45; }

.timeline { margin:34px 0 0; padding:0; list-style:none; }.timeline li { position:relative; min-height:85px; padding:0 0 27px 28px; border-left:1px solid var(--gold); }.timeline li:last-child { padding-bottom:0; }.timeline-dot { position:absolute; top:3px; left:-5px; width:9px; height:9px; border-radius:50%; background:var(--gold); }.timeline p { margin:0; color:var(--muted); font:500 11px var(--mono); text-transform:uppercase; }.timeline strong { display:block; margin-top:2px; color:var(--navy); font-size:21px; line-height:1.2; }.timeline small { color:var(--body); font-size:13px; }

.tabs { margin-top:33px; }.tab-list { display:flex; gap:20px; border-bottom:1px solid var(--line); }.tab-list button { padding:0 0 11px; border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); cursor:pointer; font-size:13px; font-weight:700; }.tab-list button.active { border-color:var(--navy); color:var(--navy); }.tab-panel { display:none; padding-top:20px; }.tab-panel.active { display:block; }.tab-panel ul { padding:0; margin:0; list-style:none; }.tab-panel li { display:flex; gap:11px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.4; }.tab-panel svg { flex:0 0 auto; width:18px; color:var(--gold); }.tab-panel [data-panel="1"] svg { color:#9b4f3d; }

.checklist-section { background:var(--warm); max-width:none; }.checklist-section > * { max-width:772px; margin-left:auto!important; margin-right:auto!important; }.checklist { margin-top:32px; border-top:1px solid #d8d0c5; }.checklist label { display:flex; align-items:flex-start; gap:12px; padding:16px 0; border-bottom:1px solid #d8d0c5; cursor:pointer; color:var(--navy); font-size:15px; line-height:1.4; }.checklist input { position:absolute; opacity:0; }.checkbox-icon { flex:0 0 21px; width:21px; height:21px; display:grid; place-items:center; border:1px solid var(--navy); border-radius:3px; }.checkbox-icon svg { width:14px; color:transparent; }.checklist input:checked + .checkbox-icon { background:var(--navy); }.checklist input:checked + .checkbox-icon svg { color:#fff; }.checklist-status { margin-top:18px; color:var(--muted); font:400 11px var(--mono); }

.conclusion { padding-top:70px; padding-bottom:0; }.cta-box { margin:39px -24px 0; padding:29px 24px; display:flex; flex-direction:column; gap:21px; background:var(--navy); color:#eaf1ff; }.cta-box h3 { margin:0; font-size:23px; letter-spacing:-.03em; line-height:1.13; }.cta-box p { margin:8px 0 0; color:#c1cee9; font-size:14px; line-height:1.5; }.button-light { width:fit-content; background:#eaf1ff; color:var(--navy); }footer { margin-top:70px; padding:33px 24px 38px; background:#323030; color:#c9c0b7; }footer img { width:130px; max-height:28px; object-fit:contain; object-position:left center; }footer p { max-width:650px; margin:23px 0 19px; font-size:11px; line-height:1.5; }footer span { color:#9f958b; font:400 10px var(--mono); }

@media (min-width:680px) { .topbar { padding:0 40px; }.hero { padding:80px 9vw 28px; }.section-prose { padding-top:94px; padding-bottom:94px; }.summary { padding-left:40px; padding-right:40px; }.chapter { padding:96px 40px; grid-template-columns:120px minmax(0,735px); gap:28px; }.bucket-grid { grid-template-columns:repeat(2,1fr); }.profile-grid { grid-template-columns:repeat(2,1fr); }.flow-legend { grid-template-columns:repeat(3,1fr); gap:20px; }.chart-card,.flow-card { padding:28px; }.chart { height:330px; }.cta-box { margin-left:0; margin-right:0; padding:32px; flex-direction:row; justify-content:space-between; align-items:center; }.cta-box > div { max-width:430px; }footer { padding-left:max(40px,calc((100vw - 772px)/2)); padding-right:max(40px,calc((100vw - 772px)/2)); } }
@media (min-width:1120px) { :root { --desktop-reading-left:max(48px,calc((100vw - 820px)/2)); }.topbar { padding:0 48px; }.menu-toggle { display:none; }.topbar-cta { display:inline-flex; color:var(--navy); font-size:13px; font-weight:700; }.chapter-nav { display:none; }.hero { position:relative; z-index:0; padding-left:var(--desktop-reading-left); padding-right:48px; box-shadow:0 0 0 100vmax var(--navy); clip-path:inset(0 -100vmax); }.section-prose { margin-left:var(--desktop-reading-left); margin-right:auto; }.summary,.checklist-section { width:100%; margin-left:0; margin-right:0; padding-left:48px; padding-right:48px; }.summary > * { margin-left:var(--desktop-reading-left)!important; margin-right:auto!important; }.chapter { max-width:none; margin:0; padding-left:var(--desktop-reading-left); padding-right:48px; grid-template-columns:1fr; gap:12px; }.checklist-section > * { margin-left:var(--desktop-reading-left)!important; margin-right:auto!important; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }