/* patrium — site institucional
   Identidade conforme patrium_brandbook_v1 (v1.0, julho 2026).
   Regras duras do brand book respeitadas aqui:
   · Azul Patrium nunca divide cena com outra cor saturada
   · Sem degradê entre matizes
   · FLAT SEMPRE: bordas de 1px no lugar de sombras
   · Wordmark sempre minúsculo, tracking -2,5%, nunca em caixa-alta
   · Space Grotesk só nos pesos 400/500; Inter para todo o resto      */

:root{
  --azul:#2038E8;      /* Azul Patrium — símbolo, CTAs, links, destaque */
  --azul-d:#1226A8;    /* Azul Profundo — hover, superfícies azuis      */
  --azul-l:#5A6BF0;    /* Azul Claro — sobre Tinta Noite               */
  --ink:#0D1240;       /* Tinta Noite — textos, títulos. O "preto"      */
  --gelo:#EEF0FA;      /* wash de blocos, tags, fundos secundários      */
  --papel:#FAFAF8;     /* fundo padrão                                 */
  --card:#FFFFFF;      /* cards, com borda 1px                         */
  --hair:#E5E6EC;      /* linha                                        */
  --gray:#7A7E8F;      /* texto secundário                             */
  --ok:#1FA463; --err:#D64545;
  --env:min(1080px, calc(100% - 3rem));
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --azul:#5A6BF0;    /* sobre Tinta Noite, a marca vira azul-claro   */
    --azul-d:#8A97F5;
    --ink:#EEF0FA; --papel:#0D1240; --card:#141A46;
    --gelo:#1A2158; --hair:#26306B; --gray:#9BA3C4;
  }
}
:root[data-theme="dark"]{
  --azul:#5A6BF0; --azul-d:#8A97F5;
  --ink:#EEF0FA; --papel:#0D1240; --card:#141A46;
  --gelo:#1A2158; --hair:#26306B; --gray:#9BA3C4;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0; background:var(--papel); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}

.env{width:var(--env); margin-inline:auto}
a{color:var(--azul); text-underline-offset:2px}
a:hover{color:var(--azul-d)}

/* Display em Space Grotesk 400 · wordmark em 500. Nunca acima de 500. */
h1,h2,h3{font-family:'Space Grotesk','Inter',sans-serif; font-weight:400; letter-spacing:-.025em; line-height:1.15; margin:0; color:var(--ink)}
h1{font-size:clamp(34px,3.6vw,52px); line-height:1.06}
h2{font-size:clamp(23px,1.7vw,30px)}
h3{font-size:17px; font-weight:500; letter-spacing:-.02em}
p{margin:0}

/* ---------- marca ---------- */
.marca{display:inline-flex; align-items:center; gap:15px; text-decoration:none}
.marca .simbolo{width:30px; height:30px; flex:none; display:block}
.marca .nome{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:500;
  font-size:23px; letter-spacing:-.025em; color:var(--ink); text-transform:lowercase;
}

/* ---------- topo ---------- */
header{background:var(--card); border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:10}
.barra{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:15px 0}
nav{display:flex; gap:24px}
nav a{color:var(--gray); text-decoration:none; font-size:14.5px; transition:color .18s ease}
nav a:hover{color:var(--azul)}
@media (max-width:620px){ nav{gap:15px} nav a{font-size:13.5px} .marca .nome{font-size:20px} }

/* ---------- capa ---------- */
.capa{background:var(--card); border-bottom:1px solid var(--hair)}
.capa .env{padding:clamp(52px,7vw,88px) 0 clamp(42px,5vw,66px)}
.tag{
  display:inline-block; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--azul); background:var(--gelo); border:1px solid var(--hair);
  padding:5px 12px; border-radius:999px; margin-bottom:22px;
}
.chamada{margin-top:18px; font-size:clamp(17px,1.1vw,19px); color:var(--gray); max-width:60ch}

/* ---------- seções ---------- */
section{padding:clamp(42px,5vw,66px) 0}
section.clara{background:var(--card); border-block:1px solid var(--hair)}
.intro{max-width:66ch; color:var(--gray); margin-top:12px}

.grade{display:grid; gap:14px; margin-top:32px; grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.cartao{
  background:var(--card); border:1px solid var(--hair); border-radius:12px; padding:22px;
  transition:border-color .18s ease;            /* flat: nada de sombra */
}
.cartao:hover{border-color:var(--azul)}
.cartao h3{margin-bottom:7px; color:var(--ink)}
.cartao p{color:var(--gray); font-size:15px; line-height:1.6}

/* ---------- dados ---------- */
dl.dados{display:grid; grid-template-columns:auto 1fr; gap:10px 28px; margin:26px 0 0; font-size:15.5px}
dl.dados dt{color:var(--gray); font-weight:400}
dl.dados dd{margin:0; color:var(--ink)}
@media (max-width:560px){ dl.dados{grid-template-columns:1fr; gap:2px} dl.dados dd{margin-bottom:14px} }

/* ---------- documento longo ---------- */
.doc{width:min(760px, calc(100% - 3rem)); margin-inline:auto; padding:clamp(42px,5vw,62px) 0 76px}
.doc h2{font-size:22px; margin:44px 0 10px}
.doc h3{margin:24px 0 6px}
.doc p,.doc li{color:var(--gray)}
.doc p{margin:13px 0}
.doc ul{padding-left:20px; margin:11px 0}
.doc li{margin:5px 0}
.doc strong{color:var(--ink); font-weight:600}
.vigencia{color:var(--gray); font-size:14.5px; margin-top:12px}

table{width:100%; border-collapse:collapse; margin:16px 0; font-size:15px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--hair); vertical-align:top}
th{color:var(--ink); font-weight:600; font-size:13.5px; background:var(--gelo)}
td{color:var(--gray)}

.aviso{background:var(--gelo); border:1px solid var(--hair); border-left:3px solid var(--azul);
  border-radius:12px; padding:18px 20px; margin:32px 0; font-size:15px; color:var(--ink)}

.preencher{background:var(--gelo); color:var(--azul-d); border:1px dashed var(--azul);
  padding:1px 7px; border-radius:6px; font-weight:500; font-size:.93em}

/* ---------- rodapé ---------- */
footer{background:var(--card); border-top:1px solid var(--hair); padding:34px 0 46px; color:var(--gray); font-size:14.5px}
footer .linhas{display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:center}
footer a{color:var(--gray); text-decoration:none}
footer a:hover{color:var(--azul)}
footer .assinatura{color:var(--gray)}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} html{scroll-behavior:auto} }