/* ComexFree — estilo compartilhado.
   Layout: só o cabeçalho leva a cor da marca; página e rodapé claros. Tema único claro, de propósito. */
:root{
  /* fundo branco (combina com os anúncios); quadros em cinza-azulado para se destacarem do fundo */
  --page:#FFFFFF; --panel:#F1F5F8; --sunk:#E5ECF1; --field:#FFFFFF;
  --ink:#122433; --muted:#566878; --line:#D2DDE5; --line-strong:#B9C7D2;
  --accent:#0A7A62; --accent-ink:#FFFFFF; --accent-soft:#E2F2EC; --signal:#B57C00; --signal-soft:#FBF4E4; --danger:#B3261E;
  --req-bg:#EAF5F0; --req-line:#9FCFBD;
  --brand-bg:#0E2A3A; --brand-ink:#FFFFFF; --brand-accent:#4CD3A4; --brand-muted:#A7BAC7;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55}
a{color:var(--accent)}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1160px;margin:0 auto}


/* cabeçalho */
.site-head{background:var(--brand-bg);color:var(--brand-ink)}
.site-head .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-block:14px}
.brand{font-family:var(--display);font-weight:700;font-size:2rem;letter-spacing:.02em;line-height:1;text-transform:uppercase;color:var(--brand-ink);text-decoration:none}
.brand{display:inline-flex;align-items:center;gap:9px}
.brand .marca{width:50px;height:50px;flex:none}
.brand .bt{color:inherit}
.brand .bt span{color:var(--brand-accent)}
.brand small{display:block;font-family:var(--body);font-weight:400;font-size:.78rem;letter-spacing:.02em;text-transform:none;color:var(--brand-muted);margin-top:4px}
nav.menu{display:flex;flex-wrap:wrap;gap:4px}
nav.menu a{color:var(--brand-muted);text-decoration:none;font-weight:500;padding:7px 12px;border-radius:4px}
nav.menu a:hover{color:var(--brand-ink);background:rgba(255,255,255,.08)}
nav.menu a[aria-current="page"]{color:var(--brand-ink);box-shadow:inset 0 -2px 0 var(--brand-accent);border-radius:0}

/* rodapé */
.site-foot{background:var(--brand-bg);color:var(--brand-muted);margin-top:56px}
.site-foot .inner{padding-block:36px 18px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-sobre{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-sobre p{margin:10px 0 0;font-size:.9rem;max-width:42ch}
.site-foot .brand{font-size:1.5rem}
.site-foot .brand .marca{width:36px;height:36px}
.site-foot nav{display:flex;flex-direction:column;gap:7px;font-size:.9rem}
.site-foot nav b{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.site-foot nav a{color:var(--brand-muted);text-decoration:none}
.site-foot nav a:hover{color:#fff;text-decoration:underline}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:14px;font-size:.78rem}
/* voltar ao início */
.voltar-bar .inner{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:14px}
.voltar{display:inline-flex;align-items:center;gap:4px;font-size:.88rem;font-weight:600;color:var(--accent);text-decoration:none;border:1px solid #BFE0D3;background:var(--accent-soft);border-radius:999px;padding:5px 12px 5px 8px}
.voltar:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.voltar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.voltar.sec2{padding-left:12px;background:transparent}
.voltar-bar + main{padding-top:14px}

main{padding-block:28px}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{text-wrap:balance}
.badge{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--signal);color:var(--signal);padding:2px 7px;border-radius:3px;white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* aulas */
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:start}
@media (max-width:900px){.lesson{grid-template-columns:minmax(0,1fr)}.lesson aside{order:-1}}
.lesson article{max-width:70ch;min-width:0}
.lesson h1{font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1.05;margin:6px 0 10px}
.lesson .lead{font-size:1.12rem;color:var(--muted);margin:0 0 20px}
.lesson h2{font-family:var(--display);font-weight:600;font-size:1.6rem;letter-spacing:.01em;margin:34px 0 8px}
.lesson h3{font-size:1.05rem;margin:22px 0 6px}
.lesson p,.lesson li{font-size:1.02rem}
.lesson ul,.lesson ol{padding-left:22px}
.lesson li{margin:4px 0}
.box-resumo{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 6px 6px 0;padding:12px 16px;margin:18px 0}
.box-resumo b{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.box-resumo p{margin:4px 0}
.box-atencao{border:1px solid var(--line);border-left:4px solid var(--signal);background:var(--signal-soft);border-radius:0 6px 6px 0;padding:12px 16px;margin:18px 0}
.box-atencao b{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal);margin-bottom:4px}
.analogia{font-style:italic;color:var(--muted);border-left:2px solid var(--line-strong);padding-left:12px}
.conta{font-family:var(--mono);font-size:.88rem;background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:12px 14px;overflow-x:auto}
.conta table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:.88rem}
.conta td{padding:4px 6px;border-bottom:1px dashed var(--line);white-space:nowrap}
.conta td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.conta tr.tot td{font-weight:600;border-bottom:none;border-top:2px solid var(--ink)}
.tabela{overflow-x:auto;margin:14px 0}
.tabela table{border-collapse:collapse;width:100%;font-size:.92rem}
.tabela th,.tabela td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.tabela th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:500;background:var(--sunk)}
.tabela td.c{text-align:center}
.sim{color:var(--accent);font-weight:600}
.nao{color:var(--muted)}
.lesson aside{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){.lesson aside{position:static}}
.toc{border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:var(--panel)}
.toc b{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.toc ol{margin:6px 0 0;padding-left:18px;font-size:.9rem}
.toc a{text-decoration:none}
.cta{border:1px solid var(--accent);border-radius:6px;padding:12px 14px;background:var(--accent-soft);font-size:.92rem}
.cta a.btn{display:inline-block;margin-top:8px}
a.btn{background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;padding:9px 14px;border-radius:4px}
a.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.fontes{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);margin-top:36px;padding-top:12px}
.fontes ul{padding-left:18px}
.nav-aula{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;border-top:1px solid var(--line);padding-top:16px}
.nav-aula a{text-decoration:none;font-weight:500}

/* faixa de câmbio no cabeçalho */
.ticker-bar{border-top:1px solid rgba(255,255,255,.08);padding-block:9px;overflow-x:auto}
.site-head .ticker{padding-block:0;min-height:20px;justify-content:flex-start;flex-wrap:nowrap}
.ticker{display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:.74rem;white-space:nowrap}
.ticker .tk{color:var(--brand-ink);text-decoration:none;display:inline-flex;gap:5px;white-space:nowrap;align-items:baseline}
.ticker .tk b{color:var(--brand-accent);font-weight:500}
.ticker .up{color:#7FD9A1}.ticker .down{color:#FF9C92}
.ticker .tk-src{color:var(--brand-muted);font-family:var(--body);font-size:.72rem;margin-left:auto}
.ticker .tk-src a{color:var(--brand-ink)}

/* campos obrigatórios: fundo levemente esverdeado, discreto */
.req-leg{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.req-leg i{width:22px;height:14px;border-radius:3px;background:var(--req-bg);border:1px solid var(--req-line);border-left:3px solid var(--accent)}

/* marca d'água de fundo: globos e rotas inteiros, bem clarinhos, fixos atrás de todo o conteúdo (não interferem em anúncios nem cliques) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.075;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%230A7A62%22%20stroke-width%3D%22.7%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2228%22/%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2232%22%20rx%3D%2212%22%20ry%3D%2228%22/%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2232%22%20rx%3D%2222%22%20ry%3D%2228%22/%3E%3Cpath%20d%3D%22M4%2032h56M8%2018h48M8%2046h48%22/%3E%3C/svg%3E") no-repeat left 2% top 22%/260px,
             url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%230A7A62%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M47.6%2020.5A21%2021%200%201%201%2038%2014.3%22/%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2235%22%20rx%3D%228.5%22%20ry%3D%2221%22/%3E%3Cpath%20d%3D%22M9.5%2035h41M12%2047C24%2044%2039%2032%2052%2013M42.5%2012.5%2052.5%2011.5%2053.5%2021.5%22/%3E%3C/svg%3E") no-repeat right 2% bottom 4%/300px,
             url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20160%2060%22%20fill%3D%22none%22%20stroke%3D%22%230A7A62%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%2050C50%200%20110%200%20152%2040%22%20stroke-width%3D%22.9%22%20stroke-dasharray%3D%221%205%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2250%22%20r%3D%222.2%22%20fill%3D%22%230A7A62%22/%3E%3Ccircle%20cx%3D%22152%22%20cy%3D%2240%22%20r%3D%222.2%22%20fill%3D%22%230A7A62%22/%3E%3C/svg%3E") no-repeat left 38% top 46%/420px,
             url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2080%22%20fill%3D%22none%22%20stroke%3D%22%230A7A62%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%2070C30%2066%2070%2050%20112%2010%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%221%205%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2270%22%20r%3D%222.4%22%20fill%3D%22%230A7A62%22/%3E%3Cpath%20d%3D%22M103%209.5%20112%2010%20111.5%2019%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") no-repeat right 22% top 18%/240px,
             url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%230A7A62%22%20stroke-width%3D%22.7%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2228%22/%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2232%22%20rx%3D%2212%22%20ry%3D%2228%22/%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2232%22%20rx%3D%2222%22%20ry%3D%2228%22/%3E%3Cpath%20d%3D%22M4%2032h56M8%2018h48M8%2046h48%22/%3E%3C/svg%3E") no-repeat left 30% bottom 6%/150px,
             url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2080%22%20fill%3D%22none%22%20stroke%3D%22%230A7A62%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%2070C30%2066%2070%2050%20112%2010%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%221%205%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2270%22%20r%3D%222.4%22%20fill%3D%22%230A7A62%22/%3E%3Cpath%20d%3D%22M103%209.5%20112%2010%20111.5%2019%22%20stroke-width%3D%221%22/%3E%3C/svg%3E") no-repeat left 8% bottom 10%/200px,
             url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%230A7A62%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M47.6%2020.5A21%2021%200%201%201%2038%2014.3%22/%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%2235%22%20rx%3D%228.5%22%20ry%3D%2221%22/%3E%3Cpath%20d%3D%22M9.5%2035h41M12%2047C24%2044%2039%2032%2052%2013M42.5%2012.5%2052.5%2011.5%2053.5%2021.5%22/%3E%3C/svg%3E") no-repeat right 30% top 58%/170px}
@media (max-width:760px){body::before{opacity:.055;background-size:150px,170px,240px,150px,100px,130px,110px}}
@media print{body::before{display:none}}

.foot-base a{color:var(--brand-muted)}
.foot-base a:hover{color:#fff}
.ticker .tk-src:first-child{margin-left:0}

/* capa escura com imagem (Aprenda e aulas) */
.capa{position:relative;overflow:hidden;background:#0E2A3A;color:#fff;padding-block:22px 34px}
.capa::before{content:"";position:absolute;inset:0;background:var(--capa) center 55%/cover no-repeat;z-index:0}
.capa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,42,58,.82) 0%,rgba(14,42,58,.74) 100%);z-index:0}
.capa .inner{position:relative;z-index:1}
.capa .eyebrow{color:#5FD3A8}
.capa h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.05;margin:6px 0 10px;color:#fff;max-width:32ch}
.capa .lead{font-size:1.1rem;color:rgba(255,255,255,.88);margin:0;max-width:70ch}
.capa-aula{padding-block:18px 28px}
.capa-voltar{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:18px}
.capa .voltar{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.capa .voltar:hover{background:#fff;color:var(--accent)}
.capa + main{padding-top:26px}

/* janela de confirmação */
.cf-fundo{position:fixed;inset:0;z-index:100;background:rgba(14,42,58,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.cf-fundo[hidden]{display:none}
.cf-card{background:#fff;border-radius:10px;max-width:420px;width:100%;padding:20px 20px 16px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.cf-card h2{font-family:var(--display);font-size:1.3rem;margin:0 0 8px;text-transform:none;letter-spacing:0}
.cf-card p{margin:0 0 18px;color:var(--muted);font-size:.95rem}
.cf-acoes{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.cf-acoes button{font:inherit;font-weight:600;cursor:pointer;border-radius:6px;padding:9px 16px;border:1px solid var(--line-strong);background:#fff;color:var(--ink)}
.cf-acoes .cf-sim{background:var(--accent);border-color:var(--accent);color:#fff}
.cf-acoes .cf-sim.perigo{background:var(--danger);border-color:var(--danger)}