/* =========================================================================
   Cia de Agentes — Identidade Registro
   base.css · v2.1 · reset + componentes canônicos com estados
   -------------------------------------------------------------------------
   Depende de tokens.css. Carregar nesta ordem:
     <link rel="stylesheet" href="/branding/assets/css/tokens.css">
     <link rel="stylesheet" href="/branding/assets/css/base.css">

   REGRA CENTRAL — INTERAÇÃO
   Rosa profundo (--link) significa uma coisa só: isto responde ao clique.
   Tudo que clica nasce VAZADO (texto e filete em --link, fundo transparente)
   e INVERTE no hover (fundo --link, texto --on-link) — a cor NÃO muda.
   Exceção única: link em texto, que não tem fundo para inverter e por isso
   clareia para --link-hover. Verde-selo é destaque e nunca veste um clique.
   Hierarquia se faz com filete, altura e posição — nunca com preenchimento.
   Únicas peças preenchidas em repouso: a aba ativa e o item de nav atual,
   porque indicam ONDE VOCÊ ESTÁ, não "clicável".
   Nenhum hex literal abaixo desta linha.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-16);line-height:var(--lh-text);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

/* ---- Foco: uma regra, todo o site. Nunca remover. --------------------- */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
:focus:not(:focus-visible){outline:none}

/* ---- Tipografia ------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:var(--lh-tight);letter-spacing:.002em;text-wrap:pretty}
h1{font-size:var(--t-38)}
h2{font-size:var(--t-28)}
h3{font-size:var(--t-22)}
h4{font-size:var(--t-18)}
/* Classes usadas como título no site herdam Fraunces (universal — antes repetido
   inline em toda página como <style id="registro-type">). CDA-1220. */
.hero-title,.sol-title,.sec-title,.const-heading,.cta-text,.closing-main,.dash-intro-title{font-family:var(--f-display);font-weight:600;letter-spacing:.002em}
p,li{text-wrap:pretty;max-width:72ch}
strong,b{font-weight:600;color:var(--ink)}
code,kbd,samp{font-family:var(--f-mono);font-size:.86em;background:var(--paper-tile);padding:1px 5px;border-radius:var(--r-sm)}
small{font-size:var(--t-12)}

/* Link em texto: única peça que CLAREIA no hover (--link-hover).
   Todo o resto inverte fg/bg no próprio --link. */
a {
  color: var(--link);text-decoration:none;
  padding:1px 2px;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
a:hover { color: var(--link-hover); }

/* O NOME DA EMPRESA. Nunca em serif. Nunca sem esta classe. */
.wordmark{
  font-family:var(--f-body);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--track-wordmark);
  font-size:var(--t-18);line-height:1.1;color:currentColor;
}

/* Rótulo de seção / cláusula / protocolo. Em TINTA — verde-selo é só clique. */
.rotulo{
  font-family:var(--f-mono);font-size:var(--t-11);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--track-label);color:var(--ink-weak);
}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- Layout ----------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--wrap-pad);width:100%}
.pilha{display:flex;flex-direction:column;gap:var(--s-4)}
.linha{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.grade{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* ---- Marca: lockup, área de proteção, tamanho mínimo ------------------ */
/* Não usar padding em %: porcentagem resolve contra a largura do bloco
   contêiner, não do próprio elemento. Declare --simbolo e derive dele. */
.lockup{display:inline-flex;align-items:center;gap:calc(var(--simbolo,2.4em) * .25)}
.lockup img,.lockup svg{width:var(--simbolo,2.4em);height:var(--simbolo,2.4em);flex-shrink:0;display:block}

.marca-isolada{                       /* peça sozinha: folga 0,50×        */
  --simbolo:64px;
  width:calc(var(--simbolo) * 2);height:calc(var(--simbolo) * 2);
  display:grid;place-items:center;
}
.marca-moldura{                       /* ícone/avatar: folga 0,04×        */
  --simbolo:64px;
  width:calc(var(--simbolo) / .92);height:calc(var(--simbolo) / .92);
  display:grid;place-items:center;
}
.marca-isolada > *,.marca-moldura > *{width:var(--simbolo);height:var(--simbolo)}
/* Piso: 24px em tela, 8mm impresso. Reforço de traço: 10 acima de 48px,
   14 entre 32 e 48, 20 abaixo de 32. Sob 24px, só wordmark. */

/* ---- Botão — vazado em repouso, invertido no hover ------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--hit);padding:0 var(--s-5);
  font-family:var(--f-body);font-size:var(--t-14);font-weight:500;
  border:1.5px solid var(--link);border-radius:var(--r-md);
  background:transparent;color:var(--link);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:hover{background:var(--link);border-color:var(--link);color:var(--on-link)}
.btn--principal{border-width:2px;min-height:52px;padding-inline:26px;font-size:var(--t-16)}
.btn[aria-disabled="true"],.btn:disabled{
  border-color:var(--rule);color:var(--ink-weak);background:transparent;cursor:not-allowed;
}
.btn[aria-disabled="true"]:hover,.btn:disabled:hover{background:transparent;color:var(--ink-weak)}

/* ---- Chip / pill — um só componente, não recriar por página ---------- */
.chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-mono);font-size:var(--t-12);
  color:var(--link);background:transparent;
  border:1.5px solid var(--link);border-radius:var(--r-pill);
  padding:8px 15px;text-decoration:none;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.chip:hover{background:var(--link);border-color:var(--link);color:var(--on-link)}
.chip[aria-current="true"] { background: transparent; border-color: var(--link); color: var(--ink); font-weight: 600; }

/* ---- Card / painel / tile ------------------------------------------- */
.card{background:var(--paper-up);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--s-5)}
.card--link{transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card--link:hover{border-color:var(--link);box-shadow:var(--e-2)}
.painel{background:var(--paper-up);border:1px solid var(--rule);border-radius:var(--r-xl);padding:var(--s-4);box-shadow:var(--e-2)}
.tile{background:var(--paper-tile);border-radius:var(--r-lg);padding:var(--s-4)}

/* ---- Nota / aviso --------------------------------------------------- */
.nota{
  background:var(--paper-up);border:1px solid var(--rule);
  border-left:3px solid var(--ink);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--s-3) var(--s-4);font-size:var(--t-14);color:var(--ink-soft);
}
.nota--dado{border-left-color:var(--g2)}   /* nota de leitura de dado */
.nota--alerta{border-left-color:var(--alerta)}
.nota--erro{border-left-color:var(--erro)}

/* ---- Campo de formulário ------------------------------------------- */
.campo{display:flex;flex-direction:column;gap:6px}
.campo > label{font-size:var(--t-12);font-weight:500;color:var(--ink-soft)}
.input{
  min-height:var(--hit);width:100%;
  padding:0 var(--s-3);font-family:var(--f-body);font-size:var(--t-14);color:var(--ink);
  background:var(--paper-up);border:1px solid var(--rule);border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease);
}
textarea.input{padding-block:var(--s-3);min-height:96px;line-height:var(--lh-normal)}
.input::placeholder{color:var(--ink-weak)}
.input:hover{border-color:var(--ink-weak)}
.input:focus-visible{border-color:var(--link);outline:2px solid var(--focus);outline-offset:1px}
.input:disabled{background:var(--paper-tile);color:var(--ink-weak);cursor:not-allowed}
.input[aria-invalid="true"]{border-color:var(--erro)}
.campo .erro{font-size:var(--t-12);color:var(--erro)}

/* ---- Pulldown — caixa de campo, seta verde ---------------------------- */
/* A seta é o único verde em repouso: marca que a caixa clica.            */
.pulldown{
  min-height:var(--hit);width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:0 var(--s-3);font-family:var(--f-body);font-size:var(--t-14);color:var(--ink);
  background:var(--paper-up);border:1.5px solid var(--rule);border-radius:var(--r-md);
  cursor:pointer;transition:border-color var(--dur) var(--ease);
}
.pulldown::after{content:"▼";color:var(--link);font-size:11px;line-height:1}
.pulldown:hover{border-color:var(--link)}
.pulldown:focus-visible,.pulldown[aria-expanded="true"]{border-color:var(--link)}
.pulldown:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.pulldown[aria-expanded="true"]::after{content:"▲"}
.pulldown[aria-disabled="true"]{
  background:var(--paper-tile);border-width:1px;color:var(--ink-weak);cursor:not-allowed;
}
.pulldown[aria-disabled="true"]::after{color:var(--ink-faint)}
.pulldown[aria-disabled="true"]:hover{border-color:var(--rule)}

.menu{
  background:var(--paper-up);border:1px solid var(--rule);border-radius:var(--r-md);
  box-shadow:var(--e-2);padding:4px;display:flex;flex-direction:column;
}
.menu__item{
  min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:0 10px;font-size:var(--t-14);color:var(--ink);border-radius:var(--r-sm);cursor:pointer;
}
.menu__item:hover{background:var(--paper-tile)}          /* hover é superfície */
.menu__item[aria-selected="true"]{background:var(--paper-tile)}
.menu__item[aria-selected="true"]::after{content:"✓";color:var(--link);font-weight:600}
.menu__item[aria-disabled="true"]{color:var(--ink-weak);cursor:not-allowed;background:none}

/* ---- Radio e caixa de seleção ---------------------------------------- */
/* Linha inteira é alvo de 44px. Marcado = verde; rótulo sempre em tinta. */
.opcao{
  min-height:var(--hit);display:flex;align-items:center;gap:10px;
  font-size:var(--t-14);color:var(--ink);cursor:pointer;
}
.opcao input{position:absolute;opacity:0;width:0;height:0}
.opcao__marca{
  width:20px;height:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-up);border:1.5px solid var(--rule);
  color:transparent;font-size:12px;line-height:1;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.opcao--radio .opcao__marca{border-radius:50%}
.opcao--check .opcao__marca{border-radius:5px}
.opcao:hover .opcao__marca{border-color:var(--ink-weak)}
.opcao input:checked ~ .opcao__marca{border-color:var(--link)}
.opcao--radio input:checked ~ .opcao__marca{
  border-width:2px;
  background:radial-gradient(circle,var(--link) 0 5px,transparent 5px);
}
.opcao--check input:checked ~ .opcao__marca{background:var(--link);color:var(--on-link)}
.opcao input:focus-visible ~ .opcao__marca{outline:2px solid var(--focus);outline-offset:2px}
.opcao input:disabled ~ .opcao__marca{background:var(--paper-tile);border-color:var(--rule)}
.opcao:has(input:disabled){color:var(--ink-weak);cursor:not-allowed}

/* ---- Tabela -------------------------------------------------------- */
.tabela{width:100%;border-collapse:collapse;font-size:var(--t-14);background:var(--paper-up);border:1px solid var(--rule)}
.tabela th{
  font-family:var(--f-mono);font-size:var(--t-11);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-weak);
  text-align:left;padding:var(--s-3);border-bottom:1px solid var(--rule);
}
.tabela td{padding:var(--s-3);border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-soft)}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr:hover td{background:var(--paper-tile)}
.tabela td.n,.tabela th.n{text-align:right;font-variant-numeric:tabular-nums}
.tabela .total td{background:var(--paper-tile);color:var(--ink);font-weight:600;border-top:2px solid var(--ink)}

/* ---- Status — NÃO é clicável, então NÃO tem forma de botão ---------- */
/* Ponto colorido + texto em mono. Sem fundo, sem borda, sem cantos.     */
.status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:var(--t-11);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-weak);flex-shrink:0}
.status--ok::before{background:var(--ok)}
.status--alerta::before{background:var(--alerta)}
.status--erro::before{background:var(--erro)}
/* Se o status FILTRA algo, ele clica — então é .chip, não .status.      */

/* ---- Navegação ----------------------------------------------------- */
.nav{display:flex;align-items:center;gap:var(--s-1);flex-wrap:wrap;border-bottom:1px solid var(--rule)}
.nav a{
  font-size:var(--t-14);font-weight:500;color:var(--link);
  text-decoration:none;border:1px solid transparent;border-bottom:0;
  padding:9px 14px;border-radius:var(--r-md) var(--r-md) 0 0;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav a:hover{background:var(--link);border-color:var(--link);color:var(--on-link)}
.nav a[aria-current="page"] { background: transparent; color: var(--ink); font-weight: 600; }

/* ---- Popup de canais (o CTA "Fale conosco") ------------------------ */
.canais{
  width:340px;max-width:100%;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--e-3);padding:var(--s-2);
  display:flex;flex-direction:column;gap:5px;
}
.canais a{
  display:flex;align-items:center;gap:11px;min-height:46px;padding:8px 12px;
  border:1.5px solid var(--link);border-radius:var(--r-md);
  background:transparent;color:var(--link);text-decoration:none;
  font-family:var(--f-body);font-size:var(--t-14);font-weight:500;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.canais a:hover{background:var(--link);border-color:var(--link);color:var(--on-link)}
.canais a .porque{margin-left:auto;font-family:var(--f-mono);font-size:var(--t-11);opacity:.7}

/* ---- Gráficos ------------------------------------------------------ */
.trilho{height:12px;border-radius:6px;background:var(--paper-tile);overflow:hidden}
.trilho > i{display:block;height:100%;border-radius:6px;background:var(--g1)}
/* Rosca: máscara radial. NUNCA ::after absoluto — o furo escapa do pai. */
.rosca{
  width:110px;height:110px;border-radius:50%;
  background:conic-gradient(var(--g1) 0 var(--fatia, 72%),var(--paper-tile) var(--fatia, 72%) 100%);
  -webkit-mask:radial-gradient(circle,transparent 0 34px,#000 34px);
          mask:radial-gradient(circle,transparent 0 34px,#000 34px);
}

/* ---- Pular para o conteúdo ----------------------------------------- */
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--s-4);top:var(--s-4);z-index:99;background:var(--link);color:var(--on-link);padding:var(--s-3) var(--s-4);border-radius:var(--r-md)}

/* =========================================================================
   Papel de parede — pontos passeando
   -------------------------------------------------------------------------
   Nós da constelação soltos, à deriva lenta. Duas camadas de pontos em
   tinta com densidades e velocidades diferentes, que se cruzam sem nunca
   formar padrão evidente. Só CSS: nada de canvas nem de JS.

     <body class="papel-pontos">

   O movimento para por completo em prefers-reduced-motion e na impressão.
   ========================================================================= */

.papel-pontos { position: relative; }

.papel-pontos::before,
.papel-pontos::after {
  content: ""; position: fixed; inset: -40%; z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
}

/* Camada 1 — pontos maiores, deriva para a direita, 90s */
.papel-pontos::before {
  background-image:
    radial-gradient(circle, var(--ink) 1.7px, transparent 1.8px),
    radial-gradient(circle, var(--selo) 1.7px, transparent 1.8px);
  background-size: 210px 240px, 630px 720px;
  background-position: 0 0, 90px 130px;
  opacity: .13;
  animation: pontos-deriva-a 90s linear infinite;
}

/* Camada 2 — pontos miúdos, deriva contrária, 140s: o cruzamento é o efeito */
.papel-pontos::after {
  background-image: radial-gradient(circle, var(--ink) 1.1px, transparent 1.2px);
  background-size: 145px 165px;
  background-position: 40px 70px;
  opacity: .10;
  animation: pontos-deriva-b 140s linear infinite;
}

@keyframes pontos-deriva-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(210px, 240px, 0); }
}
@keyframes pontos-deriva-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-145px, 165px, 0); }
}

/* O conteúdo sobe acima da textura. */
.papel-pontos > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .papel-pontos::before, .papel-pontos::after { animation: none; }
}
@media print { .papel-pontos::before, .papel-pontos::after { display: none; } }
@media (max-width: 640px) {
  .papel-pontos::before { background-size: 170px 190px, 510px 570px; }
  .papel-pontos::after { background-size: 120px 135px; }
}