/* =====================================================================
   GRUPO TERRA — folha principal
   Cores conforme o manual da marca (GTD/Grupo Terra/Grupo Terra - cores.txt):
       preto #000000 · cinza #666666 · vermelho #FF0000 · amarelo #FFFF00
   O amarelo puro só aparece sobre fundo escuro ou com texto preto em cima:
   sobre branco ele não tem contraste para ser lido.
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  /* --- Marca (oficiais) ---
     Manual: preto #000000 · cinza #666666 · vermelho #FF0000 · amarelo #FFFF00.
     O vermelho aplicado no site é um grau mais escuro que o do manual —
     o #FF0000 puro brilha demais em superfície grande e cansa a vista.
     A logomarca continua com o vermelho oficial. */
  --terra:       #D91414;
  --amarelo:     #FFFF00;
  --cinza:       #666666;
  --preto:       #000000;
  /* derivados */
  --terra-fundo: #B00E0E;
  /* Vermelho de texto e ícone sobre fundo preto. Pedido do cliente (22/09):
     o que era amarelo sobre o preto passa a ser vermelho. O --terra puro
     dá 3,8:1 sobre o carvão, abaixo do mínimo para letra pequena; este
     tom dá 5:1. */
  --terra-claro: #E84A4A;
  --amarelo-texto: #6B6100;

  /* --- Neutros --- */
  --white:       #FFFFFF;
  --areia:       #F7F7F7;
  --areia-2:     #EFEFEF;
  --linha:       #E3E3E3;
  --linha-forte: #CBCBCB;
  --carvao:      #0D0D0D;
  --carvao-2:    #1A1A1A;
  --tinta:       #111111;
  --tinta-2:     #444444;
  --tinta-3:     #666666;
  --tinta-4:     #999999;

  /* Véu do topo: o escurecimento que cai sobre a foto, em RGB solto para
     variar a opacidade ao longo do degradê. */
  --veu: 0, 0, 0;
  --tinta:       #221D18;
  --tinta-2:     #4A4138;
  --tinta-3:     #6B6257;
  --tinta-4:     #9A8F80;

  /* --- Tipografia ---
     Serifada de alto contraste só nos títulos grandes, que é onde ela
     encosta na foto e dá o tom editorial; sans neutra em todo o resto,
     que é o que se lê de perto. */
  --font-d: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-h: 'Inter', system-ui, -apple-system, sans-serif;
  --font-b: 'Inter', system-ui, -apple-system, sans-serif;

  /* Escala fechada em sete degraus. Toda regra desta folha usa um destes
     valores — não existe font-size solto. Antes eram vinte e cinco tamanhos
     diferentes e o h4 acabava menor que o parágrafo de abertura. */
  --fs-2xs:  .75rem;      /* 12px — rótulos, etiquetas, botões, olho de seção */
  --fs-xs:   .8125rem;    /* 13px — legenda, migalha, nota */
  --fs-sm:   .875rem;     /* 14px — texto de cartão, rodapé, listas */
  --fs-base: 1rem;        /* 16px — texto corrido */
  --fs-lead: 1rem;        /* 16px — igual ao corrido; abertura se distingue pela cor */
  --fs-h4:   1.25rem;     /* 20px */
  --fs-h3:   clamp(1.375rem, 2vw, 1.625rem);   /* 22 → 26 */
  --fs-h2:   clamp(1.75rem, 3.2vw, 2.375rem);  /* 28 → 38 */
  --fs-h1:   clamp(2rem, 4.2vw, 3rem);         /* 32 → 48 */
  --fs-num:  clamp(1.75rem, 3.2vw, 2.5rem);    /* números grandes */

  --fs-eyebrow: var(--fs-2xs);

  /* --- Layout --- */
  --container:        1220px;
  --container-narrow: 880px;
  --gutter:     clamp(1.25rem, 4vw, 2.25rem);
  --section-py: clamp(3.5rem, 7vw, 6rem);
  --header-h:   82px;

  /* --- Forma ---
     A marca do Grupo Terra é construída de retângulos: as duas barras do
     telhado e os dois quadrados pretos. O site segue essa geometria — canto
     reto, nada de cartão arredondado. É o que separa este site do da DX. */
  --r-xs:  0;
  --r-sm:  0;
  --r-md:  2px;
  --r-lg:  2px;
  --r-pill: 0;

  /* --- Elevação --- */
  --sh-xs: 0 1px 2px rgba(0,0,0,.06);
  --sh-sm: 0 2px 8px rgba(0,0,0,.07);
  --sh-md: 0 10px 30px -12px rgba(0,0,0,.18);
  --sh-lg: 0 28px 60px -28px rgba(0,0,0,.34);
  --sh-terra: 0 12px 28px -12px rgba(217,20,20,.34);

  /* --- Tempo --- */
  --t:      .28s cubic-bezier(.4,0,.2,1);
  --t-fast: .16s cubic-bezier(.4,0,.2,1);
}

/* =====================================================================
   2. RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-b);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--tinta-2);
  /* Areia, não branco: com a paleta de terra o branco puro em tela cheia
     fica frio e briga com o terracota. */
  background: var(--areia);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5 {
  color: var(--tinta);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
}
/* Fraunces é variável: o eixo óptico ajusta o contraste da haste conforme
   o corpo, então título grande e subtítulo não parecem a mesma fonte. */
h1, h2 {
  font-family: var(--font-d);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.08;
}
h3, h4, h5 { font-family: var(--font-h); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

:focus-visible { outline: 3px solid var(--terra-claro); outline-offset: 3px; }

/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

section { padding-block: var(--section-py); position: relative; }

/* Alternância das faixas.
   O fundo da página é areia; sem dar branco explícito à seção comum,
   duas seções seguidas viram um bloco só e o olho perde a divisão. */
main > section { background: var(--white); }
main > section.sec--areia   { background: var(--areia); }
main > section.sec--areia-2 { background: var(--areia-2); }

/* A emenda entre faixas claras ganha um fio neutro. Os tracinhos vermelho
   e amarelo que ficavam no começo dele saíram a pedido do cliente (22/09). */
main > section + section:not(.sec--escuro):not(.cta):not(.faixa)::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--linha);
}
.sec--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sec--areia { background: var(--areia); }
.sec--areia-2 { background: var(--areia-2); }
/* Seção com foto de fundo. Usa o mesmo véu do topo, então acompanha a
   paleta escolhida em vez de ser preto sobre cor. */
.sec--foto { position: relative; overflow: hidden; isolation: isolate; }
.sec--foto .sec__img {
  position: absolute; inset: 0; z-index: -2;
  background: center/cover no-repeat;
}
/* A 88% a foto virava um preto chapado, igual à seção preta vizinha.
   Em 58% ela aparece de verdade e a faixa se distingue por ser fotográfica,
   não por ser mais escura. O degradê fecha um pouco nas bordas para o
   texto não perder contraste no meio de uma área clara da imagem. */
.sec--foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--veu), .78) 0%, rgba(var(--veu), .46) 38%,
                            rgba(var(--veu), .46) 62%, rgba(var(--veu), .78) 100%),
    rgba(var(--veu), .34);
}

/* Duas faixas escuras seguidas encostam: um fio claro marca a divisão. */
.sec--foto { border-top: 1px solid rgba(255,255,255,.12); }

.sec--escuro { background: var(--carvao); color: rgba(255,255,255,.72); }
.sec--escuro h1, .sec--escuro h2, .sec--escuro h3, .sec--escuro h4 { color: #fff; }

.grid { display: grid; gap: 1.5rem; }
/* Uma coluna 1fr não encolhe abaixo do conteúdo mais largo que houver
   dentro dela — basta um botão de rótulo comprido para a coluna estourar
   a tela no celular. */
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-2-3 { grid-template-columns: 2fr 3fr; }
.g-3-2 { grid-template-columns: 3fr 2fr; }
.gap-sm { gap: 1rem; }
.gap-lg { gap: clamp(1.75rem, 4vw, 3rem); }
.items-center { align-items: center; }
.text-center { text-align: center; }
.muted { color: var(--tinta-3); }

/* =====================================================================
   4. ELEMENTOS DE TEXTO
   ===================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-h);
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--terra); margin-bottom: .9rem;
}
/* A barrinha vermelha sobre amarela que abria cada olho-de-seção, e a
   régua igual embaixo dos títulos, saíram a pedido do cliente (22/09).
   O olho fica só no texto; .rule continua existindo para não quebrar
   conteúdo já gravado no WordPress, mas não aparece. */
.eyebrow--ambar { color: var(--terra-claro); }
.eyebrow--center { justify-content: center; }

.rule { display: none; }

/* O parágrafo de abertura tem o MESMO corpo do texto corrido. Dois tamanhos
   próximos no mesmo bloco (18 e 16) leem como erro, não como hierarquia — a
   distinção fica por conta da cor, que é mais firme e não briga. */
.lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--tinta); }
.sec--escuro .lead, .faixa .lead, .phero .lead, .hero .lead { color: rgba(255,255,255,.82); }

.sec-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head p { margin-top: 1rem; color: var(--tinta-3); }
.sec--escuro .sec-head p { color: rgba(255,255,255,.55); }

.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .36rem .8rem; border-left: 3px solid var(--terra);
  font-family: var(--font-h); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--areia-2); color: var(--tinta-2);
}
.tag--terra { background: rgba(217,20,20,.1); color: var(--terra); }
/* Sobre claro o amarelo puro não se lê: usa-se a versão escurecida do tom.
   Sobre a faixa preta acontece o inverso — aí o amarelo puro é o correto. */
.tag--ambar { background: rgba(255,255,0,.16); color: var(--amarelo-texto); }
.sec--escuro .tag--ambar { background: rgba(232,74,74,.14); color: var(--terra-claro); }
.tag--escuro { background: rgba(255,255,255,.1); color: #fff; }

.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }

/* =====================================================================
   5. BOTÕES
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.7rem; border-radius: var(--r-sm);
  font-family: var(--font-h); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; border: 2px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform var(--t-fast), box-shadow var(--t);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--terra); color: #fff; }
.btn--primary:hover { background: var(--terra-fundo); }
.btn--ambar { background: var(--amarelo); color: var(--preto); }
.btn--ambar:hover { background: #E6E600; }
.btn--ghost { border-color: var(--linha-forte); color: var(--tinta); }
.btn--ghost:hover { border-color: var(--terra); color: var(--terra); }
.btn--claro { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--claro:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn--wa { background: #25D366; color: #fff; }
.btn--wa:hover { background: #1EB855; }
.btn--sm { padding: .62rem 1.15rem; font-size: var(--fs-2xs); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-h); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .04em; color: var(--terra);
  transition: gap var(--t-fast);
}
.link-arrow::after { content: '→'; transition: transform var(--t-fast); }
.link-arrow:hover { gap: .7rem; }
.link-arrow--ambar { color: var(--terra-claro); }
.link-arrow--claro { color: #fff; }

/* =====================================================================
   6. CABEÇALHO
   ===================================================================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background var(--t), box-shadow var(--t), height var(--t), top var(--t);
}
.header > .container { display: flex; align-items: center; gap: 1.5rem; width: 100%; }
.header.is-solid, .header--solid {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--linha);
}

.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }
/* Sobre o hero escuro a versão clara; com a faixa branca, a colorida. */
.brand__claro { display: block; }
.brand__cor   { display: none; }
.header.is-solid .brand__claro, .header--solid .brand__claro { display: none; }
.header.is-solid .brand__cor,   .header--solid .brand__cor   { display: block; }

.nav { margin-left: auto; margin-right: .5rem; }
.nav > ul { display: flex; align-items: center; gap: .35rem; }
.nav__item > a {
  display: block; padding: .6rem .85rem; border-radius: var(--r-xs);
  font-family: var(--font-h); font-size: var(--fs-sm); font-weight: 600;
  color: rgba(255,255,255,.9); transition: color var(--t), background var(--t);
}
.header.is-solid .nav__item > a, .header--solid .nav__item > a { color: var(--tinta-2); }
.nav__item > a:hover { color: var(--terra); background: rgba(217,20,20,.08); }

/* submenu das empresas */
.nav__has { position: relative; }
/* São doze empresas: em coluna única o painel passava da altura da tela.
   Duas colunas, centralizado sob o item para não sair pela direita. */
.nav__sub {
  position: absolute; top: calc(100% + .4rem); left: 50%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 .3rem;
  width: min(640px, calc(100vw - 3rem)); padding: .7rem;
  background: #fff; border: 1px solid var(--linha);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav__has:hover .nav__sub, .nav__has:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateX(-50%);
}
.nav__sub a {
  display: block; padding: .55rem .7rem; border-radius: var(--r-xs);
  font-family: var(--font-h); font-size: var(--fs-sm); font-weight: 600; color: var(--tinta);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__sub a:hover { background: var(--areia); color: var(--terra); }
.nav__sub small {
  display: block; font-family: var(--font-b); font-size: var(--fs-2xs);
  font-weight: 400; color: var(--tinta-3); margin-top: .1rem;
}

.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border-radius: var(--r-sm);
  align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28); color: #fff;
}
.header.is-solid .nav-toggle, .header--solid .nav-toggle {
  border-color: var(--linha-forte); color: var(--tinta);
}
body.nav-open .nav-toggle { border-color: var(--linha-forte); color: var(--tinta); }

/* gaveta mobile */
.mnav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: #fff; padding: 1.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t);
}
body.nav-open .mnav { transform: none; }
body.nav-open { overflow: hidden; }
.mnav a {
  display: block; padding: .95rem 0;
  border-bottom: 1px solid var(--linha);
  font-family: var(--font-h); font-size: var(--fs-base); font-weight: 600; color: var(--tinta);
}
.mnav a:hover { color: var(--terra); }
.mnav details summary {
  padding: .95rem 0; border-bottom: 1px solid var(--linha);
  font-family: var(--font-h); font-size: var(--fs-base); font-weight: 600;
  color: var(--tinta); cursor: pointer; list-style: none;
}
.mnav details summary::-webkit-details-marker { display: none; }
.mnav details summary::after { content: '+'; float: right; color: var(--terra); }
.mnav details[open] summary::after { content: '–'; }
.mnav details a { padding-left: 1rem; font-size: var(--fs-sm); font-weight: 500; }
.mnav__cta { margin-top: 1.75rem; display: grid; gap: .7rem; }

/* =====================================================================
   7. HERO DA CAPA
   ===================================================================== */
.hero {
  position: relative;
  min-height: min(94vh, 880px);
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + 3rem) 8rem;
  background: var(--carvao);
  overflow: hidden; isolation: isolate;
}
.hero__img {
  position: absolute; inset: 0; z-index: -2;
  background: center/cover no-repeat;
  transform: scale(1.04);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Fecha forte só onde o texto encosta e abre cedo: a partir de 62% a
     foto aparece quase limpa, que é o lado direito da tela. */
  background: linear-gradient(100deg,
    rgba(var(--veu), .93) 0%,
    rgba(var(--veu), .80) 34%,
    rgba(var(--veu), .34) 62%,
    rgba(var(--veu), .10) 82%,
    rgba(var(--veu), .04) 100%);
}
.hero > .container { width: 100%; }
.hero h1 { color: #fff; margin-bottom: 1.25rem; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--terra-claro); }
.hero__lead { color: rgba(255,255,255,.78); max-width: 54ch; }

/* barra de números no rodapé do hero */
.hero__stats {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: rgba(255,255,255,.055);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero__stats > .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero__stat { padding: 1.5rem .5rem; text-align: center; position: relative; }
.hero__stat + .hero__stat::before {
  content: ''; position: absolute; left: 0; top: 24%; bottom: 24%;
  width: 1px; background: rgba(255,255,255,.16);
}
.hero__stat-n {
  font-family: var(--font-h); font-weight: 800;
  font-size: var(--fs-num); color: #fff;
  line-height: 1; letter-spacing: -.03em;
}
.hero__stat-n em { font-style: normal; color: var(--terra-claro); }
/* Dois números fechando um bloco de título. Fio em cima para separar,
   número grande na serifada e rótulo pequeno em caixa alta. */
.marcas {
  display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
}
.marca strong {
  display: block;
  font-family: var(--font-d); font-optical-sizing: auto;
  font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.75rem);
  color: var(--tinta); line-height: 1; letter-spacing: -.02em;
}
.marca span {
  display: block; margin-top: .5rem;
  font-family: var(--font-h); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-3);
}
/* Sobre faixa escura o número vira vermelho e o fio clareia. */
.sec--escuro .marcas, .faixa .marcas, .hero .marcas { border-top-color: rgba(255,255,255,.22); }
.sec--escuro .marca strong, .faixa .marca strong, .hero .marca strong { color: var(--terra-claro); }
.sec--escuro .marca span, .faixa .marca span, .hero .marca span { color: rgba(255,255,255,.6); }

.hero__stat-l {
  font-family: var(--font-h); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-top: .45rem;
}

/* marca d'água do telhado, decorativa */
.hero__mark {
  position: absolute; right: -8%; bottom: 14%; z-index: -1;
  width: min(46vw, 560px); opacity: .07; pointer-events: none;
}

/* ---------------------------------------------------------------------
   Mapa do MS — fundo da capa
   Pedido do cliente (22/09): no lugar da foto, o mapa do Mato Grosso do
   Sul animado, para mostrar o tamanho do grupo — atende o estado inteiro.
   O SVG vem do _mapa.py com os 79 municípios do IBGE; cada um traz no
   style um atraso --d proporcional à distância até o centro do estado,
   então o MS acende em onda de dentro para fora. Depois da entrada, os 79
   pontos piscam em ritmos desencontrados. Nenhuma cidade em destaque
   (pedido do cliente, 23/09).
   --------------------------------------------------------------------- */
.hero--mapa { background: var(--carvao); }
/* A vista aérea fica atrás do mapa, dessaturada e apagada: dá lugar real
   ao topo sem brigar com o vermelho do mapa (pedido de 23/09). */
/* Camadas: foto (-3) < véu (-2) < mapa (-1) < texto. O véu por cima do
   mapa apagaria o vermelho. */
.hero--mapa .hero__img { z-index: -3; opacity: .4; filter: saturate(.5) brightness(.8); }
.hero--mapa::before { z-index: -2; }
.hero--mapa .hero__mapa { z-index: -1; }
/* Escurece forte onde o texto encosta e deixa a foto respirar à direita,
   sob o mapa; o brilho vermelho leve amarra o mapa à foto. */
.hero--mapa::before {
  background:
    radial-gradient(55% 65% at 78% 55%, rgba(217,20,20,.14), transparent 70%),
    linear-gradient(90deg, rgba(var(--veu), .93) 0%, rgba(var(--veu), .8) 36%, rgba(var(--veu), .42) 62%, rgba(var(--veu), .26) 100%);
}
.hero__mapa {
  position: absolute; z-index: -2;
  top: calc(var(--header-h) + .5rem); bottom: 1rem;
  right: max(-3vw, -48px); width: min(58vw, 820px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ms-mapa { width: 100%; height: 100%; overflow: visible; }

.ms-mapa__mun path {
  fill: rgba(217,20,20,.12);
  stroke: rgba(255,255,255,.2); stroke-width: 1; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: ms-acende 1.8s cubic-bezier(.2,.7,.3,1) var(--d) both;
}
@keyframes ms-acende {
  0%   { fill: rgba(217,20,20,0);   stroke: rgba(255,255,255,0); }
  30%  { fill: rgba(232,74,74,.62); stroke: rgba(255,150,150,.9); }
  100% { fill: rgba(217,20,20,.12); stroke: rgba(255,255,255,.2); }
}

.ms-mapa__pontos circle {
  fill: #fff; opacity: .5;
  transform-box: fill-box; transform-origin: center;
  /* A segunda animação só começa depois da primeira (--p ≥ 4s), e sem
     fill-mode: até lá vale o estado final da entrada. */
  animation:
    ms-ponto .7s ease-out var(--d) both,
    ms-brilho var(--t) ease-in-out var(--p) infinite;
}
@keyframes ms-ponto {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.8); }
  100% { opacity: .5; transform: scale(1); }
}
@keyframes ms-brilho {
  0%, 30%, 100% { opacity: .5; transform: scale(1); fill: #fff; }
  12%           { opacity: 1;  transform: scale(2.4); fill: var(--terra-claro); }
}

@media (max-width: 900px) {
  /* No celular o mapa passa para trás do texto, centrado e apagado. */
  .hero__mapa {
    right: 50%; transform: translateX(50%);
    width: min(130vw, 720px); opacity: .4;
  }
  .hero--mapa::before { background: rgba(var(--veu), .72); }
}

@media (prefers-reduced-motion: reduce) {
  .ms-mapa__mun path, .ms-mapa__pontos circle { animation: none; }
}

/* =====================================================================
   8. HERO DAS PÁGINAS INTERNAS
   ===================================================================== */
.phero {
  position: relative; background: var(--carvao); color: rgba(255,255,255,.75);
  padding-block: calc(var(--header-h) + clamp(3rem, 6vw, 5rem)) clamp(3rem, 6vw, 5rem);
  overflow: hidden; isolation: isolate;
}
.phero__img { position: absolute; inset: 0; z-index: -2; background: center/cover no-repeat; }
.phero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(var(--veu), .92) 0%,
    rgba(var(--veu), .74) 45%,
    rgba(var(--veu), .38) 78%,
    rgba(var(--veu), .22) 100%);
}
.phero h1 { color: #fff; margin-bottom: 1rem; max-width: 620px; }
.phero p { max-width: 54ch; }
/* A marca da empresa abre a página dela, na versão para fundo escuro. */
.phero__logo {
  /* o min() evita que a marca larga estoure a coluna em telas de 320px */
  max-height: 84px; max-width: min(300px, 100%); width: auto;
  margin-bottom: 1.6rem;
}

.crumbs { margin-bottom: 1.75rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: var(--fs-xs); }
.crumbs a { color: rgba(255,255,255,.55); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--terra-claro); }
.crumbs li + li::before { content: '/'; margin-right: .45rem; color: rgba(255,255,255,.3); }
.crumbs [aria-current] { color: rgba(255,255,255,.85); }

/* =====================================================================
   9. CARTÃO DE EMPRESA
   ===================================================================== */
/* O grupo é um catálogo de empresas — os cartões são numerados como um.
   O contador é do CSS: a ordem sai do HTML, sem número escrito à mão. */
.grid { counter-reset: empresa; }

.co {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.9rem;
  background: #fff; border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  counter-increment: empresa;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.co::before {
  content: counter(empresa, decimal-leading-zero);
  position: absolute; top: 1.6rem; right: 1.7rem;
  font-family: var(--font-h); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .12em; color: var(--linha-forte);
}
/* Barra vermelha subindo pela lateral quando o cartão recebe o ponteiro. */
.co::after {
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 4px;
  background: var(--terra);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t);
}
a.co:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--linha-forte); }
a.co:hover::after { transform: scaleY(1); }
.sec--escuro .co::before { color: rgba(255,255,255,.26); }
/* Com dez empresas a última fica sozinha na linha de três: vai para o
   meio em vez de ficar encostada à esquerda. */
@media (min-width: 1081px) {
  .g-3 > .co:last-child:nth-child(3n+1) { grid-column: 2; }
}
/* As marcas do grupo têm proporções muito diferentes entre si — a da
   Imobiliária é uma faixa larga, a da Terra Reparos é vertical. A caixa
   fixa a altura e deixa cada uma ocupar a largura que precisar. */
.co__logo {
  height: 58px; display: flex; align-items: center;
  margin-bottom: 1.2rem;
}
.co__logo img {
  max-height: 58px; max-width: 190px; width: auto;
  object-fit: contain; object-position: left center;
}

.co__ico {
  width: 46px; height: 46px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: rgba(217,20,20,.1); color: var(--terra);
}
.co__ico svg { width: 22px; height: 22px; }
/* Dentro do cartão (flex column) a etiqueta esticaria de ponta a ponta. */
.co .tag { align-self: flex-start; }
.co__ico--ambar { background: rgba(255,255,0,.16); color: var(--amarelo-texto); }
.co h4 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.co p { font-size: var(--fs-sm); line-height: 1.7; color: var(--tinta-3); }
.co .link-arrow { margin-top: auto; padding-top: 1.1rem; }

/* dentro da faixa escura */
.sec--escuro .co { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
.sec--escuro .co p { color: rgba(255,255,255,.62); }
.sec--escuro a.co:hover { border-color: rgba(232,74,74,.5); box-shadow: none; background: rgba(255,255,255,.075); }
.sec--escuro .co__ico { background: rgba(232,74,74,.16); color: var(--terra-claro); }

/* =====================================================================
   10. BLOCOS DE APOIO
   ===================================================================== */
.feat { display: flex; gap: 1.1rem; align-items: flex-start; }
.feat__ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(217,20,20,.1); color: var(--terra);
}
.feat__ico svg { width: 21px; height: 21px; }
.feat__ico--ambar { background: rgba(255,255,0,.16); color: var(--amarelo-texto); }
.sec--escuro .feat__ico { background: rgba(232,74,74,.16); color: var(--terra-claro); }
.feat h4 { margin-bottom: .35rem; }
.feat p { font-size: var(--fs-sm); line-height: 1.7; color: var(--tinta-3); }
.sec--escuro .feat p { color: rgba(255,255,255,.6); }

.tile {
  padding: 1.6rem 1.4rem; text-align: center;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--r-md);
}
.tile__n {
  font-family: var(--font-h); font-weight: 800;
  font-size: var(--fs-num); color: var(--terra);
  line-height: 1; letter-spacing: -.03em;
}
.tile__l {
  font-family: var(--font-h); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-2); margin-top: .55rem;
}
.tile p { font-size: var(--fs-xs); color: var(--tinta-4); margin-top: .5rem; line-height: 1.55; }

/* linha do tempo / etapas */
.passo { position: relative; padding-left: 3.4rem; }
.passo + .passo { margin-top: 2.1rem; }
.passo__n {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--terra); color: #fff;
  font-family: var(--font-h); font-weight: 800; font-size: var(--fs-sm);
}
.passo h4 { margin-bottom: .3rem; }
.passo p { font-size: var(--fs-sm); color: var(--tinta-3); }

/* lista com marcador */
.lista li {
  position: relative; padding-left: 1.7rem; margin-bottom: .7rem;
  font-size: var(--fs-sm); line-height: 1.65;
}
.lista li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--terra);
}
.sec--escuro .lista li { color: rgba(255,255,255,.7); }

/* =====================================================================
   10b. FORMULÁRIO E CARTÕES
   ===================================================================== */
.form { display: grid; gap: 1rem; }
.form label { display: block; }
.form label > span {
  display: block; margin-bottom: .4rem;
  font-family: var(--font-h); font-size: var(--fs-xs); font-weight: 600;
  color: var(--tinta-2);
}
.form input, .form select, .form textarea {
  width: 100%; padding: .8rem .95rem;
  font-family: var(--font-b); font-size: var(--fs-base); color: var(--tinta);
  background: var(--white);
  border: 1px solid var(--linha-forte); border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217,20,20,.14);
}
.form input::placeholder, .form textarea::placeholder { color: var(--tinta-4); }
.form__nota { font-size: var(--fs-2xs); color: var(--tinta-4); line-height: 1.55; }

.cartao {
  padding: 1.6rem;
  background: var(--areia); border: 1px solid var(--linha);
  border-radius: var(--r-lg);
}
.cartao h4 { margin-bottom: .3rem; }
.cartao .lista li { font-size: var(--fs-sm); }
.cartao a:not(.btn) { color: var(--terra); }
.cartao a:not(.btn):hover { text-decoration: underline; }

/* =====================================================================
   10c. FAIXA FOTOGRÁFICA
   A foto sangra de ponta a ponta e o texto se apoia embaixo. O escuro é
   um degradê que só fecha onde o texto encosta — o topo da imagem fica
   limpo, senão a foto vira papel de parede cinza.
   ===================================================================== */
.faixa {
  position: relative;
  min-height: clamp(400px, 52vw, 620px);
  display: flex; align-items: flex-end;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--carvao); color: rgba(255,255,255,.8);
  overflow: hidden; isolation: isolate;
}
/* A emenda da faixa vem por borda: o ::before já é o véu da foto. */
.faixa { border-top: 1px solid rgba(255,255,255,.12); }
.faixa__img {
  position: absolute; inset: 0; z-index: -2;
  background: center/cover no-repeat;
}
.faixa::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Dois véus: de baixo para cima, onde ficam os números, e da esquerda,
     onde fica o texto. Só o primeiro bastava para fotos escuras no alto; a
     vista aérea de Dourados (23/09) é clara e cheia de prédio branco, e o
     olho vermelho sumia nela. */
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,0) 78%),
    linear-gradient(to top,
      rgba(0,0,0,.9) 0%, rgba(0,0,0,.66) 38%, rgba(0,0,0,.36) 70%, rgba(0,0,0,.2) 100%);
}
.faixa > .container { width: 100%; }
.faixa h2 { color: #fff; max-width: 20ch; }
.faixa .lead { color: rgba(255,255,255,.82); max-width: 58ch; margin-top: 1.1rem; }
.faixa .eyebrow { color: var(--terra-claro); }

/* variante centrada, para frase única */
.faixa--centro { align-items: center; text-align: center; }
.faixa--centro h2 { max-width: 24ch; margin-inline: auto; }
.faixa--centro .lead { margin-inline: auto; }
.faixa--centro .eyebrow { justify-content: center; }
/* Texto centralizado ocupa a faixa inteira, então o véu é parelho:
   escuro o bastante para o texto mandar, claro o bastante para a foto
   ainda ser foto. */
.faixa--centro::before {
  background: linear-gradient(to top,
    rgba(0,0,0,.84) 0%, rgba(0,0,0,.68) 50%, rgba(0,0,0,.72) 100%);
}

/* variante baixa, para separar dois blocos de texto */
.faixa--fina { min-height: clamp(280px, 34vw, 400px); }

/* números sobre a foto */
.faixa__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.75rem;
}
.faixa__stat-n {
  font-family: var(--font-d); font-optical-sizing: auto; font-weight: 600;
  font-size: var(--fs-num); color: #fff; line-height: 1;
}
.faixa__stat-n em { font-style: normal; color: var(--terra-claro); }
.faixa__stat-l {
  font-family: var(--font-h); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-top: .5rem;
}

/* =====================================================================
   11. FAIXA DE CHAMADA
   ===================================================================== */
.cta { background: var(--terra); color: rgba(255,255,255,.85); text-align: center; }
.cta h2 { color: #fff; margin-bottom: .9rem; }
.cta p { max-width: 56ch; margin-inline: auto; margin-bottom: 1.9rem; }
.cta--escuro { background: var(--carvao); }
.cta--areia { background: var(--areia-2); color: var(--tinta-2); }
.cta--areia h2 { color: var(--tinta); }

/* =====================================================================
   12. RODAPÉ
   ===================================================================== */
.footer { background: var(--carvao); color: rgba(255,255,255,.6); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 2fr; gap: 2.5rem; }
/* width/height no <img> valem como CSS de baixa prioridade: definir só a
   altura deixa a largura do atributo valendo e a marca sai esticada. */
.footer img.brand__img { height: 52px; width: auto; margin-bottom: 1.1rem; }
/* As doze empresas em duas colunas, sob um título só. */
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.footer p { font-size: var(--fs-sm); line-height: 1.7; }
.footer h5 {
  font-family: var(--font-h); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: 1rem;
}
.footer li { margin-bottom: .55rem; }
.footer a { font-size: var(--fs-sm); transition: color var(--t-fast); }
.footer a:hover { color: var(--terra-claro); }
.footer__bot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--fs-xs); color: rgba(255,255,255,.42);
}
.social { display: flex; gap: .6rem; margin-top: 1.2rem; }
/* 44px é o mínimo confortável para o dedo — abaixo disso o toque erra. */
.social a {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.75);
  transition: background var(--t), color var(--t);
}
.social a:hover { background: var(--terra); color: #fff; }
.social svg { width: 17px; height: 17px; }

/* =====================================================================
   12b. WORDPRESS
   Só o que o WordPress precisa: o atalho de teclado para o conteúdo e o
   texto que vem do editor.
   ===================================================================== */
/* Fica fora da tela até receber o foco pelo Tab — quem navega por teclado
   pula o menu inteiro; quem usa o mouse nunca vê. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  white-space: nowrap; word-wrap: normal;
}
.skip-link:focus {
  position: fixed !important; top: .5rem; left: .5rem; z-index: 200;
  width: auto; height: auto; clip: auto; clip-path: none;
  padding: .75rem 1.25rem;
  background: var(--terra); color: #fff;
  font-family: var(--font-h); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}

/* Texto vindo do editor do WordPress. */
.conteudo > * + * { margin-top: 1.1rem; }
.conteudo h2 { margin-top: 2.5rem; }
.conteudo h3, .conteudo h4 { margin-top: 2rem; }
.conteudo ul, .conteudo ol { padding-left: 1.3rem; }
.conteudo ul li { list-style: disc; }
.conteudo ol li { list-style: decimal; }
.conteudo li + li { margin-top: .4rem; }
.conteudo a:not(.btn) { color: var(--terra); text-decoration: underline; }
.conteudo img { border-radius: var(--r-md); }
.conteudo strong { color: var(--tinta); }
.conteudo blockquote {
  border-left: 4px solid var(--terra);
  padding-left: 1.25rem; color: var(--tinta);
}

/* =====================================================================
   13. FLUTUANTES
   ===================================================================== */
.fab-wa {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff; box-shadow: var(--sh-md);
  transition: transform var(--t-fast);
}
.fab-wa:hover { transform: scale(1.06); }
.fab-wa svg { width: 28px; height: 28px; }

.to-top {
  position: fixed; right: 1.25rem; bottom: 5.6rem; z-index: 90;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--tinta); border: 1px solid var(--linha);
  box-shadow: var(--sh-sm);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* =====================================================================
   14. ANIMAÇÃO DE ENTRADA
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .09s; }
.js .reveal[data-delay="2"] { transition-delay: .18s; }
.js .reveal[data-delay="3"] { transition-delay: .27s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   15. RESPONSIVO
   ===================================================================== */
@media (max-width: 1080px) {
  .nav, .nav__cta { display: none; }
  .nav-toggle { display: flex; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .g-2, .g-2-3, .g-3-2 { grid-template-columns: 1fr; }
  /* A faixa de números sai do posicionamento absoluto e entra no fluxo:
     no celular ela vira duas linhas e sobreporia os botões. */
  /* align-items: stretch é obrigatório aqui: o .hero herda align-items:center
     do desktop e, virando coluna, esse center passa a valer na HORIZONTAL —
     a faixa de números encolhia para a largura do próprio conteúdo. */
  .hero { min-height: auto; flex-direction: column; justify-content: center;
          align-items: stretch;
          padding-block: calc(var(--header-h) + 3.5rem) 0; }
  .hero h1 { max-width: none; }
  .hero__stats { position: static; margin-top: clamp(2.5rem, 8vw, 3.5rem); }
  .hero__stats > .container { grid-template-columns: repeat(2, 1fr); }
  .hero__stat:nth-child(odd)::before { display: none; }
  .hero__stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .hero__mark { right: -22%; opacity: .05; }
  .faixa__stats { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
  .faixa h2, .faixa--centro h2 { max-width: none; }
  .footer__bot { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  .g-3, .g-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bot { gap: .5rem; }
  /* Rótulo comprido quebra em duas linhas em vez de esticar o botão
     para além da tela. */
  .btn { width: 100%; white-space: normal; line-height: 1.25; }
  .btn-row { flex-direction: column; }
  .passo { padding-left: 0; }
  .passo__n { position: static; margin-bottom: .8rem; }
}

/* =====================================================================
   16. IMPRESSÃO
   ===================================================================== */
@media print {
  .header, .mnav, .fab-wa, .to-top, .cta { display: none !important; }
  body { color: #000; }
  .js .reveal { opacity: 1; transform: none; }
}