:root{
  --on-accent:#14181C; --hover:#c58f5f; --path-bg:#EDEAE1;
  --foto-bg:linear-gradient(150deg,#EAE6DC,#DED9CF); --foto-ink:#14181C; --foto-tag:#6E6C66;
}
:root[data-theme="light"]{
  --on-accent:#14181C; --hover:#c58f5f; --path-bg:#EDEAE1;
  --foto-bg:linear-gradient(150deg,#EAE6DC,#DED9CF); --foto-ink:#14181C; --foto-tag:#6E6C66;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --on-accent:#14181C; --hover:#d3a173; --path-bg:#14181C;
  --foto-bg:linear-gradient(150deg,#1B3A57,#14181C); --foto-ink:#F4F2ED; --foto-tag:#9A968C;
}}
:root[data-theme="dark"]{
  --on-accent:#14181C; --hover:#d3a173; --path-bg:#14181C;
  --foto-bg:linear-gradient(150deg,#1B3A57,#14181C); --foto-ink:#F4F2ED; --foto-tag:#9A968C;
}

.btn-ghost,.btn.btn-ghost{background:transparent;color:var(--ink)}
.btn-primary,.nav-cta,.form button,.chip.hot,.btn{color:var(--on-accent)}
.btn-primary:hover,.nav-cta:hover,.form button:hover{background:var(--hover)}
a[style*="#14181C"]{color:var(--on-accent) !important;box-shadow:none !important}
.portrait .prompt{display:none}
.stats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
@media (max-width:640px){
  .stats{grid-template-columns:1fr;grid-auto-flow:row;grid-auto-columns:auto}
  .stats .st,.stats .st:nth-child(1),.stats .st:nth-child(2){border-right:0;border-bottom:1px solid var(--border)}
  .stats .st:last-child{border-bottom:0}
}
.about .foto{background:var(--foto-bg);border-color:var(--border)}
.about .foto .mk{color:var(--foto-ink)}
.about .foto .mk .brk{color:var(--accent) !important}
.about .foto .tag{color:var(--foto-tag)}
.path.prof{background:var(--path-bg);color:var(--ink)}
.path.prof p{color:var(--ink-2)}
.path.prof h3{color:var(--ink)}
.path .k,.path.prof .arrow{color:var(--accent)}
.path.prof .pgrid{opacity:.04}
.feat,.cta-box{background:var(--path-bg);color:var(--ink);border:1px solid var(--border)}
.feat h3,.cta-box h2{color:var(--ink)}
.feat p,.feat ul,.cta-box p{color:var(--ink-2)}
.feat .ctx,.feat .cycle{color:var(--accent)}
.feat .res{background:var(--surface);border-left-color:var(--accent);color:var(--ink)}
.feat .st span{color:var(--muted);border-color:var(--border-strong)}
.feat .pgrid,.cta-box .pgrid{opacity:.04}
.cta-box .btn{background:var(--accent);color:var(--on-accent)}
.cta-box .btn[style]{color:var(--ink) !important;border-color:var(--border-strong) !important}
.cta-box p a{color:var(--accent) !important}
.illus{background:var(--path-bg)}
.illus figcaption{color:var(--muted)}
.illus svg g[stroke="#F4F2ED"]{stroke:var(--ink)}
.illus svg g[fill="#14181C"],.illus svg circle[fill="#14181C"]{fill:var(--path-bg)}
.illus svg [stroke="#B07542"]{stroke:var(--accent)}
.poker{background:var(--path-bg);color:var(--ink);border:1px solid var(--border)}
.poker h3{color:var(--ink)}
.poker p{color:var(--ink-2)}
.poker .suit,.poker .lock,.poker .arrow{color:var(--accent)}
.hero-art{filter:drop-shadow(0 10px 18px rgba(0,0,0,.12))}
.ha-page{stroke:var(--ink);stroke-opacity:.3;stroke-width:1.4}
.ha-code{fill:var(--bg-2);stroke:var(--border-strong)}
.ha-ink{opacity:1}
.ha-badge text{fill:var(--on-accent)}
.rtools{display:flex;align-items:center;gap:8px}
.langsw{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--border-strong);color:var(--muted);border-radius:6px;padding:6px 11px;line-height:1.4}
.langsw:hover{color:var(--ink);border-color:var(--accent)}
/* idioma: as duas bandeiras (BR | EUA) com a do idioma atual acesa; a sigla continua no HTML e no aria-label.
   data-lang é o idioma de destino do link: "en" = página em português, "pt" = página em inglês */
.langsw[data-lang]{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;font-size:0;padding:3px 7px}
.langsw[data-lang]::before,.langsw[data-lang]::after{content:"";width:28px;height:19px;border-radius:2px;background-repeat:no-repeat;background-size:28px 19px;transition:opacity .15s,filter .15s}
.langsw[data-lang="en"]::after,.langsw[data-lang="pt"]::before{opacity:.35;filter:grayscale(.7)}
.langsw[data-lang]:hover::before,.langsw[data-lang]:hover::after{opacity:1;filter:none}
.langsw[data-lang]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13' preserveAspectRatio='none'%3E%3Crect width='20' height='13' fill='%23b22234'/%3E%3Cpath d='M0 1.5h20M0 3.5h20M0 5.5h20M0 7.5h20M0 9.5h20M0 11.5h20' stroke='%23fff'/%3E%3Crect width='8' height='7' fill='%233c3b6e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.3' cy='1.2' r='.45'/%3E%3Ccircle cx='3.3' cy='1.2' r='.45'/%3E%3Ccircle cx='5.3' cy='1.2' r='.45'/%3E%3Ccircle cx='7' cy='1.2' r='.45'/%3E%3Ccircle cx='2.3' cy='2.8' r='.45'/%3E%3Ccircle cx='4.3' cy='2.8' r='.45'/%3E%3Ccircle cx='6.2' cy='2.8' r='.45'/%3E%3Ccircle cx='1.3' cy='4.3' r='.45'/%3E%3Ccircle cx='3.3' cy='4.3' r='.45'/%3E%3Ccircle cx='5.3' cy='4.3' r='.45'/%3E%3Ccircle cx='7' cy='4.3' r='.45'/%3E%3Ccircle cx='2.3' cy='5.8' r='.45'/%3E%3Ccircle cx='4.3' cy='5.8' r='.45'/%3E%3Ccircle cx='6.2' cy='5.8' r='.45'/%3E%3C/g%3E%3C/svg%3E")}
.langsw[data-lang]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14' preserveAspectRatio='none'%3E%3Crect width='20' height='14' fill='%23009c3b'/%3E%3Cpath d='M10 1.4 18.6 7 10 12.6 1.4 7z' fill='%23ffdf00'/%3E%3Ccircle cx='10' cy='7' r='3.4' fill='%23002776'/%3E%3Cpath d='M6.75 6.2c2.2-.5 4.6-.1 6.5 1.3' stroke='%23fff' stroke-width='.6' fill='none'/%3E%3C/svg%3E")}
/* tema: o botão diz qual tema está ativo (texto montado pelo theme.js) */
.themetoggle .tg-k{opacity:.7}
@media (max-width:480px){
  .rtools{gap:6px}
  .langsw,.themetoggle{padding:6px 8px}
  .langsw[data-lang]{padding:4px 6px;gap:5px}
  .langsw[data-lang]::before,.langsw[data-lang]::after{width:24px;height:16px;background-size:24px 16px}
  .bar .wrap{gap:8px;padding:0 16px}
  /* no celular a marca fica só "[CS]" para caber as duas bandeiras (o nome continua no HTML) */
  .brandmark{letter-spacing:1px;font-size:0;gap:0}
  .brandmark .brk{font-size:12px}
  .brandmark .brk:first-child::after{content:"CS";margin:0 9px;font-family:var(--font-sans);font-weight:600;color:var(--ink)}
  .nav-cta{font-size:11px;padding:7px 9px}
  /* no celular não cabe a palavra: lua = tema escuro, sol = tema claro */
  .themetoggle{font-size:0;padding:5px 9px;line-height:1}
  .themetoggle::before{content:"\263E";font-size:15px;line-height:1}
  :root[data-theme="light"] .themetoggle::before{content:"\2600"}
}
h1,h2,h3,.stats .num{font-family:Georgia,'Iowan Old Style','Times New Roman',serif;font-weight:500;letter-spacing:-0.01em}
.hero h1{font-size:clamp(34px,5.2vw,56px);line-height:1.08}
.feat h3,.cta-box h2{font-family:Georgia,'Iowan Old Style','Times New Roman',serif}

:root[data-theme="dark"]{--portrait-grid:.06}
.stats .num{color:var(--accent) !important}