@charset "utf-8";
/* =========================================================================
   Confianto Pré-Fabricados — folha principal
   Paleta e tipografia derivadas da marca real (ver design-system/).
   Mobile-first. Zero overflow horizontal de 320px em diante.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Marca — amostrada do logotipo oficial */
  --navy-900: #0f1b2b;
  --navy-800: #12243a;
  --navy-700: #1c3049;
  --navy-600: #293f58;
  --navy-400: #4a5a6e;
  --navy-200: #c6d0dc;

  --terra-700: #7a3229;
  --terra-600: #8e3f33;
  --terra-500: #a64a42;
  --terra-300: #e08b6f; /* acento sobre navy-800 — 6,04:1 */
  --terra-200: #efa890; /* acento sobre navy-600 — 5,48:1 */
  --maroon: #601912;

  --branco: #fff;
  --areia: #f5f7f9;
  --areia-2: #eaeef2;
  --tinta: #0f1b2b;

  /* Papéis semânticos — tema claro (padrão) */
  --bg: var(--branco);
  --bg-alt: var(--areia);
  --texto: var(--tinta);
  --texto-2: var(--navy-400);
  --titulo: var(--navy-600);
  --borda: var(--areia-2);
  --acento: var(--terra-500);
  --acento-texto: var(--terra-600);

  /* Tipografia */
  --f-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-corpo: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs-display: clamp(1.95rem, 1.1rem + 3.4vw, 3.75rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem);
  --fs-h2: clamp(1.35rem, 1.05rem + 1.75vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem);
  --fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.35vw, 1.25rem);
  --fs-small: 0.875rem;
  --fs-overline: 0.75rem;
  --medida: 62ch;

  /* Espaço */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --e-9: 96px; --e-10: 128px;
  --sec-y: clamp(64px, 8vw, 112px);
  --sec-y-lg: clamp(88px, 11vw, 152px);
  --sec-y-sm: clamp(48px, 6vw, 72px);
  --header-h: 76px;

  /* Forma */
  --r-2: 2px;  --r-4: 4px;  --r-10: 10px; --r-18: 18px;
  /* Chanfro: o canto inferior direito cortado em diagonal é a assinatura
     geométrica do site. Lê como peça pré-fabricada cortada com precisão —
     e é o que dá identidade sem depender de ornamento. */
  --chanfro: 44px;
  --chanfro-sm: 28px;
  --sombra-card: 0 1px 2px rgb(15 27 43 / 6%), 0 8px 24px -12px rgb(15 27 43 / 18%);
  --sombra-alta: 0 2px 4px rgb(15 27 43 / 8%), 0 24px 56px -20px rgb(15 27 43 / 28%);

  /* Movimento */
  --e-saida: cubic-bezier(0.16, 0.84, 0.28, 1);
  --e-ui: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Seções escuras: trocam os papéis, não as cores dos componentes */
[data-bg="dark"] {
  --bg: var(--navy-800);
  --bg-alt: var(--navy-700);
  --texto: var(--branco);
  --texto-2: var(--navy-200);
  --titulo: var(--branco);
  --borda: rgb(255 255 255 / 14%);
  --acento-texto: var(--terra-300);
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* auto: as âncoras são conduzidas pelo motor de movimento (motion.js §4-A) */
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  /* `clip` e não `hidden`: hidden transformaria o html em scroll container e
     quebraria o position:sticky/parallax. Necessário porque o deslocamento
     lateral do reveal e a nav off-canvas passam da borda enquanto animam. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* par do html; ver comentário acima */
}

img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--e-4); max-width: var(--medida); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--titulo);
  line-height: 1.08;
  letter-spacing: -0.021em;
  margin: 0 0 var(--e-4);
  font-weight: 700;
  text-wrap: pretty;
}

/* Título curto: equilibrar as linhas vale mais do que encher a primeira.
   `pretty` só protege a última linha; `balance` distribui todas — é o que tira
   a viúva de "diferente" e a linha de 37% de "já de pé". Verificado em 11
   larguras com _raw/medir-linhas.js. */
h1, h2 { text-wrap: balance; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; letter-spacing: -0.012em; }

a { color: var(--acento-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terra-700); }
[data-bg="dark"] a:hover { color: var(--branco); }

strong { font-weight: 600; color: var(--texto); }

/* Foco visível — nunca removido (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--terra-500);
  outline-offset: 3px;
  border-radius: var(--r-2);
}
[data-bg="dark"] :focus-visible { outline-color: var(--terra-300); }

.pular-para-conteudo {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-4);
  font-weight: 600;
  transition: top 0.2s var(--e-ui);
}
.pular-para-conteudo:focus { top: var(--e-4); color: #fff; }

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 3. Layout ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--e-5);
}

.secao {
  position: relative;
  padding-block: var(--sec-y);
  background: var(--bg);
  color: var(--texto);
}
.secao--lg { padding-block: var(--sec-y-lg); }
.secao--sm { padding-block: var(--sec-y-sm); }
/* --bg também muda: elementos que precisam casar com o fundo da seção
   (o círculo numerado da timeline, por exemplo) leem essa variável. */
.secao--alt { --bg: var(--bg-alt); background: var(--bg-alt); }
.secao--escura { background: var(--navy-800); }

/* Cabeçalho de seção: overline + h2 + lead. Alinhado à esquerda por padrão. */
.cabecalho-secao { margin-bottom: var(--e-7); max-width: 54rem; }
.cabecalho-secao p { color: var(--texto-2); font-size: var(--fs-lead); }

/* Variante editorial: título grande à esquerda, texto de apoio e CTA à direita.
   Empilha no mobile; o par só existe a partir de 900px. */
.cabecalho-secao--duplo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-5);
  max-width: none;
  margin-bottom: var(--e-8);
  align-items: start;
}
.cabecalho-secao--duplo h2 { max-width: 20ch; margin-bottom: 0; }
.cabecalho-secao--duplo .cabecalho-secao__apoio p { font-size: var(--fs-body); max-width: 46ch; }
.cabecalho-secao--duplo .acoes { margin-top: var(--e-5); }

.overline {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--e-4);
}
.lead { font-size: var(--fs-lead); color: var(--texto-2); }


/* ---------- 3b. Chanfro ---------------------------------------------------
   Duas camadas na mesma tag, sem aninhar cartão dentro de cartão: o elemento
   pinta a borda e o ::before pinta o preenchimento 1px para dentro. `clip-path`
   corta box-shadow junto, então quem usa chanfro é flat de propósito — a
   hierarquia vem da borda e do fundo, não de sombra.
   -------------------------------------------------------------------------- */
.chanfro {
  position: relative;
  background: var(--borda);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%,
    0 100%
  );
}
.chanfro::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  background: var(--superficie, var(--branco));
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro) + 1px),
    calc(100% - var(--chanfro) + 1px) 100%,
    0 100%
  );
  pointer-events: none;
  transition: background 0.3s var(--e-ui);
}
.chanfro > * { position: relative; z-index: 1; }

/* Só o corte, sem camada de borda — para imagens e blocos já preenchidos. */
.chanfro-corte {
  border-radius: 0;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%,
    0 100%
  );
}
.chanfro-corte--sm { --chanfro: var(--chanfro-sm); }

@media (max-width: 559px) {
  :root { --chanfro: 30px; --chanfro-sm: 20px; }
}


/* ---------- 4. Botões ---------------------------------------------------- */
/* O rótulo e a seta são dois blocos separados por uma fresta de 3px. É o que
   dá ao CTA uma forma reconhecível de longe, em vez de "mais um botão". */
.btn {
  --btn-bg: var(--terra-500);
  --btn-fg: #fff;
  --btn-borda: var(--terra-500);
  display: inline-flex;
  align-items: stretch;
  gap: 3px;
  padding: 0;
  min-height: 50px; /* alvo de toque WCAG 2.5.8 */
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--f-corpo);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  color: var(--btn-fg);
}
.btn__txt,
.btn__ico {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-borda);
  transition: background 0.25s var(--e-ui), border-color 0.25s var(--e-ui),
              color 0.25s var(--e-ui);
}
.btn__txt {
  display: flex;
  align-items: center;
  padding: 0 26px;
}

/* Rede de segurança: .btn escrito à mão, sem o bloco de rótulo, se pinta
   sozinho — senão vira texto branco sobre fundo branco. */
.btn:not(:has(.btn__txt)) {
  align-items: center;
  padding: 0 26px;
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-borda);
}
.btn__ico {
  display: grid;
  place-items: center;
  width: 50px;
  flex: none;
}
.btn__ico .seta { transition: transform 0.28s var(--e-saida); }
.btn:hover { color: var(--btn-fg); }
.btn:hover .btn__ico .seta { transform: translate(3px, -3px); }
.btn:active { transform: scale(0.985); }
.btn:hover { --btn-bg: var(--terra-700); --btn-borda: var(--terra-700); }

.btn--secundario {
  --btn-bg: transparent;
  --btn-fg: var(--navy-600);
  --btn-borda: var(--navy-600);
}
.btn--secundario:hover {
  --btn-bg: var(--navy-600);
  --btn-fg: #fff;
  --btn-borda: var(--navy-600);
}

[data-bg="dark"] .btn--secundario,
.secao--escura .btn--secundario,
.hero .btn--secundario {
  --btn-fg: #fff;
  --btn-borda: rgb(255 255 255 / 55%);
}
[data-bg="dark"] .btn--secundario:hover,
.secao--escura .btn--secundario:hover,
.hero .btn--secundario:hover {
  --btn-bg: #fff;
  --btn-fg: var(--navy-800);
  --btn-borda: #fff;
}

.acoes { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-top: var(--e-6); }

/* Link com seta (terciário) */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentcolor;
  padding-bottom: 2px;
  min-height: 44px;
}
.link-seta .seta { transition: transform 0.25s var(--e-saida); }
.link-seta:hover .seta { transform: translateX(4px); }

/* ---------- 5. Header ---------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgb(15 27 43 / 92%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  transition: transform 0.4s var(--e-ui), background 0.35s var(--e-ui),
              padding 0.35s var(--e-ui);
}
.header[data-oculto="true"] { transform: translateY(-100%); }
.header[data-solido="true"] { background: rgb(15 27 43 / 98%); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--header-h);
}

.marca { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.marca img {
  height: 34px;
  width: auto;
  transition: height 0.35s var(--e-ui);
}
.header[data-solido="true"] .marca img { height: 29px; }

.nav { display: flex; align-items: center; gap: var(--e-2); }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e-3);
  color: rgb(255 255 255 / 88%);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s var(--e-ui);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--e-3);
  right: var(--e-3);
  bottom: 14px;
  height: 2px;
  background: var(--terra-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--e-saida);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: #fff; }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header .btn { min-height: 44px; font-size: 0.95rem; }
.header .btn__txt { padding: 0 18px; }
.header .btn__ico { width: 44px; }

.hamburguer {
  display: none;
  width: 48px; height: 48px;
  padding: 0;
  background: none;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: var(--r-4);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hamburguer span {
  display: block;
  width: 20px; height: 2px;
  background: currentcolor;
  position: relative;
  transition: background 0.2s var(--e-ui);
}
.hamburguer span::before,
.hamburguer span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: currentcolor;
  transition: transform 0.3s var(--e-saida);
}
.hamburguer span::before { top: -6px; }
.hamburguer span::after { top: 6px; }
.hamburguer[aria-expanded="true"] span { background: transparent; }
.hamburguer[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  /* Centralizado: com o conteúdo ancorado embaixo sobrava um vão grande entre
     o header e o texto, agora que o hero não tem mais a tira de números. */
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--e-7));
  padding-bottom: var(--e-8);
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}
.hero__fundo {
  position: absolute;
  inset: -6% 0 0;
  height: 112%;
  z-index: 0;
  will-change: transform;
}
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; }
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Véu funcional: garante AA no texto sobre foto. Não é decoração.
     Simétrico, porque o conteúdo passou a ser centralizado. */
  background:
    linear-gradient(to top, rgb(15 27 43 / 88%) 0%, rgb(15 27 43 / 62%) 45%, rgb(15 27 43 / 76%) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgb(15 27 43 / 62%), rgb(15 27 43 / 24%));
}
.hero .container { position: relative; z-index: 2; }
.hero__conteudo {
  /* Alinhado à borda esquerda do container — mesma origem da logo do header,
     que usa este mesmo .container. Nada de margin auto aqui. */
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}
.hero h1 {
  font-size: var(--fs-display);
  color: #fff;
  /* Medida larga + `balance`: a copy do hero é do cliente e não pode encurtar,
     então o ajuste é tipográfico. Medido em _raw/medir-linhas.js. */
  max-width: 34ch;
  text-wrap: balance;
  margin-bottom: var(--e-5);
}
.hero .lead { color: rgb(255 255 255 / 90%); max-width: 52ch; }
.hero .lead strong { color: #fff; font-weight: 600; }
.hero .overline { color: var(--terra-300); }

.hero__specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid rgb(255 255 255 / 22%);
}
.hero__spec dt {
  font-family: var(--f-mono);
  font-size: var(--fs-overline);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-200);
  margin-bottom: var(--e-1);
}
.hero__spec dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Hero curto de página interna */
.hero--interno {
  /* Mesma caixa do hero da home — herda min-height, padding e alinhamento.
     Só o corpo do título muda (abaixo), porque os títulos internos são curtos
     e no tamanho de display ficariam desproporcionais nessa altura. */
  align-items: center;
}
.hero--interno h1 { font-size: var(--fs-h1); max-width: 22ch; }
.hero--interno .hero__veu {
  background:
    linear-gradient(to top, rgb(15 27 43 / 86%), rgb(15 27 43 / 70%)),
    radial-gradient(ellipse 76% 70% at 50% 50%, rgb(15 27 43 / 58%), rgb(15 27 43 / 28%));
}

/* ---------- 7. Faixa de região -------------------------------------------- */
.regiao {
  background: var(--navy-600);
  color: #fff;
  padding-block: var(--sec-y-sm);
}
.regiao__inner { display: grid; grid-template-columns: 1fr; gap: var(--e-6); }
.regiao__texto h2 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); max-width: 20ch; }
.regiao__texto .overline { color: var(--terra-200); }
.regiao__texto p { color: rgb(255 255 255 / 88%); font-size: var(--fs-small); }

.regiao { position: relative; overflow: hidden; }

/* Mapa do Brasil ao fundo com o raio de 300 km marcado a partir de Ampére.
   Puramente ambiental: aria-hidden, e nenhuma informação existe só nele. */
.regiao__fundo {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  height: 168%;
  aspect-ratio: 100 / 98.3;
  color: var(--terra-200);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.regiao__mapa { width: 100%; height: 100%; }
.regiao .container { position: relative; z-index: 1; }

.regiao__cidades {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3) var(--e-5);
  align-content: center;
}
.cidade {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: rgb(255 255 255 / 82%);
}
.cidade svg { flex: none; margin-top: 1px; color: var(--terra-200); }
.cidade strong {
  display: block;
  color: #fff;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cidade--sede svg { color: #fff; }
.cidade--sede strong::after {
  content: "sede";
  display: inline-block;
  margin-left: var(--e-2);
  padding: 2px 7px;
  vertical-align: 2px;
  background: var(--terra-500);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- 8. Split imagem + texto -------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-7);
  align-items: center;
}
.split__figura { margin: 0; position: relative; }
.split__figura img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%,
    0 100%
  );
}
.split__texto > p { color: var(--texto-2); }

/* Selo sobre a figura — dado técnico, não enfeite */
/* O selo fica no canto INFERIOR ESQUERDO: o direito agora é o chanfro. */
.selo-figura {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--branco);
  color: var(--navy-600);
  padding: var(--e-4) var(--e-5);
  border-radius: 0;
  border-top: 3px solid var(--terra-500);
  max-width: 68%;
}
.selo-figura strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--navy-600);
  font-variant-numeric: tabular-nums;
}
.selo-figura span {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--fs-small);
  color: var(--navy-400);
  line-height: 1.35;
}

/* Lista de checagem — usada dentro de splits */
.lista-check { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
.lista-check li {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  font-weight: 500;
  color: var(--texto);
}
.lista-check svg { flex: none; margin-top: 4px; color: var(--acento-texto); }

/* ---------- 9. Processo (timeline vertical que desenha) ------------------ */
.processo { position: relative; display: grid; gap: var(--e-7); }
.processo::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--borda);
  transform: scaleY(var(--linha, 1));
  transform-origin: top;
  transition: transform 1.2s var(--e-saida);
}
.etapa { display: grid; grid-template-columns: 48px 1fr; gap: var(--e-5); align-items: start; }
.etapa__num {
  /* posicionado + z-index: sem isto a linha do ::before (que é absoluta) pinta
     POR CIMA do círculo, porque elemento posicionado vence conteúdo estático */
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--borda);
  font-family: var(--f-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--texto-2);
  transition: border-color 0.35s var(--e-ui), color 0.35s var(--e-ui),
              box-shadow 0.35s var(--e-ui);
}
/* O estado ativo troca BORDA e COR DO TEXTO, nunca o fundo.
   Trocar fundo claro<->escuro junto com texto escuro<->claro faz a transição
   passar por um estado de contraste baixo: qualquer ordem que se escolha,
   existe uma fração de segundo com texto claro sobre fundo claro (ou o
   contrário). Mantendo o fundo, o número é sempre escuro sobre claro —
   #8E3F33 sobre branco dá 7,22:1 em qualquer ponto da animação. */
.etapa[data-ativa] .etapa__num {
  border-color: var(--terra-500);
  color: var(--acento-texto);
  box-shadow: 0 0 0 4px rgb(166 74 66 / 12%);
}
.etapa h3 { margin-bottom: var(--e-2); }
.etapa p { color: var(--texto-2); margin: 0; }

/* ---------- 10. Faixa full-bleed com parallax ---------------------------- */
.faixa {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 56vw, 560px);
  padding-block: var(--sec-y);
  background: var(--navy-900);
  overflow: hidden;
  color: #fff;
}
.faixa__fundo { position: absolute; inset: -8% 0 0; height: 116%; z-index: 0; will-change: transform; }
.faixa__fundo img { width: 100%; height: 100%; object-fit: cover; }
.faixa__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, rgb(15 27 43 / 88%) 0%, rgb(15 27 43 / 58%) 55%, rgb(15 27 43 / 34%) 100%);
}
.faixa .container { position: relative; z-index: 2; }
.faixa__citacao {
  max-width: 24ch;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.faixa__assinatura {
  margin-top: var(--e-5);
  font-family: var(--f-mono);
  font-size: var(--fs-overline);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra-300);
}

/* Faixa só-imagem (respiro entre seções de conteúdo) */
.faixa-imagem { position: relative; height: clamp(220px, 34vw, 420px); overflow: hidden; }
.faixa-imagem__fundo { position: absolute; inset: -8% 0 0; height: 116%; will-change: transform; }
.faixa-imagem img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 11. Portfólio ------------------------------------------------ */
.grade-obras {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-5);
}

.obra {
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--e-saida), background 0.3s var(--e-ui);
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
}
.obra:hover, .obra:focus-visible {
  transform: translateY(-5px);
  background: var(--terra-500); /* a camada de borda do chanfro vira acento */
}
.obra:hover::before, .obra:focus-visible::before { background: var(--areia); }
.obra__capa { position: relative; overflow: hidden; background: var(--areia-2); }
.obra__capa img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--e-saida);
}
.obra:hover .obra__capa img, .obra:focus-visible .obra__capa img { transform: scale(1.045); }

.obra__lupa {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--terra-500);
  color: #fff;
  opacity: 0;
  transform: translate(6px, -6px);
  transition: opacity 0.3s var(--e-ui), transform 0.35s var(--e-saida);
}
.obra:hover .obra__lupa, .obra:focus-visible .obra__lupa { opacity: 1; transform: none; }

.obra__corpo { padding: var(--e-5); display: flex; flex-direction: column; flex: 1; }
.obra__cidade {
  font-family: var(--f-mono);
  font-size: var(--fs-overline);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-600);
  margin-bottom: var(--e-2);
}
.obra h3 { margin-bottom: var(--e-3); color: var(--navy-600); }
.obra__specs { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.obra__rodape {
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--borda);
  font-size: var(--fs-small);
  color: var(--navy-400);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 500;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--r-2);
  background: var(--areia);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--navy-600);
  font-variant-numeric: tabular-nums;
}
[data-bg="dark"] .chip { background: rgb(255 255 255 / 8%); color: #fff; }

/* Obra em destaque (quebra a simetria da grade) */
.destaque {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--navy-800);
  color: #fff;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%,
    0 100%
  );
}
.destaque__figura { position: relative; margin: 0; min-height: 260px; }
.destaque__figura img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.destaque__corpo { padding: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.destaque__corpo h2,
.destaque__corpo h3 {
  color: #fff;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 700;
}
.destaque__corpo p { color: var(--navy-200); }
.destaque .obra__cidade { color: var(--terra-300); }
.destaque .chip { background: rgb(255 255 255 / 9%); border-color: rgb(255 255 255 / 18%); color: #fff; }

/* ---------- 12. Clientes (marquee) --------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--e-5);
  /* desvanece as bordas sem esconder conteúdo essencial */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__trilha {
  display: flex;
  gap: var(--e-7);
  width: max-content;
  animation: correr 52s linear infinite;
}
.marquee:hover .marquee__trilha,
.marquee:focus-within .marquee__trilha { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }

/* Os arquivos já vêm com fundo transparente (_raw/logos-transparentes.py):
   nada de caixa branca em volta, e o logotipo pousa direto sobre a seção. */
.cliente-logo {
  flex: none;
  width: 158px;
  height: 74px;
  display: grid;
  place-items: center;
  padding: 0 var(--e-3);
}
.cliente-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.35s var(--e-ui), opacity 0.35s var(--e-ui);
}
.marquee:hover .cliente-logo img,
.grade-clientes .cliente-logo:hover img { filter: grayscale(0); opacity: 1; }

/* Grade estática de clientes (fallback acessível / página interna) */
.grade-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--e-4);
}
.grade-clientes .cliente-logo { width: 100%; height: 84px; }

/* ---------- 13. Diferenciais (assimétrico, não grid de 4 iguais) --------- */
.pilares { display: grid; grid-template-columns: 1fr; gap: var(--e-6); }
.pilar {
  padding-top: var(--e-5);
  border-top: 2px solid var(--terra-500);
}
.pilar__icone { color: var(--acento-texto); margin-bottom: var(--e-4); }
.pilar h3 { margin-bottom: var(--e-2); }
.pilar p { color: var(--texto-2); margin: 0; font-size: var(--fs-small); line-height: 1.6; }
.pilar--largo { grid-column: 1 / -1; }


/* ---------- 13b. Setores atendidos ---------------------------------------
   Lista densa de segmentos com a foto correspondente trocando ao lado. Cabe
   muito mais informação do que uma grade de cards, e cada linha é um destino
   real de leitura — não um cartão decorativo.
   -------------------------------------------------------------------------- */
.setores { display: grid; grid-template-columns: 1fr; gap: var(--e-7); align-items: start; }

.setores__palco {
  position: relative;
  aspect-ratio: 4 / 3;
  /* em coluna (>=900px) vira retrato para acompanhar a altura da lista */
  background: var(--areia-2);
  overflow: hidden;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%,
    0 100%
  );
}
.setores__palco img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s var(--e-saida), transform 0.9s var(--e-saida);
}
.setores__palco img[data-ativa] { opacity: 1; transform: none; }

.setores__lista { display: grid; }

.setor {
  border-top: 1px solid var(--borda);
}
.setor:last-child { border-bottom: 1px solid var(--borda); }

.setor__botao {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--e-4);
  width: 100%;
  min-height: 64px;
  padding: var(--e-4) 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--texto);
  transition: color 0.25s var(--e-ui);
}
.setor__nome {
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
/* Marcador de seleção, não promessa de navegação: este botão troca a foto ao
   lado e nada mais. Quem navega é o CTA "Ver o portfólio completo" da seção. */
.setor__marca {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border: 1px solid var(--borda);
  transition: border-color 0.25s var(--e-ui);
}
.setor__marca::after {
  content: "";
  width: 10px; height: 10px;
  background: var(--borda);
  transform: scale(0.6);
  transition: background 0.25s var(--e-ui), transform 0.3s var(--e-saida);
}

.setor[data-ativo="true"] .setor__botao { color: var(--acento-texto); }
.setor[data-ativo="true"] .setor__marca { border-color: var(--terra-500); }
.setor[data-ativo="true"] .setor__marca::after {
  background: var(--terra-500);
  transform: scale(1);
}
.setor[data-ativo="true"] { border-top-color: var(--terra-500); box-shadow: 0 -2px 0 0 var(--terra-500); }
.setor__botao:hover .setor__marca { border-color: var(--terra-500); }

.setor__clientes {
  display: block;
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* ---------- 14. Serviços (zigzag) ---------------------------------------- */
.servico { display: grid; grid-template-columns: 1fr; gap: var(--e-7); align-items: center; }
.servico + .servico { margin-top: var(--sec-y); padding-top: var(--sec-y); border-top: 1px solid var(--borda); }
.servico__figura { margin: 0; }
.servico__figura img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%,
    0 100%
  );
}
.servico__marcador {
  font-family: var(--f-mono);
  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--acento-texto);
  margin-bottom: var(--e-3);
  display: block;
}
.servico ul.lista-check { margin-top: var(--e-5); }

/* ---------- 15. FAQ ------------------------------------------------------ */
.faq { display: grid; gap: 0; max-width: 52rem; }
.faq__item { border-bottom: 1px solid var(--borda); }
.faq__item:first-child { border-top: 1px solid var(--borda); }
.faq__botao {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-5);
  width: 100%;
  padding: var(--e-5) 0;
  min-height: 56px;
  background: none;
  border: 0;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--titulo);
  text-align: left;
  cursor: pointer;
}
.faq__sinal { flex: none; position: relative; width: 20px; height: 20px; margin-top: 4px; }
.faq__sinal::before, .faq__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: var(--terra-500);
  transition: transform 0.35s var(--e-saida);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq__botao[aria-expanded="true"] .faq__sinal::after { transform: rotate(0deg); }
.faq__resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--e-saida); }
.faq__item[data-aberto="true"] .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta > div { overflow: hidden; }
.faq__resposta p { color: var(--texto-2); padding-bottom: var(--e-5); }

/* ---------- 16. CTA final — "Como funciona" ------------------------------ */
.cta-final { position: relative; background: var(--navy-800); color: #fff; overflow: hidden; }
.cta-final__fundo { position: absolute; inset: 0; z-index: 0; opacity: 0.22; }
.cta-final__fundo img { width: 100%; height: 100%; object-fit: cover; }
.cta-final .container { position: relative; z-index: 1; }
.cta-final__conteudo { max-width: 54rem; }
.cta-final h2 { color: #fff; max-width: 34ch; }
.cta-final .lead { color: var(--navy-200); }

.passos {
  position: relative;
  display: grid;
  gap: var(--e-6);
  margin-top: var(--e-7);
  padding-left: var(--e-7);
}
.passos::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--terra-500);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--e-saida) 0.1s;
}
.passos[data-visivel="true"]::before { transform: scaleY(1); }

.passo {
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--e-saida), transform 0.7s var(--e-saida);
}
.passos[data-visivel="true"] .passo { opacity: 1; transform: none; }
.passos[data-visivel="true"] .passo:nth-child(1) { transition-delay: 0.18s; }
.passos[data-visivel="true"] .passo:nth-child(2) { transition-delay: 0.38s; }
.passos[data-visivel="true"] .passo:nth-child(3) { transition-delay: 0.58s; }

.passo::before {
  content: "";
  position: absolute;
  left: calc(var(--e-7) * -1 + 9px);
  top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--terra-500);
  border: 3px solid var(--navy-800);
}
.passo h3 { color: #fff; margin-bottom: var(--e-1); }
.passo p { color: var(--navy-200); margin: 0; font-size: var(--fs-small); }


/* ---------- 16b. Formulários (Trabalhe conosco / Fornecedores) ------------
   O site antigo captava currículo e cadastro de fornecedor por formulário com
   anexo. A copy do cliente cita o formulário explicitamente, então ele volta.
   O CTA de orçamento continua sendo botão — a regra da casa vale para CTA de
   venda, não para captação de currículo.
   -------------------------------------------------------------------------- */
.form {
  --superficie: var(--branco);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  padding: var(--e-6);
}
.form__campo { display: grid; gap: 6px; }
.form__campo--largo { grid-column: 1 / -1; }
.form label,
.form__rotulo-arquivo {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--texto);
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--r-4);
  font-family: var(--f-corpo);
  font-size: var(--fs-body);
  color: var(--texto);
}
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus-visible,
.form textarea:focus-visible { border-color: var(--terra-500); }

.form__arquivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}
/* O input real fica acessível ao teclado e ao leitor de tela, mas invisível:
   quem aparece é o <label> estilizado como botão. */
.form__arquivo input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.form__arquivo input[type="file"]:focus-visible + label {
  outline: 3px solid var(--terra-500);
  outline-offset: 3px;
}
.form__arquivo label { cursor: pointer; min-height: 44px; }
.form__arquivo-nome { font-size: var(--fs-small); color: var(--texto-2); }
.form__arquivo-limpar {
  padding: 0;
  min-height: 44px;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--acento-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.form__ajuda { font-size: 0.8rem; color: var(--texto-2); margin: 0; }
.form__acoes { grid-column: 1 / -1; margin-top: var(--e-2); }
.form__estado {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--acento-texto);
  font-weight: 500;
}
.form__estado:empty { display: none; }

@media (min-width: 620px) {
  .form { grid-template-columns: 1fr 1fr; gap: var(--e-4) var(--e-5); }
}

/* Timeline compacta: quando a etapa tem só o rótulo, sem parágrafo. */
.processo--compacto { gap: var(--e-5); }
.processo--compacto .etapa { align-items: center; }
.processo--compacto .etapa h3 { margin-bottom: 0; }

/* ---------- 17. Contato -------------------------------------------------- */
.cartoes-contato { display: grid; grid-template-columns: 1fr; gap: var(--e-5); }
.cartao-contato { padding: 0; }
.cartao-contato > * { padding-inline: var(--e-6); }
.cartao-contato > :first-child { padding-top: var(--e-6); }
.cartao-contato > :last-child { padding-bottom: calc(var(--e-6) + var(--e-3)); }
.cartao-contato__icone { color: var(--acento-texto); margin-bottom: var(--e-4); }
.cartao-contato h3 { margin-bottom: var(--e-3); }
.cartao-contato a { font-weight: 600; word-break: break-word; }
.cartao-contato p { color: var(--texto-2); font-size: var(--fs-small); }

.mapa {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-18);
  background: var(--areia-2);
}

/* ---------- 18. Conteúdo corrido (privacidade, etc.) --------------------- */
.prosa { max-width: 68ch; }
.prosa h2 { margin-top: var(--e-8); font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: var(--e-6); }
.prosa ul { list-style: disc; padding-left: 1.25em; margin: 0 0 var(--e-4); color: var(--texto-2); }
.prosa li { margin-bottom: var(--e-2); }
.prosa p { color: var(--texto-2); }

/* ---------- 19. Footer --------------------------------------------------- */
.footer { background: var(--navy-900); color: #fff; padding-block: var(--sec-y) var(--e-7); }
.footer__topo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-7);
  padding-bottom: var(--e-7);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}
.footer__marca img { height: 40px; width: auto; margin-bottom: var(--e-4); }
.footer__marca p { color: var(--navy-200); font-size: var(--fs-small); max-width: 34ch; }
.footer h2 {
  font-family: var(--f-mono);
  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra-300);
  margin-bottom: var(--e-4);
}
.footer ul { display: grid; gap: var(--e-2); }
.footer a {
  color: rgb(255 255 255 / 88%);
  text-decoration: none;
  font-size: var(--fs-small);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Precisa de `.footer .sociais`: `.footer ul { display: grid }` tem
   especificidade maior que `.sociais` sozinho e empilhava os ícones. */
.footer .sociais {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}
.sociais a {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: var(--r-4);
  color: #fff;
  transition: background 0.25s var(--e-ui), border-color 0.25s var(--e-ui);
}
.sociais a:hover { background: var(--terra-500); border-color: var(--terra-500); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--e-6);
  font-size: var(--fs-small);
  color: var(--navy-200);
}
.footer__base p { margin: 0; }

/* ---------- 20. Lightbox de galeria -------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: rgb(9 16 26 / 97%);
  padding: clamp(12px, 3vw, 32px);
}
.lightbox[open], .lightbox[data-aberto="true"] { display: grid; grid-template-rows: auto 1fr auto; gap: var(--e-4); }

.lightbox__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  color: #fff;
}
.lightbox__titulo { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 600; margin: 0; color: #fff; }
.lightbox__cidade {
  font-family: var(--f-mono);
  font-size: var(--fs-overline);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-300);
  margin: 0 0 4px;
}
.lightbox__fechar,
.lightbox__nav {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: var(--r-4);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--e-ui);
}
.lightbox__fechar:hover, .lightbox__nav:hover { background: rgb(255 255 255 / 22%); }
.lightbox__nav[hidden] { display: none; }

.lightbox__palco { position: relative; display: grid; place-items: center; min-height: 0; }
.lightbox__palco img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--r-4);
}
.lightbox__rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  color: #fff;
}
.lightbox__contador {
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: center;
}
.lightbox__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-content: center;
  margin-top: var(--e-2);
}
.lightbox__specs .chip { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 22%); color: #fff; }

/* ---------- 21. Banner de cookies (LGPD) --------------------------------- */
.cookies {
  position: fixed;
  left: var(--e-4);
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 250;
  max-width: 640px;
  margin-inline: auto;
  padding: var(--e-5);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-10);
  box-shadow: var(--sombra-alta);
  display: none;
}
.cookies[data-aberto="true"] { display: block; }
.cookies p { font-size: var(--fs-small); color: var(--texto-2); margin-bottom: var(--e-4); }
.cookies__acoes { display: grid; gap: var(--e-3); }
.cookies .btn { width: 100%; justify-content: center; }

/* ---------- 22. Botão flutuante de orçamento (abre o popup Merlin) ------- */
.cta-flutuante {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 240;
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0 var(--e-5);
  min-height: 54px;
  background: var(--terra-500);
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: var(--f-corpo);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sombra-alta);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro-sm)),
    calc(100% - var(--chanfro-sm)) 100%,
    0 100%
  );
  transition: background 0.25s var(--e-ui), transform 0.25s var(--e-saida);
}
.cta-flutuante:hover { background: var(--terra-700); transform: translateY(-2px); }
.cta-flutuante svg { flex: none; }
body:has(.cookies[data-aberto="true"]) .cta-flutuante { bottom: calc(var(--e-4) + 210px); }

/* Em tela estreita fica só o ícone: o rótulo cobriria metade da largura. */
@media (max-width: 559px) {
  .cta-flutuante { padding: 0; width: 54px; justify-content: center; }
  .cta-flutuante span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}


/* ---------- 22b. Botão do Merlin na cor da marca -------------------------
   O widget do Merlin injeta o próprio botão flutuante com o roxo padrão dele
   (#5C40F5). Aqui ele veste a cor de ação do site — a mesma do CTA
   "Solicite um orçamento". `!important` é necessário: a folha de estilo do
   widget é injetada depois da nossa.
   -------------------------------------------------------------------------- */
.merlin-button.merlin-button-popup,
button.merlin-button {
  background: var(--terra-500) !important;
  transition: background 0.25s var(--e-ui), transform 0.25s var(--e-saida);
}
.merlin-button.merlin-button-popup:hover,
button.merlin-button:hover {
  background: var(--terra-700) !important;
  transform: translateY(-2px);
}
/* O ícone do WhatsApp fica como o Merlin serve — decisão do cliente. Aqui só
   o fundo do botão veste a cor da marca. */

/* 2.4.7 — o botão do Merlin vem do script de terceiro sem indicador de foco.
   Sem isto, quem navega por teclado não sabe que chegou nele. */
.merlin-button:focus-visible,
button.merlin-button:focus-visible {
  /* --terra-500 é o mesmo anel de foco do resto do site; o !important é
     necessário porque o CSS do Merlin vem depois e zera o outline. */
  outline: 3px solid var(--terra-500) !important;
  outline-offset: 3px !important;
}

/* O contador de mensagens usa um vermelho próprio que brigava com o acento. */
.merlin-button-badge-counter-right,
.merlin-button-badge-counter-left {
  background: var(--navy-600) !important;
  color: #fff !important;
  border: 2px solid var(--branco) !important;
}


/* Abaixo de 400px o par "rótulo + seta" não cabia: o rótulo quebrava em duas
   linhas dentro de um botão de altura fixa. O enxugamento do respiro e da
   caixa da seta devolve ~26px de largura útil e o rótulo volta para uma
   linha só. Medido em _raw/sonda-botoes.js. */
@media (max-width: 400px) {
  .btn { min-height: 46px; font-size: 0.92rem; }
  .btn__txt { padding: 0 16px; }
  .btn__ico { width: 44px; }
  /* Dentro da caixa de CTA o botão ainda ficava estreito demais para o
     rótulo. Em largura cheia ele cabe numa linha e o alvo de toque cresce. */
  .cta-inline .btn { width: 100%; }
  .cta-inline .btn__txt { flex: 1; justify-content: center; }
}

/* No cabeçalho da LP, a 320px, nem isso basta: logo + botão não cabem na
   mesma linha. A seta sai (é afordância decorativa, o rótulo já diz a ação)
   e o conjunto passa a caber sem quebrar nem transbordar. */
@media (max-width: 420px) {
  .header--lp .btn__ico { display: none; }
  .header--lp .btn__txt { padding: 0 14px; }
  .header--lp .marca img { height: 26px; }
}

/* A 320px o rótulo não cabe com a seta ao lado em lugar nenhum. A seta é
   afordância decorativa — o rótulo já diz a ação —, então some e devolve
   47px de largura para o texto. */
@media (max-width: 360px) {
  .btn__ico { display: none; }
  /* `nowrap` aqui é seguro porque a seta já saiu e a fonte encolheu: o rótulo
     cabe numa linha. Sem ele o flex preferia quebrar a palavra a espremer. */
  .header--lp .btn__txt { font-size: 0.78rem; padding: 0 10px; white-space: nowrap; }
  .header--lp .marca img { height: 22px; }
  .header--lp .header__inner { gap: 8px; }
}

/* ---------- 25. Componentes de conversão das LPs -------------------------
   Existem só nas landing pages de campanha. O site institucional não usa —
   lá o objetivo é navegar, aqui é converter.
   -------------------------------------------------------------------------- */

/* Faixa de imagem que converte. Substitui uma das duas faixas que eram só
   respiro: mesma presença visual, mas com o argumento e o botão em cima. */
.faixa-cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 52vh, 560px);
  padding: var(--sec-y) 0;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}
.faixa-cta__fundo { position: absolute; inset: -8% 0; }
.faixa-cta__fundo img { width: 100%; height: 100%; object-fit: cover; }
.faixa-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(15 27 43 / 92%) 0%, rgb(15 27 43 / 74%) 52%, rgb(15 27 43 / 45%) 100%);
}
.faixa-cta .container { position: relative; z-index: 1; }
.faixa-cta__conteudo { max-width: 46rem; }
.faixa-cta__conteudo p {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: var(--e-6);
  text-wrap: balance;
}

/* Lista de diferenciais em duas colunas: ocupa a largura do container agora
   que a caixinha de CTA saiu do lado. */
.lista-check--duas { columns: 1; }
@media (min-width: 760px) {
  .lista-check--duas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-4) clamp(32px, 5vw, 72px);
  }
}

/* Barra de ação fixa — só em tela estreita, que é de onde vem o tráfego pago.
   Entra depois do hero e sai de cena quando o CTA final aparece, para não
   cobrir o próprio fechamento. */
.cta-fixo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgb(15 27 43 / 96%);
  border-top: 1px solid rgb(255 255 255 / 12%);
  transform: translateY(102%);
  transition: transform 0.34s var(--e-saida);
}
.cta-fixo[data-visivel] { transform: none; }
.cta-fixo__inner { display: flex; }
.cta-fixo .btn { flex: 1; }
.cta-fixo .btn__txt { flex: 1; justify-content: center; }

@media (max-width: 899px) {
  .cta-fixo { display: block; }
  /* espaço para a barra não cobrir o fim do rodapé */
  body:has(.cta-fixo) .footer { padding-bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-fixo { transition: none; }
}


/* ---------- 25b. E-mail copiável -----------------------------------------
   Substitui o link `mailto:`. O endereço fica legível e o botão copia — sem
   jogar a pessoa para um app externo que pode nem estar configurado.
   -------------------------------------------------------------------------- */
.email-copiar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  max-width: 100%;
}
.email-copiar__texto {
  font-variant-ligatures: none;
  word-break: break-word;
}
.email-copiar__botao {
  display: inline-grid;
  place-items: center;
  /* 2.5.8: alvo de 32px com área de toque de 44px pelo ::before */
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  background: none;
  border: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity 0.2s var(--e-ui), background 0.2s var(--e-ui),
              color 0.2s var(--e-ui), border-color 0.2s var(--e-ui);
}
.email-copiar__botao::before {
  content: "";
  position: absolute;
  inset: -6px;
}
.email-copiar__botao:hover,
.email-copiar__botao:focus-visible { opacity: 1; }
.email-copiar__botao[data-copiado] {
  background: var(--terra-500);
  border-color: var(--terra-500);
  color: #fff;
  opacity: 1;
}
.email-copiar__icone { display: grid; place-items: center; }

.email-copiar__aviso {
  font-size: var(--fs-small);
  font-weight: 500;
  color: inherit;
  opacity: 0;
  transition: opacity 0.2s var(--e-ui);
}
.email-copiar__aviso:not(:empty) { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .email-copiar__botao, .email-copiar__aviso { transition: none; }
}

/* ---------- 23. Movimento ------------------------------------------------ */
/* Estado inicial vive atrás do gate: sem JS, tudo aparece normalmente. */
html[data-motion] [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(5px);
}
html[data-motion] [data-reveal="soft"] { transform: none; filter: none; }
html[data-motion] [data-reveal="fig"] { transform: scale(0.965); filter: blur(4px); }
html[data-motion] [data-rv="left"] { transform: translateX(-26px); }
html[data-motion] [data-rv="right"] { transform: translateX(26px); }

html[data-motion] [data-reveal][data-visto] {
  opacity: 1;
  transform: none;
  filter: none;
  /* 0,62s: a 1650 px/s (rolagem de leitura), 0,85s fazia o bloco terminar de
     entrar já fora da tela. O deslocamento continua curto e a curva continua
     longa — o que encurtou foi só o tempo total. */
  transition: opacity 0.62s var(--e-saida), transform 0.62s var(--e-saida),
              filter 0.62s var(--e-saida);
  transition-delay: var(--atraso, 0s);
}
html[data-motion] [data-reveal="soft"][data-visto] { transition-duration: 0.7s; }

/* Título dividido em palavras */
.palavra { display: inline-block; overflow: hidden; vertical-align: bottom; }
.palavra > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(108%);
}
html[data-motion] [data-visto] .palavra > i,
html:not([data-motion]) .palavra > i {
  transform: none;
  transition: transform 0.66s var(--e-saida);
  transition-delay: var(--atraso-palavra, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion] [data-reveal],
  html[data-motion] [data-reveal][data-visto] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .palavra > i { transform: none !important; transition: none !important; }
  .marquee__trilha { animation: none; }
  .passos::before, .passos[data-visivel="true"] .passo { transform: none !important; opacity: 1 !important; transition: none !important; }
  .processo::before { transform: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================================
   24. Breakpoints — mobile-first: daqui para cima
   ========================================================================= */

/* ≥560px — telas estreitas ganham 2 colunas em grades curtas */
@media (min-width: 560px) {
  .hero__specs { grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
  .cookies__acoes { grid-auto-flow: column; justify-content: start; }
  .cookies .btn { width: auto; }
  .pilares { grid-template-columns: repeat(2, 1fr); }
  .regiao__cidades { grid-template-columns: repeat(2, 1fr); }
}

/* ≥760px — grades de conteúdo em 2 colunas */
@media (min-width: 760px) {
  .grade-obras { grid-template-columns: repeat(2, 1fr); }
  .cartoes-contato { grid-template-columns: repeat(2, 1fr); }
  .footer__topo { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-8); }
}

/* ≥900px — desktop: nav horizontal, splits lado a lado, portfólio 3 colunas */
@media (min-width: 900px) {
  :root { --header-h: 84px; }

  .grade-obras { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
  .split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); }
  .split--inverso .split__figura { order: 2; }
  .servico { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); }
  .servico:nth-child(even) .servico__figura { order: 2; }
  .hero__specs { grid-template-columns: repeat(4, 1fr); }
  .regiao__inner { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
  .pilares { grid-template-columns: repeat(4, 1fr); gap: var(--e-7); }
  .destaque { grid-template-columns: 1.15fr 1fr; }
  .cabecalho-secao--duplo { grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 88px); }
  .setores { grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 5vw, 72px); }
  .setores__palco {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    aspect-ratio: 4 / 5;
  }
  .destaque__figura img { height: 100%; aspect-ratio: auto; }
  .cartoes-contato { grid-template-columns: repeat(3, 1fr); }
  .cliente-logo { width: 160px; height: 86px; }

  .lightbox[data-aberto="true"] {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "topo topo topo" "ant palco prox" "rodape rodape rodape";
    align-items: center;
  }
  .lightbox__topo { grid-area: topo; }
  .lightbox__palco { grid-area: palco; }
  .lightbox__rodape { grid-area: rodape; }
  .lightbox__nav--ant { grid-area: ant; }
  .lightbox__nav--prox { grid-area: prox; }
}

/* ≥1100px — respiro extra */
@media (min-width: 1100px) {
  .cabecalho-secao--centro { margin-inline: auto; text-align: center; }
  .cabecalho-secao--centro .overline { text-align: center; }
  .cabecalho-secao--centro p { margin-inline: auto; }
}

/* ---------- 25. Nav mobile (< 900px): off-canvas ------------------------- */
@media (max-width: 899px) {
  .hamburguer { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 340px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + var(--e-6)) var(--e-5) var(--e-7);
    background: var(--navy-900);
    border-left: 1px solid rgb(255 255 255 / 12%);
    transform: translateX(100%);
    transition: transform 0.42s var(--e-saida);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.aberto { transform: translateX(0); }

  .nav__link {
    min-height: 56px;
    padding: 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--terra-300); }

  .nav .btn { margin-top: var(--e-6); justify-content: center; }

  .nav__veu {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgb(9 16 26 / 62%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--e-ui);
  }
  .nav__veu.aberto { opacity: 1; pointer-events: auto; }
}


/* =========================================================================
   27. Landing pages de campanha
   Mesmo design system do site. Só o que é específico de LP mora aqui:
   cabeçalho sem navegação, grade de segmentos, cases e CTA em linha.
   ========================================================================= */

/* Cabeçalho reduzido: logo + CTA. Sem nav — link para o resto do site numa
   LP de campanha é vazamento de tráfego pago. */
.header--lp .header__inner { justify-content: space-between; }

/* O hero da LP herda a caixa da home — nenhuma altura própria aqui, para as
   três LPs e as oito páginas do site abrirem exatamente com a mesma medida. */

/* --- Segmentos atendidos ------------------------------------------------ */
.segmentos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
}
.segmento {
  --superficie: var(--branco);
  --chanfro: var(--chanfro-sm);
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-5);
  min-height: 96px;
}
.segmento__icone { color: var(--acento-texto); flex: none; }
.segmento__nome {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--titulo);
}

/* --- Cases do portfólio da LP ------------------------------------------- */
.cases { display: grid; grid-template-columns: 1fr; gap: var(--e-4); }
.case {
  --superficie: var(--branco);
  --chanfro: var(--chanfro-sm);
  display: grid;
  gap: 6px;
  padding: var(--e-5);
}
.case__titulo {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--titulo);
}
.case__detalhe {
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

/* --- CTA em linha ------------------------------------------------------- */
.cta-inline {
  --superficie: var(--branco);
  display: grid;
  gap: var(--e-5);
  align-content: center;
  padding: clamp(24px, 4vw, 40px);
}
.cta-inline p {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--titulo);
}
.cta-inline .btn { justify-self: start; }
.cta-inline--largo { margin-top: var(--e-7); }

/* --- Rodapé da LP ------------------------------------------------------- */
.footer--lp { padding-block: var(--sec-y-sm) var(--e-6); }
.footer__lp {
  display: grid;
  gap: var(--e-5);
  padding-bottom: var(--e-6);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}
.footer__lp img { height: 38px; width: auto; }
.footer__lp-contato { display: grid; gap: var(--e-2); }
.footer__lp-contato li { font-size: var(--fs-small); color: var(--navy-200); }

@media (min-width: 620px) {
  .segmentos { grid-template-columns: repeat(2, 1fr); }
  .cases { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .segmentos { grid-template-columns: repeat(4, 1fr); }
  .segmento { flex-direction: column; align-items: flex-start; min-height: 150px; }
  .footer__lp {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--e-8);
  }
  .footer--lp .sociais { margin-top: 0; }
}
@media (max-width: 899px) {
  /* A LP não tem nav, então o hambúrguer não existe: o CTA fica no lugar. */
  .header--lp .btn__txt { padding: 0 16px; font-size: 0.9rem; }
  .header--lp .btn__ico { width: 44px; }
}


/* Título que ainda assim caia dentro de uma coluna estreita desce um passo:
   44px numa caixa de 533px vira 6 linhas com os títulos longos das LPs. */
.split h2, .cta-inline h2 {
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem);
}

/* Trinca de fotos usada na LP sem case (ver P-13). */
.galeria-lp {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
}
.galeria-lp img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%,
    0 100%
  );
}

/* Os cases com foto usam o card de obra; a lista só precisa da grade. */
.cases > li { display: contents; }

@media (min-width: 620px) {
  .galeria-lp { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 26. Impressão ------------------------------------------------ */
@media print {
  .header, .nav, .cta-flutuante, .merlin-button, .cookies, .lightbox, .marquee, .blog-pag { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* =========================================================================
   27. Blog — listagem e artigo (WordPress headless)
   Consome a API REST do WordPress e monta tudo no design da casa. Cards com
   a mesma técnica de chanfro do card de obra (flat de propósito); o artigo
   vive numa coluna estreita para leitura confortável.
   ========================================================================= */

/* Coluna estreita para o corpo do artigo (~medida de leitura). */
.container--estreito { max-width: 800px; }

/* ---- Listagem ---------------------------------------------------------- */
.blog-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-5);
}
@media (min-width: 600px) { .blog-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .blog-grade { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); } }

.post-card {
  position: relative;
  background: var(--borda);
  --superficie: var(--branco);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%,
    0 100%
  );
  transition: transform 0.35s var(--e-saida), background 0.3s var(--e-ui);
}
.post-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  background: var(--superficie);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro) + 1px),
    calc(100% - var(--chanfro) + 1px) 100%,
    0 100%
  );
  transition: background 0.3s var(--e-ui);
  pointer-events: none;
}
.post-card:hover, .post-card:focus-within { transform: translateY(-5px); background: var(--terra-500); }
.post-card:hover::before, .post-card:focus-within::before { background: var(--areia); }

.post-card__link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.post-card__link:focus-visible { outline: 2px solid var(--terra-300); outline-offset: -4px; }

.post-card__midia { position: relative; overflow: hidden; background: var(--areia-2); display: block; }
.post-card__midia img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.6s var(--e-saida);
}
.post-card:hover .post-card__midia img,
.post-card:focus-within .post-card__midia img { transform: scale(1.045); }
.post-card__midia--vazia {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color: var(--terra-300);
}

.post-card__corpo { padding: var(--e-5); display: flex; flex-direction: column; flex: 1; gap: var(--e-3); }
.post-card__meta {
  font-family: var(--f-mono);
  font-size: var(--fs-overline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-600);
}
.post-card__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.22;
  color: var(--navy-600);
}
.post-card__resumo {
  color: var(--texto-2);
  font-size: var(--fs-small);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__mais {
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--borda);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--terra-600);
}
.post-card__mais .seta { transition: transform 0.3s var(--e-saida); }
.post-card:hover .post-card__mais .seta,
.post-card:focus-within .post-card__mais .seta { transform: translateX(4px); }

/* Entrada dos cards — mesmo idioma do reveal da casa: o estado inicial só
   existe atrás do gate html[data-motion]. blog.js marca [data-visto] e, ao
   fim, remove [data-entra] para o hover voltar a mandar (sem herdar o atraso). */
html[data-motion] .post-card[data-entra] { opacity: 0; transform: translateY(20px); filter: blur(4px); }
html[data-motion] .post-card[data-entra][data-visto] {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.62s var(--e-saida), transform 0.62s var(--e-saida), filter 0.62s var(--e-saida);
  transition-delay: var(--atraso, 0s);
}

/* ---- Estados (carregando / vazio / erro) ------------------------------- */
.blog-estado {
  text-align: center;
  padding: var(--e-9) var(--e-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
}
.blog-carregando { color: var(--texto-2); font-family: var(--f-mono); font-size: var(--fs-small); }
.blog-vazio__titulo { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); color: var(--navy-600); }
.blog-vazio__texto { color: var(--texto-2); max-width: 46ch; }
.blog-estado .btn { margin-top: var(--e-2); }

/* ---- Paginação --------------------------------------------------------- */
.blog-pag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  margin-top: var(--e-7);
  flex-wrap: wrap;
}
.blog-pag__botao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 10px 18px;
  border: 1px solid var(--borda);
  background: var(--branco);
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--navy-600);
  text-decoration: none;
  transition: background 0.25s var(--e-ui), color 0.25s var(--e-ui), border-color 0.25s var(--e-ui);
}
.blog-pag__botao:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.blog-pag__botao[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.blog-pag__conta { font-family: var(--f-mono); font-size: var(--fs-small); color: var(--texto-2); }

/* ---- Cabeçalho do artigo ----------------------------------------------- */
.hero--artigo {
  min-height: 0;
  align-items: flex-start;
  overflow: visible;
  background: var(--navy-800);
  padding-block: calc(var(--header-h) + var(--e-6)) var(--e-8);
}
.artigo-trilha {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  color: var(--navy-200);
  margin-bottom: var(--e-5);
}
.artigo-trilha a { color: var(--terra-300); text-decoration: none; }
.artigo-trilha a:hover { text-decoration: underline; }
.artigo-cabecalho { max-width: 46rem; }
.artigo-cabecalho h1 { font-size: var(--fs-h1); color: #fff; line-height: 1.12; }
.artigo-cabecalho__meta { margin-top: var(--e-4); font-family: var(--f-mono); font-size: var(--fs-small); color: var(--navy-200); }
.artigo-cabecalho__meta time { color: var(--terra-200); }

/* ---- Corpo do artigo (HTML vindo do WordPress) ------------------------- */
.artigo { padding-block: clamp(48px, 7vw, 88px); }
.artigo__capa { margin: 0 0 var(--e-6); }
.artigo__capa img {
  width: 100%;
  height: auto;
  display: block;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--chanfro-sm)),
    calc(100% - var(--chanfro-sm)) 100%,
    0 100%
  );
}
.artigo__carregando, .artigo__aviso { color: var(--texto-2); font-family: var(--f-mono); font-size: var(--fs-small); }
.artigo__aviso a { color: var(--terra-600); }

.artigo__corpo { font-size: var(--fs-body); line-height: 1.75; color: var(--texto); }
.artigo__corpo > * + * { margin-top: var(--e-4); }
.artigo__corpo h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2); color: var(--navy-600); margin-top: var(--e-7); line-height: 1.2; }
.artigo__corpo h3 { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3); color: var(--navy-600); margin-top: var(--e-6); }
.artigo__corpo h4 { font-weight: 600; color: var(--navy-600); margin-top: var(--e-5); }
.artigo__corpo p, .artigo__corpo li { max-width: var(--medida); }
.artigo__corpo a { color: var(--terra-600); text-decoration: underline; text-underline-offset: 2px; }
.artigo__corpo a:hover { color: var(--terra-700); }
.artigo__corpo ul, .artigo__corpo ol { padding-left: 1.4em; }
.artigo__corpo li + li { margin-top: var(--e-2); }
.artigo__corpo img, .artigo__corpo iframe, .artigo__corpo video { max-width: 100%; height: auto; }
.artigo__corpo figure { margin: var(--e-6) 0; }
.artigo__corpo figure img { width: 100%; }
.artigo__corpo figcaption { margin-top: var(--e-2); font-size: var(--fs-small); color: var(--texto-2); text-align: center; }
.artigo__corpo blockquote {
  margin: var(--e-6) 0;
  padding: var(--e-2) 0 var(--e-2) var(--e-5);
  border-left: 3px solid var(--terra-500);
  color: var(--texto-2);
  font-size: var(--fs-lead);
  font-style: italic;
}
.artigo__corpo blockquote p { max-width: none; }
.artigo__corpo pre { background: var(--navy-900); color: #fff; padding: var(--e-4); overflow-x: auto; font-family: var(--f-mono); font-size: var(--fs-small); }
.artigo__corpo code { font-family: var(--f-mono); font-size: 0.9em; background: var(--areia-2); padding: 2px 6px; }
.artigo__corpo pre code { background: none; padding: 0; }
.artigo__corpo hr { border: 0; border-top: 1px solid var(--borda); margin: var(--e-7) 0; }
.artigo__corpo table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.artigo__corpo th, .artigo__corpo td { border: 1px solid var(--borda); padding: var(--e-2) var(--e-3); text-align: left; }
.artigo__corpo th { background: var(--areia); }
.artigo__corpo .aligncenter { margin-inline: auto; display: block; }
.artigo__corpo .alignright { float: right; margin: 0 0 var(--e-4) var(--e-5); max-width: 50%; }
.artigo__corpo .alignleft { float: left; margin: 0 var(--e-5) var(--e-4) 0; max-width: 50%; }

.artigo__rodape { margin-top: var(--e-8); padding-top: var(--e-5); border-top: 1px solid var(--borda); }

@media (prefers-reduced-motion: reduce) {
  html[data-motion] .post-card[data-entra],
  html[data-motion] .post-card[data-entra][data-visto] {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
}

/* ---- Esqueleto de carregamento (skeleton) ------------------------------ */
.esq {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--areia-2);
  border-radius: var(--r-2);
}
.esq::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 65%), transparent);
  animation: esq-brilho 1.25s ease-in-out infinite;
}
@keyframes esq-brilho { 100% { transform: translateX(100%); } }

.post-card--esqueleto { pointer-events: none; }
.post-card--esqueleto > * { position: relative; z-index: 1; }
.post-card--esqueleto .post-card__midia { aspect-ratio: 3 / 2; }
.esq-meta { width: 45%; height: 0.72rem; }
.esq-titulo { width: 85%; height: 1.3rem; margin-bottom: var(--e-1); }
.esq-linha { width: 100%; height: 0.8rem; }
.esq-linha--curta { width: 60%; }

.artigo-esq { display: flex; flex-direction: column; gap: var(--e-4); }
.artigo-esq__capa { width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--e-2); }
.esq-titulo-hero {
  display: inline-block;
  width: min(80%, 28ch);
  height: clamp(2rem, 5vw, 3rem);
  background: rgb(255 255 255 / 14%);
  border-radius: var(--r-2);
}
.esq-titulo-hero::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 20%), transparent); }

@media (prefers-reduced-motion: reduce) {
  .esq::after { animation: none; }
}

/* ---- Ajustes de layout do blog ----------------------------------------- */
/* O bloco de estado (vazio/erro) só ocupa espaço quando tem conteúdo. Sem
   isto, .blog-estado{display:flex} vence o [hidden] do navegador e deixa um
   vão vazio entre o hero e os cards. */
.blog-estado[hidden] { display: none; }

/* Hero da listagem: banner proporcional em vez de tela cheia — os cards
   sobem para perto da dobra. */
.hero--compacto { min-height: clamp(300px, 42vh, 440px); }