/* ==========================================================================
   CORE — base
   Reset, coluna, tipografia de seção e as primitivas que todo componente
   assume que existem (.wrap, .sec-pad, .eyebrow, .btn, .grain).
   Carregar SEMPRE depois de tokens.css e do tema.
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
/* Sem esta exceção, quem pediu menos movimento no sistema continuava vendo
   TODA âncora `<a href="#x">` de qualquer componente atravessar a página
   rolando — o contrato promete que `reduce` desliga tudo e o core tratava
   só o que passa pelo motion.css. Todo script que rolava por conta própria
   tinha de contornar com `behavior:'instant'`; agora o caso nativo também
   está coberto. Achado em listas/paineis-empilhados, cujo índice rola até
   o painel clicado. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--dark);
  color:#f2f0ec;
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--dark)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{text-wrap:balance;margin:0;font-weight:400}
p{margin:0}
/* `ol` junto com `ul`: a lista ordenada é a semântica certa para etapa e
   passo, e sem este reset ela chega com 40px de recuo que empurram o
   conteúdo para fora da coluna do componente. Pior num `<li>` que é
   `display:grid` — aí o Chrome trata o `::marker` como `inside` e o insere
   na grade, desalinhando o que estava alinhado. Os três componentes com
   `<ol>` (rolagem-sincronizada, agendamento-reuniao, linha-do-tempo-etapas)
   escreviam as mesmas três declarações cada um. */
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}

/* ===== O GRID =====
   Única regra que controla a coluna. Nada mais mexe em padding-inline. */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

section{background:var(--bg);position:relative}
.sec-pad{padding:var(--sec-gap) 0}

/* ===== GRÃO =====
   Ruído SVG por cima de mídia escura. Sempre em opacity baixa e
   mix-blend-mode overlay — acima disso vira textura, não grão. */
.grain{
  position:absolute;inset:0;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== OLHO / EYEBROW =====
   Rótulo curto acima do título da seção. O traço à esquerda é a assinatura. */
.eyebrow{
  font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-muted);
  display:inline-flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)}

/* ===== TÍTULO DE SEÇÃO =====
   Display geométrica em corpo grande precisa de tracking negativo, senão
   engorda. O <em> é o realce em itálico na cor de marca. */
h2.sec-title{
  font-family:var(--display);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(26px,3.4vw,40px);line-height:1.2;
  max-width:22ch;color:var(--fg);margin-top:16px;
}
h2.sec-title em{font-style:italic;font-weight:700;letter-spacing:-.01em;color:var(--accent)}
.sec-lead{font-size:var(--fs-body);line-height:1.6;color:var(--fg-2);max-width:60ch;margin-top:18px}

/* ===== BOTÕES =====
   Pílula, caixa alta, tracking largo. Sem magnetismo e sem deslocamento:
   no hover o miolo esvazia em vidro, o botão não salta nem move o layout. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
  border-radius:var(--radius-pill);padding:15px 32px;
  border:1px solid transparent;cursor:pointer;
  /* O <button> nativo pinta o cromo do sistema por baixo, e `color-scheme:
     only light` (tokens.css) o torna CINZA-CLARO em toda parte. Sem estas
     duas linhas, `<button class="btn btn-ghost">` fica com fundo #f0f0f0 sob
     texto --fg quase branco: contraste 1.0, texto invisível. Medido no
     conversao/diagnostico-perfil, que já estava assim no catálogo.
     `<a class="btn">` nunca sofreu — âncora não tem cromo nativo —, e por
     isso o bug passou despercebido: quase todo uso da primitiva é âncora.
     .btn-primary vem depois e continua pintando o próprio fundo. */
  background:none;-webkit-appearance:none;appearance:none;
  transition:background .35s,color .35s,border-color .35s,backdrop-filter .35s;
}
.btn-primary{background:var(--accent);color:var(--dark);border-color:var(--accent)}
.btn-primary:hover{
  background:rgba(255,255,255,.05);color:var(--accent);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.btn-ghost{border-color:var(--rule-2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn svg{transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}

/* ===== CAMPO DE FORMULÁRIO =====
   Rótulo em caixa alta sobre um controle sem caixa, e uma régua embaixo que
   acende na cor de marca quando o campo recebe foco. Era a mesma receita, a
   mesma linha de `border-bottom` e o mesmo rótulo de 10.5px em três
   componentes de conversão — cta-formulario-lead, select-custom e
   agendamento-reuniao — antes de virar primitiva.

   A régua NÃO substitui o anel de foco: o `outline` do `:focus-visible`
   continua de pé no controle, porque um filete de 1px sozinho é indicador
   fraco demais para quem navega por teclado. As duas coisas convivem.

   `label` e `input` como elemento descendente seguem o precedente do
   `.btn svg` logo acima: presos à classe do core, não vazam. */
.field{
  display:block;
  border-bottom:1px solid var(--rule-2);
  padding:16px 0 12px;
  transition:border-color .25s var(--ease);
}
.field:focus-within{border-color:var(--accent)}
.field label{
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);margin-bottom:8px;
}
/* Sem `outline:none` aqui, e isso foi medido: `.field input` vale (0,1,1) e
   venceria o `::focus-visible` do core, que vale (0,1,0) — o anel de foco
   morreria em TODO campo que vestisse a primitiva. O `border:none` já tira a
   caixa do controle, que é o que se queria; o anel é outra coisa e fica.
   Dois dos três componentes que originaram esta receita zeravam o anel
   localmente, e é dessa cópia que o erro quase entrou no core. */
.field input,
.field textarea{
  width:100%;background:none;border:none;padding:0;
  font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.4;
  color:var(--fg);
}
.field input::placeholder,
.field textarea::placeholder{color:var(--fg-muted);opacity:.7}
@media(prefers-reduced-motion:reduce){.field{transition-duration:0s}}

/* ===== CASCA DO <dialog> =====
   O que os quatro componentes com <dialog> escreviam igual: zerar a caixa que
   o navegador dá de graça (padding, borda, fundo, os limites de 'max-content')
   e o véu do ::backdrop.

   O que NÃO está aqui, de propósito: o `display` de `[open]` e a coreografia
   de entrada. Os quatro são diferentes e têm de ser — o showreel CRESCE do
   lugar da capa, o drawer DESLIZA da direita, o modal CENTRA e o painel de
   cookies SOBE. Primitiva que impusesse forma teria de ser desobedecida por
   três deles.

   Não zera `padding` cegamente: quem usa o <dialog> como palco de tela cheia
   (o modal) declara o próprio padding e ele fica. Por isso o padding entra
   como custom property com default 0, e não como valor cravado. */
.dialog-casca{
  padding:var(--dialog-pad,0);
  border:0;
  background:transparent;
  max-width:none;
  max-height:none;
  overflow:visible;
}
/* Sem `color:inherit` aqui, e isso custou uma medição para aparecer: ele vale
   (0,1,0), o mesmo que `.sec-deep{color:var(--fg)}`, e o base.css carrega
   depois — então venceria o escopo de tom declarado no markup do próprio
   diálogo, que é a exceção nomeada do §3 e é justamente o que estes
   componentes usam. Medido com a página em `.sec-light` e o diálogo em
   `.sec-deep`: com `color:inherit`, o diálogo computava rgb(20,20,20), a
   tinta da PÁGINA. Sem ele, o `color:CanvasText` do navegador é regra de
   agente do usuário e perde para qualquer escopo de autor — que é o
   comportamento certo. */

/* Duas declarações de propósito: o `::backdrop` não herdava custom property
   até o Chrome 121, e ali `var(--veil)` seria inválido e a declaração cairia.
   A primeira linha é o mesmo véu escrito sem variável de escopo, e é o que
   sobra nesses navegadores. Quem tirar a de cima reabre o buraco. */
.dialog-casca::backdrop{
  background:rgba(10,10,10,.78);
  background:var(--veil);
  backdrop-filter:blur(var(--dialog-blur,6px));
  -webkit-backdrop-filter:blur(var(--dialog-blur,6px));
}

/* ===== VIDRO =====
   Superfície de card sobre fundo escuro: borda tênue, brilho radial vindo do
   canto superior esquerdo e desfoque do que está atrás. Cinco componentes
   pediam exatamente isto (entidades, baralho, formulário, equipe em destaque
   e cards de equipe), então virou primitiva em vez de ser recopiada.

   Uso:  <div class="glass meu-card">
   Ajuste por variável local, sem tocar na regra:
     --glass-bg      opacidade do corpo
     --glass-line    cor da borda
     --glass-blur    intensidade do desfoque
   O @supports evita um card translúcido e ilegível onde backdrop-filter não
   existe: sem suporte, sobra só o fundo sólido. */
.glass{
  --glass-bg:rgba(255,255,255,.05);
  --glass-line:rgba(255,255,255,.13);
  --glass-blur:22px;
  border:1px solid var(--glass-line);
  background:
    radial-gradient(130% 110% at 16% -10%,rgba(255,255,255,.09),transparent 58%),
    var(--glass-bg);
  transition:border-color .45s,background .45s;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .glass{
    backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  }
}
/* Realce opcional no hover — só onde o card é clicável ou navegável. */
.glass-hover:hover{
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:
    radial-gradient(130% 110% at 16% -10%,rgba(255,255,255,.13),transparent 58%),
    rgba(255,255,255,.07);
}

/* ==========================================================================
   .visually-hidden — texto que só o leitor de tela recebe
   Fora da tela, mas dentro da árvore de acessibilidade. Sexta aparição da
   mesma receita quando foi promovida — estava em conversao/calculadora-projecao,
   dados/comparador-cenarios, dados/painel-patrimonio, midia/carrossel-anel-3d,
   conversao/simulador-carteira e midia/galeria-pasta —, muito além do gatilho
   de três do §6.

   DOIS USOS, e os dois são legítimos:
     1. região viva (aria-live) que anuncia uma troca sem ocupar espaço;
     2. o <input type="radio"> ou "checkbox" real por baixo de um <label>
        estilizado — escondido para o olho, intacto para o teclado e para o
        leitor de tela.

   POR QUE clip-path e não display:none nem visibility:hidden: as duas últimas
   tiram o elemento da árvore de acessibilidade, e aí o anúncio nunca sai e o
   campo deixa de ser focável — que é exatamente o contrário do que se quer.
   O tamanho de 1px com margin negativa é o que impede a caixa de gerar
   rolagem no ancestral.

   NÃO cobre o caso de alternar entre escondido e visível (um botão que só
   aparece num estado). Ali a regra tem de devolver position, width, height e
   clip-path ao normal, e misturar isso na primitiva a transformaria em duas
   coisas. É o caso do .fold-close do midia/galeria-pasta, que segue local.
   ========================================================================== */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;
  clip-path:inset(50%);
}

/* ==========================================================================
   .btn-disc — o disco de ícone
   Botão redondo de contorno, com um ícone dentro e nenhum texto: seta de
   carrossel, avançar, voltar. Quinta aparição da MESMA regra — estava
   copiada ao caractere em midia/galeria-scroll-horizontal, midia/carrossel-anel-3d,
   midia/carrossel-foco-central, midia/pilha-swipe e midia/roda-de-cards —,
   e o §6 do contrato manda promover na terceira.

   Não é .btn, e a diferença não é de tamanho: .btn é pílula de TEXTO, com
   padding horizontal fixo e tracking de caixa alta. Espremer 42px nela seria
   brigar com a primitiva em vez de usá-la.

   Não cobre dois vizinhos parecidos, de propósito: o disco SÓLIDO sobre foto
   (.stage-arrow do hero/duas-colunas-produto, que é fundo claro com
   backdrop-filter para sobreviver a qualquer imagem por baixo) e o botão de
   fechar de sobreposição (.exp-close do overlay/card-expansivel-fullscreen,
   que se apoia no .glass e entra em cena com a caixa). Os dois têm outro
   papel; juntá-los aqui viraria uma primitiva com três modos.

   Um parafuso:
     --disc-size    lado do disco. 42px no padrão.

   DUAS FORMAS DE DESABILITAR, e a segunda é a recomendada em carrossel:
   `disabled` tira o botão da ordem de tabulação no exato momento em que ele
   está com o foco — quem chegou de teclado à última seta é jogado para o
   <body>, fora da dobra. `aria-disabled="true"` apaga igual, mantém o foco
   onde está, e o script ignora o clique. As duas leem a mesma regra aqui.
   ========================================================================== */
.btn-disc{
  --disc-size:42px;
  flex:0 0 var(--disc-size);
  width:var(--disc-size);height:var(--disc-size);padding:0;
  display:grid;place-items:center;
  background:none;color:var(--fg-2);
  border:1px solid var(--rule-2);border-radius:var(--radius-pill);
  transition:color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease);
}
.btn-disc:hover{color:var(--accent);border-color:var(--accent)}
/* Na ponta da fila o botão APAGA em vez de sumir: um par que vira ímpar
   move a fileira inteira e o outro botão dança para o lado. */
.btn-disc:disabled,
.btn-disc[aria-disabled="true"]{
  opacity:.34;cursor:default;color:var(--fg-muted);border-color:var(--rule);
}
.btn-disc:disabled:hover,
.btn-disc[aria-disabled="true"]:hover{color:var(--fg-muted);border-color:var(--rule)}

/* ==========================================================================
   .sec-head — cabeçalho de dobra centralizado
   Olho, título e apoio empilhados e centrados, numa largura menor que a
   coluna. Promovido ao core depois de aparecer em quatro componentes
   (grid-equipe, diagrama-hub, acordeao-faq, baralho-sticky) com a mesma
   declaração e só o max-width variando — exatamente o caso do §6 do
   contrato. A largura é o único ajuste, e vem por variável local.
   ========================================================================== */
.sec-head{
  --head-max:760px;
  text-align:center;
  max-width:var(--head-max);
  margin-inline:auto;
}

/* ==========================================================================
   .display-xl — o título display gigante
   Terceira aparição da mesma regra (conteudo/apresentacao-foto-alternada,
   midia/carrossel-perfis e conteudo/manifesto-com-imagens escreviam as seis
   linhas idênticas), que é exatamente o gatilho do §6 do contrato. As duas
   primeiras fichas já registravam por escrito: "no terceiro, promova ao core".

   Não confundir com h2.sec-title: aquele é o RÓTULO de uma dobra (26–40px,
   22ch de largura); este é a peça gráfica da dobra, com corpo que enche a
   coluna.

   CAIXA BAIXA, e isso é decisão de projeto: título vai em caixa baixa, e a
   caixa alta fica reservada para texto que é EFEITO — a faixa de marca do
   rodapé cortina e a do carrossel de perfis, as duas acima de 130px. Título
   em caixa alta grita e perde a leitura de nome próprio ("Quem somos" tem
   maiúscula onde importa).

   A entrelinha acompanhou: era .82, que só fecha em caixa alta, onde não há
   ascendente nem descendente para colidir. Em caixa baixa .82 sobrepõe o "q"
   de uma linha no "S" da seguinte. O padrão agora é .95.

   Dois parafusos, e nenhuma regra a sobrescrever:
     --display-xl      corpo da letra
     --display-xl-lh   entrelinha — .95 para título de uma ou duas palavras,
                       perto de 1.2 para frase de várias linhas

   Os dois entram como FALLBACK dentro do var(), e não como declaração na
   própria regra. A diferença não é de estilo: declarados aqui, eles seriam
   escritos no mesmo elemento e venceriam o valor que o componente põe no
   ancestral — o parafuso pareceria não funcionar. Mesma forma do --pil-pos
   do conteudo/pilares-texto-na-foto.

   O corpo é sempre calibrado pela FRAÇÃO DA COLUNA que a linha ocupa, não
   pelo número: display condensada e display de largura normal precisam de
   corpos diferentes para desenhar a mesma mancha.
   ========================================================================== */
.display-xl{
  font-family:var(--display);font-weight:700;
  font-size:var(--display-xl,clamp(46px,6vw,104px));
  line-height:var(--display-xl-lh,.95);
  /* Corpo grande engorda: sem tracking negativo as palavras colam uma na
     outra. */
  letter-spacing:-.02em;
  color:var(--fg);
  /* O reset acima dá text-wrap:balance a todo h1..h4. Onde a quebra é
     decidida no markup com <br>, balancear por cima reintroduz a quebra
     automática que o <br> existe para evitar. */
  text-wrap:initial;
}

/* ==========================================================================
   .pill — rótulo pequeno em pílula de contorno
   Classifica um card sem pesar: etapa, cargo, categoria, status. Nasce
   herdando a cor do texto de apoio; quem quiser destaque põe .pill-accent.
   Promovida antes da terceira cópia, como manda o §6.
   ========================================================================== */
.pill{
  display:inline-block;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-muted);
  border:1px solid var(--rule-2);
  border-radius:var(--radius-pill);
  padding:5px 12px;
}
.pill-accent{color:var(--accent)}