/* Contexto · inteligência (fase 1 da ferramenta derossi.dev). Base comum de todas as páginas.
   Design system Contexto v8: ink e ivory, cinzas g1–g4 e hair, títulos em EB Garamond SemiBold em frase normal,
   chapéus em Inter caixa alta com tracking 0,28em, wordmark `contexto`, cantos retos. A vinheta de troca de tela segue
   as vinhetas v8: fundo ink, wordmark ivory, título em Bodoni Moda e um único filete ouro.
   Cores de dados (não são cor de marca): azul para direita e vermelho para esquerda, em todas as páginas. */
:root {
  --ink: #0f0e0d; --ivory: #fafaf9; --g1: #d6d4cf; --g2: #a6a39c; --g3: #6b6862; --g4: #3a3835; --hair: #c8c5be;
  --marmore: #ede6da; --ouro: #c9964a; --bronze: #7a4a22; --ardosia: #5b6770;
  --papel: #fafaf9; --superficie: #ffffff; --tinta: #0f0e0d; --texto-2: #3a3835; --texto-3: #6b6862; --linha: #dcd9d2;
  /* dados: azul para direita, vermelho para esquerda */
  --dir: #2350b0; --dir-forte: #0f2c6e; --dir-clara: #c9d5ef; --dir-texto: #1f4596;
  --esq: #c8312f; --esq-forte: #8c1c1b; --esq-clara: #f2c6c4; --esq-texto: #a32321;
  --centro: #a6a39c; --neutro: #ece9e2; --sem: #e4e1da;
  --f-titulo: "EB Garamond", Georgia, "Times New Roman", serif;
  --f-vinheta: "Bodoni Moda", "EB Garamond", Georgia, serif;
  --f-marca: "Sora", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.7, 0, .3, 1);
  --ease-sai: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--papel); }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-texto); font-size: 16px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
img { max-width: 100%; }
a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 40; background: var(--ink); color: var(--ivory); border-bottom: 1px solid var(--g4); }
.cabecalho { max-width: 1240px; margin: 0 auto; padding: 0 16px; min-height: 64px; display: flex; align-items: center; gap: 12px 24px; }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ivory); flex: none; }
/* marca Derossi Inteligência: só o símbolo d/, no lugar da wordmark contexto */
.marca-d { height: 22px; width: auto; display: block; }
.marca-sub { font: 500 10.5px/1 var(--f-texto); letter-spacing: .28em; text-transform: uppercase; color: var(--g1); padding-left: 12px; border-left: 1px solid var(--g3); }
.nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 14px; margin-left: auto; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 64px; color: var(--g1); font: 500 13px/1 var(--f-texto); text-decoration: none; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: var(--ivory); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-sai); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ivory); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-sep { width: 1px; height: 18px; background: var(--g3); }
.topo :focus-visible { outline-color: var(--ivory); }

.menu-botao { display: none; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--ivory); cursor: pointer; }
.menu-botao span { display: block; width: 22px; height: 2px; margin: 5px auto; background: currentColor; transition: transform .35s var(--ease-sai), opacity .2s; }
.menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1160px) {
  .menu-botao { display: block; }
  .marca, .menu-botao { position: relative; z-index: 2; }
  .nav { position: fixed; z-index: 1; top: var(--altura-topo, 65px); left: 0; right: 0; bottom: 0; margin: 0; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0;
    padding: 20px 20px 40px; overflow-y: auto; background: var(--ink); clip-path: inset(0 0 100% 0); transition: clip-path .5s var(--ease); }
  .nav.aberto { clip-path: inset(0 0 0 0); }
  .nav a { min-height: 0; padding: 7px 0; font: 600 30px/1.15 var(--f-titulo); color: var(--ivory); opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease-sai), transform .4s var(--ease-sai); }
  .nav a::after { bottom: 4px; right: auto; width: 48px; }
  .nav.aberto a { opacity: 1; transform: none; }
  .nav-sep { width: 48px; height: 1px; margin: 12px 0; }
}
@media (max-width: 420px) { .marca-sub { display: none; } }

/* ---------- rodapé ---------- */
.rodape-site { background: var(--g4); color: var(--g1); border-top: 6px solid var(--ivory); margin-top: 64px; }
.rodape-in { max-width: 1180px; margin: 0 auto; padding: 28px 16px 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: end; }
.rodape-marca { display: flex; align-items: center; gap: 12px; }
.rodape-marca .marca-d { height: 32px; }
.rodape-tag { margin: 10px 0 0; font: 600 17px/1.3 var(--f-marca); color: var(--ivory); }
.rodape-fonte { margin: 10px 0 0; max-width: 640px; font-size: 13px; color: var(--g1); }
.rodape-fonte a { color: var(--ivory); }
.assinatura { display: flex; align-items: center; gap: 12px; color: var(--g1); text-decoration: none; font-size: 13px; line-height: 1.35; }
.assinatura img { width: 34px; height: auto; display: block; }
.assinatura b { display: block; color: var(--ivory); font: 600 13px var(--f-marca); }
@media (max-width: 640px) { .rodape-in { grid-template-columns: 1fr; } }

/* ---------- elementos editoriais comuns ---------- */
.chapeu, .kicker { margin: 0 0 10px; font: 500 11.5px/1.4 var(--f-texto); letter-spacing: .28em; text-transform: uppercase; color: var(--texto-3); }
.tarja { display: inline; background: var(--ink); color: var(--ivory); padding: 0 .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tarja > span { display: inline; }

/* faixa escura de abertura (o "card" da página): ink de ponta a ponta */
.faixa-ink { background: var(--ink); color: var(--ivory); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.faixa-ink .kicker, .faixa-ink .chapeu { color: var(--g1); }
.faixa-ink .lede, .faixa-ink p { color: var(--g1); }
.faixa-ink .lede b { color: var(--ivory); }
.faixa-ink .tarja { background: var(--ivory); color: var(--ink); }
.faixa-ink a { color: var(--ivory); }

/* ---------- vinheta de troca de tela ---------- */
.cortina { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; visibility: hidden; }
.cortina.ativa, .cortina.cobre { visibility: visible; pointer-events: auto; }
.cortina-fundo { position: absolute; inset: 0; background: var(--ink); clip-path: inset(100% 0 0 0); }
.cortina.cobre .cortina-fundo { clip-path: inset(0 0 0 0); }
.cortina-miolo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px; text-align: center; }
.cortina-marca { height: 44px; width: auto; display: block; opacity: 0; }
.cortina-filete { width: 140px; height: 3px; background: var(--ouro); transform: scaleX(0); }
.cortina-titulo { margin: 0; max-width: 18ch; color: var(--ivory); font: 700 clamp(30px, 6vw, 56px)/1.08 var(--f-vinheta); font-variation-settings: "opsz" 6; opacity: 0; }
.cortina.cobre .cortina-marca, .cortina.cobre .cortina-titulo { opacity: 1; }
.cortina.cobre .cortina-filete { transform: none; }

/* entrada dos blocos ao rolar e troca de conteúdo dentro da página */
.an { opacity: 0; transform: translateY(16px); }
.an.vis { animation: surgir .7s var(--ease-sai) both; }
.troca { animation: trocar .38s var(--ease-sai); }
@keyframes surgir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes trocar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .an, .an.vis { opacity: 1; transform: none; animation: none; }
  .troca { animation: none; }
  .nav, .nav a, .nav a::after, .menu-botao span { transition: none; }
  .nav a { opacity: 1; transform: none; }
}

/* ---------- botões de chamada e links do rodapé ---------- */
.nav a.nav-cta { min-height: 0; padding: 9px 14px; background: var(--ivory); color: var(--ink); font-weight: 600; }
.nav a.nav-cta::after { display: none; }
.nav a.nav-cta:hover { background: var(--g1); color: var(--ink); }
@media (max-width: 1160px) { .nav a.nav-cta { margin-top: 14px; padding: 12px 18px; font: 600 22px/1.1 var(--f-titulo); } }
.rodape-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 13px; }
.rodape-links a { color: var(--ivory); }
.botao-cta, .botao-linha { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; font: 600 15px/1 var(--f-texto); text-decoration: none; border: 1.5px solid var(--ivory); transition: background .2s, color .2s; }
.botao-cta { background: var(--ivory); color: var(--ink); }
.botao-cta:hover { background: var(--g1); border-color: var(--g1); }
.botao-linha { color: var(--ivory); background: transparent; }
.botao-linha:hover { background: var(--ivory); color: var(--ink); }
.botao-cta.escuro { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.botao-cta.escuro:hover { background: var(--g4); border-color: var(--g4); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.faixa-ink .botao-cta, .faixa-ink .botao-cta:hover { color: var(--ink); }
.faixa-ink .botao-linha:hover { color: var(--ink); }
.nav-conta { display: inline-flex; align-items: center; gap: 8px; }
.nav a.nav-entrar { min-height: 0; padding: 8px 13px; border: 1.5px solid var(--g3); color: var(--ivory); font-weight: 600; }
.nav a.nav-entrar::after { display: none; }
.nav a.nav-entrar:hover { border-color: var(--ivory); }
@media (max-width: 1160px) {
  .nav-conta { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; }
  .nav a.nav-entrar { padding: 12px 18px; font: 600 22px/1.1 var(--f-titulo); }
  .nav a.nav-cta { margin-top: 0; }
}