/* ===========================================================================
   Layout "vitrine" — LP de empreendimento no molde das LPs de incorporadora.

   REFERÊNCIA DE RACIOCÍNIO (não de cópia): setin.com.br/vestracambui (Vestra
   Cambuí, 2026). O que veio de lá é a ESTRUTURA e o RITMO: faixas de cor
   alternadas (papel → areia → papel → terra → verde), título fino em caixa
   alta com um trecho em negrito, foto do hero recortada em curva, pílulas
   arredondadas, planta em destaque com um círculo de números, galeria em
   carrossel com legenda sobre a foto, diferenciais com ícone numa faixa
   arredondada, vídeo, localização por categoria e formulário na página.

   O QUE É NOSSO:
   - Paleta: papel quente + areia (faixa das plantas) + terra do Marrocos
     (localização) + VERDE PROFUNDO da MSI (contato) + laranja telhado da MSI
     só nos botões. A referência usa taupe/rosé/oliva; aqui as faixas carregam
     a marca do cliente e do empreendimento.
   - Josefin Sans (OFL) na página inteira: fina nos títulos, 600 no trecho
     em destaque e nos botões. Referência usa Montserrat 200.
   - Mecânica de conversão da casa preservada: botão pra /contato/{slug} na
     barra, no hero e após cada bloco; LeadForm na faixa verde; WhatsApp fixo;
     rodapé legal com CNPJ/CRECI.
   - Nada de preço no hero até a construtora autorizar: o bloco escuro traz
     o estágio/entrega (`vitrine.selo_hero`).
   =========================================================================== */

.vit-lp {
  --vit-paper: #faf7f1;
  --vit-paper-2: #f1ece3;
  --vit-ink: #262019;
  --vit-ink-2: #6b625a;
  --vit-ink-3: #9a918a;
  --vit-line: rgba(38, 32, 25, 0.14);
  --vit-line-2: rgba(38, 32, 25, 0.08);
  --vit-areia: #948779;      /* faixa das plantas, pílula do hero, diferenciais — UM taupe só */
  --vit-areia-2: #948779;    /* (mesmo tom; mantido como nome para os usos antigos) */
  --vit-terra: #bf8a70;      /* localização — terra do Marrocos, suavizada */
  --vit-verde: #12742a;      /* círculo de números — verde MSI */
  --vit-verde-escuro: #0b3d1c; /* faixa do contato e etiqueta da marca */
  --vit-laranja: #d2561e;    /* botões — laranja telhado MSI */
  --vit-laranja-hover: #b4461a;

  background: var(--vit-paper);
  color: var(--vit-ink);
  overflow-x: clip;
}

/* Escopo tipográfico: envolve rodapé, botão flutuante e páginas satélite. */
.vit-escopo {
  --vit-sans: var(--font-josefin), "Josefin Sans", "Century Gothic", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-family: var(--vit-sans);
}

.vit-fonte-outfit {
  --vit-sans: var(--font-outfit), "Outfit", "Century Gothic", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.vit-escopo .font-display { font-family: var(--vit-sans); font-weight: 500; letter-spacing: 0; }

.vit-escopo input,
.vit-escopo select,
.vit-escopo textarea,
.vit-escopo button { font-family: inherit; }

.vit-escopo { scroll-behavior: smooth; }
html:has(.vit-escopo) { scroll-behavior: smooth; }

/* ---------- Papéis tipográficos ------------------------------------------ */

/* Título de seção: fino, caixa alta, com o trecho *marcado* em 600. */
.vit-titulo {
  font-family: var(--vit-sans);
  font-weight: 300;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  letter-spacing: 0.04em;
  line-height: 1.18;
  text-transform: uppercase;
  text-wrap: balance;
}

.vit-titulo strong { font-weight: 600; }

.vit-titulo--menor { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

/* H1: o elemento mais forte do hero. Peso 400 na primeira parte (a 300
   ficava apagada no meio das pílulas) e 700 no trecho marcado, em verde MSI. */
.vit-h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--vit-ink);
}

/* Hero em tinta e papel: a única cor é o botão. */
.vit-h1 strong {
  font-weight: 700;
  color: inherit;
}

/* Linha secundária do H1 ("_assim_" no YAML): o nome do empreendimento manda,
   a chamada vem menor embaixo. */
.vit-h1 small {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.44em;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--vit-ink-2);
}

/* Corpo */
.vit-sub {
  font-family: var(--vit-sans);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--vit-ink-2);
}

/* Rótulo miúdo */
.vit-rotulo {
  font-family: var(--vit-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vit-ink-3);
}

/* Etiqueta acima do H1 */
.vit-etiqueta {
  font-family: var(--vit-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vit-ink-2);
}

/* ---------- Ação ----------------------------------------------------------- */

.vit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--vit-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
  background: var(--vit-laranja);
  border: 1px solid var(--vit-laranja);
  border-radius: 999px;
  padding: 1rem 1.9rem 0.9rem;   /* Josefin assenta alto: compensa embaixo */
  box-shadow: 0 10px 22px -12px rgba(210, 86, 30, 0.75);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.vit-btn:hover {
  background: var(--vit-laranja-hover);
  border-color: var(--vit-laranja-hover);
  transform: translateY(-1px);
}

.vit-btn--grande { font-size: 1rem; padding: 1.1rem 2.3rem 1rem; }

.vit-btn--nav { font-size: 0.82rem; padding: 0.8rem 1.3rem 0.7rem; box-shadow: none; }

.vit-btn--linha {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  box-shadow: none;
}

.vit-btn--linha:hover { background: rgba(255, 255, 255, 0.12); border-color: currentColor; }

/* Botão flutuante compartilhado (StickyWhatsApp) na cor da ação. */
.vit-escopo a[data-cta="sticky"] {
  background-color: var(--vit-laranja, #d2561e);
  color: #ffffff;
  font-family: var(--vit-sans);
  font-weight: 600;
  box-shadow: 0 12px 28px -10px rgba(210, 86, 30, 0.7);
}

.vit-escopo a[data-cta="sticky"]:hover { background-color: var(--vit-laranja-hover, #b4461a); }

/* ---------- Nav ------------------------------------------------------------ */

.vit-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 241, 0.9);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vit-line-2);
}

.vit-nav-link {
  font-family: var(--vit-sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--vit-ink-2);
  transition: color 0.2s ease;
}

.vit-nav-link:hover { color: var(--vit-laranja); }

.vit-nav-mobile {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.5rem 1.5rem 0.7rem;
  border-top: 1px solid var(--vit-line-2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vit-nav-mobile::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .vit-nav-mobile { display: none; }
}

/* ---------- Hero ----------------------------------------------------------- */

.vit-hero {
  display: grid;
  gap: 2rem;
}

.vit-hero-texto {
  padding: 2.75rem 1.5rem 0;
}

/* Etiqueta escura com o logotipo do empreendimento (do material oficial). */
.vit-marca {
  display: inline-flex;
  align-items: center;
  background: var(--vit-verde-escuro);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  margin-bottom: 1.1rem;
}

.vit-marca img { height: 1.5rem; width: auto; display: block; }

/* Subtítulo do hero: menor que o corpo padrão, pra não disputar com o H1. */
.vit-hero-sub { font-size: 0.95rem; line-height: 1.6; }

/* Especificações do hero: uma linha de texto em tinta ("57 m² · 2 dormitórios
   com suíte · 1 ou 2 vagas"), números em negrito, sem pílula colorida.
   (Revisão do Jesiel, 06/09: primeira tela com cor demais.) */
.vit-pilula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  color: var(--vit-ink);
  font-family: var(--vit-sans);
  font-size: 1rem;
  font-weight: 400;
}

.vit-pilula b { font-weight: 600; font-size: 1.2rem; line-height: 1; margin-right: 0.3rem; }

.vit-pilula > span + span::before {
  content: "·";
  margin-right: 0.85rem;
  color: var(--vit-ink-3);
}

/* Estágio/entrega (preço, quando autorizado): linha miúda em caixa alta com
   um traço fino, sem bloco colorido. */
.vit-selo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  border-top: 1px solid var(--vit-line);
  padding-top: 0.9rem;
  color: var(--vit-ink-2);
}

.vit-selo-rotulo, .vit-selo-nota {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vit-ink-3);
}

.vit-selo strong {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vit-ink);
}

.vit-selo-nota::before { content: "·"; margin-right: 0.7rem; }

.vit-hero-figura { position: relative; }

.vit-hero-foto {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  margin: 0 1.5rem;
}

.vit-hero-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- Prédio saindo da moldura (efeito da capa do book) --------------
   A figura é a caixa cheia. A moldura ocupa tudo menos a faixa `--vit-salto`
   do topo; a foto emoldurada é puxada pra cima em `--vit-salto`, de modo que
   as duas cópias da imagem ocupem exatamente a mesma caixa — o alinhamento sai
   sozinho, sem conta. A cópia de cima é o recorte com o céu transparente
   (`vitrine.hero_topo`, mesma grade de pixels da foto), preso à faixa por
   clip-path: nada além do prédio escapa da moldura.

   O recorte é imagem com alfa, e não mask-image do CSS, porque o Chrome achata
   camada mascarada num retângulo opaco ao gerar o PDF.

   `--vit-salto` é o que decide se o efeito funciona: a borda da moldura tem de
   cair ABAIXO de todo o telhado, senão ela fatia as torres no meio e só a ponta
   de uma sai. No Gran Vic o telhado inteiro só aparece a 33% da altura da foto,
   e a foto é 944x1180 — daí os ~41% da largura da caixa. */

.vit-hero-figura--salto {
  --vit-salto: calc((100vw - 3rem) * 0.43);
  position: relative;
  margin: 0 1.5rem;
  /* 4/5 = a proporção da própria fachada: no celular ela cabe inteira, do
     telhado à base, sem o cover cortar nada. */
  aspect-ratio: 4 / 5;
}

.vit-hero-figura--salto .vit-hero-foto {
  position: absolute;
  inset: var(--vit-salto) 0 0 0;
  margin: 0;
  height: auto;
}

.vit-hero-figura--salto .vit-hero-foto img,
.vit-hero-saliencia img {
  aspect-ratio: auto;
  object-position: center top;
}

.vit-hero-figura--salto .vit-hero-foto img {
  position: absolute;
  inset: calc(-1 * var(--vit-salto)) 0 auto 0;
  width: 100%;
  height: calc(100% + var(--vit-salto));
}

.vit-hero-saliencia {
  position: absolute;
  inset: 0;
  -webkit-clip-path: inset(0 0 calc(100% - var(--vit-salto)) 0);
          clip-path: inset(0 0 calc(100% - var(--vit-salto)) 0);
  pointer-events: none;
}

.vit-hero-saliencia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Selo branco sobre a foto ("Pré-lançamento") */
.vit-badge {
  position: absolute;
  top: 1.5rem;
  right: 0;
  background: #ffffff;
  color: var(--vit-verde-escuro);
  font-family: var(--vit-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem 0.7rem 1.4rem;
  border-radius: 999px 0 0 999px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .vit-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    align-items: center;
  }

  /* Alinha o texto com o container das outras seções (max 72rem + 2.5rem). */
  .vit-hero-texto {
    padding: 4rem 2rem 4rem max(2.5rem, calc((100vw - 72rem) / 2 + 2.5rem));
  }

  /* A foto sangra até a borda direita e entra em curva pelo lado esquerdo. */
  .vit-hero-foto {
    margin: 0;
    height: min(80vh, 660px);
    border-radius: 0;
    border-top-left-radius: 46% 50%;
    border-bottom-left-radius: 46% 50%;
  }

  .vit-hero-foto img { height: 100%; aspect-ratio: auto; }

  /* Com a saliência: a figura é a caixa cheia e a moldura desce `--vit-salto`.
     A curva do canto superior esquerdo precisa abrir menos que a largura livre
     à esquerda do prédio — senão o prédio some logo abaixo da borda e reaparece
     mais embaixo, com um degrau. */
  /* No desktop a coluna da foto tem 50vw, então os mesmos ~41% da largura da
     caixa viram ~21vw. A altura volta a ser fixa: a fachada inteira só caberia
     numa figura de 900px, alta demais pra primeira tela. */
  .vit-hero-figura--salto {
    --vit-salto: 21vw;
    margin: 0;
    aspect-ratio: auto;
    height: min(84vh, 720px);
  }

  /* A curva do canto superior esquerdo precisa abrir menos que a folga à
     esquerda do prédio — senão ele some logo abaixo da borda e reaparece mais
     embaixo, com um degrau. */
  .vit-hero-figura--salto .vit-hero-foto { border-top-left-radius: 14% 26%; }

  .vit-badge { top: 2.5rem; }
}

/* ---------- Faixa de foto (a chegada) --------------------------------------
   Foto sangrada de ponta a ponta, altura contida, uma frase por cima. Fica
   entre o hero (o prédio por fora) e as plantas (por dentro). */

.vit-faixa-foto {
  position: relative;
  height: clamp(280px, 38vw, 480px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #ffffff;
}

.vit-faixa-foto > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.vit-faixa-foto-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38, 32, 25, 0.72) 0%, rgba(38, 32, 25, 0.25) 45%, rgba(38, 32, 25, 0.05) 100%);
}

.vit-faixa-foto-frase {
  padding-bottom: 2.25rem;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  max-width: 34ch;
}

@media (min-width: 768px) {
  .vit-faixa-foto-frase { padding-bottom: 3rem; }
}

/* ---------- Faixas de cor -------------------------------------------------- */

.vit-faixa { color: #ffffff; }
.vit-faixa .vit-sub { color: rgba(255, 255, 255, 0.86); }
.vit-faixa .vit-rotulo { color: rgba(255, 255, 255, 0.7); }
.vit-faixa--areia { background: var(--vit-areia); }
.vit-faixa--terra { background: var(--vit-terra); }
.vit-faixa--verde { background: var(--vit-verde-escuro); }
.vit-papel-2 { background: var(--vit-paper-2); }

/* ---------- Plantas -------------------------------------------------------- */

.vit-circulo {
  width: 8.25rem;
  height: 8.25rem;
  border-radius: 50%;
  background: var(--vit-verde);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3rem;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.5);
  flex: none;
}

.vit-circulo b { font-size: 1.8rem; font-weight: 600; line-height: 1; }
.vit-circulo span { font-size: 0.82rem; font-weight: 300; line-height: 1.2; }

/* Cartão branco da planta: imagem + legenda dentro, para o círculo de
   números centralizar com o bloco inteiro. */
.vit-planta {
  margin: 0;
  background: #ffffff;
  color: var(--vit-ink);
  padding: 0.75rem;
  border-radius: 0.25rem;
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, 0.5);
}

.vit-planta-foto { position: relative; }

.vit-planta-legenda { padding: 0.9rem 0.35rem 0.3rem; }

/* Dentro do cartão o texto é tinta, mesmo em faixa de cor. */
.vit-faixa .vit-planta .vit-sub { color: var(--vit-ink-2); }

/* Botão que abre a imagem em tela cheia (VitrineLightbox). */
.vit-lb-botao {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
}

.vit-lb-botao img { display: block; }

/* Visualização em tela cheia com setas. */
.vit-lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 4.5rem;
  background: rgba(38, 32, 25, 0.92);
  cursor: zoom-out;
  animation: vit-lb-in 0.18s ease;
}

.vit-lb-img {
  max-width: min(100%, 1400px);
  max-height: calc(100vh - 6.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #ffffff;
  padding: 0.6rem;
  cursor: default;
  animation: vit-lb-in 0.18s ease;
}

.vit-lb-legenda {
  font-family: var(--vit-sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}

.vit-lb-contador {
  margin-left: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

.vit-lb-fechar,
.vit-lb-seta {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vit-lb-fechar:hover,
.vit-lb-seta:hover { background: rgba(210, 86, 30, 0.85); border-color: transparent; }

.vit-lb-fechar {
  top: 0.9rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.6rem;
  line-height: 1;
}

.vit-lb-seta {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
}

.vit-lb-seta--esq { left: 1rem; }
.vit-lb-seta--dir { right: 1rem; }

@media (max-width: 640px) {
  .vit-lb-overlay { padding: 1rem 0.75rem 3.5rem; }
  .vit-lb-seta { top: auto; bottom: 0.75rem; transform: none; }
}

@keyframes vit-lb-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vit-expandir {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--vit-ink);
  border: 1px solid var(--vit-line);
  border-radius: 0.35rem;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.vit-planta:hover .vit-expandir { color: var(--vit-laranja); background: #ffffff; }

/* ---------- Galeria (abas + carrossel) ------------------------------------- */

.vit-aba {
  font-family: var(--vit-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vit-ink-2);
  background: #ffffff;
  border: 1px solid var(--vit-line);
  border-radius: 999px;
  padding: 0.75rem 1.5rem 0.6rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vit-aba:hover { color: var(--vit-laranja); border-color: var(--vit-laranja); }

.vit-aba--ativa,
.vit-aba--ativa:hover {
  background: var(--vit-areia-2);
  color: #ffffff;
  border-color: var(--vit-areia-2);
}

.vit-carrossel { position: relative; }

.vit-trilho {
  display: flex;
  gap: 16px;                       /* = GAP em VitrineGaleria.tsx */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem;
  margin: -0.25rem;
}

.vit-trilho::-webkit-scrollbar { display: none; }

.vit-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: #ffffff;
  padding: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.55);
  margin: 0;
}

.vit-slide-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #f4f1ea;
}

.vit-slide-img--contain { object-fit: contain; }

/* Foto do carrossel abre em tela cheia (Zoom): sem a dica em texto, com o
   ícone de expandir no canto, e a legenda continua por cima. */
.vit-slide .edt-zoom-dica { display: none; }
.vit-slide .vit-expandir { top: 1.25rem; right: 1.25rem; }
.vit-slide:hover .vit-expandir { color: var(--vit-laranja); background: #ffffff; }

.vit-legenda {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  right: 1.25rem;
  bottom: 1.25rem;
  max-width: calc(100% - 2.5rem);
  background: rgba(38, 32, 25, 0.72);
  color: #ffffff;
  font-family: var(--vit-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.85rem 0.35rem;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.vit-seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--vit-ink);
  border: 1px solid var(--vit-line);
  border-radius: 50%;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.vit-seta:hover { background: #ffffff; color: var(--vit-laranja); }
.vit-seta--esq { left: 0.75rem; }
.vit-seta--dir { right: 0.75rem; }

@media (min-width: 1024px) {
  .vit-seta--esq { left: -1.4rem; }
  .vit-seta--dir { right: -1.4rem; }
}

.vit-pontos {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1rem;
}

.vit-ponto {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vit-line);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.vit-ponto--ativo { background: var(--vit-areia-2); transform: scale(1.25); }

/* ---------- Galeria em grade (todas as fotos numa seção) ------------------- */

.vit-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 1024px) {
  .vit-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
  /* `uniforme: false` no YAML: as 2 primeiras fotos ocupam meia largura. */
  .vit-grade--destaque .vit-grade-item:nth-child(-n + 2) { grid-column: span 2; }
  .vit-grade--destaque .vit-grade-item:nth-child(-n + 2) .vit-grade-img { aspect-ratio: 16 / 10; }
}

.vit-grade-item { margin: 0; }

.vit-grade-foto {
  position: relative;
  background: #ffffff;
  padding: 0.4rem;
  border-radius: 0.25rem;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.5);
}

.vit-grade-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f4f1ea;
  transition: transform 0.6s ease;
}

.vit-grade-item--grande .vit-grade-img { aspect-ratio: 16 / 10; }

.vit-grade-foto .vit-lb-botao { overflow: hidden; }
.vit-grade-foto:hover .vit-grade-img { transform: scale(1.02); }
.vit-grade-foto .vit-expandir { top: 1rem; right: 1rem; width: 2.1rem; height: 2.1rem; }
.vit-grade-foto:hover .vit-expandir { color: var(--vit-laranja); background: #ffffff; }

.vit-grade-legenda {
  margin-top: 0.6rem;
  font-family: var(--vit-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vit-ink-3);
}

/* ---------- Diferenciais (faixa arredondada) ------------------------------- */

.vit-diferenciais {
  background: var(--vit-areia-2);
  color: #ffffff;
  border-radius: 2rem;
  padding: 2.5rem 1.5rem;
}

@media (min-width: 768px) {
  .vit-diferenciais { border-radius: 4rem; padding: 3rem 4rem; }
}

.vit-dif-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  font-family: var(--vit-sans);
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.vit-dif-item svg { width: 2.4rem; height: 2.4rem; }

/* ---------- Vídeo ---------------------------------------------------------- */

.vit-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
  border-radius: 0.25rem;
  box-shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.55);
}

.vit-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vit-video-botao {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #111;
  cursor: pointer;
}

.vit-video-botao img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transition: transform 0.9s ease, opacity 0.3s ease;
}

.vit-video-botao:hover img { transform: scale(1.02); opacity: 1; }

.vit-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background-color 0.2s ease;
}

.vit-video-botao:hover .vit-play { background: rgba(210, 86, 30, 0.85); border-color: transparent; }

/* ---------- Localização ---------------------------------------------------- */

/* A vista aérea aparece INTEIRA (nada de recorte): sangrar de ponta a ponta
   cortava justamente as etiquetas de cima. Centralizada e com largura
   limitada, a seção encurta sem perder nenhuma marcação. */
.vit-aerea img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
}

.vit-endereco {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #ffffff;
  color: var(--vit-ink);
  font-family: var(--vit-sans);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.85rem 1.3rem 0.7rem;
  border-radius: 4px;
}

.vit-endereco svg { color: var(--vit-laranja); flex: none; }

.vit-categoria h3 {
  font-family: var(--vit-sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Lista de tópicos (o que trava / como resolve) ------------------
   Traço neutro no problema, traço no acento na solução — a cor marca de que
   lado da conversa o item está. */

.vit-lista {
  display: grid;
  gap: 0.85rem;
}

.vit-lista li {
  display: flex;
  gap: 0.8rem;
  font-family: var(--vit-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--vit-ink-2);
}

.vit-lista li::before {
  content: "";
  flex: none;
  margin-top: 0.72rem;
  width: 1.1rem;
  height: 1px;
  background: var(--vit-ink-3);
}

.vit-lista--acento li::before {
  height: 2px;
  background: var(--vit-laranja);
}

/* ---------- Assinatura da agência (rodapé da faixa de contato) ------------- */

.vit-assinatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--vit-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.vit-assinatura-ponto {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--vit-laranja);
}

@media (min-width: 768px) {
  .vit-assinatura {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ---------- FAQ ------------------------------------------------------------ */

.vit-faq details {
  border-top: 1px solid var(--vit-line);
  padding: 1.1rem 0;
}

.vit-faq details:last-child { border-bottom: 1px solid var(--vit-line); }

.vit-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--vit-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--vit-ink);
}

.vit-faq summary::-webkit-details-marker { display: none; }

.vit-faq-mais {
  flex: none;
  color: var(--vit-laranja);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.vit-faq details[open] .vit-faq-mais { transform: rotate(45deg); }

/* ---------- Contato (faixa verde) ------------------------------------------ */
/* O LeadForm compartilhado já é um cartão branco: só o botão muda de cor. */
.vit-faixa--verde form button[type="submit"] {
  background-color: var(--vit-laranja);
  border-radius: 999px;
  box-shadow: 0 10px 22px -12px rgba(210, 86, 30, 0.75);
}

.vit-faixa--verde form button[type="submit"]:hover { background-color: var(--vit-laranja-hover); }

/* ---------- Rodapé compartilhado, na paleta desta página -------------------
   O Footer da fábrica é azul-marinho (slate-900); aqui vira o verde profundo
   da faixa do contato, que fica logo acima. Só dentro do escopo vitrine. */
.vit-escopo footer {
  background-color: #0b3d1c;
  border-top-color: rgba(255, 255, 255, 0.12);
}

.vit-escopo footer .rounded-xl { background-color: rgba(255, 255, 255, 0.08); }
.vit-escopo footer .border-slate-800 { border-color: rgba(255, 255, 255, 0.14); }
.vit-escopo footer .text-slate-500 { color: rgba(255, 255, 255, 0.55); }
.vit-escopo footer .text-slate-400 { color: rgba(255, 255, 255, 0.7); }
.vit-escopo footer .text-slate-300 { color: rgba(255, 255, 255, 0.86); }

/* ---------- Quem está por trás --------------------------------------------- */

.vit-realizacao img { height: 3.25rem; width: auto; display: block; }

.vit-realizacao h3 {
  font-family: var(--vit-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vit-ink);
}

/* ---------- Impressão / PDF ------------------------------------------------ */
/* O PDF de apresentação é a página inteira numa folha só (ver scripts de
   captura): sem botão flutuante repetido e sem barra grudada. */
@media print {
  /* Sem isto o Chrome descarta faixas de cor, botões e fundos no PDF. */
  .vit-escopo, .vit-escopo * { -webkit-print-color-adjust: exact; color-adjust: exact; print-color-adjust: exact; }
  .vit-escopo a[data-cta="sticky"] { display: none; }
  .vit-nav { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Galeria: carrossel não passa foto no papel. Todas as abas visíveis, cada
     uma com o título, e as fotos em grade de 3. */
  .vit-abas-lista, .vit-seta, .vit-pontos { display: none; }
  .vit-galeria-painel[hidden] { display: block; }
  .vit-galeria-painel + .vit-galeria-painel { margin-top: 3rem; }
  .vit-trilho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; overflow: visible; }
  .vit-slide { flex: none; padding: 0.35rem; }
  .vit-legenda { right: 0.85rem; bottom: 0.85rem; font-size: 0.66rem; }
  .vit-expandir { display: none; }
  .vit-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vit-grade--destaque .vit-grade-item:nth-child(-n + 2) { grid-column: span 2; }
  .vit-grade-foto:hover .vit-grade-img { transform: none; }
  .vit-lb-overlay { display: none; }
  .vit-lp .animate-fade-in, .vit-lp .animate-fade-up { animation: none; opacity: 1; transform: none; }
}

/* ---------- Movimento reduzido --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vit-escopo, html:has(.vit-escopo) { scroll-behavior: auto; }
  .vit-btn, .vit-seta, .vit-ponto, .vit-video-botao img, .vit-play { transition: none; }
  .vit-btn:hover { transform: none; }
  .vit-video-botao:hover img { transform: none; }
}