/* Fontes servidas do proprio dominio.
   Tira fonts.googleapis.com e fonts.gstatic.com do caminho critico: menos
   duas origens na CSP, nenhuma requisicao de terceiro e nenhum dado do
   visitante saindo para o Google so para carregar tipografia. */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Cobervickas — Home
   Tokens conforme Plano_DEV_Cobervickas_Forma.md §3
   Regra crítica: --red é cor de decisão/conversão. Nunca fundo de seção,
   nunca texto corrido.
   ========================================================================== */

:root {
  /* Superfícies */
  --bg-dark: #0E0E0E;
  --bg-light: #F2F1ED;
  --surface: #17171A;

  /* Texto */
  --text-on-dark: #FFFFFF;
  --text-on-dark-mut: #B7B7B4;
  --text-on-light: #1A1A1A;
  --text-on-light-mut: #6B6B6B;

  /* Conversão / decisão */
  --red: #C82A2A;
  --red-hover: #A81F1F;
  --red-tint: rgba(200, 42, 42, .10);

  /* Linhas */
  --hairline-dark: rgba(255, 255, 255, .12);
  --hairline-light: rgba(0, 0, 0, .10);

  /* Tipografia */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Escala */
  --step-hero: clamp(2.75rem, 6vw, 5.5rem);
  --step-h2: clamp(2rem, 4vw, 3.25rem);
  --step-h3: 1.5rem;
  --step-body: 1.0625rem;
  --step-small: .875rem;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 4px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Ritmo vertical */
  --secao-y: clamp(88px, 10vw, 160px);

  /* Contexto de cor — sobrescrito por .em-claro / .em-escuro */
  --fg: var(--text-on-light);
  --fg-mut: var(--text-on-light-mut);
  --hairline: var(--hairline-light);
}

/* ---------- reset ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-light);
  color: var(--text-on-light);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip e não hidden: hidden transforma o body em contêiner de scroll e
     mata todo position: sticky da página. clip corta igual sem esse efeito. */
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--red); color: #fff; }

/* ---------- utilitários ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pular-conteudo {
  position: fixed;
  top: -120px;
  left: 16px;
  z-index: 200;
  padding: 14px 22px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.pular-conteudo:focus { top: 16px; }

.sr-apenas {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- contextos de cor ---------- */

.em-escuro {
  --fg: var(--text-on-dark);
  --fg-mut: var(--text-on-dark-mut);
  --hairline: var(--hairline-dark);
  background: var(--bg-dark);
  color: var(--fg);
}

.em-claro {
  --fg: var(--text-on-light);
  --fg-mut: var(--text-on-light-mut);
  --hairline: var(--hairline-light);
  background: var(--bg-light);
  color: var(--fg);
}

.secao {
  position: relative;
  padding-block: var(--secao-y);
}

/* ---------- tipografia ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

h1 { font-size: var(--step-hero); font-weight: 700; letter-spacing: -0.038em; line-height: 1.02; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); letter-spacing: -0.02em; }

/* text-wrap: pretty evita viúva — a última linha com uma palavra sozinha.
   O navegador reflui as linhas finais para equilibrar o parágrafo. */
p, li, figcaption, address, dd, blockquote, .botao, .link-seta {
  text-wrap: pretty;
}

p { color: var(--fg-mut); }
.texto-forte { color: var(--fg); }

.sobrancelha {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg);
}
.sobrancelha::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--red);
  flex: 0 0 auto;
}

.cabeca-secao { max-width: 62ch; }
.cabeca-secao h2 { margin-top: 22px; }
.cabeca-secao > p { margin-top: 22px; max-width: 56ch; }

/* Título à esquerda, texto de apoio à direita, alinhados pela base da
   primeira linha. Empilha na vertical abaixo de 1024px. */
.cabeca-dupla {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 72px);
}
.cabeca-dupla h2 { margin-top: 22px; }
.cabeca-dupla > p { max-width: 46ch; padding-bottom: 6px; }

.secao > .container { position: relative; z-index: 1; }

/* ---------- botões ---------- */

.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), scale .25s var(--ease);
}
.botao .flecha { transition: translate .25s var(--ease); }
.botao:hover { scale: 1.02; }
.botao:hover .flecha { translate: 3px 0; }
.botao:active { scale: 1; }

.botao-primario { background: var(--red); color: #fff; }
.botao-primario:hover { background: var(--red-hover); }

.botao-contorno { border-color: currentColor; color: var(--fg); }
.botao-contorno:hover { background: var(--fg); color: var(--bg-dark); border-color: var(--fg); }
.em-claro .botao-contorno:hover { color: var(--bg-light); }

/* Terceira prioridade: presente, mas sem competir com os dois CTAs. */
.botao-texto {
  background: transparent;
  color: var(--fg);
  padding-inline: 12px;
}
.botao-texto::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  height: 1.5px;
  background: var(--red);
  scale: 0 1;
  transform-origin: left;
  transition: scale .3s ease;
}
.botao-texto:hover { color: var(--red); scale: 1; }
.botao-texto:hover::after { scale: 1 1; }

.linha-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* link com underline animado */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--fg);
  transition: color .25s var(--ease);
}
.link-seta > span {
  position: relative;
  padding-bottom: 3px;
}
.link-seta > span::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--red);
  scale: 0 1;
  transform-origin: left;
  transition: scale .3s ease;
}
.link-seta:hover { color: var(--red); }
.link-seta:hover > span::after { scale: 1 1; }
.link-seta .flecha { transition: translate .25s var(--ease); }
.link-seta:hover .flecha { translate: 3px -3px; }

/* ==========================================================================
   Header
   ========================================================================== */

.cabecalho {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: 88px;
  display: flex;
  align-items: center;
  background: transparent;
  transition: height .3s var(--ease), background .3s var(--ease);
}
.cabecalho .container {
  display: flex;
  align-items: center;
  gap: 28px;
}

.logo { margin-right: auto; display: block; }
.logo img { height: 40px; width: auto; }

.nav-principal { display: flex; gap: 30px; }
.nav-principal a {
  position: relative;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .82);
  padding-block: 6px;
  transition: color .25s var(--ease);
}
.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--red);
  scale: 0 1;
  transform-origin: left;
  transition: scale .3s ease;
}
.nav-principal a:hover,
.nav-principal a[aria-current="page"] { color: #fff; }
.nav-principal a:hover::after,
.nav-principal a[aria-current="page"]::after { scale: 1 1; }
.nav-principal a[aria-current="page"] { color: var(--red); }

.cabecalho .botao-primario { padding: 12px 22px; font-size: .875rem; }

/* Fundo sólido assim que a página sai do topo. Sem isso o H1 do hero
   desliza por baixo do logo e da nav enquanto o hero rola — o que é pior
   em telas baixas, onde há mais hero fora da viewport. */
.cabecalho.rolado {
  background: rgba(14, 14, 14, .92);
  backdrop-filter: saturate(150%) blur(12px);
}

/* estado compacto — após o hero */
.cabecalho.compacto {
  height: 64px;
  background: rgba(14, 14, 14, .92);
  backdrop-filter: saturate(150%) blur(12px);
}
/* A logo não muda de tamanho, cor ou opacidade em estado nenhum. */
.cabecalho.compacto .nav-principal {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.cabecalho.compacto .abrir-menu {
  opacity: 1;
  visibility: visible;
  width: 44px;
  margin-left: 0;
}

.abrir-menu {
  flex: 0 0 auto;
  width: 0;
  height: 44px;
  display: grid;
  place-items: center;
  gap: 3px;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease),
              width .3s var(--ease);
}
.abrir-menu i {
  display: block;
  width: 22px; height: 1.5px;
  background: #fff;
  transition: translate .3s var(--ease), rotate .3s var(--ease), opacity .2s var(--ease);
}
.abrir-menu:hover i { background: var(--red); }

/* ---------- drawer ---------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-dark);
  opacity: 0;
  visibility: hidden;
  translate: 0 -12px;
  transition: opacity .4s var(--ease), visibility .4s var(--ease), translate .4s var(--ease);
}
.drawer[data-aberto="true"] { opacity: 1; visibility: visible; translate: 0 0; }

.fechar-menu {
  position: absolute;
  top: 26px; right: var(--gutter);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  transition: color .25s var(--ease), rotate .3s var(--ease);
}
.fechar-menu:hover { color: var(--red); rotate: 90deg; }

.drawer nav { display: grid; gap: 0; }
.drawer nav a {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--text-on-dark);
  padding-block: 3px;
  opacity: 0;
  translate: 0 16px;
  transition: opacity .4s var(--ease), translate .4s var(--ease), color .25s var(--ease);
}
.drawer[data-aberto="true"] nav a { opacity: 1; translate: 0 0; }
.drawer[data-aberto="true"] nav a:nth-child(1) { transition-delay: .06s; }
.drawer[data-aberto="true"] nav a:nth-child(2) { transition-delay: .12s; }
.drawer[data-aberto="true"] nav a:nth-child(3) { transition-delay: .18s; }
.drawer[data-aberto="true"] nav a:nth-child(4) { transition-delay: .24s; }
.drawer[data-aberto="true"] nav a:nth-child(5) { transition-delay: .30s; }
.drawer[data-aberto="true"] nav a:nth-child(6) { transition-delay: .36s; }
.drawer nav a:hover { color: var(--red); }

.drawer-rodape {
  margin-top: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
}
.drawer-rodape a:not(.botao) {
  font-size: var(--step-small);
  color: var(--text-on-dark-mut);
  transition: color .25s var(--ease);
}
.drawer-rodape a:not(.botao):hover { color: #fff; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 140px clamp(64px, 8vw, 110px);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  --fg: var(--text-on-dark);
  --fg-mut: var(--text-on-dark-mut);
  --hairline: var(--hairline-dark);
  overflow: hidden;
}

.hero-midia {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-midia img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 42%;
  scale: 1.06;
  opacity: 0;
  will-change: transform;
  animation: heroEntrada 1.4s var(--ease) forwards;
}
.hero-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14,14,14,.78) 0%, rgba(14,14,14,.22) 34%, rgba(14,14,14,.86) 82%, var(--bg-dark) 100%),
    linear-gradient(90deg, rgba(14,14,14,.72) 0%, rgba(14,14,14,.18) 62%, transparent 100%);
}

@keyframes heroEntrada {
  from { scale: 1.06; opacity: 0; }
  to { scale: 1; opacity: 1; }
}

.hero .container { position: relative; z-index: 1; }
.hero-conteudo { max-width: 20ch; }
.hero h1 { margin-top: 24px; max-width: 18ch; }
.hero-conteudo > p {
  margin-top: 28px;
  max-width: 58ch;
  color: rgba(255, 255, 255, .78);
}
.hero .linha-botoes { margin-top: 38px; }

.hero-conteudo { max-width: none; }

.hero-microcopy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 44px;
  font-size: var(--step-small);
  color: var(--text-on-dark-mut);
}
.hero-microcopy li { display: flex; align-items: center; gap: 18px; }
.hero-microcopy li:not(:last-child)::after {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--red);
}

/* entrada escalonada dos elementos do hero */
.entra { opacity: 0; translate: 0 20px; animation: entraCima .9s var(--ease) forwards; }
@keyframes entraCima { to { opacity: 1; translate: 0 0; } }

/* ==========================================================================
   Sobre
   ========================================================================== */

.sobre-grade {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.sobre-texto p + p { margin-top: 20px; }
.sobre-texto .primeiro-paragrafo {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-top: 30px;
}
.sobre-texto .link-seta { margin-top: 32px; }

.sobre-midia {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.sobre-midia img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.sobre-midia figcaption {
  position: absolute;
  left: 0; bottom: 0;
  right: 0;
  padding: 22px;
  font-size: .8125rem;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(14, 14, 14, .82));
}

/* A imagem acompanha o scroll enquanto a coluna de texto passa, e para
   quando o bloco termina — logo abaixo do CTA. Precisa vir depois da
   regra base, que declara position: relative. */
@media (min-width: 1024px) {
  .sobre-midia { position: sticky; top: 112px; }
}

/* ==========================================================================
   Números
   ========================================================================== */

.numeros {
  padding-block: clamp(64px, 7vw, 110px) clamp(56px, 6vw, 96px);
}
.numeros-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.numero { padding: 0; }
.numero strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.numero span {
  display: block;
  margin-top: 14px;
  font-size: var(--step-small);
  color: var(--fg-mut);
}

/* ==========================================================================
   Obras
   ========================================================================== */


.obra {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.obra-figura {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
.obra-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .6s var(--ease);
}
.obra:hover .obra-figura img { scale: 1.06; }

.obra-figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-dark);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.obra:hover .obra-figura::after { opacity: .15; }

.obra-legenda {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 26px;
}
.obra-legenda h3 { transition: color .25s var(--ease); }
.obra-legenda .flecha { transition: translate .25s var(--ease), color .25s var(--ease); color: var(--fg-mut); }
.obra:hover .obra-legenda h3 { color: var(--red); }
.obra:hover .obra-legenda .flecha { color: var(--red); translate: 4px -4px; }
.obra-legenda small {
  display: block;
  margin-top: 8px;
  font-size: .8125rem;
  color: var(--fg-mut);
}

.obra-destaque .obra-figura { aspect-ratio: 21 / 9; }
.obra-destaque .obra-legenda { padding: 28px 32px 32px; }
.obra-destaque h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* Empilhamento sticky: cada card gruda no topo e o seguinte sobe por cima.
   Precisa de fundo opaco para de fato cobrir o anterior. */
.obras-pilha { margin-top: clamp(18px, 2.2vw, 28px); }
.obras-pilha .obra {
  position: sticky;
  background: var(--surface);
  box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, .9);
}

/* A legenda vai para o topo do card. Com ela embaixo, o card seguinte
   cobria exatamente o título — sobrava só uma faixa de imagem, sem texto
   e sem alvo de clique. No topo, a faixa que fica à mostra é o título. */
.obras-pilha .obra-legenda {
  order: -1;
  align-items: center;
  padding: 20px clamp(20px, 2.4vw, 30px);
}
.obras-pilha .obra { display: flex; flex-direction: column; }
.obras-pilha .obra h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

/* Cada card gruda 100px abaixo do anterior — um pouco mais que a altura da
   legenda, para o título e a linha técnica do card de baixo continuarem
   inteiros e clicáveis. */
.obras-pilha .obra:nth-child(1) { top: 96px; }
.obras-pilha .obra:nth-child(2) { top: 196px; }
.obras-pilha .obra:nth-child(3) { top: 296px; }
.obras-pilha .obra + .obra { margin-top: clamp(20px, 3vw, 36px); }

/* Metade da altura anterior: o card inteiro cabe na tela junto com as
   legendas dos outros dois. */
.obras-pilha .obra-figura { aspect-ratio: 4 / 1; }

/* Espaço extra depois da pilha para o último card ser lido antes de sair. */
.obras-pilha::after { content: ""; display: block; height: clamp(40px, 8vw, 120px); }

.obras-acao { margin-top: clamp(44px, 5vw, 72px); }

/* ==========================================================================
   Serviços — folha de especificação, não grade de cards
   ========================================================================== */

.servicos-lista {
  margin-top: clamp(40px, 4vw, 60px);
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
}
.servico {
  display: grid;
  grid-template-columns: 92px 1fr minmax(0, 300px);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 3vw, 42px) clamp(20px, 2.4vw, 36px);
  border-radius: var(--radius);
  transition: background .35s var(--ease);
}
.servico:hover { background: var(--red-tint); }

.servico-indice {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--red);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
.servico h3 { max-width: 22ch; }
.servico-frase {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--fg);
  max-width: 46ch;
}
.servico-desc { margin-top: 14px; max-width: 56ch; }
.servico-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.servico-tags li {
  padding: 6px 13px;
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--fg-mut);
  background: rgba(0, 0, 0, .045);
  border-radius: 100px;
}
.em-escuro .servico-tags li { background: rgba(255, 255, 255, .07); }
.servico-acao { padding-top: 6px; justify-self: end; }

.outras-solucoes { margin-top: clamp(52px, 6vw, 80px); }
.outras-solucoes h3 { font-size: 1.125rem; }
.outras-solucoes ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 26px;
}
.outras-solucoes ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding: 18px 20px;
  font-size: .875rem;
  background: rgba(0, 0, 0, .04);
  border-radius: var(--radius);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.outras-solucoes ul a .flecha { opacity: 0; transition: opacity .25s var(--ease), translate .25s var(--ease); }
.outras-solucoes ul a:hover { background: var(--red-tint); color: var(--red); }
.outras-solucoes ul a:hover .flecha { opacity: 1; translate: 3px -3px; }

/* ==========================================================================
   Processo
   ========================================================================== */

.processo-lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(48px, 5vw, 72px);
  counter-reset: etapa;
}
.processo-lista > li { position: relative; }
.processo-lista > li::before {
  counter-increment: etapa;
  content: "/0" counter(etapa);
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.processo-lista h3 { font-size: 1.1875rem; }
.processo-lista p { margin-top: 12px; font-size: .9375rem; }

.processo-acao { margin-top: clamp(48px, 5vw, 72px); }

/* ==========================================================================
   Prova social
   ========================================================================== */

.esteira {
  display: flex;
  width: 100%;
  margin-top: clamp(44px, 5vw, 68px);
  overflow: hidden;
  /* Sem máscara de esmaecimento: ela apagava os 8% de cada ponta e os logos
     que passavam por ali apareciam cortados. */
}

.esteira-fita {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  padding-right: clamp(48px, 6vw, 96px);
  animation: correr 34s linear infinite;
}

/* Para no hover e volta a andar ao sair. Nada além disso. */
.esteira:hover .esteira-fita,
.esteira:focus-within .esteira-fita { animation-play-state: paused; }

@keyframes correr {
  to { translate: -100% 0; }
}

/* Caixa idêntica para todo mundo. As proporções dos arquivos vão de 1.76
   (xiaomi) a 6.67 (nissan), então a caixa é generosa nas duas direções e o
   logo se encaixa inteiro dentro dela — nunca cortado em cima, embaixo ou
   nas laterais. O respiro interno impede que um logo largo encoste no
   vizinho. */
.esteira-fita li {
  flex: 0 0 auto;
  width: 176px;
  height: 56px;
  padding: 4px 8px;
  display: grid;
  place-items: center;
}
.esteira-fita img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .55;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-grade {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.faq-lista { display: grid; gap: 10px; }
.faq-item {
  background: rgba(0, 0, 0, .035);
  border-radius: var(--radius);
  transition: background .3s var(--ease);
}
.faq-item[data-aberto="true"] { background: rgba(0, 0, 0, .055); }
.faq-item h3 { font-size: inherit; letter-spacing: 0; }
.faq-gatilho {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px clamp(18px, 2vw, 28px);
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--fg);
  transition: color .25s var(--ease);
}
.faq-gatilho:hover { color: var(--red); }

.faq-sinal {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
.faq-sinal::before,
.faq-sinal::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  background: var(--red);
  transition: rotate .3s var(--ease), opacity .25s var(--ease);
}
.faq-sinal::before { width: 18px; height: 1.5px; }
.faq-sinal::after { width: 1.5px; height: 18px; }
.faq-gatilho[aria-expanded="true"] .faq-sinal::after { rotate: 90deg; opacity: 0; }

.faq-resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.faq-item[data-aberto="true"] .faq-resposta { grid-template-rows: 1fr; }
.faq-resposta > div { overflow: hidden; }
.faq-resposta p { padding: 0 clamp(18px, 2vw, 28px) 26px; max-width: 68ch; }

/* ==========================================================================
   CTA final
   ========================================================================== */

.cta-final {
  position: relative;
  padding-block: clamp(88px, 10vw, 150px);
  overflow: hidden;
}
.cta-final .container { position: relative; z-index: 1; }
.cta-grade {
  display: grid;
  grid-template-columns: 1.1fr auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.cta-final h2 { max-width: 18ch; }
.cta-final p { margin-top: 20px; max-width: 52ch; }

/* ==========================================================================
   Footer
   ========================================================================== */

.rodape { padding-block: clamp(64px, 7vw, 96px) 0; }
/* Marca e ações à esquerda; navegação e contato à direita. */
.rodape-topo {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(44px, 5vw, 64px);
}
.rodape-marca img { height: 42px; width: auto; }
.rodape-marca p { margin-top: 22px; max-width: 34ch; font-size: .9375rem; }
.rodape-marca .botao { margin-top: 28px; }

.rodape h2 {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-mut);
  margin-bottom: 22px;
}
.rodape-links { display: grid; gap: 12px; }
.rodape-links a,
.rodape-contato a {
  width: fit-content;
  font-size: .9375rem;
  color: var(--fg-mut);
  transition: color .25s var(--ease), translate .25s var(--ease);
}
.rodape-links a:hover,
.rodape-contato a:hover { color: var(--fg); translate: 3px 0; }
.rodape-contato { display: grid; gap: 12px; }

.rodape-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 28px;
  padding-block: 28px;
  font-size: .8125rem;
  color: var(--fg-mut);
}
.rodape-base a { transition: color .25s var(--ease); }
.rodape-base a:hover { color: var(--fg); }
.rodape-credito { margin-left: auto; }
.rodape-credito a { color: var(--fg); }
.rodape-credito a:hover { color: var(--red); }

/* ==========================================================================
   Barra fixa de ação — só no mobile
   Orçamento e WhatsApp lado a lado, 60px de altura, sempre ao alcance
   do polegar. Substitui o botão flutuante nessa faixa.
   ========================================================================== */

.barra-acao {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 96;
  display: none;
  background: var(--bg-dark);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-acao a {
  flex: 1 1 0;
  min-width: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.barra-acao .acao-orcamento { background: var(--red); }
.barra-acao .acao-orcamento:active { background: var(--red-hover); }
.barra-acao .acao-whats { background: #17171A; }
.barra-acao .acao-whats:active { background: #232327; }
.barra-acao svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

@media (max-width: 809px) {
  .barra-acao { display: flex; }
  /* o conteúdo não pode terminar embaixo da barra */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
/* O .whats é declarado adiante e venceria esta regra por ordem de fonte,
   então o display:none dele fica no bloco responsivo do fim do arquivo. */

/* ==========================================================================
   WhatsApp flutuante
   ========================================================================== */

.whats {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 95;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5);
  transition: background .25s var(--ease), scale .25s var(--ease);
}
.whats:hover { background: var(--red-hover); scale: 1.06; }
.whats svg { width: 26px; height: 26px; fill: currentColor; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

/* O estado oculto só existe quando há JS para revelá-lo. Sem JS, ou se o
   IntersectionObserver não disparar, o conteúdo permanece visível. */
.js .revelar { opacity: 0; translate: 0 24px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.js .revelar.visivel { opacity: 1; translate: 0 0; }

.js .revelar-filhos > * { opacity: 0; translate: 0 24px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.js .revelar-filhos.visivel > * { opacity: 1; translate: 0 0; }
.js .revelar-filhos.visivel > *:nth-child(1) { transition-delay: 0s; }
.js .revelar-filhos.visivel > *:nth-child(2) { transition-delay: .08s; }
.js .revelar-filhos.visivel > *:nth-child(3) { transition-delay: .16s; }
.js .revelar-filhos.visivel > *:nth-child(4) { transition-delay: .24s; }
.js .revelar-filhos.visivel > *:nth-child(5) { transition-delay: .32s; }
.js .revelar-filhos.visivel > *:nth-child(6) { transition-delay: .40s; }
.js .revelar-filhos.visivel > *:nth-child(7) { transition-delay: .48s; }
.js .revelar-filhos.visivel > *:nth-child(8) { transition-delay: .56s; }

/* ==========================================================================
   Responsivo — 1200 / 810 / 390
   ========================================================================== */

@media (max-width: 1199px) {
  .cabecalho .nav-principal { display: none; }
  .abrir-menu { opacity: 1; visibility: visible; width: 44px; }

  /* alinhamento horizontal só existe onde há largura para ele */
  .cabeca-dupla { grid-template-columns: 1fr; align-items: start; }
  .cabeca-dupla > p { padding-bottom: 0; }

  .sobre-grade { grid-template-columns: 1fr; }
  .sobre-midia { max-width: 520px; }

  .servico { grid-template-columns: 64px 1fr; }
  .servico-acao { grid-column: 2; justify-self: start; padding-top: 4px; }

  .outras-solucoes ul { grid-template-columns: repeat(2, 1fr); }
  .processo-lista { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .faq-grade { grid-template-columns: 1fr; }
  .cta-grade { grid-template-columns: 1fr; align-items: start; }
  .rodape-topo { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 809px) {
  html { scroll-padding-top: 80px; }

  /* A primeira dobra precisa caber inteira: título, texto, os três botões
     e a microcopy. A tipografia cede espaço para isso. */
  .hero { min-height: 0; padding-block: 104px 40px; }
  .hero-midia img { object-position: 58% 42%; }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 1.06; }
  .hero-conteudo > p {
    margin-top: 18px;
    font-size: .9375rem;
    line-height: 1.55;
  }
  /* 10px com espacejamento largo fica no limite da legibilidade;
     11px ainda cabe na primeira dobra e le muito melhor. */
  .hero .sobrancelha { font-size: .6875rem; letter-spacing: .13em; }
  .hero .linha-botoes { margin-top: 24px; gap: 10px; }
  .hero .botao { padding: 14px 22px; font-size: .875rem; }
  .hero-microcopy { margin-top: 26px; font-size: .75rem; gap: 6px 14px; }

  .numeros-grade { grid-template-columns: 1fr; row-gap: 34px; }

  /* sem empilhamento no mobile: a tela é curta demais para o card de baixo
     aparecer antes de cobrir o de cima */
  .obras-pilha .obra { position: static; box-shadow: none; }
  .obras-pilha::after { display: none; }
  .obras-pilha .obra-figura { aspect-ratio: 3 / 2; }
  .obra-destaque .obra-figura { aspect-ratio: 3 / 2; }

  .servico { grid-template-columns: 1fr; gap: 0; }
  .servico-indice { padding-top: 0; margin-bottom: 12px; }
  /* zera o grid-column herdado do breakpoint de tablet, que criaria
     uma segunda coluna implícita em uma linha */
  .servico-acao { grid-column: auto; padding-top: 20px; }

  .outras-solucoes ul { grid-template-columns: 1fr; }
  .processo-lista { grid-template-columns: 1fr; }

  .rodape-topo { grid-template-columns: 1fr; }
  .rodape-credito { margin-left: 0; }
  /* a quebra manual só faz sentido onde a linha é larga */
  .quebra-desk { display: none; }
  /* a barra fixa substitui o botão flutuante nesta faixa */
  .whats { display: none; }

  .linha-botoes .botao { flex: 1 1 240px; }
  .linha-botoes .botao-texto { flex: 0 0 auto; }
}

/* ==========================================================================
   Movimento reduzido — obrigatório
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .revelar,
  .js .revelar-filhos > *,
  .entra { opacity: 1; translate: 0 0; }
  .hero-midia img { opacity: 1; scale: 1; }
  .esteira-fita { animation: none; }
  .esteira { mask-image: none; overflow-x: auto; }
  .js .processo-lista > li::after { scale: 1 1; }
}

/* ==========================================================================
   Páginas internas
   ========================================================================== */

/* ---------- hero interno ---------- */

.hero-interno {
  position: relative;
  padding-block: clamp(150px, 16vw, 220px) clamp(56px, 7vw, 96px);
  background: var(--bg-dark);
  color: var(--text-on-dark);
  --fg: var(--text-on-dark);
  --fg-mut: var(--text-on-dark-mut);
  --hairline: var(--hairline-dark);
  overflow: hidden;
}
.hero-interno-midia { position: absolute; inset: 0; z-index: 0; }
.hero-interno-midia img { width: 100%; height: 100%; object-fit: cover; }
.hero-interno-midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14,14,14,.9) 0%, rgba(14,14,14,.6) 45%, var(--bg-dark) 100%),
    linear-gradient(90deg, rgba(14,14,14,.86) 0%, rgba(14,14,14,.3) 70%, transparent 100%);
}
.hero-interno .container { position: relative; z-index: 1; }
.hero-interno h1 {
  margin-top: 20px;
  max-width: 20ch;
  font-size: clamp(2.25rem, 5vw, 4rem);
}
.hero-interno > .container > p {
  margin-top: 24px;
  max-width: 58ch;
  color: rgba(255, 255, 255, .78);
}
.hero-interno .linha-botoes { margin-top: 34px; }

/* ---------- breadcrumb ---------- */

.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .55);
}
.trilha a { transition: color .25s var(--ease); }
.trilha a:hover { color: #fff; }
.trilha span[aria-hidden] { opacity: .5; }
.trilha [aria-current] { color: #fff; }

/* ---------- prosa ---------- */

.prosa { max-width: 68ch; }
.prosa > * + * { margin-top: 20px; }
.prosa h2 { margin-top: clamp(38px, 4vw, 56px); }
.prosa h3 { margin-top: clamp(28px, 3vw, 40px); }
.prosa ul { display: grid; gap: 10px; margin-top: 18px; }
.prosa ul li {
  position: relative;
  padding-left: 22px;
  color: var(--fg-mut);
}
.prosa ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 1.5px;
  background: var(--red);
}
.prosa-dupla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  max-width: none;
}
.prosa-dupla > div > * + * { margin-top: 20px; }

/* ---------- grade genérica de cards ---------- */

.grade-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(40px, 4vw, 60px);
}

.card-simples {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(26px, 3vw, 36px);
  background: rgba(0, 0, 0, .035);
  border-radius: var(--radius);
  transition: background .3s var(--ease);
}
.em-escuro .card-simples { background: var(--surface); }
.card-simples:hover { background: var(--red-tint); }
.card-simples p { font-size: .9375rem; }
.card-simples .link-seta { margin-top: auto; padding-top: 10px; }
.card-simples-indice {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

/* ---------- lista de segmentos ---------- */

.segmentos-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(40px, 4vw, 60px);
}
.segmento {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  background: rgba(0, 0, 0, .035);
  border-radius: var(--radius);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.em-escuro .segmento { background: var(--surface); }
.segmento:hover { background: var(--red-tint); color: var(--red); }
.segmento b {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 600;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.segmento span { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; }

/* ---------- formulário ---------- */

.form-grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-size: .8125rem; font-weight: 500; color: var(--fg); }
.campo label .req { color: var(--red); }
.campo input,
.campo select,
.campo textarea {
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--fg);
  background: rgba(0, 0, 0, .04);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--red);
  background: rgba(0, 0, 0, .02);
}
.campo[data-erro="true"] input,
.campo[data-erro="true"] select,
.campo[data-erro="true"] textarea { border-color: var(--red); }
.campo-erro {
  display: none;
  font-size: .8125rem;
  color: var(--red);
}
.campo[data-erro="true"] .campo-erro { display: flex; align-items: center; gap: 6px; }
.campo[data-erro="true"] .campo-erro::before { content: "!"; font-weight: 700; }

.consentimento {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .8125rem;
  color: var(--fg-mut);
}
.consentimento input {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--red);
}
.consentimento a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.formulario > .botao { grid-column: 1 / -1; justify-self: start; }
.aviso-form {
  grid-column: 1 / -1;
  display: none;
  padding: 16px 18px;
  font-size: .9375rem;
  border-radius: var(--radius);
  background: var(--red-tint);
  color: var(--fg);
}
.aviso-form[data-estado="erro"],
.aviso-form[data-estado="ok"] { display: block; }
.aviso-form[data-estado="ok"] { background: rgba(0, 0, 0, .05); }

.dados-contato { display: grid; gap: 26px; margin-top: 34px; min-width: 0; }
.dados-contato div { min-width: 0; }
.dados-contato div small {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-mut);
  margin-bottom: 8px;
}
.dados-contato div a,
.dados-contato div p {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--fg);
  /* e-mail longo não pode estourar a coluna no mobile */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dados-contato div a { transition: color .25s var(--ease); }
.dados-contato div a:hover { color: var(--red); }

/* ---------- 404 ---------- */

.pagina-404 {
  min-height: 78svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 160px 100px;
}
.pagina-404 .codigo {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--red);
}
.pagina-404 h1 { margin-top: 20px; font-size: clamp(1.75rem, 4vw, 2.75rem); }
.pagina-404 p { margin: 20px auto 0; max-width: 46ch; }
.pagina-404 .linha-botoes { margin-top: 34px; justify-content: center; }

/* ---------- responsivo das internas ---------- */

@media (max-width: 1199px) {
  .grade-cards { grid-template-columns: repeat(2, 1fr); }
  .segmentos-grade { grid-template-columns: repeat(2, 1fr); }
  .form-grade { grid-template-columns: 1fr; }
  .prosa-dupla { grid-template-columns: 1fr; }
}

@media (max-width: 809px) {
  .grade-cards,
  .segmentos-grade { grid-template-columns: 1fr; }

  /* O grid do formulário precisa de minmax(0,1fr): com 1fr puro, campo e
     select não encolhem abaixo do conteúdo e estouram a coluna. */
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .campo { min-width: 0; }
  .campo input,
  .campo select,
  .campo textarea { max-width: 100%; }

  .form-grade { grid-template-columns: minmax(0, 1fr); }

  .hero-interno { padding-block: 104px 48px; }
  .hero-interno h1 { font-size: clamp(1.75rem, 7.6vw, 2.25rem); }
  .hero-interno > .container > p { font-size: .9375rem; }
  .trilha { font-size: .75rem; }
}

/* ==========================================================================
   Blog
   ========================================================================== */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: .75rem;
  color: var(--fg-mut);
}
.post-meta .post-cat {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.post-meta time,
.post-meta span:not(.post-cat) { font-variant-numeric: tabular-nums; }

/* destaque do topo do blog */
.post-destaque {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 28px);
  background: rgba(0, 0, 0, .035);
  border-radius: var(--radius);
  transition: background .3s var(--ease);
}
.post-destaque:hover { background: var(--red-tint); }
.post-destaque-figura {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.post-destaque-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .6s var(--ease);
}
.post-destaque:hover .post-destaque-figura img { scale: 1.04; }
.post-destaque-corpo { display: grid; gap: 16px; }
.post-destaque h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.post-destaque:hover h2 { color: var(--red); }
.post-destaque h2 { transition: color .25s var(--ease); }

/* grade de artigos */
.grade-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(40px, 4vw, 64px);
}
.post-card { display: flex; flex-direction: column; }
.post-card-figura {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface);
}
.post-card-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .6s var(--ease);
}
.post-card:hover .post-card-figura img { scale: 1.05; }
.post-card-corpo { display: grid; gap: 12px; padding-top: 20px; }
.post-card h3 { font-size: 1.125rem; }
.post-card h3 a { transition: color .25s var(--ease); }
.post-card:hover h3 a { color: var(--red); }
.post-card p { font-size: .9375rem; }

/* hero do artigo — mais baixo que o das outras internas */
.hero-post { padding-block: clamp(140px, 14vw, 190px) clamp(48px, 6vw, 80px); }
.hero-post h1 { max-width: 22ch; font-size: clamp(2rem, 4.2vw, 3.25rem); margin-top: 18px; }

/* corpo do artigo */
.artigo { max-width: 68ch; margin-inline: auto; }
.artigo h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin-top: clamp(40px, 4vw, 60px);
}
.artigo h2:first-child { margin-top: 0; }
.artigo p { font-size: 1.0625rem; line-height: 1.7; }

@media (max-width: 1199px) {
  .grade-posts { grid-template-columns: repeat(2, 1fr); }
  .post-destaque { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .grade-posts { grid-template-columns: 1fr; }
  .hero-post { padding-block: 104px 44px; }
  .hero-post h1 { font-size: clamp(1.6rem, 7.2vw, 2.1rem); }
}

/* <picture> é só um invólucro para a fonte WebP. display:contents tira ele
   do fluxo para o <img> continuar sendo o item de flex ou grid — sem isso,
   o dimensionamento dos logos e das figuras mudaria. */
picture { display: contents; }

/* ==========================================================================
   Ajustes de revisão — 12/08/2026
   ========================================================================== */

/* ---- CTA do header e do menu nunca quebram linha ---- */
.cabecalho .botao-primario,
.nav-principal a,
.drawer nav a,
.drawer-rodape .botao {
  white-space: nowrap;
}

/* ---- sticky ----
   O reveal aplica translate, e translate no mesmo elemento que é sticky
   desloca o ponto de grude e faz o card tremer durante a transição. O
   reveal saiu dos cards e passou para o container da pilha. */
.js .obras-pilha .obra { opacity: 1; translate: none; }

/* Espaço para os três cards ficarem empilhados e legíveis antes de saírem.
   Com o spacer curto anterior, os três desgrudavam juntos assim que o
   container acabava — o solavanco que aparecia no scroll. */
.obras-pilha::after { height: clamp(120px, 34vh, 320px); }

/* ---- rodapé: ações lado a lado sob a marca ---- */
.rodape-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.rodape-acoes .botao { flex: 0 0 auto; }

/* ---- blog: sem data na prévia ---- */
.post-card .post-meta time,
.post-destaque .post-meta time { display: none; }

/* ---- carrossel de artigos relacionados ---- */
.carrossel { position: relative; margin-top: clamp(32px, 4vw, 52px); }

.carrossel-trilho {
  --gap-carrossel: clamp(18px, 2.2vw, 28px);
  display: grid;
  grid-auto-flow: column;
  /* largura fixa, nao minmax: com minimo 0 as colunas encolhem para caber
     e o trilho nunca transborda — o carrossel viraria uma grade estatica */
  grid-auto-columns: 80%;
  gap: var(--gap-carrossel);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho > * { scroll-snap-align: start; }

@media (min-width: 600px) {
  .carrossel-trilho { grid-auto-columns: calc((100% - var(--gap-carrossel)) / 2); }
}
@media (min-width: 1024px) {
  .carrossel-trilho { grid-auto-columns: calc((100% - 2 * var(--gap-carrossel)) / 3); }
}

.carrossel-controles {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
.carrossel-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--fg);
  background: rgba(255, 255, 255, .08);
  transition: background .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.em-claro .carrossel-btn { background: rgba(0, 0, 0, .05); }
.carrossel-btn:hover { background: var(--red); color: #fff; }
.carrossel-btn[disabled] { opacity: .3; pointer-events: none; }
.carrossel-btn svg { width: 17px; height: 17px; }

/* Reveal sem translate.
   translate — no proprio elemento sticky OU em qualquer ancestral dele —
   desloca o ponto de grude e cria containing block, entao o card grudava
   24px abaixo do declarado e tremia durante a transicao. Onde convive com
   sticky, o reveal anima so a opacidade. */
.js .revelar-op { opacity: 0; transition: opacity .8s var(--ease); }
.js .revelar-op.visivel { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .revelar-op { opacity: 1; }
}

/* ==========================================================================
   CTA final — faixa
   Desvio consciente do §3, que proíbe vermelho como fundo de seção:
   pedido do cliente em 12/08/2026. Branco sobre #C82A2A dá 5,50:1, acima
   do mínimo AA de 4,5:1.
   ========================================================================== */

.cta-final {
  background: var(--red);
  color: #fff;
  --fg: #fff;
  --fg-mut: rgba(255, 255, 255, .85);
  padding-block: clamp(40px, 4.6vw, 64px);
  overflow: visible;
}
.cta-final::before { content: none; }

.cta-grade {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}
.cta-final .sobrancelha { color: #fff; }
.cta-final .sobrancelha::before { background: #fff; }
.cta-final h2 {
  max-width: 26ch;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: #fff;
}
.cta-final p {
  margin-top: 10px;
  max-width: 56ch;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .85);
}

/* Vazado: hover preenche de branco. */
.botao-vazado {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.botao-vazado:hover {
  background: #fff;
  border-color: #fff;
  color: var(--red);
}

/* Secundário branco: hover vira preto. */
.botao-branco {
  background: #fff;
  color: var(--red);
  border-color: #fff;
}
.botao-branco:hover {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: #fff;
}

@media (max-width: 1023px) {
  .cta-grade { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 809px) {
  .cta-final .linha-botoes .botao { flex: 1 1 100%; }
}

/* ==========================================================================
   Utilitários
   Substituem os atributos style=""; sem eles a CSP precisaria de
   'unsafe-inline' em style-src, o que derruba boa parte da proteção.
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-6 { margin-top: 6px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-44 { margin-top: 44px; }
.mt-secao { margin-top: clamp(40px, 5vw, 72px); }
.pt-0 { padding-top: 0; }
.sem-max { max-width: none; }
.oculto { display: none; visibility: hidden; }

.moldura { border-radius: var(--radius); overflow: hidden; }
.img-16-9 { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.entra-1 { animation-delay: .15s; }
.entra-2 { animation-delay: .25s; }
.entra-3 { animation-delay: .40s; }
.entra-4 { animation-delay: .52s; }
.entra-5 { animation-delay: .64s; }

/* O "Ver apresentação" na faixa: o sublinhado vermelho sumiria no fundo
   vermelho, então vira branco. */
.cta-final .botao-texto { color: #fff; }
.cta-final .botao-texto::after { background: #fff; }
.cta-final .botao-texto:hover { color: #fff; opacity: .82; }

/* Armadilha de robo: fora da tela, fora do fluxo e fora do leitor de tela.
   display:none seria ignorado por parte dos bots, entao usa posicionamento. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* No mobile o header fica só com logo e hambúrguer.
   O orçamento não some: a barra fixa de 60px o mantém sempre à mão, e ele
   segue no drawer. Em tablet o CTA continua no header, porque lá a barra
   fixa não existe e o drawer seria o único caminho.
   Fica no fim do arquivo de propósito: a regra base de .cabecalho .botao-primario
   vem antes e venceria por ordem de fonte. */
@media (max-width: 809px) {
  .cabecalho > .container > .botao-primario { display: none; }
}