@charset "utf-8";
/* ==========================================================================
   Reverty — design system
   Base de cores: indigo do logotipo #0A0173 + verde #70F951 + cinza #7D999F.
   Contrastes medidos; ver o bloco no fim.

   Direção: "exaggerated minimalism" + bento.
   O site não tem uma única fotografia. Em vez de disfarçar isso com banco de
   imagem genérico, a tipografia grande e o mosaico de blocos carregam o peso
   visual — e o ícone de linha entra como desenho técnico, não como enfeite.
   ========================================================================== */

/* Fontes ─────────────────────────────────────────────────────────────────
   Montserrat substitui a Gotham do site antigo (paga). Mesma família visual
   geométrica; Montserrat é SIL OFL. */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Tokens ────────────────────────────────────────────────────────────────── */
:root {
  /* ── AS TRÊS CORES DA BASE ───────────────────────────────────────────────
     Índigo do logotipo + verde + cinza-azulado.
     Verde × índigo dá 12.14:1 — é o par que sustenta o site inteiro. */
  --indigo: #0A0173;   /* a cor da marca, amostrada do PNG do logotipo */
  --verde:  #70F951;   /* acento */
  --cinza:  #7D999F;   /* neutro frio */

  /* ── Derivadas. Só clareamento/escurecimento das três: nenhum matiz novo ──
     Elas existem porque as três puras não cobrem todos os papéis:

     ⚠ o VERDE é claro (luminância .72). Sobre branco dá 1.37 e some. Ele só
       funciona sobre escuro, ou como FUNDO com texto escuro por cima.
     ⚠ o CINZA é meio-tom (luminância .30). Sobre branco dá 3.03 e reprova em
       texto normal; sobre fundo claro, 2.77. Só serve de texto sobre escuro.
     ⚠ as três não têm um claro: o fundo de página precisou ser derivado. */
  --indigo-fundo: #050034;  /* superfície escura: hero, rodapé, blocos */
  --indigo-medio: #07014B;  /* superfície escura secundária            */
  --cinza-texto:  #4E5F63;  /* cinza escurecido: texto secundário em fundo claro — 5.98:1 */
  --claro:        #EFF3F3;  /* fundo de página, tinta do cinza a 88% de branco */
  --claro-alto:   #F7F9F9;  /* seção alternada */
  --borda-clara:  #D9E1E2;  /* borda em fundo claro */

  /* ⚠ NÃO existe verde escurecido nesta paleta, de propósito.
     Como o #70F951 some em fundo claro (1.22:1), a tentação é criar um verde
     escuro para os textos de acento — e o site passa a ter um verde que
     ninguém escolheu. A regra é outra:
       fundo CLARO  → acento é o ÍNDIGO em texto, ou o VERDE em PREENCHIMENTO
       fundo ESCURO → acento é o VERDE, em texto e ícone
     O hover do botão verde também não usa verde escurecido: INVERTE para
     índigo com texto verde, que são duas cores da base. */

  /* papéis */
  --bg: var(--claro);
  --bg-alto: var(--claro-alto);
  --superficie: #FFFFFF;
  --borda: var(--cinza);
  --borda-suave: var(--borda-clara);

  --texto: var(--indigo-fundo);        /* 17.79 sobre o claro */
  --texto-suave: var(--cinza-texto);   /*  5.98 sobre o claro */
  --texto-claro: #FFFFFF;              /* 19.89 sobre o escuro */
  --texto-claro-suave: var(--cinza);   /*  6.56 sobre o escuro */

  --acento: var(--verde);              /* fundo escuro e superfícies de CTA */
  --acento-2: var(--indigo);      /* o mesmo papel em fundo claro */

  /* Anel de foco em DOIS tons. Nenhuma cor única passa em 3:1 contra todos os
     fundos ao mesmo tempo: o que se vê no claro some no índigo, e o que se vê
     no índigo some no verde. O escuro cobre claro e verde; o claro cobre o
     índigo. O par garante ao menos 14:1 em qualquer superfície do site. */
  --foco-escuro: #050034;
  --foco-claro: #F7F9F9;

  /* Tipografia — escala deliberadamente dramática: sem foto, o tipo é a imagem */
  --f-titulo: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --f-corpo: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-base: .9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.1875rem;
  --t-xl: clamp(1.25rem, 1.14rem + .45vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.24rem + 1.1vw, 2.125rem);
  --t-3xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --t-4xl: clamp(2.5rem, 1.55rem + 4.2vw, 5rem);
  --t-mega: clamp(3rem, 1.4rem + 7vw, 8rem);

  /* Espaço e forma — ritmo de 4px */
  --gap: 1.25rem;
  --secao-y: clamp(4rem, 2.6rem + 5.5vw, 8rem);
  --raio: 3px;
  --raio-lg: 6px;
  --largura: 1240px;
  --sombra: 0 1px 2px rgba(5,0,52,.05), 0 10px 30px -16px rgba(5,0,52,.22);
  --sombra-alta: 0 2px 4px rgba(5,0,52,.08), 0 26px 50px -24px rgba(5,0,52,.36);
  --rapido: .18s;
  --medio: .28s;
}

/* TRATAMENTO DAS FOTOS ───────────────────────────────────────────────────
   As imagens vêm de origens diferentes e cada uma com uma dominante: madeira
   alaranjada, engradado azul, galpão esverdeado. Sem tratamento, a página
   parece uma colagem.

   A receita é duotone: dessatura a foto e devolve só o matiz do índigo por
   cima, com `mix-blend-mode: color` — que troca matiz e saturação e preserva
   a luminosidade, então o desenho da imagem continua legível.

   ⚠ Aplicado SÓ no mosaico da home, por decisão do cliente. Ali as quatro
   fotos ficam lado a lado e a diferença de dominante entre elas salta; no
   resto do site cada foto aparece sozinha e a tinta só tirava profundidade —
   no banner, chegou a achatar a imagem inteira num azul plano. */
/* 0 = preto e branco puro. A tinta índigo deixava o mosaico arroxeado; em P&B
   as quatro fotos ficam realmente uniformes e o verde do cartão salta. */
:root { --foto-tinta: 0; }

.tem-foto { position: relative; overflow: hidden; isolation: isolate; }
.tem-foto > img { filter: grayscale(1) contrast(1.08) brightness(1.02); }
.tem-foto::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--indigo); mix-blend-mode: color; opacity: var(--foto-tinta);
}
/* Safari antigo e navegador sem mix-blend-mode ficariam com a foto cinza e
   nenhuma tinta — o que ainda é uniforme, então degrada bem. */
@supports not (mix-blend-mode: color) { .tem-foto::before { display: none; } }

/* Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* o site é claro por construção: declarar evita que o navegador pinte
     controles nativos (select, scrollbar) em esquema escuro por conta própria */
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* o cabeçalho é sticky com 80px: sem isto, âncora leva o título para debaixo dele */
:target, h1[id], h2[id], h3[id] { scroll-margin-top: 6.5rem; }

body {
  font-family: var(--f-corpo);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--f-titulo); font-weight: 800; line-height: 1.06; letter-spacing: -.03em;
  /* evita a última linha do título sozinha com uma palavra */
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -.02em; line-height: 1.2; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
:where(a, button, [role="button"], input, textarea, label, summary) {
  /* tira o atraso de 300ms do duplo-toque e o realce cinza padrão do Android,
     que sujava o laranja dos botões */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(112,249,81,.3);
}
:where(a, button, [role="button"]) { cursor: pointer; }

/* números lado a lado não podem dançar de largura entre dígitos */
.fato__valor, .selo__valor, .mosaico-destaque b, .etapa__selo, .tile__num {
  font-variant-numeric: tabular-nums;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--foco-escuro);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--foco-claro);
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--indigo-fundo); color: var(--texto-claro); padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

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

/* Layout ────────────────────────────────────────────────────────────────── */
.container { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }
@media (min-width: 640px) { .container { width: min(100% - 4rem, var(--largura)); } }
.secao { padding-block: var(--secao-y); }
.secao--alto { background: var(--bg-alto); }
.secao--escuro { background: var(--indigo-fundo); color: var(--texto-claro); }
.secao--azul { background: var(--indigo-medio); color: var(--texto-claro); }
.secao--escuro h2, .secao--azul h2, .secao--escuro h3, .secao--azul h3 { color: var(--texto-claro); }

.grade { display: grid; gap: var(--gap); }
@media (min-width: 620px)  { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grade--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px)  { .grade--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grade--4 { grid-template-columns: repeat(4, 1fr); } }

/* Cabeçalho de seção ────────────────────────────────────────────────────── */
.olho {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--indigo); margin-bottom: 1.125rem;
}
.olho::before { content: ''; width: 2rem; height: 2px; background: var(--acento); flex: none; }
/* terracota sobre fundo escuro reprova (2.77:1) — no escuro o olho vira laranja */
.secao--escuro .olho, .secao--azul .olho, .hero .olho, .pagehero .olho,
.rodape .olho { color: var(--acento); }

.cabeca { max-width: 48rem; margin-bottom: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); }
.cabeca--centro { margin-inline: auto; text-align: center; }
.cabeca--centro .olho { justify-content: center; }
.cabeca__texto { margin-top: 1.25rem; color: var(--texto-suave); font-size: var(--t-lg); max-width: 44rem; }
.cabeca--centro .cabeca__texto { margin-inline: auto; }
.secao--escuro .cabeca__texto, .secao--azul .cabeca__texto { color: var(--texto-claro-suave); }

/* palavra em destaque dentro do título */
.acento { color: var(--indigo); }
.secao--escuro .acento, .secao--azul .acento, .hero .acento, .pagehero .acento,
.rodape .acento { color: var(--acento); }

/* linha do topo de seção: título à esquerda, ação à direita */
.barra-secao {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
}
.barra-secao .cabeca { margin-bottom: 0; }

/* Botões ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 52px; padding: .8125rem 1.75rem;
  font-family: var(--f-titulo); font-size: var(--t-base); font-weight: 700;
  letter-spacing: .01em; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--raio);
  transition: background-color var(--rapido), color var(--rapido), border-color var(--rapido), transform var(--rapido);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--rapido); }
.btn:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn, .btn svg { transition: none; } }

/* laranja SEMPRE com texto escuro: branco sobre var(--verde) dá 1.79 e reprova */
.btn--primario { background: var(--acento); color: var(--indigo-fundo); }
.btn--primario:hover { background: var(--indigo); color: var(--verde); }

.btn--escuro { background: var(--indigo-fundo); color: var(--texto-claro); }
.btn--escuro:hover { background: var(--indigo-medio); }

.btn--secundario { background: transparent; color: var(--texto); border-color: var(--indigo-fundo); }
.btn--secundario:hover { background: var(--indigo-fundo); color: var(--texto-claro); }
.secao--escuro .btn--secundario, .secao--azul .btn--secundario, .hero .btn--secundario,
.rodape .btn--secundario {
  color: var(--texto-claro); border-color: rgba(255,255,255,.4);
}
.secao--escuro .btn--secundario:hover, .secao--azul .btn--secundario:hover, .hero .btn--secundario:hover,
.rodape .btn--secundario:hover {
  background: var(--claro); color: var(--indigo-fundo); border-color: var(--claro);
}
.btn--sm { min-height: 44px; padding: .625rem 1.25rem; font-size: var(--t-sm); }
.btn--bloco { width: 100%; }

/* Cabeçalho ─────────────────────────────────────────────────────────────── */
.topo-info {
  background: var(--indigo-fundo); color: var(--texto-claro-suave);
  font-size: var(--t-sm);
}
.topo-info__inner { display: flex; flex-wrap: wrap; gap: .25rem 2rem; align-items: center; min-height: 40px; }
.topo-info a, .topo-info span { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.topo-info a { padding-block: .25rem; }
.topo-info a:hover { color: var(--acento); }
.topo-info svg { width: 15px; height: 15px; flex: none; color: var(--acento); }

.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: var(--claro); border-bottom: 1px solid var(--borda);
  transition: box-shadow var(--rapido);
}
.cabecalho[data-rolado="true"] { box-shadow: var(--sombra); }
.cabecalho__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 80px; }

/* O logotipo é wordmark e fala sozinho — sem assinatura embaixo. */
.marca { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.marca img { display: block; }

.nav { display: none; }
@media (min-width: 1080px) { .nav { display: block; } }
.nav__lista { display: flex; align-items: center; gap: .125rem; }
.nav__link {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .6875rem .875rem; font-family: var(--f-titulo);
  font-size: var(--t-base); font-weight: 600; text-decoration: none;
  border-radius: var(--raio); transition: color var(--rapido), background-color var(--rapido);
}
.nav__link:hover { background: var(--borda-clara); }
.nav__link[aria-current="page"] { color: var(--indigo); }
.nav__seta { width: 12px; height: 12px; opacity: .75; transition: transform var(--rapido); }
.nav__item { position: relative; }
.nav__item:hover .nav__seta { transform: rotate(180deg); }

.megamenu {
  position: absolute; top: calc(100% + 4px); left: -.5rem; min-width: 19rem;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-alta);
  padding: .625rem; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--rapido), transform var(--rapido), visibility var(--rapido);
}
@media (prefers-reduced-motion: reduce) { .megamenu { transition: none; } }
.nav__item:hover .megamenu, .nav__item:focus-within .megamenu { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu__titulo { display: block; font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); padding: .625rem .75rem .375rem; }
.megamenu a {
  display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem;
  font-size: var(--t-base); text-decoration: none; border-radius: var(--raio);
  transition: background-color var(--rapido), color var(--rapido);
}
.megamenu a:hover { background: var(--claro); color: var(--indigo); }
.megamenu a svg { width: 22px; height: 22px; flex: none; color: var(--indigo-medio); }
.megamenu a:hover svg { color: var(--indigo); }

.cabecalho__acoes { display: none; }
@media (min-width: 1080px) { .cabecalho__acoes { display: flex; gap: .625rem; } }

.hamburguer {
  display: grid; place-items: center; width: 48px; height: 48px;
  background: transparent; border: 1px solid var(--borda); border-radius: var(--raio);
}
@media (min-width: 1080px) { .hamburguer { display: none; } }
.hamburguer svg { width: 22px; height: 22px; }

/* Gaveta mobile */
.gaveta { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.gaveta[data-aberta="true"] { visibility: visible; }
.gaveta__fundo { position: absolute; inset: 0; background: rgba(5,0,52,.6); opacity: 0; transition: opacity var(--medio); }
.gaveta[data-aberta="true"] .gaveta__fundo { opacity: 1; }
.gaveta__painel {
  position: absolute; inset-block: 0; right: 0; width: min(90vw, 23rem);
  background: var(--claro); overflow-y: auto;
  /* sem `contain`, rolar até o fim da gaveta passa a rolar a página atrás */
  overscroll-behavior: contain;
  /* respeita o notch e a barra de gestos */
  padding: 1.25rem;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-right: max(1.25rem, env(safe-area-inset-right));
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(100%); transition: transform var(--medio) ease;
}
@media (prefers-reduced-motion: reduce) { .gaveta__fundo, .gaveta__painel { transition: none; } }
.gaveta[data-aberta="true"] .gaveta__painel { transform: translateX(0); }
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.gaveta__fechar { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; border: 1px solid var(--borda); border-radius: var(--raio); }
.gaveta__lista a { display: block; padding: .875rem .25rem; font-family: var(--f-titulo); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--borda-suave); }
.gaveta__lista--sub a { padding-left: 1.25rem; font-weight: 500; font-family: var(--f-corpo); font-size: var(--t-base); color: var(--texto-suave); }

/* HERO ──────────────────────────────────────────────────────────────────
   Sem foto: a headline ocupa o lugar dela. O desenho de linha vira marca
   d'água atrás do texto, em vez de ilustração ao lado. */
.hero { position: relative; background: var(--indigo-fundo); color: var(--texto-claro); overflow: hidden; }

/* Foto de fundo do banner. O véu não é enfeite: sem ele o texto claro cai para
   ~2:1 em cima da parte iluminada da foto. O gradiente é mais denso à esquerda,
   onde o texto vive, e abre à direita para a imagem aparecer. */
.hero__foto { position: absolute; inset: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__foto::after {
  content: ''; position: absolute; inset: 0;
  /* Escurece de verdade a ESQUERDA, onde o texto vive, e abre à direita para a
     foto aparecer. É o contraste entre os dois lados que dá profundidade — véu
     parelho deixa o banner chapado. */
  /* O véu tem de ficar cheio ATÉ ONDE O TEXTO VAI, e só então abrir. Com a
     queda começando aos 30% a headline entrava na faixa clara e a palavra
     verde caía para 2.98:1 — reprovava. A coluna de texto está limitada a
     ~54% da largura (.hero__inner > *), então o degradê segura até 56%. */
  background:
    linear-gradient(90deg, rgba(5,0,52,.97) 0%, rgba(5,0,52,.96) 46%, rgba(5,0,52,.9) 56%, rgba(5,0,52,.55) 76%, rgba(5,0,52,.26) 100%),
    linear-gradient(0deg, rgba(5,0,52,.88) 0%, rgba(5,0,52,.22) 48%);
}
@media (max-width: 899px) {
  /* na estreita o texto ocupa a largura toda: o véu tem de ser parelho */
  .hero__foto::after { background: linear-gradient(0deg, rgba(5,0,52,.95) 20%, rgba(5,0,52,.82) 100%); }
}

/* TEXTURA — ripa de pallet + malha de rack aramado, desenhadas em CSS.
   É o vocabulário da empresa virando fundo: faixas horizontais na proporção
   de um estrado e uma grade fina por cima, como a tela de uma gaiola.
   Fica em 3–5% de opacidade: some se você olhar de frente, aparece no canto
   do olho. Sem arquivo de imagem, então não custa requisição nem byte. */
/* `overflow: hidden` aqui não é detalhe: o ::after tem 46rem e sai pela direita.
   Sem o recorte na própria textura, ela empurra a página e cria barra de
   rolagem horizontal em qualquer seção que não recorte por conta própria. */
.textura { position: absolute; inset: 0; pointer-events: none; opacity: .55; overflow: hidden; }
.textura::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 44px);
  -webkit-mask-image: radial-gradient(120% 100% at 70% 20%, #000 20%, transparent 75%);
          mask-image: radial-gradient(120% 100% at 70% 20%, #000 20%, transparent 75%);
}
/* ripas largas, na diagonal do canto — o desenho de um pallet visto de topo */
.textura::after {
  content: ''; position: absolute; right: -8%; top: -12%; width: 46rem; height: 34rem;
  background: repeating-linear-gradient(-24deg, rgba(112,249,81,.09) 0 12px, transparent 12px 40px);
  border-radius: 50%;
  filter: blur(.5px);
}
@media (max-width: 719px) { .textura::after { display: none; } }
/* sobre a faixa laranja e o bege a textura precisa ser escura, não clara */
.etapas .textura::before, .secao--alto .textura::before {
  background:
    repeating-linear-gradient(0deg, rgba(5,0,52,.05) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(90deg, rgba(5,0,52,.035) 0 2px, transparent 2px 44px);
}

.hero__brilho {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(56rem 40rem at 88% 6%, rgba(112,249,81,.20), transparent 60%),
    radial-gradient(44rem 34rem at 4% 96%, rgba(125,153,159,.26), transparent 62%);
}
/* respiração lenta do brilho: 18s, deslocamento mínimo. Serve para a tela não
   parecer congelada, não para chamar atenção. */
@media (prefers-reduced-motion: no-preference) {
  .hero__brilho { animation: respirar 18s ease-in-out infinite alternate; }
}
@keyframes respirar {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
  to   { transform: translate3d(-1.5%, 1.2%, 0) scale(1.06); opacity: 1; }
}
/* com foto, o brilho decorativo sai de cena */
.hero:has(.hero__foto) .hero__brilho { display: none; }
.hero:has(.hero__foto) .hero__marca-dagua { display: none; }

/* ícone ao lado de cada fato, como na referência do banner */
.fato__topo { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; }
.fato__icone { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: var(--raio); border: 1px solid rgba(112,249,81,.35); color: var(--acento); }
.fato__icone svg { width: 20px; height: 20px; }
.hero__marca-dagua {
  position: absolute; right: -6%; bottom: -12%; width: min(58%, 40rem);
  color: var(--claro); opacity: .07; pointer-events: none;
}
@media (max-width: 899px) { .hero__marca-dagua { right: -18%; bottom: -6%; width: 90%; opacity: .05; } }

.hero__inner { position: relative; z-index: 1; padding-block: clamp(4rem, 2.6rem + 6vw, 8.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); }
.hero__etiqueta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4375rem .875rem; margin-bottom: 1.75rem;
  border: 1px solid rgba(112,249,81,.5); border-radius: 100px;
  font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acento);
}
.hero__etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.hero h1 { max-width: 15ch; }
/* a coluna de conteúdo não passa da metade: à direita a foto tem de aparecer */
@media (min-width: 900px) { .hero__inner > *:not(.fatos) { max-width: 54%; } }
.hero h1 span { display: block; color: var(--acento); }
.hero__texto { margin-top: 1.75rem; font-size: var(--t-lg); color: var(--texto-claro-suave); max-width: 44ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.5rem; }

/* Faixa de fatos, ancorada no rodapé do hero */
.fatos {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .fatos { grid-template-columns: repeat(4, 1fr); } }
.fato { padding: 1.75rem 0 2rem; }
.fato + .fato { border-left: 1px solid rgba(255,255,255,.16); padding-left: 1.5rem; }
@media (max-width: 899px) { .fato:nth-child(3) { border-left: 0; padding-left: 0; } }
/* Valor numérico aguenta corpo grande; valor em PALAVRA precisa de um menor,
   senão "Venda ou locação" quebra em duas linhas e desalinha a faixa inteira. */
.fato__valor { display: block; font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 800; color: var(--acento); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.fato__valor--texto { font-size: var(--t-lg); }
.fato__rotulo { margin-top: .625rem; font-size: var(--t-sm); color: var(--texto-claro-suave); max-width: 30ch; }

/* Cartões ───────────────────────────────────────────────────────────────── */
.cartao {
  display: flex; flex-direction: column; gap: .875rem;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); padding: 1.875rem;
  transition: border-color var(--rapido), box-shadow var(--rapido), transform var(--rapido);
}
@media (prefers-reduced-motion: reduce) { .cartao { transition: none; } }
.cartao p { font-size: var(--t-base); color: var(--texto-suave); }
a.cartao { text-decoration: none; }
a.cartao:hover { border-color: var(--acento); box-shadow: var(--sombra); transform: translateY(-3px); }

.secao--escuro .cartao, .secao--azul .cartao {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.16); color: var(--texto-claro);
}
.secao--escuro .cartao p, .secao--azul .cartao p { color: var(--texto-claro-suave); }
.secao--escuro a.cartao:hover, .secao--azul a.cartao:hover { border-color: var(--acento); background: rgba(255,255,255,.1); }

.pastilha { display: grid; place-items: center; width: 56px; height: 56px; flex: none; background: var(--acento); color: var(--indigo-fundo); border-radius: var(--raio); }
.pastilha svg { width: 30px; height: 30px; }
.secao--escuro .pastilha { background: rgba(112,249,81,.14); color: var(--acento); }

.cartao__link {
  margin-top: auto; padding-top: .625rem; display: inline-flex; align-items: center; gap: .4375rem;
  font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: 700; color: var(--indigo);
}
.secao--escuro .cartao__link, .secao--azul .cartao__link { color: var(--acento); }
.cartao__link svg { width: 16px; height: 16px; transition: transform var(--rapido); }
a.cartao:hover .cartao__link svg { transform: translateX(4px); }

/* BENTO — o mosaico do catálogo ─────────────────────────────────────────
   Sem foto de produto, a variação de tamanho e de cor entre os blocos é o
   que cria hierarquia. Tile grande = categoria principal. */
.bento { display: grid; gap: var(--gap); }
@media (min-width: 720px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(13rem, auto); } }

.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  gap: .625rem; min-height: 14rem; padding: 1.75rem; overflow: hidden; isolation: isolate;
  border: 1px solid var(--borda); border-radius: var(--raio-lg);
  background: var(--superficie); text-decoration: none;
  transition: border-color var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }
.tile:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--acento); }
.tile h3 { position: relative; z-index: 1; }
.tile p { position: relative; z-index: 1; font-size: var(--t-base); color: var(--texto-suave); max-width: 38ch; }
.tile__link { position: relative; z-index: 1; margin-top: .375rem; display: inline-flex; align-items: center; gap: .4375rem; font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: 700; color: var(--indigo); }
.tile__link svg { width: 16px; height: 16px; transition: transform var(--rapido); }
.tile:hover .tile__link svg { transform: translateX(4px); }

/* foto de fundo do bloco + véu, para o texto ter contraste garantido */
.tile__foto { position: absolute; inset: 0; z-index: 0; }
.tile__foto img { width: 100%; height: 100%; object-fit: cover; }
.tile__foto::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  /* Paradas fixadas por MEDIÇÃO, não a olho: com o topo em .45 o número verde
     dava 3.09:1 e o texto cinza 3.54:1 — os dois reprovam. O número vive no
     topo do bloco, exatamente onde o véu era mais fino. */
  background: linear-gradient(0deg, rgba(5,0,52,.96) 0%, rgba(5,0,52,.9) 45%, rgba(5,0,52,.8) 100%);
}
.tile:has(.tile__foto) { border-color: var(--indigo-fundo); }
.tile:has(.tile__foto) h3 { color: #FFFFFF; }
.tile:has(.tile__foto) p { color: var(--cinza); }
.tile:has(.tile__foto) .tile__link { color: var(--verde); }
.tile:has(.tile__foto) .tile__num { color: var(--verde); opacity: 1; }

/* pastilha de ícone acima do título, dentro do bloco */
.tile__icone {
  display: grid; place-items: center; width: 46px; height: 46px;
  margin-bottom: .875rem; flex: none;
  border: 1.5px solid rgba(112,249,81,.45); border-radius: var(--raio);
  color: var(--verde); background: rgba(5,0,52,.4);
  transition: border-color var(--rapido), background-color var(--rapido);
}
.tile__icone svg { width: 26px; height: 26px; }
.tile:hover .tile__icone { border-color: var(--verde); background: rgba(112,249,81,.14); }
.tile--grande .tile__icone { width: 54px; height: 54px; }
.tile--grande .tile__icone svg { width: 30px; height: 30px; }

/* o corpo fica em FLUXO: o número empurra o texto para baixo em vez de
   flutuar por cima dele, que era o defeito dos blocos pequenos */
.tile__corpo { position: relative; z-index: 3; display: flex; flex-direction: column; height: 100%; }
.tile__corpo .tile__num { position: static; margin-bottom: auto; padding-bottom: .75rem; }
.tile__corpo h3 { margin-bottom: .5rem; }

/* o desenho técnico vive no canto, cortado pela borda do bloco */
.tile__arte {
  position: absolute; top: -1.25rem; right: -1.25rem; width: 10rem; height: 10rem;
  color: var(--cinza); opacity: .85; pointer-events: none;
  transition: transform var(--medio), color var(--rapido);
}
.tile:hover .tile__arte { transform: rotate(-4deg) scale(1.06); color: var(--acento); }
@media (prefers-reduced-motion: reduce) { .tile__arte { transition: none; } }

.tile--grande { grid-column: span 1; }
@media (min-width: 1040px) { .tile--grande { grid-column: span 2; grid-row: span 2; } }
.tile--grande .tile__arte { width: 18rem; height: 18rem; top: -2rem; right: -2rem; }
.tile--grande h3 { font-size: var(--t-2xl); }

.tile--escuro { background: var(--indigo-fundo); border-color: var(--indigo-fundo); color: var(--texto-claro); }
.tile--escuro h3 { color: var(--texto-claro); }
.tile--escuro p { color: var(--texto-claro-suave); }
.tile--escuro .tile__link { color: var(--acento); }
.tile--escuro .tile__arte { color: var(--claro); opacity: .16; }
.tile--escuro:hover .tile__arte { color: var(--acento); opacity: .3; }

.tile--acento { background: var(--acento); border-color: var(--acento); color: var(--indigo-fundo); }
.tile--acento h3, .tile--acento p, .tile--acento .tile__link { color: var(--indigo-fundo); }
.tile--acento .tile__arte { color: var(--indigo-fundo); opacity: .17; }
.tile--acento:hover { border-color: var(--indigo-fundo); }
.tile--acento:hover .tile__arte { color: var(--indigo-fundo); opacity: .26; }

.tile--azul { background: var(--indigo-medio); border-color: var(--indigo-medio); color: var(--texto-claro); }
.tile--azul h3 { color: var(--texto-claro); }
.tile--azul p { color: var(--texto-claro-suave); }
.tile--azul .tile__link { color: var(--acento); }
.tile--azul .tile__arte { color: var(--claro); opacity: .16; }

/* contador do bloco, canto superior esquerdo */
.tile__num {
  position: absolute; top: 1.5rem; left: 1.875rem; z-index: 1;
  font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .1em; color: var(--texto-suave); opacity: .7;
}
.tile--escuro .tile__num, .tile--azul .tile__num { color: var(--cinza); }
.tile--acento .tile__num { color: var(--indigo-fundo); opacity: .55; }

/* Lista de produtos dentro da categoria (sem foto: lista densa e escaneável) */
.lista-produtos { display: grid; gap: .75rem; }
.lista-produtos a {
  display: flex; align-items: center; gap: 1.25rem; padding: 1rem;
  background: var(--superficie); border: 1px solid var(--borda-clara); border-radius: var(--raio-lg);
  text-decoration: none;
  transition: border-color var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
.lista-produtos a:hover { border-color: var(--indigo); transform: translateX(4px); box-shadow: var(--sombra); }

/* miniatura do produto — dá âncora visual à linha sem virar grade de cartões */
.item-foto {
  position: relative; flex: none; width: 104px; height: 78px; overflow: hidden;
  border-radius: var(--raio); background: var(--indigo-fundo);
}
.item-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.68,.36,1); }
.lista-produtos a:hover .item-foto img { transform: scale(1.06); }
.item-foto--vazia { display: grid; place-items: center; color: var(--cinza); }
.item-foto--vazia svg { width: 46px; height: 46px; }
@media (max-width: 519px) { .item-foto { width: 76px; height: 60px; } }

.item-texto { min-width: 0; }
/* ⚠ a classe fica no <span>, não no <svg>: o seletor `svg.item-icone` não
   casava, e por isso o ícone saía sem tamanho nenhum na página de categoria. */
.lista-produtos .item-icone { display: inline-grid; place-items: center; width: 22px; height: 22px; vertical-align: -4px; margin-right: .5rem; color: var(--indigo); }
.lista-produtos .item-icone svg { width: 22px; height: 22px; }
.lista-produtos__nome { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-md); }
.lista-produtos__desc { display: block; font-size: var(--t-sm); color: var(--texto-suave); margin-top: .3125rem; }
.lista-produtos__seta { margin-left: auto; width: 20px; height: 20px; flex: none; color: var(--indigo); }
@media (max-width: 519px) { .lista-produtos__seta { display: none; } }

/* PILARES — mosaico de fotos à esquerda, lista de itens à direita ────────
   Layout da 3ª referência: quatro fotos em grade, cartão de destaque em
   laranja atravessando o meio, e do outro lado uma lista vertical com
   pastilha de ícone. Substitui a fileira de quatro cartões soltos. */
.pilares { display: grid; gap: clamp(2.5rem, 1.8rem + 3vw, 4rem); align-items: center; }
@media (min-width: 980px) { .pilares { grid-template-columns: 1fr 1fr; } }

.mosaico-fotos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mosaico-fotos figure {
  position: relative; margin: 0; border-radius: var(--raio-lg); overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--indigo-fundo);
}
.mosaico-fotos figure:nth-child(2) { margin-top: 2.5rem; }
.mosaico-fotos figure:nth-child(3) { margin-top: -1.5rem; }
.mosaico-fotos img { width: 100%; height: 100%; object-fit: cover; }

/* cartão de destaque cruzando o mosaico */
.mosaico-destaque {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; gap: 1rem; padding: 1.5rem 1.75rem; min-width: 11rem;
  background: var(--acento); color: var(--indigo-fundo);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-alta); text-align: center;
}
.mosaico-destaque b { display: block; font-family: var(--f-titulo); font-size: var(--t-2xl); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.mosaico-destaque span { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }

/* A lista precisa respirar do título e entre si: colada no h2 ela lia como
   continuação da frase, e com 1.75rem entre itens os quatro viravam um bloco só. */
.lista-pilares { display: grid; gap: 2.25rem; margin-top: 2.75rem; }
.lista-pilares li { display: flex; gap: 1.25rem; align-items: flex-start; }
.lista-pilares h3 { margin-bottom: .4375rem; }
.lista-pilares p { max-width: 46ch; }

/* Em fundo claro a pastilha era `--claro` sobre `--claro`: sumia, e sobrava um
   ícone solto de 20px. Vira chip branco com borda. */
.lista-pilares .pilar__icone {
  width: 48px; height: 48px;
  background: var(--superficie); color: var(--indigo);
  border: 1px solid var(--borda-clara); box-shadow: var(--sombra);
}
.lista-pilares .pilar__icone svg { width: 24px; height: 24px; }
.secao--escuro .lista-pilares .pilar__icone {
  background: rgba(112,249,81,.12); color: var(--verde);
  border-color: rgba(112,249,81,.3); box-shadow: none;
}

/* ETAPAS — faixa de acento com cartões atravessando a borda ──────────────
   Layout da 4ª referência: cabeçalho sobre fundo laranja e os cartões
   descendo por cima do limite entre a faixa e o fundo claro. */
.etapas { position: relative; background: var(--acento); color: var(--indigo-fundo); }
/* a metade de baixo da seção é o fundo claro; os cartões cruzam a divisa */
.etapas::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: var(--bg); }
.etapas__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.etapas .olho { color: var(--indigo-fundo); }
.etapas .olho::before { background: var(--indigo-fundo); }
.etapas h2 { color: var(--indigo-fundo); }
/* branco sobre o laranja dá 1.79 e reprova até no mínimo de texto grande.
   A terracota escura destaca a palavra e passa (4.67:1). */
.etapas .acento { color: var(--indigo); }

.etapas__grade { display: grid; gap: var(--gap); margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
@media (min-width: 620px)  { .etapas__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .etapas__grade { grid-template-columns: repeat(4, 1fr); } }

.etapa { display: flex; flex-direction: column; }
.etapa__foto {
  position: relative; border-radius: var(--raio-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--indigo-fundo);
}
.etapa__foto img { width: 100%; height: 100%; object-fit: cover; }
/* pastilha com o número, atravessando a base da foto */
.etapa__selo {
  position: absolute; left: 1rem; bottom: -1.5rem; z-index: 2;
  display: grid; place-items: center; width: 60px; height: 60px;
  background: var(--superficie); color: var(--indigo-fundo);
  border-radius: var(--raio-lg); box-shadow: var(--sombra);
  font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 800; letter-spacing: -.02em;
}
.etapa__corpo { padding-top: 2.5rem; }
.etapa h3 { margin-bottom: .5rem; }
.etapa p { font-size: var(--t-base); color: var(--texto-suave); }
.etapas__acao { margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem); text-align: center; }

/* Institucional ─────────────────────────────────────────────────────────── */
.duas-colunas { display: grid; gap: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 920px) { .duas-colunas { grid-template-columns: 1fr 1fr; } }
.duas-colunas p + p { margin-top: 1.125rem; }

.marcadores { display: grid; gap: 1rem; }
.marcadores li { display: flex; gap: .875rem; align-items: flex-start; }
.marcadores svg { width: 24px; height: 24px; flex: none; margin-top: 1px; color: var(--indigo); }
.secao--escuro .marcadores svg, .secao--azul .marcadores svg { color: var(--acento); }

/* INSTITUCIONAL — colagem à esquerda, texto à direita ────────────────────
   Estrutura da referência: duas imagens sobrepostas, selo ancorado no canto
   inferior, e do outro lado título em duas linhas, parágrafo e dois blocos
   com pastilha de ícone. */
.institucional { display: grid; gap: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 920px) { .institucional { grid-template-columns: 1fr 1fr; } }

.colagem { position: relative; padding-bottom: 3.5rem; padding-left: 3rem; }
@media (max-width: 519px) { .colagem { padding-left: 0; padding-bottom: 5rem; } }

.colagem__principal {
  position: relative; border-radius: var(--raio-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--indigo-fundo);
}
.colagem__secundaria {
  position: absolute; left: 0; bottom: 1.25rem; width: 46%;
  border-radius: var(--raio-lg); overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--indigo-medio); border: 6px solid var(--bg-alto);
}
@media (max-width: 519px) { .colagem__secundaria { width: 54%; bottom: 2.5rem; } }
.colagem img { width: 100%; height: 100%; object-fit: cover; }

/* espaço reservado enquanto a foto não chega — mantém o layout de pé e
   deixa explícito que falta arquivo, em vez de simular com foto genérica */
.colagem__vazio {
  position: absolute; inset: 0; display: grid; place-items: center;
  gap: .625rem; padding: 1rem; text-align: center; color: var(--cinza);
}
.colagem__vazio svg { width: 44%; max-width: 8rem; height: auto; opacity: .3; }
.colagem__vazio span { font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }

.selo {
  position: absolute; right: 1.5rem; bottom: 0; z-index: 2;
  display: grid; gap: .125rem; padding: 1.125rem 1.5rem;
  background: var(--acento); color: var(--indigo-fundo);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-alta); max-width: 15rem;
}
@media (max-width: 519px) { .selo { right: 0; } }
.selo__valor { font-family: var(--f-titulo); font-size: var(--t-2xl); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.selo__rotulo { font-size: var(--t-sm); font-weight: 600; line-height: 1.35; }

/* os dois blocos com pastilha, no lugar da lista de marcadores */
.pilar-duplo { display: grid; gap: 1.5rem; margin-top: 2rem; }
.pilar { display: flex; gap: 1.125rem; align-items: flex-start; }
.pilar__icone {
  display: grid; place-items: center; width: 54px; height: 54px; flex: none;
  background: var(--indigo-fundo); color: var(--acento); border-radius: var(--raio-lg);
}
.pilar__icone svg { width: 28px; height: 28px; }
.pilar h3 { font-size: var(--t-lg); margin-bottom: .375rem; }
.pilar p { font-size: var(--t-base); color: var(--texto-suave); }

/* Página interna ────────────────────────────────────────────────────────── */
.pagehero { position: relative; background: var(--indigo-fundo); color: var(--texto-claro); overflow: hidden; }
.pagehero__inner { position: relative; z-index: 1; padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) clamp(3rem, 2.2rem + 3.5vw, 5rem); }
.pagehero__arte { position: absolute; right: -3%; bottom: -22%; width: min(34%, 24rem); color: var(--claro); opacity: .08; }
@media (max-width: 719px) { .pagehero__arte { display: none; } }
.pagehero h1 { max-width: 20ch; }
.pagehero__texto { margin-top: 1.25rem; max-width: 52ch; color: var(--texto-claro-suave); font-size: var(--t-lg); }

.migalhas { font-size: var(--t-sm); color: var(--texto-claro-suave); margin-bottom: 1.75rem; }
.migalhas ol { display: flex; flex-wrap: wrap; gap: .125rem .5rem; align-items: center; }
/* padding vertical leva o alvo de toque a 26px — o texto sozinho dá 16px e
   reprova o mínimo de 24×24 do WCAG 2.2 */
.migalhas a { display: inline-block; padding-block: .3125rem; text-decoration: none; }
.migalhas a:hover { color: var(--acento); text-decoration: underline; }
.migalhas li + li::before { content: '/'; margin-right: .5rem; opacity: .45; }

.prosa { max-width: 40rem; font-size: var(--t-md); }
.prosa > * + * { margin-top: 1.25rem; }
.prosa p { color: var(--texto-suave); }
.prosa p:first-of-type { font-size: var(--t-lg); color: var(--texto); }
/* Abertura em resposta direta: é o parágrafo que o buscador cita em featured
   snippet e que as IAs conseguem extrair. Ganha peso visual para o leitor
   humano encontrar a resposta sem ler a página inteira. */
.prosa__resposta {
  font-size: var(--t-lg); color: var(--texto); font-weight: 500;
  padding-left: 1.125rem; border-left: 3px solid var(--verde);
}
.prosa h2 { font-size: var(--t-2xl); margin-top: 2.75rem; }
.prosa h2 + p { margin-top: 1rem; }

.layout-artigo { display: grid; gap: clamp(2.5rem, 1.8rem + 3vw, 4rem); }
@media (min-width: 1040px) { .layout-artigo { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } }
.lateral { display: grid; gap: 1rem; }
@media (min-width: 1040px) { .lateral { position: sticky; top: 104px; } }
.lateral__caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: 1.625rem; }
.lateral__caixa h2 { font-size: var(--t-lg); margin-bottom: .875rem; }
.lateral__caixa p { font-size: var(--t-base); color: var(--texto-suave); margin-bottom: 1.25rem; }
.lateral__lista a { display: block; padding: .625rem 0; font-size: var(--t-base); text-decoration: none; border-bottom: 1px solid var(--borda-suave); }
.lateral__lista li:last-child a { border-bottom: 0; }
.lateral__lista a:hover { color: var(--indigo); }
.lateral__lista a[aria-current="page"] { color: var(--indigo); font-weight: 700; }
.lateral__caixa--escuro { background: var(--indigo-fundo); border-color: var(--indigo-fundo); color: var(--texto-claro); }
.lateral__caixa--escuro h2 { color: var(--texto-claro); }
.lateral__caixa--escuro p { color: var(--texto-claro-suave); }

/* foto no topo da página de produto */
.foto-produto { margin: 0 0 2rem; border-radius: var(--raio-lg); overflow: hidden; aspect-ratio: 4 / 3; max-width: 40rem; }
.foto-produto img { width: 100%; height: 100%; object-fit: cover; }

/* Sanfona de FAQ ────────────────────────────────────────────────────────── */
/* Compacto: com 15 perguntas por página, cada linha gorda vira um metro de
   rolagem. Altura de linha, padding e corpo do texto reduzidos; o alvo de
   toque continua acima de 44px pela altura mínima do gatilho. */
.faq { display: grid; gap: .375rem; max-width: 56rem; }
.faq__item { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); overflow: hidden; transition: border-color var(--rapido); }
.faq__item:has(.faq__gatilho[aria-expanded="true"]) { border-color: var(--acento); }
.faq__gatilho {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  width: 100%; min-height: 48px; padding: .8125rem 1.125rem; background: transparent; border: 0; text-align: left;
  font-family: var(--f-titulo); font-size: var(--t-base); font-weight: 700; line-height: 1.35;
}
.faq__gatilho:hover { color: var(--indigo); }
.faq__sinal { width: 20px; height: 20px; flex: none; color: var(--indigo); transition: transform var(--medio); }
@media (prefers-reduced-motion: reduce) { .faq__sinal { transition: none; } }
.faq__gatilho[aria-expanded="true"] .faq__sinal { transform: rotate(45deg); }
.faq__painel { padding: 0 1.125rem 1.125rem; }
.faq__painel[hidden] { display: none; }
.faq__painel p { color: var(--texto-suave); font-size: var(--t-base); max-width: 68ch; }
.faq__painel p + p { margin-top: .875rem; }

/* Formulário ────────────────────────────────────────────────────────────── */
.form { display: grid; gap: 1.125rem; max-width: 42rem; }
@media (min-width: 620px) { .form__par { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; } }
.campo { display: grid; gap: .4375rem; }
.campo label { font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: 700; }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: .8125rem 1rem;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  transition: border-color var(--rapido);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #6B7B7F; }
.campo input:hover, .campo textarea:hover { border-color: var(--indigo-medio); }
.form__nota { font-size: var(--t-sm); color: var(--texto-suave); }
.mel { position: absolute; left: -9999px; }

/* Faixa de CTA ──────────────────────────────────────────────────────────── */
.cta-faixa { position: relative; background: var(--acento); color: var(--indigo-fundo); overflow: hidden; }
/* sobre o verde a textura precisa ser escura; a regra genérica é clara e
   sumiria por completo */
.cta-faixa .textura { opacity: .8; }
.cta-faixa .textura::before {
  background:
    repeating-linear-gradient(0deg, rgba(5,0,52,.07) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(90deg, rgba(5,0,52,.05) 0 2px, transparent 2px 44px);
}
.cta-faixa .textura::after {
  background: repeating-linear-gradient(-24deg, rgba(5,0,52,.06) 0 14px, transparent 14px 44px);
}
.cta-faixa__inner { display: grid; gap: 2rem; padding-block: clamp(3rem, 2.2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 920px) { .cta-faixa__inner { grid-template-columns: 1fr auto; gap: 3.5rem; } }
.cta-faixa h2 { max-width: 22ch; }
.cta-faixa p { margin-top: 1rem; max-width: 48ch; }
.cta-faixa .btn--escuro { background: var(--indigo-fundo); color: var(--acento); }

/* Aviso de pendência — visível de propósito, some quando o dado chegar */
.pendente {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .0625rem .4375rem; border-radius: 3px;
  background: rgba(125,153,159,.14); color: var(--indigo);
  font-family: var(--f-corpo); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
/* Em qualquer superfície escura o selo vira laranja. `.topo-info` estava fora
   desta lista e os três selos da barra do topo ficavam em 2.17:1. */
.secao--escuro .pendente, .secao--azul .pendente, .hero .pendente,
.rodape .pendente, .pagehero .pendente, .topo-info .pendente,
.tile--escuro .pendente, .tile--azul .pendente, .lateral__caixa--escuro .pendente {
  background: rgba(112,249,81,.16); color: var(--acento);
}
.aviso {
  display: flex; gap: .875rem; align-items: flex-start; max-width: 58rem;
  padding: 1.125rem 1.375rem; border-left: 3px solid var(--acento-2);
  background: rgba(125,153,159,.07); border-radius: 0 var(--raio) var(--raio) 0;
  font-size: var(--t-base); color: var(--texto-suave);
}
.aviso svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--indigo); }
.secao--escuro .aviso { background: rgba(112,249,81,.09); border-color: var(--acento); color: var(--texto-claro-suave); }
.secao--escuro .aviso svg { color: var(--acento); }

/* Rodapé ────────────────────────────────────────────────────────────────── */
.rodape { background: var(--indigo-fundo); color: var(--texto-claro-suave); padding-top: clamp(3.5rem, 2.6rem + 3vw, 5.5rem); }
.rodape__grade { display: grid; gap: 2.5rem; padding-bottom: 3.5rem; }
@media (min-width: 700px)  { .rodape__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rodape__grade { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.rodape h2 { font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--verde); margin-bottom: 1.125rem; }
/* virou link: precisa de alvo de toque, senão fica com 15px de altura */
.rodape h2 a { display: inline-block; padding-block: .4375rem; text-decoration: none; }
.rodape h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ícone discreto antes de cada item: 16px, no cinza da marca, só para dar
   ritmo à coluna. Ganha o verde no hover, junto com o texto. */
.rodape__icone { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--cinza); opacity: .65; transition: color var(--rapido), opacity var(--rapido); }
.rodape__icone svg { width: 16px; height: 16px; }
.rodape__lista a { display: inline-flex; align-items: center; gap: .5rem; }
.rodape__lista a:hover .rodape__icone { color: var(--verde); opacity: 1; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--acento); }
/* sem o padding os links do rodapé ficam com 19px de alvo */
.rodape__lista { display: grid; gap: .1875rem; font-size: var(--t-base); }
.rodape__lista a { padding-block: .3125rem; }
.rodape__sobre p { font-size: var(--t-base); margin-bottom: 1.5rem; max-width: 32rem; }
.rodape__contato { display: grid; gap: .75rem; font-size: var(--t-base); }
.rodape__contato li { display: flex; gap: .75rem; align-items: flex-start; }
.rodape__contato svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--acento); }
.rodape__fim {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--t-sm);
}
.rodape__fim a { display: inline-block; padding-block: .3125rem; }

/* Captação de e-mail no topo do rodapé ─────────────────────────────────── */
.assinatura {
  display: grid; gap: 2rem; align-items: center;
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (min-width: 900px) { .assinatura { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; } }
.assinatura__titulo { font-size: var(--t-2xl); color: #FFFFFF; }
.assinatura__texto { margin-top: .875rem; font-size: var(--t-base); color: var(--cinza); max-width: 46ch; }
.assinatura__form { display: grid; gap: .75rem; }
@media (min-width: 560px) {
  .assinatura__form { grid-template-columns: 1fr auto; align-items: start; }
  .assinatura__form .form__nota { grid-column: 1 / -1; }
}
.assinatura__form input {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #FFFFFF;
}
.assinatura__form input::placeholder { color: var(--cinza); }
.assinatura__form input:hover, .assinatura__form input:focus { border-color: var(--verde); }
.assinatura__form .form__nota { color: var(--cinza); }
/* 5 colunas no rodapé: sobre + navegação + as três famílias do catálogo */
@media (min-width: 1040px) { .rodape__grade { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } }

/* Botão flutuante de WhatsApp */
.zap {
  position: fixed; z-index: 40;
  /* fica acima da barra de gestos do iOS, não debaixo dela */
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 58px; height: 58px;
  background: var(--indigo-fundo); color: var(--verde); border-radius: 50%;
  box-shadow: var(--sombra-alta); text-decoration: none;
}
.zap svg { width: 30px; height: 30px; }
.zap:hover { background: var(--indigo-medio); }

/* Movimento — desligado por padrão; o script do <head> liga a classe.
   Sem JS, ou com prefers-reduced-motion, a página nasce estática e visível. */
.js-motion :where(.hero__inner > *, .fato, .grade > *, .bento > *, .cabeca, .barra-secao > *,
                  .duas-colunas > *, .institucional > *, .pilares > *, .etapa, .lista-pilares li,
                  .pilar, .faq__item, .lista-produtos > *) {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .68, .36, 1);
}
.js-motion .is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-motion :where(.hero__inner > *, .fato, .grade > *, .bento > *, .cabeca, .barra-secao > *,
                    .duas-colunas > *, .institucional > *, .pilares > *, .etapa, .lista-pilares li,
                    .pilar, .faq__item, .lista-produtos > *) {
    opacity: 1; transform: none; transition: none;
  }
}

/* Efeitos leves de interação ─────────────────────────────────────────────
   Tudo em transform/opacity, que o compositor resolve sem recalcular layout. */
@media (prefers-reduced-motion: no-preference) {
  /* o desenho do bloco desliza um pouco antes do resto — dá profundidade sem parallax de verdade */
  .tile__arte { transition: transform .45s cubic-bezier(.22,.68,.36,1), color var(--rapido), opacity var(--rapido); }
  .tile:hover .tile__arte { transform: rotate(-5deg) scale(1.1) translate(-4px, 4px); }

  /* foto respira ao passar o mouse, dentro da máscara do bloco */
  .colagem__principal img, .colagem__secundaria img, .etapa__foto img, .mosaico-fotos img {
    transition: transform .6s cubic-bezier(.22,.68,.36,1);
  }
  .colagem__principal:hover img, .etapa:hover .etapa__foto img, .mosaico-fotos figure:hover img { transform: scale(1.05); }

  /* pastilha de ícone acompanha o hover do item */
  .lista-pilares li .pilar__icone, .pilar__icone { transition: transform var(--rapido), background-color var(--rapido); }
  .lista-pilares li:hover .pilar__icone { transform: translateY(-3px); }

  .btn:hover { transform: translateY(-1px); }
  .etapa__selo { transition: transform var(--medio); }
  .etapa:hover .etapa__selo { transform: translateY(-4px); }
}


/* MOVIMENTO ──────────────────────────────────────────────────────────────
   Tudo em transform/opacity, que o compositor resolve sem recalcular layout,
   e tudo dentro de `prefers-reduced-motion: no-preference`. Sem exceção: o
   site inteiro tem de continuar utilizável com movimento desligado. */
@media (prefers-reduced-motion: no-preference) {

  /* flutuação lenta e curta — 8px em 7s. Passa despercebida de perto e dá
     vida quando se olha a página inteira. */
  @keyframes flutuar { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-8px,0); } }
  .selo, .mosaico-destaque { animation: flutuar 7s ease-in-out infinite alternate; }
  .mosaico-destaque { animation-duration: 6s; animation-delay: -2s; }
  /* o destaque do mosaico já vive centralizado por transform: a animação
     precisa preservar essa translação, senão ele salta para o canto */
  @keyframes flutuar-centro {
    from { transform: translate(-50%, -50%); } to { transform: translate(-50%, calc(-50% - 9px)); }
  }
  .mosaico-destaque { animation-name: flutuar-centro; }

  /* as fotos do mosaico respiram em tempos diferentes, para o conjunto não
     pulsar em bloco */
  .mosaico-fotos figure { animation: flutuar 9s ease-in-out infinite alternate; }
  .mosaico-fotos figure:nth-child(2) { animation-duration: 11s; animation-delay: -3s; }
  .mosaico-fotos figure:nth-child(3) { animation-duration: 10s; animation-delay: -6s; }
  .mosaico-fotos figure:nth-child(4) { animation-duration: 12s; animation-delay: -1s; }

  /* PARALAXE DE PONTEIRO — as variáveis são escritas pelo JS; sem JS elas
     valem 0 e nada se move. */
  .hero__foto img {
    transform: scale(1.06) translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -14px), 0);
    transition: transform .5s cubic-bezier(.22,.68,.36,1);
  }
  .hero__marca-dagua {
    transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 18px), 0);
    transition: transform .6s cubic-bezier(.22,.68,.36,1);
  }

  /* BRILHO QUE SEGUE O PONTEIRO nos blocos do bento */
  .tile::after {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    opacity: 0; transition: opacity .3s;
    background: radial-gradient(18rem 18rem at var(--px, 50%) var(--py, 50%), rgba(112,249,81,.16), transparent 70%);
  }
  .tile:hover::after { opacity: 1; }

  /* varredura de luz no botão principal */
  .btn--primario { position: relative; overflow: hidden; }
  .btn--primario::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg); transition: transform .55s ease;
  }
  .btn--primario:hover::after { transform: skewX(-18deg) translateX(340%); }

  /* cartões e chips reagem ao ponteiro */
  .cartao:hover, .lateral__caixa:hover { transform: translateY(-2px); }
  .cartao, .lateral__caixa { transition: transform var(--rapido), border-color var(--rapido), box-shadow var(--rapido); }
  .fato:hover .fato__valor { transform: translateY(-2px); }
  .fato__valor { transition: transform var(--rapido); }
  .etapa:hover .etapa__foto { transform: translateY(-4px); }
  .etapa__foto { transition: transform var(--medio); }
}

/* BLOG ────────────────────────────────────────────────────────────────── */
.filtro-blog ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro-blog a {
  display: inline-block; padding: .5rem 1rem; text-decoration: none;
  font-family: var(--f-titulo); font-size: var(--t-sm); font-weight: 700;
  border: 1px solid var(--borda-clara); border-radius: 100px;
  background: var(--superficie); transition: border-color var(--rapido), background-color var(--rapido), color var(--rapido);
}
.filtro-blog a:hover { border-color: var(--indigo); }
/* o item ativo NÃO usa só cor para se distinguir: muda o fundo inteiro,
   porque cor sozinha não comunica estado para quem não a percebe */
.filtro-blog a[aria-current="page"] { background: var(--indigo-fundo); color: #FFFFFF; border-color: var(--indigo-fundo); }

.post-cartao { display: flex; }
.post-cartao a {
  display: flex; flex-direction: column; gap: .625rem; width: 100%; padding: 1.75rem;
  background: var(--superficie); border: 1px solid var(--borda-clara); border-radius: var(--raio-lg);
  text-decoration: none; transition: border-color var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
.post-cartao a:hover { border-color: var(--indigo); transform: translateY(-3px); box-shadow: var(--sombra); }
.post-cartao__tag {
  align-self: flex-start; padding: .1875rem .625rem; border-radius: 100px;
  background: var(--verde); color: var(--indigo-fundo);
  font-family: var(--f-titulo); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.post-cartao h3 { font-size: var(--t-lg); }
.post-cartao p { font-size: var(--t-base); color: var(--texto-suave); }
.post-cartao__meta { margin-top: auto; padding-top: .5rem; font-size: var(--t-sm); color: var(--cinza-texto); }

.paginacao { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: center; margin-top: 3rem; }
.paginacao a, .paginacao span {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .5rem;
  font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-base);
  border: 1px solid var(--borda-clara); border-radius: var(--raio); background: var(--superficie);
  text-decoration: none;
}
.paginacao a:hover { border-color: var(--indigo); }
.paginacao span[aria-current] { background: var(--indigo-fundo); color: #FFFFFF; border-color: var(--indigo-fundo); }

.post-meta { font-size: var(--t-sm); color: var(--cinza-texto); margin-bottom: 1.5rem; }
.prosa--artigo { max-width: 44rem; }
.prosa--artigo > * + * { margin-top: 1.25rem; }
.prosa--artigo h2 { font-size: var(--t-2xl); margin-top: 2.75rem; }

.lista-marcada { display: grid; gap: .75rem; }
.lista-marcada li { position: relative; padding-left: 1.625rem; color: var(--texto-suave); }
.lista-marcada li::before {
  content: ''; position: absolute; left: 0; top: .5625rem;
  width: 8px; height: 8px; border-radius: 2px; background: var(--verde);
  outline: 1px solid var(--indigo);
}

.destaque {
  padding: 1.375rem 1.5rem; border-left: 4px solid var(--verde);
  background: var(--claro-alto); border-radius: 0 var(--raio-lg) var(--raio-lg) 0;
}
.destaque p { font-size: var(--t-md); color: var(--texto); font-weight: 500; }

/* tabela larga não pode empurrar a página: rola dentro do próprio contêiner */
.tabela-rolavel { overflow-x: auto; border: 1px solid var(--borda-clara); border-radius: var(--raio-lg); }
.tabela-rolavel table { width: 100%; border-collapse: collapse; font-size: var(--t-base); min-width: 32rem; }
.tabela-rolavel th, .tabela-rolavel td { padding: .875rem 1rem; text-align: left; border-bottom: 1px solid var(--borda-clara); }
.tabela-rolavel th { background: var(--indigo-fundo); color: #FFFFFF; font-family: var(--f-titulo); font-size: var(--t-sm); letter-spacing: .02em; }
.tabela-rolavel tr:last-child td { border-bottom: 0; }
.tabela-rolavel td { color: var(--texto-suave); }

@media print {
  .cabecalho, .topo-info, .zap, .cta-faixa, .gaveta { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Pares de contraste medidos (WCAG 2.1), não os do card da paleta —
   o card mede contra preto, o que não vale para o site.

   APROVADOS
     12.67  AAA  Palladian      sobre Abyssal
     11.41  AAA  Blue Fantastic sobre branco
      9.43  AAA  Palladian      sobre Blue Fantastic
      8.57  AAA  Oatmeal        sobre Abyssal
      8.55  AAA  Abyssal        sobre Burning Flame   <- o CTA
      6.38  AA   Oatmeal        sobre Blue Fantastic
      5.91  AA   var(--indigo)        sobre a tinta Truffle 14%
      4.58  AA   Palladian      sobre Truffle

   PROIBIDOS — reprovam, nunca como texto
      1.79  branco    sobre Burning Flame   <- botão laranja com texto branco
      1.48  Palladian sobre Burning Flame      NÃO passa: use Abyssal
      3.84  Truffle   sobre a própria tinta <- use --truffle-texto
      2.77  Truffle   sobre Abyssal         <- terracota morre no escuro
      2.06  Truffle   sobre Blue Fantastic
      1.79  Oatmeal   sobre branco          <- só bloco/borda, nunca texto
   ========================================================================== */