/* ============================================================
   Mampei Funada — folha única.
   Tokens medidos no site em produção (getComputedStyle), não chutados:
   navy dos selects #00005A · navy das seções #060A8B · acento #2A63DE
   fundo gelo #EBF0F5 · texto #524F4F · títulos Noto Sans 100 uppercase.
   ============================================================ */

:root {
  /* Marca — valores reais renderizados hoje */
  --navy-900: #00005A;   /* header, campos de filtro — PSD do layout e manual da marca */
  --navy-800: #060A8B;   /* seções escuras */
  --azul:     #2A63DE;   /* acento: botões, links, seção Código de Ética */
  --azul-400: #5D89E9;   /* hover e apoio */
  --gelo:     #EBF0F5;   /* seções claras */
  --branco:   #FDFDFD;
  --texto:    #524F4F;   /* texto corrido: cinza da paleta da marca (= site atual), decisão do Vitor 18/10/2026; era #333 */
  --texto-fraco: #5B6070;
  --linha:    #D9E0EA;

  --raio:    10px;   /* botões */
  --raio-lg: 12px;   /* selects */
  --pill:    999px;

  --largura: 1140px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Títulos de seção: Noto Sans Thin, caixa alta, sem tracking */
  --titulo: clamp(2rem, 1.1rem + 2.6vw, 3.25rem);
  --titulo-sm: clamp(1.5rem, 1.1rem + 1.4vw, 2.0625rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem; line-height: 1.5;
  color: var(--texto); background: #fff;
  -webkit-font-smoothing: antialiased;
  /* Palavra que não cabe na linha (URL, e-mail longo) quebra em vez de
     empurrar a página para o lado no celular (auditoria de 18/10/2026:
     a Política de Privacidade rolava 14px). Não mexe em palavra comum. */
  overflow-wrap: break-word;
}

/* ---------- Tipografia da marca ----------
   O traço da Mampei é título fino em caixa alta. Peso 100, nunca bold. */
.titulo-secao {
  font-size: var(--titulo); font-weight: 100; line-height: 1.05;
  text-transform: uppercase; margin: 0 0 1.5rem; color: var(--azul);
}
.titulo-secao--claro { color: var(--branco); }
.titulo-secao--gelo  { color: var(--gelo); }
.titulo-secao--sm    { font-size: var(--titulo-sm); }

h1, h2, h3, h4 { font-weight: 400; line-height: 1.2; margin: 0 0 .6em; color: var(--navy-900); }
p { margin: 0 0 1em; }

a { color: var(--azul); text-underline-offset: 3px; }
a:hover { color: var(--navy-800); }

img { max-width: 100%; height: auto; display: block; }
/* img() embrulha a imagem em <picture> quando há AVIF/WebP (src/imagens.php).
   display: contents deixa o <img> se comportar como filho direto do pai — os
   layouts (grade, object-fit, height 100%) foram feitos para o <img> solto. */
picture { display: contents; }
:focus-visible { outline: 3px solid var(--azul-400); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular { position: absolute; left: -9999px; top: 0; z-index: 999;
         background: var(--navy-900); color: #fff; padding: .75rem 1.25rem; }
.pular:focus { left: 0; }

.container { width: min(100% - (var(--gutter) * 2), var(--largura)); margin-inline: auto; }

.img-vazia {
  width: 100%;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--azul) 100%);
}

/* ---------- Seções e o "bico" que separa faixas ----------
   O site usa um triângulo apontando para baixo na emenda entre seções. */
.secao { padding: clamp(2.5rem, 6vw, 4.5rem) 0; position: relative; }
.secao--navy { background: var(--navy-800); color: var(--branco); }
.secao--gelo { background: var(--gelo); }
.secao--azul { background: var(--azul); color: var(--branco); }

.secao--bico::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent;
  border-top: 20px solid var(--cor-bico, var(--navy-800));
}
.secao--navy.secao--bico::before { --cor-bico: var(--navy-800); }
.secao--gelo.secao--bico::before { --cor-bico: var(--gelo); }
.secao--azul.secao--bico::before { --cor-bico: var(--azul); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1rem;
  font-size: 1rem; font-weight: 300; font-family: inherit;
  border: 1px solid transparent; border-radius: var(--raio);
  background: var(--azul); color: var(--gelo); text-decoration: none;
  cursor: pointer; transition: background .18s ease;
}
.botao:hover { background: var(--navy-800); color: #fff; }
.botao--contorno { background: transparent; border-color: currentColor; color: var(--azul); }
.botao--contorno:hover { background: var(--azul); color: var(--gelo); }

/* Link sublinhado com chevron, padrão do site ("CONHEÇA NOSSA HISTÓRIA") */
.link-seta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 1rem; font-weight: 400; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px;
}
.link-seta--claro { color: var(--branco); text-transform: none; }

/* ---------- Cabeçalho ---------- */
.cabecalho { background: var(--navy-900); color: #fff; position: sticky; top: 0; z-index: 60; }
.cabecalho__linha { display: flex; align-items: center; gap: 1rem; min-height: 88px; }

.cabecalho__menu-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; color: #fff; cursor: pointer; padding: 0;
}
.cabecalho__hamburguer,
.cabecalho__hamburguer::before,
.cabecalho__hamburguer::after {
  display: block; width: 26px; height: 3px; background: currentColor; content: ""; border-radius: 2px;
}
.cabecalho__hamburguer { position: relative; }
.cabecalho__hamburguer::before { position: absolute; top: -8px; }
.cabecalho__hamburguer::after  { position: absolute; top: 8px; }

.cabecalho__marcas { display: flex; align-items: center; gap: 1.25rem; color: #fff; }
/* Cada marca é um alvo separado. O leve apagar no hover é o único sinal de
   que são dois links — sem ele ninguém descobre que a MF clica. */
.cabecalho__marca { display: block; text-decoration: none; opacity: 1;
                    transition: opacity .18s ease; }
.cabecalho__marca:hover, .cabecalho__marca:focus-visible { opacity: .72; }
.cabecalho__logo { height: clamp(22px, 2.2vw, 30px); width: auto; display: block; }
.cabecalho__nav { margin-left: auto; display: none; }
/* 5 itens desde 27/10/2026 (Empreendimentos): o vão encolhe perto dos 992px
   e o rótulo não quebra, senão "Portal do Cliente" virava duas linhas. */
.cabecalho__lista { display: flex; gap: clamp(1rem, 2.2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.cabecalho__lista a {
  color: #fff; text-decoration: none; font-size: 1rem; font-weight: 500;
  padding: .5rem 0; display: inline-block; white-space: nowrap;
}
.cabecalho__lista a:hover,
.cabecalho__lista a[aria-current="page"] { color: var(--azul-400); }

.cabecalho__acoes { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.cabecalho__icone { color: #fff; display: grid; place-items: center; width: 44px; height: 44px; }
.cabecalho__icone:hover { color: var(--azul-400); }

@media (min-width: 62rem) {
  .cabecalho__nav { display: block; margin-inline: auto; }
  .cabecalho__acoes { margin-left: 0; }
}

/* Menu completo em gaveta, aberto pelo hamburguer (igual ao site atual) */
/* Gaveta: painel à esquerda com o resto da página escurecido, como no site
   atual. Fullscreen sólido apagava o contexto inteiro.
   Medido na produção em 17/10/2026 a 1440px: painel de 600px com 50px de
   margem, links de 26px peso 100 em linhas de 41px, ícones das redes (33px)
   logo abaixo da lista. */
.gaveta { position: fixed; inset: 0; z-index: 70; display: none; }
.gaveta[data-aberta="true"] { display: block; }
.gaveta__fundo {
  position: absolute; inset: 0; background: rgba(0, 0, 20, .78);
  border: 0; padding: 0; cursor: pointer;
}
.gaveta__painel {
  position: relative; height: 100%; width: min(100%, 600px);
  background: var(--navy-900); color: #fff;
  padding: 2rem clamp(1.5rem, 4vw, 50px) 2.5rem;
  display: flex; flex-direction: column; overflow-y: auto;
}
.gaveta__fechar {
  align-self: flex-end;
  width: 44px; height: 44px; background: none; border: 0; color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
}
.gaveta__lista { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .1rem; }
.gaveta__lista a {
  display: block; padding: .47rem 20px; color: #fff; text-decoration: none;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: 100; line-height: 1;
  text-transform: uppercase; letter-spacing: .01em;
}
.gaveta__lista a:hover,
.gaveta__lista a[aria-current="page"] { color: var(--azul-400); }

/* Mesmos discos do rodapé, aqui em contorno sobre o navy. */
.gaveta__sociais { list-style: none; display: flex; gap: 20px; margin: 3.75rem 0 0; padding: 0 0 0 10px; }
.gaveta__sociais a {
  display: grid; place-items: center; width: 33px; height: 33px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
}
.gaveta__sociais a:hover { border-color: #fff; color: var(--azul-400); }

@media (max-width: 48rem) {
  .gaveta__painel { width: 100%; }
}

/* ---------- Hero de imagem cheia (home e empreendimento) ---------- */
.hero-imagem { position: relative; background: var(--navy-900); }
.hero-imagem img { width: 100%; height: clamp(320px, 46vw, 620px); object-fit: cover; }

/* Faixa de título sobre foto (lista de empreendimentos) */
.hero-faixa { position: relative; background: var(--navy-900); display: grid; place-items: center;
              min-height: clamp(220px, 26vw, 300px); text-align: center; overflow: hidden; }
.hero-faixa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.hero-faixa__conteudo { position: relative; z-index: 1; padding: 2rem var(--gutter); }
.hero-faixa h1 { font-size: var(--titulo); font-weight: 100; text-transform: uppercase;
                 color: var(--branco); margin: 0; line-height: 1.05; }

/* ---------- Barra de busca / filtros ---------- */
.barra-busca { background: var(--navy-900); padding: 3.25rem 0 5rem; }
.barra-busca__titulo {
  font-size: var(--titulo-sm); font-weight: 100; text-transform: uppercase;
  color: var(--branco); text-align: center; margin: 0 0 2rem;
}

/* Bloco único com divisórias, como no PSD: as frações são as larguras
   medidas lá (208/182/221/232/362 sobre 1205). */
.barra-busca__campos {
  /* PSD tinha 5 campos (…/362); a faixa de investimento saiu em 18/10/2026. */
  display: grid; grid-template-columns: 208fr 182fr 221fr 232fr;
  max-width: 1205px; margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 16px;
}
.barra-busca select {
  font: inherit; font-size: 1rem; height: 72px;
  min-width: 0; width: 100%;
  padding: 0 1.9rem 0 .9rem;
  color: var(--branco); background-color: transparent;
  border: 0; border-left: 1px solid rgba(255, 255, 255, .55);
  border-radius: 0; appearance: none; text-align: center; text-align-last: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23FDFDFD' stroke-width='1.6' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.4rem center; background-size: 12px;
}
.barra-busca select:first-of-type { border-left: 0; }
.barra-busca select option { color: var(--texto); background: #fff; text-align: left; }
.barra-busca__enviar { text-align: center; margin: 1.25rem 0 0; }

@media (max-width: 62rem) {
  .barra-busca__campos { grid-template-columns: 1fr 1fr; }
  /* nth-of-type e não nth-child: os <label class="sr-only"> contam como filhos. */
  .barra-busca select { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .55); }
  .barra-busca select:nth-of-type(-n+2) { border-top: 0; }
  .barra-busca select:nth-of-type(odd) { border-right: 1px solid rgba(255, 255, 255, .55); }
}

.filtros-ativos { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none;
                  margin: 1rem 0 0; padding: 0; justify-content: center; }
.filtros-ativos a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem;
  font-size: .8125rem; text-decoration: none; color: var(--branco);
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--pill);
}

/* ---------- Cards do catálogo (estilo /lista-empreendimentos/) ---------- */

/* Card do catálogo. Proporções do PSD (canvas 1920): card 539 de largura,
   foto 539x309 (hoje 4:5, ver .card__midia), painel branco subindo 16px sobre a foto, padding 45,
   linhas de 37px, botões de 55px de altura no canto inferior direito.
   Tudo em em/% para escalar com a largura da coluna. */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--raio); overflow: hidden;
  text-align: left; box-shadow: 0 1px 3px rgba(0, 0, 90, .08);
}
/* Foto em 4:5 (out/2026, pedido do Vitor): as capas são verticais (671×800)
   e a caixa deitada do PSD (539×309) cortava os prédios no meio. */
.card__midia { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--gelo); }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__img { transform: scale(1.04); }

/* Selo do estágio à esquerda; marca à direita, sem pílula — no PSD é só o
   logotipo branco sobre a foto. */
.card__status {
  position: absolute; left: 5.2%; top: 10%;
  padding: .35rem 1rem; border-radius: var(--pill);
  background: var(--navy-900); color: #fff;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em;
}
/* O painel sobe sobre a foto, como no layout. */
.card__corpo {
  position: relative; margin-top: -3%; background: #fff;
  border-radius: var(--raio) var(--raio) 0 0;
  padding: 8.3% 8.3% 4%; display: flex; flex-direction: column; flex: 1;
}
.card__titulo {
  font-size: 1.1875rem; font-weight: 600; text-transform: uppercase;
  color: var(--navy-900); margin: 0 0 1.1rem; line-height: 1.2;
}
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__titulo { color: var(--azul); }

.card__fatos { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.card__fatos li {
  display: grid; grid-template-columns: 1.125rem 1fr; gap: .75rem; align-items: start;
  font-size: .875rem; color: var(--navy-900); line-height: 1.35;
}
.card__icone { margin-top: .15rem; color: var(--navy-900); flex: 0 0 auto; }

.card__diferencial {
  margin: 1rem 0 0; font-size: .875rem; color: var(--texto);
  border-left: 3px solid var(--azul); padding-left: .65rem;
}
.card__preco { margin: 1rem 0 0; font-weight: 600; color: var(--navy-900); }

/* Botões no rodapé do card, alinhados à direita. Larguras 124 e 146 sobre
   539 no PSD; aqui deixo o conteúdo mandar e só travo a altura. */
.card__acoes {
  display: flex; gap: .5rem; justify-content: flex-end; align-items: center;
  /* auto empurra para o fundo: card com mais linhas de fato não pode deixar
     o botão numa altura diferente do vizinho. O padding vira o respiro
     mínimo quando não sobra espaço. */
  margin: auto 0 0; padding-top: 1.5rem;
}
.card__cta, .card__tour {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1.1rem; border-radius: var(--raio);
  font-size: .875rem; text-decoration: none; white-space: nowrap;
}
.card__cta { border: 1px solid var(--linha); color: var(--navy-900); }
.card:hover .card__cta { border-color: var(--navy-900); }
/* Acima do link esticado para continuar clicável por si. */
.card__tour { position: relative; z-index: 1; background: var(--navy-900); color: #fff; }
.card__tour:hover, .card__tour:focus-visible { background: var(--azul); }

/* Três por linha como no layout; empilha antes de espremer. */
.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
/* A seção de produtos ocupa 86% da largura no PSD, bem mais que o container
   editorial de 1140. Modificador só para ela — texto corrido continua estreito. */
.container--largo { max-width: 1440px; }

/* ---------- Carrossel da home: nome sobre a foto ---------- */
.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: thin;
}
.trilho > * { scroll-snap-align: start; }

.card-foto { position: relative; display: block; text-decoration: none; aspect-ratio: 3 / 4; overflow: hidden; }
.card-foto img { width: 100%; height: 100%; object-fit: cover; }
.card-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,86,.05) 40%, rgba(0,0,86,.75) 100%);
}
.card-foto__tipo {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  padding: .35rem .7rem; font-size: .8125rem; line-height: 1.15; text-align: center;
  background: var(--azul); color: #fff; border-radius: 4px;
}
.card-foto__nome {
  position: absolute; left: 1rem; right: 1rem; bottom: 1.25rem; z-index: 2; margin: 0;
  font-size: .875rem; font-weight: 500; line-height: 1.15; text-transform: uppercase;
  color: #fff; text-align: center;
}

/* ---------- Bento da Central de Decorados ---------- */
.bento { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.bento__principal img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; border-radius: var(--raio); }
.bento__painel {
  background: var(--navy-800); color: var(--branco); padding: 2rem;
  display: flex; flex-direction: column; justify-content: center; border-radius: var(--raio);
}
.bento__painel .link-seta { font-weight: 600; }
.bento__painel h2 { font-size: var(--titulo-sm); font-weight: 100; text-transform: uppercase;
                    color: var(--branco); margin: 0 0 1rem; }
.bento__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.bento__tiles img { aspect-ratio: 297/280; object-fit: cover; width: 100%; border-radius: var(--raio); }
.bento__tiles a { display: block; }

@media (min-width: 48rem) {
  .bento { grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; }
  .bento__principal { grid-row: 1 / 3; }
  .bento__principal img { height: 100%; aspect-ratio: auto; }
}

/* ---------- Página de empreendimento ---------- */
/* A página segue o layout do site antigo: capa cheia, barra de dados por cima,
   conceito em duas colunas, galeria corrida, tour, plantas, obra e blog. */
.emp-capa { position: relative; min-height: clamp(360px, 42vw, 560px); display: flex;
            align-items: center; background: var(--navy-900); overflow: hidden; }
.emp-capa__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Ancorar embaixo: o corte come o céu e mantém fachada + portaria à vista. */
  object-position: center bottom; }
.emp-capa::after { content: ""; position: absolute; inset: 0;
                   background: linear-gradient(90deg, rgba(0,8,30,.82) 0%, rgba(0,8,30,.55) 45%, rgba(0,8,30,.15) 100%); }
.emp-capa__conteudo { position: relative; z-index: 1; color: #fff; padding-block: 3rem; }
.emp-capa__marca { margin: 0 0 1.25rem; font-size: var(--titulo-sm); color: #fff; font-weight: 300; }
.emp-capa__marca img { width: clamp(180px, 22vw, 280px); height: auto;
  /* A logo do empreendimento chega em versão escura; sobre a capa ela some.
     brightness(0) achata pra preto, invert(1) devolve branco chapado. */
  filter: brightness(0) invert(1); }
.emp-capa__selos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
/* Fase da obra na capa, igual ao selo do card (pedido do Vitor, 18/10/2026). */
.emp-capa__fase { display: inline-block; margin: 0 0 1.25rem; padding: .35rem 1rem; border-radius: var(--pill);
                  background: #fff; color: var(--navy-900); font-size: .8125rem; font-weight: 500;
                  text-transform: uppercase; letter-spacing: .06em; }
.emp-capa__selos span { border: 1px solid rgba(255,255,255,.65); border-radius: var(--pill);
                        padding: .25rem .9rem; font-size: .8125rem; }
.emp-capa__endereco { margin: 0; font-size: .9375rem; line-height: 1.5; color: rgba(255,255,255,.9); }

.emp-barra { background: var(--gelo); }
/* Alinhamento pelo topo: os valores têm de uma a três linhas (o You tem três
   metragens), e centralizar cada item deixava os rótulos em alturas diferentes. */
/* Flex e não grid: o número de dados varia (vaga e área total nem sempre estão
   cadastradas). Com colunas fixas, o dado que falta deixava uma coluna vazia
   entre o último dado e o card. Aqui os dados dividem o que sobra e o card vai
   para a direita sozinho. */
.emp-barra__grid { display: flex; flex-wrap: wrap; gap: .9rem 1.5rem;
                   padding-block: .7rem; align-items: center; }
/* Ícone centrado contra o par rótulo+valor, e não colado no topo: agora que o
   endereço saiu, todo valor cabe em uma linha e o alinhamento pelo topo deixava
   o ícone flutuando acima do texto. */
/* flex-basis auto e não uma medida fixa: com 8rem a faixa de metragem do Aura
   ("335,80m² a 578,86m²") quebrava em duas linhas e só aquele item ficava mais
   alto que o resto. Cada dado pede a largura do próprio texto e a faixa
   distribui o que sobra. */
.emp-dado { display: grid; grid-template-columns: 20px 1fr; gap: .55rem; align-items: center;
            flex: 1 1 auto; }
.emp-dado__icone { width: 20px; height: 20px; color: var(--azul); }
.emp-dado__rotulo { margin: 0 0 .15rem; font-size: .75rem; line-height: 1.2; color: var(--texto-fraco); }
.emp-dado__valor { margin: 0; font-size: .875rem; line-height: 1.35; white-space: nowrap; }
/* Celular: metragem longa ("248,97 m² (Padrão) e 294,54 m² (Garden)…", JG 100)
   sem quebra passava da tela e a página inteira rolava para o lado (auditoria
   de 18/10/2026). Aqui cada dado ocupa a linha e o texto quebra. */
@media (max-width: 48rem) {
  .emp-dado { flex-basis: 100%; grid-template-columns: 20px minmax(0, 1fr); }
  .emp-dado__valor { white-space: normal; overflow-wrap: anywhere; }
}
.emp-cta { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
           padding: 1.25rem; display: grid; gap: .6rem; align-self: start;
           flex: 1 1 100%; }
.emp-cta__titulo { margin: 0 0 .25rem; font-size: 1rem; }
.emp-cta .botao { font-size: .875rem; padding: .55rem .75rem; }
.botao--bloco { display: block; width: 100%; text-align: center; }
.botao--largo { display: block; width: 100%; max-width: 34rem; text-align: center; }
.botao--pequeno { padding: .35rem .9rem; font-size: .8125rem; }

.emp-conceito { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
.emp-conceito__foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--raio); }
.emp-conceito__tag { display: flex; align-items: center; gap: .625rem; margin: 0 0 1rem;
                     font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.emp-conceito__tag::after { content: ""; flex: none; width: 2.5rem; height: 1px; background: var(--azul-400); }
.emp-conceito__titulo { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 300;
                        text-transform: uppercase; color: var(--navy-800); margin: 0 0 1.25rem; line-height: 1.3; }
.emp-conceito__texto { max-width: 60ch; }
/* Arte larga que estava no meio do texto (ex.: a da Porsche no Aura): ganha
   faixa própria na largura do container, com respiro e linhas finas, como na
   produção. Separada do texto por emp_separar_artes(). */
.emp-arte { padding-block: clamp(2rem, 5vw, 4rem); }
.emp-arte .container { border-block: 1px solid var(--linha); padding-block: clamp(1.5rem, 4vw, 3rem); }
.emp-arte img { width: 100%; height: auto; display: block; }
.emp-arte + .emp-arte { padding-top: 0; }
.emp-arte__legenda { display: none; }
@media (max-width: 48rem) {
  .emp-arte__legenda { display: block; margin: 1rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--texto); }
}
.emp-conceito__acoes { display: grid; gap: .75rem; margin-top: 2rem; }
.emp-atalhos { border-bottom: 1px solid var(--linha); background: #fff; }
.emp-atalhos__linha { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); }
.emp-atalhos__link {
  display: inline-block; padding: 1.25rem 0; text-decoration: none;
  font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-900);
  border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .2s;
}
.emp-atalhos__link:hover, .emp-atalhos__link:focus-visible {
  color: var(--azul); border-bottom-color: var(--azul);
}

/* ---------- Carrossel com setas e pontos ----------
   A barra de rolagem nativa some: quem navega no mouse usa as setas, quem está
   no toque continua arrastando. Três por vez no desktop, e a conta do
   grid-auto-columns desconta os gaps para nenhum cartão nascer cortado. */
.carrossel { position: relative; }
.carrossel__trilho {
  display: grid; grid-auto-flow: column; gap: .75rem;
  grid-auto-columns: calc((100% - 1.5rem) / 3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carrossel__trilho::-webkit-scrollbar { width: 0; height: 0; }
.carrossel__trilho > * { scroll-snap-align: start; }
.carrossel__seta {
  position: absolute; top: calc(50% - 1.25rem); transform: translateY(-50%); z-index: 2;
  width: 2.75rem; height: 2.75rem; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--linha); border-radius: 50%; background: #fff; color: var(--azul);
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,90,.14);
}
.carrossel__seta:hover { border-color: var(--azul-400); }
.carrossel__seta[disabled] { opacity: .3; cursor: default; box-shadow: none; }
.carrossel__seta--ant  { left: -1.25rem; }
.carrossel__seta--prox { right: -1.25rem; }
.carrossel__pontos { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
/* flex: none — com muitas fotos (Aura) as bolinhas encolhiam para 1px no
   celular. A área de toque cresce por pseudo-elemento (24px, WCAG 2.2), como
   no .hero__ponto; o desenho continua pequeno. */
.carrossel__ponto {
  position: relative; flex: none;
  width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: var(--pill);
  background: #C3CEDC; cursor: pointer; transition: width .2s, background .2s;
}
.carrossel__ponto::before { content: ""; position: absolute; inset: -8px -4px; }
.carrossel__ponto[aria-current="true"] { width: 1.5rem; background: var(--azul); }

.emp-galeria__item {
  padding: 0; border: 0; background: none; cursor: zoom-in; display: block;
  border-radius: var(--raio); overflow: hidden;
}
.emp-galeria__item img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .3s;
}
.emp-galeria__item:hover img { transform: scale(1.04); }

/* Mosaico da galeria (empreendimento entregue). A primeira foto ocupa 2x2 —
   é quase sempre a fachada, e um grid de tudo igual não tem hierarquia.
   grid-auto-rows fixa a altura da linha: sem isso o item 2x2 e o 1x1 brigam
   para definir a altura um do outro. */
.emp-mosaico {
  display: grid; gap: .75rem; margin-top: 2rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(110px, 14vw, 190px);
  grid-auto-flow: dense;
}
.emp-mosaico .emp-galeria__item { height: 100%; }
/* aspect-ratio sai de cena: aqui quem manda na altura é a célula do grid. */
.emp-mosaico .emp-galeria__item img { height: 100%; aspect-ratio: auto; }
@media (min-width: 48rem) {
  .emp-mosaico { grid-template-columns: repeat(4, 1fr); }
  .emp-mosaico > :first-child { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 60rem) {
  .carrossel__trilho { grid-auto-columns: calc((100% - .75rem) / 2); }
}
@media (max-width: 40rem) {
  .carrossel__trilho { grid-auto-columns: 100%; }
  .carrossel__seta--ant  { left: .5rem; }
  .carrossel__seta--prox { right: .5rem; }
}

/* ---------- Lightbox da galeria (montado pelo JS) ---------- */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; overflow: hidden;
}
.lightbox::backdrop { background: rgba(0,0,20,.9); }
.lightbox__img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: min(92vw, 1400px); max-height: 84vh; width: auto; height: auto;
  border-radius: var(--raio); background: #000;
}
.lightbox__fechar, .lightbox__seta {
  position: absolute; z-index: 2; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  width: 2.75rem; height: 2.75rem; padding: 0;
}
.lightbox__fechar:hover, .lightbox__seta:hover { background: rgba(255,255,255,.28); }
.lightbox__fechar { top: 1rem; right: 1rem; font-size: 1.5rem; line-height: 1; }
.lightbox__seta { top: 50%; transform: translateY(-50%); }
.lightbox__seta--ant  { left: 1rem; }
.lightbox__seta--prox { right: 1rem; }
.lightbox__conta {
  position: absolute; bottom: 1.25rem; left: 0; right: 0; margin: 0; text-align: center;
  color: rgba(255,255,255,.8); font-size: .875rem;
}

.emp-tour { background: #0b0b0f; color: #fff; padding: 0; }
.emp-tour__titulo { margin: 0; padding: 1.1rem 1rem; text-align: center; font-size: .9375rem;
                    font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.emp-tour__moldura iframe { display: block; border: 0; width: 100%; aspect-ratio: 16/9; }
/* Tour que não pode ser embutido: faixa curta com o botão, em vez do iframe. */
.emp-tour__fora { padding-block: 3rem; text-align: center; color: var(--branco); }
.emp-tour__fora p { margin: 0 0 1.25rem; color: rgba(255,255,255,.85); }

/* Vídeo do empreendimento: faixa navy, como as outras seções escuras do site.
   Não é sangria como o da /empresa/ — lá o vídeo abre a página, aqui ele é
   uma seção entre outras, dentro do container. */
.emp-video { background: var(--navy-900); color: var(--branco); }
.emp-video__moldura {
  margin-top: 2rem; border-radius: var(--raio-lg); overflow: hidden;
  background: #000;
}
.emp-video__moldura iframe { display: block; border: 0; width: 100%; aspect-ratio: 16/9; }

/* Plantas: um slide por vez, ficha em texto de verdade + arte ao lado.
   O texto vinha queimado na imagem; agora vem do banco (midias.titulo etc.). */
.carrossel--solo .carrossel__trilho { grid-auto-columns: 100%; gap: 0; }
/* Nas plantas a seta ganha calha própria em vez de flutuar sobre o slide.
   A ficha começa colada na borda esquerda do container, então seta em
   position absolute com left negativo caía por cima de "Pavimento inferior"
   e da lista de composição. O padding encolhe o trilho e a seta mora nele:
   funciona em qualquer largura, sem media query para adivinhar a folga. */
.carrossel--solo { padding-inline: 3.75rem; }
.carrossel--solo .carrossel__seta--ant  { left: 0; }
.carrossel--solo .carrossel__seta--prox { right: 0; }
@media (max-width: 40rem) {
  .carrossel--solo { padding-inline: 2.75rem; }
}

.planta { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center;
          margin-top: 2rem; padding-inline: .25rem; }
.planta__tipo { margin: 0 0 .35rem; font-size: .875rem; color: var(--texto-fraco); }
.planta__titulo { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 400;
                  color: var(--navy-800); }
.planta__sub { margin: .4rem 0 0; font-size: .9375rem; color: var(--texto-fraco); }
.planta__comp { list-style: none; margin: 1.25rem 0 0; padding: 0;
                display: flex; flex-direction: column; gap: .35rem; }
.planta__comp li { position: relative; padding-left: 1.1rem; font-size: .9375rem; }
.planta__comp li::before { content: ""; position: absolute; left: 0; top: .55em;
                           width: .375rem; height: .375rem; border-radius: 50%; background: var(--azul); }
.planta__areas { display: grid; grid-template-columns: auto auto; gap: .35rem 1rem;
                 justify-content: start; margin: 1.5rem 0 0; padding-top: 1.25rem;
                 border-top: 1px solid var(--linha); font-size: .9375rem; }
.planta__areas dt { color: var(--texto-fraco); }
.planta__areas dd { margin: 0; font-weight: 500; color: var(--navy-800); }
.planta__arte { padding: 0; border: 0; background: none; cursor: zoom-in; }
.planta__arte img { display: block; width: 100%; height: auto; }

.emp-obra__ref { text-align: center; color: var(--texto-fraco); font-size: .875rem; margin: 0 0 2rem; }

.obra-painel { display: grid; gap: 2.5rem; align-items: center; }

/* Evolução total: anel com o número dentro. */
/* Um número só manda no tamanho: a caixa, o SVG e o centro absoluto têm que
   bater, senão o "74%" sai fora do anel. O stroke é do viewBox, então
   encolhe junto sozinho. */
.obra-total { --anel: 150px;
              position: relative; display: grid; justify-items: center;
              width: var(--anel); margin-inline: auto; }
.obra-total__anel { width: var(--anel); height: var(--anel); transform: rotate(-90deg); }
.obra-total__trilha { fill: none; stroke: #d7dbe6; stroke-width: 9; }
.obra-total__arco   { fill: none; stroke: var(--azul); stroke-width: 9; stroke-linecap: round;
                      transition: stroke-dashoffset .8s ease; }
.obra-total__centro { position: absolute; inset: 0 0 auto; height: var(--anel);
                      display: grid; place-content: center; pointer-events: none; }
.obra-total__pct { font-size: 2.4375rem; font-weight: 300; line-height: 1; color: var(--navy-900); }
.obra-total__pct span { font-size: 1.125rem; margin-left: .1em; color: var(--texto-fraco); }
.obra-total__rotulo { margin: .9rem 0 0; font-size: .8125rem; letter-spacing: .12em;
                      text-transform: uppercase; color: var(--texto-fraco); }

/* Etapas: rótulo e % na mesma linha, barra logo abaixo. */
.emp-obra { display: grid; gap: 1.25rem 2rem; grid-template-columns: 1fr; margin: 0; }
.emp-obra__item { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
                  column-gap: .75rem; row-gap: .4rem; }
.emp-obra__item dt { font-size: .875rem; color: var(--navy-900); }
.emp-obra__pct { margin: 0; font-size: 1rem; font-weight: 500; color: var(--azul);
                 font-variant-numeric: tabular-nums; }
.emp-obra__barra { grid-column: 1 / -1; margin: 0; background: #d7dbe6; height: 8px;
                   border-radius: 99px; overflow: hidden; }
.emp-obra__preenchida { display: block; background: var(--azul); height: 100%; border-radius: 99px; }

/* Mosaico de fotos — sem barra de rolagem. */
/* Flex justificado: a última linha estica para fechar o quadro, com qualquer
   quantidade de fotos — grid deixaria buraco quando o total não fecha a linha. */
.obra-mosaico { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem auto 0;
                max-width: 880px; }
.obra-mosaico__item { margin: 0; overflow: hidden; padding: 0; border: 0; background: none;
                      cursor: zoom-in; display: block; border-radius: var(--raio);
                      flex: 1 1 150px; height: 115px; }
.obra-mosaico__item img { width: 100%; height: 100%; object-fit: cover; display: block;
                          transition: transform .4s ease; }
.obra-mosaico__item:hover img { transform: scale(1.04); }

.emp-blog { background: var(--navy-800); color: #fff; padding-block: 3.5rem; }
/* Só o nome da seção, centralizado. O parágrafo que acompanhava virou ruído:
   dizia o óbvio e empurrava os cards para baixo. */
.emp-blog__marca { margin: 0 0 2rem; text-align: center;
                   font-size: var(--titulo-sm); font-weight: 300;
                   letter-spacing: .04em; color: #fff; }
.emp-blog .card-artigo { background: transparent; border: 0; }
.emp-blog .card-artigo a { padding: 0; color: #fff; }
.emp-blog .card-artigo h3 { color: #fff; margin: .9rem 0 .4rem; }
.emp-blog .card-artigo p { font-size: .875rem; color: rgba(255,255,255,.8); margin: 0 0 1rem; }
/* Botão "Ler mais" sempre no pé do card: título de 3 linhas não desalinha a fileira (21/10/2026). */
.emp-blog .card-artigo .botao { margin-top: auto; }
.emp-blog .card-artigo .botao { color: #fff; border-color: rgba(255,255,255,.7); }
.emp-blog .card-artigo .botao:hover { background: #fff; color: var(--navy-900); }
.emp-blog .card-artigo a:hover h3 { color: var(--azul-400); }

/* ---------- Central de Decorados (/central/) ----------
   Mesma divisão de faixas da página de produção. O que muda de verdade em
   relação às outras institucionais é a abertura (título de um lado, texto do
   outro) e o mapa em largura cheia no fim; carrossel, card e lightbox são os
   mesmos do catálogo. */

/* Abertura: o título ocupa a coluna da esquerda e quebra sozinho em duas
   linhas — é o desenho da página antiga e o que dá escala ao nome. */
.central-abertura__grade { display: grid; gap: 1.5rem; align-items: start; }
.central-abertura__titulo { color: var(--azul-400); margin: 0; }
.central-abertura__saudacao {
  margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.5; color: var(--navy-900);
}
.central-abertura__texto .artigo-corpo { max-width: 62ch; }
.central-experiencia .artigo-corpo { max-width: 90ch; margin-inline: auto; text-align: center; }

/* Galeria do espaço: quadrados pequenos, muitos por vez — a foto aqui é
   amostra, não peça. Quem quiser ver grande abre no lightbox. */
.central-galeria .carrossel__trilho { grid-auto-columns: 12rem; gap: .75rem; }
.central-galeria__item {
  padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--raio);
  overflow: hidden; display: block;
}
.central-galeria__item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Decorados em faixa navy, com o botão DEPOIS do carrossel: primeiro a pessoa
   vê o que dá para visitar, depois recebe o convite. O card do catálogo é um
   painel branco e já tem contraste sobre navy — nada a redefinir dentro dele. */
.central-decorados { background: var(--navy-900); color: var(--branco); text-align: center; }
/* Título em branco, não no azul de apoio: peso 100 é traço fino, e fio azul
   sobre navy não chega nos 3:1 de texto grande. */
.central-decorados__titulo { margin: 0 0 2rem; }
.central-decorados__cta { margin: 2rem 0 0; }
.central-decorados .carrossel__trilho { text-align: left; }
.botao--zap { background: #25D366; color: #fff; }
.botao--zap:hover, .botao--zap:focus-visible { background: #1DA851; color: #fff; }

/* Faixa final: só o mapa, em largura cheia e sem container. O título saiu —
   o botão sobre o mapa faz o convite sozinho. */
.central-visita { background: var(--branco); }
.central-visita__mapa { position: relative; }
.central-visita__mapa iframe {
  width: 100%; height: clamp(320px, 34vw, 460px); border: 0; display: block;
}
/* Botão no rodapé do mapa, maior que o padrão porque é o único convite da
   faixa. Sombra própria: sobre mapa claro, azul sem sombra some no meio das
   ruas. */
.central-visita__rota {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  padding: .9rem 2.25rem; font-size: 1.125rem; font-weight: 400;
  box-shadow: 0 4px 16px rgba(0, 0, 45, .35);
}

@media (min-width: 48rem) {
  .central-abertura__grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; }
  /* Setas fora dos cards, como nos relacionados: o carrossel recua e elas
     ocupam o recuo em vez de cobrir o primeiro e o último item. */
  .central-decorados .carrossel,
  .central-galeria .carrossel { padding-inline: 3.5rem; }
  .central-decorados .carrossel__seta--ant,
  .central-galeria .carrossel__seta--ant  { left: 0; }
  .central-decorados .carrossel__seta--prox,
  .central-galeria .carrossel__seta--prox { right: 0; }
}

/* ---------- Empreendimentos relacionados (entre o mapa e o blog) ----------
   Faixa no navy do rodapé, um degrau mais escura que a do blog logo abaixo,
   para as duas não virarem um bloco azul só. O card é o mesmo do catálogo:
   painel branco sobre navy já tem contraste, nada a redefinir dentro dele. */
.emp-relacionados { background: var(--navy-900); color: #fff; padding-block: 3.5rem; }
.emp-relacionados__marca {
  margin: 0 0 2rem; text-align: center;
  font-size: var(--titulo-sm); font-weight: 100;
  text-transform: uppercase; letter-spacing: .04em; color: #fff; line-height: 1.05;
}
/* Fora dos cards, sem sangrar para fora da faixa: o carrossel recua 3,5rem de
   cada lado e as setas ocupam esse recuo. Puxá-las para -1rem deixava metade
   do botão em cima do primeiro e do último card. O recuo entra só onde há
   espaço — no celular a seta volta para dentro (regra no fim do arquivo). */
@media (min-width: 48rem) {
  .emp-relacionados .carrossel { padding-inline: 3.5rem; }
  .emp-relacionados .carrossel__seta--ant  { left: 0; }
  .emp-relacionados .carrossel__seta--prox { right: 0; }
}
.emp-relacionados .carrossel__ponto { background: rgba(255,255,255,.35); }
.emp-relacionados .carrossel__ponto[aria-current="true"] { background: #fff; }
.emp-relacionados__todos { margin: 1.75rem 0 0; text-align: center; }
.emp-relacionados__todos .botao {
  color: #fff; border-color: rgba(255,255,255,.7);
}
.emp-relacionados__todos .botao:hover { background: #fff; color: var(--navy-900); }

@media (max-width: 40rem) {
  .emp-relacionados .carrossel__seta--ant  { left: .5rem; }
  .emp-relacionados .carrossel__seta--prox { right: .5rem; }
}

@media (min-width: 48rem) {
  /* O card sobe para cobrir o pé da capa, como no layout — sem empurrar a barra.
     margin-left auto encosta ele na direita com qualquer quantidade de dados. */
  /* O card sobe para dentro da imagem. align-self: start impede que o
     align-items: center da faixa o puxe de volta para o meio. */
  .emp-cta { margin-top: -5.5rem; margin-bottom: 0; box-shadow: 0 12px 30px rgba(10,20,60,.12);
             position: relative; z-index: 2; padding: 1rem; align-self: start;
             flex: 0 0 15rem; margin-left: auto; }
  .emp-conceito { grid-template-columns: .8fr 1.2fr; gap: 3.5rem; }
  .planta { grid-template-columns: .75fr 1.25fr; gap: 3rem; }
  /* A coluna acompanha o anel (--anel + folga do rótulo), em vez de um 240px
     fixo que sobrou do anel antigo e virava espaço morto entre o anel e as
     barras. auto = a largura do próprio conteúdo. */
  .obra-painel { grid-template-columns: auto 1fr; gap: 2.5rem; }
  .obra-total { margin-inline: 0; }
  .emp-obra { grid-template-columns: repeat(2, 1fr); }
  .obra-mosaico__item { flex-basis: 200px; height: 150px; }
}
.subnav { background: var(--navy-900); position: sticky; top: 88px; z-index: 40; }
.subnav ul { display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 3.5rem);
             justify-content: center; list-style: none; margin: 0; padding: .9rem 0; }
.subnav a { color: var(--branco); text-decoration: none; font-size: 1rem; font-weight: 400; }
.subnav a:hover { color: var(--azul-400); }

.emp-topo { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56rem) { .emp-topo { grid-template-columns: 1fr 1.4fr; } }
.emp-topo__texto { max-width: 60ch; }
.emp-topo__logo { max-height: 90px; width: auto; margin: 0 auto 2rem; }
.emp-topo__endereco { font-size: .9375rem; color: var(--texto-fraco); }

/* Fichas em pílula, como no site atual: rótulo + chips na mesma linha */
.ficha-linha { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.ficha-linha__rotulo { font-size: 1rem; color: var(--texto); margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; font-size: 1rem; color: var(--azul);
  border: 1px solid var(--azul-400); border-radius: var(--raio);
}

.divisor { width: 125px; height: 1px; background: var(--linha); border: 0; margin: 3rem auto; }

/* Diferenciais e áreas de lazer.
   Antes eram pílulas contornadas, iguais aos botões de âncora do bloco de cima —
   o usuário tentava clicar. Aqui viram fichas: ícone + nome, sem borda de botão. */
.lazer { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .625rem;
         grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.lazer__item { display: flex; align-items: center; gap: .7rem; min-height: 3.5rem;
               padding: .6rem .85rem; background: #fff; border-radius: var(--raio-lg);
               box-shadow: 0 1px 2px rgba(0,0,90,.05); }
.lazer__icone { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
                border-radius: 50%; background: rgba(42,99,222,.09); color: var(--azul); }
.lazer__nome { font-size: .875rem; line-height: 1.25; color: var(--texto); }

@media (max-width: 30rem) {
  .lazer { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
  .lazer__item { padding: .55rem .6rem; gap: .55rem; }
  .lazer__icone { width: 2rem; height: 2rem; }
  .lazer__nome { font-size: .8125rem; }
}

.galeria { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.galeria img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

.plantas { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plantas figure { margin: 0; }
.plantas figcaption { font-size: .875rem; color: var(--texto-fraco); margin-top: .6rem; text-align: center; }

.obra { display: grid; gap: .85rem; margin: 0; }
.obra__linha { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr auto; gap: 1rem; align-items: center; }
.obra__nome { font-size: .9375rem; }
.obra__barra { height: 8px; background: rgba(255,255,255,.25); border-radius: var(--pill); overflow: hidden; }
.obra__preenchida { height: 100%; background: var(--azul-400); border-radius: var(--pill); }
.obra__pct { font-size: .9375rem; font-weight: 600; min-width: 4ch; text-align: right; }

.mapa { border: 0; display: block; width: 100%; aspect-ratio: 16/9; max-height: 520px; }
.mapa-area { position: relative; }
.mapa-area__rota { position: absolute; left: 50%; transform: translateX(-50%);
                   bottom: .5rem; z-index: 2; }
/* A seção é só o mapa: sem título e sem faixa sobrando em volta. */
#local { padding: 0; }

/* ---------- Formulários ---------- */
.form { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.form__linha { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.campo { display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr); }
/* minmax(0, 1fr) acima: sem ele, o select com o nome mais longo da lista
   ("Aura Powered by Porsche Consulting") alargava a coluna e os campos
   passavam da borda do cartão no celular (auditoria de 18/10/2026). */
.campo > label { font-size: .875rem; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem; min-height: 46px; padding: .6rem .9rem;
  color: var(--texto); background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
}
.campo textarea { min-height: 130px; resize: vertical; }

/* O formulário vira um cartão: separa do fundo da seção e dos blocos vizinhos. */
.secao .form {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: clamp(1.25rem, 3vw, 2rem); gap: 1.35rem; margin-top: 2rem;
}
.secao .campo > label { color: var(--texto-fraco); font-size: .8125rem;
                              letter-spacing: .04em; text-transform: uppercase; }
.secao .campo input:focus, .secao .campo select:focus,
.secao .campo textarea:focus { border-color: var(--azul); }
.secao .form__consentimento { padding-top: .35rem; margin-top: .35rem;
                                    border-top: 1px solid var(--linha); }

.secao--navy .form {
  background: var(--navy-900); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--raio); padding: clamp(1.25rem, 3vw, 2rem); gap: 1.35rem;
}
.secao--navy .campo input,
.secao--navy .campo select,
.secao--navy .campo textarea {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.secao--navy .campo input:focus,
.secao--navy .campo select:focus,
.secao--navy .campo textarea:focus { border-color: var(--azul-400); background: rgba(255,255,255,.12); }
.secao--navy .campo input::placeholder,
.secao--navy .campo textarea::placeholder { color: rgba(255,255,255,.55); }
.secao--navy .campo > label { color: rgba(255,255,255,.75); font-size: .8125rem;
                             letter-spacing: .04em; text-transform: uppercase; }
.secao--navy .form__consentimento { padding-top: .35rem; border-top: 1px solid rgba(255,255,255,.12);
                                    margin-top: .35rem; }

.form__consentimento { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; }
.form__consentimento input { margin-top: .3rem; }
.form__erro { color: #FFB4B4; font-weight: 600; font-size: .9375rem; }
.secao--gelo .form__erro, .secao--azul .form__erro { color: #A11B2B; }
.form__ok { color: #7BE3B0; font-weight: 600; font-size: .9375rem; }


/* ---------- Blog ---------- */
.cards-blog { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card-artigo { background: #fff; border: 1px solid var(--linha); }
.card-artigo a { display: block; text-decoration: none; color: inherit; padding: .75rem; }
.card-artigo img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.card-artigo h2, .card-artigo h3 {
  font-size: 1.125rem; font-weight: 400; color: var(--navy-800); margin: 1rem 0 .5rem; line-height: 1.3;
}
.card-artigo a:hover h2, .card-artigo a:hover h3 { color: var(--azul); }
.card-artigo time { font-size: .8125rem; color: var(--texto-fraco); }

.artigo-corpo { max-width: 68ch; font-size: 1.0625rem; line-height: 1.65; }
.artigo-meta { font-size: .9375rem; color: var(--texto-fraco); }

/* O HTML dos artigos vem do WordPress antigo: quem estiliza é a tag, não a classe. */
.artigo-corpo p { margin: 0 0 1.1rem; }
.artigo-corpo h2, .artigo-corpo h3, .artigo-corpo h4 { margin: 2rem 0 .75rem; line-height: 1.25; }
/* Subtítulo do post sai como h2 (html_titulos_hierarquia) com a cara do h3 de antes. */
.artigo-corpo h2 { font-size: 1.17em; }
.artigo-corpo h3 { font-size: 1.05em; }
.artigo-corpo ul, .artigo-corpo ol { margin: 0 0 1.1rem 1.25rem; }
.artigo-corpo img { margin: 1.75rem 0; border-radius: var(--raio); }
.artigo-corpo a { color: var(--azul); }
.artigo-corpo .video { position: relative; aspect-ratio: 16/9; margin: 1.75rem 0; }
.artigo-corpo .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Newsletter ---------- */
.newsletter { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 48rem) { .newsletter { grid-template-columns: auto 1fr; gap: 3rem; } }
.newsletter__form { display: flex; gap: .75rem; }
.newsletter__form input {
  flex: 1; font: inherit; min-height: 46px; padding: .6rem .9rem;
  border: 1px solid var(--azul-400); border-radius: var(--raio);
}
.newsletter__form button { min-width: 64px; }

/* ---------- Migalhas ---------- */
.migalhas { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
            padding: 1.25rem 0 .5rem; color: var(--texto-fraco); }
/* Minimalista (pedido do Vitor, 18/10/2026), na linguagem do "CONCEITO ——"
   da página do empreendimento: caixa alta espaçada, traço fino no lugar do
   "›", sem sublinhado; a página atual em azul-marinho. */
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
               gap: .35rem .6rem; margin: 0; padding: 0; }
.migalhas li { display: inline-flex; align-items: center; gap: .6rem; }
.migalhas li + li::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .45; }
.migalhas a { color: inherit; text-decoration: none; transition: color .2s ease;
              /* Área de toque de 24px (WCAG 2.2) sem mudar o desenho. */
              display: inline-block; padding-block: .3rem; }
.migalhas a:hover, .migalhas a:focus-visible { color: var(--azul); }
.migalhas li:last-child { color: var(--navy-900); font-weight: 500; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--navy-900); color: var(--branco); padding: 3.5rem 0 0;
          border-top: 1px solid rgba(255,255,255,.12); }
.rodape a { color: var(--branco); text-decoration: none; }
.rodape a:hover { color: var(--azul-400); text-decoration: underline; }
/* Cinco colunas numa linha só, nas proporções do layout. O auto-fit anterior
   não cabia cinco em 1200px e jogava a última para uma segunda linha — era
   isso que abria o buraco embaixo do rodapé. */
.rodape__grade { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.rodape__logo { width: 132px; height: auto; display: block; }
.rodape__sociais { list-style: none; display: flex; justify-content: center;
                   gap: 8px; width: 132px; margin: 1.25rem 0 0; padding: 0; }
.rodape__sociais a { display: grid; place-items: center; width: 26px; height: 26px;
                     background: var(--branco); color: var(--navy-800); border-radius: 50%; }
.rodape__sociais a:hover { background: var(--azul-400); color: var(--branco); }

@media (min-width: 62rem) {
  /* Proporções medidas no PSD, com a coluna do endereço um pouco mais larga:
     a área de conteúdo do layout tem 1467px em 1920 e a nossa tem 1140, então
     manter a fração original quebraria "…1608C – Sala 39" em duas linhas. */
  .rodape__grade { grid-template-columns: .86fr 2.17fr 1.31fr 1.11fr 1fr; }
}
.rodape__titulo { font-size: 1rem; font-weight: 700; color: var(--branco); margin: 0 0 .5rem; }
.rodape__bloco p { font-size: .9375rem; line-height: 1.5; }
.rodape__bloco a[href^="tel"] { color: var(--azul-400); }
.rodape__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9375rem; }
/* Faixa das páginas pilares, abaixo das colunas medidas da produção: uma
   sexta coluna desmontaria a grade. Links em linha, quebrando. */
.rodape__imoveis { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12); }
.rodape__imoveis ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
                      gap: .4rem 1.75rem; font-size: .9375rem; }
.rodape__base { margin-top: 3rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.12);
                text-align: center; font-size: .8125rem; }
.rodape__base p { margin: 0; }

/* agende-visita:inicio — este bloco também vai inline nas /materiais/
   (conversao_agende_visita()): cor com reserva, sem depender de token. */
/* ---------- WhatsApp flutuante ("Agende sua visita") ----------
   Aba navy do layout aprovado, presa no meio da borda direita e visível
   durante a rolagem, só com o símbolo do WhatsApp (o texto saiu a pedido do
   Vitor, 17/10/2026). Contorno claro: sobre as faixas navy a aba sumia.
   No celular vira um botão redondo no canto, onde não cobre o texto. */
.agende-visita {
  position: fixed; z-index: 65; right: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; padding: .85rem .8rem .85rem .9rem;
  background: var(--navy-900, #00005A); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .45); border-right: 0;
  border-radius: 12px 0 0 12px; box-shadow: -4px 6px 22px rgba(0, 0, 40, .28);
  transition: background .2s ease;
}
.agende-visita:hover, .agende-visita:focus-visible { background: var(--navy-800, #060A8B); }
.agende-visita__icone {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #25D366; color: #fff; box-shadow: 0 0 0 2px #fff inset;
}
.agende-visita__icone svg { width: 26px; height: 26px; }
@media (max-width: 48rem) {
  .agende-visita {
    top: auto; bottom: 1rem; right: 1rem; transform: none; padding: .4rem;
    border-radius: 50%; border-right: 1px solid rgba(255, 255, 255, .45);
    box-shadow: 0 6px 20px rgba(0, 0, 40, .3);
  }
  .agende-visita__icone { width: 46px; height: 46px; }
}
/* Botões verdes antigos que o GTM (".whatsdesk") e o popup do RD injetam por
   cima: o WhatsApp do site é este. Os dois põem !important no deles. */
.whatsapp.whatsdesk, .rdstation-popup-position-bottom_right.floating-button { display: none !important; }
/* agende-visita:fim */

/* ---------- Banner de cookies (LGPD) ----------
   Cartão no canto inferior esquerdo, como o banner que está no ar. Acima do
   botão do WhatsApp (z-index 65). No celular ocupa a largura toda embaixo. */
.cookies {
  position: fixed; z-index: 80; left: 1.25rem; bottom: 1.25rem; width: min(380px, calc(100% - 2rem));
  background: #fff; color: var(--texto); border-radius: var(--raio);
  box-shadow: 0 12px 40px rgba(0, 0, 40, .25); padding: 1.25rem 1.25rem 1rem; font-size: .875rem;
}
.cookies[hidden] { display: none; }
.cookies__titulo { font-size: 1rem; color: var(--navy-900); margin: 0 0 .5rem; }
.cookies p { margin: 0 0 .75rem; line-height: 1.5; }
.cookies__links { font-size: .8125rem; }
.cookies__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.cookies__botoes .botao { padding: .55rem 1.1rem; font-size: .875rem; }
.cookies__customizar, .rodape__cookies {
  background: none; border: 0; padding: .55rem .25rem; margin-right: auto; cursor: pointer;
  color: var(--azul); text-decoration: underline; font: inherit; font-size: .875rem;
}
.rodape__cookies { color: inherit; text-decoration: none; padding: 0; margin: 0; font-size: inherit; text-align: left; }
.rodape__cookies:hover { color: var(--azul-400); text-decoration: underline; }
/* Biscoitinho do canto inferior esquerdo (como no site atual): aparece
   depois da escolha e reabre as preferências. O WhatsApp fica à direita. */
.cookies-icone {
  position: fixed; z-index: 64; left: 1.25rem; bottom: 1.25rem;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45);
  display: grid; place-items: center; cursor: pointer;
  background: var(--navy-900); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 40, .3);
  transition: background .2s ease;
}
.cookies-icone[hidden] { display: none; }
.cookies-icone:hover, .cookies-icone:focus-visible { background: var(--navy-800); }
@media (max-width: 48rem) {
  .cookies-icone { left: 1rem; bottom: 1rem; width: 48px; height: 48px; }
}
.cookies-prefs__item { border-top: 1px solid var(--linha); padding: .75rem 0; }
.cookies-prefs__item p { margin: .25rem 0 0 1.6rem; font-size: .875rem; color: var(--texto-fraco); }
.cookies-prefs__item input { width: 1.1rem; height: 1.1rem; vertical-align: -2px; margin-right: .35rem; }
@media (max-width: 48rem) {
  .cookies { left: .5rem; right: .5rem; bottom: .5rem; width: auto; }
}

/* ---------- Paginação e vazio ---------- */
.paginacao { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; padding: 0;
             margin: 3rem 0 0; justify-content: center; }
.paginacao a, .paginacao span {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .6rem;
  border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; font-size: .9375rem;
}
.paginacao [aria-current="page"] { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.vazio { padding: 3rem; text-align: center; background: var(--gelo); }
.secao--navy .vazio { background: rgba(255,255,255,.08); color: var(--branco); }

/* =====================================================================
   Home — layout de 26/08/2026
   Hero comercial, chips de estágio, faixa do blog, canais e cards de
   encaminhamento. Medidas tiradas dos PSDs (canvas 1920).
   ===================================================================== */

.hero { position: relative; background: var(--navy-900); }
/* Proporção 2,4:1: faixa larga e baixa, todo slide na mesma altura. As artes
   2:1 (2560 × 1280) entram em "cover" e perdem ~8% em cima e embaixo — as
   peças já vêm com a informação recolhida para o centro (área de segurança).
   No celular o piso de 360px segura o cartão; a arte lá entra em "contain"
   porque o corte seria nas laterais, onde está o texto. */
.hero__img { width: 100%; height: auto; aspect-ratio: 12 / 5; min-height: 360px;
             object-fit: cover; display: block; }

/* --- Slider do topo ---
   Um slide só (o caso do destaque automático) não vira carrossel: a seção
   continua sendo o que era, sem controles e sem JS. Com dois ou mais, os
   slides empilham no mesmo lugar e a opacidade troca. Empilhar em grid, e não
   com position:absolute, mantém a altura da seção governada pelo slide mais
   alto — sem isso o rodapé pula quando a foto seguinte tem outra proporção. */
.hero--slider { display: grid; }
.hero--slider .hero__slide { grid-area: 1 / 1; }
/* Arte institucional nunca corta: sem piso de altura. No celular, ao lado de
   um slide de empreendimento (360px), ela ocupa a altura toda em "contain" e
   sobra faixa navy em cima e embaixo — mesma cor do fundo das artes. */
.hero__arte { min-height: 0; background: var(--navy-900); }
.hero--slider .hero__arte { height: 100%; }
@media (max-width: 840px) { .hero__arte { object-fit: contain; } }
/* Banner com versão de celular: a arte em pé ocupa a tela na proporção dela
   (4:5), sem a faixa azul em cima e embaixo. */
@media (max-width: 840px) {
  .hero__slide--celular .hero__img { aspect-ratio: 4 / 5; min-height: 0; height: auto; object-fit: cover; }
}
.hero__slide--institucional a { display: block; height: 100%; }
.hero__slide { position: relative; }
.hero--slider .hero__slide {
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.hero--slider .hero__slide.e-ativo {
  opacity: 1; visibility: visible;
  transition: opacity .55s ease, visibility 0s;
}
/* Quem pediu menos movimento troca sem transição, e o giro automático para
   (o JS lê a mesma media query). */
@media (prefers-reduced-motion: reduce) {
  .hero--slider .hero__slide { transition: none; }
}

.hero__controles {
  position: absolute; z-index: 2; inset: auto 0 1.5rem 0;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 0 var(--gutter);
}
.hero__seta {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.55); border-radius: 50%;
  background: rgba(0,0,45,.35); color: #fff; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.hero__seta:hover, .hero__seta:focus-visible {
  background: #fff; border-color: #fff; color: var(--navy-900);
}
.hero__pontos { display: flex; align-items: center; gap: .5rem; }
.hero__ponto {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.75); background: transparent;
  transition: background .18s ease, transform .18s ease;
}
.hero__ponto[aria-selected="true"] { background: #fff; transform: scale(1.25); }
/* Alvo de toque de 44px sem bolinha de 44px: a área invisível cresce por
   pseudo-elemento, o desenho continua pequeno. */
.hero__ponto::before { content: ""; position: absolute; width: 44px; height: 44px;
                       transform: translate(-17px, -17px); }
.hero__pontos { position: relative; }
.hero__ponto { position: relative; }

@media (max-width: 640px) {
  .hero__controles { inset: auto 0 .85rem 0; gap: .5rem; }
  .hero__seta { width: 38px; height: 38px; }
}
/* Véu só do lado do texto: mantém contraste AA sem lavar a foto inteira.
   Fica no slide, não na seção: o banner institucional é arte pronta e não
   leva véu nenhum. */
.hero__slide:not(.hero__slide--institucional)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,45,.72) 0%, rgba(0,0,45,.35) 45%, transparent 70%);
}
.hero__cartao {
  position: absolute; z-index: 1; top: 50%; transform: translateY(-50%);
  left: max(var(--gutter), calc((100vw - var(--largura)) / 2));
  max-width: min(32rem, calc(100% - var(--gutter) * 2)); color: #fff;
}
/* Logotipo do empreendimento na altura em que o layout o coloca. */
.hero__logo {
  width: clamp(180px, 22vw, 300px); height: auto; margin-bottom: 1.25rem;
  /* O arquivo do empreendimento vem colorido (bronze no Aura). No hero sobre
     foto o layout usa monocromático branco — brightness(0) achata para preto,
     invert(1) leva a branco puro, independente da cor de origem. */
  filter: brightness(0) invert(1);
}
.hero__nome {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); font-weight: 100;
  text-transform: uppercase; line-height: 1.05; margin: 0 0 1rem;
}
.hero__selos { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }
.hero__selos li {
  border: 1px solid rgba(255,255,255,.8); border-radius: var(--raio);
  padding: .35rem .9rem; font-size: .9375rem;
}
.hero__local { margin: 0 0 1.25rem; font-weight: 600; line-height: 1.35; }
.botao--claro { background: #fff; color: var(--navy-900); border-color: #fff; }
.botao--claro:hover, .botao--claro:focus-visible { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Cabeçalho da grade: título à esquerda, chips à direita. */
.grade-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; margin-bottom: 2rem;
}
.grade-topo .titulo-secao { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .4rem 1.15rem; border: 1px solid var(--navy-900); border-radius: var(--pill);
  color: var(--navy-900); text-decoration: none; font-size: .9375rem;
}
.chip:hover, .chip:focus-visible { background: var(--navy-900); color: #fff; }
.chip--ativo { background: var(--navy-900); color: #fff; }
.grade-todos { margin: 2rem 0 0; text-align: center; }

/* Faixa do blog: metade texto sobre navy, metade foto. */
.faixa-blog {
  display: grid; grid-template-columns: 1fr; align-items: center;
  background: var(--navy-800); color: #fff;
}
.faixa-blog__texto { padding: clamp(2rem, 5vw, 4rem) var(--gutter); }
.faixa-blog__chip {
  display: inline-block; margin: 0 0 1rem; padding: .25rem 1rem;
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--pill); font-size: .875rem;
}
.faixa-blog__data { font-size: .875rem; color: rgba(255,255,255,.75); margin: 0 0 .5rem; }
.faixa-blog__frase { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 400; line-height: 1.35; margin: 0 0 1.5rem; color: #fff; }
.faixa-blog__frase a { color: inherit; text-decoration: none; }
.faixa-blog__frase a:hover { text-decoration: underline; }
.faixa-blog__foto a { display: block; height: 100%; }
.faixa-blog__texto .botao--contorno { color: #fff; }
.faixa-blog__texto .botao--contorno:hover { background: #fff; color: var(--navy-900); }
.faixa-blog__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Telefones por canal. */
.centro { text-align: center; }
.canais { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.canais a {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 46px;
  padding: .55rem 1.5rem; border: 1px solid rgba(255,255,255,.75); border-radius: var(--pill);
  color: #fff; text-decoration: none;
}
.canais a:hover, .canais a:focus-visible { background: #fff; color: var(--navy-900); border-color: #fff; }
.canais span { opacity: .8; }
.canais a:hover span { opacity: 1; }

/* Encaminhamento por assunto. */
.titulo-bloco {
  font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--azul-400); font-weight: 400; margin: 2.5rem 0 1rem;
  border-bottom: 1px solid var(--linha); padding-bottom: .6rem;
}
/* Cards de assunto (home e /contato/). Versão enxuta de 17/10/2026, a
   pedido do Vitor: três colunas no desktop, fundo branco com fio fino,
   ícone solto em vez de caixa, título sem caixa-alta. Antes: duas colunas,
   fundo gelo e ícone numa caixa de 56px, como no PSD. */
.cards-ajuda {
  display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.card-ajuda {
  position: relative; background: #fff; border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1rem 1.1rem;
  display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start;
  transition: border-color .2s ease;
}
.card-ajuda__icone { display: block; color: var(--azul); padding-top: 1px; }
.card-ajuda__icone svg { width: 22px; height: 22px; display: block; }
.card-ajuda h3 {
  font-size: .9375rem; font-weight: 600; line-height: 1.3;
  color: var(--navy-900); margin: 0 0 .3rem;
}
.card-ajuda h3 a { color: inherit; text-decoration: none; }
.card-ajuda h3 a::after { content: ""; position: absolute; inset: 0; }
.card-ajuda:hover { border-color: var(--azul); }
.card-ajuda:hover h3 { color: var(--azul); }
.card-ajuda p { margin: 0; font-size: .8125rem; color: var(--texto-fraco); line-height: 1.45; }
.assuntos__intro { color: var(--texto-fraco); margin-bottom: .5rem; }

@media (min-width: 62rem) {
  .faixa-blog { grid-template-columns: 1fr 1fr; }
  .faixa-blog__texto { padding-left: max(var(--gutter), calc((100vw - var(--largura)) / 2)); }
}

/* ---------- Assunto de contato e modal ---------- */
.assunto { max-width: 44rem; }
.assunto__intro { color: var(--texto-fraco); max-width: 60ch; margin: 0 0 2rem; }

.modal {
  width: min(92vw, 40rem); max-height: 88vh; padding: 0; border: 0;
  border-radius: var(--raio); box-shadow: 0 24px 60px rgba(5, 12, 40, .35);
}
.modal::backdrop { background: rgba(5, 12, 40, .55); }
.modal__corpo { padding: 2rem 2rem 2.5rem; overflow-y: auto; max-height: 88vh; }
.modal__corpo .secao { padding: 0; }
.modal__corpo .container { padding: 0; width: auto; }
.modal__corpo .migalhas { display: none; }
.modal__fechar {
  position: absolute; top: .5rem; right: .75rem; z-index: 1;
  background: none; border: 0; font-size: 1.75rem; line-height: 1;
  color: var(--texto-fraco); cursor: pointer;
}
.modal__fechar:hover { color: var(--azul); }

/* ---------------------------------------------------------------
   Página /empresa/ — vídeo, citação, linha do tempo, contadores,
   pilares e selos. Só o que a página institucional usa.
   --------------------------------------------------------------- */

/* Vídeo de sangria: borda a borda, sem container e sem cantos.
   A altura é limitada por vh para o vídeo não empurrar a página inteira
   para fora da primeira tela em monitor largo. */
.empresa-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  background: #0b1c3a;
  overflow: hidden;
}
.empresa-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  display: block;
}

.empresa-sub {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy, #0b1c3a);
  margin: -.5rem 0 1.5rem;
}

/* Citação do presidente: frase no mesmo peso fino dos títulos de seção
   (Noto Sans 100), mas sem caixa alta; retrato à direita. */
.empresa-citacao figure {
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.empresa-citacao__texto { flex: 1; min-width: 0; text-align: center; }

.empresa-citacao blockquote { margin: 0; }
.empresa-citacao blockquote p {
  font-size: var(--titulo);
  font-weight: 100;
  line-height: 1.15;
  color: var(--azul);
  margin: 0;
}

.empresa-citacao figcaption {
  margin-top: 1.5rem;
  font-weight: 300;
  color: var(--texto-fraco);
}
.empresa-citacao figcaption strong {
  display: block;
  font-size: clamp(1.125rem, .9rem + .7vw, 1.5rem);
  font-weight: 300;
  color: var(--azul);
}
.empresa-citacao figcaption span { font-size: .9375rem; }

.empresa-citacao img {
  width: clamp(140px, 16vw, 190px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .empresa-citacao figure { flex-direction: column-reverse; }
  .empresa-citacao img { width: 150px; }
}

/* ---------------------------------------------------------------
   Linha do tempo: cartão branco com logo, texto e foto. Aqui, o desenho da
   /empresa/ (régua deitada embaixo, em azul). A /mf/ põe a régua em pé à
   direita, em ouro, como na produção: bloco `.pagina-mf` mais abaixo.
   Mexeu aqui? Conferir as DUAS páginas — uma mudança da /empresa/ já
   apagou a régua vertical da /mf/ sem ninguém perceber.
   Tokens da marca MF, escopados aqui para não vazarem no resto do site.
   --------------------------------------------------------------- */
.empresa-tempo {
  /* Fundo e navy do cartão no secundário da paleta (#000056); branco no
     cartão e azul institucional nos controles mantêm a paleta do site. */
  background: var(--navy-900);
  --mf-papel:  #FFFFFF;
  --mf-navy:   var(--navy-900);
  --mf-texto:  #57636F;
  --mf-cobre:  #2A63DE;
  --mf-altura: 420px;   /* altura FIXA do cartão — ver .mf.e-pilha */
}
.empresa-tempo .titulo-secao { color: #fff; }
.empresa-tempo__sub {
  margin: -.5rem 0 2rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .9rem;
  opacity: .8;
}

.mf { position: relative; }

.mf__slides {
  background: var(--mf-papel);
  border-radius: 8px;
  overflow: hidden;
}

.mf__slide {
  display: flex;
  align-items: stretch;
  min-height: var(--mf-altura);
}

.mf__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 50px 28px 60px;
  color: var(--mf-texto);
}
/* Todo logo na mesma caixa (220 × 80): os arquivos vêm em proporções muito
   diferentes, e é a caixa igual que faz eles parecerem do mesmo tamanho. */
.mf__logo { width: 220px; max-width: 100%; height: 80px; display: block; margin-bottom: 16px;
            object-fit: contain; object-position: left center; }
.mf__titulo {
  font-size: 1.6rem; font-weight: 600; color: var(--mf-navy);
  margin: 0 0 1.5rem;
}
.mf__texto p { font-size: 1rem; line-height: 1.55; margin: 0 0 18px; max-width: 52ch; }

.mf__botao {
  align-self: flex-start;
  padding: 12px 26px;
  border: 2px solid var(--mf-navy);
  border-radius: 5px;
  color: var(--mf-navy);
  font-weight: 600;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
}
.mf__botao:hover, .mf__botao:focus-visible { background: var(--mf-navy); color: var(--mf-papel); }

.mf__foto { width: 380px; flex-shrink: 0; }   /* estreita: foto vertical corta menos */
.mf__foto img {
  width: 100%; height: 100%;
  min-height: var(--mf-altura);
  object-fit: cover; object-position: center;
  display: block;
}

/* Régua de anos, deitada abaixo do cartão. Com quase 30 marcos ela rola de
   lado (barra escondida, bordas esfumadas) e o JS mantém o ativo no meio.
   O trilho é a borda de cada marco, não um elemento solto — acompanha a
   rolagem. Uma bolinha por marco; o ano escrito só no primeiro de cada ano.
   Roda do mouse em cima da régua troca o slide. */
.mf__regua {
  position: relative;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  flex: 1;
  min-width: 0;
  padding: 14px 3% 0;        /* folga em cima: a bolinha ativa (16px) não corta */
}
.mf__navega { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.mf__seta {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1.5px solid var(--mf-cobre); border-radius: 50%;
  background: transparent; color: var(--mf-cobre);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.mf__seta[hidden] { display: none; }
.mf__seta:hover, .mf__seta:focus-visible { background: #fff; border-color: #fff; color: var(--navy-900); }
.mf__seta:disabled { opacity: .3; cursor: default; background: transparent; color: var(--mf-cobre);
                     border-color: var(--mf-cobre); }
.mf__regua::-webkit-scrollbar { display: none; }
.mf__linha { display: none; }
.mf__ano {
  position: relative;
  flex-shrink: 0;
  min-width: 96px;
  padding: 26px 0 4px;
  border-top: 1.5px solid var(--mf-cobre);
  color: var(--mf-cobre);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: color .2s ease;
}
.mf__ano--repete { min-width: 44px; }
/* Bolinha no trilho: azul pequena; a do marco ativo cresce e fica branca. */
.mf__ano::after {
  content: '';
  position: absolute;
  left: 50%; top: -0.75px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mf-cobre);
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease, background .2s ease;
}
.mf__ano.e-ativo::after { width: 16px; height: 16px; background: #fff; }
.mf__ano:hover::after { background: #fff; }
/* Tracinho só onde o ano está escrito. */
.mf__ano::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 1.5px; height: 14px;
  background: var(--mf-cobre);
  transform: translateX(-50%);
}
.mf__ano--repete::before { display: none; }
/* Sobre o navy o azul global de link some: hover e ativo em branco. */
.mf__ano:hover, .mf__ano:focus-visible, .mf__ano.e-ativo { color: #fff; }

/* Só vira pilha quando o JS assume; sem ele os slides ficam empilhados e
   todos legíveis. */
/* Os slides empilham no mesmo lugar (grid 1/1) e só o ativo aparece: a
   altura do cartão é a do slide mais alto e não muda ao trocar de ano —
   sem isso a régua subia e descia e a página parecia pular. */
.mf.e-pilha .mf__slides { display: grid; }
.mf.e-pilha .mf__slide { grid-area: 1 / 1; visibility: hidden; height: var(--mf-altura); overflow: hidden; }
/* Altura fixa: texto longo para na 4ª linha com reticências em vez de
   esticar o cartão. O texto inteiro está na página do empreendimento. */
.mf.e-pilha .mf__texto p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
  overflow: hidden;
}
.mf.e-pilha .mf__foto img { min-height: 0; }
.mf.e-pilha .mf__slide.e-ativo { visibility: visible; }

@media (max-width: 1100px) {
  .mf__foto { width: 300px; }
  .mf__texto { padding: 50px 40px; }
}

@media (max-width: 860px) {
  .empresa-tempo { --mf-altura: 0px; }
  .mf.e-pilha .mf__slide { height: auto; }   /* no celular a pilha grid já iguala as alturas */
  .mf { padding-right: 0; }
  .mf__slide { flex-direction: column; }
  .mf__texto { padding: 36px 24px 28px; }
  .mf__texto p { font-size: 1rem; max-width: none; }
  .mf__logo { width: 200px; height: 72px; margin-bottom: 16px; }
  .mf__foto { width: 100%; height: 260px; order: -1; }
  .mf__foto img { min-height: 0; height: 260px; }

  .mf__ano { min-width: 72px; font-size: 1rem; }
  .mf__ano--repete { min-width: 32px; }
}

/* ---------------------------------------------------------------
   Seções de conteúdo da /empresa/.
   Valores medidos com getComputedStyle na página em produção, não
   estimados: corpo 16/24 peso 200 justificado, título fino, e o texto
   ocupando a coluna inteira (o .artigo-corpo do blog corta em 68ch).
   --------------------------------------------------------------- */
.empresa-secao .artigo-corpo {
  max-width: none;
  font-size: 1rem;
  font-weight: 200;
  line-height: 1.5;
  text-align: justify;
  color: #524F4F;
}
.empresa-secao .artigo-corpo p { margin: 0 0 1.5rem; }
.empresa-secao--gelo { background: var(--gelo); }
.empresa-secao--gelo .artigo-corpo { color: var(--navy-800); }
.empresa-secao--azul { background: var(--azul); }
.empresa-secao--azul .titulo-secao,
.empresa-secao--azul .artigo-corpo { color: var(--branco); }

.empresa-sub {
  font-size: 1rem;
  font-weight: 400;
  color: #524F4F;
  margin: -.5rem 0 1.5rem;
}

/* ---------- Nossa história em números ----------
   Três colunas, número em Noto Sans 100 (98px no desktop da produção). */
.empresa-numeros { background: var(--azul); color: var(--branco); }
/* A regra global de título ganharia do `color` da seção: fixar aqui. */
.empresa-numeros .titulo-secao { color: var(--branco); }
.empresa-numeros .titulo-secao em { font-style: normal; }
.numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}
.numeros__valor {
  margin: 0 0 .5rem;
  font-size: clamp(3rem, 1.2rem + 5vw, 6.125rem);   /* 98px no topo */
  font-weight: 100;
  line-height: 1;
}
.numeros__fixo { font-weight: 100; }
.numeros__mais { margin: 2.5rem 0 0; }

/* ---------- Home: chamada da MF by Mampei Funada ----------
   Navy e areia da marca (os mesmos tokens da /mf/), mas na tipografia do
   site: Montserrat só carrega na página da MF. */
.home-mf { background: #10203C; color: #EBE5DB; padding-block: clamp(3rem, 6vw, 5rem); }
.home-mf__grade { display: grid; gap: 2.5rem; align-items: center; }
.home-mf__titulo { margin: 0 0 1.5rem; line-height: 0; }
.home-mf__logo { width: 100px; height: auto; }   /* tamanho nativo: maior borra */
.home-mf__resumo p { font-weight: 300; line-height: 1.7; margin: 0 0 1.5rem; max-width: 34rem; }
.home-mf__botao {
  display: inline-block; padding: .85rem 1.75rem; border-radius: 999px;
  background: #D6B791; color: #30404D; font-weight: 600; text-decoration: none;
  text-transform: uppercase; letter-spacing: .06em; font-size: .875rem;
  transition: background .2s ease;
}
.home-mf__botao:hover, .home-mf__botao:focus-visible { background: #fff; color: #10203C; }
.home-mf__emps { list-style: none; margin: 0; padding: 0; display: grid;
                 grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.home-mf__emps a { position: relative; display: block; border-radius: 8px; overflow: hidden;
                   color: #fff; text-decoration: none; }
.home-mf__arte { width: 100%; aspect-ratio: 532 / 936; object-fit: cover; transition: transform .4s ease; }
.home-mf__emps a:hover .home-mf__arte { transform: scale(1.04); }
.home-mf__nome {
  position: absolute; inset: auto 0 0; padding: 2.5rem .75rem .85rem;
  background: linear-gradient(transparent, rgba(16, 32, 60, .85));
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
}
@media (min-width: 62rem) {
  .home-mf__grade { grid-template-columns: 5fr 7fr; gap: 4rem; }
}
.numeros__rotulo {
  margin: 0;
  font-size: clamp(1rem, .9rem + .4vw, 1.4375rem);  /* 23px no topo */
  font-weight: 100;
  line-height: 1.3;
}

/* ---------- Missão, visão e valores ----------
   Fundo branco na seção; os três cartões é que são azuis, cantos de 25px. */
.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.pilares article {
  background: var(--azul);
  border-radius: 25px;
  padding: 2.25rem 2rem;
  color: var(--branco);
}
.pilares h2 {
  font-size: clamp(1.5rem, 1.2rem + .9vw, 2.1875rem);  /* 35px no topo */
  font-weight: 200;
  color: var(--branco);
  margin: 0 0 1.25rem;
}
.pilares .artigo-corpo { color: var(--branco); text-align: left; }
.pilares .artigo-corpo p:last-child { margin-bottom: 0; }
.pilares ul { list-style: none; margin: 0; padding: 0; }
.pilares li { margin-bottom: .35rem; }
/* Os valores vêm como lista; a produção mostra travessão no lugar do marcador. */
.pilares li::before { content: '– '; }

/* ---------- Certificações ---------- */
.selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 2.75rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.selos img { height: 96px; width: auto; }

@media (max-width: 900px) {
  .numeros { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
  .pilares { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .numeros { grid-template-columns: 1fr; }
  .empresa-secao .artigo-corpo { text-align: left; }
  .selos img { height: 70px; }
}

/* ===========================================================================
   Página /mf/ — a marca de alto padrão
   ===========================================================================
   TODOS os valores aqui foram MEDIDOS na página em produção com
   getComputedStyle, não estimados a partir de captura de tela — foi a
   estimativa que fez as primeiras versões saírem "parecidas". Ao mexer,
   medir de novo em vez de arredondar.

   A MF tem paleta e tipografia próprias: Montserrat, areia #EBE5DB, navy
   #071F37 e ouro #C8956C. Tudo escopado em `.pagina-mf` — a marca é uma
   exceção dentro do site, não um segundo tema. Sem o escopo, um token
   redefinido aqui vazaria para o header e o rodapé, que são da Mampei. */
.pagina-mf {
  --mf-areia:  #EBE5DB;   /* fundo das faixas claras */
  --mf-navy:   #071F37;   /* abertura, dados, títulos escuros */
  --mf-navy-2: #10203C;   /* faixa da linha do tempo */
  --mf-ouro:   #C8956C;   /* título de diferencial */
  --mf-ouro-2: #D89D70;   /* anos da régua */
  --mf-ouro-3: #C6AA81;   /* título e nota do MF Personaliza */
  --mf-botao:  #D6B791;   /* fundo do botão */
  --mf-botao-txt: #30404D;
  --mf-tan:    #BF9B76;   /* header e rodapé desta página */
  --mf-cinza:  #888888;   /* texto dos diferenciais */
  --mf-verde:  #53727C;   /* título "Fale com um consultor" */
  --mf-petroleo: #387488; /* campos, botão e telefone do formulário */
  --mf-larg:   1200px;    /* container das seções largas */
  --mf-larg-2: 1140px;    /* container da abertura e do contato */

  background: var(--mf-areia);
  font-family: Montserrat, "Noto Sans", system-ui, sans-serif;
}
.pagina-mf .container { max-width: var(--mf-larg); }

/* Título de seção: 37px / peso 200 / caixa alta. Medido. */
.pagina-mf .mf-titulo {
  font-size: 37px; font-weight: 200; line-height: 1.25;
  text-transform: uppercase; letter-spacing: normal;
  color: var(--mf-navy); margin: 0 0 2rem;
}
@media (max-width: 48rem) { .pagina-mf .mf-titulo { font-size: 27px; } }

/* Os fundos com sufixo `-navy` são as artes originais recoloridas por
   bin/recolorir-mf.py: o cinza-azulado que vinha do site antigo foi levado ao
   #10203C da linha do tempo, preservando as linhas douradas, a fachada e o
   carro. Os originais continuam no disco — trocar o caminho aqui volta atrás. */


/* --- Header e rodapé vestidos de MF ---
   Só na /mf/. A marca MF é areia, não navy; a classe no body é o que alcança
   os partials compartilhados sem duplicá-los. --- */
.veste-mf .cabecalho,
.veste-mf .rodape { background: #BF9B76; }
.veste-mf .rodape { border-top-color: rgba(255,255,255,.28); }
.veste-mf .cabecalho a,
.veste-mf .cabecalho__lista a,
.veste-mf .rodape,
.veste-mf .rodape a,
.veste-mf .rodape__bloco a[href^="tel"] { color: #fff; }
.veste-mf .cabecalho__menu-btn,
.veste-mf .cabecalho__icone { color: #fff; }
.veste-mf .rodape__sociais a { color: #BF9B76; }   /* o círculo é branco: o ícone precisa voltar a ser areia, senão some */
.veste-mf .rodape__sociais a:hover { background: #10203C; color: #fff; }

/* --- Topo: faixa de areia, depois o vídeo sobre a arte de fundo --- */
/* O palco não é uma cor: é bgslide-6.jpg em cover. Era isso que faltava. */
.mf-hero__palco {
  display: grid; place-items: center; min-height: 723px;
  background: url("/uploads/2026/06/bgslide-6.jpg") center / cover no-repeat;
}
/* Os cantos arredondados do vídeo NÃO são border-radius: o quadro do vídeo é
   retangular nos 30 segundos inteiros (conferido lendo o pixel dos quatro
   cantos em onze instantes). Quem faz a curva é uma máscara PNG aplicada ao
   invólucro — mask-size contain, centralizada. Foi por isso que a primeira
   tentativa de "arredondar a bordinha" não pegava: não havia raio para achar. */
/* Máscara e textura em WebP no assets/ (18/10/2026): os PNG de uploads/
   pesavam 1,2 MB e 1,6 MB e eram metade do peso da /mf/ no celular. */
.mf-hero__moldura {
  width: min(1000px, 92vw); aspect-ratio: 16 / 9;
  -webkit-mask: url("/assets/img/mf/moldura-video.webp") center / contain no-repeat;
          mask: url("/assets/img/mf/moldura-video.webp") center / contain no-repeat;
}
.mf-hero__video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.mf-hero__logo { width: clamp(200px, 26vw, 420px); height: auto; padding-block: 3rem; }
@media (max-width: 62rem) { .mf-hero__palco { min-height: 0; padding-block: 3rem; } }

/* --- Abertura --- */
.mf-hero__texto {
  background: var(--mf-navy); color: var(--mf-areia);
  padding: 2.5rem var(--gutter);
}
.mf-hero__texto .container { max-width: var(--mf-larg-2); }
.mf-hero__texto p {
  margin: 0 auto; max-width: 1040px; text-align: center;
  font-size: 19px; font-weight: 300; line-height: 24px;
}

/* --- Contadores ---
   Em produção esta faixa é a imagem dados-1024x53.png. Aqui é texto, com a
   mesma tipografia: número que vende não pode ser pixel — nem o Google nem
   leitor de tela leem uma imagem (§10). */
.mf-dados { background: var(--mf-navy); color: var(--mf-areia); padding: 0 0 2.5rem; }
.mf-dados__lista {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 1rem 2rem; list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--mf-larg-2);
}
.mf-dados__lista li { display: flex; align-items: center; gap: .65rem; }
.mf-dados__lista li + li { border-left: 1px solid rgba(235, 229, 219, .35); padding-left: 2rem; }
.mf-dados__valor { font-size: 30px; font-weight: 200; line-height: 1; white-space: nowrap; }
.mf-dados__rotulo { font-size: 12px; font-weight: 300; line-height: 1.3; max-width: 8.5rem; }
@media (max-width: 48rem) {
  .mf-dados__lista { flex-direction: column; align-items: flex-start; padding-inline: var(--gutter); }
  .mf-dados__lista li + li { border-left: 0; padding-left: 0; }
}

/* --- Localizações privilegiadas --- */
.mf-locais {
  background: var(--mf-areia) url("/uploads/2026/06/grid.png") 0 0 / cover no-repeat;
  padding-block: 4rem;
}
.mf-locais .container { max-width: var(--mf-larg); }
.mf-locais__grade {
  display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* Raio 12px nos quatro cantos — medido. A primeira versão usou 42px no canto
   superior esquerdo, que era leitura de captura de tela, não medida. */
/* 12px no container — medido. O arredondamento maior que se vê na produção
   vem da própria arte, que já tem os cantos superiores recortados. */
.mf-card a {
  position: relative; display: block; overflow: hidden;
  border-radius: 12px; text-decoration: none; background: var(--mf-navy-2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mf-card a:hover, .mf-card a:focus-visible {
  transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(7, 31, 55, .55);
}
/* 389×692 na produção — a proporção das artes é 532/936. */
.mf-card__foto { width: 100%; aspect-ratio: 532 / 936; object-fit: cover; display: block; }
/* Troca de arte no hover: a segunda peça entra por cima da primeira. */
.mf-card__hover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s ease;
}
.mf-card a:hover .mf-card__hover,
.mf-card a:focus-visible .mf-card__hover { opacity: 1; }

/* Degradê do card montado (sem arte própria). Vai mais alto e mais escuro que
   a primeira versão: era ele que deixava o logotipo lavado sobre a fachada. */
.mf-card__marca {
  position: absolute; inset: auto 0 0 0; display: grid; place-items: center;
  gap: .5rem; padding: 5rem 1.25rem 2.25rem;
  background: linear-gradient(to top,
              rgba(7, 31, 55, .92) 0%, rgba(7, 31, 55, .72) 38%, transparent 100%);
  transition: opacity .25s ease;
}
.mf-card__marca img { width: min(62%, 190px); height: auto; display: block;
                      filter: brightness(0) invert(1); }
.mf-card__nome { color: #fff; font-size: 1.125rem; letter-spacing: .18em;
                 text-transform: uppercase; font-weight: 300; text-align: center; }
/* Segundo estado dos cards: em produção é a arte "01", a mesma foto sob véu
   navy com o endereço no centro. */
.mf-card__veu {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 2rem 1.5rem; text-align: center;
  background: rgba(7, 31, 55, .82);
  color: #fff; font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 300; line-height: 1.6;
  opacity: 0; transition: opacity .25s ease;
}
.mf-card a:hover .mf-card__veu, .mf-card a:focus-visible .mf-card__veu { opacity: 1; }
.mf-card a:hover .mf-card__marca, .mf-card a:focus-visible .mf-card__marca { opacity: 0; }
/* Em toque não existe hover: o endereço não pode ficar inalcançável. */
@media (hover: none) {
  .mf-card__veu { position: static; opacity: 1; background: var(--mf-navy-2);
                  padding: .9rem 1rem; font-size: 13px; letter-spacing: .1em; }
  .mf-card a:hover .mf-card__marca { opacity: 1; }
}

/* --- MF Personaliza ---
   O fundo é a textura, não uma cor chapada; a coluna de texto tem 380px em
   produção e fica à direita, com a foto do empreendimento na arte de fundo. */
.mf-personaliza {
  background: url("/assets/img/mf/textura.webp") center / cover no-repeat;
  color: #fff; padding-block: 4rem; min-height: 558px;
  display: grid; align-items: center;
}
/* Centralizado na seção, não encostado à direita: medido na produção — o
   centro do título cai exatamente no centro da faixa. A largura é 500px; os
   380px que eu tinha usado eram a medida do parágrafo, não da caixa. */
.mf-personaliza__caixa {
  width: min(500px, 100%); margin-inline: auto; text-align: center;
}
.mf-personaliza__logo { width: 300px; max-width: 100%; height: auto;
                        margin: 0 auto 1.5rem; display: block; }
.mf-personaliza__titulo {
  font-size: 17px; font-weight: 500; line-height: 24px;
  color: var(--mf-ouro-3); margin: 0 0 1rem;
}
.mf-personaliza__texto p { margin: 0 0 1.5rem; font-size: 15px; font-weight: 300;
                           line-height: 20px; color: #fff; }
/* Pílula sólida em areia clara com texto escuro — medido: raio 22px. */
.mf-botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 12px 24px; border: 0; border-radius: 22px;
  background: var(--mf-botao); color: var(--mf-botao-txt); text-decoration: none;
  font-size: 16px; font-weight: 700; line-height: 16px; text-transform: uppercase;
  transition: filter .2s ease;
}
.mf-botao:hover, .mf-botao:focus-visible { filter: brightness(1.06); color: var(--mf-botao-txt); }
.mf-personaliza__nota {
  margin: 1.25rem 0 0; font-size: 12px; font-weight: 400; line-height: 14px;
  color: var(--mf-ouro-3);
}

/* --- Diferenciais --- */
.mf-difs { background: var(--mf-areia); padding-block: 4rem; min-height: 565px; }
.mf-difs .container { max-width: var(--mf-larg); }
.mf-difs__trilho { list-style: none; margin: 0; padding: 0; }
/* Alinhado à esquerda, não centralizado: medido text-align start. */
.mf-dif { flex: 0 0 min(100%, 20rem); scroll-snap-align: start;
          text-align: left; padding: 1rem 1.5rem; }
.mf-dif__icone { display: block; margin: 0 0 1.25rem; width: 56px; height: 56px; }
.mf-dif__titulo {
  font-size: 18px; font-weight: 700; letter-spacing: 1.44px; line-height: 25.2px;
  text-transform: uppercase; color: var(--mf-ouro); margin: 0 0 .75rem;
}
.mf-dif__texto { font-size: 14px; font-weight: 400; line-height: 23.8px;
                 color: var(--mf-cinza); margin: 0; max-width: 280px; }
@media (min-width: 60rem) {
  .mf-difs .carrossel { padding-inline: 3.5rem; }
  .mf-difs .carrossel__seta--ant  { left: 0; }
  .mf-difs .carrossel__seta--prox { right: 0; }
}

/* --- Linha do tempo (mesmo partial da /empresa/, no desenho da MF) ---
   A /empresa/ deitou a régua embaixo do cartão, em azul; na /mf/ ela fica
   como na produção: em pé à direita do cartão, fio e anos em ouro, sem
   bolinhas, ano ativo numa caixa com borda. Medido em 17/10/2026 a 1440px
   (CSS do widget da produção): wrapper 1140, régua 90px com 110px
   reservados, cartão 660px de altura em #F2EEE7, foto 468px, logo 180px,
   texto 18/1.7 em #57636F, botão #002D54. Abaixo de 860px os anos viram uma
   linha centralizada embaixo do cartão, sem fio nem tracinho. */
.pagina-mf .empresa-tempo { background: var(--mf-navy-2); --mf-papel: #F2EEE7; --mf-navy: #002D54;
                            --mf-texto: #57636F; --mf-cobre: var(--mf-ouro-2); }
.pagina-mf .empresa-tempo .titulo-secao:empty { display: none; }
.pagina-mf .empresa-tempo .container { max-width: var(--mf-larg-2); }
.pagina-mf .mf__seta { display: none; }   /* a produção não tem setas aqui */
.pagina-mf .mf__regua { -webkit-mask-image: none; mask-image: none; overflow: visible; }
.pagina-mf .mf__ano {
  min-width: 0; padding: 0 0 0 18px; border-top: 0;
  font-size: 15px; font-weight: 400; line-height: 1; text-align: left;
}
.pagina-mf .mf__ano::after { display: none; }   /* sem bolinha */
.pagina-mf .mf__ano:hover, .pagina-mf .mf__ano:focus-visible,
.pagina-mf .mf__ano.e-ativo { color: var(--mf-ouro-2); }
/* Na MF o ano repetido aparece escrito (2021 e 2021): só o nome do marco
   continua escondido para leitor de tela. */
.pagina-mf .mf__ano--repete > .sr-only:first-child {
  position: static; width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
}
.pagina-mf .mf__ano.e-ativo > span:first-child {
  display: inline-block; border: 1.5px solid var(--mf-ouro-2); padding: 5px 12px;
}
.pagina-mf .mf__texto p { font-size: 18px; line-height: 1.7; margin-bottom: 32px; max-width: 400px; }
.pagina-mf .mf__botao { font-size: 18px; }
/* Cartão de 660px: cabe o texto inteiro, sem o corte em 4 linhas da /empresa/. */
.pagina-mf .mf.e-pilha .mf__texto p { display: block; -webkit-line-clamp: unset; line-clamp: none; }

@media (min-width: 861px) {
  .pagina-mf .empresa-tempo { --mf-altura: 660px; }
  .pagina-mf .mf { padding-right: 110px; }
  .pagina-mf .mf__texto { padding: 60px 50px 60px 60px; }
  .pagina-mf .mf__logo { width: 180px; height: auto; margin-bottom: 32px; }
  .pagina-mf .mf__foto { width: 468px; }
  .pagina-mf .mf__navega {
    position: absolute; top: 0; right: 0; height: 100%; width: 90px; margin: 0; display: block;
  }
  .pagina-mf .mf__regua {
    height: 100%; flex-direction: column; justify-content: space-between; padding: 20px 0;
  }
  .pagina-mf .mf__linha {
    display: block; position: absolute; left: 0; top: 20px; bottom: 20px;
    width: 1.5px; background: var(--mf-ouro-2);
  }
  .pagina-mf .mf__ano::before, .pagina-mf .mf__ano--repete::before {
    display: block; left: 0; top: 50%; width: 14px; height: 1.5px; transform: translateY(-50%);
    background: var(--mf-ouro-2);
  }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .pagina-mf .mf__foto { width: 340px; }
  .pagina-mf .mf__texto { padding: 50px 40px 50px 50px; }
}
@media (max-width: 860px) {
  .pagina-mf .mf__navega { display: block; margin-top: 8px; }
  .pagina-mf .mf__regua { flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 14px 16px; }
  .pagina-mf .mf__ano { padding: 0; font-size: 13px; }
  .pagina-mf .mf__ano::before { display: none; }
  .pagina-mf .mf__ano.e-ativo > span:first-child { padding: 4px 10px; }
  .pagina-mf .mf__texto p { font-size: 16px; max-width: 100%; }
  .pagina-mf .mf__botao { font-size: 16px; }
}

/* Quem pediu menos movimento no sistema vê o quadro parado e dá play se
   quiser — quem tira o autoplay é o JS. */

/* --- Fale com um consultor ---
   Medidas da produção: colunas de 524px com um fio de 31px entre elas, campos
   de 504×40 com borda em petróleo sobre a própria areia, botão da mesma
   largura. O petróleo #387488 só existe nesta faixa. */
.mf-contato { background: var(--mf-areia); padding-block: 3.5rem; }
.mf-contato .container { max-width: var(--mf-larg-2); }
.mf-contato__grade { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) {
  .mf-contato__grade { grid-template-columns: 524px 524px; justify-content: center; gap: 31px; }
  .mf-contato__grade > * { padding-inline: 10px; }
}
/* O separador é a arte `linha.png` na produção — um fio de 2px. Como é
   decoração pura, aqui é borda: uma imagem a menos para carregar. */
/* O fio vertical acompanha a altura do formulário (209px em produção), não a
   da seção inteira: por isso vive na coluna e não entre elas. */
@media (min-width: 60rem) {
  .mf-contato__dados { border-left: 1px solid var(--mf-ouro); padding-left: 2rem; }
}

/* Faixa própria, com o fio atravessando o que sobra da largura. */
.mf-contato__titulo { color: var(--mf-verde); display: flex; align-items: center;
                      gap: 1.5rem; white-space: nowrap; margin-bottom: 1.25rem;
                      padding-inline: 10px; }
.mf-contato__titulo::after {
  content: ""; flex: 1; height: 1px; background: var(--mf-ouro); opacity: .6;
}
/* Celular: "FALE COM UM CONSULTOR" em uma linha só não cabia (a /mf/ rolava
   24px para o lado); aqui quebra e o fio dourado fica com o que sobra. */
@media (max-width: 30rem) {
  .mf-contato__titulo { white-space: normal; gap: 1rem; }
  .mf-contato__titulo::after { min-width: 2.5rem; }
}

.mf-form { display: grid; gap: 12px; }
.mf-form__campo {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--mf-petroleo); border-radius: 3px;
  background: var(--mf-areia); color: #524F4F;
  font-family: inherit; font-size: 15px; font-weight: 400; line-height: 1.4;
}
.mf-form__campo::placeholder { color: #8A8785; }
.mf-form__campo:focus { outline: 2px solid var(--mf-petroleo); outline-offset: 1px; }
.mf-form__enviar {
  width: 100%; height: 40px; border: 0; border-radius: 3px;
  background: var(--mf-petroleo); color: var(--mf-areia);
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: filter .18s ease;
}
.mf-form__enviar:hover { filter: brightness(1.12); }
/* Uma linha, discreta, porque a lei pede e /lead/ recusa o envio sem ela. */
.mf-form__consent { display: flex; gap: .5rem; align-items: flex-start;
                    font-size: 12px; line-height: 1.5; color: #6B6764; }
.mf-form__consent input { margin-top: 2px; accent-color: var(--mf-petroleo); }
.mf-form__consent a { color: var(--mf-petroleo); }

.mf-contato__dados { margin: 0; font-size: 15px; line-height: 1.75; color: #524F4F; }
.mf-contato__dados dt { color: #524F4F; font-weight: 700; margin-top: 1.5rem; }
.mf-contato__dados dt:first-child { color: var(--mf-petroleo); font-size: 17px;
                                    font-weight: 900; margin-top: 0; }
.mf-contato__dados dd { margin: 0; }
.mf-contato__dados a { color: var(--mf-petroleo); text-decoration: none; font-weight: 700; }
.mf-contato__dados a:hover { text-decoration: underline; }
.mf-contato__endereco { margin-top: 1rem; }

/* Páginas legadas refeitas em HTML (sql/paginas-legado.sql). */
.artigo-corpo .galeria-obra {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin: 0 0 2rem;
}
.artigo-corpo .galeria-obra img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; margin: 0;
}
.artigo-corpo .paginas-documento img {
  width: 100%; height: auto; display: block; margin: 0 0 16px;
  border-radius: 6px; box-shadow: 0 2px 14px rgba(0, 0, 45, .08);
}

/* ---------------------------------------------------------------
   /unimedcomercial/ — cópia da página Elementor do site antigo.
   Valores medidos com getComputedStyle em produção (2026-10-16):
   topo 656px com a imagem em 100% de largura presa embaixo; título
   Noto Sans 32/32 peso 200 #000056; filete 7% × 1px #616569; abas
   Roboto 19px #A9ACAF (ativa #1F6BC7) com 7×14 de respiro; grade de
   6 colunas, 10px, células 3:2; 2 colunas no tablet e 1 no celular.
   --------------------------------------------------------------- */
.unimed-hero {
  height: 656px; padding: 0 10px;
  background: url("/uploads/2024/12/unimed_cam02_fn02.RGB_color.0000-1536x853.jpg")
              50% 100% / 100% auto no-repeat;
  margin-bottom: 33px;
}
.galeria-mensal { max-width: 1140px; margin: 0 auto 100px; padding: 10px; }
.galeria-mensal__titulo {
  font-family: "Noto Sans", sans-serif; font-size: 32px; line-height: 32px; font-weight: 200;
  color: #000056; margin: 0; text-transform: none; letter-spacing: normal;
}
.galeria-mensal__linha { display: block; width: 7%; border-top: 1px solid #616569; margin: 5px 0 35px; }
.galeria-mensal__meses { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 20px; }
.galeria-mensal__mes {
  font-family: Roboto, "Noto Sans", sans-serif; font-size: 19px; line-height: 28.5px; font-weight: 400;
  color: #A9ACAF; background: none; border: 0; padding: 7px 14px; margin: 0 10px 0 0; cursor: pointer;
  transition: color .2s ease;
}
.galeria-mensal__mes:hover, .galeria-mensal__mes:focus-visible, .galeria-mensal__mes.e-ativo { color: #1F6BC7; }
.galeria-mensal__grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.galeria-mensal__item { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.galeria-mensal__item[hidden] { display: none; }
.galeria-mensal__item img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
@media (max-width: 1024px) { .galeria-mensal__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .galeria-mensal__grade { grid-template-columns: 1fr; } }

/* Lightbox da galeria mensal (o do Elementor: fundo preto 80%, contador,
   setas e legenda). Classe própria `lbx`: `.lightbox` é o da galeria dos
   empreendimentos, e reaproveitar o nome quebrava os dois. */
.lbx { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
       margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .8); color: #fff; }
.lbx[open] { display: flex; align-items: center; justify-content: center; }
.lbx::backdrop { background: transparent; }
.lbx__img { display: block; max-width: calc(100% - 140px); max-height: calc(100% - 110px);
            width: auto; height: auto; object-fit: contain; }
.lbx__contador { position: absolute; top: 14px; left: 18px; font-size: 14px; opacity: .9; }
.lbx__legenda { position: absolute; bottom: 18px; left: 0; right: 0; margin: 0; text-align: center; font-size: 14px; }
.lbx button { position: absolute; background: none; border: 0; color: rgba(255,255,255,.9); cursor: pointer;
              font-size: 34px; line-height: 1; padding: 10px; }
.lbx button:hover { color: #fff; }
.lbx__fechar { top: 6px; right: 12px; }
.lbx__ant { left: 10px; top: 50%; transform: translateY(-50%); }
.lbx__prox { right: 10px; top: 50%; transform: translateY(-50%); }

/* ---------- Fim do artigo: compartilhar, empreendimentos citados, continue lendo ---------- */
.artigo-corpo a.mencao { color: var(--azul); text-decoration: underline; text-decoration-thickness: 1px;
                         text-underline-offset: 3px; font-weight: 500; }
.artigo-fim {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem;
  max-width: 68ch; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linha);
}
.compartilhar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.compartilhar__rotulo { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
                        color: var(--texto-fraco); margin-right: .25rem; }
.compartilhar__botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 42px; height: 42px; padding: 0 .65rem; border-radius: 999px;
  border: 1px solid var(--linha); background: #fff; color: var(--navy-900);
  font: inherit; font-size: .875rem; cursor: pointer; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.compartilhar__botao:hover, .compartilhar__botao:focus-visible {
  background: var(--navy-900); border-color: var(--navy-900); color: #fff;
}
.artigo-citados__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem;
                         margin-top: 1.5rem; }
.citado { display: flex; flex-direction: column; background: #fff; text-decoration: none; color: inherit;
          border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 45, .06);
          transition: transform .2s ease, box-shadow .2s ease; }
.citado:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0, 0, 45, .12); }
.citado__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; border-radius: 0; }
.citado__corpo { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.25rem; }
.citado__logo { height: 56px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; margin: 0; }
.citado__nome { font-size: 1.15rem; color: var(--navy-900); }
.citado__resumo { color: var(--texto-fraco); font-size: .9375rem; line-height: 1.5; }
.artigo-relacionados .cards-blog { margin-top: 1.5rem; }

/* ---------- Cabeçalho do artigo ---------- */
.artigo-topo {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(340px, 42vw, 520px); background: var(--navy-900); color: #fff; overflow: hidden;
}
.artigo-topo--sem-foto { min-height: 260px; }
.artigo-topo__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.artigo-topo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,45,.92) 0%, rgba(0,0,45,.6) 45%, rgba(0,0,45,.2) 100%);
}
.artigo-topo__conteudo { position: relative; z-index: 1; padding-top: 3rem; padding-bottom: 2.75rem; }
.artigo-topo__migalhas { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
                          font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
                          margin-bottom: 1rem; color: rgba(255,255,255,.8); }
.artigo-topo__migalhas a { color: inherit; text-decoration: none; transition: color .2s ease;
                            display: inline-block; padding-block: .3rem; }
.artigo-topo__migalhas a:hover, .artigo-topo__migalhas a:focus-visible { color: #fff; }
/* O "›" do HTML vira o mesmo traço fino das outras migalhas. */
.artigo-topo__migalhas > span { width: 14px; height: 1px; background: currentColor; opacity: .6; font-size: 0; }
.artigo-topo__titulo {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); font-weight: 200; line-height: 1.1;
  color: #fff; margin: 0 0 1rem; max-width: 26ch;
}
.artigo-topo__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; font-size: .9375rem;
                     color: rgba(255,255,255,.85); }
.artigo { padding-top: 2.5rem; }
.artigo-relacionados__topo { display: flex; align-items: center; justify-content: space-between;
                             flex-wrap: wrap; gap: 1rem; }
.artigo-relacionados__topo .titulo-secao { margin: 0; }

/* ---------- Páginas de artigo (/alto-padrao/, /parque-do-povo/…) ----------
   Padrão do site antigo (Elementor), medido em produção a 1440 px. */
.pa-container { width: min(100% - 32px, 1140px); margin-inline: auto; }
.pa-h2 { font-size: 32px; line-height: 1.2; font-weight: 500; color: #000056;
         text-align: center; margin: 8px 0 16px; }
.pa-h2--branco { color: #fff; }
/* Posts do blog sobre o tema do pilar (antes das perguntas frequentes). */
.pa-artigos { padding: 64px 0; background: #fff; }
.pa-artigos .pa-h2 { margin-bottom: 32px; }
.pa-artigos__mais { margin: 28px 0 0; }

/* cover e não contain (18/10/2026): em tela maior que a arte (1638px) o
   contain deixava faixas azuis nas laterais. As artes têm o véu no
   arquivo e o assunto no centro, então o corte nas bordas não perde nada. */
.pa-hero { background: #000056 center / cover no-repeat; min-height: min(763px, 53vw);
           display: flex; align-items: center; color: #fff; padding: 60px 0; }
.pa-hero .pa-container { padding-inline: 10px; }
.pa-hero__titulo { font-size: 59px; line-height: 53px; font-weight: 600; max-width: 664px;
                   margin: 0 0 20px; color: #fff; }
.pa-hero__sub { font-size: 16px; line-height: 24px; max-width: 600px; margin: 0 0 30px; }
.pa-hero__botoes { display: flex; flex-wrap: wrap; gap: 20px; }
.pa-botao { display: inline-flex; align-items: center; justify-content: center; text-align: center;
            width: 228px; min-height: 60px; font-size: 17px; font-weight: 300; line-height: 18px;
            padding: 12px 24px; border: 1px solid #fff; border-radius: 3px; color: #fff;
            text-decoration: none; transition: background .2s, color .2s; }
.pa-botao:hover { background: #fff; color: #000056; }
.pa-botao--cheio { background: #fff; color: #000056; }
.pa-botao--cheio:hover { background: transparent; color: #fff; }

.pa-intro { padding: 92px 0; text-align: center; }
.pa-divisor { display: block; width: 68px; height: 2px; background: #060A8B; margin: 0 auto 40px; }
.pa-intro p { font-size: 21px; line-height: 25px; font-weight: 300; color: #858585; margin: 0; }

.pa-cinza { background: #F0F0F0; padding: 60px 0 58px; }
.pa-cinza .pa-h2 { margin-bottom: 52px; }
.pa-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-inline: 10px; }
.pa-colunas p { font-size: 18px; line-height: 25px; font-weight: 300; color: #000056; margin: 0; }

.pa-secao { padding: 60px 0 112px; }
.pa-secao .pa-h2 { margin-bottom: 52px; }
.pa-secao--publico { padding-bottom: 82px; }
.pa-icones { display: grid; justify-content: center; text-align: center; }
.pa-icones--4 { grid-template-columns: repeat(4, 205px); column-gap: 80px; }
.pa-icones--3 { grid-template-columns: repeat(3, 360px); column-gap: 20px; }
.pa-icone__img { display: block; font-size: 50px; line-height: 1; color: #060A8B; margin-bottom: 15px; }
.hm { height: 1em; width: auto; display: inline-block; vertical-align: top; }
.pa-icone h3 { font-size: 18px; line-height: 21.6px; font-weight: 700; color: #060A8B; margin: 8px 0 16px; }
.pa-icone p { font-size: 16px; line-height: 24px; color: #898989; margin: 0; }

.pa-escuro { position: relative; background: #090A34 center / cover no-repeat fixed; padding: 75px 0 115px; }
.pa-escuro::before { content: ""; position: absolute; inset: 0;
                     background: linear-gradient(180deg, #041E46, #090A34); opacity: .75; }
.pa-escuro > * { position: relative; }
.pa-escuro .pa-h2 { margin-bottom: 76px; }
.pa-cards { display: grid; grid-template-columns: repeat(4, 265px); justify-content: center; gap: 20px; }
.pa-card { background: #fff; padding: 30px; }
.pa-card h3 { font-size: 18px; line-height: 21.6px; font-weight: 700; color: #060A8B; margin: 8px 0 16px; }
.pa-card p { font-size: 16px; line-height: 24px; color: #898989; margin: 0; }
.pa-passos { list-style: none; margin: 0; padding: 0; display: grid;
             grid-template-columns: repeat(4, 265px); justify-content: center; gap: 20px; }
.pa-passos li { position: relative; text-align: center; color: #fff; padding: 0 25px; }
.pa-passos__num { display: inline-flex; align-items: center; justify-content: center;
                  width: 70px; height: 70px; border: 1px solid #fff; border-radius: 50%;
                  background: #000056; font-size: 27px; font-weight: 300; margin: 8px 0 27px; }
.pa-passos li:not(:last-child)::after { content: ""; position: absolute; top: 43px; left: calc(50% + 57px);
                  width: 33px; border-top: 1px solid #ddd; }
.pa-passos li:not(:last-child)::before { content: ""; position: absolute; top: 39px; left: calc(50% + 81px);
                  width: 8px; height: 8px; border-top: 1px solid #ddd; border-right: 1px solid #ddd;
                  transform: rotate(45deg); }
.pa-passos h3 { font-size: 20px; line-height: 24px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.pa-passos p { font-size: 14px; line-height: 21px; font-weight: 300; margin: 0; }

.pa-destaque { background: #000056; color: #fff; padding: 50px 0; }
.pa-destaque .pa-container { display: flex; gap: 15px; align-items: flex-start; }
.pa-destaque__img { font-size: 50px; line-height: 1; flex: none; }
.pa-destaque h2 { font-size: 28px; line-height: 33.6px; font-weight: 500; color: #fff; margin: 8px 0 15px; }
.pa-destaque p { font-size: 16px; line-height: 24px; margin: 0; }

.pa-relacionados { background: #2A63DE; padding: 58px 0 54px; scroll-margin-top: 80px; }
.pa-relacionados .pa-h2 { margin-bottom: 40px; }
.pa-rel { display: flex; flex-wrap: wrap; justify-content: center; }
.pa-rel__item { position: relative; width: 285px; height: 392px; padding: 10px; display: flex;
                flex-direction: column; justify-content: space-between; align-items: flex-start;
                background: center / cover no-repeat; background-clip: content-box;
                text-decoration: none; }
.pa-rel__item::after { content: ""; position: absolute; inset: 10px; pointer-events: none;
                       background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.65)); }
.pa-rel__tipo { position: relative; z-index: 1; margin: 20px; font-size: 13px; line-height: 1;
                padding: 12px 24px; border-radius: 3px; background: #060A8B; color: #fff; }
.pa-rel__nome { position: relative; z-index: 1; margin: 20px; font-size: 14px; font-weight: 500;
                color: #fff; text-transform: uppercase; }
.pa-rel__vazio a { color: #fff; }
.pa-rel__mais { text-align: center; margin: 36px 0 0; }

.pa-nav { background: #2A63DE; min-height: 72px; padding: 10px max(16px, calc((100% - 1140px) / 2));
          display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
          gap: 4px; border-top: 1px solid rgba(255,255,255,.2); }
.pa-nav a { min-height: 48px; padding: 10px 18px; display: inline-flex; align-items: center;
            justify-content: center; border-radius: 3px; font-size: 15px; line-height: 1.2;
            text-align: center; color: #fff; text-decoration: none;
            transition: background .2s, color .2s; }
.pa-nav a:hover, .pa-nav a:focus-visible, .pa-nav a[aria-current] {
  background: #000056; color: #EBF0F5;
}

@media (max-width: 1100px) {
  .pa-icones--4, .pa-cards, .pa-passos { grid-template-columns: repeat(2, minmax(0, 300px)); row-gap: 40px; }
  .pa-icones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pa-passos li::before, .pa-passos li::after { display: none; }
  .pa-escuro { background-attachment: scroll; }
}
@media (max-width: 760px) {
  .pa-hero { background-size: cover; min-height: 520px; }
  .pa-hero__titulo { font-size: 38px; line-height: 1.1; }
  .pa-intro { padding: 50px 0; }
  .pa-intro p { font-size: 18px; }
  .pa-h2 { font-size: 26px; }
  .pa-colunas, .pa-icones--4, .pa-icones--3, .pa-cards, .pa-passos { grid-template-columns: 1fr; }
  .pa-rel { justify-content: center; }
  .pa-rel__item { width: 100%; max-width: 320px; }
  .pa-nav { padding-block: 12px; gap: 6px; }
  .pa-nav a { flex: 1 1 calc(50% - 6px); padding-inline: 10px; }
}

/* Perguntas frequentes das landings (views/partials/faq.php): <details>
   nativo, sem JS; o "+" vira "−" quando abre. */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--linha); padding: 1.1rem 0; }
.faq details:first-child { border-top: 1px solid var(--linha); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  gap: 1rem; font-weight: 600; color: var(--navy-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--azul); font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: .75rem 0 0; color: var(--texto); }

/* ============================================================
   LGPD e políticas — cópia fiel da produção (Elementor 3897 e 1287),
   medidas com getComputedStyle a 1440px em 17/10/2026. Cores e fonte do
   kit do Elementor: texto #524F4F, primária #060A8B, realce #2A63DE,
   links #0DC8FF, Noto Sans.
   ============================================================ */
.lgpd-container, .politica__container { width: min(100% - (var(--gutter) * 2), 1140px); margin-inline: auto; }
.lgpd-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: #2A63DE; color: #fff; border-radius: 3px; text-decoration: none;
  font-size: 15px; font-weight: 500; text-transform: uppercase; line-height: 1;
  transition: background-color .2s;
}
.lgpd-botao:hover, .lgpd-botao:focus-visible { background: #000056; color: #fff; }

/* Topo: arte do escudo em tamanho natural sobre o navy #00003F. Na produção
   o topo tem 761px contando o cabeçalho (100px), que lá fica por cima. */
.lgpd-hero { background: #00003F center / auto no-repeat; color: #fff; min-height: 661px; padding: 110px 0 60px; }
.lgpd-hero__titulo { font-size: 44px; line-height: 39px; font-weight: 400; text-transform: uppercase;
                     color: #fff; margin: 0 0 48px; }
.lgpd-hero__titulo strong { font-weight: 700; }
.lgpd-hero__texto { max-width: 516px; margin-left: 10px; font-size: 16px; line-height: 24px; font-weight: 300; }
.lgpd-hero__texto p { margin: 0 0 14.4px; }
.lgpd-hero__texto strong { font-weight: 700; }
.lgpd-botao--hero { margin: 20px 0 0 12px; padding: 12px 24px; min-width: 290px; min-height: 39px; }

.lgpd-adequacao { padding: 60px 0 28px; }
.lgpd-h2 { font-size: 32px; font-weight: 500; line-height: 1.2; color: #060A8B; text-align: center;
           text-transform: uppercase; margin: 0 0 32px; }
.lgpd-texto { font-size: 16px; line-height: 27px; font-weight: 400; color: #524F4F; text-align: justify; }
.lgpd-texto p { margin: 0 0 14.4px; }
.lgpd-texto a, .politica__texto a { color: #0DC8FF; }

/* Quatro botões de 270x80 com 20px entre eles: 4 / 2 / 1 por linha, como o
   custom_css da página na produção. */
.lgpd-documentos { padding: 20px 0 80px; }
.lgpd-documentos__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lgpd-botao--doc { min-height: 80px; padding: 0 16px; text-align: center; }
.lgpd-duvidas { background: linear-gradient(#163474 0%, #000056 100%); min-height: 193px;
                display: flex; align-items: center; color: #fff; text-align: center; }
.lgpd-duvidas__titulo { font-size: 35px; font-weight: 500; text-transform: uppercase; color: #fff; margin: 0; }

/* Políticas: sem faixa de título; texto na largura do container (1080px). */
.politica { padding: 50px 0 50px; background: #fff; }
/* O container do Elementor tem 10px de recuo: texto começa em x=180 a 1440px. */
.politica__container { padding-inline: 10px; }
.politica__texto { margin: 0 20px; font-size: 16px; line-height: 24px; font-weight: 200; color: #524F4F; }
.politica__texto p { margin: 0 0 14.4px; }
.politica__texto strong { font-weight: 400; }
.politica__texto h1 { font-size: 40px; line-height: 1.2; font-weight: 500; color: #524F4F; margin: 0 0 8px; }
.politica__texto h1 strong { font-weight: 700; }
.politica__texto h2, .politica__texto h3, .politica__texto h4, .politica__texto h5 {
  font-size: 16px; font-weight: 400; color: #524F4F; margin: 24px 0 0; }
.politica__texto ul, .politica__texto ol { margin: 0 0 14.4px; padding-left: 40px; }
.politica hr, .politica__texto hr { border: 0; border-top: 1px dotted #060A8B; margin: 15px 0; }
.politica__voltar { text-align: center; margin: 15px 0 0; }
.politica__voltar .lgpd-botao { height: 44px; min-width: 220px; padding: 0 24px; font-weight: 400;
                                text-transform: none; }

@media (max-width: 1024px) {
  .lgpd-documentos__grade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .lgpd-hero { min-height: 0; padding: 60px 0; background-size: cover; }
  .lgpd-hero__titulo { font-size: 32px; line-height: 1.1; margin-bottom: 28px; }
  .lgpd-hero__texto { margin-left: 0; }
  .lgpd-botao--hero { margin-left: 0; min-width: 0; }
  .lgpd-documentos__grade { grid-template-columns: 1fr; }
  .lgpd-h2 { font-size: 24px; }
  .lgpd-texto { text-align: left; }
  .lgpd-duvidas__titulo { font-size: 26px; }
  .politica__texto { margin: 0; }
  .politica__texto h1 { font-size: 30px; }
}

/* Post do blog: coluna de 892px (largura do texto do post na produção),
   centralizada junto com o título — antes 68ch deixava meia tela vazia. */
.artigo > .container,
.artigo-topo__conteudo.container { width: min(100% - (var(--gutter) * 2), 892px); }
.artigo .artigo-corpo { max-width: none; }
.artigo-topo__titulo { max-width: none; }
/* Página institucional comum: texto na largura do container. */
.artigo-corpo--largo { max-width: none; }

/* Cards do blog no padrão do .card dos empreendimentos: canto de 10px,
   sombra leve, foto encostada na borda e texto com respiro. */
.card-artigo { border: 0; border-radius: var(--raio); overflow: hidden; background: #fff;
               box-shadow: 0 1px 3px rgba(0, 0, 90, .08); transition: box-shadow .2s, transform .2s; }
.card-artigo:hover { box-shadow: 0 8px 24px rgba(0, 0, 90, .14); transform: translateY(-2px); }
.card-artigo a { padding: 0; height: 100%; display: flex; flex-direction: column; }
.card-artigo img { margin: 0; border-radius: 0; display: block; }
.card-artigo h2, .card-artigo h3 { margin: 1.1rem 1.25rem .5rem; }
.card-artigo time { display: block; margin: auto 1.25rem 1.25rem; }

/* Itens com link na faixa escura (passos e cards) — o guia de compra usa os
   passos como índice da série. Fileira de 4: a seta do último de cada linha
   não aponta para nada, então some. */
.pa-passos h3 a, .pa-card h3 a { color: inherit; text-decoration: none; }
.pa-passos h3 a:hover, .pa-card h3 a:hover { text-decoration: underline; }
.pa-passos li:nth-child(4n)::after, .pa-passos li:nth-child(4n)::before { display: none; }
.pa-passos { row-gap: 40px; }

/* Botão de CTA dentro de texto (corpo das landings): .artigo-corpo a pinta
   link de azul, o que deixaria o texto do botão azul sobre azul. */
.artigo-corpo a.botao { color: #fff; text-decoration: none; }
/* Título das perguntas na mesma coluna da lista. */
.faq-secao .titulo-secao { max-width: 860px; margin-inline: auto; }

/* ---------- Página de campanha (src/campanhas.php, out/18) ----------
   Linguagem das /materiais/ que funcionam (foto grande, formulário à vista,
   chamada curta), com as peças do site: selo de fase e selos de metragem da
   capa do empreendimento, .form/.campo, botões. Sem menu (cabeçalho enxuto). */
.cabecalho--enxuto .cabecalho__linha { justify-content: center; min-height: 72px; }
.cabecalho--enxuto .cabecalho__marcas { gap: 1.25rem; }
.rodape--enxuto { padding: 1.5rem 0; }
.rodape__enxuto { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center;
                  justify-content: space-between; font-size: .8125rem; }
.rodape__enxuto p { margin: 0; }
.rodape__enxuto ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }

.campanha-previa { margin: 0; padding: .6rem 1rem; background: #FFF4D6; color: #6B4E00;
                   font-size: .875rem; text-align: center; }
.campanha-topo { position: relative; isolation: isolate; background: var(--navy-900); color: #fff; overflow: hidden; }
.campanha-topo__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.campanha-topo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,90,.88) 0%, rgba(0,0,90,.62) 55%, rgba(0,0,90,.35) 100%); }
.campanha-topo__grade { display: grid; gap: 2rem; padding-block: clamp(2rem, 6vw, 4.5rem);
                        grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 62rem) {
  .campanha-topo__grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3.5rem; }
}
.campanha-topo__logo { display: block; width: auto; max-width: 260px; max-height: 110px; height: auto; margin-bottom: 1.25rem;
                       /* Logo chega escura (como na capa do empreendimento): branca sobre a foto. */
                       filter: brightness(0) invert(1); }
.campanha-topo__chamada { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 300; line-height: 1.15;
                          text-transform: uppercase; color: #fff; margin: 0 0 1rem; }
.campanha-topo__intro { font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,.92); margin: 0 0 1.25rem; max-width: 46ch; }
.campanha-form { background: #fff; color: var(--texto); border-radius: var(--raio-lg, 12px);
                 padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 18px 50px rgba(0,0,40,.35); }
.campanha-form__titulo { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; color: var(--navy-900); }
.campanha-form .campo > label small { font-weight: 400; color: var(--texto-fraco); }
.campanha-destaques__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
                             grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campanha-destaques__lista li { position: relative; padding: 1rem 1rem 1rem 2.75rem; background: var(--gelo);
                                border-radius: var(--raio); line-height: 1.45; }
.campanha-destaques__lista li::before { content: ""; position: absolute; left: 1rem; top: 1.15rem; width: 1rem; height: .55rem;
  border-left: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(-45deg); }
.campanha-fotos { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.campanha-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); }
.campanha-final { text-align: center; }
.campanha-final__endereco { color: var(--texto-fraco); margin: 0 0 1.25rem; }
.campanha-obrigado { text-align: center; min-height: 50vh; display: grid; align-content: center; }
.campanha-obrigado__texto { max-width: 52ch; margin: 0 auto 1.75rem; font-size: 1.0625rem; line-height: 1.6; }
.campanha-obrigado__acoes { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---------- /personaliza/ (views/personaliza.php) ----------
   Medido na produção a 1440px em 18/10/2026: Noto Sans, títulos peso 100 em
   caixa alta espaçada; azul-petróleo #143450, ouro #C6AA81, areia #EDE8DC,
   caramelo #D3AC84; faixa escura em gradiente radial do canto superior
   direito. Botão pílula #143450. */
.mfp-container { width: min(1140px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.mfp-h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.375rem); font-weight: 100; letter-spacing: .14em; line-height: 1.3;
          text-transform: uppercase; color: #143450; text-align: center; margin: 0 0 1.25rem; }
.mfp-h2--ouro { color: #C6AA81; }
.mfp-p { font-size: clamp(1.0625rem, .9rem + .7vw, 1.625rem); font-weight: 300; line-height: 1.5; color: #143450;
         text-align: center; margin: 0 0 1.5rem; }
.mfp-p--largo { letter-spacing: .05em; }
.mfp-botao { display: inline-block; background: #143450; color: #fff; border-radius: 41px; padding: 15px 30px;
             font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 300; line-height: 1.3; text-decoration: none;
             text-align: center; transition: background .2s ease; }
.mfp-botao:hover, .mfp-botao:focus-visible { background: #0E3754; color: #fff; }
.mfp-topo { background-size: cover; background-position: 50% 100%; min-height: clamp(260px, 34.6vw, 498px);
            display: flex; align-items: center; }
.mfp-topo__logo { width: clamp(240px, 35vw, 504px); height: auto; display: block; }
.mfp-chamada { background-color: #F3F0EA; background-size: cover; background-position: 50% 100%;
               padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(14rem, 27vw, 24.2rem); }
.mfp-chamada__grade { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .mfp-chamada__grade { grid-template-columns: 22% minmax(0, 1fr); }
                            .mfp-chamada__texto { grid-column: 2; } }
.mfp-h2--chamada { letter-spacing: .2em; }
.mfp-fio { display: block; width: 144px; height: 2px; background: #C6AA81; margin: 0 auto 1.75rem; }
.mfp-vantagens { list-style: none; margin: 1rem 0 2.5rem; padding: 0; display: grid; gap: 1.5rem;
                 grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.mfp-vantagens img { height: 74px; width: auto; margin: 0 auto .75rem; display: block; }
.mfp-vantagens h3 { font-size: clamp(1rem, .85rem + .6vw, 1.5625rem); font-weight: 300; line-height: 1.25; color: #143450; margin: 0; }
.mfp-chamada__texto > p:last-child { text-align: center; }
.mfp-escuro { background: radial-gradient(at 100% 0%, #315D72 0%, #0E3754 77%); color: #fff;
              padding: clamp(3.5rem, 11vw, 10.25rem) 0; text-align: center; }
.mfp-seta { color: #C6AA81; display: block; margin: 0 auto 2.5rem; }
.mfp-linhas { margin: 0; }
.mfp-linhas > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem;
                    padding: 1.75rem 0; align-items: center; }
.mfp-linhas > div + div { border-top: 1px solid #C6AA81; }
.mfp-linhas dt { font-size: clamp(1.0625rem, .9rem + .7vw, 1.625rem); font-weight: 600; line-height: 1.5; }
.mfp-linhas dd { margin: 0; font-size: clamp(1.0625rem, .9rem + .7vw, 1.625rem); font-weight: 300; line-height: 1.5; text-align: left; }
.mfp-areia { background: #EDE8DC; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.mfp-areia .mfp-h2 { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); }
.mfp-padrao { height: 90px; background-repeat: repeat; background-size: auto; background-position: 50% 50%; }
.mfp-caramelo { background: #D3AC84; padding: clamp(3rem, 6vw, 6rem) 0; text-align: center; }
.mfp-prazo { font-size: clamp(1rem, .9rem + .5vw, 1.375rem); font-weight: 300; color: #143450; margin: 0 0 2rem; }
.mfp-fim { background: radial-gradient(at 100% 0%, #315D72 0%, #0E3754 77%); padding: 7.8rem 1rem; text-align: center; }
.mfp-fim img { width: 250px; height: auto; margin: 0 auto; display: block; }
@media (max-width: 40rem) {
  .mfp-vantagens { grid-template-columns: minmax(0, 1fr); }
  .mfp-linhas > div { grid-template-columns: minmax(0, 1fr); gap: .5rem; text-align: center; }
  .mfp-linhas dd { text-align: center; }
}
/* Fim da Personaliza: produtos MF e posts (18/10/2026). Quadros no padrão
   das páginas de artigo (.pa-rel), com o selo no azul-petróleo da página. */
.mfp-mf { background: #EDE8DC; padding: clamp(3rem, 6vw, 5.5rem) 0; text-align: center; }
.mfp-rel .pa-rel__tipo { background: #143450; }
.mfp-mf__mais { margin: 2rem 0 0; }
.mfp-blog { background: #fff; padding: clamp(3rem, 6vw, 5.5rem) 0; }
.mfp-blog .card-artigo h3 { color: #143450; }

/* Instagram na página do empreendimento (21/10/2026, src/instagram.php). */
.emp-insta__grade { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.emp-insta__item { display: flex; flex-direction: column; gap: .75rem; color: inherit; text-decoration: none; }
.emp-insta__foto { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; }
.emp-insta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
/* Prévia da legenda: 3 linhas no máximo, para os quadros terem a mesma altura. */
.emp-insta__legenda { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .875rem; line-height: 1.5; color: var(--texto); }
.emp-insta__item:hover .emp-insta__legenda { color: var(--azul); }
.emp-insta__item:hover img, .emp-insta__item:focus-visible img { transform: scale(1.04); }
.emp-insta__video { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 86, .7); color: #fff; font-size: 12px; }
@media (max-width: 840px) { .emp-insta__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .emp-insta__foto img { transition: none; } }