/* =========================================================
   inteligencIA Cruz — folha de estilo única
   Tokens derivados do Guia de Marca (versão Light).
   Nenhuma cor fora das 4 oficiais: os neutros extras são
   o próprio #0F0F0F em opacidade.
   ========================================================= */

:root{
  /* --- cor --- */
  --branco:  #FFFFFF;
  --tinta:   #0F0F0F;
  --azul:    #2563EB;
  --cinza:   #6B6B6B;
  --regua:   rgba(15,15,15,.12);
  --regua-f: rgba(15,15,15,.07);
  --papel:   #F5F5F5;

  /* --- tipografia --- */
  --display: "Playfair Display", Georgia, serif;
  /* Playfair entrega algarismos oldstyle por padrão. Em número
     que serve de prova, isso lê como enfeite — forçamos lining. */
  --corpo:   "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* --- ritmo --- */
  --gut:     clamp(1.25rem, 4vw, 2.5rem);
  --max:     1180px;
  --sec-y:   clamp(4.5rem, 9vw, 8.5rem);
  --ease:    cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset curto ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; font-weight:400; }
p,ul,dl{ margin:0; }
ul{ list-style:none; padding:0; }
a{ color:inherit; }

/* ---------- acessibilidade ---------- */
.skip{
  position:absolute; top:0; left:0; z-index:100;
  background:var(--azul); color:#fff; padding:.75rem 1.25rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  clip-path:inset(50%); white-space:nowrap;
}
.skip:focus{ clip-path:none; }
:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }

/* =========================================================
   ASSINATURA — o grifo IA
   A mesma mecânica do logotipo: azul + peso dentro da frase,
   nunca em tamanho maior.
   ========================================================= */
.g{
  font-style:normal;
  font-weight:700;
  color:var(--azul);
}
/* no hero os grifos começam apagados e acendem no load.
   Estado inicial escopado em .js — sem JavaScript o conteúdo
   nasce visível e já grifado, nunca em branco. */
.hero-tese .g{ transition:color .5s var(--ease); }
.js .hero-tese .g{ color:var(--tinta); }
.acendeu .hero-tese .g{ color:var(--azul); }
.acendeu .hero-tese .g[data-g="1"]{ transition-delay:.10s; }
.acendeu .hero-tese .g[data-g="2"]{ transition-delay:.26s; }
.acendeu .hero-tese .g[data-g="3"]{ transition-delay:.42s; }

/* ---------- estrutura ---------- */
.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.sec{ padding-block:var(--sec-y); }
.sec-papel{ background:var(--papel); }

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--regua-f);
}
.topo-in{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding-block:.9rem;
}
.topo-logo{ flex:none; line-height:0; }
.topo-logo img{ height:52px; width:auto; }
.topo-nav{
  display:flex; gap:1.6rem; margin-left:auto;
  font-size:.875rem;
}
.topo-nav a{
  text-decoration:none; color:var(--cinza);
  padding-block:.25rem;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.topo-nav a:hover{ color:var(--tinta); border-bottom-color:var(--azul); }

/* ---------- botões e links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--azul); color:#fff;
  font-family:var(--corpo); font-size:1rem; font-weight:500;
  text-decoration:none; letter-spacing:.005em;
  padding:.95rem 1.9rem;
  border:1px solid var(--azul);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.btn:hover{ background:var(--tinta); border-color:var(--tinta); }
.btn-sm{ flex:none; padding:.6rem 1.15rem; font-size:.875rem; }
.btn-lg{ padding:1.15rem 2.4rem; font-size:1.0625rem; }

.lnk{
  color:var(--azul); text-decoration:none;
  border-bottom:1px solid var(--azul);
  padding-bottom:1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lnk:hover{ color:var(--tinta); border-bottom-color:var(--tinta); }

.tel{
  font-family:var(--mono); font-size:.9375rem;
  color:var(--cinza); text-decoration:none;
  transition:color .2s var(--ease);
}
.tel:hover{ color:var(--tinta); }

/* Saída secundária: peso de .tel, mas com fio que sinaliza navegação.
   Cinza de propósito — o LinkedIn atende quem NÃO está pronto para
   conversar, então não pode competir com o botão de WhatsApp. */
.tel-ext{
  font-family:var(--mono); font-size:.9375rem;
  color:var(--cinza); text-decoration:none;
  border-bottom:1px solid var(--regua);
  padding-bottom:2px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tel-ext:hover{ color:var(--tinta); border-bottom-color:var(--tinta); }

/* =========================================================
   CABEÇALHO DE SEÇÃO
   Repete a geometria do logotipo: régua azul de ponta a
   ponta, etiqueta pequena alinhada à direita logo abaixo.
   ========================================================= */
.sec-cab{ margin-bottom:clamp(2.25rem,5vw,3.5rem); }
.sec-cab .fio{
  display:block; height:1px; background:var(--azul);
  transform-origin:left center;
  transition:transform .9s var(--ease);
}
.js .sec-cab .fio{ transform:scaleX(0); }
.js .sec-cab.vis .fio{ transform:scaleX(1); }
.sec-cab .rot{
  display:block; text-align:right;
  margin-top:.55rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cinza);
}

/* ---------- títulos de seção ---------- */
.hero-tese,.sec-tit,.pilar h3,.publico h3,.ficha dt,.sobre-txt h2{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}

.sec-tit{
  font-family:var(--display);
  font-size:clamp(1.75rem,3.4vw,2.6rem);
  line-height:1.22;
  letter-spacing:-.005em;
  max-width:22ch;
  text-wrap:balance;
}
.sec-fecho{
  margin-top:clamp(2rem,4vw,3rem);
  font-size:1.125rem; max-width:58ch; color:var(--tinta);
}

/* ---------- páginas legais (política de privacidade) ---------- */
.pagina-legal{ max-width:64ch; padding-block:clamp(1rem,3vw,2rem) clamp(2.5rem,5vw,4rem); }
.pagina-legal h2{
  font-family:var(--display);
  font-size:1.25rem;
  margin-top:2.25rem;
  margin-bottom:.65rem;
}
.pagina-legal p{
  font-size:1.0625rem; line-height:1.65; color:var(--tinta);
  margin-bottom:1rem;
}
.pagina-legal p a{ color:var(--azul); text-decoration:underline; text-underline-offset:.15em; }
.pagina-legal-data{ font-family:var(--mono); font-size:.75rem; color:var(--cinza); margin-top:2rem !important; }

/* =========================================================
   1 · HERO
   ========================================================= */
.hero{ padding-top:clamp(3rem,6.5vw,5.5rem); padding-bottom:0; }

/* A tese domina a dobra. Escala grande, tracking fechado e medida
   controlada para que as linhas fiquem parelhas e os três grifos
   caiam como âncoras de leitura. Teto em 4.5rem: acima disso a
   página grita, e a marca é sóbria por posicionamento. */
.hero-tese{
  font-family:var(--display);
  font-size:clamp(2.1rem,5.3vw,4.5rem);
  line-height:1.16;
  letter-spacing:-.021em;
  max-width:13.6em;
  text-wrap:balance;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js .hero-tese{ opacity:0; transform:translateY(14px); }
.js .acendeu .hero-tese{ opacity:1; transform:none; }

/* Não é resumo da tese — é a resposta à objeção que mais trava
   (virar refém de fornecedor). Por carregar afirmação própria,
   vai em tinta cheia e colada na tese, não em cinza recuado. */
.hero-sub{
  margin-top:clamp(1.25rem,2.4vw,1.75rem);
  max-width:64ch;
  font-size:clamp(1.0625rem,1.4vw,1.1875rem);
  color:var(--tinta);
  text-wrap:pretty;
  transition:opacity .7s var(--ease) .18s, transform .7s var(--ease) .18s;
}
.js .hero-sub{ opacity:0; transform:translateY(10px); }
.js .acendeu .hero-sub{ opacity:1; transform:none; }

/* Ritmo por contraste: a sub cola na tese, e aqui abre um vão
   largo. Espaçamento uniforme é o que fazia a dobra parecer morna. */
.hero-acao{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.25rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.hero .hero-acao{
  transition:opacity .7s var(--ease) .3s, transform .7s var(--ease) .3s;
}
.js .hero .hero-acao{ opacity:0; transform:translateY(10px); }
.js .acendeu .hero .hero-acao{ opacity:1; transform:none; }

/* Notebook de 720px a 800px de altura: a escala maior da tese
   empurrava o CTA para baixo da dobra. A tese passa a responder
   também à altura da janela, não só à largura, e os vãos encolhem.
   O CTA acima da dobra é requisito do brief, não preferência. */
/* Celular baixo (iPhone SE, 8, 13 mini): mesma questão da dobra.
   Aqui só os vãos encolhem — a escala do texto fica intocada,
   porque no celular ela já está no piso do clamp. */
@media (max-width:620px) and (max-height:740px){
  .hero{ padding-top:1.75rem; }
  .hero-sub{ margin-top:1rem; }
  .hero-acao{ margin-top:1.75rem; }
}

@media (min-width:861px) and (max-height:820px){
  .hero{ padding-top:clamp(1.75rem,3.5vh,3rem); }
  .hero-tese{ font-size:clamp(2.1rem,min(5.3vw,8.6vh),4.5rem); }
  .hero-sub{ margin-top:clamp(1rem,1.8vh,1.5rem); }
  .hero-acao{ margin-top:clamp(1.75rem,3.2vh,2.5rem); }
  .stack{ margin-top:clamp(2rem,4vh,3.5rem); }
}

/* =========================================================
   MURAL DE FERRAMENTAS
   Substitui a antiga régua de texto da stack técnica. Repete o
   mesmo device de fio azul do topo — mas em vez de nomes soltos,
   as ferramentas orbitam o logotipo, cada uma com o ícone da
   própria marca. Exceção documentada à Regra do Sinal: ver
   DESIGN.md § Named Rules — "A Exceção do Mural de Ferramentas".
   ========================================================= */
.hub{
  position:relative;
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:clamp(3rem,6vw,4.5rem);
  padding-bottom:clamp(1.5rem,4vw,3rem);
  border-top:1px solid var(--azul);
  --hub-r: clamp(148px,19vw,228px);
  --hub-badge: 60px;
  --hub-circle: clamp(150px,16vw,210px);
}
/* imagem à esquerda, texto preenchendo a coluna à direita —
   mesmo par esquerda/direita do resto do sistema, só que aqui
   a "etiqueta" é uma frase inteira, não um rótulo de duas palavras. */
.hub-corpo{
  display:flex;
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
}
.hub-circulo{
  position:relative;
  flex:none;
  width:calc(var(--hub-r) * 2 + var(--hub-badge));
  height:calc(var(--hub-r) * 2 + var(--hub-badge));
  max-width:100%;
}
/* corpo em Plex Sans, nunca Playfair — é prosa técnica, não título.
   Tamanho escala com a viewport pra acompanhar o círculo: um texto
   fixo em 1rem ficaria pequeno ao lado de um círculo de 500px+.
   Sem grifo aqui: o hero já usou sua cota de ênfase nesta mesma
   seção (entender/simplificar/autonomia) — um segundo grifo
   anularia os três primeiros, pela própria Regra do Grifo. */
.hub-texto{
  flex:1 1 320px;
  font-family:var(--corpo);
  font-size:clamp(1.0625rem,.95rem + .45vw,1.25rem);
  line-height:1.65;
  color:var(--tinta);
  max-width:52ch;
}
/* o logotipo mora dentro de um círculo real — sólido, com aro —
   e é dali que os fios partem, como na referência. Antes o logo
   flutuava sem contorno e os fios pareciam nascer do nada. */
.hub-centro{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:var(--hub-circle); height:var(--hub-circle);
  border-radius:50%;
  background:var(--branco);
  border:1px solid var(--regua);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.85rem,2.2vw,1.35rem);
}
.hub-centro img{ width:100%; height:auto; display:block; }

.hub-badges{ list-style:none; margin:0; padding:0; }

.hub-badge{
  position:absolute; top:50%; left:50%;
  width:var(--hub-r); height:0;
  transform:rotate(calc(-90deg + (360deg / 11) * var(--i)));
  transform-origin:0 0;
}
/* o fio começa na borda do círculo central, não no ponto exato do
   centro — por isso o left/width descontam o raio do círculo. */
.hub-badge-spoke{
  position:absolute; left:calc(var(--hub-circle) / 2); top:0;
  width:calc(100% - (var(--hub-circle) / 2)); height:1px;
  background:var(--regua);
  transform-origin:0 50%;
}
.hub-badge-inner{
  position:absolute; left:100%; top:0;
  transform:translate(-50%,-50%) rotate(calc(90deg - (360deg / 11) * var(--i)));
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  z-index:2;
}
.hub-badge-dot{
  display:flex; align-items:center; justify-content:center;
  width:var(--hub-badge); height:var(--hub-badge);
  background:var(--branco);
  border:1px solid var(--regua);
  border-radius:50%;
}
.hub-badge-ico{ width:28px; height:28px; }
.hub-badge-nome{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.04em; color:var(--cinza);
  white-space:nowrap;
}

/* revelação escalonada — as ferramentas "preenchem" em sequência.
   O gatilho (main.js) só soma .vis quando boa parte do círculo já
   está em tela, então a cascata abaixo acontece na frente de quem
   olha, não escondida atrás da dobra enquanto o scroll termina. */
.js .hub-badge-inner{
  opacity:0; transform:translate(-50%,-50%) rotate(calc(90deg - (360deg / 11) * var(--i))) scale(.55);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
  transition-delay:calc(90ms + var(--i) * 48ms);
}
.js .hub-centro{
  opacity:0; transform:translate(-50%,-50%) scale(.7);
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.js .hub.vis .hub-centro{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.js .hub.vis .hub-badge-inner{
  opacity:1;
  transform:translate(-50%,-50%) rotate(calc(90deg - (360deg / 11) * var(--i))) scale(1);
}
.js .hub-badge-spoke{
  transform:scaleX(0);
  transition:transform .34s var(--ease);
  transition-delay:calc(70ms + var(--i) * 48ms);
}
.js .hub.vis .hub-badge-spoke{ transform:scaleX(1); }

/* abaixo de 860px — mesmo ponto de quebra de "Pra quem é" — o
   texto ao lado do círculo fica espremido demais pra ler bem.
   Empilha: imagem em cima, texto embaixo. */
@media (max-width:859px){
  .hub-corpo{ flex-direction:column; align-items:flex-start; }
  .hub-texto{ max-width:60ch; }
}

/* abaixo de 768px o círculo vira uma grade — 11 itens num raio
   pequeno ficam ilegíveis, e o pedido era "ver todas na tela" */
@media (max-width:767px){
  .hub-circulo{ width:auto; height:auto; margin:0; align-self:stretch; }
  .hub-centro{
    position:static; transform:none !important;
    margin:0 auto 2rem;
  }
  .js .hub-centro{ opacity:0; transform:scale(.7) !important; }
  .js .hub.vis .hub-centro{ opacity:1; transform:scale(1) !important; }
  .hub-badges{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:1.5rem 1.25rem;
  }
  .hub-badge{ position:static; width:auto; height:auto; transform:none !important; }
  .hub-badge-spoke{ display:none; }
  .hub-badge-inner{
    position:static;
    transform:none !important;
  }
  .js .hub-badge-inner{
    transform:scale(.55) !important;
    transition-delay:calc(60ms + var(--i) * 34ms);
  }
  .js .hub.vis .hub-badge-inner{ transform:scale(1) !important; }
}

/* =========================================================
   2 · O PROBLEMA
   ========================================================= */
.sintomas{
  margin-top:clamp(2.25rem,5vw,3.25rem);
  border-top:1px solid var(--regua);
}
.sintomas li{
  padding-block:1.35rem;
  border-bottom:1px solid var(--regua);
  font-size:clamp(1.0625rem,1.8vw,1.25rem);
  max-width:62ch;
}

/* =========================================================
   3 · PILARES  (faixas de índice, nunca cards)
   ========================================================= */
.pilares{
  margin-top:clamp(2.25rem,5vw,3.25rem);
  border-top:1px solid var(--regua);
}
.pilar{
  display:grid;
  grid-template-columns:minmax(9rem,16rem) 1fr;
  gap:clamp(1.5rem,5vw,4.5rem);
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
  border-bottom:1px solid var(--regua);
  transition:border-color .3s var(--ease);
}
.pilar:hover{ border-bottom-color:var(--azul); }
.pilar h3{
  font-family:var(--display);
  font-size:clamp(1.375rem,2.3vw,1.75rem);
  line-height:1.2;
}
.pilar-txt p{ max-width:60ch; }
.pilar .tags{
  margin-top:1rem;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.05em; color:var(--cinza);
}

/* =========================================================
   4 · PRA QUEM É  (duas colunas, um fio vertical, zero caixa)
   ========================================================= */
.publicos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);
  margin-top:clamp(2.25rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--regua);
}
.publico + .publico{
  border-left:1px solid var(--regua);
  padding-left:clamp(2rem,6vw,5rem);
}
.publico-rot{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--azul);
}
.publico h3{
  margin-block:.85rem 1.35rem;
  font-family:var(--display);
  font-size:clamp(1.25rem,2vw,1.5rem);
  line-height:1.25;
}
.publico p + p{ margin-top:1rem; }
.publico .itens{
  margin-top:1.75rem;
  border-top:1px solid var(--regua);
}
.publico .itens li{
  padding-block:.7rem;
  border-bottom:1px solid var(--regua-f);
  font-size:.9375rem; color:var(--cinza);
}

/* =========================================================
   5 · PROVA  (ficha técnica, nunca stat cards)
   ========================================================= */
.ficha{
  margin-top:clamp(2.25rem,5vw,3.25rem);
  border-top:1px solid var(--regua);
}
.ficha-lin{
  display:grid;
  grid-template-columns:minmax(8rem,16rem) 1fr;
  gap:clamp(1rem,4vw,3rem);
  align-items:baseline;
  padding-block:clamp(1.25rem,2.5vw,1.75rem);
  border-bottom:1px solid var(--regua);
}
.ficha dt{
  font-family:var(--display);
  font-size:clamp(1.625rem,3.1vw,2.4rem);
  line-height:1.05;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.ficha dd{ margin:0; max-width:58ch; color:var(--tinta); }

.credenciais{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.cred-rot{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cinza);
  margin-bottom:.5rem;
}
.cred-rot + .cred-lista{ margin-bottom:1.75rem; }
/* sem max-width: quebrar "Lean Six Sigma / Yellow Belt" no meio
   parte o nome de uma certificação em duas */
.cred-lista{ font-size:1rem; text-wrap:pretty; }

/* =========================================================
   6 · SOBRE
   ========================================================= */
.sobre{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
.sobre-foto{ margin:0; }
.sobre-foto img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:50% 22%;
  filter:saturate(.92);
}
.sobre-txt h2{
  font-family:var(--display);
  font-size:clamp(1.75rem,3.2vw,2.5rem);
  line-height:1.2;
  margin-bottom:1.5rem;
}
.sobre-txt p + p{ margin-top:1.15rem; }
.sobre-txt p{ max-width:56ch; }
/* Sem uppercase: a grafia oficial da marca é inteligencIA Cruz.
   Caixa alta apagaria a distinção do "IA", que é regra de marca. */
.assina{
  margin-top:2rem !important;
  padding-top:1.15rem;
  border-top:1px solid var(--azul);
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.04em; color:var(--cinza);
}

/* =========================================================
   7 · CTA FINAL
   ========================================================= */
.fim-txt{
  margin-top:1.75rem;
  max-width:56ch;
  font-size:1.125rem;
  color:var(--cinza);
}

/* ---------- rodapé ---------- */
.rodape{
  border-top:1px solid var(--regua);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.rodape-grade{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:2.5rem;
}
.rodape-marca p{ font-size:.9375rem; color:var(--cinza); max-width:38ch; }
.rodape-logo{ height:64px; width:auto; margin-bottom:1.25rem; }
.rodape-col{ display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; }
.rodape-rot{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tinta);
  margin-bottom:.15rem;
}
.rodape-col a{
  font-size:.9375rem; color:var(--cinza); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.rodape-col a:hover,
.rodape-col a:focus-visible{ color:var(--tinta); border-color:var(--azul); }
.rodape-legal{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.75rem 1.5rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--regua);
}
.rodape-fim{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.04em; color:var(--cinza);
}
.rodape-priv{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.04em; color:var(--cinza); text-decoration:none;
  border-bottom:1px solid var(--regua);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.rodape-priv:hover,
.rodape-priv:focus-visible{ color:var(--tinta); border-color:var(--azul); }
.rodape-legal-lnks{ display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap; }
.rodape-priv-btn{
  background:none; padding:0; margin:0;
  font-family:var(--mono); cursor:pointer;
}

@media (max-width:640px){
  .rodape-grade{ grid-template-columns:1fr 1fr; }
  .rodape-marca{ grid-column:1 / -1; margin-bottom:.5rem; }
}

/* =========================================================
   CONSENTIMENTO DE COOKIES
   Mesma matéria do resto do sistema: fio de 1px em vez de
   sombra, canto vivo, Azul Sinal só no botão que confirma. O
   switch de categoria é quadrado de propósito — é o único
   toggle do site, e um raio aqui quebraria a Regra do Plano
   por uma questão de costume de outro sistema, não por
   necessidade real deste.
   ========================================================= */
.btn-cookie{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--corpo); font-size:.875rem; font-weight:500;
  padding:.7rem 1.25rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}
.btn-cookie-sim{ background:var(--azul); color:#fff; border-color:var(--azul); }
.btn-cookie-sim:hover{ background:var(--tinta); border-color:var(--tinta); }
.btn-cookie-fora{ background:transparent; color:var(--tinta); border-color:var(--tinta); }
.btn-cookie-fora:hover{ background:var(--tinta); color:#fff; }
.btn-cookie-neutro{ background:transparent; color:var(--cinza); border-color:var(--regua); }
.btn-cookie-neutro:hover{ color:var(--tinta); border-color:var(--tinta); }

/* ---------- barra ---------- */
.cookie-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--branco);
  border-top:1px solid var(--regua);
  padding:1.5rem var(--gut) max(1.5rem, env(safe-area-inset-bottom));
  max-height:90vh; overflow-y:auto;
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:transform .45s var(--ease), opacity .45s var(--ease), visibility 0s linear .45s;
}
.cookie-barra.vis{
  transform:translateY(0); opacity:1; pointer-events:auto; visibility:visible;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.cookie-barra-in{
  max-width:var(--max); margin-inline:auto;
  display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
}
.cookie-txt{
  flex:1 1 420px;
  font-size:.9375rem; line-height:1.55; color:var(--tinta);
  max-width:64ch;
}
.cookie-lnk{
  color:var(--azul); text-decoration:none;
  border-bottom:1px solid var(--azul);
  white-space:nowrap;
}
.cookie-lnk:hover{ color:var(--tinta); border-bottom-color:var(--tinta); }
.cookie-acoes{ display:flex; gap:.75rem; flex-wrap:wrap; flex:0 0 auto; }

/* ---------- painel de preferências ---------- */
.cookie-overlay{
  position:fixed; inset:0; z-index:90;
  background:rgba(15,15,15,.5);
  display:flex; align-items:center; justify-content:center;
  padding:var(--gut);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.cookie-overlay.vis{
  opacity:1; pointer-events:auto; visibility:visible;
  transition:opacity .3s var(--ease);
}
.cookie-modal{
  background:var(--branco);
  border:1px solid var(--regua);
  width:100%; max-width:34rem;
  max-height:85vh; overflow-y:auto;
}
.cookie-modal-cab{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.5rem 1.75rem;
  border-bottom:1px solid var(--regua);
}
.cookie-modal-cab h2{
  font-family:var(--display); font-weight:400;
  font-size:1.25rem;
}
.cookie-fechar{
  flex:none;
  width:2rem; height:2rem;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--regua); color:var(--tinta);
  font-size:.9rem; line-height:1; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.cookie-fechar:hover{ border-color:var(--tinta); color:var(--azul); }
.cookie-modal-corpo{ padding:.5rem 1.75rem; }
.cookie-cat{ padding:1.25rem 0; border-bottom:1px solid var(--regua-f); }
.cookie-cat:last-child{ border-bottom:0; }
.cookie-cat-cab{ display:flex; align-items:center; gap:.85rem; }
.cookie-cat-titulo{
  font-family:var(--corpo); font-weight:500; font-size:.9375rem; color:var(--tinta);
  cursor:pointer;
}
.cookie-cat-fixo{
  font-family:var(--mono); font-weight:500; font-size:.6875rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--cinza);
}
.cookie-cat-desc{
  margin-top:.5rem; margin-left:calc(2.75rem + .85rem);
  font-size:.875rem; color:var(--cinza); max-width:48ch;
}
.cookie-modal-rod{
  display:flex; flex-wrap:wrap; gap:.75rem;
  padding:1.5rem 1.75rem;
  border-top:1px solid var(--regua);
}
.cookie-modal-rod .btn-cookie{ flex:1 1 auto; }

/* ---------- switch quadrado ---------- */
.cookie-switch{ position:relative; flex:none; display:block; width:2.75rem; height:1.5rem; }
.cookie-switch input{
  position:absolute; inset:0; margin:0; opacity:0; cursor:pointer;
}
.cookie-switch-trilho{
  position:absolute; inset:0;
  background:var(--branco);
  border:1px solid var(--tinta);
  transition:background .2s var(--ease);
}
.cookie-switch-trilho::after{
  content:'';
  position:absolute; top:2px; left:2px;
  width:1rem; height:1rem;
  background:var(--tinta);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.cookie-switch input:checked ~ .cookie-switch-trilho{ border-color:var(--azul); }
.cookie-switch input:checked ~ .cookie-switch-trilho::after{
  transform:translateX(1.15rem);
  background:var(--azul);
}
.cookie-switch input:disabled ~ .cookie-switch-trilho{ border-color:var(--regua); }
.cookie-switch input:disabled ~ .cookie-switch-trilho::after{ background:var(--cinza); }
.cookie-switch input:focus-visible ~ .cookie-switch-trilho{ outline:2px solid var(--azul); outline-offset:3px; }

.cookie-trava-scroll{ overflow:hidden; }

@media (max-width:640px){
  .cookie-barra-in{ flex-direction:column; align-items:stretch; }
  .cookie-acoes{ flex-direction:column; }
  .cookie-acoes .btn-cookie{ width:100%; }
  .cookie-modal-rod{ flex-direction:column; }
  .cookie-cat-desc{ margin-left:0; margin-top:.65rem; }
}

@media (prefers-reduced-motion:reduce){
  .cookie-barra{ transition:opacity .01s linear, visibility 0s; }
  .cookie-overlay{ transition:opacity .01s linear, visibility 0s; }
  .cookie-switch-trilho,
  .cookie-switch-trilho::after,
  .btn-cookie{ transition:none !important; }
}

@media print{
  .cookie-barra, .cookie-overlay{ display:none !important; }
}

/* =========================================================
   REVELAÇÃO NO SCROLL
   ========================================================= */
.rev{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.rev.vis{ opacity:1; transform:none; }

/* Rede de segurança: na impressão nada pode ficar escondido
   por causa de um observer que não chegou a disparar. */
@media print{
  .js .rev,
  .js .hero-tese,
  .js .hero-sub,
  .js .hero .hero-acao{ opacity:1 !important; transform:none !important; }
  .js .hero-tese .g{ color:var(--azul); }
  .js .sec-cab .fio{ transform:scaleX(1); }
  .js .hub-centro,
  .js .hub-badge-inner{ opacity:1 !important; transform:translate(-50%,-50%) !important; }
  .js .hub-badge-spoke{ transform:scaleX(1) !important; }
  .topo{ position:static; }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1024px){
  .topo-nav{ display:none; }
  .topo-in{ justify-content:space-between; }
  .btn-sm{ margin-left:auto; }
}

@media (max-width:860px){
  .publicos{ grid-template-columns:1fr; }
  .publico + .publico{
    border-left:0; padding-left:0;
    padding-top:clamp(2rem,6vw,3rem);
    border-top:1px solid var(--regua);
  }
  .sobre{ grid-template-columns:1fr; }
  .sobre-foto{ max-width:22rem; }
  .sobre-foto img{ aspect-ratio:4/5; }
}

@media (max-width:620px){
  /* logo + botão não cabem lado a lado na largura de celular */
  .topo-logo img{ height:36px; }
  .btn-sm{ padding:.55rem .9rem; font-size:.8125rem; }
  .pilar{ grid-template-columns:1fr; gap:1rem; }
  .pilar h3 br{ display:none; }
  .ficha-lin{ grid-template-columns:1fr; gap:.5rem; }
  .sec-tit br{ display:none; }
  .hero-acao{ gap:1.25rem; }
  .hero-acao .btn{ width:100%; }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .js .hero-tese,
  .js .hero-sub,
  .js .hero .hero-acao,
  .js .rev{ opacity:1 !important; transform:none !important; }
  .js .hero-tese .g{ color:var(--azul); }
  .js .sec-cab .fio{ transform:scaleX(1); }
  /* o mural de ferramentas esconde os próprios filhos por fora do
     .rev do container — sem essas três linhas, quando main.js
     desiste da revelação (por causa do reduced-motion) os badges
     ficam em opacity:0 pra sempre, porque nada nunca soma .vis */
  .js .hub-centro,
  .js .hub-badge-inner{ opacity:1 !important; transform:translate(-50%,-50%) !important; }
  .js .hub-badge-spoke{ transform:scaleX(1) !important; }
}

@media (prefers-reduced-motion:reduce) and (max-width:767px){
  .js .hub-centro{ transform:none !important; }
  .js .hub-badge-inner{ transform:none !important; }
}