/* =========================================================
   Comviva Paulínia — Tokens & base
   Tokens extraídos do Figma (UI-ConvivaPaulinia-26)
   ========================================================= */

:root {
  /* ---- Cores ---- */
  --magenta: #c2185b;
  --laranja: #e73439;
  --amarelo: #f9b233;
  --roxo:    #4d2b6b;
  --preto:   #1e1e1e;
  --cinza:   #6d6d6d;
  --branco:  #ffffff;

  /* Gradiente de marca (botões primários, faixas) */
  --gradiente: linear-gradient(90deg, var(--magenta) 0%, var(--laranja) 100%);
  /* Gradientes dos estados de hover dos botões (Figma node 19:442) */
  --gradiente-hover:  linear-gradient(90deg, var(--roxo) 0%, var(--magenta) 100%);   /* primário :hover */
  --gradiente-amarelo-laranja: linear-gradient(90deg, var(--amarelo) 0%, var(--laranja) 100%); /* texto do botão escuro :hover */

  /* ---- Tipografia ---- */
  /* Gotham é licenciada; Montserrat é o fallback próximo (Google Fonts). */
  --font-display: "Gotham", "Montserrat", system-ui, sans-serif;
  --font-body:    "Gotham", "Montserrat", system-ui, sans-serif;

  /* Escala de tipo (tamanho / linha) — nomes do Figma */
  --title-40: 700 2.5rem/1.2 var(--font-display);   /* 40/48 */
  --title-32: 700 2rem/1.25 var(--font-display);    /* 32/40 */
  --title-28: 700 1.75rem/1.29 var(--font-display); /* 28/36 */
  --title-24: 700 1.5rem/1.33 var(--font-display);  /* 24/32 */
  --body-lg:  400 1.125rem/1.33 var(--font-body);   /* 18/24 */
  --body-md:  400 1rem/1.5 var(--font-body);        /* 16/24 */
  --body-sm:  400 0.875rem/1.71 var(--font-body);   /* 14/24 */
  --label:    700 0.75rem/1.33 var(--font-display); /* 12/16 */
  --button:   700 0.875rem/1.43 var(--font-display);/* 14/20 */

  /* ---- Sombras ---- */
  --sombra-texto: 0 4px 16px rgba(0, 0, 0, .32);
  --sombra-bt:   -2px 4px 12px rgba(30, 30, 30, .12);

  /* ---- Layout ---- */
  --max-w: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --radius: 24px;
  --section-py: clamp(3rem, 6vw, 6.25rem);

  /* Grid Figma (Layout Grid do frame, versão desktop): 12 colunas,
     margem 36, gutter 24, tipo Stretch. --grid-gutter fica disponível
     pra quem precisar de um gap "de grid" consistente com o Figma. */
  --grid-cols: 12;
  --grid-gutter: 24px;
}

@media (min-width: 992px) {
  :root {
    --gutter: 36px; /* Margin do Layout Grid — fixo no desktop, some do fluid clamp */
  }
}

/* =========================================================
   Reset leve / base
   ========================================================= */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; } /* scroll nativo; só suaviza o salto dos links #âncora */

body {
  margin: 0;
  font: var(--body-md);
  color: var(--preto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
  max-width: 100vw;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* =========================================================
   Utilitários de tipografia
   ========================================================= */
.t-40 { font: var(--title-40); }
.t-32 { font: var(--title-32); }
.t-28 { font: var(--title-28); }
.t-24 { font: var(--title-24); }
.b-lg { font: var(--body-lg); }
.b-md { font: var(--body-md); }
.b-sm { font: var(--body-sm); }
.label {
  font: var(--label);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* =========================================================
   Estrutura de seções
   Regra: a base .section define o ritmo vertical.
   Não sobrescreva padding com seletores de elemento.
   ========================================================= */
.section {
  position: relative;
  width: 100%;
}

/* Container fluido: no desktop mantém sempre 36px de margem lateral
   (--gutter) e ocupa toda a largura da viewport — as colunas dos grids
   (repeat(12,1fr) + gutter 24px) crescem proporcionalmente, em vez de
   travar num max-width e centralizar deixando margens grandes. */
.container-lp {
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Folds de tela cheia (2, 3, 5, 6, 8), todos com no mínimo 100dvh de altura. */

/* Masterplan (texto + mapa) e contato (foto + formulário): centralizam o
   conteúdo verticalmente no fold (não preenchem como um card único). */
.masterplan,
.contato {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Arena, acesso e planta: replicam o hero — o card/stage preenche a viewport
   com 36px de margem em TODOS os lados (o padding do container), sobre fundo
   branco (em vez do gradiente do hero). */
.arena,
.acesso,
.planta {
  min-height: 100vh;   /* fallback p/ navegadores sem dvh */
  min-height: 100dvh;  /* altura real visível (desconta a barra do navegador no mobile) */
  display: flex;
  flex-direction: column;
  background: var(--branco);
}
.arena > .container-lp,
.acesso > .container-lp,
.planta > .container-lp {
  flex: 1;
  width: 100%;
  padding: var(--gutter);   /* 36px em todos os lados = margem do card */
  display: flex;
  flex-direction: column;
}
/* o card/stage de cada fold preenche o container (menos os 36px) */
.arena__stage,
.acesso__stage,
.planta__stage {
  flex: 1;
}
/* acesso é exceção: o card segue a proporção da imagem (ver .acesso__stage),
   então centralizamos verticalmente no fold em vez de esticar. */
.acesso > .container-lp {
  justify-content: center;
}

/* =========================================================
   Botões
   ========================================================= */
.btn-lp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: var(--button);
  padding: 1rem 2rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  /* sem sombra no estado default (Figma) — ela entra só no :hover */
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Estados de hover dos botões — Figma node 19:442.
   A sombra (--sombra-bt) aparece só no hover em todas as variantes. */

/* Primário (BtGradiente): gradiente magenta→laranja vira roxo→magenta */
.btn-primary-lp { background: var(--gradiente); color: var(--branco); }
.btn-primary-lp:hover {
  background: var(--gradiente-hover);
  box-shadow: var(--sombra-bt);
}

/* Escuro (BtPreto): fundo fica preto sólido e o texto vira gradiente
   amarelo→laranja. O texto precisa estar num <span> para o background-clip. */
.btn-dark-lp  { background: var(--preto); color: var(--branco); }
.btn-dark-lp:hover,
.planta__btn:hover {
  background: var(--preto);
  box-shadow: var(--sombra-bt);
}
.btn-dark-lp:hover > span,
.planta__btn:hover > span {
  background: var(--gradiente-amarelo-laranja);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Claro (BtBranco): borda mais forte e texto vira gradiente magenta→laranja */
.btn-light-lp {
  background: var(--branco);
  color: var(--preto);
  border: 1px solid rgba(30, 30, 30, .08);
}
.btn-light-lp:hover {
  border-color: rgba(30, 30, 30, .16);
  box-shadow: var(--sombra-bt);
}
.btn-light-lp:hover > span {
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   Tag "Obras em andamento"
   ========================================================= */
.tag-obras {
  display: inline-block;
  font: var(--label);
  color: var(--preto);
  background: var(--amarelo);
  padding: .5rem 1rem;
  border-radius: 32px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* =========================================================
   Faixa de marca (hero e formulário final)
   ========================================================= */
.bg-marca { background: var(--gradiente); color: var(--branco); }

/* =========================================================
   Botão flutuante WhatsApp
   ========================================================= */
.bt-whats {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366; /* verde de marca do WhatsApp */
  color: var(--branco);
  box-shadow: var(--sombra-bt);
  transition: transform .2s ease;
  z-index: 50;
}
.bt-whats:hover { transform: translateY(-2px); }
.bt-whats__icon {
  width: 34px;
  height: 34px;
}

/* =========================================================
   Estado inicial dos hooks de animação
   (aplicado só quando o JS de animação está ativo, via .anim-ready
    no <html>, para não sumir com conteúdo se o JS falhar)
   ========================================================= */
.anim-ready .js-reveal { opacity: 0; }
/* No stagger, quem entra em cena são os FILHOS diretos (é o que o main.js
   anima). Esconder o container inteiro o deixaria invisível para sempre. */
.anim-ready [data-reveal-stagger] > * { opacity: 0; }

/* =========================================================
   Acessibilidade — reduzir movimento
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .anim-ready .js-reveal,
  .anim-ready [data-reveal-stagger],
  .anim-ready [data-reveal-stagger] > * { opacity: 1 !important; }
}

/* =========================================================
   Marquee (faixa de texto do masterplan)
   ========================================================= */
.js-marquee {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  will-change: transform;
}

/* =========================================================
   Footer (node 2506:1612)
   ========================================================= */
.footer {
  background: var(--preto);
  color: var(--branco);
}

.footer__inner {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 2.5rem);
}

/* Respiro de 1 col + 1 gutter em cada lateral (mesma regra do hero/
   contato/parceiros): o conteúdo do footer ocupa as 10 colunas centrais.
   margin-inline (não padding) para o filete do texto legal recuar junto. */
.footer__top,
.footer__legal {
  margin-inline: calc((100% - 11 * var(--grid-gutter)) / 12 + var(--grid-gutter));
}

/* Linha superior: logo (esq.) + redes (dir.) */
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}

.footer__logo {
  display: inline-flex;
  line-height: 0;
}
.footer__logo img {
  height: 40px;
  width: auto;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 2.5rem; /* 40px entre os itens (Figma) */
  flex-wrap: wrap;
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem; /* 16px ícone → texto (Figma) */
  font: var(--label); /* Gotham Bold 12/16 */
  color: var(--branco);
  text-decoration: none;
  transition: opacity .2s ease;
}
.footer__social-link img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.footer__social-link:hover { opacity: .8; }
.footer__social-link:hover span { text-decoration: underline; }

/* Texto legal com filete no topo */
.footer__legal {
  margin-top: clamp(2rem, 4vw, 2.5rem);
  padding-top: 40px;
  border-top: 1px solid rgba(109, 109, 109, .12);
}
.footer__legal p {
  font-family: var(--font-body);
  font-size: .75rem;   /* 12 */
  line-height: 16px;   /* 16 */
  font-weight: 400;    /* Book */
  color: var(--branco);
  margin: 0 0 1rem;
  word-break: break-word;
}
.footer__legal p:last-child { margin-bottom: 0; }

/* Foco de teclado visível (quality floor) */
.footer a:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Mobile: conteúdo do footer a largura toda (sem o respiro lateral) e
   centralizado — logo, redes sociais e texto legal. */
@media (max-width: 767.98px) {
  .footer__top,
  .footer__legal { margin-inline: 0; }

  .footer__top {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .footer__social { justify-content: center; }
  .footer__legal { text-align: center; }
}

/* =========================================================
   Texto com preenchimento de gradiente (reutilizável)
   ========================================================= */
.text-gradient {
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   Parceiros / Incorporadoras (node 2531:1876)
   ========================================================= */
.parceiros {
  padding-block: var(--section-py);
}

.parceiros__head {
  max-width: 722px;
  margin-inline: auto;
}
.parceiros__title {
  margin: 0;
}
/* Desktop grande (> 1440px): título sobe de Title28 → Title40 (40/48),
   igual às demais seções (node 2589:3757), em uma única linha. */
@media (min-width: 1441px) {
  .parceiros__head { max-width: none; }        /* libera a largura p/ o título caber */
  .parceiros__title { font-size: 2.5rem; line-height: 48px; white-space: nowrap; }
}
.parceiros__head p {
  margin: .5rem 0 0; /* gap 8px do Figma */
  color: var(--preto);
}

.parceiros-cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--grid-gutter);
  margin-top: 48px;   /* espaço título → cards (node 2589:3757) */
  /* Mesmo respiro do hero/contato: 1 col + 1 gutter em cada lateral, então
     a fileira dos 3 cards ocupa as 10 colunas centrais do grid de 12.
     (100% − 11 gutters)/12 = 1 coluna; + 1 gutter = o respiro. */
  padding-inline: calc((100% - 11 * var(--grid-gutter)) / 12 + var(--grid-gutter));
}

.parceiro-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 8px 12px 24px rgba(30, 30, 30, .12);
}

/* Faixa escura com a logo */
.parceiro-card__logo {
  height: 220px;
  display: grid;
  place-items: center;
  padding: 1rem 2rem;
  background: var(--preto);
}
.parceiro-card__logo img {
  height: auto;              /* mantém a proporção do arquivo (bate com o Figma) */
  max-width: 100%;           /* só encolhe se o card ficar estreito */
}
/* Dimensões conforme o Figma (node 2589:3757): a altura vem de height:auto,
   pois a proporção dos arquivos coincide com a do design.
   Lote5 158×54 · Vista Di 231×64 · Vitae 200×43. */
.logo--lote5   { width: 158px; }
.logo--vistadi { width: 231px; }
.logo--vitae   { width: 200px; }

.parceiro-card__body {
  padding: 40px 32px;
}
.parceiro-card__body p {
  margin: 0;
  color: var(--preto);
}

/* Mobile: os 3 cards viram um carrossel horizontal por swipe (sem o respiro
   lateral, pois a fileira sangra até a margem do container) — cada card
   ocupa a maior parte da largura e "espia" o próximo na borda, indicando
   que dá pra arrastar. Sem setas/paginador: arraste nativo (overflow-x +
   scroll-snap), sem precisar de JS. */
@media (max-width: 767.98px) {
  .parceiros-cards {
    flex-wrap: nowrap;
    justify-content: flex-start;   /* sem isso, o center da regra base deixa
                                       o carrossel já aberto no card do meio */
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 0;
    padding-bottom: 32px;;
  }
  .parceiros-cards::-webkit-scrollbar { display: none; }
  .parceiro-card { flex: 0 0 82%; scroll-snap-align: start; }
  .parceiro-card__logo { height: 180px; }
  .parceiros {
    padding-bottom: 24px;
  }
  .acesso {
    border-top: solid 1px #6D6D6D3D;
    border-bottom: solid 1px #6D6D6D3D;
    padding: 32px 0;
  }
  .acesso__endereco-rua {
    font-size: 1.2rem !important;
  }
}

/* =========================================================
   Formulário final / Contato (node 2531:2034)
   Grid: card de foto (672) + card de formulário (435), gap 24.
   ========================================================= */
.contato { padding-block: var(--section-py); }

/* Grid de 12 colunas (mesma regra do hero): 1 col de respiro | 6 cols
   da foto | 4 cols do formulário | 1 col de respiro. */
.contato__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
  align-items: stretch;
}

/* --- Card de foto com texto sobreposto (node 2531:2172) --- */
.contato__foto {
  grid-column: 2 / span 6;          /* 6 colunas, após 1 col de respiro */
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--preto);         /* fundo escuro sob a foto a 60% */
  min-height: 440px;
  display: flex;
  align-items: flex-end;            /* texto ancorado na base */
}
.contato__foto-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: .6;                      /* escurece a foto (igual ao Figma) */
  pointer-events: none;
}
/* Arco amarelo decorativo. A largura acompanha o card (%) e a altura é
   automática, travando a proporção do SVG (viewBox 853×721) — assim os
   círculos nunca distorcem, mesmo com o card mudando de proporção. */
.contato__foto-arco {
  position: absolute;
  /* Referência: Figma @1920, card 912 wide, arco 1016×857.87 em (-78, -392.48).
     Tudo relativo à LARGURA do card → escala proporcional nas resoluções
     intermediárias. O top usa translateY (% da própria altura do arco), que
     também acompanha a largura, já que a altura é travada pela proporção. */
  left: -8.55%;                       /* -78 / 912 */
  top: 0;
  transform: translateY(-45.75%);     /* -392.48 / 857.87 */
  width: 111.4%;                      /* 1016 / 912 */
  height: auto;
  aspect-ratio: 853 / 721;            /* proporção do SVG (sem distorção) */
  max-width: none;
  pointer-events: none;
}
.contato__content {
  position: relative;               /* acima da foto/arco */
  isolation: isolate;               /* contexto próprio p/ o ::before ficar atrás do texto */
  width: 100%;
  padding: 64px;                    /* margens internas (node 2589:3811) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
/* Efeito atrás do texto: gradiente escuro (.36) + blur que surgem de 0% (topo)
   a 100% (base) via máscara — o desfoque aparece gradualmente sob o texto. */
.contato__content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, .36) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  pointer-events: none;
}
/* Bloco de texto: título + descrição com 8px de gap e sombra do design */
.contato__texto {
  position: relative;
  z-index: 1;                       /* acima do efeito de blur */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .32));
}
.contato__title {
  color: var(--branco);
  margin: 0;
}
.contato__desc {
  color: var(--branco);
  margin: 0;
}


/* --- Card do formulário --- */
.contato__form-wrap {
  grid-column: 8 / span 4;          /* 4 colunas, deixando a col 12 de respiro */
  display: flex;
}
.contato__form-wrap .form-lp { width: 100%; }

/* Empilha no tablet/mobile */
@media (max-width: 991.98px) {
  .contato__grid { grid-template-columns: 1fr; }
  .contato__foto,
  .contato__form-wrap { grid-column: auto; }
}

/* Duplicata mobile do contato (entre hero e masterplan): só aparece nas
   versões mobile. No desktop fica oculta — a seção #contato do rodapé basta. */
@media (min-width: 768px) {
  .contato--topo { display: none; }
}

/* Mobile (node 2614:4659) — vale para as duas instâncias do contato (rodapé
   e a duplicata do topo, que compartilham as mesmas classes). */
@media (max-width: 767.98px) {
  /* Título "Fale com um de nossos corretores": Title28 (28/36). */
  .contato__title { font-size: 1.75rem; line-height: 36px; }

  .contato { padding-block: 32px; }
  .contato .container-lp { padding-inline: 24px; }
  .contato__grid { gap: 16px; }        /* 16px entre o card de foto e o form */

  /* Card de foto: altura fixa de 400px (em vez do stretch do desktop) e
     cantos menores (8px, era 16px). */
  .contato__foto { height: 400px; min-height: 0; border-radius: 8px; }

  /* Arco amarelo: box e posição próprios do mobile (card quase quadrado),
     recalibrados a partir do inset do Figma (node 2614:4653, card 382×400)
     — mesma técnica do desktop: % relativos à LARGURA do card + translateY
     (% da própria altura) para nunca distorcer o SVG (aspect-ratio herdado
     da regra base, 853/721). */
  .contato__foto-arco {
    left: -30.1%;
    top: 0;
    transform: translateY(-52.85%);
    width: 148.4%;
  }

  /* Efeito atrás do texto: mesmo gradiente de opacidade do desktop
     (gradiente de escurecimento + máscara do blur, ver .contato__content::before
     na regra base) — só o padding do texto muda para o mobile. */
  .contato__content {
    padding: 32px 24px;
  }

  /* Card do formulário: cantos menores (8px) + borda inferior sutil
     (node 2614:4618). O box-shadow e o gap entre campos já batem com o
     Figma (8px 16px 16px rgba(30,30,30,.16) / 24px) — sem mudança. */
  .contato__form-wrap .form-lp {
    padding: 32px 24px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(109, 109, 109, .24);
  }
}

/* =========================================================
   Formulário (node 2516:547) — reusado no hero e no #contato
   ========================================================= */
.form-lp {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--branco);
  border-radius: 16px;
  box-shadow: 8px 16px 16px rgba(30, 30, 30, .16);
}
/* Desktop grande (> 1440px): margens internas do box do formulário sobem
   de 32 → 48px. Até 1440px permanecem 32px. */
@media (min-width: 1441px) {
  .form-lp { padding: 48px; }
}

/* Campo (label + input) */
.form-lp__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-lp__label {
  font: var(--label);           /* Gotham Bold 12/16 */
  color: var(--magenta);
}
.form-lp__input {
  width: 100%;
  padding: 16px 24px;
  font: var(--body-sm);
  line-height: 1.2;
  color: var(--preto);
  background: var(--branco);
  border: 1px solid rgba(30, 30, 30, .16);
  border-radius: 4px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-lp__input::placeholder { color: var(--cinza); }
.form-lp__input:focus-visible,
.form-lp__input:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(194, 24, 91, .12);
}

/* Toggle "Como prefere ser contatado?" (radios estilizados) */
.form-lp__toggle {
  display: flex;
  gap: 16px;
}
.form-lp__toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-lp__toggle-btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 12px 16px;
  font: var(--label);
  color: var(--preto);
  background: var(--branco);
  border: 1px solid rgba(30, 30, 30, .16);
  border-radius: 40px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.form-lp__toggle-input:checked + .form-lp__toggle-btn {
  background: var(--preto);
  color: var(--branco);
  border-color: var(--preto);
}
.form-lp__toggle-input:focus-visible + .form-lp__toggle-btn {
  outline: 2px solid var(--amarelo);
  outline-offset: 2px;
}

/* Checkboxes */
.form-lp__checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-lp__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.form-lp__checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  display: grid;
  place-content: center;
  background: rgba(30, 30, 30, .04);
  border: 1px solid rgba(30, 30, 30, .08);
  border-radius: 4px;
  cursor: pointer;
}
.form-lp__checkbox::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gradiente);
  transform: scale(0);
  transition: transform .15s ease;
}
.form-lp__checkbox:checked::before { transform: scale(1); }
.form-lp__checkbox:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 2px;
}
.form-lp__check-label {
  font-family: var(--font-body);
  font-size: .75rem;   /* 12 */
  line-height: 16px;
  color: var(--preto);
  cursor: pointer;
}
.form-lp__link {
  color: var(--magenta);
  font-weight: 700;
  text-decoration: underline;
}
.form-lp__link:hover { filter: brightness(1.1); }

/* Botão enviar (reaproveita .btn-lp .btn-primary-lp) */
.form-lp__submit {
  width: 100%;
}
.form-lp__submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Feedback de erro do envio (webhook) — só ocupa espaço quando tem
   texto, pra não abrir um vão permanente embaixo do botão. */
.form-lp__feedback {
  margin: 0;
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--laranja);
  text-align: center;
}
.form-lp__feedback:empty {
  display: none;
}

/* =========================================================
   Planta Pronta (node 2531:1548)
   ========================================================= */
/* .planta: altura/margens via regra dos folds de tela cheia (container 36px) */

/* Palco: card com foto de fundo esmaecida + brilho.
   flex-column + cards no rodapé (margin-top:auto) para preencher a altura. */
.planta__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  background: var(--branco);
  padding: 40px;   /* margem interna do card (borda → cards de baixo) */
  display: flex;
  flex-direction: column;
}
.planta__stage::before {          /* foto (planta/blueprint) a 60% */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../assets/planta-bg.jpg") center / cover no-repeat;
  opacity: .6;
}
.planta__stage::after {           /* brilho suave no topo-esquerda */
  content: "";
  position: absolute;
  left: -12%;
  top: -35%;
  width: 65%;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at center,
              rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 60%);
}

/* Bloco de conteúdo — recebe +40px de topo/esquerda além do padding do card,
   ficando a 80px do início da imagem (logo/título/texto/botão). Os cards de
   baixo seguem a 40px (só o padding do card). */
.planta__content {
  max-width: 592px;
  margin-top: 40px;
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.planta__logo {
  width: 239px;
  height: auto;
}
.planta__intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.planta__title {
  margin: 0;
  color: var(--preto);
}
.planta__intro p {
  margin: 0;
  color: var(--preto);
}
.planta__btn {                    /* pílula escura translúcida */
  color: var(--branco);
  background: rgba(30, 30, 30, .8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Cards de destaque (glass) */
.planta-cards {
  display: flex;
  gap: 24px;
  margin-top: auto;   /* empurra os cards para o rodapé do card preenchido */
  padding-top: clamp(2rem, 5vw, 4rem);   /* respiro mínimo do conteúdo acima */
}
.planta-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.planta-card__icon {
  width: 32px;
  height: 32px;
}
.planta-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.planta-card__title {
  margin: 0;
  color: var(--preto);
  font-family: var(--font-display);
  font-size: 1.125rem;   /* 18 */
  line-height: 24px;
  font-weight: 700;
}
.planta-card p {
  margin: 0;
  color: var(--preto);
}

/* Responsivo */
@media (max-width: 991.98px) {
  .planta__content { margin-top: 0; margin-left: 0; }   /* sem os 40px extras no card estreito */
  .planta-cards { flex-wrap: wrap; }
  .planta-card { flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 575.98px) {
  .planta__stage { padding: 24px; }
}

/* Mobile (≤767.98px): os 4 cards viram um carrossel horizontal por swipe em
   vez de empilhar/quebrar em grade — cada card ocupa a maior parte da
   largura e "espia" o próximo na borda, indicando que dá pra arrastar.
   Sem setas/paginador (arraste nativo), então nem precisa de JS: só
   overflow-x + scroll-snap. O overflow:hidden do .planta__stage recorta o
   card seguinte exatamente na mesma margem do conteúdo acima. */
@media (max-width: 767.98px) {
  /* Sem isso, a seção mantinha o min-height:100dvh do fold (regra base,
     compartilhada com arena/acesso) e o stage (flex:1) esticava até
     preencher a tela toda — sobrava um espaço em branco enorme abaixo do
     carrossel, já que o conteúdo empilhado no mobile é bem mais baixo que
     100dvh. Mesmo ajuste já feito no .arena mobile. */
  #planta {
    min-height: 0;
  }
  #planta,
  #planta .container-lp {
    padding: 0;
  }
  #planta .container-lp {
    flex: none;
  }
  .planta__stage {
    flex: none;
  }
  #planta .planta__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 32px 0;
  }
  /* Gradiente branco atrás do logo/título/texto/botão (não do carrossel de
     cards abaixo) — sangra até as bordas do card cancelando o padding do
     .planta__stage (24px), pra legibilidade sobre a foto de fundo. */
  #planta .planta__content::before {
    content: "";
    position: absolute;
    top: -32px;
    right: -24px;
    bottom: 0;
    left: -24px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
  }
  #planta .planta__content .planta__logo{
    margin: 0 auto;
  }
  #planta .planta__title {
    font-size: 21px;
  }
  #planta .planta__btn {
    min-width: 100%;
  }
  .planta-cards {
    flex-wrap: nowrap;
    align-items: flex-start;   /* sem isso, o card mais curto (Garantia de
                                   aprovação) esticava até a altura do mais
                                   longo (Suporte técnico), sobrando espaço
                                   em branco embaixo do texto */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 0;
    width: 100vw;
    padding-right: 14vw;
  }
  .planta__stage::after {
    display: none;
  }
  .planta-cards::-webkit-scrollbar { display: none; }
  .planta-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .parceiros-cards {
    padding-right: 4vw;
  }
}

/* Desktop grande (> 1440px): título da planta-pronta sobe de Title28 → Title40
   (40/48), conforme o Figma (node 2589:3750). */
@media (min-width: 1441px) {
  .planta__title { font-size: 2.5rem; line-height: 48px; }   /* Title40 */
}

/* =========================================================
   Acesso / Localização (node 2524:1351)
   ========================================================= */
/* .acesso: altura/margens via regra dos folds de tela cheia (container 36px) */

/* Palco: a MÁSCARA adota a proporção da foto aérea (1848×888), então a imagem
   preenche 100% sem corte e sem faixas — o card encolhe/estica conforme a
   largura e é centralizado na altura do fold (não estica até 100dvh). */
.acesso__stage {
  position: relative;
  flex: 0 0 auto;               /* não estica até 100dvh — a altura vem do grid abaixo */
  width: 100%;
  display: grid;                /* imagem, spacer e painel na MESMA célula */
  overflow: hidden;
  border-radius: 16px;
  background: var(--preto);
}
/* Spacer invisível: impõe a proporção da imagem como altura-alvo do card.
   A linha do grid fica com a MAIOR altura entre este spacer e o painel, então:
   - telas largas → altura = proporção da imagem → foto 100% visível, sem faixa;
   - se o painel for mais alto → o card cresce e a foto (cover) corta só as
     laterais ("contando as laterais se necessário"). */
.acesso__stage::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1848 / 888;
}
.acesso__aerea {
  position: absolute;           /* preenche o card exatamente (img substituída não
                                   estica na célula do grid → ficava colada à esquerda) */
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;              /* anula o max-width:100% do reset de img */
  object-fit: cover;
  object-position: center;      /* corte simétrico nas laterais */
  z-index: 0;
}

/* Painel translúcido — box compacto (node 2589:3669): não estica na altura do
   stage; conteúdo (padding 40, gap 24) seguido direto pela faixa de endereço. */
.acesso__panel {
  position: relative;
  grid-area: 1 / 1;         /* mesma célula da imagem, sobreposto */
  z-index: 1;
  align-self: start;        /* topo */
  justify-self: start;      /* esquerda */
  margin: 40px;             /* respiro do painel até a borda do card */
  width: 468px;
  max-width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: rgba(30, 30, 30, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
}
/* Bloco de conteúdo (texto + lista): as margens internas de 40px e o gap de
   24px vivem aqui, não no painel (que agora só arredonda e recorta). */
.acesso__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
}

.acesso__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-shadow: var(--sombra-texto);
}
.acesso__title {
  margin: 0;
  color: var(--branco);
}
.acesso__text p {
  margin: 0;
  color: var(--branco);
}

/* Lista de distâncias */
.acesso-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acesso-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.acesso-km {
  flex-shrink: 0;
  padding: 4px 16px;
  border-radius: 32px;
  background: var(--branco);
  color: var(--preto);
  font: var(--label);          /* Gotham Bold 12/16 */
  white-space: nowrap;
}
.acesso-cidade {
  color: var(--branco);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;         /* 18 */
  line-height: 24px;
}

/* Endereço: faixa gradiente logo após o conteúdo. Como o painel não tem
   padding, ela já sangra até as bordas do box. */
.acesso__endereco {
  padding: 40px;
  background: var(--gradiente);
  color: var(--branco);
}
.acesso__endereco-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .75rem;           /* 12 */
  line-height: 16px;
}
.acesso__endereco-rua {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;           /* 24 */
  line-height: 32px;
}

/* Responsivo: no desktop o painel SOBREPÕE a foto (overlay translúcido no
   canto); no mobile isso não cabe — texto, lista e endereço ficavam maiores
   que a foto e vazavam pra fora do card. Empilha em vez de sobrepor: foto
   em cima, painel opaco embaixo, como duas "fatias" do mesmo card. A máscara
   arredondada de 16px continua só no .acesso__stage (overflow:hidden já
   herdado da regra base), então não precisa repetir border-radius aqui. */
@media (max-width: 767.98px) {
  /* Fundo branco: o --preto da regra base é o "colchão" atrás da foto no
     overlay do desktop; aqui, sem sobreposição, é o que aparece atrás do
     painel translúcido — se ficasse preto, o rgba(30,30,30,.6) do painel
     compunha quase preto (cinza escuro demais). Em branco, dá o cinza médio
     do Figma mobile. */
  .acesso__stage { display: flex; flex-direction: column; background: var(--branco); border-radius: 8px; }
  .acesso__stage::before { display: none; }   /* spacer só existe pro truque do grid */
  .acesso__aerea {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .acesso__panel {
    position: static;
    margin: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    background: rgba(30, 30, 30, .8); /* opacidade 80% no mobile (era 60%) */
  }
  .acesso__content { padding: 24px; }
  .acesso__endereco { padding: 24px; }
  .acesso__title { font-size: 1.5rem; line-height: 32px; } /* Title24 */
}

/* Desktop grande (> 1440px): box das cidades vizinhas conforme o Figma
   (node 2589:3669). O título sobe de Title28 → Title40 (40/48); subtítulo,
   lista (18/12), endereço (24) e a largura de 468px já são os tamanhos base. */
@media (min-width: 1441px) {
  .acesso__title { font-size: 2.5rem; line-height: 48px; }   /* Title40 */
}

/* =========================================================
   Cidade / Paulínia — mosaico de fotos (node 2524:1232)
   ========================================================= */
.cidade {
  padding-block: var(--section-py);
}

/* Palco proporcional (1440 x 748 do Figma) com itens absolutos */
.cidade-mosaic {
  position: relative;
  aspect-ratio: 1440 / 748;
}

/* Conteúdo central sobreposto */
.cidade__content {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 46.67%;              /* 672 / 1440 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.cidade__textos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cidade__title { margin: 0; }
.cidade__textos p { margin: 0; color: var(--preto); }

/* Cartões de foto */
.cidade-foto {
  position: absolute;
  width: 17.5%;               /* 252 / 1440 */
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--preto);
}
.cidade-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cidade-foto figcaption {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 32px;
  background: rgba(30, 30, 30, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--branco);
  font: var(--label);
  white-space: nowrap;
}

/* Posições (left / top / height em % do palco) */
.cidade-foto--teatro    { left: 2.361%;  top: 2.139%;  height: 40.107%; }
.cidade-foto--malavazzi { left: 2.361%;  top: 45.455%; height: 31.016%; }
.cidade-foto--ecologico { left: 21.806%; top: 41.444%; height: 45.989%; }
.cidade-foto--bicicross { left: 41.25%;  top: 45.989%; height: 24.064%; }
.cidade-foto--estadio   { left: 41.25%;  top: 73.262%; height: 24.064%; }
.cidade-foto--museu     { left: 60.694%; top: 41.444%; height: 40.107%; }
.cidade-foto--shopping  { left: 80.139%; top: 13.369%; height: 26.738%; }
.cidade-foto--fonte     { left: 80.139%; top: 43.316%; height: 26.738%; }
.cidade-foto--polo      { left: 80.139%; top: 73.262%; height: 26.738%; }

/* Tablet: vira grade de 2 colunas em fluxo normal (grid agora no wrapper
   .cidade-fotos, não mais no .cidade-mosaic — ver nota no HTML). */
@media (max-width: 991.98px) {
  .cidade-mosaic {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cidade__content {
    position: static;
    transform: none;
    width: auto;
    margin-bottom: 8px;
  }
  .cidade-fotos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .cidade-foto {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    height: auto !important;
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 575.98px) {
  .cidade-fotos { grid-template-columns: 1fr; }
}

/* Mobile: fotos viram carrossel de scroll horizontal (300x264 fixo, cantos
   8px, tag a 8px da base — em vez da grade 2-col do tablet). */
@media (max-width: 767.98px) {
  #cidade .container-lp,
  #parceiros .container-lp {
    padding-right: 0;
  }
  #cidade .container-lp { padding-left: 0; }
  #cidade .cidade__content,
  #parceiros .parceiros__head {
    padding-right: 4vw;
  }
  #cidade .cidade__content { padding-left: 4vw; }
  .cidade-mosaic { gap: 48px; }
  .cidade__content { align-items: stretch; margin-bottom: 0; }
  .cidade__content .btn-lp { width: 100%; }
  /* Carrossel ocupa 100% da largura da tela (full-bleed) e roda em loop
     automático — mesma técnica do marquee dos big numbers do hero: o JS
     cria uma trilha (.cidade-fotos__track), duplica os itens e anima via
     GSAP; aqui só o "viewport" (overflow:hidden). */
  .cidade-fotos {
    overflow: hidden;
    width: 100vw;
  }
  .cidade-fotos__track {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
<<<<<<< HEAD
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-right: 4vw;
=======
    width: max-content;
>>>>>>> 1df67471e603995eb2de91a29b2d3028ca5f14bc
  }
  .cidade-foto {
    flex: 0 0 auto;
    width: 300px !important;
    height: 264px !important;
    aspect-ratio: auto;
    border-radius: 8px;
  }
  .cidade-foto figcaption { bottom: 8px; }
  .planta__stage {
    border-radius: 0;
    padding-bottom: 50px;
  }
  .planta-card {
    min-height: 280px;
  }
}

/* Desktop grande (> 1440px): novo arranjo do mosaico conforme o Figma
   (node 2589:3594, frame 1920). O palco passa a mapear a região das fotos
   (1848px de largura = 100% do container − 72px, × 776px de altura: do topo
   do texto y80 até a base da coluna mais alta y856). São 5 colunas de 350px
   (18.96%) com gutter de 24px, escalonadas na vertical; o bloco de texto
   central sobe para 912px (49.35%) com o título em Title40 (40/48). */
@media (min-width: 1441px) {
  .cidade-mosaic { aspect-ratio: 1848 / 776; }
  .cidade__content { width: 49.351%; }
  .cidade__title { font-size: 2.5rem; line-height: 48px; }   /* Title40 */
  .cidade-foto { width: 18.960%; }
  .cidade-foto--teatro    { left: 0;       top: 5.670%;  height: 38.660%; }
  .cidade-foto--malavazzi { left: 0;       top: 47.423%; height: 29.897%; }
  .cidade-foto--ecologico { left: 20.260%; top: 43.557%; height: 44.330%; }
  .cidade-foto--bicicross { left: 40.521%; top: 47.938%; height: 23.196%; }
  .cidade-foto--estadio   { left: 40.521%; top: 74.227%; height: 23.196%; }
  .cidade-foto--museu     { left: 60.781%; top: 43.557%; height: 38.660%; }
  .cidade-foto--shopping  { left: 81.041%; top: 16.495%; height: 25.773%; }
  .cidade-foto--fonte     { left: 81.041%; top: 45.361%; height: 25.773%; }
  .cidade-foto--polo      { left: 81.041%; top: 74.227%; height: 25.773%; }
}

/* =========================================================
   Hero (node 2506:1165)
   ========================================================= */
.hero {
  /* O fundo em degradê (.bg-marca) ocupa 100% da altura da tela (full-width). */
  min-height: 100vh;   /* fallback p/ navegadores sem dvh */
  min-height: 100dvh;  /* altura real visível (desconta a barra do navegador no mobile) */
  display: flex;
  flex-direction: column;
}
/* O container (capado em 1440px do Layout Grid) recebe a margem de 36px
   nos 4 lados; o card ocupa as 12 colunas (1368px no desktop) e preenche
   a altura da viewport menos essas margens de topo/base. */
.hero .container-lp {
  width: 100%;   /* preenche a largura (capa em 1440); sem isso as margens
                    auto num flex-column encolhem o container ao conteúdo */
  padding: var(--gutter);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Palco: foto (60%) sobre fundo escuro, dentro do card arredondado.
   A "máscara" é o recorte do card (border-radius + overflow:hidden),
   mesmo padrão da seção .planta__stage. */
.hero__stage {
  position: relative;
  flex: 1;                /* preenche a altura disponível da viewport */
  min-height: 0;          /* sem piso fixo: o card se adapta à resolução e
                             nunca ultrapassa 100dvh − 2×36px (margens) */
  display: flex;
  overflow: hidden;
  border-radius: 16px;
  background: var(--preto);
  /* só padding vertical — o respiro horizontal vem das colunas de respiro
     do grid interno (1 col de cada lado), ver .hero__inner.
     Baseado na ALTURA (vh) p/ encolher em telas baixas e o conteúdo caber. */
  padding-block: clamp(1.25rem, 4vh, 5.5rem);
}
/* Foto de fundo (Figma node 2512:287 "SL-01"): cover, centralizada (50%),
   opacidade 0.6 sobre o preto. blur no Figma = 0px (sem desfoque). */
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/hero-bg.jpg") 50% / cover no-repeat;
  opacity: .6;
}

/* Grid de 12 colunas dentro do card (mesmas 92px/gutter 24px do Layout
   Grid da página): 1 col de respiro | 5 cols conteúdo | 1 col de gap |
   4 cols formulário | 1 col de respiro. */
.hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter); /* 24px — gutter do Layout Grid */
  align-items: center;
}

/* Coluna esquerda: 5 colunas (após 1 col de respiro). Logo no topo,
   bloco (tag+h1+stats) embaixo. */
.hero__left {
  grid-column: 2 / span 5;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;        /* grupo (logo+conteúdo) centralizado na vertical, como o form */
  gap: 48px;                      /* logo → tag "Obras em andamento" = 48px */
}
.hero__logo {
  width: 236px;
  height: auto;
}

/* Foto com logo/tag/título sobrepostos (node 4502:426) — só mobile, ver
   media query abaixo. Fora dela, some por completo. */
.hero__photo-mobile { display: none; }
.hero__block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hero__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .32));
}
.hero__title {
  margin: 0;
  color: var(--branco);
}

/* CTA branco (node 2602:4417) — só aparece no mobile (ver media query),
   onde substitui o formulário do hero. */
.hero__cta {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 32px;
  border: 1px solid rgba(30, 30, 30, .08);
  border-radius: 40px;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .875rem;   /* 14 */
  line-height: 20px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__cta:hover { background: #f5f5f5; }

/* Caixa de stats (glass) — o container recebe fundo/blur/padding; a trilha
   interna (.hero__stats-track) é a linha flex com os 3 big numbers. */
.hero__stats {
  width: 100%;
  max-width: 100%;
  padding: 24px 32px;
  border-radius: 8px;
  background: rgba(30, 30, 30, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__stats-track {
  display: flex;
  align-items: center;
  gap: 24px;             /* dividir as 3 colunas igualmente no desktop */
}
.hero-stat {
  flex: 1 1 0;            /* cada bignumber ocupa 1/3 igual da largura */
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hero-stat__label {
  margin: 0;
  color: var(--branco);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .75rem;
  line-height: 16px;
}
.hero-stat__label strong {
  font-family: var(--font-display);
  font-weight: 700;
}
.hero-stat__value {
  margin: 0;
  color: var(--branco);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;      /* 40 */
  line-height: 48px;
  white-space: nowrap;
}
.hero-stat__unit {
  font-size: 1.125rem;    /* 18 — só a unidade, não o número */
  line-height: 24px;
}
.hero-stat__sep {
  align-self: stretch;
  flex-shrink: 0;
  width: 1px;
  background: rgba(255, 255, 255, .2);
}
/* Separador de loop: só existe no mobile (marquee). No desktop fica oculto
   para os 3 stats seguirem com apenas 2 separadores. */
.hero-stat__sep--loop { display: none; }

/* Coluna direita: formulário — 4 colunas (col 8), deixando a col 7 de gap
   com a esquerda e a col 12 de respiro à direita. */
.hero__form-wrap {
  grid-column: 8 / span 4;
}

/* Responsivo */
@media (max-width: 991.98px) {
  /* empilha: 1 coluna só; o respiro horizontal volta pro padding do card */
  .hero__stage { min-height: 0; padding-inline: clamp(1.5rem, 6vw, 5.5rem); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__left { grid-column: auto; align-self: auto; }
  .hero__form-wrap { grid-column: auto; }
}
/* Mobile (≤767.98px): layout do hero conforme o Figma (node 4502:426).
   Muda bastante em relação ao desktop:
   - a foto vira um card com cantos arredondados (8px) e margem, em vez de
     full-bleed; logo, tag e título ficam sobrepostos NELA (grid empilhado
     em .hero__photo-mobile — ver mais abaixo), não mais na coluna de texto;
   - o botão "Fale com um corretor" fica logo abaixo do card da foto;
   - os stats continuam numa barra escura (glass) fixada no rodapé. */
@media (max-width: 767.98px) {
  .hero .container-lp { padding: 0; }

  .hero__stage {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    background: transparent;        /* deixa aparecer o gradiente .bg-marca */
    padding: 0;                     /* zera também o padding-inline da regra ≤991 */
    /* Reserva a altura EXATA da barra de stats (absoluta, ancorada no
       rodapé do stage) — sem isso o card da foto (flex, cresce livremente)
       avança por baixo dela. O respiro de 32px até o início desse fundo
       vem da própria margin-bottom do .hero__photo-mobile, não de um
       "extra" aqui (por isso é a altura exata dos stats, ~144px, sem
       folga somada). */
    padding-bottom: 144px;
  }
  /* A foto full-bleed antiga (::before) dá lugar ao card real
     (.hero__photo-mobile, abaixo) — remove a caixa do pseudo-elemento. */
  .hero__stage::before { content: none; }

  /* Card da foto: 32px de margem no topo e na base (na base, é o respiro
     até o INÍCIO do fundo dos big numbers — ver padding-bottom do
     .hero__stage acima); nas laterais continua --gutter. Preto (#000000,
     igual ao desktop) atrás da foto a 60%, e logo+textos centralizados
     como um bloco só na altura da máscara (grid empilhado, todos com
     grid-area:1/1). */
  .hero__photo-mobile {
    display: grid;
    grid-template-rows: 1fr;
    order: 0;
    flex: 1 1 auto;
    min-height: 300px;              /* nunca colapsa atrás do botão/stats */
    margin: 32px var(--gutter);
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    position: relative;
  }
  .hero__photo-mobile > * { grid-area: 1 / 1; }
  .hero__photo-mobile-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .6;
  }
  /* Logo + tag/título + botão: um grupo só, centralizado (vertical E
     horizontal) na altura/largura da máscara — o botão "Fale com um
     corretor" agora faz parte desse mesmo bloco (não fica mais fora da
     foto, ver print de referência). */
  .hero__photo-mobile-content {
    place-self: center;
    position: relative;             /* cria contexto de empilhamento próprio —
      sem isso a foto (mesmo atrás no DOM) pintava por cima do logo/texto,
      deixando tudo com aparência "transparente" por baixo. */
    z-index: 1;
    width: 100%;                    /* base pro botão (width:100%) resolver
      contra a largura do card, não contra o conteúdo (senão ele encolhe
      pro tamanho do texto/logo em vez de esticar). */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;                      /* título → botão */
    padding: 0 24px;
  }
  .hero__photo-mobile-logo {
    width: 200px;
    height: auto;
    margin-bottom: 24px;            /* soma com o gap:24 do pai = 48px até a tag */
    opacity: 1;                     /* sem transparência */
  }
  .hero__photo-mobile-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .32));
  }
  .hero__photo-mobile-title {
    margin: 0;
    color: var(--branco);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;    /* 32 */
    line-height: 40px;
  }

  .hero__inner {
    position: static;               /* stats passam a se ancorar no .hero__stage */
    flex: 0 0 auto;                 /* altura natural */
    order: 1;                       /* depois do card da foto */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 0;                     /* botão já mora dentro do card da foto; só sobra
                                        o respiro (reservado no .hero__stage) até os stats */
    text-align: center;
  }

  .hero__left {
    grid-column: auto;
    align-self: auto;
    align-items: center;
    gap: 32px;
  }
  /* Logo e tag/título saem daqui — já aparecem sobrepostos na foto acima
     (.hero__photo-mobile). Ficam só no DOM pro desktop/tablet e para leitores
     de tela em telas de celular ficarem com a versão da foto (a outra some). */
  .hero__logo,
  .hero__texto { display: none; }

  .hero__block {
    gap: 24px;
    align-items: center;
    width: 100%;
  }

  .hero__cta { display: flex; }
  .hero__form-wrap { display: none; }

  /* Barra de stats: full-width, fixada no rodapé, sobre a faixa de foto.
     O container recorta o marquee; a trilha rola horizontalmente (JS). */
  .hero__stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;              /* alinhado à base do hero (.hero__stage = 100dvh) */
    width: 100%;
    max-width: none;
    padding: 32px 24px;     /* topo/base 32px */
    border-radius: 0;
    overflow: hidden;
    text-align: left;
  }
  .hero__stats-track {
    width: max-content;       /* a trilha fica maior que o container p/ rolar */
    align-items: flex-end;    /* items-end do Figma (node 2554:2710) */
    gap: 24px;
    will-change: transform;
  }
  /* Cada big number com largura fixa de 132px (node 2554:2711/2715/2720). */
  .hero__stats .hero-stat {
    flex: 0 0 132px;
    width: 132px;
  }
  .hero__stats .hero-stat__sep {
    display: block;
    align-self: stretch;
  }

  /* Sem movimento: em vez do loop, a barra permite rolagem manual (swipe),
     para não esconder o 3º stat com as larguras fixas. */
  @media (prefers-reduced-motion: reduce) {
    .hero__stats { overflow-x: auto; }
  }
}

/* Desktop grande (> 1440px): tipografia do hero escalada conforme o Figma
   (node 2589:3455). Acima de 1440 o card ganha largura; o H1 e os big numbers
   sobem para Title56 (56/64) e as unidades (m²/mil m²) para Title32 (32/40).
   Até 1440px permanecem os tamanhos base (Title40 / 40 / 18). */
@media (min-width: 1441px) {
  .hero__title { font-size: 3.5rem; line-height: 64px; }      /* Title56 */
  .hero-stat__value { font-size: 3.5rem; line-height: 64px; } /* 56/64 */
  .hero-stat__unit { font-size: 2rem; line-height: 40px; }    /* Title32 */
}

/* =========================================================
   Masterplan / Implantação (node 2506:1200)
   ========================================================= */
.masterplan {
  position: relative;
  overflow: hidden;
  padding-bottom: var(--section-py);
  background: var(--branco);
}
.masterplan__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
  align-items: start;
}

/* Conteúdo — largura fixa de 492px (node 2516:942), 100px do topo e
   100px da borda esquerda da seção (36px já vêm do padding do
   .container-lp, então falta só mais 64px). Sem padding-top na seção:
   esses 100px JÁ SÃO o espaçamento do topo — somar um padding-block
   por cima duplicava o respiro (bug reportado). */
.masterplan__content {
  grid-column: span 5;
  justify-self: start;
  align-self: start;
  width: 492px;
  max-width: 100%;
  margin-left: calc(100px - var(--gutter));
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.masterplan__textos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.masterplan__title { margin: 0; max-width: 400px; }
.masterplan__textos p { margin: 0; color: var(--preto); max-width: 430px; }

/* Legenda 1–9 (2 colunas) */
.masterplan-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  width: 100%;
}
.mp-leg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: .875rem;   /* 14 */
  line-height: 24px;
  color: var(--preto);
}
.mp-leg__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 1000px;
  background: rgba(194, 24, 91, .08);
  color: var(--magenta);
  font: var(--label);   /* Gotham Bold 12/16 */
}

/* Figura da implantação — 7 das 12 colunas. A caixa da figura É a
   bounding-box exata da arte no Figma (node 2516:732: 786.02 × 624.55),
   então o PNG (recortado justo na silhueta) preenche 100% e os pinos
   são posicionados em % dessa mesma caixa — batem pixel a pixel.
   margin-top de 88px = distância do topo da seção até o mapa (y:88.44). */
.masterplan__figure {
  grid-column: span 7;
  margin-top: 88px;
  position: relative;
  width: 100%;
  aspect-ratio: 786.02 / 624.55;
}

/* Mapa de implantação — PNG recortado justo na silhueta (sem sombra
   embutida). Preenche toda a caixa da figura; a sombra é aplicada via
   CSS, consistente com o design system. */
.masterplan-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(8px 16px 32px rgba(30, 30, 30, 0.32));
}

/* Pinos numerados */
.mp-pin {
  position: absolute;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--branco);
  color: var(--magenta);
  font: var(--button);   /* Gotham Bold 14/20 */
  box-shadow: 0 6px 12px rgba(30, 30, 30, .4);
  /* left/top marcam o CENTRO do pino (% da caixa da figura = bbox da arte);
     o margin negativo desloca meio badge (16px) sem usar transform, que
     fica livre para o scale/fade do GSAP. */
  margin: -16px 0 0 -16px;
  will-change: transform, opacity; /* fade/scale do scrub do pin sem repintar o mapa */
}
/* Centros dos 9 pinos em % da bbox da arte (786.02 × 624.55), medidos por
   detecção de blobs no render do Figma node 2506:1200 e conferidos com os
   metadados (frame 2516:747). */
.mp-pin--1 { left: 37.39%; top: 84.40%; }
.mp-pin--2 { left: 10.92%; top: 75.54%; }
.mp-pin--3 { left: 50.66%; top: 75.55%; }
.mp-pin--4 { left: 24.46%; top: 57.38%; }
.mp-pin--5 { left: 52.17%; top: 57.38%; }
.mp-pin--6 { left: 24.47%; top: 37.46%; }
.mp-pin--7 { left: 50.17%; top: 37.48%; }
.mp-pin--8 { left: 39.40%; top: 7.13%; }
.mp-pin--9 { left: 49.92%; top: 20.26%; }

/* Lupa de zoom (node 2631:363) — só mobile: JS calcula tamanho, posição e
   o background (mesma imagem do mapa, ampliada) a cada toque/arrasto. */
.masterplan__zoom-lens {
  display: none;
  position: absolute;
  z-index: 5;
  border: 4px solid var(--branco);
  border-radius: 50%;
  box-shadow: 3.832px 7.664px 15.328px rgba(30, 30, 30, .32);
  background-color: var(--branco); /* o PNG do mapa tem áreas transparentes
    (silhueta recortada) — sem isso, o que estiver atrás da seção aparecia
    por trás da lente nesses trechos. */
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.masterplan__zoom-lens.is-active { opacity: 1; }
@media (max-width: 767.98px) {
  .masterplan__figure { touch-action: none; }
  .masterplan__zoom-lens { display: block; }
}

/* Marquee gigante ao fundo */
.masterplan__marquee {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  opacity: .08;
  pointer-events: none;
  align-items: center;
}
.masterplan__marquee span:not(.mp-dot) {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 164px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cinza);
  white-space: nowrap;
}
.mp-dot {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cinza);
}

/* Responsivo: empilha conteúdo e mapa */
@media (max-width: 991.98px) {
  .masterplan { padding-top: var(--section-py); }
  .masterplan__inner { grid-template-columns: 1fr; }
  .masterplan__content,
  .masterplan__figure { grid-column: 1 / -1; }
  .masterplan__content { width: 100%; margin-left: 0; margin-top: 0; }
  .masterplan__figure { margin-top: 40px; }
  .masterplan__marquee span:not(.mp-dot) { font-size: 90px; }
}
/* Mobile: coluna única com a legenda em ordem numérica 1→9 (em vez da
   ordem "por coluna" 1,6,2,7,3,8,4,9,5 usada no grid de 2 colunas). O
   HTML mantém a ordem original (necessária pro grid 2-col do desktop:
   1–5 na coluna 1, 6–9 na coluna 2) — a reordenação visual é só via
   `order`, por posição (nth-child) já que os <li> não têm classe própria. */
@media (max-width: 767.98px) {
  .masterplan-legenda { grid-template-columns: 1fr; }
  .masterplan-legenda .mp-leg:nth-child(1) { order: 1; } /* 1 Praça da Centralidade */
  .masterplan-legenda .mp-leg:nth-child(2) { order: 6; } /* 6 Playground */
  .masterplan-legenda .mp-leg:nth-child(3) { order: 2; } /* 2 Arena Beach */
  .masterplan-legenda .mp-leg:nth-child(4) { order: 7; } /* 7 Praça dos Esportes */
  .masterplan-legenda .mp-leg:nth-child(5) { order: 3; } /* 3 Praça dos Aromas */
  .masterplan-legenda .mp-leg:nth-child(6) { order: 8; } /* 8 Praça da Convivência */
  .masterplan-legenda .mp-leg:nth-child(7) { order: 4; } /* 4 Pet Space */
  .masterplan-legenda .mp-leg:nth-child(8) { order: 9; } /* 9 Praça da Contemplação */
  .masterplan-legenda .mp-leg:nth-child(9) { order: 5; } /* 5 Playground e churrasqueira */
  .mp-leg { font-size: 1.125rem; } /* 18px, line-height 24 herdada */
}

/* Mobile: inverte a ordem (mapa com a animação primeiro, textos depois),
   título em Title28 e botão ocupando a largura toda com o texto centralizado. */
@media (max-width: 767.98px) {
  /* Posição fixa (print de referência): 56px do topo do background da
     seção até o topo da imagem do mapa. */
  .masterplan { padding-top: 56px; }
  .masterplan__figure { order: -1; margin-top: 0; margin-bottom: 0; }
  /* 56px no total até o título: 24px já vêm do gap do grid (.masterplan__inner),
     + 32px aqui — sem padding-top no título nem margin-bottom na figura. */
  .masterplan__content { margin-top: 32px; }
  .masterplan__title { font-size: 1.75rem; line-height: 36px; } /* Title28 */
  .masterplan__content .btn-lp { width: 100%; }

  .masterplan__marquee {
    top: 316px;
    bottom: auto;
  }
}

/* Desktop grande (> 1440px): formatação dos textos do masterplan conforme o
   Figma (node 2589:3532). O bloco de conteúdo cresce de 492 → 690px, o gap
   entre blocos de 32 → 40px, e o título sobe de Title28 → Title40 (40/48),
   usando toda a largura do bloco (sem o cap de 400px). Corpo, legenda e
   badges permanecem nos tamanhos base (16 / 14 / 12). max-width:100% impede
   que os 690px estourem a faixa de 5 colunas em resoluções logo acima de 1440. */
@media (min-width: 1441px) {
  .masterplan__content { width: 690px; gap: 40px; }
  .masterplan__title { font-size: 2.5rem; line-height: 48px; max-width: none; } /* Title40 */
  .masterplan__textos p { max-width: none; }
  /* Listagem (node 2589:3536): label sobe de Body-SM (14) → Body-LG (18/24)
     e o espaçamento vertical entre itens de 8 → 16px. Coluna mantém 24px,
     badge/número mantêm 24px/12px. */
  .masterplan-legenda { gap: 16px 24px; }
  .mp-leg { font-size: 1.125rem; } /* 18px, line-height 24 herdada */
}

/* =========================================================
   Carrossel Arena Beach (node 2516:970)
   ========================================================= */
/* .arena: altura/margens via regra dos folds de tela cheia (container 36px) */
.arena__stage {
  position: relative;
  outline: none;
}

/* Viewport — absoluto (inset:0) para PREENCHER o stage sem que a proporção
   intrínseca das fotos infle a altura da seção (senão, em telas largas, a
   foto 16:9 forçava a seção a passar de 100dvh). NÃO recorta (sem overflow):
   é só o host de posicionamento das setas/paginador, que ficam de fora da
   máscara (.arena__mask) de propósito — no desktop elas escapam ~20px pra
   fora do card, na "sobra" do gutter (ver .arena__arrow). Se o overflow:hidden
   estivesse aqui, ele cortaria justamente essa parte que deve escapar. */
.arena__viewport {
  position: absolute;
  inset: 0;
}
/* Máscara que recorta os slides (a trilha é maior que 1 slide e desliza via
   transform) — o overflow:hidden e o border-radius do card vivem aqui, não
   no viewport, senão clipariam as setas (ver comentário acima). */
.arena__mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--preto);
}
.arena__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.arena-slide {
  position: relative;   /* âncora da legenda sobreposta de cada slide */
  flex: 0 0 100%;
  height: 100%;
}
.arena-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile (≤767.98px) e desktop (≥992px): os slides deixam de ficar lado a
   lado (a troca não é mais um slide horizontal do track) e passam a ficar
   EMPILHADOS, um sobre o outro — o crossfade (fade + scale) é feito via
   GSAP, ver main.js. Só o slide ativo começa visível; os demais ficam
   prontos, escondidos atrás. A máscara (cantos + recorte) deixa de ser uma
   só compartilhada (.arena__mask, usada só no tablet) e passa a viver em
   CADA slide — assim o scale do crossfade encolhe a foto JUNTO com a
   moldura arredondada, não só o conteúdo por dentro de um recorte fixo.
   Tablet (768–991.98px) fica de fora e continua com o slide horizontal. */
@media (max-width: 767.98px), (min-width: 992px) {
  .arena__track { display: block; position: relative; }
  .arena__mask { overflow: visible; border-radius: 0; background: none; }
  .arena-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    border-radius: 16px;
  }
  .arena-slide:first-child { opacity: 1; z-index: 2; }
}

/* Legenda por slide (node 2591:3989): sobreposta no topo-esquerdo da foto,
   40px das bordas, 324px de largura. Caixa de título (gradiente) + caixa de
   texto (glass escuro), empilhadas — cada uma com cantos 8px. */
.arena__legenda {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 2;
  width: 324px;
  max-width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  gap: 8px;   /* leve separação entre a caixa de título e a de texto */
}
/* Legenda mobile (node 2614:4602): mesma dupla titulo+caption clonada do
   slide ativo (via JS), mas fora da foto — escondida por padrão (só existe
   nas resoluções de celular, ver media query mais abaixo). */
.arena__legenda--mobile { display: none; }
.arena__titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 32px;
  border-radius: 8px;
  background: var(--gradiente);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.arena__titulo-h {
  margin: 0;
  color: var(--branco);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;      /* Title24 — 24/32 */
  line-height: 32px;
}
.arena__titulo-sub {
  margin: 0;
  color: var(--branco);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;    /* Body-LG — 18/24 */
  line-height: 24px;
}
.arena__titulo-sub strong { font-family: var(--font-display); font-weight: 700; }
.arena__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px 32px;
  border-radius: 8px;
  background: rgba(30, 30, 30, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.arena__caption-title {
  margin: 0;
  color: var(--branco);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;    /* Body-LG — 18/24 */
  line-height: 24px;
}
.arena__caption-desc {
  margin: 0;
  color: var(--branco);
  font-family: var(--font-body);
  font-size: .875rem;     /* Body-SM — 14/24 */
  line-height: 24px;
}

/* Setas */
.arena__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: 0 8px 8px rgba(30, 30, 30, .08);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
/* Hover (node 2522:1099): inverte — fundo em gradiente (roxo→magenta) e o
   chevron passa a branco (o stroke via CSS vence o atributo do <path>). */
.arena__arrow:hover { background: var(--gradiente-hover); }
.arena__arrow:hover svg path { stroke: var(--branco); }
.arena__arrow:active { transform: translateY(-50%) scale(.94); }
.arena__arrow:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
/* Setas a 16px da borda do container (a "margem" da página), não da imagem.
   Como o stage começa a --gutter da borda do container, desloca-se para fora
   em (16px − gutter) para a borda externa da seta cair a 16px da margem. */
.arena__arrow--prev { left: calc(16px - var(--gutter)); }
.arena__arrow--next { right: calc(16px - var(--gutter)); }
.arena__arrow svg { width: 20px; height: 20px; }
.arena__arrow--next svg { transform: scaleX(-1); }

/* Paginador */
.arena__paginador {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 8px 24px;
  border-radius: 32px;
  background: rgba(30, 30, 30, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--branco);
  font-family: var(--font-body);
  font-size: .75rem;      /* 12 */
  line-height: 16px;
}
.arena__paginador [data-arena-current] {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Mobile (node 2614:4597) — o carrossel deixa de ser o fold full-viewport e
   vira um card compacto: foto com altura fixa (340px) + legenda do slide
   ativo abaixo (clonada via JS), dentro de uma moldura fina. Setas e
   paginador são filhas do viewport (ver HTML) — no desktop isso não muda
   nada porque lá o viewport já ocupa os mesmos limites do stage (inset:0);
   aqui elas passam a ficar centralizadas/ancoradas na FOTO especificamente,
   não no card inteiro (foto + legenda, que tem altura variável). */
@media (max-width: 767.98px) {
  .arena { min-height: 0; }
  .arena > .container-lp { padding: 0; flex: none; }
  .arena__stage {
    flex: none;
    display: flex;
    flex-direction: column;
    padding: 46px 24px;
    border: 1px solid rgba(109, 109, 109, .24);
    border-radius: 0;
  }
  .arena__viewport {
    position: relative;
    height: 340px;
  }
  .arena__mask { border-radius: 8px; }
  /* Quem recorta de verdade agora é o .arena-slide (máscara individual do
     crossfade, ver regra combinada mobile+desktop acima) — mantém os 8px
     já usados no card mobile, em vez dos 16px do desktop/tablet. */
  .arena-slide { border-radius: 8px; }
  /* A legenda por slide (overlay) some — usa-se a legenda-mobile clonada. */
  .arena-slide .arena__legenda { display: none; }

  /* Setas: 8px da borda verdadeira da tela (o stage agora é full-bleed,
     sem gutter do container para compensar como no desktop) — como as setas
     são filhas do .arena__viewport, que já nasce inset 24px de padding +
     1px de borda do .arena__stage (25px), subtraímos esse inset do
     respiro desejado de 8px pra chegar no valor relativo certo. */
  .arena__arrow--prev { left: calc(8px - 24px - 1px); }
  .arena__arrow--next { right: calc(8px - 24px - 1px); }

  .arena__paginador { bottom: 8px; }

  .arena__legenda--mobile {
    display: flex;
    position: static;   /* cancela o position:absolute/top/left da .arena__legenda base */
    flex-direction: column;
    gap: 0;             /* box do gradiente e box do descritivo colados */
    width: 100%;
    max-width: none;
  }
  .arena__caption { background: rgba(30, 30, 30, .8); } /* opacidade 80% no mobile (era 60%) */
}
@media (max-width: 575.98px) {
  .arena__legenda { width: auto; right: 40px; }
}

/* =========================================================
   Modal de confirmação de cadastro (node 2594:4237)
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;                    /* aberto via .is-open */
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30, 30, 30, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal-overlay.is-open {
  display: flex;
  animation: modal-fade .2s ease;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

.msg-form {
  width: 100%;
  max-width: 532px;                 /* largura do modal no Figma */
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  background: var(--branco);
  border-radius: 16px;
  box-shadow: -8px 8px 24px rgba(39, 52, 139, .08);
}
.msg-form__logo {
  width: 179px;
  height: auto;
}
.msg-form__texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.msg-form__title { margin: 0; }
.msg-form__desc {
  margin: 0;
  color: #212121;
  font-family: var(--font-body);
  font-size: .875rem;               /* Body-SM 14/24 */
  line-height: 24px;
}
.msg-form__desc strong { font-family: var(--font-display); font-weight: 700; }
.msg-form__fechar {
  border: 0;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 24px;
  background: rgba(194, 24, 91, .08);
  color: var(--magenta);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .75rem;                /* 12 */
  line-height: 1;
}
.msg-form__fechar:hover { background: rgba(194, 24, 91, .16); }
.msg-form__fechar:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

@media (max-width: 575.98px) {
  .msg-form { padding: 48px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.is-open { animation: none; }
}