.ai-bubble { position: fixed; right: 22px; bottom: 92px; z-index: 60; }

.ai-bubble__toggle {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: #1F463D; color: #F3EFE7; font-size: 24px;
  box-shadow: 0 10px 30px rgba(15, 36, 31, .35);
}
.ai-bubble__toggle:focus-visible { outline: 3px solid #F3EFE7; outline-offset: 2px; }

.ai-bubble__panel {
  position: absolute; right: 0; bottom: 70px; width: min(340px, calc(100vw - 44px));
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 36, 31, .28); display: flex; flex-direction: column;
}
.ai-bubble__header { background: #1F463D; color: #F3EFE7; padding: 14px 16px; font-weight: 600; }
.ai-bubble__log { max-height: 300px; overflow-y: auto; padding: 14px 16px; font-size: 14px; }
.ai-bubble__msg { margin: 0 0 10px; line-height: 1.5; }
.ai-bubble__msg--user { text-align: right; color: #17322C; font-weight: 600; }
.ai-bubble__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #E6E1D7; }
.ai-bubble__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ai-bubble__input { flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid #C9C2B4; border-radius: 8px; }
.ai-bubble__send { min-height: 44px; padding: 0 16px; border: none; border-radius: 8px; background: #1F463D; color: #F3EFE7; cursor: pointer; }

@media (max-width: 480px) { .ai-bubble { right: 16px; bottom: 86px; } }
/* Vitrine da Ana Santos — raiz de anasantosimoveis.com.br.
   Paleta da marca dela: champanhe dourado sobre grafite. Prefixo `.asv-`. */
.asv {
  --asv-fundo: #141312;
  --asv-fundo-2: #1D1B19;
  --asv-texto: #D9D2C5;
  --asv-claro: #F6F1E7;
  --asv-ouro: #C8A96A;
  --asv-linha: rgba(200, 169, 106, 0.25);
  background: var(--asv-fundo);
  color: var(--asv-texto);
  font-family: "Inter", system-ui, sans-serif;
  min-height: 100vh;
}
.asv :where(h1, h2, p) { margin: 0; }
.asv-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.asv-olho {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--asv-ouro);
}
.asv h1, .asv h2 {
  font-family: "Marcellus", Georgia, serif; font-weight: 400;
  color: var(--asv-claro); line-height: 1.15;
}
.asv h1 em, .asv h2 em { font-style: normal; color: var(--asv-ouro); }

.asv-topo { padding: 56px 0 40px; text-align: center; border-bottom: 1px solid var(--asv-linha); }
.asv-topo__logo { width: 220px; height: auto; margin: 0 auto 28px; display: block; }
.asv-topo h1 { font-size: clamp(30px, 5vw, 48px); margin-top: 12px; }

.asv-sec { padding: 56px 0; }
.asv-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.asv-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--asv-fundo-2); border: 1px solid var(--asv-linha);
  border-radius: 8px; overflow: hidden; transition: border-color .2s, transform .2s;
}
.asv-card:hover { border-color: var(--asv-ouro); transform: translateY(-2px); }
.asv-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
.asv-card__texto { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; }
.asv-card__onde { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--asv-ouro); }
.asv-card__nome { font-family: "Marcellus", Georgia, serif; font-size: 24px; color: var(--asv-claro); }
.asv-card__ficha { font-size: 15px; }
.asv-card__ver { margin-top: 8px; font-size: 14px; color: var(--asv-ouro); }

.asv-falar { background: var(--asv-fundo-2); border-top: 1px solid var(--asv-linha); }
.asv-falar__wrap { display: flex; align-items: center; gap: 40px; }
.asv-falar__foto { width: 220px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; flex: none; }
.asv-falar h2 { font-size: 34px; margin: 8px 0 10px; }
.asv-texto { font-size: 16px; margin-bottom: 22px; }
.asv-btn {
  display: inline-block; padding: 14px 24px; border-radius: 4px;
  background: var(--asv-ouro); color: #141312; font-weight: 600; text-decoration: none;
}
.asv-btn:hover { background: var(--asv-claro); }
.asv-fone { margin-top: 12px; font-size: 14px; }

.asv-rodape { padding: 32px 0 40px; font-size: 13px; line-height: 1.6; border-top: 1px solid var(--asv-linha); }
.asv-rodape strong { color: var(--asv-claro); font-weight: 600; }
.asv-rodape p + p { margin-top: 8px; opacity: .75; }

@media (max-width: 720px) {
  .asv-wrap { padding: 0 16px; }
  .asv-grade { grid-template-columns: 1fr; }
  .asv-falar__wrap { flex-direction: column; align-items: flex-start; gap: 24px; }
  .asv-falar__foto { width: 160px; }
}
/* ===========================================================================
   ATLÂNTICO GOLF — Av. Ermanno Dallari, 741, Barra da Tijuca
   Patrimar. Página montada em 18/09/2026 a partir do Book VIP e da ficha.

   A identidade é a do ATLÂNTICO, tirada do book:
   - turquesa da marca (#00B0B0) — logo, marca-texto, CTAs;
   - petróleo quase preto (#031A1C → #0B3033) nas faixas, como o fundo do book;
   - fundos claros levemente esverdeados, para não brigar com o turquesa;
   - títulos em caixa-alta espaçada e fina; recortes de foto em DIAGONAL
     (paralelogramos), a assinatura gráfica do book e do logo triangular.
   Fonte: Jost (geométrica, próxima da do book).

   Grade: container de 1320px, seções em clamp, grades auto-fit (briefing das LPs).
   =========================================================================== */

.ag {
  --claro:     #F3F7F7;   /* fundo do documento */
  --claro-2:   #E3EEEE;   /* seções alternadas */
  --petroleo:  #031A1C;   /* faixas escuras (fundo do book) */
  --petroleo-2:#0B3033;   /* títulos e botões sobre o claro */
  --petroleo-3:#154A4E;   /* hover */
  --turquesa:  #00B0B0;   /* cor da marca */
  --turquesa-2:#3FCACA;
  --turquesa-3:#007F83;   /* turquesa legível sobre o claro */
  --tinta:     #16292A;
  --tinta-2:   #45595A;
  --tinta-3:   #6F8283;
  --fio:       rgba(3, 26, 28, .14);
  --fio-claro: rgba(255, 255, 255, .16);

  --sans: Jost, "Futura PT", Futura, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --barra: 112px;

  font-family: var(--sans);
  color: var(--tinta);
  background: var(--claro);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.ag *, .ag *::before, .ag *::after { box-sizing: border-box; }

/* Resets locais — p, ul e a dentro de :where() para não anularem as classes. */
.ag h1, .ag h2, .ag h3 { margin: 0; color: inherit; font-weight: 400; }
.ag :where(p)  { margin: 0; }
.ag :where(ul) { margin: 0; padding: 0; list-style: none; }
.ag dl, .ag dd, .ag dt { margin: 0; }
.ag figure { margin: 0; }
.ag img { display: block; max-width: 100%; }
.ag :where(a) { color: var(--turquesa-3); text-decoration: none; }
.ag :where(a:hover) { color: var(--petroleo-2); }
.ag ::selection { background: var(--turquesa); color: var(--petroleo); }

.ag-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.ag-sec { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.ag-sec--claro  { background: var(--claro-2); }
.ag-sec--escuro { background: var(--petroleo); color: #fff; }

/* Recorte em diagonal — o paralelogramo do book. Só na imagem, para a legenda
   não ser cortada. */
.ag-diag img { clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }

/* --- Tipos ---------------------------------------------------------------- */

.ag-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--turquesa-3);
}
/* O filete de 36x1px que abre cada rótulo — assinatura comum às LPs da casa. */
.ag-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--turquesa);
}
.ag-olho--claro { color: var(--turquesa-2); }
.ag-hero__end { color: rgba(255, 255, 255, .88); }

/* Títulos: caixa-alta fina e espaçada, como no book; o <em> vira turquesa. */
.ag h1,
.ag h2 {
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ag h1 em,
.ag h2 em { font-style: normal; font-weight: 500; color: var(--turquesa-3); }
.ag-hero h1 em,
.ag-sec--escuro h2 em,
.ag-video h2 em,
.ag-falar h2 em { color: var(--turquesa-2); }
.ag h1 {
  max-width: 19ch;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.12;
}
.ag h2 {
  max-width: 22ch;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.22;
  color: var(--petroleo-2);
}
.ag-sec--escuro h2, .ag-video h2, .ag-falar h2 { color: #fff; }
.ag h3 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.3; color: var(--petroleo-2); }

.ag-texto { margin-top: 24px; max-width: 58ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); text-wrap: pretty; }
.ag-texto + .ag-texto { margin-top: 18px; }

.ag-nota { margin-top: 28px; max-width: 100ch; font-size: 13px; line-height: 1.7; color: var(--tinta-3); }
.ag-nota--clara { color: rgba(255, 255, 255, .55); }

.ag-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: clamp(32px, 4.5vw, 52px);
  flex-wrap: wrap;
}
.ag-cab p { max-width: 50ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); }
.ag-sec--escuro .ag-cab p { color: rgba(255, 255, 255, .78); }

.ag-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.ag-duas--centro { align-items: center; }

/* --- Botões --------------------------------------------------------------- */

.ag-btn {
  display: inline-block;
  min-height: 44px;
  padding: 16px 28px;
  border: 0;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ag .ag-btn--turquesa       { background: var(--turquesa);   color: var(--petroleo); }
.ag .ag-btn--turquesa:hover { background: var(--turquesa-2); color: var(--petroleo); }
.ag .ag-btn--petroleo       { background: var(--petroleo-2); color: #fff; }
.ag .ag-btn--petroleo:hover { background: var(--petroleo-3); color: #fff; }
.ag .ag-btn--escuro         { background: var(--petroleo);   color: #fff; }
.ag .ag-btn--escuro:hover   { background: var(--petroleo-2); color: #fff; }
.ag .ag-btn--linha-clara {
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}
.ag .ag-btn--linha-clara:hover { border-color: var(--turquesa-2); color: var(--turquesa-2); }
.ag-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .ag-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

.ag-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 56px);
}
.ag-topo__marca img { width: auto; height: clamp(22px, 3vw, 30px); opacity: .9; }
.ag .ag-topo__cta { padding: 11px 20px; font-size: 12px; }

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

.ag-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: min(100vh, 940px);
  padding-block: 150px clamp(48px, 6vh, 84px);
  overflow: hidden;
  color: #fff;
  background: var(--petroleo);
}
.ag-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ag-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(3, 26, 28, .55) 0%,
    rgba(3, 26, 28, .10) 26%,
    rgba(3, 26, 28, .60) 54%,
    rgba(3, 26, 28, .95) 100%);
}
.ag-hero__wrap { position: relative; }
.ag-hero__logo { width: clamp(130px, 13vw, 180px); height: auto; margin-bottom: clamp(18px, 3vw, 28px); }
.ag-hero h1 { color: #fff; }
.ag-hero__linha {
  margin-top: 24px;
  max-width: 56ch;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
}
.ag-hero__linha strong { display: block; margin-top: 8px; font-weight: 500; color: var(--turquesa-2); }
.ag-hero__precos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 40px);
}
.ag-preco__rot { margin-bottom: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.ag-preco__valor { font-size: clamp(32px, 3.8vw, 50px); font-weight: 300; line-height: 1; letter-spacing: .02em; }
.ag-preco__obs { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ag-preco__obs s { color: rgba(255, 255, 255, .55); }

/* --- Selo da campanha (hero) ----------------------------------------------- */

.ag-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 28px);
  padding: 10px 18px;
  border: 1px solid rgba(63, 202, 202, .6);
  font-size: 13px;
  color: #fff;
}
.ag .ag-selo { color: #fff; }
.ag-selo strong { font-weight: 500; color: var(--turquesa-2); }
.ag .ag-selo:hover { border-color: var(--turquesa-2); color: var(--turquesa-2); }

/* --- Campanha (bloco removível) -------------------------------------------- */

.ag-sec--turquesa { background: var(--turquesa); color: var(--petroleo); }
.ag-sec--turquesa .ag-olho { color: var(--petroleo); }
.ag-sec--turquesa .ag-olho::before { background: var(--petroleo); }
.ag-sec--turquesa h2 { color: var(--petroleo); }
.ag-sec--turquesa h2 em { color: #fff; }
.ag-sec--turquesa .ag-cab p { color: rgba(3, 26, 28, .8); }
.ag-sec--turquesa .ag-nota { color: rgba(3, 26, 28, .7); }

.ag-ofertas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
/* 5 cartões: 5 lado a lado; 3+2 no tablet; 1 coluna no celular — nunca 4+1. */
@media (max-width: 1100px) { .ag-ofertas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ag-ofertas { grid-template-columns: minmax(0, 1fr); } }
.ag-oferta { padding: clamp(22px, 2.6vw, 30px); background: var(--petroleo); color: #fff; }
.ag-oferta__torre { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--turquesa-2); }
.ag .ag-oferta__un { margin-top: 6px; font-size: 22px; font-weight: 400; letter-spacing: .04em; }
.ag-oferta__tipo { margin-top: 6px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .75); }
.ag .ag-oferta__de { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.ag .ag-oferta__por { margin-top: 4px; font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; line-height: 1.1; color: #fff; }
.ag .ag-oferta__menos { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--turquesa-2); }

/* --- Vista real ----------------------------------------------------------- */

.ag-vistas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.ag .ag-vistas img { aspect-ratio: 16 / 9; height: auto; }
.ag-sec--escuro .ag-fig figcaption { color: rgba(255, 255, 255, .7); }

/* --- Fotos da obra (reais) ------------------------------------------------- */

.ag-obra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.ag .ag-obra img { aspect-ratio: 3 / 2; height: auto; }

/* --- Números -------------------------------------------------------------- */

.ag-numeros { background: var(--petroleo); color: #fff; }
.ag-numeros__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--fio-claro);
}
.ag-numeros__n { font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; line-height: 1; color: var(--turquesa-2); }
.ag-numeros__l { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.ag-numeros__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* --- Figuras -------------------------------------------------------------- */

.ag-fig img { width: 100%; height: auto; object-fit: cover; }
.ag-fig figcaption { padding-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }

.ag-fotos-duas { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.ag .ag-fotos-duas img { aspect-ratio: 16 / 9; height: auto; }

/* --- Unidades ------------------------------------------------------------- */

/* 4 plantas: 2+2 ou 1 por linha (4 lado a lado ficaria ilegível). */
.ag-unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.ag-unidade { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fio); }
.ag-unidade__fig { padding: clamp(10px, 1.4vw, 16px); border-bottom: 1px solid var(--fio); }
.ag .ag-unidade__fig img { height: clamp(240px, 26vw, 340px); object-fit: contain; }
.ag-unidade__txt { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px); }
.ag-unidade__area { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--turquesa-3); }
.ag-unidade__d { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tinta-2); }
.ag .ag-unidade__v { margin-top: auto; padding-top: 14px; font-size: 24px; font-weight: 400; color: var(--petroleo-2); }
.ag-unidade__v span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }

.ag-pedir { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: clamp(32px, 4vw, 48px); }
.ag-pedir__s { font-size: 14px; color: var(--tinta-2); }

.ag-perspectivas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5vw, 64px);
}
.ag .ag-perspectivas img { aspect-ratio: 3 / 2; height: auto; }

/* --- Decorados ------------------------------------------------------------ */

.ag-decorados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.ag .ag-decorados img { aspect-ratio: 3 / 2; height: auto; }

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

.ag-video { background: var(--petroleo); color: #fff; }
.ag-video__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 112px);
}
.ag-video__p { margin-block: 24px 32px; max-width: 44ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }

/* O arquivo só baixa no clique (preload="none"): o que aparece é o poster,
   coberto por um <button> — assim também abre pelo teclado. */
.ag-player { position: relative; overflow: hidden; background: #000; }
.ag-player video { display: block; width: 100%; height: auto; aspect-ratio: 1030 / 720; object-fit: cover; background: #000; }
.ag-player__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(3, 26, 28, .55), rgba(3, 26, 28, 0) 70%),
    linear-gradient(to top, rgba(3, 26, 28, .6), rgba(3, 26, 28, .1));
  transition: opacity .25s;
}
.ag-player--on .ag-player__capa { opacity: 0; pointer-events: none; }
.ag-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--turquesa);
  color: var(--petroleo);
  transition: transform .2s, background .2s;
}
.ag-player__play svg { width: 40%; margin-left: 8%; }
.ag-player__capa:hover .ag-player__play,
.ag-player__capa:focus-visible .ag-player__play { transform: scale(1.06); background: var(--turquesa-2); }
.ag-player__rot { font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.ag-player__tempo { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

@media (prefers-reduced-motion: reduce) { .ag-player__capa, .ag-player__play { transition: none; } }

/* --- Lazer ---------------------------------------------------------------- */

.ag .ag-clube { margin-bottom: clamp(24px, 3vw, 40px); }
.ag .ag-clube img { height: clamp(220px, 34vw, 480px); }

.ag-lazer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.ag .ag-lazer img { height: clamp(220px, 22vw, 300px); }
.ag-lazer figcaption { letter-spacing: normal; text-transform: none; }
.ag-lazer__t { display: block; font-size: 17px; font-weight: 500; color: var(--petroleo-2); }
.ag-lazer__d { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; color: var(--tinta-2); }

.ag-servicos { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); background: var(--petroleo); color: #fff; }
.ag-servicos .ag-mais__rot { color: var(--turquesa-2); }
.ag-servicos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px clamp(20px, 3vw, 40px);
}
.ag-servicos__lista dt { font-size: 15px; font-weight: 500; }
.ag-servicos__lista dd { margin-top: 4px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.ag-servicos .ag-nota { color: rgba(255, 255, 255, .5); }

.ag-mais { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--fio); }
.ag-mais__rot { margin-bottom: 18px; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3); }
.ag-chips-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-chips-lista li {
  padding: 9px 16px;
  border: 1px solid var(--fio);
  background: rgba(255, 255, 255, .6);
  font-size: 14px;
  color: var(--tinta-2);
}

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

.ag-onde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ag-onde__mapa { position: relative; min-height: clamp(320px, 38vw, 480px); background: var(--claro); }
.ag-onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ag-onde__rot { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--turquesa-3); }
.ag-perto li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 14px;
  border-top: 1px solid var(--fio);
  font-size: 16px;
  color: var(--tinta);
}
.ag-perto li:last-child { border-bottom: 1px solid var(--fio); }
.ag-perto__t { flex: 0 0 auto; font-size: 14px; font-weight: 500; color: var(--turquesa-3); }
.ag .ag-onde__cta { margin-top: 28px; }

/* --- Condições ------------------------------------------------------------ */

.ag-pag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--fio-claro);
  border: 1px solid var(--fio-claro);
}
.ag-pag > div { padding: clamp(20px, 2.4vw, 30px); background: var(--petroleo); }
.ag-pag__valor { font-size: clamp(32px, 3.2vw, 46px); font-weight: 300; line-height: 1; color: var(--turquesa-2); }
.ag-pag__rot { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.ag-pag__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* --- Atendimento ---------------------------------------------------------- */

.ag-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* `height: auto` obrigatório: o height do atributo venceria o aspect-ratio. */
.ag-ana__foto { max-width: 400px; }
.ag .ag-ana__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.ag-ana__intro { margin-bottom: 28px; }
.ag-razoes { display: grid; gap: 18px; margin-bottom: 34px; }
.ag-razoes li {
  max-width: 54ch;
  padding-left: 20px;
  border-left: 2px solid var(--turquesa);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--tinta-2);
}
.ag-assina { margin-top: 18px; font-size: 13px; color: var(--tinta-3); }

/* --- Ficha técnica -------------------------------------------------------- */

.ag .ag-ficha__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.ag-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}
.ag-ficha > div { padding-block: 18px; border-bottom: 1px solid var(--fio); }
.ag-ficha dt { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--turquesa-3); }
.ag-ficha dd { margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--tinta-2); }
.ag .ag-implantacao { margin-top: clamp(40px, 5vw, 64px); padding: clamp(10px, 1.4vw, 16px); background: #fff; border: 1px solid var(--fio); }

/* --- Vizinho -------------------------------------------------------------- */

.ag .ag-vizinho .ag-btn { margin-top: 30px; }
.ag .ag-vizinho__icon { margin-top: 28px; font-size: 15px; }
.ag .ag-vizinho__icon a { text-decoration: underline; text-underline-offset: 3px; }
.ag .ag-vizinho img { aspect-ratio: 4 / 3; height: auto; }

/* --- Dúvidas -------------------------------------------------------------- */

.ag .ag-faq__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.ag-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.ag-faq details { border-bottom: 1px solid var(--fio); }
.ag-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 17px;
  font-weight: 500;
  color: var(--petroleo-2);
  cursor: pointer;
  list-style: none;
}
.ag-faq summary::-webkit-details-marker { display: none; }
.ag-faq summary:hover { color: var(--turquesa-3); }
.ag-faq__sinal { font-size: 24px; line-height: 1; color: var(--turquesa-3); }
.ag .ag-faq p { max-width: 72ch; padding-bottom: 22px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tinta-2); }

/* --- Contato -------------------------------------------------------------- */

.ag-falar { position: relative; overflow: hidden; background: var(--petroleo); color: #fff; }
.ag-falar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.ag-falar__veu { position: absolute; inset: 0; background: linear-gradient(180deg, #031A1C 0%, rgba(3, 26, 28, .78) 50%, #031A1C 100%); }
.ag-falar__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(72px, 9vw, 128px);
}
.ag-falar__p { margin-block: 24px 32px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.ag-ligar { margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.ag .ag-ligar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ag-creci { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .5); }

.ag-cartao { padding: clamp(26px, 3.4vw, 44px); background: var(--claro); color: var(--tinta); border-top: 4px solid var(--turquesa); }
.ag-chips__rot { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--petroleo-2); }
.ag-chips__rot span { display: block; margin-top: 4px; font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.ag-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.ag-chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(3, 26, 28, .3);
  border-radius: 2px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--petroleo-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ag-chip:hover { border-color: var(--petroleo-2); }
.ag-chip--on,
.ag-chip--on:hover { background: var(--petroleo-2); border-color: var(--petroleo-2); color: #fff; }

@media (prefers-reduced-motion: reduce) { .ag-chip { transition: none; } }

.ag-form { display: grid; gap: 18px; }
.ag-campo { display: grid; gap: 8px; }
.ag-rot { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.ag-rot__op { font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.ag-form input,
.ag-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(3, 26, 28, .25);
  border-radius: 2px;
  background: #fff;
  font-family: var(--sans);
  font-size: 16px;   /* evita o zoom automático do iOS */
  color: var(--tinta);
  outline: none;
  resize: vertical;
}
.ag-form input:focus,
.ag-form textarea:focus { border-color: var(--turquesa-3); }
.ag-form input::placeholder { color: var(--tinta-3); }
.ag-form__fine { font-size: 13px; color: var(--tinta-3); }

.ag-obrigada__t { font-size: 26px; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; color: var(--petroleo-2); }
.ag-obrigada__p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--tinta-2); }

/* --- Rodapé compartilhado ------------------------------------------------- */

.ag .rlp {
  --rlp-fundo: #021315;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
.ag .rlp__wordmark { max-width: 150px; }
/* O botão flutuante bateria na barra fixa — sobe ele. */
.ag .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.ag-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(3, 26, 28, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--fio-claro);
  color: #fff;
  transform: translateY(105%);
  transition: transform .25s ease;
}
.ag-barra--on { transform: translateY(0); }
.ag-barra__wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.ag-barra__txt { min-width: 0; }
.ag-barra__valor,
.ag-barra__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-barra__valor { font-size: 15px; font-weight: 500; }
.ag-barra__sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.ag .ag-barra .ag-btn { padding: 14px 22px; font-size: 12px; letter-spacing: .12em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .ag-barra { transition: none; } }

/* --- Lightbox ------------------------------------------------------------- */

.ag-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(2, 18, 20, .95);
}
.ag-lb[hidden] { display: none; }
.ag-lb__palco { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.ag .ag-lb__img { width: auto; height: auto; max-width: 100%; max-height: 80vh; margin-inline: auto; object-fit: contain; clip-path: none; }
.ag-lb__legenda { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ag-lb__fechar,
.ag-lb__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.ag-lb__fechar { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 40px; }
.ag-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 72px; font-size: 56px; }
.ag-lb__nav--ant  { left: 8px; }
.ag-lb__nav--prox { right: 8px; }
.ag-lb__fechar:hover, .ag-lb__nav:hover { color: var(--turquesa-2); }

.ag-zoom { cursor: zoom-in; }

/* --- Celular -------------------------------------------------------------- */

@media (max-width: 760px) {
  .ag h1, .ag h2 { letter-spacing: .04em; }
  .ag-diag img { clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
}
/* ===========================================================================
   B. UNIQUE — Barrinha, Barra da Tijuca
   Redesenho do handoff do designer (02/09/2026), "Análise de landing pages
   Anacintra.zip". A identidade é a da INCORPORADORA (Progress / arquitetura
   Insite): areia e pedra da fachada com as molduras verdes das varandas.
   Serifa humanista (Newsreader) no display, Karla no corpo e na interface.

   Grade e ritmo são idênticos aos do Grand Quartier — o que muda entre as duas
   páginas é a paleta e o tipo de display. Mexeu aqui, olhe lá também.

   Sem media query de layout: as grades colapsam por
   `repeat(auto-fit, minmax(Xpx, 1fr))` e o tipo respira por clamp().
   =========================================================================== */

.bun {
  --paper:   #F5F2EA;   /* fundo base (areia) */
  --surface: #E9E5DA;   /* seção alternada */
  --ink:     #22261F;   /* texto principal e faixa de contato */
  --deep:    #2A3327;   /* faixa de coberturas e card de disponibilidade */
  --body:    #3E4238;   /* parágrafos */
  --muted:   #6C6D62;   /* rótulos e descrições secundárias */
  --legal:   #8A8B7F;   /* disclaimers */
  --green:   #3D5140;   /* links, metragem, CTA do bloco da Ana */
  --sand:    #C0A87E;   /* acento: filetes, hover de CTA, destaque no escuro */
  --hair:    rgba(34, 38, 31, .14);

  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans:  Karla, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* A barra fixa quebra em duas linhas em tela estreita; a folga é generosa
     de propósito, senão ela come o fim do rodapé. */
  --barra: 120px;

  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

.bun *, .bun *::before, .bun *::after { box-sizing: border-box; }

/* Resets locais. Prefixo `.bun` obrigatório: o home.css do site pinta h1–h3 e
   dá margem a p/ul, e sem o prefixo a especificidade dele vence.

   🚨 p e ul vão dentro de :where() de propósito. `.bun p` (0,1,1) vence
   `.bun-hero__linha` (0,1,0) e MATA toda margem declarada por classe — foi
   exatamente o que aconteceu no ONLIFE. Com `.bun :where(p)` o peso cai para
   (0,1,0): ainda ganha do `p` solto do home.css, mas empata com as classes
   daqui, e no empate vence quem vem depois — que são elas. */
.bun h1, .bun h2, .bun h3 { margin: 0; color: var(--ink); font-weight: 400; }
.bun :where(p)  { margin: 0; }
.bun :where(ul) { margin: 0; padding: 0; list-style: none; }
.bun dl, .bun dd, .bun dt { margin: 0; }
.bun figure { margin: 0; }
.bun img { display: block; max-width: 100%; }
/* 🚨 Mesmo motivo do p/ul acima: `.bun a` (0,1,1) vence `.bun-btn--verde`
   (0,1,0) e pintava TODOS os botões de verde — o CTA verde ficava com texto
   verde sobre fundo verde (invisível) e o de contorno sumia na faixa escura.
   Com :where(a) o peso cai para (0,1,0) e as classes de botão voltam a valer. */
.bun :where(a) { color: var(--green); text-decoration: none; }
.bun :where(a:hover) { color: var(--ink); }

.bun-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.bun-sec { padding-block: clamp(64px, 9vw, 120px); }
.bun-sec--alt { background: var(--surface); }

/* --- Tipos ---------------------------------------------------------------- */

.bun-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
/* O filete de 36x1px que abre cada seção. */
.bun-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--sand);
}

.bun h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.08;
  text-wrap: balance;
}

.bun-texto { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.62; color: var(--body); }
.bun-texto + .bun-texto { margin-top: 20px; }
.bun-texto strong { font-weight: 600; color: var(--ink); }

.bun-nota {
  margin-top: 28px;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--legal);
}

/* Cabeçalho de seção com o texto de apoio à direita. */
.bun-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: clamp(36px, 5vw, 56px);
  flex-wrap: wrap;
}
.bun-cab h2 { max-width: 18ch; }
.bun-cab p  { max-width: 42ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--body); }

/* --- Botões --------------------------------------------------------------- */

.bun-btn {
  display: inline-block;
  padding: 19px 32px;
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bun-btn--claro       { background: var(--paper); color: var(--ink); }
.bun-btn--claro:hover { background: var(--sand);  color: var(--ink); }
.bun-btn--verde       { background: var(--green); color: var(--paper); }
.bun-btn--verde:hover { background: var(--ink);   color: var(--paper); }
.bun-btn--areia       { background: var(--sand);  color: var(--ink); }
.bun-btn--areia:hover { background: var(--paper); color: var(--ink); }
.bun-btn--linha {
  padding: 18px 30px;
  border: 1px solid rgba(245, 242, 234, .5);
  color: var(--paper);
}
.bun-btn--linha:hover { background: var(--paper); color: var(--deep); }
.bun-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .bun-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

/* Véu próprio do cabeçalho: o degradê do hero começa fraco no topo, e sobre a
   parte clara da foto o botão de contorno some. Isto é contraste, não enfeite. */
.bun-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(18, 20, 15, .55), transparent);
  pointer-events: none;
}

.bun-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 3vw, 30px) clamp(20px, 5vw, 56px);
}
.bun-topo__marca img { height: clamp(22px, 3vw, 30px); width: auto; }
.bun-topo__cta {
  padding: 12px 20px;   /* 45px de altura: o handoff pede 44 no mínimo */
  border: 1px solid rgba(245, 242, 234, .45);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.bun-topo__cta:hover { background: var(--paper); color: var(--ink); }

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

.bun-hero {
  position: relative;
  /* `min-height`, nunca `height`: com altura FIXA o conteúdo do hero (que é
     ancorado embaixo) transborda para CIMA quando não cabe, e a logo do
     empreendimento vai parar em cima da marca do GAC — foi o que aconteceu na
     primeira publicação do redesenho, numa tela de notebook. Assim o hero
     cresce quando precisa e fica em 96vh quando sobra espaço. */
  min-height: max(680px, 96vh);
  display: flex;
  align-items: flex-end;
  padding-top: 96px;   /* a faixa do cabeçalho, que é absoluta */
}
.bun-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.bun-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(18, 20, 15, .88) 0%,
              rgba(18, 20, 15, .40) 48%,
              rgba(18, 20, 15, .26) 100%);
}
.bun-hero__wrap {
  position: relative;
  z-index: 2;
  color: var(--paper);
  /* Sem a reserva de 72px do protótipo: lá a barra fixa é sempre visível,
     aqui ela só aparece depois que o hero sai da tela, então nada cobre o CTA. */
  padding-bottom: clamp(48px, 7vw, 84px);
}
/* O rótulo do hero cai numa parte CLARA da foto (o céu), onde o véu do hero
   já está fraco — a 70% de opacidade ele sumia (a Ana viu em 02/09/2026).
   Cor cheia + sombra: a sombra é o que segura o contraste quando a foto muda
   de claro para escuro atrás da mesma linha. O filete leva a dele também,
   senão o traço de 1px desaparece no céu. */
.bun-hero .bun-olho {
  color: var(--paper);
  text-shadow: 0 1px 8px rgba(18, 20, 15, .7);
}
.bun-hero .bun-olho::before { box-shadow: 0 0 6px 1px rgba(18, 20, 15, .5); }
.bun-hero__logo {
  /* Menor que a do handoff anterior: dividir o topo com a marca do GAC exige
     que a logo do empreendimento não dispute atenção com ela. */
  width: clamp(120px, 13vw, 168px);
  height: auto;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.bun-hero h1 {
  max-width: 15ch;
  margin-bottom: clamp(20px, 3vw, 32px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 6.2vw, 88px);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--paper);
  text-wrap: balance;
}
.bun-hero__linha {
  max-width: 52ch;
  margin-bottom: clamp(28px, 4vw, 44px);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(245, 242, 234, .87);
}
.bun-hero__precos {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 52px);
  flex-wrap: wrap;
}
.bun-preco__rot {
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, .58);
}
.bun-preco__valor {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  color: var(--paper);
}
.bun-preco__obs { margin-top: 10px; font-size: 13px; color: rgba(245, 242, 234, .6); }

/* --- Números -------------------------------------------------------------- */

.bun-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding-block: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--hair);
}
.bun-numeros li { border-top: 2px solid var(--ink); padding-top: 20px; }
.bun-numeros__n {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
}
.bun-numeros__l { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.bun-numeros__d { font-size: 14px; line-height: 1.45; color: var(--muted); }

/* --- Duas colunas com mosaico -------------------------------------------- */

.bun-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.bun-duas__texto p { max-width: 46ch; }

.bun-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bun-mosaico img { width: 100%; height: clamp(160px, 19vw, 250px); object-fit: cover; }
.bun-mosaico img:first-child { grid-column: span 2; height: clamp(220px, 26vw, 340px); }

/* --- Apartamentos --------------------------------------------------------- */

.bun-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.bun-card { background: var(--paper); transition: background-color .2s ease; }
.bun-card:hover { background: #FFFFFF; }
.bun-card img { width: 100%; height: 290px; object-fit: cover; }
.bun-card__corpo { padding: 28px 26px 32px; }
.bun-card h3 { margin-bottom: 6px; font-family: var(--serif); font-weight: 400; font-size: 28px; }
.bun-card__area {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--green);
}
.bun-card p { font-size: 15px; line-height: 1.58; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .bun-card { transition: none; } }

/* --- Coberturas (faixa escura, fora do container) ------------------------- */

.bun-cob {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: stretch;
  background: var(--deep);
  color: var(--paper);
}
.bun-cob__texto {
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 116px) clamp(20px, 5vw, 64px);
}
.bun-cob__texto > div { max-width: 46ch; margin-left: auto; }
.bun-cob .bun-olho { color: rgba(245, 242, 234, .52); }
.bun-cob h2 { margin-bottom: clamp(20px, 3vw, 30px); color: var(--paper); }
.bun-cob__p {
  margin-bottom: 32px;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: rgba(245, 242, 234, .76);
}
.bun-cob__p strong { font-weight: 600; color: var(--paper); }

.bun-cob__lista { display: grid; gap: 22px; margin-bottom: 36px; }
.bun-cob__lista li { border-top: 1px solid rgba(245, 242, 234, .22); padding-top: 18px; }
.bun-cob__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bun-cob__cab strong { font-size: 17px; font-weight: 600; }
.bun-cob__area { font-family: var(--serif); font-size: 24px; color: var(--sand); }
.bun-cob__lista p { font-size: 15px; line-height: 1.55; color: rgba(245, 242, 234, .65); }

/* Mosaico colado, sem gap — é o contraponto da faixa escura. */
/* ⚠️ O item do grid é o <figure>, não o <img>. `img:first-child` pegava TODAS as
   fotos (cada uma é a primeira do seu figure) e o `span 2` não valia — as três
   ficavam iguais e sobrava um buraco no canto do mosaico. Mire no figure. */
.bun-cob__fotos { display: grid; grid-template-columns: 1fr 1fr; align-content: stretch; }
.bun-cob__fotos .bun-fig { min-height: clamp(160px, 20vw, 280px); }
.bun-cob__fotos img { width: 100%; height: 100%; object-fit: cover; }
.bun-cob__fotos .bun-fig:first-child {
  grid-column: span 2;
  min-height: clamp(240px, 26vw, 380px);
}

/* --- Lazer ---------------------------------------------------------------- */

.bun-lazer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.bun-lazer img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 12px; }
.bun-lazer h3 { margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.bun-lazer p { font-size: 14px; line-height: 1.45; color: var(--muted); }

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

.bun-rubrica {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.bun-rubrica h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bun-rubrica span { font-size: 13px; color: var(--legal); white-space: nowrap; }
.bun-rubrica::after { content: ""; flex: 1; height: 1px; background: rgba(34, 38, 31, .16); }

.bun-plantas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.bun-plantas + .bun-rubrica { margin-top: clamp(40px, 5vw, 64px); }
.bun-planta {
  padding: 14px;
  background: var(--paper);
  transition: background-color .2s ease;
}
.bun-planta:hover { background: #FFFFFF; }
.bun-planta a { display: block; }
.bun-planta img { width: 100%; height: 190px; object-fit: contain; margin-bottom: 12px; }
.bun-planta figcaption {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) { .bun-planta { transition: none; } }

/* --- Valores -------------------------------------------------------------- */

.bun-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.5vw, 28px);
  align-items: stretch;
}
.bun-valores h2 { margin-bottom: 26px; font-size: clamp(28px, 3.8vw, 52px); }
.bun-valores .bun-texto { max-width: 50ch; }

.bun-caixa {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(28px, 4vw, 44px);
  background: var(--deep);
  color: var(--paper);
}
.bun-caixa__olho {
  margin-bottom: 20px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
}
.bun-caixa__n {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: 1;
}
.bun-caixa__n span { font-size: .44em; color: rgba(245, 242, 234, .55); }
.bun-caixa__un { margin-bottom: 18px; font-size: 15px; color: rgba(245, 242, 234, .6); }
.bun-caixa__p { font-size: 16px; line-height: 1.6; color: rgba(245, 242, 234, .75); }

/* --- Atendimento ---------------------------------------------------------- */

.bun-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.bun-ana img { width: 100%; max-height: 560px; object-fit: cover; }
.bun-ana h2 { margin-bottom: 24px; max-width: 20ch; font-size: clamp(28px, 3.5vw, 46px); line-height: 1.1; }
.bun-ana__intro { margin-bottom: 32px; max-width: 48ch; }
.bun-razoes { display: grid; gap: 16px; margin-bottom: 34px; }
.bun-razoes li {
  max-width: 52ch;
  padding-left: 20px;
  border-left: 2px solid var(--sand);
  font-size: 16px;
  line-height: 1.58;
  color: var(--body);
}
.bun-assina { margin-top: 18px; font-size: 13px; color: var(--legal); }

/* --- Ficha técnica -------------------------------------------------------- */

.bun-ficha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.bun-ficha-grid h2 { max-width: 12ch; }
.bun-ficha > div {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) 1.3fr;
  gap: 20px;
  padding-block: 16px;
  border-top: 1px solid var(--hair);
  font-size: 15px;
  line-height: 1.5;
}
.bun-ficha > div:last-child { border-bottom: 1px solid var(--hair); }
.bun-ficha dt { color: var(--muted); }

/* --- Dúvidas -------------------------------------------------------------- */

/* Prefixado: `.bun h2` (0,1,1) anularia a margem desta classe sozinha. */
.bun .bun-faq--titulo { margin-bottom: clamp(32px, 4vw, 52px); max-width: 18ch; }
.bun-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.bun-faq h3 { margin-bottom: 10px; font-size: 17px; font-weight: 600; }
.bun-faq p { font-size: 16px; line-height: 1.6; color: var(--body); }

/* --- Contato -------------------------------------------------------------- */

.bun-falar { background: var(--ink); color: var(--paper); }
.bun-falar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(64px, 9vw, 120px);
}
.bun-falar .bun-olho { color: rgba(245, 242, 234, .5); }
.bun-falar h2 { margin-bottom: 24px; color: var(--paper); font-size: clamp(28px, 3.6vw, 48px); }
.bun-falar__p {
  margin-bottom: 36px;
  max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: rgba(245, 242, 234, .74);
}
.bun-ligar { margin-top: 22px; font-size: 15px; color: rgba(245, 242, 234, .68); }
.bun-ligar a { color: var(--sand); border-bottom: 1px solid rgba(192, 168, 126, .4); }
.bun-ligar a:hover { color: var(--paper); }

.bun-chips__rot {
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245, 242, 234, .55);
}
.bun-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.bun-chip {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(245, 242, 234, .3);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--paper);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.bun-chip:hover { border-color: var(--sand); color: var(--sand); }
.bun-chip--on { border-color: var(--sand); color: var(--sand); }

@media (prefers-reduced-motion: reduce) { .bun-chip { transition: none; } }

/* Campos sem caixa: só a linha de baixo, sobre o fundo escuro. */
.bun-form { display: grid; gap: 12px; }
.bun-form input,
.bun-form textarea {
  width: 100%;
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid rgba(245, 242, 234, .28);
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;   /* 16px evita o zoom automático do iOS ao focar o campo */
  color: var(--paper);
  outline: none;
  resize: none;
}
.bun-form input:focus,
.bun-form textarea:focus { border-bottom-color: var(--sand); }
.bun-form input::placeholder,
.bun-form textarea::placeholder { color: rgba(245, 242, 234, .42); }
.bun-form button { margin-top: 10px; }
.bun-form__fine { font-size: 13px; color: rgba(245, 242, 234, .45); }

/* Rótulo só para leitor de tela: o desenho usa placeholder, mas campo sem
   <label> é campo que a acessibilidade não enxerga. */
.bun-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Rodapé compartilhado ------------------------------------------------- */

.bun .rlp {
  --rlp-fundo: #22261F;
  --rlp-texto: rgba(245, 242, 234, .62);
  --rlp-claro: #F5F2EA;
  --rlp-linha: rgba(245, 242, 234, .12);
  --rlp-fraco: rgba(245, 242, 234, .45);

  /* A barra fixa fica por cima; sem esta reserva ela come o aviso legal. */
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
/* O botão flutuante bateria na barra fixa — sobe ele. */
.bun .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.bun-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(34, 38, 31, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(245, 242, 234, .14);
  transform: translateY(105%);
  transition: transform .25s ease;
}
.bun-barra--on { transform: translateY(0); }
.bun-barra__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.bun-barra__txt {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--paper);
}
.bun-barra__valor { font-family: var(--serif); font-size: clamp(17px, 1.8vw, 22px); }
.bun-barra__sub { font-size: 14px; color: rgba(245, 242, 234, .55); }
.bun-barra .bun-btn { padding: 13px 22px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) { .bun-barra { transition: none; } }

/* --- Lightbox ------------------------------------------------------------- */

.bun-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(18, 20, 15, .94);
}
.bun-lb[hidden] { display: none; }
.bun-lb__palco { max-width: min(1200px, 92vw); text-align: center; }
.bun-lb__img { max-width: 100%; max-height: 78vh; margin-inline: auto; object-fit: contain; }
.bun-lb__legenda { margin-top: 14px; font-size: 14px; color: rgba(245, 242, 234, .7); }
.bun-lb__fechar,
.bun-lb__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  line-height: 1;
}
.bun-lb__fechar { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 40px; }
.bun-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 72px; font-size: 56px; }
.bun-lb__nav--ant  { left: 8px; }
.bun-lb__nav--prox { right: 8px; }
.bun-lb__fechar:hover, .bun-lb__nav:hover { color: var(--sand); }

.bun-fig--zoom { cursor: zoom-in; }
/* ===========================================================================
   EPIC GOLF RESIDENCE — Av. Ermanno Dallari, 200, Barra da Tijuca
   Patrimar. Página montada em 18/09/2026 a partir da apresentação e da ficha.

   A identidade é a do EPIC, tirada da apresentação:
   - laranja/âmbar da marca (#D9822B) em blocos inteiros, ferrugem (#A4471B) nas
     faixas de destaque, creme nos fundos claros, marrom profundo nas faixas escuras;
   - títulos em caixa-alta fina e espaçada com a palavra-chave em ITÁLICO serifado
     ("Extraordinária", "épica"), como na apresentação — Montserrat + Cormorant;
   - ondas finas sobre os blocos (o desenho do logo).
   As fotos do material têm ~800 px: nenhuma é usada de fundo em tela cheia.

   Estrutura irmã das LPs do Icon, Atlântico e Oceana (mesma Patrimar, mesma região).
   Grade: container de 1320px, seções em clamp, grades auto-fit (briefing das LPs).
   =========================================================================== */

.ep {
  --claro:     #FDF5EC;   /* fundo do documento */
  --claro-2:   #F9E6D2;   /* seções alternadas (o creme da apresentação) */
  --escuro:    #3A1D0E;   /* faixas escuras */
  --escuro-2:  #5A2E14;   /* títulos sobre o claro */
  --escuro-3:  #B35E1C;   /* hover */
  --laranja:   #D9822B;   /* cor da marca */
  --laranja-2: #F6B878;   /* laranja claro sobre o escuro */
  --laranja-3: #A8551A;   /* laranja legível sobre o creme */
  --ferrugem:  #A4471B;
  --tinta:     #33200F;
  --tinta-2:   #62493A;
  --tinta-3:   #8C7565;
  --fio:       rgba(58, 29, 14, .14);
  --fio-claro: rgba(255, 255, 255, .2);

  --sans:  Montserrat, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --barra: 112px;

  font-family: var(--sans);
  color: var(--tinta);
  background: var(--claro);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.ep *, .ep *::before, .ep *::after { box-sizing: border-box; }

/* Resets locais — p, ul e a dentro de :where() para não anularem as classes. */
.ep h1, .ep h2, .ep h3 { margin: 0; color: inherit; font-weight: 400; }
.ep :where(p)  { margin: 0; }
.ep :where(ul) { margin: 0; padding: 0; list-style: none; }
.ep dl, .ep dd, .ep dt { margin: 0; }
.ep figure { margin: 0; }
.ep img { display: block; max-width: 100%; }
.ep :where(a) { color: var(--laranja-3); text-decoration: none; }
.ep :where(a:hover) { color: var(--escuro-2); }
.ep ::selection { background: var(--laranja); color: var(--escuro); }

.ep-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.ep-sec { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.ep-sec--claro  { background: var(--claro-2); }
.ep-sec--escuro { background: var(--escuro); color: #fff; }

/* Ondas finas sobre os blocos laranja/escuros — o desenho do logo. */
.ep-ondas {
  background-image:
    repeating-radial-gradient(ellipse 140% 60% at 110% 120%, rgba(255, 255, 255, 0) 0 26px, rgba(255, 255, 255, .07) 27px 28px);
}

/* Legenda em tarja laranja inclinada no canto da foto. */
.ep-fig--tarja { position: relative; }
.ep .ep-fig--tarja figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 26px 10px 16px;
  background: var(--ferrugem);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  font-size: 11px;
  color: #fff;
}

/* --- Tipos ---------------------------------------------------------------- */

.ep-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--laranja-3);
}
/* O filete de 36x1px que abre cada rótulo — assinatura comum às LPs da casa. */
.ep-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--laranja);
}
.ep-olho--claro { color: var(--laranja-2); }
.ep-hero__end { color: rgba(255, 255, 255, .88); }

/* Títulos: caixa-alta fina e espaçada, como no book; o <em> vira itálico serifado, como na apresentação. */
.ep h1,
.ep h2 {
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ep h1 em,
.ep h2 em,
.ep h3 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: .01em; text-transform: none; font-size: 1.12em; color: var(--laranja-3); }
.ep-sec--escuro h2 em,
.ep-video h2 em,
.ep-falar h2 em { color: var(--laranja-2); }
.ep h1 {
  max-width: 19ch;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.12;
}
.ep h2 {
  max-width: 22ch;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.22;
  color: var(--escuro-2);
}
.ep-sec--escuro h2, .ep-video h2, .ep-falar h2 { color: #fff; }
.ep h3 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.3; color: var(--escuro-2); }

.ep-texto { margin-top: 24px; max-width: 58ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); text-wrap: pretty; }
.ep-texto + .ep-texto { margin-top: 18px; }

.ep-nota { margin-top: 28px; max-width: 100ch; font-size: 13px; line-height: 1.7; color: var(--tinta-3); }
.ep-nota--clara { color: rgba(255, 255, 255, .55); }

.ep-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: clamp(32px, 4.5vw, 52px);
  flex-wrap: wrap;
}
.ep-cab p { max-width: 50ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); }
.ep-sec--escuro .ep-cab p { color: rgba(255, 255, 255, .78); }

.ep-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.ep-duas--centro { align-items: center; }

/* --- Botões --------------------------------------------------------------- */

.ep-btn {
  display: inline-block;
  min-height: 44px;
  padding: 16px 28px;
  border: 0;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ep .ep-btn--laranja       { background: var(--ferrugem); color: #fff; }
.ep .ep-btn--laranja:hover { background: var(--escuro-2); color: #fff; }
.ep .ep-btn--branco        { background: #fff; color: var(--ferrugem); }
.ep .ep-btn--branco:hover  { background: var(--claro-2); color: var(--escuro); }
.ep .ep-btn--linha-clara {
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}
.ep .ep-btn--linha-clara:hover { border-color: var(--laranja-2); color: var(--laranja-2); }
.ep-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .ep-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

.ep-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 56px);
}
.ep-topo__marca img { width: auto; height: clamp(22px, 3vw, 30px); opacity: .9; }
.ep .ep-topo__cta { padding: 11px 20px; font-size: 12px; }

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

/* Hero de tela cheia com vídeo em loop (preferência da Ana, 18/09/2026). */
.ep-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: min(100vh, 940px);
  padding-block: 150px clamp(48px, 6vh, 84px);
  overflow: hidden;
  color: #fff;
  background: var(--escuro);
}
.ep-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ep-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(58, 29, 14, .55) 0%,
    rgba(58, 29, 14, .10) 28%,
    rgba(58, 29, 14, .55) 55%,
    rgba(58, 29, 14, .94) 100%);
}
.ep-hero__wrap { position: relative; }
.ep-hero__logo { width: clamp(90px, 8vw, 120px); height: auto; margin-bottom: clamp(18px, 3vw, 28px); }
/* Sobre o laranja, o rótulo e o selo vão em branco (o laranja claro some). */
.ep-hero .ep-olho, .ep-sec--laranja .ep-olho { color: #fff; }
.ep-hero .ep-olho::before, .ep-sec--laranja .ep-olho::before { background: #fff; }
.ep .ep-hero .ep-selo { border-color: rgba(255, 255, 255, .6); color: #fff; }
.ep .ep-hero .ep-selo strong { color: #fff; font-weight: 600; }
.ep .ep-hero .ep-selo:hover { border-color: #fff; color: var(--escuro); }
.ep-hero h1 { color: #fff; }
.ep .ep-hero h1 em { color: var(--laranja-2); }
.ep-hero__linha {
  margin-top: 24px;
  max-width: 56ch;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
}
.ep-hero__linha strong { display: block; margin-top: 8px; font-weight: 500; color: var(--laranja-2); }
.ep-hero__precos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 40px);
}
.ep-preco__rot { margin-bottom: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.ep-preco__valor { font-size: clamp(32px, 3.8vw, 50px); font-weight: 300; line-height: 1; letter-spacing: .02em; }
.ep-preco__obs { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ep-preco__obs s { color: rgba(255, 255, 255, .55); }

/* --- Selo da campanha (hero) ----------------------------------------------- */

.ep-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 28px);
  padding: 10px 18px;
  border: 1px solid rgba(246, 184, 120, .6);
  font-size: 13px;
  color: #fff;
}
.ep .ep-selo { color: #fff; }
.ep-selo strong { font-weight: 500; color: var(--laranja-2); }
.ep .ep-selo:hover { border-color: var(--laranja-2); color: var(--laranja-2); }

/* --- Campanha (bloco removível) -------------------------------------------- */

.ep-sec--ferrugem { background-color: var(--ferrugem); color: #fff; }
.ep-sec--ferrugem h2 { color: #fff; }
.ep .ep-sec--ferrugem h2 em { color: var(--laranja-2); }
.ep-sec--ferrugem .ep-cab p { color: rgba(255, 255, 255, .85); }

/* Campanha sem cards de unidade: preço de entrada + contador do prazo */
.ep-oportunidade { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: stretch; margin-bottom: 32px; }
.ep-oportunidade__preco,
.ep-contador { padding: clamp(24px, 3vw, 36px); background: var(--escuro); color: #fff; }
.ep-oportunidade__rot,
.ep-contador__rot { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--laranja-2); }
.ep .ep-oportunidade__valor { margin-top: 10px; font-family: var(--serif); font-size: clamp(38px, 5.2vw, 58px); font-weight: 500; line-height: 1.05; }
.ep-oportunidade__obs { margin-top: 12px; font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .78); }
.ep-oportunidade__obs strong { font-weight: 600; color: var(--laranja-2); }
.ep-contador__caixas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.ep-contador__caixas div { padding: 12px 4px; text-align: center; border: 1px solid rgba(255, 255, 255, .2); }
.ep-contador__caixas strong { display: block; font-family: var(--serif); font-size: clamp(28px, 3.4vw, 38px); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.ep-contador__caixas span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.ep-contador__nota { margin-top: 14px; font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.ep-barra__sub b { font-weight: 600; color: var(--laranja-2); font-variant-numeric: tabular-nums; }
.ep-promessas { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; max-width: 46ch; }
.ep-promessas li { padding: 12px 0; border-top: 1px solid var(--fio-claro); font-size: 14px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, .82); }

.ep-ofertas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
/* 5 cartões: 5 lado a lado; 3+2 no tablet; 1 coluna no celular — nunca 4+1. */
@media (max-width: 1100px) { .ep-ofertas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ep-ofertas { grid-template-columns: minmax(0, 1fr); } }
.ep-oferta { padding: clamp(22px, 2.6vw, 30px); background: var(--escuro); color: #fff; }
.ep-oferta__torre { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--laranja-2); }
.ep .ep-oferta__un { margin-top: 6px; font-size: 22px; font-weight: 400; letter-spacing: .04em; }
.ep-oferta__tipo { margin-top: 6px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .75); }
.ep .ep-oferta__de { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.ep .ep-oferta__por { margin-top: 4px; font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; line-height: 1.1; color: #fff; }
.ep .ep-oferta__menos { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--laranja-2); }

/* --- Vista real ----------------------------------------------------------- */

.ep-vistas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.ep .ep-vistas img { aspect-ratio: 16 / 9; height: auto; }
.ep-sec--escuro .ep-fig figcaption { color: rgba(255, 255, 255, .7); }

/* --- Fotos da obra (reais) ------------------------------------------------- */

.ep-obra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.ep .ep-obra img { aspect-ratio: 3 / 2; height: auto; }

/* --- Números -------------------------------------------------------------- */

.ep-numeros { background: var(--escuro); color: #fff; }
.ep-numeros__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--fio-claro);
}
.ep-numeros__n { font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; line-height: 1; color: var(--laranja-2); }
.ep-numeros__l { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.ep-numeros__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* --- Figuras -------------------------------------------------------------- */

.ep-fig img { width: 100%; height: auto; object-fit: cover; }
.ep-fig figcaption { padding-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }

.ep-fotos-duas { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.ep .ep-fotos-duas img { aspect-ratio: 16 / 9; height: auto; }

/* --- Unidades ------------------------------------------------------------- */

/* 4 plantas: 2+2 ou 1 por linha (4 lado a lado ficaria ilegível). */
.ep-unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.ep-unidade { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fio); }
.ep-unidade__fig { padding: clamp(10px, 1.4vw, 16px); border-bottom: 1px solid var(--fio); }
.ep .ep-unidade__fig img { height: clamp(240px, 26vw, 340px); object-fit: contain; }
.ep-unidade__txt { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px); }
.ep-unidade__area { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--laranja-3); }
.ep-unidade__d { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tinta-2); }
.ep .ep-unidade__v { margin-top: auto; padding-top: 14px; font-size: 24px; font-weight: 400; color: var(--escuro-2); }
.ep-unidade__v span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }

.ep-pedir { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: clamp(32px, 4vw, 48px); }
.ep-pedir__s { font-size: 14px; color: var(--tinta-2); }

.ep-perspectivas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5vw, 64px);
}
.ep .ep-perspectivas img { aspect-ratio: 3 / 2; height: auto; }

/* --- Decorados ------------------------------------------------------------ */

.ep-decorados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.ep .ep-decorados img { aspect-ratio: 3 / 2; height: auto; }

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

.ep-video { background-color: var(--escuro); color: #fff; }
.ep-video__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 112px);
}
.ep-video__p { margin-block: 24px 32px; max-width: 44ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }

/* O arquivo só baixa no clique (preload="none"): o que aparece é o poster,
   coberto por um <button> — assim também abre pelo teclado. */
.ep-player { position: relative; overflow: hidden; background: #000; }
.ep-player video { display: block; width: 100%; height: auto; aspect-ratio: 1030 / 720; object-fit: cover; background: #000; }
.ep-player__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(58, 29, 14, .55), rgba(58, 29, 14, 0) 70%),
    linear-gradient(to top, rgba(58, 29, 14, .6), rgba(58, 29, 14, .1));
  transition: opacity .25s;
}
.ep-player--on .ep-player__capa { opacity: 0; pointer-events: none; }
.ep-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--escuro);
  transition: transform .2s, background .2s;
}
.ep-player__play svg { width: 40%; margin-left: 8%; }
.ep-player__capa:hover .ep-player__play,
.ep-player__capa:focus-visible .ep-player__play { transform: scale(1.06); background: var(--laranja-2); }
.ep-player__rot { font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.ep-player__tempo { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

@media (prefers-reduced-motion: reduce) { .ep-player__capa, .ep-player__play { transition: none; } }

/* --- Lazer ---------------------------------------------------------------- */

.ep .ep-clube { margin-bottom: clamp(24px, 3vw, 40px); }
.ep .ep-clube img { height: clamp(220px, 34vw, 480px); }

.ep-lazer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.ep .ep-lazer img { height: clamp(220px, 22vw, 300px); }
.ep-lazer figcaption { letter-spacing: normal; text-transform: none; }
.ep-lazer__t { display: block; font-size: 17px; font-weight: 500; color: var(--escuro-2); }
.ep-lazer__d { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; color: var(--tinta-2); }

.ep-servicos { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); background-color: var(--escuro); color: #fff; }
.ep-servicos .ep-mais__rot { color: var(--laranja-2); }
.ep-servicos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px clamp(20px, 3vw, 40px);
}
.ep-servicos__lista dt { font-size: 15px; font-weight: 500; }
.ep-servicos__lista dd { margin-top: 4px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.ep-servicos .ep-nota { color: rgba(255, 255, 255, .5); }

.ep-mais { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--fio); }
.ep-mais__rot { margin-bottom: 18px; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3); }
.ep-chips-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.ep-chips-lista li {
  padding: 9px 16px;
  border: 1px solid var(--fio);
  background: rgba(255, 255, 255, .6);
  font-size: 14px;
  color: var(--tinta-2);
}

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

.ep-onde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ep-onde__mapa { position: relative; min-height: clamp(320px, 38vw, 480px); background: var(--claro); }
.ep-onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ep-onde__rot { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--laranja-3); }
.ep-perto li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 14px;
  border-top: 1px solid var(--fio);
  font-size: 16px;
  color: var(--tinta);
}
.ep-perto li:last-child { border-bottom: 1px solid var(--fio); }
.ep-perto__t { flex: 0 0 auto; font-size: 14px; font-weight: 500; color: var(--laranja-3); }
.ep .ep-onde__cta { margin-top: 28px; }

/* --- Condições ------------------------------------------------------------ */

.ep-pag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--fio-claro);
  border: 1px solid var(--fio-claro);
}
.ep-pag > div { padding: clamp(20px, 2.4vw, 30px); background: var(--escuro); }
.ep-pag__valor { font-size: clamp(32px, 3.2vw, 46px); font-weight: 300; line-height: 1; color: var(--laranja-2); }
.ep-pag__rot { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.ep-pag__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* --- Atendimento ---------------------------------------------------------- */

.ep-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* `height: auto` obrigatório: o height do atributo venceria o aspect-ratio. */
.ep-ana__foto { max-width: 400px; }
.ep .ep-ana__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.ep-ana__intro { margin-bottom: 28px; }
.ep-razoes { display: grid; gap: 18px; margin-bottom: 34px; }
.ep-razoes li {
  max-width: 54ch;
  padding-left: 20px;
  border-left: 2px solid var(--laranja);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--tinta-2);
}
.ep-assina { margin-top: 18px; font-size: 13px; color: var(--tinta-3); }

/* --- Ficha técnica -------------------------------------------------------- */

.ep .ep-ficha__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.ep-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}
.ep-ficha > div { padding-block: 18px; border-bottom: 1px solid var(--fio); }
.ep-ficha dt { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--laranja-3); }
.ep-ficha dd { margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--tinta-2); }
.ep .ep-implantacao { margin-top: clamp(40px, 5vw, 64px); padding: clamp(10px, 1.4vw, 16px); background: #fff; border: 1px solid var(--fio); }


/* --- Dúvidas -------------------------------------------------------------- */

.ep .ep-faq__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.ep-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.ep-faq details { border-bottom: 1px solid var(--fio); }
.ep-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 17px;
  font-weight: 500;
  color: var(--escuro-2);
  cursor: pointer;
  list-style: none;
}
.ep-faq summary::-webkit-details-marker { display: none; }
.ep-faq summary:hover { color: var(--laranja-3); }
.ep-faq__sinal { font-size: 24px; line-height: 1; color: var(--laranja-3); }
.ep .ep-faq p { max-width: 72ch; padding-bottom: 22px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tinta-2); }

/* --- Contato -------------------------------------------------------------- */

.ep-falar { position: relative; overflow: hidden; background-color: var(--escuro); color: #fff; }
.ep-falar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.ep-falar__veu { position: absolute; inset: 0; background: linear-gradient(180deg, #3A1D0E 0%, rgba(58, 29, 14, .78) 50%, #3A1D0E 100%); }
.ep-falar__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(72px, 9vw, 128px);
}
.ep-falar__p { margin-block: 24px 32px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.ep-ligar { margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.ep .ep-ligar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ep-creci { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .5); }

.ep-cartao { padding: clamp(26px, 3.4vw, 44px); background: var(--claro); color: var(--tinta); border-top: 4px solid var(--laranja); }
.ep-chips__rot { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--escuro-2); }
.ep-chips__rot span { display: block; margin-top: 4px; font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.ep-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.ep-chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(58, 29, 14, .3);
  border-radius: 2px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--escuro-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ep-chip:hover { border-color: var(--escuro-2); }
.ep-chip--on,
.ep-chip--on:hover { background: var(--escuro-2); border-color: var(--escuro-2); color: #fff; }

@media (prefers-reduced-motion: reduce) { .ep-chip { transition: none; } }

.ep-form { display: grid; gap: 18px; }
.ep-campo { display: grid; gap: 8px; }
.ep-rot { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.ep-rot__op { font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.ep-form input,
.ep-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(58, 29, 14, .25);
  border-radius: 2px;
  background: #fff;
  font-family: var(--sans);
  font-size: 16px;   /* evita o zoom automático do iOS */
  color: var(--tinta);
  outline: none;
  resize: vertical;
}
.ep-form input:focus,
.ep-form textarea:focus { border-color: var(--laranja-3); }
.ep-form input::placeholder { color: var(--tinta-3); }
.ep-form__fine { font-size: 13px; color: var(--tinta-3); }

.ep-obrigada__t { font-size: 26px; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; color: var(--escuro-2); }
.ep-obrigada__p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--tinta-2); }

/* --- Rodapé compartilhado ------------------------------------------------- */

.ep .rlp {
  --rlp-fundo: #2A1409;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
.ep .rlp__wordmark { max-width: 70px; }
/* O botão flutuante bateria na barra fixa — sobe ele. */
.ep .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.ep-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(58, 29, 14, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--fio-claro);
  color: #fff;
  transform: translateY(105%);
  transition: transform .25s ease;
}
.ep-barra--on { transform: translateY(0); }
.ep-barra__wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.ep-barra__txt { min-width: 0; }
.ep-barra__valor,
.ep-barra__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-barra__valor { font-size: 15px; font-weight: 500; }
.ep-barra__sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.ep .ep-barra .ep-btn { padding: 14px 22px; font-size: 12px; letter-spacing: .12em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .ep-barra { transition: none; } }

/* --- Lightbox ------------------------------------------------------------- */

.ep-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(40, 20, 9, .95);
}
.ep-lb[hidden] { display: none; }
.ep-lb__palco { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.ep .ep-lb__img { width: auto; height: auto; max-width: 100%; max-height: 80vh; margin-inline: auto; object-fit: contain; clip-path: none; }
.ep-lb__legenda { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ep-lb__fechar,
.ep-lb__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.ep-lb__fechar { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 40px; }
.ep-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 72px; font-size: 56px; }
.ep-lb__nav--ant  { left: 8px; }
.ep-lb__nav--prox { right: 8px; }
.ep-lb__fechar:hover, .ep-lb__nav:hover { color: var(--laranja-2); }

.ep-zoom { cursor: zoom-in; }

/* --- Só do Epic ----------------------------------------------------------- */

/* Números na sans: a Cormorant desenha algarismos antigos ("2.5I4"). */
.ep-preco__valor, .ep-numeros__n, .ep .ep-oferta__por, .ep .ep-exemplo__un { font-weight: 300; }
.ep-oferta { background: var(--escuro); }

.ep-perspectivas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* Condições: explicação da campanha + exemplo de fluxo. */
.ep-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: center;
}
.ep-valores__t { font-size: clamp(20px, 1.8vw, 24px); font-weight: 300; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.ep-valores__p { margin-block: 16px 28px; max-width: 46ch; font-size: 15px; font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, .78); }
.ep-exemplo { padding: clamp(26px, 3vw, 40px); background: var(--claro); color: var(--tinta); border-top: 4px solid var(--laranja); }
.ep-exemplo__rot { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--laranja-3); }
.ep .ep-exemplo__un { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--escuro-2); }
.ep .ep-exemplo__tipo { margin-top: 6px; font-size: 15px; font-weight: 300; color: var(--tinta-2); }
.ep-exemplo__fluxo { margin-top: 20px; }
.ep-exemplo__fluxo > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--fio); }
.ep-exemplo__fluxo > div:first-child { border-top: 1px solid var(--fio); }
.ep-exemplo__fluxo dt { font-size: 15px; font-weight: 300; color: var(--tinta-2); }
.ep-exemplo__fluxo dd { font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--escuro-2); }

/* Vizinhos na mesma quadra (Oceana e Atlântico). */
.ep-vizinhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.ep .ep-vizinho { display: block; background: #fff; border: 1px solid var(--fio); color: var(--tinta); }
.ep .ep-vizinho:hover { border-color: var(--laranja); color: var(--tinta); }
.ep .ep-vizinho img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ep-vizinho__t { display: block; padding: 20px 22px 0; font-size: 18px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--escuro-2); }
.ep-vizinho__d { display: block; padding: 6px 22px 22px; font-size: 14px; font-weight: 300; color: var(--tinta-2); }

/* Bloco laranja do Epic Beach & Play. */
.ep-sec--laranja { background-color: var(--laranja); color: #fff; }
.ep-sec--laranja h2 { color: #fff; }
.ep .ep-sec--laranja h2 em { color: var(--escuro); }
.ep-sec--laranja .ep-cab p { color: rgba(255, 255, 255, .9); }
.ep-sec--laranja .ep-fig figcaption { color: #fff; }
.ep-beach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.ep .ep-beach img { aspect-ratio: 3 / 2; height: auto; }
@media (max-width: 760px) { .ep-beach { grid-template-columns: minmax(0, 1fr); } }

/* Tipologias (o material não traz plantas). */
.ep-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.ep-tipo { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 2.6vw, 30px); background: #fff; border: 1px solid var(--fio); border-top: 4px solid var(--laranja); }
.ep-tipo__area { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--laranja-3); }
.ep-tipo__d { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tinta-2); }
.ep .ep-tipo__v { margin-top: auto; padding-top: 14px; font-size: 22px; font-weight: 300; color: var(--escuro-2); }
.ep-tipo__v span { display: block; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.ep .ep-perspectivas img { aspect-ratio: 3 / 2; }

/* Do Epic à praia (balsa). */
.ep-praia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 80px);
}
.ep .ep-praia img { aspect-ratio: 4 / 3; height: auto; }
.ep .ep-praia__t { font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; letter-spacing: .08em; text-transform: uppercase; color: var(--escuro-2); }

/* Condições: título dentro da coluna da esquerda. */
.ep-valores { margin-top: 0; }
.ep-valores h2 { color: #fff; }

/* Plantas: 5 em linha no computador, 3+2 no tablet, 1 por linha no celular. */
.ep-plantas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
@media (max-width: 1100px) { .ep-plantas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ep-plantas { grid-template-columns: minmax(0, 1fr); } }
.ep-planta { display: flex; flex-direction: column; gap: 6px; padding: clamp(12px, 1.4vw, 16px); background: #fff; border: 1px solid var(--fio); }
.ep .ep-planta__fig { margin: 0 0 8px; }
.ep .ep-planta__fig img { width: 100%; height: clamp(200px, 17vw, 260px); object-fit: contain; }
.ep .ep-planta h3 { font-size: 15px; font-weight: 500; }
.ep-planta__d { font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--tinta-2); }

/* Grade do fluxo antes do exemplo. */
.ep .ep-pag { margin-bottom: clamp(40px, 5vw, 64px); }

/* --- Celular -------------------------------------------------------------- */

@media (max-width: 760px) {
  .ep h1, .ep h2 { letter-spacing: .04em; }
}
/* ===========================================================================
   GAEA HOME RESORT — Av. Evandro Lins e Silva, 335, Barra da Tijuca
   Incorporação Tegra. Página montada em 16/09/2026 a partir do book.

   A identidade é a do GAEA, tirada do book de vendas:
   - fundo areia (#E4E1D9) na maioria das páginas, com faixas azul-marinho;
   - azul-claro (#199EDA) só no "HOME RESORT" da logo e nas curvas finas;
   - títulos em caixa-alta espaçada, com trechos em serifa (o "GÆA" é serifado);
   - curvas orgânicas de traço fino e fotos recortadas por um canto arredondado
     grande, como as páginas do book.
   O book usa Henderson Sans e Cochin (pagas): aqui, Jost e Cormorant Garamond.

   Grade: container de 1320px, seções em clamp, grades auto-fit (briefing das LPs).
   =========================================================================== */

.ga {
  --areia:    #E4E1D9;   /* fundo do documento */
  --branco:   #F7F6F2;   /* seções alternadas claras */
  --marinho:  #1A2B4C;   /* faixas escuras, títulos */
  --marinho-2:#223661;
  --azul:     #199EDA;   /* acento da logo, CTAs */
  --azul-2:   #0F86BD;   /* hover */
  --verde:    #1B3F26;
  --taupe:    #A8A090;
  --tinta:    #1D1D1B;
  --tinta-2:  #4A4A48;
  --tinta-3:  #7A776F;
  --fio:      rgba(26, 43, 76, .16);
  --fio-claro: rgba(255, 255, 255, .18);

  --onda: clamp(60px, 10vw, 160px);   /* raio do canto orgânico das fotos */

  --serif: "Cormorant Garamond", Cochin, Georgia, "Times New Roman", serif;
  --sans:  Jost, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --barra: 112px;

  font-family: var(--sans);
  /* Cormorant usa algarismos antigos por padrão: "2.514.000" vira "2.5I4.000". */
  font-variant-numeric: lining-nums;
  color: var(--tinta);
  background: var(--areia);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.ga *, .ga *::before, .ga *::after { box-sizing: border-box; }

/* Resets locais — p, ul e a dentro de :where() para não anularem as classes. */
.ga h1, .ga h2, .ga h3 { margin: 0; color: inherit; font-weight: 400; }
.ga :where(p)  { margin: 0; }
.ga :where(ul) { margin: 0; padding: 0; list-style: none; }
.ga dl, .ga dd, .ga dt { margin: 0; }
.ga figure { margin: 0; }
.ga img { display: block; max-width: 100%; }
.ga table { border-collapse: collapse; }
.ga :where(a) { color: var(--marinho); text-decoration: none; }
.ga :where(a:hover) { color: var(--azul); }
.ga ::selection { background: var(--marinho); color: #fff; }

.ga-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.ga-sec { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.ga-sec--branco  { background: var(--branco); }
.ga-sec--marinho { background: var(--marinho); color: #fff; }

.ga-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Canto orgânico: um canto só, raio grande — as fotos do book são recortadas
   pelas curvas da página. */
.ga-onda { border-top-left-radius: var(--onda); overflow: hidden; }
.ga-onda img { border-top-left-radius: var(--onda); }

/* Curva fina decorativa (SVG). */
.ga-curva { position: absolute; pointer-events: none; }
.ga-curva path { fill: none; stroke: var(--azul); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* --- Tipos ---------------------------------------------------------------- */

.ga-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--marinho);
}
/* O filete de 36x1px que abre cada rótulo — assinatura comum às LPs da casa. */
.ga-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--azul);
}
.ga-olho--claro { color: rgba(255, 255, 255, .85); }
.ga-hero__end { color: rgba(255, 255, 255, .85); }

/* Títulos: caixa-alta espaçada fina; o trecho em <em> vira serifa, sem itálico. */
.ga h1,
.ga h2 {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-wrap: balance;
}
.ga h1 em,
.ga h2 em {
  display: block;
  margin-top: .12em;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}
.ga h1 {
  max-width: 17ch;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.15;
}
.ga h1 em { font-size: 1.6em; line-height: 1; }
.ga h2 {
  max-width: 24ch;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.25;
  color: var(--marinho);
}
.ga h2 em { font-size: 1.55em; line-height: 1.05; }
.ga-sec--marinho h2 { color: #fff; }
.ga h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; line-height: 1.25; color: var(--marinho); }

.ga-texto { margin-top: 24px; max-width: 58ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); text-wrap: pretty; }
.ga-texto + .ga-texto { margin-top: 18px; }

.ga-nota {
  margin-top: 28px;
  max-width: 100ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--tinta-3);
}
.ga-nota--clara { color: rgba(255, 255, 255, .55); }

.ga-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: clamp(36px, 5vw, 56px);
  flex-wrap: wrap;
}
.ga-cab p { max-width: 50ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); }
.ga-sec--marinho .ga-cab p { color: rgba(255, 255, 255, .78); }

.ga-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.ga-duas--centro { align-items: center; }

/* --- Botões --------------------------------------------------------------- */

.ga-btn {
  display: inline-block;
  padding: 16px 28px;
  border: 0;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ga .ga-btn--azul          { background: var(--azul);    color: #fff; }
.ga .ga-btn--azul:hover    { background: var(--azul-2);  color: #fff; }
.ga .ga-btn--marinho       { background: var(--marinho); color: #fff; }
.ga .ga-btn--marinho:hover { background: var(--marinho-2); color: #fff; }
.ga .ga-btn--linha {
  border: 1px solid var(--marinho);
  background: transparent;
  color: var(--marinho);
}
.ga .ga-btn--linha:hover { background: var(--marinho); color: #fff; }
.ga .ga-btn--linha-clara {
  border: 1px solid rgba(255, 255, 255, .5);
  background: transparent;
  color: #fff;
}
.ga .ga-btn--linha-clara:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.ga-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .ga-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

.ga-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 56px);
}
.ga-topo__marca img { width: auto; height: clamp(22px, 3vw, 30px); opacity: .85; }
.ga .ga-topo__cta { padding: 11px 20px; font-size: 12px; }

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

.ga-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: min(100vh, 940px);
  padding-block: 150px clamp(48px, 6vh, 84px);
  overflow: hidden;
  color: #fff;
  background: var(--marinho);
}
.ga-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ga-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(26, 43, 76, .62) 0%,
    rgba(26, 43, 76, .18) 26%,
    rgba(26, 43, 76, .70) 50%,
    rgba(26, 43, 76, .95) 100%);
}
.ga-hero__curva { top: 0; right: 0; width: min(40vw, 520px); height: 100%; opacity: .7; }
.ga-hero__wrap { position: relative; }
.ga-hero__logo { width: clamp(170px, 18vw, 250px); height: auto; margin-bottom: clamp(18px, 3vw, 28px); }
.ga-hero__linha {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .85);
}
.ga-hero__precos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 40px);
}
.ga-preco__rot { margin-bottom: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.ga-preco__valor { font-family: var(--serif); font-size: clamp(34px, 4vw, 52px); line-height: 1; }
.ga-preco__obs { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .7); }

/* --- Números -------------------------------------------------------------- */

.ga-numeros { background: var(--marinho); color: #fff; }
.ga-numeros__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--fio-claro);
}
.ga-numeros__n { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.ga-numeros__l { margin-top: 10px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--azul); }
.ga-numeros__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* --- Figuras -------------------------------------------------------------- */

.ga-fig img { width: 100%; height: auto; object-fit: cover; }
.ga-fig figcaption { padding-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); }

/* --- Conceito ------------------------------------------------------------- */

.ga-conceito__fotos { position: relative; padding-bottom: clamp(60px, 8vw, 110px); }
.ga .ga-conceito__fotos .ga-onda img { aspect-ratio: 5 / 4; height: auto; }
.ga-conceito__menor {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  border: clamp(6px, .8vw, 10px) solid var(--areia);
}
.ga .ga-conceito__menor img { aspect-ratio: 1; height: auto; }

/* --- Unidades ------------------------------------------------------------- */

/* 5 unidades + 1 cartão de chamada = 6 células: 3+3, 2+2+2 ou 1 por linha. */
.ga-unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.ga-unidade { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fio); }
.ga-unidade__fig { padding: clamp(10px, 1.4vw, 16px); border-bottom: 1px solid var(--fio); }
.ga .ga-unidade__fig img { height: clamp(220px, 20vw, 260px); object-fit: contain; }
.ga-unidade__txt { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px); }
.ga-unidade__area { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.ga-unidade__d { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tinta-2); }
.ga .ga-unidade__v { margin-top: auto; padding-top: 14px; font-family: var(--serif); font-size: 26px; color: var(--marinho); }
.ga-unidade__v span { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }

.ga-unidade--cta {
  justify-content: center;
  gap: 16px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--areia);
  border-style: dashed;
  border-top-right-radius: var(--onda);
}
.ga-unidade__cta-t { font-family: var(--serif); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; color: var(--marinho); }
.ga-unidade__cta-p { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tinta-2); }
.ga .ga-unidade--cta .ga-btn { align-self: flex-start; }

/* --- Interiores ----------------------------------------------------------- */

.ga-interiores {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.ga-interiores .ga-fig:nth-child(4n + 1),
.ga-interiores .ga-fig:nth-child(4n + 4) { grid-column: span 7; }
.ga-interiores .ga-fig:nth-child(4n + 2),
.ga-interiores .ga-fig:nth-child(4n + 3) { grid-column: span 5; }
.ga .ga-interiores img { height: clamp(240px, 30vw, 440px); }
.ga-interiores .ga-fig:first-child img { border-top-left-radius: var(--onda); }

/* --- Pool Party House ----------------------------------------------------- */

.ga-ppp { position: relative; overflow: hidden; background: var(--marinho); color: #fff; }
.ga-ppp__curva { top: 0; left: 0; width: min(36vw, 460px); height: 100%; opacity: .5; }
.ga-ppp__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(72px, 9vw, 128px);
}
.ga .ga-ppp__titulo {
  max-width: 8ch;
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  line-height: .92;
  letter-spacing: .02em;
  color: #fff;
}
.ga-ppp__p { margin-block: 28px 34px; max-width: 48ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.ga-ppp__fotos { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(12px, 1.4vw, 18px); align-items: end; }
.ga .ga-ppp__fotos img { height: clamp(220px, 30vw, 440px); }
.ga .ga-ppp__fotos .ga-fig:last-child img { height: clamp(160px, 20vw, 300px); }

/* --- Lazer ---------------------------------------------------------------- */

/* 8 ambientes: 4+4, 2+2+2+2 ou 1 por linha. */
.ga-lazer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.ga .ga-lazer img { height: clamp(220px, 20vw, 280px); }
.ga-lazer figcaption { letter-spacing: normal; text-transform: none; }
.ga-lazer__t { display: block; font-size: 17px; font-weight: 500; color: var(--marinho); }
.ga-lazer__d { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; color: var(--tinta-2); }

.ga-aereo { margin-top: clamp(32px, 4vw, 56px); }
.ga .ga-aereo img { height: clamp(260px, 42vw, 620px); border-top-left-radius: var(--onda); }

.ga-mais { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--fio); }
.ga-mais__rot { margin-bottom: 18px; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3); }
.ga-chips-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.ga-chips-lista li {
  padding: 9px 16px;
  border: 1px solid var(--fio);
  border-radius: 100px;
  background: rgba(255, 255, 255, .5);
  font-size: 14px;
  color: var(--tinta-2);
}

/* --- Serviços ------------------------------------------------------------- */

.ga-servicos > div { padding-block: 18px; border-bottom: 1px solid var(--fio); }
.ga-servicos > div:first-child { border-top: 1px solid var(--fio); }
.ga-servicos dt { font-size: 16px; font-weight: 500; color: var(--marinho); }
.ga-servicos dd { margin-top: 6px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--tinta-2); }

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

.ga-onde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ga-onde__mapa { position: relative; min-height: clamp(320px, 38vw, 500px); background: var(--branco); }
.ga-onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ga-dist { width: 100%; font-size: 15px; }
.ga-dist thead th { padding-bottom: 12px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); text-align: right; }
.ga-dist tbody th { padding-block: 13px; font-weight: 400; text-align: left; color: var(--tinta); }
.ga-dist td { padding-block: 13px; padding-left: 16px; text-align: right; white-space: nowrap; }
.ga-dist td:nth-child(2) { font-weight: 500; color: var(--marinho); }
.ga-dist td:nth-child(3) { font-weight: 300; color: var(--tinta-2); }
.ga-dist tbody tr { border-top: 1px solid var(--fio); }
.ga-dist tbody tr:last-child { border-bottom: 1px solid var(--fio); }
.ga .ga-onde__cta { margin-top: 24px; }
.ga-onde .ga-nota { margin-top: 14px; }

/* --- Condições ------------------------------------------------------------ */

/* Cartões com texto (exemplo, formulário, chamada das plantas) levam a curva no
   canto DIREITO: no esquerdo ela corta o rótulo da primeira linha. */

.ga-pag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: var(--fio-claro);
  border: 1px solid var(--fio-claro);
}
.ga-pag > div { padding: clamp(20px, 2.4vw, 30px); background: var(--marinho); }
.ga-pag__valor { font-family: var(--serif); font-size: clamp(40px, 3.8vw, 54px); line-height: 1; color: #fff; }
.ga-pag__rot { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--azul); }
.ga-pag__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }

.ga-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}
.ga-faixa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding-block: 18px;
  border-bottom: 1px solid var(--fio-claro);
}
.ga-faixa:first-child { border-top: 1px solid var(--fio-claro); }
.ga-faixa__t { display: block; font-size: 16px; font-weight: 500; color: #fff; }
.ga-faixa__s { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .65); }
.ga-faixa__v { font-family: var(--serif); font-size: 21px; color: #fff; white-space: nowrap; }

.ga-exemplo {
  padding: clamp(26px, 3vw, 40px);
  background: var(--areia);
  color: var(--tinta);
  border-top-right-radius: var(--onda);
}
.ga-exemplo__rot { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-3); }
.ga .ga-exemplo__un { margin-top: 10px; font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; color: var(--marinho); }
.ga .ga-exemplo__tipo { margin-top: 6px; font-size: 15px; font-weight: 300; color: var(--tinta-2); }
.ga-exemplo__fluxo { margin-block: 20px 26px; }
.ga-exemplo__fluxo > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--fio); }
.ga-exemplo__fluxo > div:first-child { border-top: 1px solid var(--fio); }
.ga-exemplo__fluxo dt { font-size: 15px; font-weight: 300; color: var(--tinta-2); }
.ga-exemplo__fluxo dd { font-size: 16px; font-weight: 500; white-space: nowrap; color: var(--marinho); }

/* --- Atendimento ---------------------------------------------------------- */

.ga-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* `height: auto` obrigatório: o height do atributo venceria o aspect-ratio. */
.ga-ana__foto { max-width: 400px; }
.ga .ga-ana__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.ga-ana__intro { margin-bottom: 28px; }
.ga-razoes { display: grid; gap: 18px; margin-bottom: 34px; }
.ga-razoes li {
  max-width: 54ch;
  padding-left: 20px;
  border-left: 2px solid var(--azul);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--tinta-2);
}
.ga-assina { margin-top: 18px; font-size: 13px; color: var(--tinta-3); }

/* --- Ficha técnica -------------------------------------------------------- */

.ga .ga-ficha__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.ga-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}
.ga-ficha > div { padding-block: 18px; border-bottom: 1px solid var(--fio); }
.ga-ficha dt { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--marinho); }
.ga-ficha dd { margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--tinta-2); }

/* --- Dúvidas -------------------------------------------------------------- */

.ga .ga-faq__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.ga-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.ga-faq details { border-bottom: 1px solid var(--fio); }
.ga-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 17px;
  font-weight: 400;
  color: var(--marinho);
  cursor: pointer;
  list-style: none;
}
.ga-faq summary::-webkit-details-marker { display: none; }
.ga-faq summary:hover { color: var(--azul); }
.ga-faq__sinal { font-size: 24px; line-height: 1; color: var(--azul); }
.ga .ga-faq p { max-width: 72ch; padding-bottom: 22px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tinta-2); }

/* --- Contato -------------------------------------------------------------- */

.ga-falar { position: relative; overflow: hidden; background: var(--marinho); color: #fff; }
.ga-falar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.ga-falar__veu { position: absolute; inset: 0; background: linear-gradient(180deg, #1A2B4C 0%, rgba(26, 43, 76, .78) 50%, #1A2B4C 100%); }
.ga-falar__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(72px, 9vw, 128px);
}
.ga-falar h2 { color: #fff; }
.ga-falar__p { margin-block: 24px 32px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.ga-ligar { margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.ga .ga-ligar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ga-creci { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .5); }

.ga-cartao { padding: clamp(26px, 3.4vw, 44px); background: var(--areia); color: var(--tinta); border-top-right-radius: var(--onda); }
.ga-chips__rot { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--marinho); }
.ga-chips__rot span { display: block; margin-top: 4px; font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.ga-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.ga-chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(26, 43, 76, .3);
  border-radius: 100px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--marinho);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ga-chip:hover { border-color: var(--marinho); }
.ga-chip--on,
.ga-chip--on:hover { background: var(--marinho); border-color: var(--marinho); color: #fff; }

@media (prefers-reduced-motion: reduce) { .ga-chip { transition: none; } }

.ga-form { display: grid; gap: 18px; }
.ga-campo { display: grid; gap: 8px; }
.ga-rot { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.ga-rot__op { font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.ga-form input,
.ga-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(26, 43, 76, .25);
  border-radius: 4px;
  background: #fff;
  font-family: var(--sans);
  font-size: 16px;   /* evita o zoom automático do iOS */
  color: var(--tinta);
  outline: none;
  resize: vertical;
}
.ga-form input:focus,
.ga-form textarea:focus { border-color: var(--azul); }
.ga-form input::placeholder { color: var(--tinta-3); }
.ga-form__fine { font-size: 13px; color: var(--tinta-3); }

.ga-obrigada__t { font-family: var(--serif); font-size: 30px; color: var(--marinho); }
.ga-obrigada__p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--tinta-2); }

/* --- Rodapé compartilhado ------------------------------------------------- */

.ga .rlp {
  --rlp-fundo: #14223D;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
.ga .rlp__wordmark { max-width: 190px; }
/* O botão flutuante bateria na barra fixa — sobe ele. */
.ga .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.ga-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(20, 34, 61, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--fio-claro);
  color: #fff;
  transform: translateY(105%);
  transition: transform .25s ease;
}
.ga-barra--on { transform: translateY(0); }
.ga-barra__wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.ga-barra__txt { min-width: 0; }
.ga-barra__valor,
.ga-barra__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-barra__valor { font-size: 15px; font-weight: 500; }
.ga-barra__sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.ga .ga-barra .ga-btn { padding: 14px 22px; font-size: 12px; letter-spacing: .12em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .ga-barra { transition: none; } }

/* --- Lightbox ------------------------------------------------------------- */

.ga-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(16, 27, 48, .95);
}
.ga-lb[hidden] { display: none; }
.ga-lb__palco { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.ga .ga-lb__img { width: auto; height: auto; max-width: 100%; max-height: 80vh; margin-inline: auto; object-fit: contain; border-radius: 0; clip-path: none; }
.ga-lb__legenda { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ga-lb__fechar,
.ga-lb__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.ga-lb__fechar { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 40px; }
.ga-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 72px; font-size: 56px; }
.ga-lb__nav--ant  { left: 8px; }
.ga-lb__nav--prox { right: 8px; }
.ga-lb__fechar:hover, .ga-lb__nav:hover { color: #199EDA; }

.ga-zoom { cursor: zoom-in; }

/* --- Celular -------------------------------------------------------------- */

@media (max-width: 760px) {
  .ga-interiores { grid-template-columns: minmax(0, 1fr); }
  .ga-interiores .ga-fig:nth-child(n) { grid-column: auto; }
  .ga .ga-interiores img { height: clamp(220px, 64vw, 340px); }
  .ga-ppp__fotos { grid-template-columns: 1fr; }
  .ga .ga-ppp__fotos .ga-fig:last-child { display: none; }
  .ga h1, .ga h2 { letter-spacing: .06em; }
  .ga-hero__curva { opacity: .4; }
}
/* ===========================================================================
   GRAND QUARTIER — Rio 2, Barra da Tijuca
   Redesenho do handoff do designer (02/09/2026), "Análise de landing pages
   Anacintra.zip". A identidade é a da INCORPORADORA (Patrimar + Carvalho
   Hosken): registro parisiense — didone (Bodoni Moda), travertino e latão.
   Karla no corpo e na interface.

   Grade e ritmo são idênticos aos do B. Unique — o que muda entre as duas
   páginas é a paleta e o tipo de display. Mexeu aqui, olhe lá também.

   Sem media query de layout: as grades colapsam por
   `repeat(auto-fit, minmax(Xpx, 1fr))` e o tipo respira por clamp().
   =========================================================================== */

.gq {
  --paper:   #F6F2EA;   /* fundo base (travertino claro) */
  --surface: #EDE7DB;   /* seção alternada */
  --ink:     #1B2029;   /* texto principal e faixas escuras */
  --body:    #3A3F49;   /* parágrafos */
  --muted:   #6B6459;   /* rótulos e descrições secundárias */
  --legal:   #8A8578;   /* disclaimers */
  --brass:   #C9A465;   /* acento: filetes, hover de CTA, destaque no escuro */
  --brass-link: #8C6D3F;/* link e metragem sobre fundo claro (contraste) */
  --hair:    rgba(27, 32, 41, .14);

  --serif: "Bodoni Moda", Didot, Georgia, "Times New Roman", serif;
  --sans:  Karla, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* A barra fixa quebra em duas linhas em tela estreita; a folga é generosa
     de propósito, senão ela come o fim do rodapé. */
  --barra: 120px;

  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

.gq *, .gq *::before, .gq *::after { box-sizing: border-box; }

/* Resets locais. Prefixo `.gq` obrigatório: o home.css do site pinta h1–h3 e
   dá margem a p/ul, e sem o prefixo a especificidade dele vence.

   🚨 p e ul vão dentro de :where() de propósito. `.gq p` (0,1,1) vence
   `.gq-hero__linha` (0,1,0) e MATA toda margem declarada por classe — foi
   exatamente o que aconteceu no ONLIFE. Com `.gq :where(p)` o peso cai para
   (0,1,0): ainda ganha do `p` solto do home.css, mas empata com as classes
   daqui, e no empate vence quem vem depois — que são elas. */
.gq h1, .gq h2, .gq h3 { margin: 0; color: var(--ink); font-weight: 400; }
.gq :where(p)  { margin: 0; }
.gq :where(ul) { margin: 0; padding: 0; list-style: none; }
.gq dl, .gq dd, .gq dt { margin: 0; }
.gq figure { margin: 0; }
.gq img { display: block; max-width: 100%; }
/* 🚨 Mesmo motivo do p/ul acima: `.gq a` (0,1,1) vence `.gq-btn--escuro`
   (0,1,0) e pintava TODOS os botões de latão — o de contorno sumia na faixa
   escura das coberturas e o escuro ficava sem contraste. Com :where(a) o peso
   cai para (0,1,0) e as classes de botão voltam a valer. */
.gq :where(a) { color: var(--brass-link); text-decoration: none; }
.gq :where(a:hover) { color: var(--ink); }

.gq-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.gq-sec { padding-block: clamp(64px, 9vw, 120px); }
.gq-sec--alt { background: var(--surface); }

/* --- Tipos ---------------------------------------------------------------- */

.gq-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
/* O filete de 36x1px que abre cada seção. */
.gq-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--brass);
}

.gq h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.05;
  text-wrap: balance;
}

.gq-texto { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.62; color: var(--body); }
.gq-texto + .gq-texto { margin-top: 20px; }
.gq-texto strong { font-weight: 600; color: var(--ink); }

.gq-nota {
  margin-top: 28px;
  max-width: 80ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--legal);
}

/* Citação de autoria, com o filete de latão à esquerda. */
.gq-citacao {
  margin-top: 32px;
  max-width: 42ch;
  padding: 6px 0 6px 22px;
  border-left: 2px solid var(--brass);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Cabeçalho de seção com o texto de apoio à direita. */
.gq-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: clamp(36px, 5vw, 56px);
  flex-wrap: wrap;
}
.gq-cab h2 { max-width: 18ch; }
.gq-cab p  { max-width: 44ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--body); }

/* --- Botões --------------------------------------------------------------- */

.gq-btn {
  display: inline-block;
  padding: 19px 32px;
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gq-btn--claro        { background: var(--paper); color: var(--ink); }
.gq-btn--claro:hover  { background: var(--brass); color: var(--ink); }
.gq-btn--escuro       { background: var(--ink);   color: var(--paper); }
.gq-btn--escuro:hover { background: var(--brass-link); color: var(--paper); }
.gq-btn--latao        { background: var(--brass); color: var(--ink); }
.gq-btn--latao:hover  { background: var(--paper); color: var(--ink); }
.gq-btn--linha {
  padding: 18px 30px;
  border: 1px solid rgba(246, 242, 234, .5);
  color: var(--paper);
}
.gq-btn--linha:hover { background: var(--paper); color: var(--ink); }
.gq-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .gq-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

/* Véu próprio do cabeçalho: o degradê do hero começa fraco no topo, e sobre a
   parte clara da foto o botão de contorno some. Isto é contraste, não enfeite. */
.gq-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(15, 17, 22, .55), transparent);
  pointer-events: none;
}

.gq-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 3vw, 30px) clamp(20px, 5vw, 56px);
}
.gq-topo__marca img { height: clamp(22px, 3vw, 30px); width: auto; }
.gq-topo__cta {
  padding: 12px 20px;   /* 45px de altura: o handoff pede 44 no mínimo */
  border: 1px solid rgba(246, 242, 234, .45);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.gq-topo__cta:hover { background: var(--paper); color: var(--ink); }

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

.gq-hero {
  position: relative;
  /* `min-height`, nunca `height`: com altura FIXA o conteúdo do hero (que é
     ancorado embaixo) transborda para CIMA quando não cabe e passa por baixo
     do cabeçalho. Ver a mesma nota no b_unique.css. */
  min-height: max(660px, 96vh);
  display: flex;
  align-items: flex-end;
  padding-top: 96px;   /* a faixa do cabeçalho, que é absoluta */
}
.gq-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.gq-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(15, 17, 22, .90) 0%,
              rgba(15, 17, 22, .45) 46%,
              rgba(15, 17, 22, .30) 100%);
}
.gq-hero__wrap {
  position: relative;
  z-index: 2;
  color: var(--paper);
  /* Sem a reserva de 72px do protótipo: lá a barra fixa é sempre visível,
     aqui ela só aparece depois que o hero sai da tela, então nada cobre o CTA. */
  padding-bottom: clamp(48px, 7vw, 84px);
}
.gq-hero .gq-olho { color: rgba(246, 242, 234, .7); }
/* Logo do empreendimento. Discreta: quem assina a página no topo é o Grupo Ana
   Cintra, e as duas marcas não podem disputar o mesmo olhar. Mesma medida do
   B. Unique, para as duas LPs continuarem sendo um sistema só. */
.gq-hero__logo {
  width: clamp(120px, 13vw, 168px);
  height: auto;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.gq-hero h1 {
  max-width: 15ch;
  margin-bottom: clamp(20px, 3vw, 32px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 88px);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--paper);
  text-wrap: balance;
}
.gq-hero__linha {
  max-width: 52ch;
  margin-bottom: clamp(28px, 4vw, 44px);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(246, 242, 234, .87);
}
.gq-hero__precos {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 52px);
  flex-wrap: wrap;
}
.gq-preco__rot {
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, .58);
}
.gq-preco__valor {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  color: var(--paper);
}
.gq-preco__obs { margin-top: 10px; font-size: 13px; color: rgba(246, 242, 234, .6); }

/* --- Números -------------------------------------------------------------- */

.gq-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding-block: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--hair);
}
.gq-numeros li { border-top: 2px solid var(--ink); padding-top: 20px; }
.gq-numeros__n {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
}
.gq-numeros__l { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.gq-numeros__d { font-size: 14px; line-height: 1.45; color: var(--muted); }

/* --- Duas colunas com mosaico -------------------------------------------- */

.gq-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.gq-duas__texto p { max-width: 46ch; }

.gq-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gq-mosaico img { width: 100%; height: clamp(160px, 19vw, 250px); object-fit: cover; }
.gq-mosaico img:first-child { grid-column: span 2; height: clamp(220px, 26vw, 340px); }

/* --- Apartamentos --------------------------------------------------------- */

.gq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.gq-card { background: var(--paper); transition: background-color .2s ease; }
.gq-card:hover { background: #FFFFFF; }
.gq-card img { width: 100%; height: 240px; object-fit: cover; }
.gq-card__corpo { padding: 26px 24px 30px; }
.gq-card h3 { margin-bottom: 6px; font-family: var(--serif); font-weight: 400; font-size: 26px; }
.gq-card__area {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--brass-link);
}
.gq-card p { font-size: 15px; line-height: 1.55; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .gq-card { transition: none; } }

/* --- Coberturas (faixa escura, fora do container) ------------------------- */

.gq-cob {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: stretch;
  background: var(--ink);
  color: var(--paper);
}
.gq-cob__texto {
  display: flex;
  align-items: center;
  padding: clamp(56px, 8vw, 116px) clamp(20px, 5vw, 64px);
}
.gq-cob__texto > div { max-width: 46ch; margin-left: auto; }
.gq-cob .gq-olho { color: rgba(246, 242, 234, .52); }
.gq-cob h2 { margin-bottom: clamp(20px, 3vw, 30px); color: var(--paper); }
.gq-cob__p {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: rgba(246, 242, 234, .76);
}
.gq-cob__p + .gq-cob__p { margin-top: 18px; }
.gq-cob__p strong { font-weight: 600; color: var(--paper); }
.gq-cob__cta { margin-top: 34px; }

/* Mosaico colado, sem gap — é o contraponto da faixa escura.
   ⚠️ O item do grid é o <figure>, não o <img>. `img:first-child` pegava TODAS as
   fotos (cada uma é a primeira do seu figure) e o `span 2` não valia — as três
   ficavam do mesmo tamanho e sobrava um buraco no canto. Mire no figure. */
.gq-cob__fotos { display: grid; grid-template-columns: 1fr 1fr; align-content: stretch; }
.gq-cob__fotos .gq-fig { min-height: clamp(160px, 20vw, 270px); }
.gq-cob__fotos img { width: 100%; height: 100%; object-fit: cover; }
.gq-cob__fotos .gq-fig:first-child {
  grid-column: span 2;
  min-height: clamp(240px, 26vw, 360px);
}

/* --- Lazer ---------------------------------------------------------------- */

/* São 16 ambientes: em 4 ou em 2 colunas a última linha sempre fecha cheia.
   Com auto-fit dava 5 colunas e o Pet place ficava sozinho na quarta linha. */
.gq-lazer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}
@media (max-width: 1040px) { .gq-lazer { grid-template-columns: repeat(2, 1fr); } }
.gq-lazer img {
  width: 100%;
  height: clamp(180px, 17vw, 230px);
  object-fit: cover;
  margin-bottom: 12px;
}
.gq-lazer h3 { margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.gq-lazer p { font-size: 14px; line-height: 1.45; color: var(--muted); }

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

/* Oito plantas: 4 ou 2 colunas fecham a grade certinho (com auto-fit davam 5 na
   primeira linha e 3 soltas na segunda). */
.gq-plantas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}
@media (max-width: 1040px) { .gq-plantas { grid-template-columns: repeat(2, 1fr); } }
.gq-planta {
  padding: 14px;
  background: var(--paper);
  transition: background-color .2s ease;
}
.gq-planta:hover { background: #FFFFFF; }
/* As plantas vêm em proporções muito diferentes (de 0,50 a 1,55). O quadro
   branco de altura fixa é o que faz as oito miniaturas parecerem do mesmo
   tamanho — sem ele, a arte de cada uma flutuava solta dentro do card. */
.gq-planta a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;      /* quadrado: acompanha a coluna e não afunila no celular */
  margin-bottom: 12px;
  padding: 10px;
  background: #FFFFFF;
}
.gq-planta img { width: 100%; height: 100%; object-fit: contain; }
.gq-planta figcaption {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) { .gq-planta { transition: none; } }

/* --- Entrega e pagamento -------------------------------------------------- */

.gq-entrega__lead {
  margin-bottom: clamp(36px, 5vw, 56px);
  max-width: 48ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--body);
}
.gq .gq-entrega__titulo { margin-bottom: 16px; max-width: 22ch; }

.gq-fases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.5vw, 28px);
  margin-bottom: clamp(20px, 2.5vw, 28px);
}
/* A segunda fase leva o filete de latão: são condições diferentes, e a cor é
   o que impede o leitor de ler as duas como uma coisa só. */
.gq-fase { border-top: 2px solid var(--ink); padding-top: 30px; }
.gq-fase--dois { border-top-color: var(--brass); }
.gq-fase h3 {
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gq-fase__data {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
}
.gq-fase__cond { margin-bottom: 8px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--body); }
.gq-fase__obs  { font-size: 15px; line-height: 1.6; color: var(--muted); }

.gq-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.5vw, 28px);
}
.gq-valores__claro { background: var(--surface); padding: clamp(28px, 4vw, 44px); }
.gq-valores__claro h3 {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gq-valores__claro p { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.62; color: var(--body); }
.gq-valores__claro p + p { margin-top: 16px; }
.gq-valores__claro strong { font-weight: 600; color: var(--ink); }

.gq-caixa {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(28px, 4vw, 44px);
  background: var(--ink);
  color: var(--paper);
}
.gq-caixa__olho {
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
}
.gq-caixa__t {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
}
.gq-caixa__p { font-size: 16px; line-height: 1.6; color: rgba(246, 242, 234, .74); }

/* --- Atendimento ---------------------------------------------------------- */

.gq-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.gq-ana img { width: 100%; max-height: 560px; object-fit: cover; }
.gq-ana h2 { margin-bottom: 24px; max-width: 20ch; font-size: clamp(28px, 3.5vw, 46px); line-height: 1.08; }
.gq-ana__intro { margin-bottom: 32px; max-width: 48ch; }
.gq-razoes { display: grid; gap: 16px; margin-bottom: 34px; }
.gq-razoes li {
  max-width: 52ch;
  padding-left: 20px;
  border-left: 2px solid var(--brass);
  font-size: 16px;
  line-height: 1.58;
  color: var(--body);
}
.gq-assina { margin-top: 18px; font-size: 13px; color: var(--legal); }

/* --- Ficha técnica -------------------------------------------------------- */

.gq-ficha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.gq-ficha-grid h2 { max-width: 12ch; }
.gq-ficha > div {
  display: grid;
  grid-template-columns: minmax(120px, .6fr) 1.4fr;
  gap: 20px;
  padding-block: 16px;
  border-top: 1px solid var(--hair);
  font-size: 15px;
  line-height: 1.5;
}
.gq-ficha > div:last-child { border-bottom: 1px solid var(--hair); }
.gq-ficha dt { color: var(--muted); }

/* --- Dúvidas -------------------------------------------------------------- */

/* Prefixados: `.gq h2` (0,1,1) anularia a margem destas classes sozinhas. */
.gq .gq-faq--titulo { margin-bottom: clamp(32px, 4vw, 52px); max-width: 18ch; }
.gq-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.gq-faq h3 { margin-bottom: 10px; font-size: 17px; font-weight: 600; }
.gq-faq p { font-size: 16px; line-height: 1.6; color: var(--body); }

/* --- Contato -------------------------------------------------------------- */

.gq-falar { background: var(--ink); color: var(--paper); }
.gq-falar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(64px, 9vw, 120px);
}
.gq-falar .gq-olho { color: rgba(246, 242, 234, .5); }
.gq-falar h2 { margin-bottom: 24px; color: var(--paper); font-size: clamp(28px, 3.6vw, 48px); }
.gq-falar__p {
  margin-bottom: 36px;
  max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: rgba(246, 242, 234, .74);
}
.gq-ligar { margin-top: 22px; font-size: 15px; color: rgba(246, 242, 234, .68); }
.gq-ligar a { color: var(--brass); border-bottom: 1px solid rgba(201, 164, 101, .4); }
.gq-ligar a:hover { color: var(--paper); }

.gq-chips__rot {
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, .55);
}
.gq-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.gq-chip {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(246, 242, 234, .3);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--paper);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.gq-chip:hover { border-color: var(--brass); color: var(--brass); }
.gq-chip--on { border-color: var(--brass); color: var(--brass); }

@media (prefers-reduced-motion: reduce) { .gq-chip { transition: none; } }

/* Campos sem caixa: só a linha de baixo, sobre o fundo escuro. */
.gq-form { display: grid; gap: 12px; }
.gq-form input,
.gq-form textarea {
  width: 100%;
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid rgba(246, 242, 234, .28);
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;   /* 16px evita o zoom automático do iOS ao focar o campo */
  color: var(--paper);
  outline: none;
  resize: none;
}
.gq-form input:focus,
.gq-form textarea:focus { border-bottom-color: var(--brass); }
.gq-form input::placeholder,
.gq-form textarea::placeholder { color: rgba(246, 242, 234, .42); }
.gq-form button { margin-top: 10px; }
.gq-form__fine { font-size: 13px; color: rgba(246, 242, 234, .45); }

/* Rótulo só para leitor de tela: o desenho usa placeholder, mas campo sem
   <label> é campo que a acessibilidade não enxerga. */
.gq-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Rodapé compartilhado ------------------------------------------------- */

.gq .rlp {
  --rlp-fundo: #1B2029;
  --rlp-texto: rgba(246, 242, 234, .62);
  --rlp-claro: #F6F2EA;
  --rlp-linha: rgba(246, 242, 234, .12);
  --rlp-fraco: rgba(246, 242, 234, .45);

  /* A barra fixa fica por cima; sem esta reserva ela come o aviso legal. */
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
/* O botão flutuante bateria na barra fixa — sobe ele. */
.gq .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.gq-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(27, 32, 41, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(246, 242, 234, .14);
  transform: translateY(105%);
  transition: transform .25s ease;
}
.gq-barra--on { transform: translateY(0); }
.gq-barra__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.gq-barra__txt {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--paper);
}
.gq-barra__valor { font-family: var(--serif); font-size: clamp(17px, 1.8vw, 22px); }
.gq-barra__sub { font-size: 14px; color: rgba(246, 242, 234, .55); }
.gq-barra .gq-btn { padding: 13px 22px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) { .gq-barra { transition: none; } }

/* --- Lightbox ------------------------------------------------------------- */

.gq-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(15, 17, 22, .94);
}
.gq-lb[hidden] { display: none; }
.gq-lb__palco { max-width: min(1200px, 92vw); text-align: center; }
.gq-lb__img { max-width: 100%; max-height: 78vh; margin-inline: auto; object-fit: contain; }
.gq-lb__legenda { margin-top: 14px; font-size: 14px; color: rgba(246, 242, 234, .7); }
.gq-lb__fechar,
.gq-lb__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  line-height: 1;
}
.gq-lb__fechar { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 40px; }
.gq-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 72px; font-size: 56px; }
.gq-lb__nav--ant  { left: 8px; }
.gq-lb__nav--prox { right: 8px; }
.gq-lb__fechar:hover, .gq-lb__nav:hover { color: var(--brass); }

.gq-fig--zoom { cursor: zoom-in; }
/* ===========================================================================
   ICON GOLF RESIDENCE — Av. Ermanno Dallari, 98, Barra da Tijuca
   Patrimar. Página montada em 18/09/2026 a partir do Book VIP e do manual.

   A identidade é a do ICON, tirada do book:
   - violeta-índigo da marca (#3C3A96) em blocos inteiros, com listras onduladas
     finas por cima (as do logo e das páginas do book);
   - índigo quase preto nas faixas escuras; lilás claro nos fundos claros;
   - títulos em caixa-alta fina e espaçada; números na serifa do logo (Cinzel);
   - legendas em "tarja" violeta sobre o canto da foto, como no book.
   Fonte do texto: Montserrat.

   Estrutura irmã das LPs do Atlântico e do Oceana (mesma Patrimar, mesma quadra).
   Grade: container de 1320px, seções em clamp, grades auto-fit (briefing das LPs).
   =========================================================================== */

.ic {
  --claro:     #F5F5FB;   /* fundo do documento */
  --claro-2:   #E9E8F5;   /* seções alternadas */
  --escuro:    #120E33;   /* faixas escuras */
  --escuro-2:  #2A237A;   /* títulos sobre o claro */
  --escuro-3:  #4A47B0;   /* hover */
  --violeta:   #3C3A96;   /* cor da marca */
  --violeta-2: #B4B1F0;   /* lilás sobre o escuro */
  --violeta-3: #4B45B8;   /* violeta legível sobre o claro */
  --tinta:     #1D1B33;
  --tinta-2:   #4E4B66;
  --tinta-3:   #7B7892;
  --fio:       rgba(18, 14, 51, .14);
  --fio-claro: rgba(255, 255, 255, .16);

  --sans:  Montserrat, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Cinzel, "Trajan Pro", Georgia, serif;

  --barra: 112px;

  font-family: var(--sans);
  color: var(--tinta);
  background: var(--claro);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.ic *, .ic *::before, .ic *::after { box-sizing: border-box; }

/* Resets locais — p, ul e a dentro de :where() para não anularem as classes. */
.ic h1, .ic h2, .ic h3 { margin: 0; color: inherit; font-weight: 400; }
.ic :where(p)  { margin: 0; }
.ic :where(ul) { margin: 0; padding: 0; list-style: none; }
.ic dl, .ic dd, .ic dt { margin: 0; }
.ic figure { margin: 0; }
.ic img { display: block; max-width: 100%; }
.ic :where(a) { color: var(--violeta-3); text-decoration: none; }
.ic :where(a:hover) { color: var(--escuro-2); }
.ic ::selection { background: var(--violeta); color: var(--escuro); }

.ic-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.ic-sec { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.ic-sec--claro  { background: var(--claro-2); }
.ic-sec--escuro { background: var(--escuro); color: #fff; }

/* Listras onduladas finas sobre os blocos violeta/escuros — o desenho do logo. */
.ic-ondas {
  background-image:
    repeating-radial-gradient(ellipse 140% 60% at 110% 120%, rgba(255, 255, 255, 0) 0 26px, rgba(255, 255, 255, .07) 27px 28px);
}

/* Legenda em tarja violeta inclinada no canto da foto, como no book. */
.ic-fig--tarja { position: relative; }
.ic .ic-fig--tarja figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 26px 10px 16px;
  background: var(--violeta);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  font-size: 11px;
  color: #fff;
}

/* --- Tipos ---------------------------------------------------------------- */

.ic-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--violeta-3);
}
/* O filete de 36x1px que abre cada rótulo — assinatura comum às LPs da casa. */
.ic-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--violeta);
}
.ic-olho--claro { color: var(--violeta-2); }
.ic-hero__end { color: rgba(255, 255, 255, .88); }

/* Títulos: caixa-alta fina e espaçada, como no book; o <em> vira violeta. */
.ic h1,
.ic h2 {
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ic h1 em,
.ic h2 em { font-style: normal; font-weight: 500; color: var(--violeta-3); }
.ic-hero h1 em,
.ic-sec--escuro h2 em,
.ic-video h2 em,
.ic-falar h2 em { color: var(--violeta-2); }
.ic h1 {
  max-width: 19ch;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.12;
}
.ic h2 {
  max-width: 22ch;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.22;
  color: var(--escuro-2);
}
.ic-sec--escuro h2, .ic-video h2, .ic-falar h2 { color: #fff; }
.ic h3 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.3; color: var(--escuro-2); }

.ic-texto { margin-top: 24px; max-width: 58ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); text-wrap: pretty; }
.ic-texto + .ic-texto { margin-top: 18px; }

.ic-nota { margin-top: 28px; max-width: 100ch; font-size: 13px; line-height: 1.7; color: var(--tinta-3); }
.ic-nota--clara { color: rgba(255, 255, 255, .55); }

.ic-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: clamp(32px, 4.5vw, 52px);
  flex-wrap: wrap;
}
.ic-cab p { max-width: 50ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); }
.ic-sec--escuro .ic-cab p { color: rgba(255, 255, 255, .78); }

.ic-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.ic-duas--centro { align-items: center; }

/* --- Botões --------------------------------------------------------------- */

.ic-btn {
  display: inline-block;
  min-height: 44px;
  padding: 16px 28px;
  border: 0;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ic .ic-btn--violeta       { background: var(--violeta); color: #fff; }
.ic .ic-btn--violeta:hover { background: var(--escuro-3); color: #fff; }
.ic .ic-btn--branco        { background: #fff; color: var(--violeta); }
.ic .ic-btn--branco:hover  { background: var(--claro-2); color: var(--escuro-2); }
.ic .ic-btn--linha-clara {
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}
.ic .ic-btn--linha-clara:hover { border-color: var(--violeta-2); color: var(--violeta-2); }
.ic-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .ic-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

.ic-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 56px);
}
.ic-topo__marca img { width: auto; height: clamp(22px, 3vw, 30px); opacity: .9; }
.ic .ic-topo__cta { padding: 11px 20px; font-size: 12px; }

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

.ic-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: min(100vh, 940px);
  padding-block: 150px clamp(48px, 6vh, 84px);
  overflow: hidden;
  color: #fff;
  background: var(--escuro);
}
.ic-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ic-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(18, 14, 51, .55) 0%,
    rgba(18, 14, 51, .10) 26%,
    rgba(18, 14, 51, .60) 54%,
    rgba(18, 14, 51, .95) 100%);
}
.ic-hero__wrap { position: relative; }
.ic-hero__logo { width: clamp(64px, 6vw, 88px); height: auto; margin-bottom: clamp(18px, 3vw, 28px); }
.ic-hero h1 { color: #fff; }
.ic-hero__linha {
  margin-top: 24px;
  max-width: 56ch;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
}
.ic-hero__linha strong { display: block; margin-top: 8px; font-weight: 500; color: var(--violeta-2); }
.ic-hero__precos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 40px);
}
.ic-preco__rot { margin-bottom: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.ic-preco__valor { font-size: clamp(32px, 3.8vw, 50px); font-weight: 300; line-height: 1; letter-spacing: .02em; }
.ic-preco__obs { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ic-preco__obs s { color: rgba(255, 255, 255, .55); }

/* --- Selo da campanha (hero) ----------------------------------------------- */

.ic-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 28px);
  padding: 10px 18px;
  border: 1px solid rgba(159, 155, 232, .6);
  font-size: 13px;
  color: #fff;
}
.ic .ic-selo { color: #fff; }
.ic-selo strong { font-weight: 500; color: var(--violeta-2); }
.ic .ic-selo:hover { border-color: var(--violeta-2); color: var(--violeta-2); }

/* --- Campanha (bloco removível) -------------------------------------------- */

.ic-sec--violeta { background-color: var(--violeta); color: #fff; }
.ic-sec--violeta h2 { color: #fff; }
.ic-sec--violeta h2 em { color: var(--violeta-2); }
.ic-sec--violeta .ic-cab p { color: rgba(255, 255, 255, .82); }

.ic-ofertas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
/* 6 cartões: 3+3; 2+2+2 no tablet; 1 coluna no celular — nunca 4+2. */
@media (max-width: 900px) { .ic-ofertas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ic-ofertas { grid-template-columns: minmax(0, 1fr); } }
.ic-oferta { padding: clamp(22px, 2.6vw, 30px); background: var(--escuro); color: #fff; }
.ic-oferta__torre { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--violeta-2); }
.ic .ic-oferta__un { margin-top: 6px; font-size: 22px; font-weight: 400; letter-spacing: .04em; }
.ic-oferta__tipo { margin-top: 6px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .75); }
.ic .ic-oferta__de { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.ic .ic-oferta__por { margin-top: 4px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; line-height: 1.1; color: #fff; }
.ic .ic-oferta__menos { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--violeta-2); }

/* --- Vista real ----------------------------------------------------------- */

.ic-vistas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.ic .ic-vistas img { aspect-ratio: 16 / 9; height: auto; }
.ic-sec--escuro .ic-fig figcaption { color: rgba(255, 255, 255, .7); }

/* --- Fotos da obra (reais) ------------------------------------------------- */

.ic-obra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.ic .ic-obra img { aspect-ratio: 3 / 2; height: auto; }

/* --- Números -------------------------------------------------------------- */

.ic-numeros { background: var(--escuro); color: #fff; }
.ic-numeros__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--fio-claro);
}
.ic-numeros__n { font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; line-height: 1; color: var(--violeta-2); }
.ic-numeros__l { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.ic-numeros__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* --- Figuras -------------------------------------------------------------- */

.ic-fig img { width: 100%; height: auto; object-fit: cover; }
.ic-fig figcaption { padding-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }

.ic-fotos-duas { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.ic .ic-fotos-duas img { aspect-ratio: 16 / 9; height: auto; }

/* --- Unidades ------------------------------------------------------------- */

/* 4 plantas: 2+2 ou 1 por linha (4 lado a lado ficaria ilegível). */
.ic-unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.ic-unidade { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fio); }
.ic-unidade__fig { padding: clamp(10px, 1.4vw, 16px); border-bottom: 1px solid var(--fio); }
.ic .ic-unidade__fig img { height: clamp(240px, 26vw, 340px); object-fit: contain; }
.ic-unidade__txt { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px); }
.ic-unidade__area { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--violeta-3); }
.ic-unidade__d { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tinta-2); }
.ic .ic-unidade__v { margin-top: auto; padding-top: 14px; font-size: 24px; font-weight: 400; color: var(--escuro-2); }
.ic-unidade__v span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }

.ic-pedir { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: clamp(32px, 4vw, 48px); }
.ic-pedir__s { font-size: 14px; color: var(--tinta-2); }

.ic-perspectivas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5vw, 64px);
}
.ic .ic-perspectivas img { aspect-ratio: 3 / 2; height: auto; }

/* --- Decorados ------------------------------------------------------------ */

.ic-decorados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.ic .ic-decorados img { aspect-ratio: 3 / 2; height: auto; }

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

.ic-video { background-color: var(--escuro); color: #fff; }
.ic-video__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 112px);
}
.ic-video__p { margin-block: 24px 32px; max-width: 44ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }

/* O arquivo só baixa no clique (preload="none"): o que aparece é o poster,
   coberto por um <button> — assim também abre pelo teclado. */
.ic-player { position: relative; overflow: hidden; background: #000; }
.ic-player video { display: block; width: 100%; height: auto; aspect-ratio: 1030 / 720; object-fit: cover; background: #000; }
.ic-player__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(18, 14, 51, .55), rgba(18, 14, 51, 0) 70%),
    linear-gradient(to top, rgba(18, 14, 51, .6), rgba(18, 14, 51, .1));
  transition: opacity .25s;
}
.ic-player--on .ic-player__capa { opacity: 0; pointer-events: none; }
.ic-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--violeta);
  color: var(--escuro);
  transition: transform .2s, background .2s;
}
.ic-player__play svg { width: 40%; margin-left: 8%; }
.ic-player__capa:hover .ic-player__play,
.ic-player__capa:focus-visible .ic-player__play { transform: scale(1.06); background: var(--violeta-2); }
.ic-player__rot { font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.ic-player__tempo { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

@media (prefers-reduced-motion: reduce) { .ic-player__capa, .ic-player__play { transition: none; } }

/* --- Lazer ---------------------------------------------------------------- */

.ic .ic-clube { margin-bottom: clamp(24px, 3vw, 40px); }
.ic .ic-clube img { height: clamp(220px, 34vw, 480px); }

.ic-lazer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.ic .ic-lazer img { height: clamp(220px, 22vw, 300px); }
.ic-lazer figcaption { letter-spacing: normal; text-transform: none; }
.ic-lazer__t { display: block; font-size: 17px; font-weight: 500; color: var(--escuro-2); }
.ic-lazer__d { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; color: var(--tinta-2); }

.ic-servicos { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); background-color: var(--escuro); color: #fff; }
.ic-servicos .ic-mais__rot { color: var(--violeta-2); }
.ic-servicos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px clamp(20px, 3vw, 40px);
}
.ic-servicos__lista dt { font-size: 15px; font-weight: 500; }
.ic-servicos__lista dd { margin-top: 4px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.ic-servicos .ic-nota { color: rgba(255, 255, 255, .5); }

.ic-mais { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--fio); }
.ic-mais__rot { margin-bottom: 18px; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3); }
.ic-chips-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.ic-chips-lista li {
  padding: 9px 16px;
  border: 1px solid var(--fio);
  background: rgba(255, 255, 255, .6);
  font-size: 14px;
  color: var(--tinta-2);
}

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

.ic-onde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ic-onde__mapa { position: relative; min-height: clamp(320px, 38vw, 480px); background: var(--claro); }
.ic-onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ic-onde__rot { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--violeta-3); }
.ic-perto li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 14px;
  border-top: 1px solid var(--fio);
  font-size: 16px;
  color: var(--tinta);
}
.ic-perto li:last-child { border-bottom: 1px solid var(--fio); }
.ic-perto__t { flex: 0 0 auto; font-size: 14px; font-weight: 500; color: var(--violeta-3); }
.ic .ic-onde__cta { margin-top: 28px; }

/* --- Condições ------------------------------------------------------------ */

.ic-pag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--fio-claro);
  border: 1px solid var(--fio-claro);
}
.ic-pag > div { padding: clamp(20px, 2.4vw, 30px); background: var(--escuro); }
.ic-pag__valor { font-size: clamp(32px, 3.2vw, 46px); font-weight: 300; line-height: 1; color: var(--violeta-2); }
.ic-pag__rot { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.ic-pag__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* --- Atendimento ---------------------------------------------------------- */

.ic-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* `height: auto` obrigatório: o height do atributo venceria o aspect-ratio. */
.ic-ana__foto { max-width: 400px; }
.ic .ic-ana__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.ic-ana__intro { margin-bottom: 28px; }
.ic-razoes { display: grid; gap: 18px; margin-bottom: 34px; }
.ic-razoes li {
  max-width: 54ch;
  padding-left: 20px;
  border-left: 2px solid var(--violeta);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--tinta-2);
}
.ic-assina { margin-top: 18px; font-size: 13px; color: var(--tinta-3); }

/* --- Ficha técnica -------------------------------------------------------- */

.ic .ic-ficha__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.ic-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}
.ic-ficha > div { padding-block: 18px; border-bottom: 1px solid var(--fio); }
.ic-ficha dt { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--violeta-3); }
.ic-ficha dd { margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--tinta-2); }
.ic .ic-implantacao { margin-top: clamp(40px, 5vw, 64px); padding: clamp(10px, 1.4vw, 16px); background: #fff; border: 1px solid var(--fio); }


/* --- Dúvidas -------------------------------------------------------------- */

.ic .ic-faq__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.ic-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.ic-faq details { border-bottom: 1px solid var(--fio); }
.ic-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 17px;
  font-weight: 500;
  color: var(--escuro-2);
  cursor: pointer;
  list-style: none;
}
.ic-faq summary::-webkit-details-marker { display: none; }
.ic-faq summary:hover { color: var(--violeta-3); }
.ic-faq__sinal { font-size: 24px; line-height: 1; color: var(--violeta-3); }
.ic .ic-faq p { max-width: 72ch; padding-bottom: 22px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tinta-2); }

/* --- Contato -------------------------------------------------------------- */

.ic-falar { position: relative; overflow: hidden; background: var(--escuro); color: #fff; }
.ic-falar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.ic-falar__veu { position: absolute; inset: 0; background: linear-gradient(180deg, #120E33 0%, rgba(18, 14, 51, .78) 50%, #120E33 100%); }
.ic-falar__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(72px, 9vw, 128px);
}
.ic-falar__p { margin-block: 24px 32px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.ic-ligar { margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.ic .ic-ligar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ic-creci { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .5); }

.ic-cartao { padding: clamp(26px, 3.4vw, 44px); background: var(--claro); color: var(--tinta); border-top: 4px solid var(--violeta); }
.ic-chips__rot { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--escuro-2); }
.ic-chips__rot span { display: block; margin-top: 4px; font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.ic-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.ic-chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(18, 14, 51, .3);
  border-radius: 2px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--escuro-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ic-chip:hover { border-color: var(--escuro-2); }
.ic-chip--on,
.ic-chip--on:hover { background: var(--escuro-2); border-color: var(--escuro-2); color: #fff; }

@media (prefers-reduced-motion: reduce) { .ic-chip { transition: none; } }

.ic-form { display: grid; gap: 18px; }
.ic-campo { display: grid; gap: 8px; }
.ic-rot { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.ic-rot__op { font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.ic-form input,
.ic-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(18, 14, 51, .25);
  border-radius: 2px;
  background: #fff;
  font-family: var(--sans);
  font-size: 16px;   /* evita o zoom automático do iOS */
  color: var(--tinta);
  outline: none;
  resize: vertical;
}
.ic-form input:focus,
.ic-form textarea:focus { border-color: var(--violeta-3); }
.ic-form input::placeholder { color: var(--tinta-3); }
.ic-form__fine { font-size: 13px; color: var(--tinta-3); }

.ic-obrigada__t { font-size: 26px; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; color: var(--escuro-2); }
.ic-obrigada__p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--tinta-2); }

/* --- Rodapé compartilhado ------------------------------------------------- */

.ic .rlp {
  --rlp-fundo: #0C0926;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
.ic .rlp__wordmark { max-width: 70px; }
/* O botão flutuante bateria na barra fixa — sobe ele. */
.ic .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.ic-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(18, 14, 51, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--fio-claro);
  color: #fff;
  transform: translateY(105%);
  transition: transform .25s ease;
}
.ic-barra--on { transform: translateY(0); }
.ic-barra__wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.ic-barra__txt { min-width: 0; }
.ic-barra__valor,
.ic-barra__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-barra__valor { font-size: 15px; font-weight: 500; }
.ic-barra__sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.ic .ic-barra .ic-btn { padding: 14px 22px; font-size: 12px; letter-spacing: .12em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .ic-barra { transition: none; } }

/* --- Lightbox ------------------------------------------------------------- */

.ic-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(10, 8, 30, .95);
}
.ic-lb[hidden] { display: none; }
.ic-lb__palco { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.ic .ic-lb__img { width: auto; height: auto; max-width: 100%; max-height: 80vh; margin-inline: auto; object-fit: contain; clip-path: none; }
.ic-lb__legenda { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ic-lb__fechar,
.ic-lb__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.ic-lb__fechar { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 40px; }
.ic-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 72px; font-size: 56px; }
.ic-lb__nav--ant  { left: 8px; }
.ic-lb__nav--prox { right: 8px; }
.ic-lb__fechar:hover, .ic-lb__nav:hover { color: var(--violeta-2); }

.ic-zoom { cursor: zoom-in; }

/* --- Só do Icon ----------------------------------------------------------- */

/* Números grandes na serifa do logo. */
.ic-preco__valor, .ic-numeros__n, .ic-pag__valor, .ic .ic-oferta__por, .ic .ic-unidade__v, .ic .ic-exemplo__un {
  font-family: var(--serif);
  font-weight: 400;
}
.ic-oferta { background: var(--escuro); }

/* Vistas reais: panorâmicas, uma embaixo da outra ficam melhores que em grade. */
.ic-vistas { grid-template-columns: minmax(0, 1fr); }
.ic .ic-vistas img { aspect-ratio: 21 / 8; }

/* Plantas recortadas (em pé): três lado a lado em tela larga. */
.ic-unidades { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.ic .ic-unidade__fig img { height: clamp(300px, 30vw, 420px); }

.ic-perspectivas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* Condições: explicação da campanha + exemplo de fluxo. */
.ic-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: center;
}
.ic-valores__t { font-size: clamp(20px, 1.8vw, 24px); font-weight: 300; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.ic-valores__p { margin-block: 16px 28px; max-width: 46ch; font-size: 15px; font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, .78); }
.ic-exemplo { padding: clamp(26px, 3vw, 40px); background: var(--claro); color: var(--tinta); border-top: 4px solid var(--violeta); }
.ic-exemplo__rot { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--violeta-3); }
.ic .ic-exemplo__un { margin-top: 10px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--escuro-2); }
.ic .ic-exemplo__tipo { margin-top: 6px; font-size: 15px; font-weight: 300; color: var(--tinta-2); }
.ic-exemplo__fluxo { margin-top: 20px; }
.ic-exemplo__fluxo > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--fio); }
.ic-exemplo__fluxo > div:first-child { border-top: 1px solid var(--fio); }
.ic-exemplo__fluxo dt { font-size: 15px; font-weight: 300; color: var(--tinta-2); }
.ic-exemplo__fluxo dd { font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--escuro-2); }

/* Vizinhos na mesma quadra (Oceana e Atlântico). */
.ic-vizinhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.ic .ic-vizinho { display: block; background: #fff; border: 1px solid var(--fio); color: var(--tinta); }
.ic .ic-vizinho:hover { border-color: var(--violeta); color: var(--tinta); }
.ic .ic-vizinho img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ic-vizinho__t { display: block; padding: 20px 22px 0; font-size: 18px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--escuro-2); }
.ic-vizinho__d { display: block; padding: 6px 22px 22px; font-size: 14px; font-weight: 300; color: var(--tinta-2); }

/* --- Celular -------------------------------------------------------------- */

@media (max-width: 760px) {
  .ic h1, .ic h2 { letter-spacing: .04em; }
}
/* ==========================================================================
   TERRENO JOÁ — grupoanacintra.com.br/joa
   View: app/views/pages/gac/joa.html.erb

   Destino da campanha de Meta Ads do terreno.

   Visual reconstruído em 28/08/2026 a partir do handoff do designer
   ("Landing page para terreno Joá.zip"), aprovado pela Ana. Mudanças em
   relação à primeira versão: paleta verde-escura no lugar do azul-noite,
   Newsreader + Archivo no lugar de Albert Sans, header e barra fixos,
   preço no hero, e duas seções novas.

   TODA classe leva o prefixo .joa- porque o application.css faz require_tree
   e o bundle é global: classe sem prefixo aqui quebra o layout de outra LP.

   ⚠️ home.css:53 tem `h1, h2, h3 { color: var(--ink) }` — regra de ELEMENTO,
   sem prefixo, que atinge os títulos daqui e VENCE a cor herdada de `.joa`
   (herança nunca ganha de uma regra que mira o elemento). Já derrubou o
   título do hero para preto sobre foto clara uma vez. Por isso a cor dos
   títulos é declarada explicitamente logo abaixo. Não remova.
   ========================================================================== */

.joa {
  --joa-fundo:      #0e100f;
  --joa-fundo-alt:  #161917;
  --joa-texto:      #f2efe9;
  --joa-texto-2:    #ded9cf;
  --joa-texto-3:    #c9c4ba;
  --joa-suave:      #a9a49a;
  --joa-fraco:      #8d8a83;
  --joa-minimo:     #6f6c66;
  --joa-acento:     #d8a25e;
  --joa-acento-luz: #eab97c;
  --joa-sobre-acento: #14110c;
  --joa-linha:      rgba(242,239,233,.14);
  --joa-borda:      rgba(242,239,233,.16);
  --joa-borda-btn:  rgba(242,239,233,.35);

  --joa-serif: Newsreader, Georgia, "Times New Roman", serif;
  --joa-sans:  Archivo, Helvetica, -apple-system, "Segoe UI", sans-serif;
  --joa-estreita: "Archivo Narrow", Archivo, Helvetica, sans-serif;

  background: var(--joa-fundo);
  color: var(--joa-texto-3);
  font-family: var(--joa-sans);
  font-weight: 400;
  line-height: 1.6;
  /* Espaço para a barra fixa não cobrir o fim do rodapé. */
  padding-bottom: 4.5rem;
}

.joa *,
.joa *::before,
.joa *::after { box-sizing: border-box; }

.joa figure { margin: 0; }
.joa img,
.joa video { display: block; max-width: 100%; }

/* ⚠️ REGRA DEFENSIVA — não remova.
   Toda <img> aqui traz os atributos width/height do arquivo, que valem como
   altura FIXA. Enquanto essa altura vale, `aspect-ratio` é simplesmente
   ignorado: a imagem estica. Esse bug apareceu três vezes em 28/08/2026 —
   nas duas fotos da vista (562×703 em vez de 358×448) e na foto da Ana
   (544×900 em vez de quadrada). Zerar a altura aqui, uma vez, evita a
   quarta. As exceções que precisam de altura própria vêm abaixo, com
   especificidade maior. */
.joa img { height: auto; }
.joa .joa-hero__bg { height: 100%; }

.joa h1, .joa h2, .joa h3 {
  color: var(--joa-texto);
  font-family: var(--joa-serif);
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}
.joa p { margin: 0; }

/* ------------------------------------------------------------- tipografia */
.joa-kicker {
  margin: 0;
  font-family: var(--joa-estreita);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--joa-acento);
}

.joa-h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.06;
  letter-spacing: -.02em;
}
.joa-h3 {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.joa-lede {
  font-family: var(--joa-serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.55;
  color: var(--joa-texto-3);
}

/* ----------------------------------------------------------------- layout */
.joa-wrap {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding-inline: 28px;
}
.joa-sec { padding: clamp(56px, 10vw, 96px) 0; }
.joa-sec--alt { background: var(--joa-fundo-alt); }

.joa-cab {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
  align-items: end;
}
.joa-cab__titulo { display: flex; flex-direction: column; gap: 14px; }

/* --------------------------------------------------------------- botões */
.joa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--joa-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 15px 26px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.joa-btn--primario {
  background: var(--joa-acento);
  color: var(--joa-sobre-acento);
}
.joa-btn--primario:hover { background: var(--joa-acento-luz); }
.joa-btn--secundario {
  background: transparent;
  border-color: var(--joa-borda-btn);
  color: var(--joa-texto);
}
.joa-btn--secundario:hover { border-color: var(--joa-acento); color: var(--joa-acento); }
.joa-btn--bloco { width: 100%; padding: 18px 24px; }
.joa-btn:focus-visible { outline: 2px solid var(--joa-acento); outline-offset: 3px; }

/* ---------------------------------------------------------- header fixo */
.joa-topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  background: linear-gradient(180deg, rgba(14,16,15,.85), rgba(14,16,15,0));
}
.joa-topo__marca {
  font-family: var(--joa-estreita);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #d9d4c9;
}
.joa-topo__cta {
  font-family: var(--joa-sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--joa-texto);
  border: 1px solid var(--joa-borda-btn);
  border-radius: 999px;
  padding: 9px 18px;
  transition: border-color .2s ease, color .2s ease;
}
.joa-topo__cta:hover { border-color: var(--joa-acento); color: var(--joa-acento); }

/* ------------------------------------------------------------------ hero */
.joa-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.joa-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.joa-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(14,16,15,.55) 0%,
    rgba(14,16,15,.15) 35%,
    rgba(14,16,15,.92) 100%);
}
.joa-hero__wrap {
  position: relative;
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: 0 28px 56px;
  animation: joaFade .9s ease both;
}
.joa-hero__titulo {
  margin-top: 14px;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 15ch;
}
.joa-hero__sub {
  margin-top: 20px;
  font-family: var(--joa-serif);
  font-weight: 300;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.5;
  color: var(--joa-texto-2);
  max-width: 46ch;
}
.joa-hero__barra {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(242,239,233,.18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 48px;
}
.joa-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; }

@keyframes joaFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- preço */
.joa-preco__rotulo {
  font-family: var(--joa-estreita);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--joa-suave);
}
.joa-preco__valor {
  font-family: var(--joa-serif);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  color: var(--joa-texto);
  font-variant-numeric: tabular-nums;
}
.joa-preco__m2 {
  margin-top: 4px;
  font-size: 13px;
  color: var(--joa-suave);
}

/* --------------------------------------------------------------- grades */
/* Divisórias de 1px feitas com gap sobre fundo — sem bordas duplicadas. */
.joa-grade {
  margin-top: 40px;
  display: grid;
  gap: 1px;
  background: var(--joa-linha);
  border: 1px solid var(--joa-linha);
}
.joa-grade--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.joa-grade--cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.joa-cel {
  background: var(--joa-fundo);
  padding: 32px 26px;
}
.joa-sec--alt .joa-cel { background: var(--joa-fundo-alt); }

.joa-num {
  font-family: var(--joa-serif);
  font-weight: 300;
  font-size: 46px;
  line-height: 1;
  color: var(--joa-texto);
  font-variant-numeric: tabular-nums;
}
.joa-num span { font-size: 22px; color: var(--joa-suave); margin-left: 6px; }
.joa-cel__rotulo { margin-top: 10px; font-size: 14px; color: var(--joa-texto-2); }
.joa-cel__nota   { margin-top: 6px; font-size: 13px; color: var(--joa-fraco); line-height: 1.5; }

.joa-cel h3 {
  font-family: var(--joa-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--joa-texto);
}
.joa-cel p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--joa-texto-2); }
.joa-cel__extra {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--joa-linha);
  font-size: 14px;
  color: var(--joa-texto-3);
}

/* Três notas soltas abaixo da grade de medidas. */
.joa-notas {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  list-style: none;
  padding: 0;
}
.joa-notas li { margin: 0; font-size: 15px; line-height: 1.6; color: var(--joa-texto-3); }
.joa-notas strong { color: var(--joa-texto); font-weight: 600; }

/* ------------------------------------------------------------------ vídeo */
.joa-video {
  position: relative;
  margin-top: 40px;
  background: #000;
  border: 1px solid var(--joa-linha);
}
.joa-video video { width: 100%; height: auto; }

/* Com preload leve o poster parece foto e o filme passa despercebido — a Ana
   chegou a perguntar se o vídeo não ia ser usado. Some no primeiro toque. */
.joa-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  width: 100%;
  border: 0;
  background: linear-gradient(rgba(14,16,15,.15), rgba(14,16,15,.5));
  color: var(--joa-texto);
  font-family: inherit;
  cursor: pointer;
  transition: background-color .25s ease;
}
.joa-play:hover { background: linear-gradient(rgba(14,16,15,.05), rgba(14,16,15,.38)); }
.joa-play[hidden] { display: none; }
.joa-play__disco {
  width: clamp(56px, 8vw, 78px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(242,239,233,.55);
  background: rgba(14,16,15,.42);
  display: grid;
  place-items: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.joa-play:hover .joa-play__disco { background: var(--joa-acento); border-color: var(--joa-acento); }
.joa-play__disco svg { width: 38%; height: 38%; fill: #fff; margin-left: 12%; }
.joa-play:hover .joa-play__disco svg { fill: var(--joa-sobre-acento); }
.joa-play__txt {
  font-family: var(--joa-estreita);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.joa-play:focus-visible { outline: 2px solid var(--joa-acento); outline-offset: -4px; }

/* ---------------------------------------------------------------- vistas */
/* ⚠️ O limite de largura é o que segura a ALTURA. Sem ele, na faixa de 1200 px
   cada foto vai a 562×703 — mais alta que a tela do notebook. Já aconteceu duas
   vezes (a Ana pegou a primeira pelo print). Medir a altura resultante, não só
   a proporção. */
.joa-vistas {
  margin-top: 40px;
  max-width: 46rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* ⚠️ As duas fotos são VERTICAIS (3:4 e 9:16). O handoff pedia 4:3, que é
   deitado e as decepava; 4:5 foi a proporção que a Ana escolheu olhando quatro
   opções lado a lado. `height: auto` é obrigatório: com os atributos
   width/height do arquivo valendo, o aspect-ratio é ignorado. */
.joa-vista img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.joa-vista--entardecer img { object-position: center 85%; }
.joa-vista--lua img        { object-position: center 62%; }
.joa-vista figcaption { margin-top: 10px; font-size: 13px; color: var(--joa-fraco); }

/* -------------------------------------------------------------- conceito */
.joa-conceito {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
}
.joa-conceito img { width: 100%; height: auto; }
.joa-conceito__txt { display: flex; flex-direction: column; gap: 14px; }
.joa-aviso {
  font-size: 13px;
  line-height: 1.6;
  color: var(--joa-fraco);
  border-left: 1px solid rgba(216,162,94,.5);
  padding-left: 14px;
}
.joa-aviso strong { color: var(--joa-texto-3); font-weight: 600; }

/* ------------------------------------------------------------ localização */
.joa-local { display: grid; gap: 48px; align-items: center; }
.joa-local__txt { display: flex; flex-direction: column; gap: 18px; }
.joa-linhas { margin: 6px 0 0; padding: 0; list-style: none; }
.joa-linhas li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--joa-linha);
  font-size: 15px;
  color: var(--joa-texto-2);
}
.joa-linhas li span { color: var(--joa-fraco); text-align: right; }

/* ------------------------------------------------------------ autoridade */
.joa-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  align-items: center;
  border-top: 1px solid var(--joa-linha);
  padding-top: 72px;
}
.joa-ana__foto { width: 100%; aspect-ratio: 1; object-fit: cover; }
.joa-ana__txt { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.joa-ana__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.joa-ana__lista li {
  display: flex;
  gap: 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--joa-texto-2);
}
.joa-ana__lista li::before { content: "·"; color: var(--joa-acento); font-weight: 700; }
.joa-ana__assinatura { font-size: 14px; color: var(--joa-fraco); }

/* ------------------------------------------------------------- conversar */
.joa-conversar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 64px;
  align-items: start;
}
.joa-conversar__esq { display: flex; flex-direction: column; gap: 18px; }
.joa-conversar__esq .joa-h2 { font-size: clamp(32px, 4.5vw, 52px); max-width: 14ch; }

.joa-caixa {
  border: 1px solid var(--joa-borda);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.joa-caixa__valor {
  font-family: var(--joa-serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  color: var(--joa-texto);
  font-variant-numeric: tabular-nums;
}
.joa-caixa__linha { font-size: 14px; color: var(--joa-texto-3); }
.joa-caixa__nota  { font-size: 13px; color: var(--joa-fraco); line-height: 1.6; }

.joa-form-caixa {
  border: 1px solid var(--joa-borda);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.joa-rotulo {
  font-family: var(--joa-estreita);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--joa-suave);
}

/* Seletor de interesse: alimenta a mensagem do WhatsApp e o campo do
   formulário ao mesmo tempo. */
.joa-interesse { display: flex; flex-direction: column; gap: 10px; }
.joa-opcao {
  padding: 14px 18px;
  border-radius: 2px;
  border: 1px solid rgba(242,239,233,.22);
  background: transparent;
  color: var(--joa-texto-3);
  font-family: var(--joa-sans);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.joa-opcao:hover { border-color: rgba(242,239,233,.4); }
.joa-opcao[aria-pressed="true"] {
  background: rgba(216,162,94,.14);
  border-color: var(--joa-acento);
  color: var(--joa-texto);
}
.joa-opcao:focus-visible { outline: 2px solid var(--joa-acento); outline-offset: 2px; }

.joa-nota-cta { font-size: 13px; line-height: 1.6; color: var(--joa-fraco); }
.joa-ligar {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--joa-linha);
  font-size: 14px;
  color: var(--joa-texto-3);
}
.joa-ligar a { color: var(--joa-texto); text-decoration: none; }
.joa-ligar a:hover { color: var(--joa-acento); }

/* ----------------------------------------------------------- formulário */
.joa-form { display: flex; flex-direction: column; gap: 14px; }
.joa-form__intro { font-size: 14px; color: var(--joa-fraco); line-height: 1.6; }
.joa-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--joa-suave);
}
.joa-form input,
.joa-form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(242,239,233,.22);
  border-radius: 2px;
  background: rgba(242,239,233,.03);
  color: var(--joa-texto);
  font-family: var(--joa-sans);
  font-size: 15px;
}
.joa-form textarea { resize: vertical; }
.joa-form input::placeholder,
.joa-form textarea::placeholder { color: var(--joa-fraco); }
.joa-form input:focus-visible,
.joa-form textarea:focus-visible {
  outline: 2px solid var(--joa-acento);
  outline-offset: 1px;
  border-color: transparent;
}
.joa-form__fine { font-size: 12px; line-height: 1.55; color: var(--joa-minimo); }

/* ------------------------------------------------------------ barra fixa */
.joa-barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 28px;
  background: rgba(14,16,15,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--joa-borda);
  transform: translateY(110%);
  transition: transform .35s ease;
}
.joa-barra--visivel { transform: translateY(0); }
.joa-barra__valor {
  font-family: var(--joa-serif);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.1;
  color: var(--joa-texto);
  font-variant-numeric: tabular-nums;
}
.joa-barra__sub { font-size: 13px; color: var(--joa-suave); }
.joa-barra .joa-btn { padding: 12px 20px; font-size: 14px; }

@media (max-width: 30rem) {
  .joa-barra { padding: 12px 16px; }
  .joa-barra__valor { font-size: 20px; }
  .joa-barra .joa-btn { padding: 11px 14px; font-size: 13px; }
  .joa-topo { padding: 12px 16px; }
  .joa-wrap { padding-inline: 20px; }
  .joa-hero__wrap { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .joa-hero__wrap { animation: none; }
  .joa-barra, .joa-btn, .joa-opcao, .joa-play { transition: none; }
}

/* ------------------------------------------------------------- rodapé
   ⚠️ O rodapé compartilhado declara as próprias variáveis DENTRO de `.rlp`
   (ver rodape_lp.css: `.rlp { --rlp-fundo: #0A2C35 }`). Variável declarada no
   próprio elemento vence a herdada do ancestral — por isso pôr `--rlp-*` em
   `.joa` NÃO funciona, e o rodapé ficou azul-petróleo sobre a página verde até
   a Ana apontar em 28/08/2026. A sobrescrita tem de mirar `.joa .rlp`, como o
   Elos já fazia.

   Escopado em `.joa`: um `.rlp` solto aqui pintaria o rodapé de todas as
   outras LPs, já que o CSS é um bundle global. */
.joa .rlp {
  --rlp-fundo: #0a0c0b;
  --rlp-texto: #c9c4ba;
  --rlp-claro: #f2efe9;
  --rlp-linha: rgba(242,239,233,.14);
  --rlp-fraco: #8d8a83;
}

/* O botão flutuante do WhatsApp vem da mesma peça e usa o acento da LP. */
.joa .rlp-wa {
  background: var(--joa-acento);
  color: var(--joa-sobre-acento);
}
.joa .rlp-wa:hover { background: var(--joa-acento-luz); }
.joa .rlp-wa svg { fill: currentColor; }
/* ===========================================================================
   KRONOS BY TEGRA — Av. Afonso Arinos de Melo Franco, 425, Barra da Tijuca
   Incorporação Tegra (TGRJ-24). Página montada em 21/09/2026.

   A identidade vem do conceito grego do próprio book (Blue Zones, Amanzoe,
   arcadas brancas): azul Egeu, cal e oliva. Nada de dourado.
   - azul Egeu profundo (#1B4B63) nas faixas escuras e nos títulos;
   - areia/cal (#EFE8DC) e creme (#FCFAF6) nos fundos;
   - oliva (#8A9470) como acento — a cor da vegetação mediterrânea.
   Marca do hero em Cinzel (romana, caixa-alta); títulos em Cormorant Garamond;
   corpo em Inter, que o layout já carrega.

   Prefixo .kr em tudo — application.css faz require_tree e sem prefixo uma LP
   quebraria a outra.

   ⚠️ Proporção: as perspectivas do Kronos vão de 3,1:1 (o playground) a 1:1
   (o redário) e há verticais de 1920x2742 (as fachadas). Fotos comuns entram
   numa janela 16:10; as panorâmicas ocupam a linha inteira com proporção FIXA
   (com `auto` a figura nasceria com altura zero e a página pularia).
   =========================================================================== */

.kr {
  --azul:     #1B4B63;
  --azul-2:   #2D6F8E;
  --azul-3:   #3C88AA;
  --areia:    #EFE8DC;
  --creme:    #FCFAF6;
  --oliva:    #8A9470;
  --tinta:    #1D2A30;
  --tinta-2:  #4C5A61;
  --tinta-3:  #7E8B92;
  --fio:      rgba(27, 75, 99, .14);
  --fio-claro: rgba(255, 255, 255, .22);

  --serifa: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --romana: Cinzel, Georgia, serif;

  background: var(--creme);
  color: var(--tinta);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

.kr *, .kr *::before, .kr *::after { box-sizing: border-box; }
.kr :where(p, h1, h2, h3, ul, figure) { margin: 0; }
.kr :where(img) { display: block; max-width: 100%; height: auto; }
.kr :where(figure) { margin: 0; }

.kr-wrap { width: min(1320px, 100% - 2.5rem); margin-inline: auto; }
.kr-sec  { padding-block: clamp(3.5rem, 8vw, 7rem); }

.kr h1, .kr h2, .kr h3 {
  font-family: var(--serifa);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.12;
  color: var(--azul);
}
.kr h1 { font-size: clamp(2.3rem, 6.2vw, 4.1rem); }
.kr h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); margin-bottom: 1rem; }
.kr h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.kr h1 em { font-style: italic; color: #D9E4C9; }

.kr-olho {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oliva);
  margin-bottom: .6rem;
}

.kr-texto { color: var(--tinta-2); max-width: 62ch; margin-bottom: 1.4rem; }
.kr-nota { margin-top: 1.4rem; font-size: .85rem; color: var(--tinta-3); max-width: 72ch; }

/* ------------------------------------------------------------------ botões */
.kr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.kr-btn--azul { background: var(--azul-2); color: #fff; }
.kr-btn--azul:hover { background: var(--azul-3); }
.kr-btn--linha-clara { border-color: var(--fio-claro); color: #fff; }
.kr-btn--linha-clara:hover { background: rgba(255, 255, 255, .12); }
.kr-btn--bloco { width: 100%; }

.kr-link {
  display: inline-block;
  margin-top: .7rem;
  color: var(--azul-2);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  border-bottom: 1px solid var(--oliva);
  padding-bottom: 2px;
}
.kr-link:hover { color: var(--azul-3); }

/* -------------------------------------------------------------------- topo */
.kr-topo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1320px, 100% - 2.5rem);
  margin-inline: auto;
  padding-block: 1.3rem;
}
.kr-topo__marca img { width: 168px; height: auto; }
.kr-topo__cta { font-size: .88rem; padding: .6rem 1.1rem; min-height: 42px; }

/* -------------------------------------------------------------------- hero */
.kr-hero {
  position: relative;
  /* a cortina do texto sai 100% pra esquerda; sem isso nasce barra horizontal */
  overflow: hidden;
  min-height: min(92vh, 780px);
  display: flex;
  align-items: flex-end;
  background: var(--azul);
}
.kr-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* O texto do hero vive sobre torre iluminada. Duas camadas cuidam disso: esta
   VERTICAL, que segura o topo (logo do grupo) e o rodape, e a CORTINA do
   .kr-hero__wrap::before logo abaixo, que e quem realmente faz a copy
   aparecer. A primeira tentativa (21/09) punha a cortina aqui, ancorada na
   largura da TELA — e por isso falhava em monitor grande. Ver o comentario
   da cortina. */
.kr-hero__veu {
  position: absolute;
  inset: 0;
  /* So a vertical: segura o topo (logo do grupo) e o rodape, onde comeca a
     secao de numeros. Quem cuida do texto agora e a cortina do wrap. */
  background: linear-gradient(180deg,
              rgba(16, 40, 54, .50) 0%,
              rgba(16, 40, 54, .22) 30%,
              rgba(16, 40, 54, .48) 66%,
              rgba(16, 40, 54, .80) 100%);
}
.kr-hero__wrap {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  color: #fff;
  /* Rede de seguranca: em outra largura o object-fit corta o video noutro ponto
     e pode trazer a parte clara do ceu pra tras do texto. */
  text-shadow: 0 1px 2px rgba(16, 40, 54, .55), 0 2px 18px rgba(16, 40, 54, .6);
}
/* 22/09/2026 — a cortina ancorada na LARGURA DA TELA nao resolvia em monitor
   grande. O wrap e centrado (max 1320 px): num 1600 o texto comeca em 9% da
   tela e termina perto de 48% — justo onde o degrade de 90deg ja tinha caido
   pra ~.29. Dava certo no notebook e falhava no monitor da Ana. Agora a
   cortina mora no PROPRIO BLOCO DE TEXTO: nasce fora da tela a esquerda,
   cobre a coluna de texto inteira e so dissolve depois dela. Acompanha o
   container em qualquer largura, que e o que o ancoramento na tela nao fazia.
   z-index -1 fica atras do texto mas ainda na frente do veu, porque o wrap
   (z-index 2) cria contexto de empilhamento. */
.kr-hero__wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* 22/09/2026, segunda correcao: a cortina comecava DE UMA VEZ na borda de
     cima do bloco de texto e desenhava um degrau reto atravessando a foto,
     logo abaixo do cabecalho — a Ana viu na hora ("olha a hero"). Agora ela
     sobe 8rem alem do texto e entra por uma mascara: transparente no topo,
     cheia so quando chega na altura da marca. O degrau some e a parte de cima
     da foto volta a ter luz. */
  top: -8rem;
  bottom: -.6rem;
  left: -100%;
  right: -4%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  /* Cuidado com os stops: a cortina e MAIS LARGA que o container (ela comeca
     uma largura inteira a esquerda, fora da tela), entao porcentagem aqui nao
     corresponde a porcentagem do texto. Por isso a dissolucao e medida em px
     a partir da direita: cheia ate uns 430 px antes do fim e zero no fim. A
     coluna de texto (56ch, ~620 px) termina bem antes disso. */
  background: linear-gradient(90deg,
              rgba(16, 40, 54, .82) 0,
              rgba(16, 40, 54, .80) calc(100% - 430px),
              rgba(16, 40, 54, 0) 100%);
}
/* Ate 1000 px o texto ja ocupa quase a largura toda e nao sobra foto a
   direita pra preservar: a cortina vira faixa cheia. */
/* ------------------------------------------------------------------ FAQ ---
   Secao acrescentada em 22/09/2026, depois da auditoria de SEO: esta era uma
   das tres LPs sem perguntas frequentes, num site onde as outras quinze tinham.
   Pergunta e resposta e o formato que o Google mostra direto no resultado e o
   que as IAs mais extraem para responder — e, no atendimento, derruba a duvida
   antes de a pessoa desistir. Mesmo padrao do Gaea: <details> nativo, sem JS
   para abrir (o JS so troca o sinal). */
.kr-duvidas { background: var(--creme); }
.kr .kr-faq__titulo { margin-bottom: clamp(28px, 3.5vw, 44px); }
.kr-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.kr-faq details { border-bottom: 1px solid var(--fio); }
.kr-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.kr-faq summary::-webkit-details-marker { display: none; }
.kr-faq summary:hover { color: var(--azul-2); }
.kr-faq__sinal { font-size: 24px; line-height: 1; color: var(--azul-2); }
.kr .kr-faq p {
  max-width: 72ch;
  padding-bottom: 22px;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--tinta-2);
}

@media (max-width: 1000px) {
  .kr-hero__wrap::before {
    right: -100%;
    background: linear-gradient(90deg, rgba(16, 40, 54, .80), rgba(16, 40, 54, .72));
  }
}
.kr-hero__marca {
  font-family: var(--romana);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  letter-spacing: .3em;
  margin-bottom: .8rem;
}
.kr-hero__marca span {
  display: block;
  font-family: Inter, sans-serif;
  font-size: .32em;
  letter-spacing: .3em;
  text-transform: uppercase;
  /* Quase branco, nao o verde palido do acento: texto miudo pede MAIS contraste
     que o titulo, nao menos. O #D9E4C9 fica para o <em> do h1, que e grande. */
  color: #F0F3E8;
  margin-top: .5rem;
}
.kr-hero__end { color: #F0F3E8; }
/* 18ch, nao 17ch: com 17ch (532 px) o titulo ia a TRES linhas e quebrava dentro
   do <em>, separando "se vive" de "mais". Com 18ch cabe em duas e a expressao
   em italico fica inteira na segunda. Repare que aqui o conserto foi ALARGAR,
   enquanto no RIIO foi estreitar — o valor certo depende da frase, nao existe
   numero universal. Medido no navegador de 13 a 20ch. */
.kr-hero h1 { color: #fff; max-width: 18ch; }
.kr-hero__linha { margin-top: 1.1rem; max-width: 55ch; color: rgba(255, 255, 255, .92); }
.kr-hero__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ----------------------------------------------------------------- números */
.kr-numeros { background: var(--azul); color: #fff; padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.kr-numeros__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.8rem 2rem;
}
.kr-numero__n {
  font-family: var(--serifa);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  color: #fff;
  line-height: 1;
}
.kr-numero__l {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D9E4C9;
  margin-top: .35rem;
}
.kr-numero__d { font-size: .9rem; color: rgba(255, 255, 255, .72); margin-top: .45rem; }

/* --------------------------------------------------------------- conceito */
.kr-conceito { background: var(--creme); }
.kr-conceito__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.kr-card {
  background: #fff;
  border: 1px solid var(--fio);
  border-radius: 8px;
  padding: 1.6rem;
}
.kr-card h3 { margin-bottom: .5rem; }
.kr-card p { color: var(--tinta-2); font-size: .95rem; }
.kr-conceito__foto { margin-top: 2.2rem; }

/* ------------------------------------------------------- fotos e proporção */
.kr-dentro { background: var(--areia); }
.kr-lazer  { background: var(--areia); }

/* 22/09/2026 — a Ana apontou os "buracos": a fileira de baixo terminava com um
   espaco vazio a direita. Culpa do `grid auto-fit`: ele fixa o numero de
   colunas, e o que sobra fica sozinho com o vazio do lado. Trocado por FLEX com
   quebra de linha: quem sobra CRESCE e fecha a fileira sozinho — tres por
   fileira quando cabem tres, dois de meia largura quando sobram dois. A conta
   das colunas continua a mesma de antes (base de 320 px), entao nada mudou de
   lugar nas fileiras cheias. */
.kr-dentro__grade,
.kr-lazer__grade {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2rem;
}
.kr-dentro__grade > *,
.kr-lazer__grade > * { flex: 1 1 320px; min-width: 0; }

.kr-fig figcaption { margin-top: .6rem; font-size: .86rem; color: var(--tinta-3); }
.kr-fig img { border-radius: 8px; }
.kr-zoom { cursor: zoom-in; }

.kr-dentro__grade .kr-fig img,
.kr-lazer__grade .kr-fig img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.kr-fig--larga { flex: 1 1 100%; }

/* A dupla que fecha a secao fica com o DOBRO da largura das fotos de cima; em
   16:10 ela ficaria tambem muito mais alta e quebrava o ritmo. Recortada em
   16:7, a altura bate com a das fileiras de tres. So no desktop: abaixo de
   1000 px ja sao duas por fileira e o 16:10 volta a valer. */
@media (min-width: 1001px) {
  .kr-dentro__grade .kr-fig--dupla img,
  .kr-lazer__grade .kr-fig--dupla img { aspect-ratio: 16 / 7; }
}


/* Repetir a grade é necessário por especificidade — sem isto a panorâmica
   seria recortada em 16:10 como as outras. */
.kr-dentro__grade .kr-fig--larga img,
.kr-lazer__grade .kr-fig--larga img,
.kr-conceito__foto img {
  aspect-ratio: 16 / 6;
  object-fit: cover;
  width: 100%;
}

/* A fachada da seção de localização é vertical (1920x2742) — encaixa em 4:5
   para não esticar a seção inteira. */
.kr-local .kr-fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.kr-fig--lazer figcaption { display: flex; flex-direction: column; gap: .15rem; }
.kr-fig--lazer strong { color: var(--azul); font-size: .98rem; }
.kr-fig--lazer span { color: var(--tinta-3); font-size: .86rem; }

/* ----------------------------------------------------------------- plantas */
.kr-plantas { background: var(--creme); }
/* 22/09/2026 — a Ana apontou os "buracos": a fileira de baixo terminava com um
   espaco vazio a direita. Culpa do `grid auto-fit`: ele fixa o numero de
   colunas, e o que sobra fica sozinho com o vazio do lado. Trocado por FLEX com
   quebra de linha: quem sobra CRESCE e fecha a fileira sozinho — tres por
   fileira quando cabem tres, dois de meia largura quando sobram dois. A conta
   das colunas continua a mesma de antes (base de 380 px), entao nada mudou de
   lugar nas fileiras cheias. */
.kr-plantas__grade {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2rem;
}
.kr-plantas__grade > * { flex: 1 1 380px; min-width: 0; }
.kr-unidade {
  background: #fff;
  border: 1px solid var(--fio);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* As plantas saíram de quadros 16:9 do vídeo — mantém a proporção de origem. */
.kr-unidade__fig { background: #0E1A20; }
.kr-unidade__fig img {
  border-radius: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.kr-unidade__txt { padding: 1.3rem 1.4rem 1.5rem; }
.kr-unidade__meta {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oliva);
  margin: .35rem 0 .6rem;
}
.kr-unidade__txt p { color: var(--tinta-2); font-size: .94rem; }

/* -------------------------------------------------------------- localização */
.kr-local { background: var(--creme); }
.kr-local__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.4rem;
  align-items: center;
}
.kr-lista { list-style: none; padding: 0; display: grid; gap: .7rem; }
.kr-lista li { position: relative; padding-left: 1.4rem; color: var(--tinta-2); }
.kr-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oliva);
}

/* ------------------------------------------------------------ atendimento */
.kr-atende { background: var(--areia); }
.kr-ana {
  display: grid;
  /* A coluna da foto e limitada. Com `repeat(auto-fit, minmax(300px, 1fr))` as
     duas colunas ficavam iguais e a foto da Ana nascia com a metade da largura
     da secao — 593 px num monitor de 1280. Ela reclamou ("ficou um pouco grande
     demais") e tinha razao: e um retrato de apoio, nao o assunto da secao.
     Como agora sao duas colunas explicitas, o colapso no celular deixou de ser
     automatico e passa pelo @media la embaixo. */
  grid-template-columns: minmax(240px, 360px) minmax(300px, 1fr);
  gap: 2.4rem;
  align-items: center;
}
.kr-ana__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }

.kr-razoes { list-style: none; padding: 0; display: grid; gap: .9rem; margin-bottom: 1.8rem; }
.kr-razoes li { position: relative; padding-left: 1.6rem; color: var(--tinta-2); font-size: .97rem; }
.kr-razoes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--oliva);
  border-radius: 50%;
}
.kr-assina { margin-top: 1.1rem; font-size: .85rem; letter-spacing: .06em; color: var(--tinta-3); }

/* ----------------------------------------------------------------- contato */
.kr-falar { background: var(--azul); color: #fff; scroll-margin-top: 1rem; }
.kr-falar h2 { color: #fff; }
.kr-falar .kr-texto { color: rgba(255, 255, 255, .84); }
.kr-falar__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.6rem;
}
.kr-falar__wpp { color: rgba(255, 255, 255, .8); font-size: .95rem; }
.kr-falar__wpp a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #D9E4C9;
}
.kr-falar__form {
  background: #fff;
  border-radius: 10px;
  padding: clamp(1.4rem, 3vw, 2rem);
  color: var(--tinta);
}

.kr-rot {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .7rem;
}
.kr-rot__op { text-transform: none; letter-spacing: 0; font-weight: 400; }

.kr-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.kr-chip {
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1px solid var(--fio);
  border-radius: 999px;
  background: #fff;
  color: var(--tinta-2);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.kr-chip:hover { border-color: var(--azul-2); }
.kr-chip--on { background: var(--azul-2); border-color: var(--azul-2); color: #fff; }

.kr-form { display: grid; gap: 1rem; }
.kr-campo { display: grid; gap: .35rem; }
.kr-campo .kr-rot { margin-bottom: 0; }
.kr-campo input,
.kr-campo textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--fio);
  border-radius: 4px;
  background: var(--creme);
  font: inherit;
  color: var(--tinta);
}
.kr-campo textarea { min-height: 96px; resize: vertical; }
.kr-campo input:focus,
.kr-campo textarea:focus { outline: 2px solid var(--azul-2); outline-offset: 1px; background: #fff; }
.kr-form__fine { font-size: .8rem; color: var(--tinta-3); text-align: center; }

.kr-obrigada { text-align: center; padding: 1.5rem 0 .5rem; }
.kr-obrigada h3 { margin-bottom: .5rem; }
.kr-obrigada p { color: var(--tinta-2); font-size: .95rem; }

/* -------------------------------------------------------------- barra fixa */
.kr-barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--azul);
  border-top: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.kr-barra--on { transform: translateY(0); }
.kr-barra__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .8rem;
}
.kr-barra__txt { display: grid; color: #fff; }
.kr-barra__valor { font-weight: 600; font-size: .98rem; }
.kr-barra__sub { font-size: .82rem; color: rgba(255, 255, 255, .72); }

/* ---------------------------------------------------------------- lightbox */
.kr-lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 24, 32, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.kr-lb[hidden] { display: none; }
.kr-lb__palco {
  max-width: min(1400px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.kr-lb__img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 6px; }
.kr-lb__legenda { color: rgba(255, 255, 255, .78); font-size: .85rem; text-align: center; }
.kr-lb__fechar,
.kr-lb__nav {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  border-radius: 999px;
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.kr-lb__fechar { top: 1rem; right: 1rem; }
.kr-lb__nav--ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.kr-lb__nav--prox { right: 1rem; top: 50%; transform: translateY(-50%); }
.kr-lb__fechar:hover, .kr-lb__nav:hover { background: rgba(255, 255, 255, .2); }

/* --- Rodapé compartilhado ------------------------------------------------- */
.kr .rlp {
  --rlp-fundo: #143646;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
.kr .rlp__wordmark { max-width: 180px; }
.kr .rlp-wa { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------------------------ mobile */
/* ------------------------------------------------------------------- filme */
.kr-filme { background: var(--areia); }

.kr-player {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  margin-top: 2rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--azul);
}
.kr-player video {
  display: block;
  width: 100%;
  /* O atributo height do <video> nao pode vencer a proporcao, senao o quadro
     estica — mesmo motivo do gotcha das fotos das LPs. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--azul);
}
.kr-player__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  /* Dois veus: o radial assenta o botao no meio e o de baixo segura os rotulos,
     porque o poster (o predio ao entardecer) e claro justo ali. */
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(27, 75, 99, .60), rgba(27, 75, 99, 0) 70%),
    linear-gradient(to top, rgba(27, 75, 99, .66), rgba(27, 75, 99, .10));
  transition: opacity .25s;
}
.kr-player--on .kr-player__capa { opacity: 0; pointer-events: none; }
.kr-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--oliva);
  color: #fff;
  transition: transform .2s, background .2s;
}
.kr-player__play svg { width: 40%; margin-left: 8%; }
.kr-player__capa:hover .kr-player__play,
.kr-player__capa:focus-visible .kr-player__play {
  transform: scale(1.06);
  background: #fff;
  color: var(--azul);
}
.kr-player__rot {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.kr-player__tempo {
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

@media (max-width: 720px) {
  .kr-ana { grid-template-columns: 1fr; }
  .kr { font-size: 16px; }
  .kr-topo__marca img { width: 132px; }
  .kr-topo__cta { display: none; }
  .kr-hero { min-height: min(88vh, 660px); }
  .kr-hero__acoes .kr-btn { flex: 1 1 100%; }
  .kr-lb__nav { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .kr-barra { transition: none; }
}
/* PÁGINA DE LINKS (bio do Instagram) — grupoanacintra.com.br/links
   Tudo prefixado .lnk- : o bundle é global (application.css faz require_tree).

   ⚠️ home.css declara `h1, h2, h3 { color: var(--ink) }` — regra de ELEMENTO,
   sem prefixo, no mesmo bundle. Herança NÃO vence uma regra que mira o
   elemento, então num fundo escuro os títulos sobem pretos e somem. Foi o que
   aconteceu no hero do Joá. Por isso h1 e h2 têm cor declarada aqui.

   Desenhada para o celular, dentro do navegador do Instagram: coluna única,
   linha inteira clicável, alvo de toque alto. Nada de menu. */

.lnk {
  --lnk-fundo:   #0f100e;
  --lnk-cartao:  #191b18;
  --lnk-linha:   #2b2e29;
  --lnk-texto:   #eceee9;
  --lnk-suave:   #a3a89e;
  --lnk-ouro:    #d8a25e;
  --lnk-ouro-fraco: #6b5230;

  max-width: 30rem;
  margin: 0 auto;
  padding: 2.5rem 1.1rem 3rem;
  background: var(--lnk-fundo);
  color: var(--lnk-texto);
  font-family: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}
.lnk *, .lnk *::before, .lnk *::after { box-sizing: border-box; }
.lnk img { max-width: 100%; height: auto; display: block; }
.lnk figure { margin: 0; }
.lnk p { margin: 0; }
.lnk ul { margin: 0; padding: 0; list-style: none; }

/* ---------- topo ---------- */
.lnk-topo { text-align: center; margin-bottom: 2.25rem; }
.lnk-topo__foto {
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  object-fit: cover; margin: 0 auto 0.9rem;
  border: 2px solid var(--lnk-ouro-fraco);
}
.lnk h1 {
  color: var(--lnk-texto);          /* vence a regra de elemento do home.css */
  font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
}
.lnk-topo__linha { color: var(--lnk-suave); font-size: 0.95rem; }
.lnk-topo__creci {
  color: var(--lnk-ouro); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin-top: 0.55rem;
}

/* ---------- blocos ---------- */
.lnk-bloco { margin-bottom: 2.25rem; }
.lnk h2 {
  color: var(--lnk-texto);          /* idem: home.css pinta h2 de preto */
  font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.lnk h2 span {
  color: var(--lnk-ouro); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.lnk-bloco__lead {
  color: var(--lnk-suave); font-size: 0.88rem; margin-bottom: 1rem;
}

/* ---------- item da lista ---------- */
.lnk-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.lnk-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.6rem 0.85rem 0.6rem 0.6rem;
  background: var(--lnk-cartao);
  border: 1px solid var(--lnk-linha);
  border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.lnk-item:hover, .lnk-item:focus-visible {
  border-color: var(--lnk-ouro); transform: translateY(-1px);
}
.lnk-item:focus-visible { outline: 2px solid var(--lnk-ouro); outline-offset: 2px; }
.lnk-item img {
  width: 4.25rem; height: 4.25rem; flex: none;
  border-radius: 7px; object-fit: cover;
}
.lnk-item__texto { flex: 1 1 auto; min-width: 0; }
.lnk-item__texto strong {
  display: block; font-size: 1rem; font-weight: 600; color: var(--lnk-texto);
}
.lnk-item__texto strong em {
  font-style: normal; font-weight: 500; font-size: 0.72rem;
  color: var(--lnk-ouro); letter-spacing: 0.08em; text-transform: uppercase;
  margin-left: 0.4rem;
}
.lnk-item__texto small {
  display: block; font-size: 0.8rem; color: var(--lnk-suave); margin-top: 0.15rem;
}
.lnk-item__seta { flex: none; color: var(--lnk-ouro); font-size: 1.1rem; }

/* 100% vendido: continua clicável (avisa sobre revenda), mas não compete
   visualmente com quem ainda tem unidade. */
.lnk-item--vendido { opacity: 0.62; }
.lnk-item--vendido .lnk-item__seta { color: var(--lnk-suave); }

/* ---------- WhatsApp ---------- */
.lnk-fala { text-align: center; margin: 2.5rem 0 2.75rem; }
.lnk-fala p { color: var(--lnk-suave); font-size: 0.88rem; margin-bottom: 0.85rem; }
.lnk-wa {
  display: inline-block; padding: 0.85rem 1.6rem;
  background: var(--lnk-ouro); color: #14150f;
  font-weight: 600; font-size: 0.95rem;
  border-radius: 999px; text-decoration: none;
}
.lnk-wa:hover, .lnk-wa:focus-visible { background: #e6b573; }
.lnk-wa:focus-visible { outline: 2px solid var(--lnk-texto); outline-offset: 3px; }

/* ---------- rodapé ---------- */
.lnk-pe {
  border-top: 1px solid var(--lnk-linha); padding-top: 1.5rem;
  text-align: center; color: var(--lnk-suave); font-size: 0.8rem;
}
.lnk-pe img { width: 8.5rem; margin: 0 auto 0.9rem; }
.lnk-pe p { margin-bottom: 0.7rem; line-height: 1.6; }
.lnk-pe a { color: var(--lnk-suave); }
.lnk-pe__aviso { font-size: 0.72rem; color: #7c8177; }

@media (prefers-reduced-motion: reduce) {
  .lnk-item { transition: none; }
  .lnk-item:hover { transform: none; }
}
/* ===========================================================================
   MARINO BY BRETON — Av. Sobral Pinto, 4.225, Barra da Tijuca (Posto 6)
   Incorporação e construção Avanço. Página montada em 21/09/2026.

   A identidade vem do book e das perspectivas do próprio empreendimento:
   - azul-marinho profundo (#10243A), a cor das poltronas do lobby e do mar;
   - areia (#EFE9DF) e creme (#FAF7F2) como fundos, o tom da fachada;
   - madeira quente (#B3875A) como acento fino, os painéis do hall;
   - títulos em serifa clara e rótulos espaçados em caixa-alta.
   Fonte de título: Cormorant Garamond (link no <head> da view). Corpo: Inter,
   que o layout já carrega.

   Grade: container de 1320px, seções em clamp, grades auto-fit (briefing das LPs).
   Todas as classes levam o prefixo .mr — application.css faz require_tree, e sem
   prefixo uma LP quebraria a outra.
   =========================================================================== */

.mr {
  --azul:     #10243A;   /* faixas escuras, títulos */
  --azul-2:   #1C3E63;   /* botões, links */
  --azul-3:   #2C5A7E;   /* hover */
  --areia:    #EFE9DF;   /* seções alternadas */
  --creme:    #FAF7F2;   /* fundo do documento */
  --madeira:  #B3875A;   /* acento fino, sobre fundo claro */
  --madeira-clara: #E8C79C;  /* o mesmo tom, clareado pra uso SOBRE a foto do hero */
  --creme-hero: #F2E2CB;     /* rotulos pequenos sobre a foto: texto miudo pede mais contraste */
  --tinta:    #1A222C;
  --tinta-2:  #4A5665;
  --tinta-3:  #7B8794;
  --fio:      rgba(16, 36, 58, .14);
  --fio-claro: rgba(255, 255, 255, .22);

  --serifa: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  background: var(--creme);
  color: var(--tinta);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

.mr *,
.mr *::before,
.mr *::after { box-sizing: border-box; }

.mr :where(p, h1, h2, h3, ul, figure) { margin: 0; }
.mr :where(img) { display: block; max-width: 100%; height: auto; }
.mr :where(figure) { margin: 0; }

.mr-wrap {
  width: min(1320px, 100% - 2.5rem);
  margin-inline: auto;
}

.mr-sec { padding-block: clamp(3.5rem, 8vw, 7rem); }

.mr h1,
.mr h2,
.mr h3 {
  font-family: var(--serifa);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.12;
  color: var(--azul);
}

.mr h1 { font-size: clamp(2.3rem, 6.5vw, 4.2rem); }
.mr h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); margin-bottom: 1rem; }
.mr h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

.mr h1 em { font-style: italic; color: var(--madeira); }

.mr-olho {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--madeira);
  margin-bottom: .6rem;
}

.mr-texto {
  color: var(--tinta-2);
  max-width: 62ch;
  margin-bottom: 1.4rem;
}

.mr-nota {
  margin-top: 1.4rem;
  font-size: .85rem;
  color: var(--tinta-3);
  max-width: 70ch;
}

/* ------------------------------------------------------------------ botões */
.mr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}

.mr-btn--azul {
  background: var(--azul-2);
  color: #fff;
}
.mr-btn--azul:hover { background: var(--azul-3); }

.mr-btn--linha-clara {
  border-color: var(--fio-claro);
  color: #fff;
}
.mr-btn--linha-clara:hover { background: rgba(255, 255, 255, .12); }

.mr-btn--bloco { width: 100%; }

.mr-link {
  display: inline-block;
  margin-top: .7rem;
  color: var(--azul-2);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  border-bottom: 1px solid var(--madeira);
  padding-bottom: 2px;
}
.mr-link:hover { color: var(--azul-3); }

/* -------------------------------------------------------------------- topo */
.mr-topo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1320px, 100% - 2.5rem);
  margin-inline: auto;
  padding-block: 1.3rem;
}

.mr-topo__marca img { width: 168px; height: auto; }
.mr-topo__cta { font-size: .88rem; padding: .6rem 1.1rem; min-height: 42px; }

/* -------------------------------------------------------------------- hero */
.mr-hero {
  position: relative;
  min-height: min(92vh, 780px);
  display: flex;
  align-items: flex-end;
  background: var(--azul);
}

.mr-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O texto do hero fica embaixo e a esquerda, e a fachada do Marino e clara e
   ensolarada justo ali — com o vel antigo (so .15 de opacidade na altura do
   titulo) o "MARINO" e o "47 famílias" sumiam: 1,7:1 de contraste.
   Sao duas camadas: a vertical segura o topo e o rodape, e a cortina lateral
   escurece so a faixa da esquerda, onde o texto vive. Assim o contraste sobe
   pra ~6:1 no branco e ~3,2:1 na madeira clara, e a torre continua a vista do
   lado direito, que e onde ela aparece inteira. */
.mr-hero__veu {
  position: absolute;
  inset: 0;
  /* Veu no azul-marinho da marca. Ele ja foi marrom quente por um tempo, pra
     compensar um plano de fachada com nuvem carregada — resolvido na fonte,
     trocando o plano, entao o veu voltou pra cor certa. Fica o aprendizado:
     veu frio sobre ceu carregado soma e vira previsao do tempo. */
  background:
    /* Cortina lateral — a camada que faz o trabalho. O texto do hero vive na
       faixa esquerda e o que ha atras dele e o ceu, mais claro que o predio.
       Escurecer so essa faixa resolve a leitura sem lavar a imagem, que segue
       a vista do centro pra direita. */
    linear-gradient(90deg,
              rgba(16, 36, 58, .78) 0%,
              rgba(16, 36, 58, .54) 32%,
              rgba(16, 36, 58, .18) 58%,
              rgba(16, 36, 58, 0) 78%),
    /* Vertical — segura o topo (logo do grupo) e o rodape, onde comeca a secao
       de numeros, que tem o mesmo azul de fundo: a emenda some. */
    linear-gradient(180deg,
              rgba(16, 36, 58, .52) 0%,
              rgba(16, 36, 58, .24) 30%,
              rgba(16, 36, 58, .60) 66%,
              rgba(16, 36, 58, .88) 100%);
}

.mr-hero__wrap {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  color: #fff;
  /* Rede de seguranca: em telas muito largas ou muito estreitas o object-fit
     corta a foto noutro ponto e pode trazer o ceu claro pra tras do texto. */
  text-shadow: 0 1px 2px rgba(16, 36, 58, .55), 0 2px 18px rgba(16, 36, 58, .6);
}

.mr-hero__marca {
  font-family: var(--serifa);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: .22em;
  margin-bottom: .8rem;
}
.mr-hero__marca span {
  display: block;
  font-size: .42em;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--creme-hero);
  margin-top: .3rem;
}

.mr-hero__end { color: var(--creme-hero); }

.mr-hero h1 { color: #fff; max-width: 16ch; }
.mr-hero h1 em { color: var(--madeira-clara); }

.mr-hero__linha {
  margin-top: 1.1rem;
  max-width: 54ch;
  color: rgba(255, 255, 255, .92);
}

.mr-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.8rem;
}

/* ----------------------------------------------------------------- números */
.mr-numeros {
  background: var(--azul);
  color: #fff;
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
}

.mr-numeros__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.8rem 2rem;
}

.mr-numero__n {
  font-family: var(--serifa);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  color: #fff;
  line-height: 1;
}
.mr-numero__l {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--madeira);
  margin-top: .35rem;
}
.mr-numero__d {
  font-size: .9rem;
  color: rgba(255, 255, 255, .72);
  margin-top: .45rem;
}

/* ------------------------------------------------------------- assinaturas */
.mr-assin { background: var(--creme); }

.mr-assin__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}

.mr-card {
  background: #fff;
  border: 1px solid var(--fio);
  border-radius: 8px;
  padding: 1.6rem;
}
.mr-card h3 { margin-bottom: .5rem; }
.mr-card p { color: var(--tinta-2); font-size: .95rem; }

/* -------------------------------------------------------------- interiores */
.mr-interiores { background: var(--areia); }

.mr-interiores__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.mr-fig figcaption {
  margin-top: .6rem;
  font-size: .86rem;
  color: var(--tinta-3);
}

.mr-fig img { border-radius: 8px; }

/* As perspectivas do Marino vão de 4:1 (a sala) a 1:1 (a fachada do canal).
   Numa grade, isso vira buraco: cada figura ganha uma altura. Então as fotos
   comuns entram todas na mesma janela 16:10 (cortando o excesso), e as
   panorâmicas ocupam a linha inteira com a proporção natural delas — onde
   justamente ficam bonitas. */
.mr-interiores__grade .mr-fig img,
.mr-lazer__grade .mr-fig img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.mr-fig--larga { grid-column: 1 / -1; }

/* Precisa repetir o nome da grade: `.mr-interiores__grade .mr-fig img` tem
   especificidade maior que `.mr-fig--larga img`, e sem isso a panorâmica era
   recortada em 16:10 como as outras.
   A proporção é fixa (16:5) e não `auto` de propósito: com `auto`, a figura
   nasce com altura ZERO e só ganha tamanho quando a imagem termina de baixar —
   a página inteira pula. 16:5 fica entre as três panorâmicas que temos
   (4:1 a sala, 3,5:1 a academia, 3:1 o gourmet). */
.mr-interiores__grade .mr-fig--larga img,
.mr-lazer__grade .mr-fig--larga img {
  aspect-ratio: 16 / 5;
  object-fit: cover;
}

.mr-zoom { cursor: zoom-in; }

/* ----------------------------------------------------------------- plantas */
.mr-plantas { background: var(--creme); }

.mr-plantas__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}

.mr-unidade {
  background: #fff;
  border: 1px solid var(--fio);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* As plantas são verticais (≈4:5) e não podem ser cortadas — `contain`, com o
   fundo areia preenchendo a sobra, mantém todas na mesma altura sem decepar
   cômodo nenhum. */
.mr-unidade__fig { background: var(--areia); }
.mr-unidade__fig img {
  border-radius: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  padding: .6rem;
}

.mr-unidade__txt { padding: 1.3rem 1.4rem 1.5rem; }
.mr-unidade__meta {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--madeira);
  margin: .35rem 0 .6rem;
}
.mr-unidade__txt p { color: var(--tinta-2); font-size: .94rem; }

/* ------------------------------------------------------------------- lazer */
.mr-lazer { background: var(--areia); }

.mr-lazer__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.mr-fig--lazer figcaption {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.mr-fig--lazer strong { color: var(--azul); font-size: .98rem; }
.mr-fig--lazer span { color: var(--tinta-3); font-size: .86rem; }

/* -------------------------------------------------------------- localização */
.mr-local { background: var(--creme); }

.mr-local__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.4rem;
  align-items: center;
}

.mr-lista {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.mr-lista li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--tinta-2);
}
.mr-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--madeira);
}

/* ------------------------------------------------------------ atendimento */
.mr-atende { background: var(--areia); }

.mr-ana {
  display: grid;
  /* A coluna da foto e limitada. Com `repeat(auto-fit, minmax(300px, 1fr))` as
     duas colunas ficavam iguais e a foto da Ana nascia com a metade da largura
     da secao — 593 px num monitor de 1280. Ela reclamou ("ficou um pouco grande
     demais") e tinha razao: e um retrato de apoio, nao o assunto da secao.
     Como agora sao duas colunas explicitas, o colapso no celular deixou de ser
     automatico e passa pelo @media la embaixo. */
  grid-template-columns: minmax(240px, 360px) minmax(300px, 1fr);
  gap: 2.4rem;
  align-items: center;
}

.mr-ana__foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.mr-razoes {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .9rem;
  margin-bottom: 1.8rem;
}
.mr-razoes li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--tinta-2);
  font-size: .97rem;
}
.mr-razoes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--madeira);
  border-radius: 50%;
}

.mr-assina {
  margin-top: 1.1rem;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--tinta-3);
}

/* As duas fotos da localização, empilhadas ao lado do texto. */
.mr-local__fotos { display: grid; gap: 1rem; }
.mr-local__fotos .mr-fig img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ----------------------------------------------------------------- contato */
.mr-falar {
  background: var(--azul);
  color: #fff;
  scroll-margin-top: 1rem;
}

.mr-falar h2 { color: #fff; }
.mr-falar .mr-texto { color: rgba(255, 255, 255, .84); }
.mr-falar .mr-texto strong { color: #fff; }

.mr-falar__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.6rem;
}

.mr-falar__wpp { color: rgba(255, 255, 255, .8); font-size: .95rem; }
.mr-falar__wpp a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--madeira);
}

.mr-falar__form {
  background: #fff;
  border-radius: 10px;
  padding: clamp(1.4rem, 3vw, 2rem);
  color: var(--tinta);
}

.mr-rot {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .7rem;
}
.mr-rot__op { text-transform: none; letter-spacing: 0; font-weight: 400; }

.mr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.4rem;
}

.mr-chip {
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1px solid var(--fio);
  border-radius: 999px;
  background: #fff;
  color: var(--tinta-2);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.mr-chip:hover { border-color: var(--azul-2); }
.mr-chip--on {
  background: var(--azul-2);
  border-color: var(--azul-2);
  color: #fff;
}

.mr-form { display: grid; gap: 1rem; }

.mr-campo { display: grid; gap: .35rem; }
.mr-campo .mr-rot { margin-bottom: 0; }

.mr-campo input,
.mr-campo textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--fio);
  border-radius: 4px;
  background: var(--creme);
  font: inherit;
  color: var(--tinta);
}
.mr-campo textarea { min-height: 96px; resize: vertical; }
.mr-campo input:focus,
.mr-campo textarea:focus {
  outline: 2px solid var(--azul-2);
  outline-offset: 1px;
  background: #fff;
}

.mr-form__fine {
  font-size: .8rem;
  color: var(--tinta-3);
  text-align: center;
}

.mr-obrigada {
  text-align: center;
  padding: 1.5rem 0 .5rem;
}
.mr-obrigada h3 { margin-bottom: .5rem; }
.mr-obrigada p { color: var(--tinta-2); font-size: .95rem; }

/* -------------------------------------------------------------- barra fixa */
.mr-barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--azul);
  border-top: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.mr-barra--on { transform: translateY(0); }

.mr-barra__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .8rem;
}

.mr-barra__txt { display: grid; color: #fff; }
.mr-barra__valor { font-weight: 600; font-size: .98rem; }
.mr-barra__sub { font-size: .82rem; color: rgba(255, 255, 255, .72); }

/* ---------------------------------------------------------------- lightbox */
.mr-lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 18, 28, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.mr-lb[hidden] { display: none; }

.mr-lb__palco {
  max-width: min(1400px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.mr-lb__img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: 6px;
}
.mr-lb__legenda {
  color: rgba(255, 255, 255, .78);
  font-size: .85rem;
  text-align: center;
}

.mr-lb__fechar,
.mr-lb__nav {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  border-radius: 999px;
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.mr-lb__fechar { top: 1rem; right: 1rem; }
.mr-lb__nav--ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.mr-lb__nav--prox { right: 1rem; top: 50%; transform: translateY(-50%); }
.mr-lb__fechar:hover,
.mr-lb__nav:hover { background: rgba(255, 255, 255, .2); }

/* ------------------------------------------------------------------- filme */
.mr-filme { background: var(--areia); }

.mr-player {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  margin-top: 2rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--azul);
}
.mr-player video {
  display: block;
  width: 100%;
  /* O atributo height do <video> nao pode vencer a proporcao, senao o quadro
     estica — mesmo motivo do gotcha das fotos das LPs. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--azul);
}
.mr-player__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  /* Dois veus: o radial assenta o botao no meio e o de baixo segura os rotulos,
     porque o poster (a varanda no por do sol) e claro justo ali. */
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(16, 36, 58, .60), rgba(16, 36, 58, 0) 70%),
    linear-gradient(to top, rgba(16, 36, 58, .66), rgba(16, 36, 58, .10));
  transition: opacity .25s;
}
.mr-player--on .mr-player__capa { opacity: 0; pointer-events: none; }
.mr-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--madeira);
  color: #fff;
  transition: transform .2s, background .2s;
}
.mr-player__play svg { width: 40%; margin-left: 8%; }
.mr-player__capa:hover .mr-player__play,
.mr-player__capa:focus-visible .mr-player__play {
  transform: scale(1.06);
  background: var(--madeira-clara);
  color: var(--azul);
}
.mr-player__rot {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.mr-player__tempo {
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 720px) {
  .mr-ana { grid-template-columns: 1fr; }
  .mr { font-size: 16px; }
  .mr-topo__marca img { width: 132px; }
  .mr-topo__cta { display: none; }
  .mr-hero { min-height: min(88vh, 660px); }
  .mr-hero__acoes .mr-btn { flex: 1 1 100%; }
  .mr-lb__nav { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .mr-barra { transition: none; }
}

/* --- Rodapé compartilhado -------------------------------------------------
   O partial shared/_rodape_lp lê estas variáveis; cada LP dá a sua paleta.
   O padding de baixo abre espaço para a barra fixa não tapar o CRECI. */

.mr .rlp {
  --rlp-fundo: #0B1A2B;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.mr .rlp__wordmark { max-width: 180px; }

/* O botão flutuante de WhatsApp bateria na barra fixa — sobe ele. */
.mr .rlp-wa { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------------------------ FAQ ---
   Secao acrescentada em 22/09/2026, depois da auditoria de SEO: esta era uma
   das tres LPs sem perguntas frequentes, num site onde as outras quinze tinham.
   Pergunta e resposta e o formato que o Google mostra direto no resultado e o
   que as IAs mais extraem para responder — e, no atendimento, derruba a duvida
   antes de a pessoa desistir. Mesmo padrao do Gaea: <details> nativo, sem JS
   para abrir (o JS so troca o sinal). */
.mr-duvidas { background: var(--creme); }
.mr .mr-faq__titulo { margin-bottom: clamp(28px, 3.5vw, 44px); }
.mr-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.mr-faq details { border-bottom: 1px solid var(--fio); }
.mr-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.mr-faq summary::-webkit-details-marker { display: none; }
.mr-faq summary:hover { color: var(--azul-2); }
.mr-faq__sinal { font-size: 24px; line-height: 1; color: var(--azul-2); }
.mr .mr-faq p {
  max-width: 72ch;
  padding-bottom: 22px;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--tinta-2);
}
/* ===========================================================================
   NIEMEYER 360° RESIDENCES — Av. das Américas, 1.685, Barra da Tijuca
   Handoff do designer (02/09/2026), pasta "design_handoff_niemeyer_360".
   Tokens, escala tipográfica e espaçamentos são os do README dele.

   A identidade é a do EMPREENDIMENTO: fundo quase preto, Bodoni Moda no
   display, Archivo na interface, e o laranja da marca GAC (#E8722C) como
   único acento. É a primeira LP escura da casa — nas outras (B. Unique,
   Grand Quartier) o fundo é claro e a faixa escura é exceção. Aqui é o
   contrário: o escuro é a página, e o claro não existe.

   Sem media query de layout, com duas exceções anotadas embaixo (as grades de
   contagem fixa precisam colapsar no celular).
   =========================================================================== */

.nm {
  --fundo:    #14161A;   /* fundo do documento e da maioria das seções */
  --fundo-2:  #1B1E23;   /* seções alternadas: plantas, investir, ficha */
  --texto:    #F2ECE3;   /* títulos e corpo em destaque */
  --texto-2:  #CFC6B8;   /* parágrafos */
  --texto-3:  #A9A29A;   /* legendas e rótulos */
  --texto-4:  #78736D;   /* notas legais e placeholders */
  --laranja:  #E8722C;   /* rótulos de seção, CTAs, valores, filetes */
  --fio:      rgba(242, 236, 227, .14);
  --fio-input: rgba(242, 236, 227, .20);

  --serif: "Bodoni Moda", Didot, Georgia, "Times New Roman", serif;
  --sans:  Archivo, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* A barra fixa quebra em duas linhas em tela estreita; a folga é generosa
     de propósito, senão ela come o fim do rodapé. */
  --barra: 112px;

  font-family: var(--sans);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.nm *, .nm *::before, .nm *::after { box-sizing: border-box; }

/* Resets locais. Prefixo `.nm` obrigatório: o home.css do site pinta h1–h3 e
   dá margem a p/ul, e sem o prefixo ele venceria.

   🚨 p, ul e a vão dentro de :where() de propósito. `.nm p` (0,1,1) vence
   `.nm-hero__linha` (0,1,0) e MATA toda margem declarada por classe; `.nm a`
   (0,1,1) vence `.nm-btn--laranja` e pinta TODOS os botões de laranja — foi
   o que aconteceu no ONLIFE (margens) e no B. Unique (botão laranja com texto
   laranja). Com :where() o peso cai para (0,1,0): ainda ganha do seletor solto
   do home.css, mas empata com as classes daqui — e no empate vence quem vem
   depois, que são elas. */
.nm h1, .nm h2, .nm h3 { margin: 0; color: var(--texto); font-weight: 400; }
.nm :where(p)  { margin: 0; }
.nm :where(ul) { margin: 0; padding: 0; list-style: none; }
.nm dl, .nm dd, .nm dt { margin: 0; }
.nm figure { margin: 0; }
.nm blockquote { margin: 0; }
.nm img { display: block; max-width: 100%; }
.nm :where(a) { color: var(--laranja); text-decoration: none; }
.nm :where(a:hover) { color: var(--texto); }
.nm ::selection { background: var(--laranja); color: var(--fundo); }

.nm-wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.nm-sec { padding-block: clamp(72px, 9vw, 128px); }
.nm-sec--alt { background: var(--fundo-2); }

/* --- Tipos ---------------------------------------------------------------- */

.nm-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--laranja);
}
/* O filete de 36x1px que abre cada rótulo — o mesmo do B. Unique e do Grand
   Quartier (a Ana pediu o padrão das três em 02/09/2026). O handoff já trazia
   esse filete no rótulo da seção de atendimento; aqui ele vale para todos. */
.nm-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--laranja);
}
/* No hero o rótulo é o endereço, e ele fica em cinza-claro para a logo mandar.
   O filete continua laranja: é ele que dá a assinatura. */
.nm-hero__end { color: var(--texto-2); }

.nm h1 {
  max-width: 16ch;
  font-family: var(--serif);
  font-size: clamp(38px, 6.2vw, 82px);
  line-height: 1.03;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.nm h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.nm h3 { font-family: var(--serif); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; }

.nm-texto { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; color: var(--texto-2); text-wrap: pretty; }
.nm-texto + .nm-texto { margin-top: 20px; }
.nm-texto strong { font-weight: 600; color: var(--texto); }

.nm-nota {
  margin-top: 28px;
  max-width: 100ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--texto-4);
}

/* Cabeçalho de seção: título à esquerda, texto de apoio à direita, alinhados
   pela base. */
.nm-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 72px);
  margin-bottom: clamp(36px, 5vw, 56px);
  flex-wrap: wrap;
}
.nm-cab h2 { max-width: 18ch; }
.nm-cab p  { max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; color: var(--texto-2); }

/* Duas colunas: título de um lado, texto do outro. */
.nm-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.nm-duas h2 { max-width: 18ch; }

/* --- Botões --------------------------------------------------------------- */

.nm-btn {
  display: inline-block;
  padding: 16px 26px;
  border: 0;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nm-btn--laranja       { background: var(--laranja); color: var(--fundo); }
.nm-btn--laranja:hover { background: var(--texto);   color: var(--fundo); }
.nm-btn--linha {
  border: 1px solid rgba(242, 236, 227, .32);
  background: transparent;
  color: var(--texto);
}
.nm-btn--linha:hover { border-color: var(--laranja); color: var(--laranja); }
.nm-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .nm-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

.nm-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 56px);
}
.nm-topo__marca img { width: auto; height: 30px; opacity: .7; }
.nm-topo__cta { padding: 11px 20px; }

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

.nm-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: min(100vh, 940px);
  padding-block: 150px clamp(48px, 6vh, 84px);
  overflow: hidden;
}
.nm-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
/* O degradê termina na cor do fundo: o hero funde com a seção seguinte em vez
   de cortar numa linha. */
.nm-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 22, 26, .66) 0%,
    rgba(20, 22, 26, .12) 30%,
    rgba(20, 22, 26, .88) 76%,
    #14161A 100%);
}
.nm-hero__wrap { position: relative; }
/* PNG de 355px de largura (o vetor ainda não chegou) — não passar de 260px. */
/* O respiro entre a logo e o filete é o mesmo do B. Unique e do Grand Quartier
   (o handoff usava 10px, e o conjunto ficava apertado ao lado das outras). */
.nm-hero__logo { width: clamp(158px, 16vw, 215px); height: auto; margin-bottom: clamp(18px, 3vw, 28px); }

.nm-hero__linha {
  margin-top: 24px;
  max-width: 58ch;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--texto-2);
}
.nm-hero__precos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 40px);
}
.nm-preco__rot { margin-bottom: 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); }
.nm-preco__valor { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 46px); line-height: 1; }
.nm-preco__obs { margin-top: 10px; font-size: 13px; color: var(--texto-3); }

/* --- Números -------------------------------------------------------------- */

.nm-numeros { border-block: 1px solid var(--fio); }
.nm-numeros__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(40px, 5vw, 64px);
}
.nm-numeros__n { font-family: var(--serif); font-size: clamp(32px, 3vw, 42px); line-height: 1; }
.nm-numeros__l { margin-top: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.nm-numeros__d { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--texto-4); }

/* --- Citação -------------------------------------------------------------- */

.nm-citacao {
  margin-top: clamp(48px, 6vw, 72px);
  max-width: 920px;
  padding-block: clamp(32px, 4vw, 48px);
  border-block: 1px solid var(--fio);
}
.nm-citacao p {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.4;
  text-wrap: pretty;
}
.nm-citacao footer {
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* --- Galeria (full-bleed) ------------------------------------------------- */

.nm-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
}
.nm-galeria img { width: 100%; height: clamp(320px, 46vh, 540px); object-fit: cover; }

/* --- Onde fica ------------------------------------------------------------ */

.nm-onde__p { margin-bottom: 20px; }
.nm-dist li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 15px;
  border-bottom: 1px solid var(--fio);
  font-size: 15px;
}
.nm-dist li:first-child { border-top: 1px solid var(--fio); }
.nm-dist__lugar { color: var(--texto); }
/* Filete elástico: é ele que liga o nome ao tempo e faz a lista virar tabela. */
.nm-dist__fio { flex: 1; height: 1px; background: var(--fio); }
.nm-dist__tempo { color: var(--laranja); white-space: nowrap; }

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

/* ⚠️ Contagem FIXA de colunas, não `auto-fit`. O gap de 1px desenha os filetes
   com o fundo do container aparecendo por baixo — com auto-fit, uma faixa
   vazia viraria um bloco cinza no meio da grade. */
.nm-plantas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--fio);
  border: 1px solid var(--fio);
}
.nm-plantas article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--fundo-2);
}
.nm-plantas__area {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--laranja);
}
.nm-plantas__d { font-size: 15px; line-height: 1.65; color: var(--texto-2); }

/* --- Rooftop (full-bleed) ------------------------------------------------- */

.nm-roof {
  position: relative;
  display: flex;
  align-items: end;
  min-height: min(90vh, 780px);
  padding-block: clamp(72px, 9vw, 120px);
  overflow: hidden;
}
.nm-roof__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nm-roof__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 22, 26, .5) 0%,
    rgba(20, 22, 26, .1) 40%,
    rgba(20, 22, 26, .92) 100%);
}
.nm-roof__wrap { position: relative; }
.nm-roof h2 { max-width: 20ch; font-size: clamp(30px, 4.6vw, 62px); line-height: 1.05; }
.nm-roof__p {
  margin-top: 24px;
  max-width: 58ch;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--texto-2);
}

/* --- Lazer ---------------------------------------------------------------- */

/* São 6 ambientes. O handoff pede `minmax(280px)`, mas isso dá 4 colunas em
   tela larga e deixa a última linha pela metade — os screenshots dele foram
   tirados a ~900px, onde a conta fecha em 2. Com 340px a grade fecha nas três
   larguras: 3 + 3 no desktop, 2 + 2 + 2 no tablet, uma por linha no celular. */
.nm-lazer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2px;
}
.nm-lazer img { width: 100%; height: clamp(220px, 30vh, 320px); object-fit: cover; }
.nm-lazer figcaption { display: block; padding: 18px 2px 0; }
.nm-lazer__t { display: block; font-family: var(--serif); font-size: 20px; line-height: 1.2; }
.nm-lazer__d { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--texto-3); }

.nm-mais { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--fio); }
.nm-mais__rot {
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.nm-chips-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.nm-chips-lista li {
  padding: 9px 16px;
  border: 1px solid var(--fio-input);
  border-radius: 100px;
  font-size: 14px;
  color: var(--texto-2);
}

/* --- Investir ------------------------------------------------------------- */

.nm-investir__p { margin-bottom: 24px; }
.nm-lista li {
  padding-block: 16px;
  border-top: 1px solid var(--fio);
  font-size: 15px;
  line-height: 1.65;
  color: var(--texto-2);
}
.nm-lista li:last-child { border-bottom: 1px solid var(--fio); }

/* --- Valores e pagamento -------------------------------------------------- */

/* Mesma regra das plantas: filete de 1px desenhado pelo fundo do container,
   então a contagem de colunas é fixa. */
.nm-pag {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--fio);
  border: 1px solid var(--fio);
}
.nm-pag > div {
  min-height: 200px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--fundo);
}
.nm-pag__rot { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.nm-pag__valor { margin-top: 14px; font-family: var(--serif); font-size: clamp(34px, 3.4vw, 44px); line-height: 1; }
.nm-pag__d { margin-top: 16px; font-size: 15px; line-height: 1.65; color: var(--texto-2); }

.nm-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}
.nm-faixa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 20px;
  border-bottom: 1px solid var(--fio);
}
.nm-faixa:first-child { border-top: 1px solid var(--fio); }
.nm-faixa__t { display: block; font-size: 16px; color: var(--texto); }
.nm-faixa__s { display: block; margin-top: 6px; font-size: 14px; color: var(--texto-3); }
.nm-faixa__v { font-family: var(--serif); font-size: 19px; color: var(--laranja); white-space: nowrap; }

.nm-kit { padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(232, 114, 44, .4); }
.nm-kit__rot { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--laranja); }
.nm-kit__t { margin-top: 14px; font-family: var(--serif); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; }
.nm-kit__p { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--texto-2); }
/* Os três grupos do kit: o nome do grupo puxa a linha, o resto vem em cinza —
   dá para varrer só os títulos e entender o que vem dentro. */
.nm-kit__lista { display: grid; gap: 14px; margin-top: 18px; }
.nm-kit__lista li {
  padding-top: 14px;
  border-top: 1px solid rgba(232, 114, 44, .25);
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-3);
}
.nm-kit__lista span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto);
}
.nm-kit__fonte { margin-top: 18px; font-size: 13px; color: var(--texto-4); }

.nm-pedir {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: clamp(36px, 4vw, 52px);
}
.nm-pedir__s { font-size: 14px; color: var(--texto-3); }

/* --- Atendimento ---------------------------------------------------------- */

.nm-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* ⚠️ `height: auto` é obrigatório aqui. O <img> traz width/height no HTML (é o
   que evita o pulo do layout enquanto a foto carrega), e esse `height` de
   atributo vence o `aspect-ratio` — sem isto a foto vinha com os 1024px de
   altura do arquivo, quase o dobro do que devia.
   O max-width segura o retrato: em duas colunas de 528px ele ficava grande
   demais ao lado do texto (a Ana pediu menor em 02/09/2026). */
.nm-ana__foto { max-width: 400px; }
.nm-ana__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 25%;
}
.nm-ana h2 { max-width: 18ch; }
.nm-ana__intro { margin-block: 24px 28px; max-width: 48ch; }
.nm-razoes { display: grid; gap: 20px; margin-bottom: 34px; }
.nm-razoes li {
  max-width: 52ch;
  padding-left: 20px;
  border-left: 1px solid rgba(232, 114, 44, .6);
  font-size: 15px;
  line-height: 1.75;
  color: var(--texto-2);
}
.nm-assina { margin-top: 18px; font-size: 13px; color: var(--texto-4); }

/* --- Ficha técnica -------------------------------------------------------- */

.nm .nm-ficha__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.nm-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}
.nm-ficha > div { padding-block: 18px; border-bottom: 1px solid var(--fio); }
.nm-ficha dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.nm-ficha dd { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--texto-2); }

/* --- Dúvidas -------------------------------------------------------------- */

/* Prefixado: `.nm h2` (0,1,1) anularia a margem desta classe sozinha. */
.nm .nm-faq__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.nm-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.nm-faq details { border-bottom: 1px solid var(--fio); }
.nm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 16px;
  color: var(--texto);
  cursor: pointer;
  list-style: none;
}
.nm-faq summary::-webkit-details-marker { display: none; }
.nm-faq summary:hover { color: var(--laranja); }
.nm-faq__sinal { font-size: 22px; line-height: 1; color: var(--laranja); }
.nm-faq p {
  max-width: 72ch;
  padding-bottom: 22px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--texto-3);
}

/* --- Contato -------------------------------------------------------------- */

.nm-falar { position: relative; overflow: hidden; }
.nm-falar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.nm-falar__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #14161A 0%, rgba(20, 22, 26, .82) 50%, #14161A 100%);
}
.nm-falar__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(72px, 9vw, 128px);
}
.nm-falar__p {
  margin-block: 24px 32px;
  max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
  color: var(--texto-2);
}
.nm-ligar { margin-top: 22px; font-size: 15px; color: var(--texto-2); }
.nm-creci { margin-top: 20px; font-size: 13px; color: var(--texto-4); }

.nm-cartao {
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--fio);
  background: rgba(27, 30, 35, .86);
}
.nm-chips__rot { margin-bottom: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.nm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.nm-chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(242, 236, 227, .24);
  border-radius: 100px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--texto-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.nm-chip:hover { border-color: var(--laranja); color: var(--laranja); }
.nm-chip--on { background: var(--laranja); border-color: var(--laranja); color: var(--fundo); }
.nm-chip--on:hover { color: var(--fundo); }

@media (prefers-reduced-motion: reduce) { .nm-chip { transition: none; } }

.nm-form { display: grid; gap: 20px; }
/* O <label> envolve o campo, então o par rótulo + campo tem o próprio gap,
   menor que o gap de 20px que separa um campo do outro. */
.nm-campo { display: grid; gap: 8px; }
.nm-rot { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.nm-rot__op { letter-spacing: .04em; text-transform: none; color: var(--texto-4); }
.nm-form input,
.nm-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--fio-input);
  border-radius: 2px;
  background: var(--fundo);
  font-family: var(--sans);
  font-size: 16px;   /* 16px evita o zoom automático do iOS ao focar o campo */
  color: var(--texto);
  outline: none;
  resize: vertical;
}
.nm-form input:focus,
.nm-form textarea:focus { border-color: var(--laranja); }
.nm-form input::placeholder,
.nm-form textarea::placeholder { color: var(--texto-4); }
.nm-form__fine { font-size: 13px; line-height: 1.6; color: var(--texto-4); }

.nm-obrigada__t { font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.nm-obrigada__p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--texto-2); }

/* --- Rodapé compartilhado ------------------------------------------------- */

.nm .rlp {
  --rlp-fundo: #101215;
  --rlp-texto: rgba(242, 236, 227, .62);
  --rlp-claro: #F2ECE3;
  --rlp-linha: rgba(242, 236, 227, .12);
  --rlp-fraco: rgba(242, 236, 227, .45);

  /* A barra fixa fica por cima; sem esta reserva ela come o aviso legal. */
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
/* O wordmark dourado tem 355px de largura no arquivo — segurar em 200px. */
.nm .rlp__wordmark { max-width: 200px; }
/* O botão flutuante bateria na barra fixa — sobe ele. */
.nm .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.nm-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(16, 18, 21, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--fio);
  transform: translateY(105%);
  transition: transform .25s ease;
}
.nm-barra--on { transform: translateY(0); }
.nm-barra__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}
.nm-barra__txt { min-width: 0; }
.nm-barra__valor,
.nm-barra__sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nm-barra__valor { font-size: 15px; }
.nm-barra__sub { margin-top: 2px; font-size: 12px; color: var(--texto-3); }
.nm-barra .nm-btn { padding: 14px 22px; font-size: 12px; letter-spacing: .12em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .nm-barra { transition: none; } }

/* --- As duas únicas media queries de layout -------------------------------
   As grades de filete (plantas e pagamento) têm contagem fixa de colunas por
   causa do gap de 1px — não colapsam sozinhas como as de `auto-fit`. Sem isto
   viram colunas de 150px no celular. */

@media (max-width: 560px) {
  .nm-plantas { grid-template-columns: minmax(0, 1fr); }
  .nm-pag     { grid-template-columns: minmax(0, 1fr); }
  .nm-pag > div { min-height: 0; }
}
/* ===========================================================================
   OCEANA GOLF — Av. Ermanno Dallari, 811, Barra da Tijuca
   Patrimar. Página montada em 18/09/2026 a partir do book e do manual do corretor.

   A identidade é a do OCEANA, tirada do book:
   - dourado da marca (#A88828) em blocos inteiros, como as páginas do book;
   - creme e branco nos fundos claros; marrom quase preto nas faixas escuras;
   - títulos em serifa de caixa-alta bem espaçada (Cinzel) e palavras soltas em
     letra cursiva ("absolute design", Allura), como no book;
   - fotos recortadas em círculo, outra assinatura do book.
   Texto corrido em Raleway fina.

   Estrutura irmã da LP do Atlântico Golf (mesma Patrimar, mesma quadra): muda a
   paleta, a tipografia e o recorte das fotos.
   Grade: container de 1320px, seções em clamp, grades auto-fit (briefing das LPs).
   =========================================================================== */

.oc {
  --creme:     #FBF8EF;   /* fundo do documento */
  --creme-2:   #F3ECD8;   /* seções alternadas */
  --escuro:    #1F1A0E;   /* faixas escuras */
  --escuro-2:  #3A3018;   /* títulos e botões sobre o claro */
  --escuro-3:  #54462A;   /* hover */
  --ouro:      #A88828;   /* cor da marca */
  --ouro-2:    #CDB266;   /* dourado sobre o escuro */
  --ouro-3:    #856A18;   /* dourado legível sobre o creme */
  --tinta:     #2B2618;
  --tinta-2:   #5A5341;
  --tinta-3:   #857C66;
  --fio:       rgba(31, 26, 14, .14);
  --fio-claro: rgba(255, 255, 255, .16);

  --serif:  Cinzel, "Trajan Pro", Georgia, "Times New Roman", serif;
  --script: Allura, "Snell Roundhand", cursive;
  --sans:   Raleway, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --barra: 112px;

  font-family: var(--sans);
  color: var(--tinta);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.oc *, .oc *::before, .oc *::after { box-sizing: border-box; }

/* Resets locais — p, ul e a dentro de :where() para não anularem as classes. */
.oc h1, .oc h2, .oc h3 { margin: 0; color: inherit; font-weight: 400; }
.oc :where(p)  { margin: 0; }
.oc :where(ul) { margin: 0; padding: 0; list-style: none; }
.oc dl, .oc dd, .oc dt { margin: 0; }
.oc figure { margin: 0; }
.oc img { display: block; max-width: 100%; }
.oc :where(a) { color: var(--ouro-3); text-decoration: none; }
.oc :where(a:hover) { color: var(--escuro-2); }
.oc ::selection { background: var(--ouro); color: var(--escuro); }

.oc-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.oc-sec { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.oc-sec--creme  { background: var(--creme-2); }
.oc-sec--escuro { background: var(--escuro); color: #fff; }

/* Recorte em círculo — como as fotos redondas do book. */
.oc .oc-circ { max-width: 540px; margin-inline: auto; }
.oc .oc-circ img { aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; }

/* Palavra cursiva solta, como "absolute design" no book. */
.oc-script { margin-top: 10px; font-family: var(--script); font-size: clamp(40px, 4.4vw, 60px); line-height: 1; color: var(--ouro); }

/* --- Tipos ---------------------------------------------------------------- */

.oc-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ouro-3);
}
/* O filete de 36x1px que abre cada rótulo — assinatura comum às LPs da casa. */
.oc-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--ouro);
}
.oc-olho--creme { color: var(--ouro-2); }
.oc-hero__end { color: rgba(255, 255, 255, .88); }

/* Títulos: serifa em caixa-alta espaçada, como no book; o <em> vira dourado. */
.oc h1,
.oc h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .06em;
  text-wrap: balance;
}
.oc h1 em,
.oc h2 em { font-style: normal; color: var(--ouro-3); }
.oc-hero h1 em,
.oc-sec--escuro h2 em,
.oc-video h2 em,
.oc-falar h2 em { color: var(--ouro-2); }
.oc h1 {
  max-width: 19ch;
  font-size: clamp(32px, 4.8vw, 64px);
  line-height: 1.12;
}
.oc h2 {
  max-width: 22ch;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.22;
  color: var(--escuro-2);
}
.oc-sec--escuro h2, .oc-video h2, .oc-falar h2 { color: #fff; }
.oc h3 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.3; color: var(--escuro-2); }

.oc-texto { margin-top: 24px; max-width: 58ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); text-wrap: pretty; }
.oc-texto + .oc-texto { margin-top: 18px; }

.oc-nota { margin-top: 28px; max-width: 100ch; font-size: 13px; line-height: 1.7; color: var(--tinta-3); }
.oc-nota--clara { color: rgba(255, 255, 255, .55); }

.oc-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: clamp(32px, 4.5vw, 52px);
  flex-wrap: wrap;
}
.oc-cab p { max-width: 50ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); }
.oc-sec--escuro .oc-cab p { color: rgba(255, 255, 255, .78); }

.oc-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.oc-duas--centro { align-items: center; }

/* --- Botões --------------------------------------------------------------- */

.oc-btn {
  display: inline-block;
  min-height: 44px;
  padding: 16px 28px;
  border: 0;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.oc .oc-btn--ouro       { background: var(--ouro);   color: var(--escuro); }
.oc .oc-btn--ouro:hover { background: var(--ouro-2); color: var(--escuro); }
.oc .oc-btn--escuro       { background: var(--escuro-2); color: #fff; }
.oc .oc-btn--escuro:hover { background: var(--escuro-3); color: #fff; }
.oc .oc-btn--linha-clara {
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}
.oc .oc-btn--linha-clara:hover { border-color: var(--ouro-2); color: var(--ouro-2); }
.oc-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .oc-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

.oc-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 56px);
}
.oc-topo__marca img { width: auto; height: clamp(22px, 3vw, 30px); opacity: .9; }
.oc .oc-topo__cta { padding: 11px 20px; font-size: 12px; }

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

.oc-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: min(100vh, 940px);
  padding-block: 150px clamp(48px, 6vh, 84px);
  overflow: hidden;
  color: #fff;
  background: var(--escuro);
}
.oc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.oc-hero__veu {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 30% at 22% 14%, rgba(31, 26, 14, .55), rgba(31, 26, 14, 0) 100%),
    linear-gradient(180deg,
    rgba(31, 26, 14, .62) 0%,
    rgba(31, 26, 14, .10) 26%,
    rgba(31, 26, 14, .60) 54%,
    rgba(31, 26, 14, .95) 100%);
}
.oc-hero__wrap { position: relative; }
/* A foto do hero tem céu claro bem atrás do logo branco: sombra escura em volta
   do desenho para ele não sumir (a Ana notou em 18/09/2026). */
.oc-hero__logo { filter: drop-shadow(0 0 14px rgba(31, 26, 14, .75)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.oc-hero__logo { width: clamp(150px, 14vw, 200px); height: auto; margin-bottom: clamp(18px, 3vw, 28px); }
.oc-hero h1 { color: #fff; }
.oc-hero__linha {
  margin-top: 24px;
  max-width: 56ch;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
}
.oc-hero__linha strong { display: block; margin-top: 8px; font-weight: 500; color: var(--ouro-2); }
.oc-hero__precos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 40px);
}
.oc-preco__rot { margin-bottom: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.oc-preco__valor { font-size: clamp(32px, 3.8vw, 50px); font-weight: 300; line-height: 1; letter-spacing: .02em; }
.oc-preco__obs { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.oc-preco__obs s { color: rgba(255, 255, 255, .55); }

/* --- Selo da campanha (hero) ----------------------------------------------- */

.oc-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 28px);
  padding: 10px 18px;
  border: 1px solid rgba(201, 174, 93, .6);
  font-size: 13px;
  color: #fff;
}
.oc .oc-selo { color: #fff; }
.oc-selo strong { font-weight: 500; color: var(--ouro-2); }
.oc .oc-selo:hover { border-color: var(--ouro-2); color: var(--ouro-2); }

/* --- Campanha (bloco removível) -------------------------------------------- */

.oc-sec--ouro { background: var(--ouro); color: var(--escuro); }
.oc-sec--ouro .oc-olho { color: var(--escuro); }
.oc-sec--ouro .oc-olho::before { background: var(--escuro); }
.oc-sec--ouro h2 { color: var(--escuro); }
.oc-sec--ouro h2 em { color: #fff; }
.oc-sec--ouro .oc-cab p { color: rgba(31, 26, 14, .8); }
.oc-sec--ouro .oc-nota { color: rgba(31, 26, 14, .7); }

.oc-ofertas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
/* 6 cartões: 3+3; 2+2+2 no tablet; 1 coluna no celular — nunca 4+2. */
@media (max-width: 900px) { .oc-ofertas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .oc-ofertas { grid-template-columns: minmax(0, 1fr); } }
.oc-oferta { padding: clamp(22px, 2.6vw, 30px); background: var(--escuro); color: #fff; }
.oc-oferta__torre { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-2); }
.oc .oc-oferta__un { margin-top: 6px; font-size: 22px; font-weight: 400; letter-spacing: .04em; }
.oc-oferta__tipo { margin-top: 6px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .75); }
.oc .oc-oferta__de { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.oc .oc-oferta__por { margin-top: 4px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; line-height: 1.1; color: #fff; }
.oc .oc-oferta__menos { margin-top: 10px; font-size: 13px; font-weight: 500; color: var(--ouro-2); }

/* --- Números -------------------------------------------------------------- */

.oc-numeros { background: var(--escuro); color: #fff; }
.oc-numeros__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--fio-claro);
}
.oc-numeros__n { font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; line-height: 1; color: var(--ouro-2); }
.oc-numeros__l { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.oc-numeros__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* --- Figuras -------------------------------------------------------------- */

.oc-fig img { width: 100%; height: auto; object-fit: cover; }
.oc-fig figcaption { padding-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }

.oc-fotos-duas { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.oc .oc-fotos-duas img { aspect-ratio: 16 / 9; height: auto; }

/* --- Unidades ------------------------------------------------------------- */

/* 4 plantas: 2+2 ou 1 por linha (4 lado a lado ficaria ilegível). */
.oc-unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.oc-unidade { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fio); }
.oc-unidade__fig { padding: clamp(10px, 1.4vw, 16px); border-bottom: 1px solid var(--fio); }
.oc .oc-unidade__fig img { height: clamp(240px, 26vw, 340px); object-fit: contain; }
.oc-unidade__txt { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px); }
.oc-unidade__area { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-3); }
.oc-unidade__d { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tinta-2); }
.oc .oc-unidade__v { margin-top: auto; padding-top: 14px; font-size: 24px; font-weight: 400; color: var(--escuro-2); }
.oc-unidade__v span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }

.oc-pedir { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: clamp(32px, 4vw, 48px); }
.oc-pedir__s { font-size: 14px; color: var(--tinta-2); }

.oc-perspectivas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5vw, 64px);
}
.oc .oc-perspectivas img { aspect-ratio: 3 / 2; height: auto; }

/* --- Decorados ------------------------------------------------------------ */

.oc-decorados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.oc .oc-decorados img { aspect-ratio: 3 / 2; height: auto; }

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

.oc-video { background: var(--escuro); color: #fff; }
.oc-video__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 112px);
}
.oc-video__p { margin-block: 24px 32px; max-width: 44ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }

/* O arquivo só baixa no clique (preload="none"): o que aparece é o poster,
   coberto por um <button> — assim também abre pelo teclado. */
.oc-player { position: relative; overflow: hidden; background: #000; }
.oc-player video { display: block; width: 100%; height: auto; aspect-ratio: 1030 / 720; object-fit: cover; background: #000; }
.oc-player__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(31, 26, 14, .55), rgba(31, 26, 14, 0) 70%),
    linear-gradient(to top, rgba(31, 26, 14, .6), rgba(31, 26, 14, .1));
  transition: opacity .25s;
}
.oc-player--on .oc-player__capa { opacity: 0; pointer-events: none; }
.oc-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ouro);
  color: var(--escuro);
  transition: transform .2s, background .2s;
}
.oc-player__play svg { width: 40%; margin-left: 8%; }
.oc-player__capa:hover .oc-player__play,
.oc-player__capa:focus-visible .oc-player__play { transform: scale(1.06); background: var(--ouro-2); }
.oc-player__rot { font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.oc-player__tempo { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

@media (prefers-reduced-motion: reduce) { .oc-player__capa, .oc-player__play { transition: none; } }

/* --- Lazer ---------------------------------------------------------------- */

.oc .oc-clube { margin-bottom: clamp(24px, 3vw, 40px); }
.oc .oc-clube img { height: clamp(220px, 34vw, 480px); }

.oc-lazer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.oc .oc-lazer img { height: clamp(220px, 22vw, 300px); }
.oc-lazer figcaption { letter-spacing: normal; text-transform: none; }
.oc-lazer__t { display: block; font-size: 17px; font-weight: 500; color: var(--escuro-2); }
.oc-lazer__d { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; color: var(--tinta-2); }

.oc-servicos { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); background: var(--escuro); color: #fff; }
.oc-servicos .oc-mais__rot { color: var(--ouro-2); }
.oc-servicos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px clamp(20px, 3vw, 40px);
}
.oc-servicos__lista dt { font-size: 15px; font-weight: 500; }
.oc-servicos__lista dd { margin-top: 4px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.oc-servicos .oc-nota { color: rgba(255, 255, 255, .5); }

.oc-mais { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--fio); }
.oc-mais__rot { margin-bottom: 18px; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3); }
.oc-chips-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.oc-chips-lista li {
  padding: 9px 16px;
  border: 1px solid var(--fio);
  background: rgba(255, 255, 255, .6);
  font-size: 14px;
  color: var(--tinta-2);
}

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

.oc-onde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.oc-onde__mapa { position: relative; min-height: clamp(320px, 38vw, 480px); background: var(--creme); }
.oc-onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.oc-onde__rot { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-3); }
.oc-perto li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 14px;
  border-top: 1px solid var(--fio);
  font-size: 16px;
  color: var(--tinta);
}
.oc-perto li:last-child { border-bottom: 1px solid var(--fio); }
.oc-perto__t { flex: 0 0 auto; font-size: 14px; font-weight: 500; color: var(--ouro-3); }
.oc .oc-onde__cta { margin-top: 28px; }

/* --- Condições ------------------------------------------------------------ */

.oc-pag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--fio-claro);
  border: 1px solid var(--fio-claro);
}
.oc-pag > div { padding: clamp(20px, 2.4vw, 30px); background: var(--escuro); }
.oc-pag__valor { font-size: clamp(32px, 3.2vw, 46px); font-weight: 300; line-height: 1; color: var(--ouro-2); }
.oc-pag__rot { margin-top: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.oc-pag__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* --- Atendimento ---------------------------------------------------------- */

.oc-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* `height: auto` obrigatório: o height do atributo venceria o aspect-ratio. */
.oc-ana__foto { max-width: 400px; }
.oc .oc-ana__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.oc-ana__intro { margin-bottom: 28px; }
.oc-razoes { display: grid; gap: 18px; margin-bottom: 34px; }
.oc-razoes li {
  max-width: 54ch;
  padding-left: 20px;
  border-left: 2px solid var(--ouro);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--tinta-2);
}
.oc-assina { margin-top: 18px; font-size: 13px; color: var(--tinta-3); }

/* --- Ficha técnica -------------------------------------------------------- */

.oc .oc-ficha__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.oc-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}
.oc-ficha > div { padding-block: 18px; border-bottom: 1px solid var(--fio); }
.oc-ficha dt { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-3); }
.oc-ficha dd { margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--tinta-2); }
.oc .oc-implantacao { margin-top: clamp(40px, 5vw, 64px); padding: clamp(10px, 1.4vw, 16px); background: #fff; border: 1px solid var(--fio); }

/* --- Vizinho -------------------------------------------------------------- */

.oc .oc-vizinho .oc-btn { margin-top: 30px; }
.oc .oc-vizinho__icon { margin-top: 28px; font-size: 15px; }
.oc .oc-vizinho__icon a { text-decoration: underline; text-underline-offset: 3px; }
.oc .oc-vizinho img { aspect-ratio: 4 / 3; height: auto; }

/* --- Dúvidas -------------------------------------------------------------- */

.oc .oc-faq__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.oc-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.oc-faq details { border-bottom: 1px solid var(--fio); }
.oc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 17px;
  font-weight: 500;
  color: var(--escuro-2);
  cursor: pointer;
  list-style: none;
}
.oc-faq summary::-webkit-details-marker { display: none; }
.oc-faq summary:hover { color: var(--ouro-3); }
.oc-faq__sinal { font-size: 24px; line-height: 1; color: var(--ouro-3); }
.oc .oc-faq p { max-width: 72ch; padding-bottom: 22px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tinta-2); }

/* --- Contato -------------------------------------------------------------- */

.oc-falar { position: relative; overflow: hidden; background: var(--escuro); color: #fff; }
.oc-falar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.oc-falar__veu { position: absolute; inset: 0; background: linear-gradient(180deg, #1F1A0E 0%, rgba(31, 26, 14, .78) 50%, #1F1A0E 100%); }
.oc-falar__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(72px, 9vw, 128px);
}
.oc-falar__p { margin-block: 24px 32px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.oc-ligar { margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.oc .oc-ligar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.oc-creci { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .5); }

.oc-cartao { padding: clamp(26px, 3.4vw, 44px); background: var(--creme); color: var(--tinta); border-top: 4px solid var(--ouro); }
.oc-chips__rot { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--escuro-2); }
.oc-chips__rot span { display: block; margin-top: 4px; font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.oc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.oc-chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(31, 26, 14, .3);
  border-radius: 2px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--escuro-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.oc-chip:hover { border-color: var(--escuro-2); }
.oc-chip--on,
.oc-chip--on:hover { background: var(--escuro-2); border-color: var(--escuro-2); color: #fff; }

@media (prefers-reduced-motion: reduce) { .oc-chip { transition: none; } }

.oc-form { display: grid; gap: 18px; }
.oc-campo { display: grid; gap: 8px; }
.oc-rot { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.oc-rot__op { font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.oc-form input,
.oc-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(31, 26, 14, .25);
  border-radius: 2px;
  background: #fff;
  font-family: var(--sans);
  font-size: 16px;   /* evita o zoom automático do iOS */
  color: var(--tinta);
  outline: none;
  resize: vertical;
}
.oc-form input:focus,
.oc-form textarea:focus { border-color: var(--ouro-3); }
.oc-form input::placeholder { color: var(--tinta-3); }
.oc-form__fine { font-size: 13px; color: var(--tinta-3); }

.oc-obrigada__t { font-size: 26px; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; color: var(--escuro-2); }
.oc-obrigada__p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--tinta-2); }

/* --- Rodapé compartilhado ------------------------------------------------- */

.oc .rlp {
  --rlp-fundo: #16120A;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
.oc .rlp__wordmark { max-width: 150px; }
/* O botão flutuante bateria na barra fixa — sobe ele. */
.oc .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.oc-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(31, 26, 14, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--fio-claro);
  color: #fff;
  transform: translateY(105%);
  transition: transform .25s ease;
}
.oc-barra--on { transform: translateY(0); }
.oc-barra__wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.oc-barra__txt { min-width: 0; }
.oc-barra__valor,
.oc-barra__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-barra__valor { font-size: 15px; font-weight: 500; }
.oc-barra__sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.oc .oc-barra .oc-btn { padding: 14px 22px; font-size: 12px; letter-spacing: .12em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .oc-barra { transition: none; } }

/* --- Lightbox ------------------------------------------------------------- */

.oc-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(22, 18, 9, .95);
}
.oc-lb[hidden] { display: none; }
.oc-lb__palco { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.oc .oc-lb__img { width: auto; height: auto; max-width: 100%; max-height: 80vh; margin-inline: auto; object-fit: contain; clip-path: none; }
.oc-lb__legenda { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.oc-lb__fechar,
.oc-lb__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.oc-lb__fechar { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 40px; }
.oc-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 72px; font-size: 56px; }
.oc-lb__nav--ant  { left: 8px; }
.oc-lb__nav--prox { right: 8px; }
.oc-lb__fechar:hover, .oc-lb__nav:hover { color: var(--ouro-2); }

.oc-zoom { cursor: zoom-in; }

/* --- Só do Oceana ---------------------------------------------------------- */

/* Números grandes na serifa da marca, não na fonte do texto. */
.oc-preco__valor, .oc-numeros__n, .oc-pag__valor,
.oc .oc-oferta__un, .oc .oc-oferta__por, .oc .oc-unidade__v, .oc-obrigada__t {
  font-family: var(--serif);
  font-weight: 400;
}
.oc-obrigada__t { text-transform: none; }

/* Bloco dourado da campanha: o <em> em branco, como o texto sobre o ouro do book. */
.oc-sec--ouro h2 em { color: #fff; }

/* Três plantas em pé: cabem lado a lado e ganham altura. */
.oc-unidades { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.oc .oc-unidade__fig img { height: clamp(320px, 32vw, 440px); }

/* Fotos reais do condomínio pronto: panorâmica + quatro. */
.oc .oc-panorama { margin-bottom: clamp(20px, 2.4vw, 32px); }
.oc .oc-panorama img { aspect-ratio: 12 / 5; height: auto; }
/* 4 fotos: 4 lado a lado ou 2+2 — nunca 3+1. */
.oc-pronto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 900px) { .oc-pronto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oc .oc-pronto img { aspect-ratio: 4 / 5; height: auto; }
.oc-sec--escuro .oc-fig figcaption { color: rgba(255, 255, 255, .7); }

/* --- Celular -------------------------------------------------------------- */

@media (max-width: 760px) {
  .oc h1, .oc h2 { letter-spacing: .04em; }
}
/* ============================================================================
   ONLIFE 5817 — Estrada dos Bandeirantes, 5817 · Jacarepaguá, RJ
   Porte fiel do projeto React/Tailwind "essence-canvas-engine" para CSS puro.
   Design system: papel off-white, arquitetura grafite, acento âmbar "on".
   Tudo escopado em .onlife (application.css usa require_tree).
   ========================================================================== */

.onlife {
  /* --- Paleta do book ONLIFE: laranja #D86018 + indigo #301878 --- */
  --ol-paper: oklch(0.985 0.004 80);
  --ol-ink: oklch(0.14 0.01 260);
  --ol-graphite: oklch(0.28 0.008 260);
  --ol-graphite-soft: oklch(0.42 0.008 260);
  --ol-accent: oklch(0.655 0.176 43);
  --ol-accent-soft: oklch(0.78 0.14 48);
  --ol-accent-fg: oklch(0.15 0.02 40);
  --ol-indigo: #301878;

  --ol-bg: var(--ol-paper);
  --ol-fg: var(--ol-ink);
  --ol-secondary: oklch(0.95 0.005 80);
  --ol-secondary-60: oklch(0.964 0.0046 80);
  --ol-secondary-50: oklch(0.9675 0.0045 80);
  --ol-muted: oklch(0.94 0.004 80);
  --ol-muted-fg: var(--ol-graphite-soft);
  --ol-border: oklch(0.9 0.006 80);

  --ol-font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --ol-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --ol-max: 80rem;
  --ol-pad: 1.25rem;

  min-height: 100vh;
  background-color: var(--ol-bg);
  color: var(--ol-fg);
  font-family: var(--ol-font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .onlife { --ol-pad: 2rem; }
}

.onlife *,
.onlife *::before,
.onlife *::after { box-sizing: border-box; }

.onlife h1,
.onlife h2,
.onlife h3,
.onlife h4 {
  font-family: var(--ol-font-display);
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 400;
}

/* :where() zera a especificidade: o reset continua valendo como "padrão",
   mas qualquer regra de componente (.ol-*__lead, .ol-*__checks, etc.) que
   defina margin/padding vence — senão este reset zerava os espaçamentos. */
:where(.onlife) p { margin: 0; }
:where(.onlife) ul { margin: 0; padding: 0; list-style: none; }
.onlife img,
.onlife video { display: block; max-width: 100%; }
/* :where() zera a especificidade — senão esta regra vence a cor dos botões
   (.ol-btn--ghost, .ol-nav__cta, .ol-wa) e o texto some no fundo escuro. */
:where(.onlife a) { color: inherit; text-decoration: none; }
.onlife a { text-decoration: none; }

.onlife svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ol-shell {
  max-width: var(--ol-max);
  margin: 0 auto;
  padding-left: var(--ol-pad);
  padding-right: var(--ol-pad);
}

/* Eyebrows em laranja (pedido da Ana — sem cinza) */
.ol-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--ol-accent);
}
.ol-eyebrow .ol-slash { color: color-mix(in oklab, var(--ol-accent) 55%, transparent); }

.ol-h2 {
  margin-top: 1rem;
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 1.15;
  color: var(--ol-fg);
}
/* Segunda parte do título sempre em laranja */
.ol-h2 em { font-style: normal; color: var(--ol-accent); }
@media (min-width: 768px) { .ol-h2 { font-size: 3rem; } }

/* ============================ NAV ============================ */
/* Barra escura: o menu fica sobre o vídeo do hero (escuro) e faz par com o
   rodapé. É o que permite usar a logo branca oficial, com o miolo laranja. */
.ol-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  border-bottom: 1px solid color-mix(in oklab, var(--ol-bg) 12%, transparent);
  background: color-mix(in oklab, var(--ol-fg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ol-nav__inner {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
}
.ol-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ol-font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--ol-fg);
}
.ol-nav__brand img { height: 1.375rem; width: auto; }
.ol-nav__num { margin-left: 0.125rem; color: var(--ol-muted-fg); }

.ol-nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--ol-bg) 72%, transparent);
}
.ol-nav__links a { transition: color .2s; }
.ol-nav__links a:hover { color: var(--ol-accent); }
@media (min-width: 768px) { .ol-nav__links { display: flex; } }

/* Botão claro sobre a barra escura — o laranja fica reservado para o CTA
   principal do hero, logo abaixo, para os dois não competirem. */
.ol-nav__cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.125rem;
  background: var(--ol-bg);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ol-fg);
  transition: background-color .2s, color .2s;
}
.ol-nav__cta:hover { background: var(--ol-accent); color: var(--ol-accent-fg); }
@media (min-width: 640px) { .ol-nav__cta { display: inline-flex; } }

/* ============================ HERO ============================ */
.ol-hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
}
.ol-hero__img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  animation: onlife-zoom 1600ms ease-out both;
}
.ol-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.45) 50%, rgba(0,0,0,.85));
}
.ol-hero__scrim--side {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.4), transparent);
}
.ol-hero__inner {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 8rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) { .ol-hero__inner { padding-bottom: 6rem; } }

.ol-hero__anim { animation: onlife-fade-up 900ms ease-out both; }

.ol-hero__place {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  border-left: 2px solid var(--ol-accent);
  padding-left: 0.75rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: color-mix(in oklab, var(--ol-accent) 90%, transparent);
}
.ol-hero__place .ol-sep { color: rgba(255,255,255,.4); }

.ol-hero__title {
  max-width: 56rem;
  font-family: var(--ol-font-display);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
}
.ol-hero__title em { font-style: normal; font-weight: 400; color: var(--ol-accent); }
@media (min-width: 768px) { .ol-hero__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .ol-hero__title { font-size: 4.5rem; } }

.ol-hero__lead {
  margin-top: 1.75rem;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,.7);
}
@media (min-width: 768px) { .ol-hero__lead { font-size: 1.125rem; } }

.ol-hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) { .ol-hero__actions { flex-direction: row; align-items: center; } }

.ol-hero__line {
  pointer-events: none;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ol-accent) 70%, transparent), transparent);
}

/* ============================ BOTÕES ============================ */
.ol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 0.125rem;
  padding: 1rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: background-color .2s, filter .2s, transform .2s;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  text-align: center;
}
.ol-btn--accent {
  background: var(--ol-accent);
  color: var(--ol-accent-fg);
  box-shadow: 0 20px 60px -20px rgba(232,163,90,.6);
}
.ol-btn--accent:hover { filter: brightness(1.05); }
.ol-btn--accent .ol-arrow { transition: transform .2s; }
.ol-btn--accent:hover .ol-arrow { transform: translateX(4px); }

.ol-btn--ghost {
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
  color: #fff;
  gap: 0.5rem;
}
.ol-btn--ghost:hover { background: rgba(255,255,255,.1); }

.ol-btn--dark {
  background: var(--ol-fg);
  color: var(--ol-bg);
}
.ol-btn--dark:hover { background: var(--ol-graphite-soft); }

/* ============================ SEÇÕES ============================ */
.ol-section { border-bottom: 1px solid var(--ol-border); }
.ol-section__pad { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .ol-section__pad { padding-top: 7rem; padding-bottom: 7rem; } }

.ol-grid12 { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
  .ol-grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; }
  .ol-col4 { grid-column: span 4; }
  .ol-col5 { grid-column: span 5; }
  .ol-col7 { grid-column: span 7; }
  .ol-col8 { grid-column: span 8; }
}

.ol-pilares__title { margin-top: 1rem; }
.ol-pilares__text { font-size: 1rem; line-height: 1.6; color: var(--ol-muted-fg); }
@media (min-width: 768px) { .ol-pilares__text { font-size: 1.125rem; } }

.ol-nums {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 768px) { .ol-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ol-num { border-left: 1px solid var(--ol-border); padding-left: 1rem; }
.ol-num__k { font-family: var(--ol-font-display); font-size: 1.5rem; font-weight: 500; color: var(--ol-fg); }
.ol-num__v { margin-top: 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ol-muted-fg); }

/* ============================ GALERIAS ============================ */
.ol-galerias { background: var(--ol-secondary-60); }
.ol-galerias__head {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .ol-galerias__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.ol-galerias__note { max-width: 28rem; font-size: 0.875rem; color: var(--ol-muted-fg); }

/* Respiro entre galerias + filete de separação: sem isso as sete galerias
   viravam um bloco só e os títulos passavam despercebidos. */
.ol-galeria + .ol-galeria {
  margin-top: 5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--ol-border);
}
@media (min-width: 768px) {
  .ol-galeria + .ol-galeria { margin-top: 6rem; padding-top: 4rem; }
}

.ol-galeria__head {
  margin-bottom: 1.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.ol-galeria__title {
  font-family: var(--ol-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ol-fg);
}
@media (min-width: 768px) { .ol-galeria__title { font-size: 1.5rem; } }

/* Marcador laranja acima do título — mesma linguagem dos eyebrows da página */
.ol-galeria__title::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 0.875rem;
  background: var(--ol-accent);
}
.ol-galeria__count { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ol-muted-fg); white-space: nowrap; }

.ol-galeria__tools { display: flex; align-items: center; gap: 1rem; }
.ol-galeria__nav { display: flex; gap: 0.375rem; }
.ol-galeria__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--ol-border);
  border-radius: 9999px;
  background: transparent;
  color: var(--ol-fg);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.ol-galeria__arrow:hover { background: var(--ol-accent); border-color: var(--ol-accent); color: var(--ol-accent-fg); }
.ol-galeria__arrow[disabled] { opacity: 0.3; cursor: default; }
.ol-galeria__arrow[disabled]:hover { background: transparent; border-color: var(--ol-border); color: var(--ol-fg); }
.ol-galeria__arrow svg { width: 1.125rem; height: 1.125rem; }

/* Carrossel horizontal: cada galeria ocupa UMA faixa, não importa quantas fotos
   tenha. É o que segura a altura da página com 54 imagens. Rola com dedo,
   trackpad, setas do teclado e os botões do cabeçalho. */
.ol-galeria__grid {
  --ol-gap: 0.75rem;
  --ol-item: 78%;
  display: flex;
  gap: var(--ol-gap);
  overflow-x: auto;
  /* `proximity` e não `mandatory`: a foto assenta alinhada ao parar o arrasto,
     mas o navegador não é obrigado a realinhar durante o carregamento. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-anchor: none;
  /* Impede que o arrasto lateral no carrossel vire "voltar página" no celular */
  overscroll-behavior-x: contain;
  padding-bottom: 0.25rem;
}
.ol-galeria__grid::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  .ol-galeria__grid { --ol-item: calc((100% - var(--ol-gap)) / 2); }
}
@media (min-width: 768px) {
  .ol-galeria__grid { --ol-gap: 1rem; --ol-item: calc((100% - 2 * var(--ol-gap)) / 3); }
}

/* Cada galeria declara a proporção das SUAS fotos, para não cortar.
   Sem isso tudo virava quadrado: as deitadas perdiam 35% da largura e as
   em pé perdiam 25% da altura. Ao trocar imagens, confira a proporção. */
/* Guardado como número (e não "4 / 3") para poder entrar em calc() no tile largo. */
.ol-galeria--r43   { --ol-tile-r: 1.3333; }   /* decorado, cobertura, tipo */
.ol-galeria--r32   { --ol-tile-r: 1.5; }      /* lazer, portaria e acessos */
.ol-galeria--r34   { --ol-tile-r: 0.75; }     /* fotos reais da obra (celular) */


.ol-tile {
  position: relative;
  overflow: hidden;
  background: var(--ol-muted);
  aspect-ratio: var(--ol-tile-r, 1);
  padding: 0;
  border: 0;
  cursor: pointer;
  display: block;
  flex: 0 0 auto;
  width: var(--ol-item);
  scroll-snap-align: start;
}

.ol-tile img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform .7s;
}
.ol-tile:hover img { transform: scale(1.04); }
.ol-tile__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent 55%);
  opacity: 0;
  transition: opacity .2s;
}
.ol-tile:hover .ol-tile__veil { opacity: 1; }
.ol-tile__cap {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #fff;
  opacity: 0;
  transition: opacity .2s;
}
.ol-tile:hover .ol-tile__cap { opacity: 1; }

/* Foto larga: vale 2 quadros na horizontal, mantendo a mesma altura dos vizinhos.
   Largura = 2 itens + 1 vão; a proporção acompanha, senão a foto cresceria na
   vertical e criaria um degrau na faixa. */
@media (min-width: 640px) {
  .ol-tile--wide {
    width: calc(var(--ol-item) * 2 + var(--ol-gap));
    aspect-ratio: calc(var(--ol-tile-r, 1) * 2.04);
  }
}
.ol-tile--wide img { object-position: center; }
/* Enquadramento puxado para cima — no pórtico o corte comia o topo da torre */
.ol-tile--top img { object-position: center 38%; }

/* Em celular e tablet não existe hover — sem isto a legenda nunca apareceria. */
@media (hover: none) {
  .ol-tile__veil,
  .ol-tile__cap { opacity: 1; }
}

/* Plantas: são documentos largos com cotas — precisam caber inteiras, nunca cortadas.
   Por isso `contain` sobre branco, proporção 4/3 e legenda sempre visível. */
.ol-galeria--plantas .ol-tile {
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid var(--ol-border);
  padding-bottom: 2.25rem;
}
.ol-galeria--plantas .ol-tile img {
  object-fit: contain;
  padding: 0.75rem;
}
.ol-galeria--plantas .ol-tile:hover img { transform: none; }
.ol-galeria--plantas .ol-tile__veil { display: none; }
.ol-galeria--plantas .ol-tile__cap {
  opacity: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--ol-border);
  background: var(--ol-bg);
  color: var(--ol-fg);
  /* 10px com espacejamento largo ficava no limite do legivel para uma
     informacao que decide a escolha (metragem e coluna). Sobe um ponto e
     aperta o espacejamento — mesma familia, mesmo caixa alta. */
  font-size: 11px;
  letter-spacing: 0.1em;
  text-align: center;
  transition: color .2s;
}
.ol-galeria--plantas .ol-tile:hover .ol-tile__cap { color: var(--ol-accent); }

/* ============================ TECNOLOGIA (fundo escuro) ============================ */
.ol-tech {
  border-top: 1px solid var(--ol-border);
  border-bottom: 1px solid var(--ol-border);
  background: var(--ol-fg);
  color: var(--ol-bg);
}
.ol-tech .ol-eyebrow { color: var(--ol-accent); }
.ol-tech .ol-h2 { color: var(--ol-bg); }
.ol-tech__lead { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.6; color: color-mix(in oklab, var(--ol-bg) 70%, transparent); }

.ol-tech__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--ol-bg) 10%, transparent);
  background: color-mix(in oklab, var(--ol-bg) 10%, transparent);
}
@media (min-width: 640px) { .ol-tech__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ol-tech__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--ol-fg);
  padding: 1.5rem;
  transition: background-color .2s;
}
.ol-tech__item:hover { background: var(--ol-graphite-soft); }
.ol-tech__item svg { width: 1.5rem; height: 1.5rem; color: var(--ol-accent); stroke-width: 1.4; }

/* ============================ LOCALIZAÇÃO ============================ */
.ol-local__addr {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ol-muted-fg);
}
.ol-local__addr svg { color: var(--ol-accent); }
.ol-local__link {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--ol-fg);
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ol-fg);
  transition: color .2s, border-color .2s;
}
.ol-local__link:hover { color: var(--ol-accent); border-color: var(--ol-accent); }

.ol-local__list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--ol-border);
}
.ol-local__list > li:first-child { border-top: 0; }
.ol-local__poi { display: flex; align-items: center; gap: 1rem; }
.ol-local__poi svg { width: 1.25rem; height: 1.25rem; color: var(--ol-graphite-soft); stroke-width: 1.4; }
.ol-local__poi span { font-size: 0.875rem; color: var(--ol-fg); }
@media (min-width: 768px) { .ol-local__poi span { font-size: 1rem; } }
.ol-local__time {
  font-family: var(--ol-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ol-fg);
  white-space: nowrap;
}

/* ============================ OBRAS ============================ */
.ol-obras { position: relative; overflow: hidden; }
.ol-obras__img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
/* Véu mais forte à direita agora que o player ocupa esse lado */
.ol-obras__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--ol-bg) 0%,
    color-mix(in oklab, var(--ol-bg) 94%, transparent) 45%,
    color-mix(in oklab, var(--ol-bg) 78%, transparent) 100%);
}
.ol-obras__inner { position: relative; padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .ol-obras__inner { padding-top: 7rem; padding-bottom: 7rem; } }

.ol-obras__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) {
  .ol-obras__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
}
.ol-obras__box { max-width: 36rem; }

/* Player: pôster + botão; o vídeo só carrega quando a pessoa clica (preload="none") */
.ol-player {
  position: relative;
  overflow: hidden;
  border-radius: 0.125rem;
  background: var(--ol-fg);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.45);
}
.ol-player video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ol-fg);
}
.ol-player__cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  border: 0;
  cursor: pointer;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.15));
  color: #fff;
  font-family: inherit;
  transition: opacity .25s;
}
.ol-player.is-playing .ol-player__cover { opacity: 0; pointer-events: none; }
.ol-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: var(--ol-accent);
  color: var(--ol-accent-fg);
  box-shadow: 0 16px 40px -12px rgba(216,96,24,.7);
  transition: transform .2s;
}
.ol-player__play svg { width: 1.5rem; height: 1.5rem; margin-left: 3px; }
.ol-player__cover:hover .ol-player__play { transform: scale(1.06); }
.ol-player__label {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.ol-player__time {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,.6);
}
.ol-obras__lead { margin-top: 1.25rem; font-size: 1rem; color: var(--ol-muted-fg); }
.ol-obras__lead strong { font-weight: 500; color: var(--ol-fg); }
.ol-obras__checks { margin-top: 2rem; display: grid; gap: 1rem; font-size: 0.875rem; }
.ol-obras__checks li { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.5; color: var(--ol-fg); }
.ol-obras__checks svg { margin-top: 0.25rem; color: var(--ol-accent); }

/* ============================ VISITA GUIADA (vídeo vertical) ============================ */
.ol-visita { background: var(--ol-secondary-60); }
.ol-visita__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .ol-visita__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 4rem; }
}
.ol-visita__text { margin-top: 1.5rem; font-size: 1rem; line-height: 1.6; color: var(--ol-muted-fg); max-width: 34rem; }
.ol-visita__cta { margin-top: 2rem; }

/* Vídeo de celular: 9/16. Fica limitado a 360px para não virar um poste. */
.ol-player--vertical { max-width: 360px; width: 100%; margin: 0 auto; }
.ol-player--vertical video { aspect-ratio: 9 / 16; }

/* ============================ POR QUE FALAR COM A ANA ============================ */
/* Paleta da própria LP: grafite escuro + laranja (mesma linguagem da seção Tecnologia) */
.ol-ana {
  border-top: 1px solid var(--ol-border);
  border-bottom: 1px solid var(--ol-border);
  background: var(--ol-fg);
  color: var(--ol-bg);
}
.ol-ana .ol-eyebrow { color: var(--ol-accent); }

.ol-ana__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .ol-ana__grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 3.5rem; }
}

/* A foto é 1024x1024. `width:100%` + `height:auto` mantém a proporção original
   sempre — sem aspect-ratio e sem object-fit, que já esticaram a imagem numa
   tira vertical. Nunca troque por object-fit: cover aqui. */
.ol-ana__figure { margin: 0; max-width: 380px; align-self: start; }
.ol-ana__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0.125rem;
}
.ol-ana__card {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in oklab, var(--ol-bg) 22%, transparent);
  display: grid;
  gap: 0.3125rem;
}
.ol-ana__nome {
  font-family: var(--ol-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ol-bg);
}
.ol-ana__papel {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ol-accent);
}
.ol-ana__creci {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: color-mix(in oklab, var(--ol-bg) 50%, transparent);
}

.ol-ana__title {
  margin-top: 0.875rem;
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--ol-bg);
}
@media (min-width: 768px) { .ol-ana__title { font-size: 2.125rem; } }

.ol-ana__text {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--ol-bg) 72%, transparent);
}

.ol-ana__checks { margin-top: 2rem; display: grid; gap: 1rem; }
.ol-ana__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.5;
  font-size: 0.9375rem;
  color: color-mix(in oklab, var(--ol-bg) 90%, transparent);
}
.ol-ana__checks svg { width: 1rem; height: 1rem; margin-top: 0.25rem; color: var(--ol-accent); stroke-width: 2.4; }

.ol-ana__cta { margin-top: 2rem; }

/* ============================ FAQ ============================ */
.ol-faq__head { margin-bottom: 3rem; max-width: 44rem; }

.ol-faq__list { border-top: 1px solid var(--ol-border); }

.ol-faq__item { border-bottom: 1px solid var(--ol-border); }

.ol-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ol-font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ol-fg);
  transition: color .2s;
}
.ol-faq__q::-webkit-details-marker { display: none; }
.ol-faq__q:hover { color: var(--ol-accent); }
@media (min-width: 768px) { .ol-faq__q { font-size: 1.125rem; } }

/* Sinal de + que vira − ao abrir */
.ol-faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--ol-accent) 12%, transparent);
  transition: background-color .2s;
}
.ol-faq__sign::before,
.ol-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 2px;
  background: var(--ol-accent);
  transform: translate(-50%, -50%);
  transition: transform .2s, opacity .2s;
}
.ol-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.ol-faq__item[open] .ol-faq__sign { background: var(--ol-accent); }
.ol-faq__item[open] .ol-faq__sign::before,
.ol-faq__item[open] .ol-faq__sign::after { background: var(--ol-bg); }
.ol-faq__item[open] .ol-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.ol-faq__a {
  padding: 0 4rem 1.75rem 0;
  animation: onlife-fade 220ms ease-out;
}
.ol-faq__a p {
  max-width: 52rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ol-muted-fg);
}

.ol-faq__foot {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--ol-muted-fg);
}
.ol-faq__foot a {
  color: var(--ol-accent);
  border-bottom: 1px solid color-mix(in oklab, var(--ol-accent) 45%, transparent);
  padding-bottom: 1px;
}
.ol-faq__foot a:hover { border-bottom-color: var(--ol-accent); }

/* ============================ CONTATO ============================ */
.ol-contato {
  border-top: 1px solid var(--ol-border);
  border-bottom: 1px solid var(--ol-border);
  background: var(--ol-secondary-50);
}
.ol-contato__grid {
  display: grid;
  gap: 3rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .ol-contato__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: 7rem; padding-bottom: 7rem; }
}
.ol-contato__text { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--ol-muted-fg); }
.ol-contato__text strong { font-weight: 500; color: var(--ol-fg); }
.ol-contato__links { margin-top: 2rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.ol-contato__links a,
.ol-contato__links div { display: flex; align-items: center; gap: 0.75rem; color: var(--ol-fg); transition: color .2s; }
.ol-contato__links a:hover { color: var(--ol-accent); }
.ol-contato__links svg { color: var(--ol-accent); }
.ol-contato__links div { color: var(--ol-muted-fg); }

.ol-form {
  border-radius: 0.125rem;
  border: 1px solid var(--ol-border);
  background: var(--ol-bg);
  padding: 1.5rem;
}
@media (min-width: 768px) { .ol-form { padding: 2.5rem; } }
.ol-form__tag {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ol-graphite-soft);
}
.ol-form__tag i { display: block; height: 1px; width: 2rem; background: var(--ol-accent); }
.ol-form__fields { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .ol-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ol-form__full { grid-column: span 2; }
}
.ol-form label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ol-graphite-soft);
}
.ol-form input,
.ol-form select {
  width: 100%;
  border-radius: 0.125rem;
  border: 1px solid var(--ol-border);
  background: var(--ol-bg);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--ol-fg);
}
.ol-form input::placeholder { color: var(--ol-muted-fg); }
.ol-form input:focus,
.ol-form select:focus { outline: none; border-color: var(--ol-accent); }
.ol-form__submit { margin-top: 2rem; width: 100%; }
@media (min-width: 640px) { .ol-form__submit { width: auto; } }
/* Book liberado após o cadastro */
.ol-book {
  margin-top: 1.75rem;
  padding: 1.5rem;
  border: 1px solid color-mix(in oklab, var(--ol-accent) 35%, transparent);
  border-radius: 0.125rem;
  background: color-mix(in oklab, var(--ol-accent) 7%, transparent);
  animation: onlife-fade-up 400ms ease-out both;
}
.ol-book[hidden] { display: none; }
.ol-book__title {
  font-family: var(--ol-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ol-fg);
}
.ol-book__text { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--ol-muted-fg); }
.ol-book__cta { margin-top: 1.25rem; }

.ol-form__legal {
  margin-top: 1rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ol-muted-fg);
}

/* ============================ REALIZAÇÃO ============================ */
.ol-realiza__pad { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .ol-realiza__pad { padding-top: 5rem; padding-bottom: 5rem; } }
.ol-realiza__grid { margin-top: 2rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .ol-realiza__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ol-realiza__name {
  font-family: var(--ol-font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.875rem;
  color: var(--ol-fg);
}
.ol-realiza__desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--ol-muted-fg); }

/* ============================ FOOTER ============================ */
.ol-footer { background: var(--ol-fg); color: color-mix(in oklab, var(--ol-bg) 80%, transparent); }
.ol-footer__inner {
  display: grid;
  gap: 2.5rem;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 768px) {
  .ol-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
}

.ol-footer__logo { height: 1.75rem; width: auto; margin-bottom: 1.75rem; }

.ol-footer__head {
  margin-bottom: 1.5rem;
  font-family: var(--ol-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ol-bg);
}

.ol-footer__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--ol-bg) 72%, transparent);
}
.ol-footer__text + .ol-footer__text { margin-top: 0.75rem; }
.ol-footer__text strong { font-weight: 600; color: var(--ol-bg); }
.ol-footer__text--dim { font-size: 0.8125rem; color: color-mix(in oklab, var(--ol-bg) 50%, transparent); }

.ol-footer__list { display: grid; gap: 0.875rem; }
.ol-footer__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--ol-bg) 82%, transparent);
}
.ol-footer__list svg { color: var(--ol-accent); }
.ol-footer__list a { color: inherit; transition: color .2s; }
.ol-footer__list a:hover { color: var(--ol-accent); }

.ol-footer__gac { height: 2.75rem; width: auto; margin-bottom: 1.25rem; }
.ol-footer__legal { border-top: 1px solid color-mix(in oklab, var(--ol-bg) 10%, transparent); }
.ol-footer__legal p {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: color-mix(in oklab, var(--ol-bg) 50%, transparent);
}

/* ============================ WHATSAPP FLUTUANTE ============================ */
.ol-wa {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 30;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #25D366;
  color: #fff;
  box-shadow: 0 16px 40px -8px rgba(37,211,102,.55);
  transition: transform .2s;
}
.ol-wa:hover { transform: scale(1.05); }
.ol-wa svg { width: 1.5rem; height: 1.5rem; }

/* ============================ LIGHTBOX ============================ */
.ol-lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ol-lb.is-open { display: flex; animation: onlife-fade 220ms ease-out; }

.ol-lb__btn {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.8);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.ol-lb__btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.ol-lb__close { top: 1rem; right: 1rem; height: 2.75rem; width: 2.75rem; border-color: rgba(255,255,255,.2); }
.ol-lb__prev, .ol-lb__next { height: 3rem; width: 3rem; }
.ol-lb__prev { left: 1rem; }
.ol-lb__next { right: 1rem; }
@media (min-width: 768px) { .ol-lb__prev { left: 2rem; } .ol-lb__next { right: 2rem; } }
.ol-lb__btn svg { width: 1.5rem; height: 1.5rem; }
.ol-lb__close svg { width: 1.25rem; height: 1.25rem; }

.ol-lb__fig {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4rem 1rem;
}
@media (min-width: 768px) { .ol-lb__fig { padding-left: 4rem; padding-right: 4rem; } }
.ol-lb__fig img {
  max-height: 85vh;
  max-width: 100%;
  object-fit: contain;
}
.ol-lb__cap {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,.6);
}
.ol-lb__n { margin-left: 0.75rem; color: rgba(255,255,255,.4); }

body.ol-lb-open { overflow: hidden; }

/* ============================ HERO — DESTAQUES COMERCIAIS ============================ */
/* Responde de imediato: quanto custa, como pago e quando entro no imóvel.
   Mesma linguagem do ol-hero__place (filete laranja à esquerda). */
.ol-hero__facts {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  max-width: 44rem;
}
.ol-hero__fact { border-left: 2px solid var(--ol-accent); padding-left: 0.875rem; }
.ol-hero__fact-k {
  display: block;
  font-family: var(--ol-font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}
@media (min-width: 768px) { .ol-hero__fact-k { font-size: 1.1875rem; } }
.ol-hero__fact-v {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: color-mix(in oklab, var(--ol-accent) 88%, white);
}

/* ============================ MOMENTO DE COMPRAR ============================ */
.ol-momento__text { font-size: 1rem; line-height: 1.6; color: var(--ol-muted-fg); }
@media (min-width: 768px) { .ol-momento__text { font-size: 1.125rem; } }

/* Grade de 1px sobre papel — mesmo desenho da lista de tecnologia, invertido para claro. */
.ol-momento__cards {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ol-border);
  border-radius: 0.125rem;
  background: var(--ol-border);
}
@media (min-width: 640px) { .ol-momento__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ol-momento__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ol-momento__card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--ol-bg);
  padding: 1.5rem;
  transition: background-color .2s;
}
.ol-momento__card:hover { background: var(--ol-secondary-60); }
.ol-momento__card svg { width: 1.25rem; height: 1.25rem; color: var(--ol-accent); stroke-width: 2.2; }
.ol-momento__card span {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ol-fg);
}

/* ============================ TECNOLOGIA — RÓTULO + BENEFÍCIO ============================ */
.ol-tech__item { align-items: flex-start; }
.ol-tech__item svg { margin-top: 0.125rem; }
.ol-tech__text { display: flex; flex-direction: column; gap: 0.3125rem; }
.ol-tech__label {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in oklab, var(--ol-bg) 90%, transparent);
}
.ol-tech__benefit {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: color-mix(in oklab, var(--ol-bg) 58%, transparent);
}

/* ============================ MORAR / INVESTIR + ESTUDO ============================ */
.ol-invest { background: var(--ol-secondary-60); }
.ol-invest__lead { font-size: 1rem; line-height: 1.6; color: var(--ol-muted-fg); }
@media (min-width: 768px) { .ol-invest__lead { font-size: 1.125rem; } }

.ol-invest__perfis { margin-top: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .ol-invest__perfis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ol-invest__perfil { border-left: 2px solid var(--ol-accent); padding-left: 1.25rem; }
.ol-invest__perfil h3 {
  font-family: var(--ol-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ol-accent);
}
.ol-invest__perfil p { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.65; color: var(--ol-muted-fg); }

.ol-invest__link {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--ol-fg);
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ol-fg);
  transition: color .2s, border-color .2s;
}
.ol-invest__link:hover { color: var(--ol-accent); border-color: var(--ol-accent); }

/* Callout do estudo: caixa com fundo/borda âmbar suave — mesma receita do ol-book. */
.ol-estudo {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 2rem;
  border: 1px solid color-mix(in oklab, var(--ol-accent) 35%, transparent);
  border-radius: 0.125rem;
  background: color-mix(in oklab, var(--ol-accent) 7%, transparent);
  scroll-margin-top: 5rem;
}
@media (min-width: 768px) {
  .ol-estudo { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; padding: 2.5rem 3rem; }
}
.ol-estudo__title {
  margin-top: 0.75rem;
  font-family: var(--ol-font-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ol-fg);
}
@media (min-width: 768px) { .ol-estudo__title { font-size: 1.625rem; } }
.ol-estudo__text { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.6; color: var(--ol-muted-fg); max-width: 42rem; }
.ol-estudo__cta { width: 100%; }
@media (min-width: 768px) { .ol-estudo__cta { width: auto; white-space: nowrap; } }

/* ============================ CONHEÇA ANTES DE DECIDIR ============================ */
.ol-conheca__text { font-size: 1rem; line-height: 1.6; color: var(--ol-muted-fg); }
@media (min-width: 768px) { .ol-conheca__text { font-size: 1.125rem; } }
.ol-conheca__checks { margin-top: 2rem; display: grid; gap: 1rem; }
.ol-conheca__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.5;
  font-size: 1rem;
  color: var(--ol-fg);
}
.ol-conheca__checks svg { margin-top: 0.25rem; color: var(--ol-accent); stroke-width: 2.4; }
.ol-conheca__note { margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--ol-muted-fg); }
.ol-conheca__mob {
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid color-mix(in oklab, var(--ol-accent) 45%, transparent);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ol-muted-fg);
}

/* ============================ CONTATO — LISTA DE BENEFÍCIOS ============================ */
.ol-contato__list { margin-top: 2rem; display: grid; gap: 1rem; }
.ol-contato__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.5;
  font-size: 0.9375rem;
  color: var(--ol-fg);
}
.ol-contato__list svg { margin-top: 0.25rem; color: var(--ol-accent); stroke-width: 2.4; }

/* ============================ ANIMAÇÕES ============================ */
@keyframes onlife-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes onlife-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes onlife-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

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


/* ======================================================================
   HERÓI EM DUAS COLUNAS + FORMULÁRIO DA PRIMEIRA DOBRA
   ----------------------------------------------------------------------
   Antes o único formulário era o do rodapé e todo CTA acima levava ao
   WhatsApp: a visitante saía da página antes de virar lead. O formulário
   curto (nome + WhatsApp) passa a existir já na primeira dobra.

   No celular a ordem é texto → formulário → botões, porque o formulário
   precisa vir logo depois do preço. No desktop ele vai para a coluna da
   direita e os botões voltam para baixo do texto.
   ====================================================================== */
.ol-hero__cols { display: grid; gap: 1.5rem; width: 100%; }

/* No celular a ordem do HTML colocaria os botoes antes do formulario. O
   formulario precisa vir logo depois do preco — e o que a primeira dobra
   tem de mais importante —, entao a ordem visual e reescrita aqui. */
@media (max-width: 1023px) {
  .ol-hero__anim    { order: 1; }
  .ol-herof         { order: 2; }
  .ol-hero__actions { order: 3; margin-top: 0; }
  /* 8rem de topo empurravam o formulario para fora da tela. O cabecalho
     fixo tem ~64px; 6rem ja da folga. */
  .ol-hero__inner   { padding-top: 6rem; }
}

@media (min-width: 1024px) {
  .ol-hero__cols {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    align-items: end;
    column-gap: 3.5rem;
  }
  .ol-hero__anim    { grid-column: 1; grid-row: 1; }
  .ol-hero__actions { grid-column: 1; grid-row: 2; }
  .ol-herof         { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

/* O herói tem `overflow:hidden` para segurar o zoom do vídeo. Com o
   formulário dentro, o conteúdo pode passar de 100svh no celular — o
   padding de baixo garante respiro em vez de corte rente. */
@media (max-width: 1023px) {
  .ol-hero__inner { padding-bottom: 3rem; }
}

.ol-herof { width: 100%; }
.ol-herof__card {
  background: rgba(12, 12, 12, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0.125rem;
  padding: 1.5rem;
}
@media (min-width: 768px) { .ol-herof__card { padding: 1.75rem; } }

.ol-herof__eyebrow {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ol-accent);
  margin: 0 0 0.75rem;
}
/* Prefixado com .onlife de proposito: o reset `.onlife h2 { margin: 0 }` tem
   especificidade maior e comeria a margem de baixo deste titulo. */
.onlife .ol-herof__title {
  font-family: var(--ol-font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 400;
  color: #fff;
  margin: 0 0 1.25rem;
}
.ol-herof__fields { display: grid; gap: 0.875rem; }
.ol-herof__fields label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,.66);
  margin-bottom: 0.375rem;
}
.ol-herof__fields input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 0.125rem;
  padding: 0.8125rem 0.875rem;
  color: #fff;
  font-family: inherit;
  font-size: 1rem; /* 16px: abaixo disso o iOS dá zoom ao focar o campo */
}
.ol-herof__fields input::placeholder { color: rgba(255,255,255,.4); }
.ol-herof__fields input:focus {
  outline: none;
  border-color: var(--ol-accent);
  background: rgba(255,255,255,.1);
}
.ol-herof__submit { width: 100%; margin-top: 1.125rem; }
.ol-herof__legal {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,.55);
  margin: 0.75rem 0 0;
  text-align: center;
}
.ol-herof__ok {
  margin-top: 1.125rem;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 1.125rem;
}
.ol-herof__ok-title {
  font-size: 0.875rem;
  color: #fff;
  margin: 0 0 0.75rem;
}
.ol-herof__ok-cta { width: 100%; }

/* ======================================================================
   OBRA: status e vídeo dentro da seção de fotos reais
   ----------------------------------------------------------------------
   A seção "Obras avançadas" foi absorvida aqui — dizia a mesma coisa que
   "A obra hoje", logo acima. Este bloco é o que sobrou dela.
   ====================================================================== */
.ol-obrastat {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--ol-border);
}
@media (min-width: 900px) {
  .ol-obrastat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 3rem; }
}
.ol-obrastat__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ol-fg);
  margin: 0 0 1.25rem;
}
.ol-obrastat__checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.ol-obrastat__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ol-fg);
}
.ol-obrastat__checks svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ol-accent); margin-top: 2px; }

/* ======================================================================
   LOCALIZAÇÃO: mapa ao lado da lista de tempos
   ====================================================================== */
.ol-local__right { display: grid; gap: 1.5rem; }
.ol-local__map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ol-border);
  border-radius: 0.125rem;
  overflow: hidden;
  background: var(--ol-bg);
}
.ol-local__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* CTA da seção de visita */
.ol-conheca__cta { margin-top: 1.75rem; }
/* ===========================================================================
   PALMS RECREIO STYLE RESIDENCE — Av. Miguel Antônio Fernandes, 981, Recreio
   Construção João Fortes. Página montada em 16/09/2026 a partir do folder.

   A identidade é a do PALMS, tirada do folder e da apresentação:
   - fundo bege-pedra (#D0CBC1 no folder; aqui clareado para leitura);
   - verde-folha profundo (#14281A) nas faixas, como a barra de folhagem;
   - pêssego (#EEA479) como marca-texto atrás das palavras-chave e nos CTAs;
   - títulos em serifa de caixa-alta (estilo Trajan) e rótulos espaçados;
   - arcos finos de círculo, como os do folder.
   Fontes: Cinzel (serifa em caixa-alta) e Montserrat.

   Grade: container de 1320px, seções em clamp, grades auto-fit (briefing das LPs).
   =========================================================================== */

.pm {
  --bege:     #E7E3DB;   /* fundo do documento */
  --bege-2:   #D6D0C5;   /* seções alternadas (o bege do folder) */
  --verde:    #14281A;   /* faixas escuras */
  --verde-2:  #2E5A3A;   /* títulos, botões sobre o claro */
  --verde-3:  #3E7550;   /* hover */
  --pessego:  #EEA479;   /* marca-texto e CTAs */
  --pessego-2:#F3BB97;
  --terra:    #9C5B3E;   /* acento legível sobre o bege */
  --tinta:    #2A2A26;
  --tinta-2:  #55524B;
  --tinta-3:  #7E7A71;
  --fio:      rgba(20, 40, 26, .16);
  --fio-claro: rgba(255, 255, 255, .18);

  --arco: clamp(80px, 14vw, 220px);

  --serif: Cinzel, "Trajan Pro", Georgia, "Times New Roman", serif;
  --sans:  Montserrat, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --barra: 112px;

  font-family: var(--sans);
  color: var(--tinta);
  background: var(--bege);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.pm *, .pm *::before, .pm *::after { box-sizing: border-box; }

/* Resets locais — p, ul e a dentro de :where() para não anularem as classes. */
.pm h1, .pm h2, .pm h3 { margin: 0; color: inherit; font-weight: 400; }
.pm :where(p)  { margin: 0; }
.pm :where(ul) { margin: 0; padding: 0; list-style: none; }
.pm dl, .pm dd, .pm dt { margin: 0; }
.pm figure { margin: 0; }
.pm img { display: block; max-width: 100%; }
.pm :where(a) { color: var(--verde-2); text-decoration: none; }
.pm :where(a:hover) { color: var(--terra); }
.pm ::selection { background: var(--pessego); color: var(--verde); }

.pm-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.pm-sec { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.pm-sec--claro { background: var(--bege-2); }
.pm-sec--verde { background: var(--verde); color: #fff; }

/* Canto em arco grande: o folder recorta as fotos com meios-círculos. */
.pm-arco { border-top-right-radius: var(--arco); overflow: hidden; }
.pm-arco img { border-top-right-radius: var(--arco); }

/* --- Tipos ---------------------------------------------------------------- */

.pm-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--terra);
}
/* O filete de 36x1px que abre cada rótulo — assinatura comum às LPs da casa. */
.pm-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--pessego);
}
.pm-olho--claro { color: var(--pessego-2); }
.pm-hero__end { color: rgba(255, 255, 255, .88); }

/* Títulos: serifa em caixa-alta; o <em> ganha o marca-texto pêssego do folder. */
.pm h1,
.pm h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .03em;
  text-wrap: balance;
}
.pm h1 em,
.pm h2 em {
  font-style: normal;
  padding: 0 .18em;
  background: linear-gradient(transparent 12%, var(--pessego) 12%, var(--pessego) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--verde);
}
.pm h1 {
  max-width: 16ch;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.12;
}
.pm h2 {
  max-width: 20ch;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.22;
  color: var(--verde-2);
}
.pm-sec--verde h2, .pm-video h2, .pm-falar h2 { color: #fff; }
.pm h3 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; line-height: 1.3; color: var(--verde-2); }

.pm-texto { margin-top: 24px; max-width: 58ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); text-wrap: pretty; }
.pm-texto + .pm-texto { margin-top: 18px; }

.pm-nota { margin-top: 28px; max-width: 100ch; font-size: 13px; line-height: 1.7; color: var(--tinta-3); }
.pm-nota--clara { color: rgba(255, 255, 255, .55); }

.pm-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: clamp(32px, 4.5vw, 52px);
  flex-wrap: wrap;
}
.pm-cab p { max-width: 50ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: var(--tinta-2); }
.pm-sec--verde .pm-cab p { color: rgba(255, 255, 255, .78); }

.pm-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.pm-duas--centro { align-items: center; }

/* --- Botões --------------------------------------------------------------- */

.pm-btn {
  display: inline-block;
  padding: 16px 28px;
  border: 0;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pm .pm-btn--pessego       { background: var(--pessego);   color: var(--verde); }
.pm .pm-btn--pessego:hover { background: var(--pessego-2); color: var(--verde); }
.pm .pm-btn--verde         { background: var(--verde-2);   color: #fff; }
.pm .pm-btn--verde:hover   { background: var(--verde-3);   color: #fff; }
.pm .pm-btn--linha-clara {
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
}
.pm .pm-btn--linha-clara:hover { border-color: var(--pessego); color: var(--pessego); }
.pm-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .pm-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

.pm-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 56px);
}
.pm-topo__marca img { width: auto; height: clamp(22px, 3vw, 30px); opacity: .9; }
.pm .pm-topo__cta { padding: 11px 20px; font-size: 12px; }

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

.pm-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: min(100vh, 940px);
  padding-block: 150px clamp(48px, 6vh, 84px);
  overflow: hidden;
  color: #fff;
  background: var(--verde);
}
.pm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.pm-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 40, 26, .55) 0%,
    rgba(20, 40, 26, .12) 26%,
    rgba(20, 40, 26, .62) 52%,
    rgba(20, 40, 26, .95) 100%);
}
.pm-hero__wrap { position: relative; }
.pm-hero__logo { width: clamp(150px, 15vw, 210px); height: auto; margin-bottom: clamp(18px, 3vw, 28px); }
.pm-hero h1 { color: #fff; }
.pm-hero__linha {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
}
.pm-hero__linha strong { display: block; margin-top: 8px; font-weight: 600; color: var(--pessego-2); }
.pm-hero__precos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 40px);
}
.pm-preco__rot { margin-bottom: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.pm-preco__valor { font-family: var(--serif); font-size: clamp(32px, 3.8vw, 50px); line-height: 1; }
.pm-preco__obs { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .72); }

/* --- Selo da campanha (hero) ----------------------------------------------- */

.pm-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 28px);
  padding: 10px 18px;
  border: 1px solid rgba(238, 164, 121, .6);
  border-radius: 100px;
  font-size: 13px;
  color: #fff;
}
.pm-selo strong { color: var(--pessego); }
.pm-selo:hover { border-color: var(--pessego); color: var(--pessego); }

/* --- Campanha / Promoção (bloco removível) --------------------------------- */

.pm-sec--pessego { background: var(--pessego); color: var(--verde); }
.pm-sec--pessego .pm-olho { color: var(--verde); }
.pm-sec--pessego .pm-olho::before { background: var(--verde); }
.pm-sec--pessego h2 { color: var(--verde); }
.pm-sec--pessego h2 em { background: none; padding: 0; color: var(--verde); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.pm-sec--pessego .pm-cab p { color: rgba(20, 40, 26, .75); }

.pm-promo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(28px, 3.4vw, 40px);
}
.pm-promo__grupo {
  padding: clamp(24px, 3vw, 34px);
  background: var(--verde);
  color: #fff;
}
.pm-promo__desc { font-family: var(--serif); font-size: clamp(40px, 4.4vw, 58px); line-height: 1; color: var(--pessego); }
.pm-promo__blocos { margin-top: 12px; font-size: 15px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.pm-sec--pessego .pm-nota { color: rgba(20, 40, 26, .65); }
.pm-sec--pessego .pm-btn--verde { background: var(--verde); color: #fff; }
.pm-sec--pessego .pm-btn--verde:hover { background: #0B170F; color: #fff; }

/* --- Fotos da obra (reais) ------------------------------------------------- */

.pm-obra {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
/* A aérea abre a seção em faixa inteira; as duas da piscina ficam lado a lado
   embaixo. Com 7+5+5 a terceira sobrava sozinha e deixava um buraco de 7
   colunas à direita. */
.pm-obra .pm-fig:first-child { grid-column: span 12; }
.pm-obra .pm-fig:not(:first-child) { grid-column: span 6; }
.pm .pm-obra img { height: clamp(240px, 26vw, 360px); }
.pm .pm-obra .pm-fig:first-child img { height: clamp(300px, 40vw, 560px); }
.pm-sec--verde .pm-obra .pm-fig figcaption { color: rgba(255, 255, 255, .7); }

@media (max-width: 760px) {
  .pm-obra { grid-template-columns: minmax(0, 1fr); }
  .pm-obra .pm-fig { grid-column: auto; }
  .pm .pm-obra img,
  .pm .pm-obra .pm-fig:first-child img { height: clamp(220px, 60vw, 320px); }
}

/* --- Números -------------------------------------------------------------- */

.pm-numeros { background: var(--verde); color: #fff; }
.pm-numeros__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--fio-claro);
}
.pm-numeros__n { font-family: var(--serif); font-size: clamp(30px, 3vw, 42px); line-height: 1; color: var(--pessego); }
.pm-numeros__l { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.pm-numeros__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* --- Figuras -------------------------------------------------------------- */

.pm-fig img { width: 100%; height: auto; object-fit: cover; }
.pm-fig figcaption { padding-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }

.pm-fotos-duas { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.pm .pm-fotos-duas img { aspect-ratio: 16 / 9; height: auto; }

/* --- Unidades ------------------------------------------------------------- */

.pm-jeitos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px clamp(20px, 3vw, 40px);
  margin-bottom: clamp(28px, 4vw, 44px);
  padding-block: 20px;
  border-block: 1px solid var(--fio);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tinta-2);
}
.pm-jeitos__t { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 17px; color: var(--verde-2); }

/* 6 plantas: 3+3, 2+2+2 ou 1 por linha. */
.pm-unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.pm-unidade { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fio); }
.pm-unidade__fig { padding: clamp(10px, 1.4vw, 16px); border-bottom: 1px solid var(--fio); }
.pm .pm-unidade__fig img { height: clamp(220px, 20vw, 260px); object-fit: contain; }
.pm-unidade__txt { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px); }
.pm-unidade__area { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); }
.pm-unidade__d { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--tinta-2); }
.pm .pm-unidade__v { margin-top: auto; padding-top: 14px; font-family: var(--serif); font-size: 24px; color: var(--verde-2); }
.pm-unidade__v span { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }

.pm-pedir { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: clamp(32px, 4vw, 48px); }
.pm-pedir__s { font-size: 14px; color: var(--tinta-2); }

/* --- Decorados ------------------------------------------------------------ */

/* 6 fotos quadradas: 3+3, 2+2+2 ou 1 por linha. */
.pm-decorados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.pm .pm-decorados img { aspect-ratio: 1; height: auto; }
.pm-perspectivas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.pm .pm-perspectivas img { aspect-ratio: 3 / 2; height: auto; }

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

.pm-video { background: var(--verde); color: #fff; }
.pm-video__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 112px);
}
.pm-video__p { margin-block: 24px 32px; max-width: 44ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.pm-video__player { position: relative; background: #0B170F; border-top-right-radius: var(--arco); overflow: hidden; }
/* `height: auto` obrigatório: o atributo height do <video> venceria a proporção
   e esticaria o quadro — mesmo gotcha das fotos. */
.pm .pm-video__player video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0B170F;
}
.pm-player__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  /* Dois véus: o radial assenta o botão no meio, o de baixo segura os rótulos
     sobre a parte clara do poster (o mar ao sol). */
  background:
    radial-gradient(58% 55% at 50% 48%, rgba(11, 23, 15, .58), rgba(11, 23, 15, 0) 70%),
    linear-gradient(to top, rgba(11, 23, 15, .64), rgba(11, 23, 15, .08));
  transition: opacity .25s;
}
.pm-player--on .pm-player__capa { opacity: 0; pointer-events: none; }
.pm-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pessego);
  color: var(--verde);
  transition: transform .2s, background .2s;
}
.pm-player__play svg { width: 40%; margin-left: 8%; }
.pm-player__capa:hover .pm-player__play,
.pm-player__capa:focus-visible .pm-player__play { transform: scale(1.06); background: #fff; }
.pm-player__rot { font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.pm-player__tempo { font-size: 11px; letter-spacing: .20em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

@media (prefers-reduced-motion: reduce) {
  .pm-player__capa, .pm-player__play { transition: none; }
}

/* --- Lazer ---------------------------------------------------------------- */

.pm-lazer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.pm .pm-lazer img { height: clamp(220px, 22vw, 300px); }
.pm-lazer figcaption { letter-spacing: normal; text-transform: none; }
.pm-lazer__t { display: block; font-size: 17px; font-weight: 600; color: var(--verde-2); }
.pm-lazer__d { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; color: var(--tinta-2); }

.pm-mais { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--fio); }
.pm-mais__rot { margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-3); }
.pm-chips-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.pm-chips-lista li {
  padding: 9px 16px;
  border: 1px solid var(--fio);
  border-radius: 100px;
  background: rgba(255, 255, 255, .55);
  font-size: 14px;
  color: var(--tinta-2);
}

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

.pm-onde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.pm-onde__mapa { position: relative; min-height: clamp(320px, 38vw, 480px); background: var(--bege); }
.pm-onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pm-onde__rot { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--terra); }
.pm-perto li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 14px;
  border-top: 1px solid var(--fio);
  font-size: 16px;
  color: var(--tinta);
}
.pm-perto li:last-child { border-bottom: 1px solid var(--fio); }
.pm-perto li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pessego); }
.pm .pm-onde__cta { margin-top: 28px; }

/* --- Condições ------------------------------------------------------------ */

.pm-pag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--fio-claro);
  border: 1px solid var(--fio-claro);
}
.pm-pag > div { padding: clamp(20px, 2.4vw, 30px); background: var(--verde); }
.pm-pag__valor { font-family: var(--serif); font-size: clamp(36px, 3.6vw, 50px); line-height: 1; color: var(--pessego); }
.pm-pag__rot { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.pm-pag__d { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, .72); }

.pm-valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 64px);
  align-items: start;
}
.pm-faixa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding-block: 18px;
  border-bottom: 1px solid var(--fio-claro);
}
.pm-faixa:first-child { border-top: 1px solid var(--fio-claro); }
.pm-faixa__t { display: block; font-size: 16px; font-weight: 500; color: #fff; }
.pm-faixa__s { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, .65); }
.pm-faixa__v { font-family: var(--serif); font-size: 19px; color: var(--pessego-2); white-space: nowrap; }

/* A curva vai no canto DIREITO: no esquerdo ela cortaria o rótulo. */
.pm-exemplo { padding: clamp(26px, 3vw, 40px); background: var(--bege); color: var(--tinta); border-top-right-radius: var(--arco); }
.pm-exemplo__rot { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--terra); }
.pm .pm-exemplo__un { margin-top: 10px; font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; color: var(--verde-2); }
.pm .pm-exemplo__tipo { margin-top: 6px; font-size: 15px; font-weight: 300; color: var(--tinta-2); }
.pm-exemplo__fluxo { margin-block: 20px 26px; }
.pm-exemplo__fluxo > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--fio); }
.pm-exemplo__fluxo > div:first-child { border-top: 1px solid var(--fio); }
.pm-exemplo__fluxo dt { font-size: 15px; font-weight: 300; color: var(--tinta-2); }
.pm-exemplo__fluxo dd { font-size: 16px; font-weight: 600; white-space: nowrap; color: var(--verde-2); }

/* --- Atendimento ---------------------------------------------------------- */

.pm-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* `height: auto` obrigatório: o height do atributo venceria o aspect-ratio. */
.pm-ana__foto { max-width: 400px; }
.pm .pm-ana__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.pm-ana__intro { margin-bottom: 28px; }
.pm-razoes { display: grid; gap: 18px; margin-bottom: 34px; }
.pm-razoes li {
  max-width: 54ch;
  padding-left: 20px;
  border-left: 2px solid var(--pessego);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--tinta-2);
}
.pm-assina { margin-top: 18px; font-size: 13px; color: var(--tinta-3); }

/* --- Ficha técnica -------------------------------------------------------- */

.pm .pm-ficha__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.pm-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}
.pm-ficha > div { padding-block: 18px; border-bottom: 1px solid var(--fio); }
.pm-ficha dt { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.pm-ficha dd { margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--tinta-2); }

/* --- Dúvidas -------------------------------------------------------------- */

.pm .pm-faq__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.pm-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.pm-faq details { border-bottom: 1px solid var(--fio); }
.pm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 17px;
  font-weight: 500;
  color: var(--verde-2);
  cursor: pointer;
  list-style: none;
}
.pm-faq summary::-webkit-details-marker { display: none; }
.pm-faq summary:hover { color: var(--terra); }
.pm-faq__sinal { font-size: 24px; line-height: 1; color: var(--terra); }
.pm .pm-faq p { max-width: 72ch; padding-bottom: 22px; font-size: 15px; font-weight: 300; line-height: 1.8; color: var(--tinta-2); }

/* --- Contato -------------------------------------------------------------- */

.pm-falar { position: relative; overflow: hidden; background: var(--verde); color: #fff; }
.pm-falar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.pm-falar__veu { position: absolute; inset: 0; background: linear-gradient(180deg, #14281A 0%, rgba(20, 40, 26, .78) 50%, #14281A 100%); }
.pm-falar__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(72px, 9vw, 128px);
}
.pm-falar__p { margin-block: 24px 32px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.pm-ligar { margin-top: 22px; font-size: 15px; color: rgba(255, 255, 255, .8); }
.pm .pm-ligar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pm-creci { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .5); }

.pm-cartao { padding: clamp(26px, 3.4vw, 44px); background: var(--bege); color: var(--tinta); border-top-right-radius: var(--arco); }
.pm-chips__rot { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-2); }
.pm-chips__rot span { display: block; margin-top: 4px; font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.pm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pm-chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(20, 40, 26, .3);
  border-radius: 100px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--verde-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pm-chip:hover { border-color: var(--verde-2); }
.pm-chip--on,
.pm-chip--on:hover { background: var(--verde-2); border-color: var(--verde-2); color: #fff; }

@media (prefers-reduced-motion: reduce) { .pm-chip { transition: none; } }

.pm-form { display: grid; gap: 18px; }
.pm-campo { display: grid; gap: 8px; }
.pm-rot { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.pm-rot__op { font-weight: 300; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.pm-form input,
.pm-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(20, 40, 26, .25);
  border-radius: 4px;
  background: #fff;
  font-family: var(--sans);
  font-size: 16px;   /* evita o zoom automático do iOS */
  color: var(--tinta);
  outline: none;
  resize: vertical;
}
.pm-form input:focus,
.pm-form textarea:focus { border-color: var(--verde-2); }
.pm-form input::placeholder { color: var(--tinta-3); }
.pm-form__fine { font-size: 13px; color: var(--tinta-3); }

.pm-obrigada__t { font-family: var(--serif); font-size: 28px; color: var(--verde-2); }
.pm-obrigada__p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--tinta-2); }

/* --- Rodapé compartilhado ------------------------------------------------- */

.pm .rlp {
  --rlp-fundo: #0F1F14;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
.pm .rlp__wordmark { max-width: 180px; }
/* O botão flutuante bateria na barra fixa — sobe ele. */
.pm .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.pm-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(15, 31, 20, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--fio-claro);
  color: #fff;
  transform: translateY(105%);
  transition: transform .25s ease;
}
.pm-barra--on { transform: translateY(0); }
.pm-barra__wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.pm-barra__txt { min-width: 0; }
.pm-barra__valor,
.pm-barra__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-barra__valor { font-size: 15px; font-weight: 600; }
.pm-barra__sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.pm .pm-barra .pm-btn { padding: 14px 22px; font-size: 12px; letter-spacing: .12em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .pm-barra { transition: none; } }

/* --- Lightbox ------------------------------------------------------------- */

.pm-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(10, 22, 14, .95);
}
.pm-lb[hidden] { display: none; }
.pm-lb__palco { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.pm .pm-lb__img { width: auto; height: auto; max-width: 100%; max-height: 80vh; margin-inline: auto; object-fit: contain; border-radius: 0; }
.pm-lb__legenda { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.pm-lb__fechar,
.pm-lb__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.pm-lb__fechar { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 40px; }
.pm-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 72px; font-size: 56px; }
.pm-lb__nav--ant  { left: 8px; }
.pm-lb__nav--prox { right: 8px; }
.pm-lb__fechar:hover, .pm-lb__nav:hover { color: var(--pessego); }

.pm-zoom { cursor: zoom-in; }

/* --- Celular -------------------------------------------------------------- */

@media (max-width: 760px) {
  .pm h1 { letter-spacing: .01em; }
}
/* ===========================================================================
   RIIO BY PIERO LISSONI — Av. Lúcio Costa, 4.900, Barra da Tijuca
   Incorporação Tegra. Arquitetura, interiores e paisagismo Lissoni & Partners.
   Página montada em 21/09/2026.

   A identidade sai das próprias perspectivas: o RIIO é areia, madeira clara,
   verde da mata e o azul da piscina. Nada de dourado — a marca é sóbria.
   - verde-oliva profundo (#2C3A31) nas faixas escuras e nos títulos;
   - areia (#EFE9DE) e creme (#FBF8F3) nos fundos;
   - cobre (#A9754F) como acento e cor dos botões, o tom das madeiras.
   Título em Marcellus (romana, italiana); corpo em Inter, que o layout carrega.

   Grade: container de 1320px, seções em clamp, grades auto-fit.
   Prefixo .ri em tudo — application.css faz require_tree e sem prefixo uma LP
   quebraria a outra.

   ⚠️ Proporção das imagens: as perspectivas vêm de 2,5:1 a 1:1. Por isso as
   fotos comuns entram numa janela 16:10 uniforme (senão a grade fica
   esburacada) e as panorâmicas ocupam a linha inteira com proporção FIXA —
   `aspect-ratio: auto` faria a figura nascer com altura zero e a página pular.
   =========================================================================== */

.ri {
  --verde:    #2C3A31;   /* faixas escuras, títulos */
  --verde-2:  #3F5445;
  --areia:    #EFE9DE;   /* seções alternadas */
  --creme:    #FBF8F3;   /* fundo do documento */
  --cobre:    #A9754F;   /* acento, botões */
  --cobre-2:  #8E5F3E;   /* hover */
  --tinta:    #1F2A25;
  --tinta-2:  #4E5A52;
  --tinta-3:  #808C84;
  --fio:      rgba(44, 58, 49, .14);
  --fio-claro: rgba(255, 255, 255, .22);

  --serifa: Marcellus, Georgia, "Times New Roman", serif;

  background: var(--creme);
  color: var(--tinta);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

.ri *,
.ri *::before,
.ri *::after { box-sizing: border-box; }

.ri :where(p, h1, h2, h3, ul, figure) { margin: 0; }
.ri :where(img) { display: block; max-width: 100%; height: auto; }
.ri :where(figure) { margin: 0; }

.ri-wrap { width: min(1320px, 100% - 2.5rem); margin-inline: auto; }
.ri-sec  { padding-block: clamp(3.5rem, 8vw, 7rem); }

.ri h1, .ri h2, .ri h3 {
  font-family: var(--serifa);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.14;
  color: var(--verde);
}

.ri h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.ri h2 { font-size: clamp(1.75rem, 4vw, 2.9rem); margin-bottom: 1rem; }
.ri h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }
.ri h1 em { font-style: italic; color: #E8C9A8; }

.ri-olho {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cobre);
  margin-bottom: .6rem;
}

.ri-texto { color: var(--tinta-2); max-width: 62ch; margin-bottom: 1.4rem; }

.ri-nota {
  margin-top: 1.4rem;
  font-size: .85rem;
  color: var(--tinta-3);
  max-width: 72ch;
}

/* ------------------------------------------------------------------ botões */
.ri-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.ri-btn--cobre { background: var(--cobre); color: #fff; }
.ri-btn--cobre:hover { background: var(--cobre-2); }
.ri-btn--linha-clara { border-color: var(--fio-claro); color: #fff; }
.ri-btn--linha-clara:hover { background: rgba(255, 255, 255, .12); }
.ri-btn--bloco { width: 100%; }

.ri-link {
  display: inline-block;
  margin-top: .7rem;
  color: var(--cobre);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  border-bottom: 1px solid var(--cobre);
  padding-bottom: 2px;
}
.ri-link:hover { color: var(--cobre-2); }

/* -------------------------------------------------------------------- topo */
.ri-topo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1320px, 100% - 2.5rem);
  margin-inline: auto;
  padding-block: 1.3rem;
}
.ri-topo__marca img { width: 168px; height: auto; }
.ri-topo__cta { font-size: .88rem; padding: .6rem 1.1rem; min-height: 42px; }

/* -------------------------------------------------------------------- hero */
.ri-hero {
  position: relative;
  /* a cortina do texto sai 100% pra esquerda; sem isso nasce barra horizontal */
  overflow: hidden;
  min-height: min(92vh, 780px);
  display: flex;
  align-items: flex-end;
  background: var(--verde);
}
.ri-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* O texto do hero vive sobre fachada clara e o ceu. Duas camadas cuidam disso: esta
   VERTICAL, que segura o topo (logo do grupo) e o rodape, e a CORTINA do
   .ri-hero__wrap::before logo abaixo, que e quem realmente faz a copy
   aparecer. A primeira tentativa (21/09) punha a cortina aqui, ancorada na
   largura da TELA — e por isso falhava em monitor grande. Ver o comentario
   da cortina. */
.ri-hero__veu {
  position: absolute;
  inset: 0;
  /* So a vertical: segura o topo (logo do grupo) e o rodape, onde comeca a
     secao de numeros. Quem cuida do texto agora e a cortina do wrap. */
  background: linear-gradient(180deg,
              rgba(24, 32, 27, .50) 0%,
              rgba(24, 32, 27, .22) 30%,
              rgba(24, 32, 27, .48) 66%,
              rgba(24, 32, 27, .80) 100%);
}
.ri-hero__wrap {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  color: #fff;
  /* Rede de seguranca: em outra largura o object-fit corta a foto noutro ponto
     e pode trazer o ceu claro pra tras do texto. */
  text-shadow: 0 1px 2px rgba(24, 32, 27, .55), 0 2px 18px rgba(24, 32, 27, .6);
}
/* 22/09/2026 — a cortina ancorada na LARGURA DA TELA nao resolvia em monitor
   grande. O wrap e centrado (max 1320 px): num 1600 o texto comeca em 9% da
   tela e termina perto de 48% — justo onde o degrade de 90deg ja tinha caido
   pra ~.29. Dava certo no notebook e falhava no monitor da Ana. Agora a
   cortina mora no PROPRIO BLOCO DE TEXTO: nasce fora da tela a esquerda,
   cobre a coluna de texto inteira e so dissolve depois dela. Acompanha o
   container em qualquer largura, que e o que o ancoramento na tela nao fazia.
   z-index -1 fica atras do texto mas ainda na frente do veu, porque o wrap
   (z-index 2) cria contexto de empilhamento. */
.ri-hero__wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* 22/09/2026, segunda correcao: a cortina comecava DE UMA VEZ na borda de
     cima do bloco de texto e desenhava um degrau reto atravessando a foto,
     logo abaixo do cabecalho — a Ana viu na hora ("olha a hero"). Agora ela
     sobe 8rem alem do texto e entra por uma mascara: transparente no topo,
     cheia so quando chega na altura da marca. O degrau some e a parte de cima
     da foto volta a ter luz. */
  top: -8rem;
  bottom: -.6rem;
  left: -100%;
  right: -4%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  /* Cuidado com os stops: a cortina e MAIS LARGA que o container (ela comeca
     uma largura inteira a esquerda, fora da tela), entao porcentagem aqui nao
     corresponde a porcentagem do texto. Por isso a dissolucao e medida em px
     a partir da direita: cheia ate uns 430 px antes do fim e zero no fim. A
     coluna de texto (56ch, ~620 px) termina bem antes disso. */
  background: linear-gradient(90deg,
              rgba(24, 32, 27, .82) 0,
              rgba(24, 32, 27, .80) calc(100% - 430px),
              rgba(24, 32, 27, 0) 100%);
}
/* Ate 1000 px o texto ja ocupa quase a largura toda e nao sobra foto a
   direita pra preservar: a cortina vira faixa cheia. */
/* ------------------------------------------------------------------ FAQ ---
   Secao acrescentada em 22/09/2026, depois da auditoria de SEO: esta era uma
   das tres LPs sem perguntas frequentes, num site onde as outras quinze tinham.
   Pergunta e resposta e o formato que o Google mostra direto no resultado e o
   que as IAs mais extraem para responder — e, no atendimento, derruba a duvida
   antes de a pessoa desistir. Mesmo padrao do Gaea: <details> nativo, sem JS
   para abrir (o JS so troca o sinal). */
.ri-duvidas { background: var(--creme); }
.ri .ri-faq__titulo { margin-bottom: clamp(28px, 3.5vw, 44px); }
.ri-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.ri-faq details { border-bottom: 1px solid var(--fio); }
.ri-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
}
.ri-faq summary::-webkit-details-marker { display: none; }
.ri-faq summary:hover { color: var(--cobre); }
.ri-faq__sinal { font-size: 24px; line-height: 1; color: var(--cobre); }
.ri .ri-faq p {
  max-width: 72ch;
  padding-bottom: 22px;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--tinta-2);
}

@media (max-width: 1000px) {
  .ri-hero__wrap::before {
    right: -100%;
    background: linear-gradient(90deg, rgba(24, 32, 27, .80), rgba(24, 32, 27, .72));
  }
}
.ri-hero__marca {
  font-family: var(--serifa);
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  letter-spacing: .26em;
  margin-bottom: .8rem;
}
.ri-hero__marca span {
  display: block;
  font-size: .38em;
  letter-spacing: .28em;
  text-transform: uppercase;
  /* Creme, nao o tom de acento: texto miudo pede MAIS contraste que o titulo,
     nao menos. O acento #E8C9A8 fica para o <em> do h1, que e grande. */
  color: #F2E7D6;
  margin-top: .35rem;
}
.ri-hero__end { color: #F2E7D6; }
/* 15ch, nao 17ch: com 17ch (877 px) o titulo quebrava DENTRO do <em>, deixando
   "frente" sozinho no fim da 1a linha e "para a praia" na 2a. A Ana viu na hora
   ("a copy nao esta aparecendo direito"). Com 15ch continuam duas linhas, mas a
   expressao em italico fica inteira na segunda. Medido no navegador: 15ch e o
   maior valor que resolve. `ch` acompanha o font-size do clamp, entao a quebra
   se mantem nas outras larguras. */
.ri-hero h1 { color: #fff; max-width: 15ch; }
.ri-hero__linha {
  margin-top: 1.1rem;
  max-width: 56ch;
  color: rgba(255, 255, 255, .92);
}
.ri-hero__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ----------------------------------------------------------------- números */
.ri-numeros {
  background: var(--verde);
  color: #fff;
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
}
.ri-numeros__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.8rem 2rem;
}
.ri-numero__n {
  font-family: var(--serifa);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  color: #fff;
  line-height: 1;
}
.ri-numero__l {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E8C9A8;
  margin-top: .35rem;
}
.ri-numero__d { font-size: .9rem; color: rgba(255, 255, 255, .72); margin-top: .45rem; }

/* ---------------------------------------------------------------- projeto */
.ri-projeto { background: var(--creme); }
.ri-projeto__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.ri-card {
  background: #fff;
  border: 1px solid var(--fio);
  border-radius: 8px;
  padding: 1.6rem;
}
.ri-card h3 { margin-bottom: .5rem; }
.ri-card p { color: var(--tinta-2); font-size: .95rem; }
.ri-projeto__foto { margin-top: 2.2rem; }

/* ----------------------------------------------------------------- dentro */
.ri-dentro { background: var(--areia); }
/* 22/09/2026 — a Ana apontou os "buracos": a fileira de baixo terminava com um
   espaco vazio a direita. Culpa do `grid auto-fit`: ele fixa o numero de
   colunas, e o que sobra fica sozinho com o vazio do lado. Trocado por FLEX com
   quebra de linha: quem sobra CRESCE e fecha a fileira sozinho — tres por
   fileira quando cabem tres, dois de meia largura quando sobram dois. A conta
   das colunas continua a mesma de antes (base de 320 px), entao nada mudou de
   lugar nas fileiras cheias. */
.ri-dentro__grade,
.ri-lazer__grade {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2rem;
}
.ri-dentro__grade > *,
.ri-lazer__grade > * { flex: 1 1 320px; min-width: 0; }

.ri-fig figcaption { margin-top: .6rem; font-size: .86rem; color: var(--tinta-3); }
.ri-fig img { border-radius: 8px; }
.ri-zoom { cursor: zoom-in; }

/* Janela uniforme para as fotos comuns; a panorâmica toma a linha inteira. */
.ri-dentro__grade .ri-fig img,
.ri-lazer__grade .ri-fig img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ri-fig--larga { flex: 1 1 100%; }

/* A dupla que fecha a secao fica com o DOBRO da largura das fotos de cima; em
   16:10 ela ficaria tambem muito mais alta e quebrava o ritmo. Recortada em
   16:7, a altura bate com a das fileiras de tres. So no desktop: abaixo de
   1000 px ja sao duas por fileira e o 16:10 volta a valer. */
@media (min-width: 1001px) {
  .ri-dentro__grade .ri-fig--dupla img,
  .ri-lazer__grade .ri-fig--dupla img { aspect-ratio: 16 / 7; }
}


/* Repetir o nome da grade é necessário: `.ri-dentro__grade .ri-fig img` tem
   especificidade maior que `.ri-fig--larga img` e recortaria a panorâmica. */
.ri-dentro__grade .ri-fig--larga img,
.ri-lazer__grade .ri-fig--larga img,
.ri-projeto__foto img {
  aspect-ratio: 16 / 7;
  object-fit: cover;
  width: 100%;
}

/* ----------------------------------------------------------------- blocos */
.ri-blocos { background: var(--creme); }
/* 22/09/2026 — a Ana apontou os "buracos": a fileira de baixo terminava com um
   espaco vazio a direita. Culpa do `grid auto-fit`: ele fixa o numero de
   colunas, e o que sobra fica sozinho com o vazio do lado. Trocado por FLEX com
   quebra de linha: quem sobra CRESCE e fecha a fileira sozinho — tres por
   fileira quando cabem tres, dois de meia largura quando sobram dois. A conta
   das colunas continua a mesma de antes (base de 380 px), entao nada mudou de
   lugar nas fileiras cheias. */
.ri-blocos__grade {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2rem;
}
.ri-blocos__grade > * { flex: 1 1 380px; min-width: 0; }
.ri-bloco {
  background: #fff;
  border: 1px solid var(--fio);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* As plantas são quase 4:3 e não podem ser cortadas — contain, com o fundo
   areia preenchendo a sobra. */
.ri-bloco__fig { background: var(--areia); }
.ri-bloco__fig img {
  border-radius: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: .6rem;
}
.ri-bloco__txt { padding: 1.3rem 1.4rem 1.5rem; }
.ri-bloco__meta {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cobre);
  margin: .35rem 0 .6rem;
}
.ri-bloco__txt p { color: var(--tinta-2); font-size: .94rem; }
.ri-bloco__lazer {
  margin-top: .6rem;
  font-size: .88rem;
  color: var(--tinta-2);
}
.ri-bloco__lazer strong { color: var(--verde); }

.ri-bloco__ph {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--fio);
  font-size: .88rem;
  color: var(--tinta-3);
}

/* ------------------------------------------------------------------- lazer */
.ri-lazer { background: var(--areia); }
.ri-fig--lazer figcaption { display: flex; flex-direction: column; gap: .15rem; }
.ri-fig--lazer strong { color: var(--verde); font-size: .98rem; }
.ri-fig--lazer span { color: var(--tinta-3); font-size: .86rem; }

/* -------------------------------------------------------------- localização */
.ri-local { background: var(--creme); }
.ri-local__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.4rem;
  align-items: center;
}
.ri-lista { list-style: none; padding: 0; display: grid; gap: .7rem; }
.ri-lista li { position: relative; padding-left: 1.4rem; color: var(--tinta-2); }
.ri-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cobre);
}

/* ------------------------------------------------------------ atendimento */
.ri-atende { background: var(--areia); }

.ri-ana {
  display: grid;
  /* A coluna da foto e limitada. Com `repeat(auto-fit, minmax(300px, 1fr))` as
     duas colunas ficavam iguais e a foto da Ana nascia com a metade da largura
     da secao — 593 px num monitor de 1280. Ela reclamou ("ficou um pouco grande
     demais") e tinha razao: e um retrato de apoio, nao o assunto da secao.
     Como agora sao duas colunas explicitas, o colapso no celular deixou de ser
     automatico e passa pelo @media la embaixo. */
  grid-template-columns: minmax(240px, 360px) minmax(300px, 1fr);
  gap: 2.4rem;
  align-items: center;
}
.ri-ana__foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}

.ri-razoes {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .9rem;
  margin-bottom: 1.8rem;
}
.ri-razoes li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--tinta-2);
  font-size: .97rem;
}
.ri-razoes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--cobre);
  border-radius: 50%;
}

.ri-assina {
  margin-top: 1.1rem;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--tinta-3);
}

/* ----------------------------------------------------------------- contato */
.ri-falar { background: var(--verde); color: #fff; scroll-margin-top: 1rem; }
.ri-falar h2 { color: #fff; }
.ri-falar .ri-texto { color: rgba(255, 255, 255, .84); }
.ri-falar__wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.6rem;
}
.ri-falar__wpp { color: rgba(255, 255, 255, .8); font-size: .95rem; }
.ri-falar__wpp a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #E8C9A8;
}
.ri-falar__form {
  background: #fff;
  border-radius: 10px;
  padding: clamp(1.4rem, 3vw, 2rem);
  color: var(--tinta);
}

.ri-rot {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .7rem;
}
.ri-rot__op { text-transform: none; letter-spacing: 0; font-weight: 400; }

.ri-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.ri-chip {
  min-height: 44px;
  padding: .55rem 1rem;
  border: 1px solid var(--fio);
  border-radius: 999px;
  background: #fff;
  color: var(--tinta-2);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.ri-chip:hover { border-color: var(--cobre); }
.ri-chip--on { background: var(--cobre); border-color: var(--cobre); color: #fff; }

.ri-form { display: grid; gap: 1rem; }
.ri-campo { display: grid; gap: .35rem; }
.ri-campo .ri-rot { margin-bottom: 0; }
.ri-campo input,
.ri-campo textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--fio);
  border-radius: 4px;
  background: var(--creme);
  font: inherit;
  color: var(--tinta);
}
.ri-campo textarea { min-height: 96px; resize: vertical; }
.ri-campo input:focus,
.ri-campo textarea:focus {
  outline: 2px solid var(--cobre);
  outline-offset: 1px;
  background: #fff;
}
.ri-form__fine { font-size: .8rem; color: var(--tinta-3); text-align: center; }

.ri-obrigada { text-align: center; padding: 1.5rem 0 .5rem; }
.ri-obrigada h3 { margin-bottom: .5rem; }
.ri-obrigada p { color: var(--tinta-2); font-size: .95rem; }

/* -------------------------------------------------------------- barra fixa */
.ri-barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: var(--verde);
  border-top: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.ri-barra--on { transform: translateY(0); }
.ri-barra__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .8rem;
}
.ri-barra__txt { display: grid; color: #fff; }
.ri-barra__valor { font-weight: 600; font-size: .98rem; }
.ri-barra__sub { font-size: .82rem; color: rgba(255, 255, 255, .72); }

/* ---------------------------------------------------------------- lightbox */
.ri-lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18, 24, 20, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ri-lb[hidden] { display: none; }
.ri-lb__palco {
  max-width: min(1400px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.ri-lb__img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 6px; }
.ri-lb__legenda { color: rgba(255, 255, 255, .78); font-size: .85rem; text-align: center; }
.ri-lb__fechar,
.ri-lb__nav {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  border-radius: 999px;
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.ri-lb__fechar { top: 1rem; right: 1rem; }
.ri-lb__nav--ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.ri-lb__nav--prox { right: 1rem; top: 50%; transform: translateY(-50%); }
.ri-lb__fechar:hover, .ri-lb__nav:hover { background: rgba(255, 255, 255, .2); }

/* --- Rodapé compartilhado ------------------------------------------------- */
.ri .rlp {
  --rlp-fundo: #1E2A23;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
.ri .rlp__wordmark { max-width: 180px; }
.ri .rlp-wa { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 720px) {
  .ri-ana { grid-template-columns: 1fr; }
  .ri { font-size: 16px; }
  .ri-topo__marca img { width: 132px; }
  .ri-topo__cta { display: none; }
  .ri-hero { min-height: min(88vh, 660px); }
  .ri-hero__acoes .ri-btn { flex: 1 1 100%; }
  .ri-lb__nav { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .ri-barra { transition: none; }
}
/* ===========================================================================
   SENSIA BARRA — Rua Rogério Jonas Zylbersztajn, Barra da Tijuca
   Incorporação Sensia (MRV&CO). Página montada em 16/09/2026 a partir do book.

   A identidade é a da SENSIA, tirada do book de vendas:
   - fundo verde profundo (#172B2B) em quase todas as páginas;
   - verde-sálvia (#B7CAA6) como único acento;
   - títulos em caixa-alta espaçada, com a palavra-chave em negrito
     ("VIVA A BARRA DO SEU JEITO.");
   - fotos e cartões com dois cantos chanfrados na diagonal;
   - páginas de planta em fundo claro — a única exceção ao verde.
   O book usa Averta (fonte paga). Figtree é a geométrica gratuita mais próxima.

   Grade: container de 1320px, seções em clamp, grades auto-fit (briefing das LPs).
   =========================================================================== */

.sb {
  --fundo:    #172B2B;   /* fundo do documento */
  --fundo-2:  #1D3634;   /* seções alternadas */
  --verde:    #24403D;   /* cartões sobre o fundo */
  --salvia:   #B7CAA6;   /* rótulos, filetes, CTAs, valores */
  --salvia-2: #CFDCC3;   /* hover do CTA */
  --texto:    #FFFFFF;
  --texto-2:  rgba(255, 255, 255, .80);
  --texto-3:  rgba(255, 255, 255, .62);
  --texto-4:  rgba(255, 255, 255, .46);
  --fio:      rgba(255, 255, 255, .14);
  --fio-input: rgba(255, 255, 255, .24);

  /* faixa clara das plantas */
  --claro:    #F3F5EF;
  --tinta:    #172B2B;
  --tinta-2:  #4B5C58;
  --tinta-3:  #74827E;
  --fio-claro: rgba(23, 43, 43, .14);

  /* Canto chanfrado do book. */
  --corte: clamp(18px, 2.4vw, 36px);

  --sans: Figtree, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Reserva para a barra fixa, que quebra em duas linhas no celular. */
  --barra: 112px;

  font-family: var(--sans);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sb *, .sb *::before, .sb *::after { box-sizing: border-box; }

/* Resets locais. p, ul e a dentro de :where() para não matarem a margem e a
   cor declaradas por classe (ver gotcha do ONLIFE e do B. Unique). */
.sb h1, .sb h2, .sb h3 { margin: 0; color: inherit; font-weight: 300; }
.sb :where(p)  { margin: 0; }
.sb :where(ul) { margin: 0; padding: 0; list-style: none; }
.sb dl, .sb dd, .sb dt { margin: 0; }
.sb figure { margin: 0; }
.sb img { display: block; max-width: 100%; }
.sb :where(a) { color: var(--salvia); text-decoration: none; }
.sb :where(a:hover) { color: var(--texto); }
.sb ::selection { background: var(--salvia); color: var(--fundo); }

.sb-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.sb-sec { padding-block: clamp(72px, 9vw, 128px); }
.sb-sec--alt { background: var(--fundo-2); }

/* Canto chanfrado: superior direito e inferior esquerdo, como no book. */
.sb-corte {
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte),
                     100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
}

/* --- Tipos ---------------------------------------------------------------- */

.sb-olho {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 28px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--salvia);
}
/* O filete de 36x1px que abre cada rótulo — assinatura comum às LPs da casa. */
.sb-olho::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 1px;
  background: var(--salvia);
}
.sb-hero__end { color: var(--texto-2); }

/* Títulos do book: caixa-alta espaçada, fina, com a palavra-chave em negrito. */
.sb h1,
.sb h2 {
  text-transform: uppercase;
  letter-spacing: .08em;
  text-wrap: balance;
}
.sb h1 strong,
.sb h2 strong { display: block; font-weight: 700; color: var(--salvia); }

.sb h1 {
  max-width: 14ch;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.04;
}
.sb h2 {
  max-width: 20ch;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.14;
}
.sb h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.25; }

.sb-texto { margin-top: 24px; max-width: 58ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; color: var(--texto-2); text-wrap: pretty; }
.sb-texto + .sb-texto { margin-top: 18px; }

.sb-nota {
  margin-top: 28px;
  max-width: 100ch;
  font-size: 13px;
  line-height: 1.7;
  color: var(--texto-4);
}

.sb-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  margin-bottom: clamp(36px, 5vw, 56px);
  flex-wrap: wrap;
}
.sb-cab p { max-width: 50ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; color: var(--texto-2); }

.sb-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.sb-duas--centro { align-items: center; }

/* --- Botões --------------------------------------------------------------- */

.sb-btn {
  display: inline-block;
  padding: 16px 28px;
  border: 0;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sb .sb-btn--salvia       { background: var(--salvia);   color: var(--fundo); }
.sb .sb-btn--salvia:hover { background: var(--salvia-2); color: var(--fundo); }
.sb .sb-btn--escuro       { background: var(--tinta);    color: #fff; }
.sb .sb-btn--escuro:hover { background: var(--verde);    color: #fff; }
.sb .sb-btn--linha {
  border: 1px solid rgba(255, 255, 255, .38);
  background: transparent;
  color: var(--texto);
}
.sb .sb-btn--linha:hover { border-color: var(--salvia); color: var(--salvia); }
.sb-btn--bloco { display: block; width: 100%; }

@media (prefers-reduced-motion: reduce) { .sb-btn { transition: none; } }

/* --- Topo ----------------------------------------------------------------- */

.sb-topo {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 56px);
}
.sb-topo__marca img { width: auto; height: clamp(22px, 3vw, 30px); opacity: .8; }
.sb .sb-topo__cta { padding: 11px 20px; font-size: 12px; }

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

.sb-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: min(100vh, 940px);
  padding-block: 150px clamp(48px, 6vh, 84px);
  overflow: hidden;
}
.sb-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.sb-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(23, 43, 43, .70) 0%,
    rgba(23, 43, 43, .10) 32%,
    rgba(23, 43, 43, .78) 68%,
    #172B2B 100%);
}
.sb-hero__wrap { position: relative; }
.sb-hero__logo { width: clamp(150px, 15vw, 200px); height: auto; margin-bottom: clamp(18px, 3vw, 28px); }
.sb-hero__linha {
  margin-top: 24px;
  max-width: 56ch;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--texto-2);
}
.sb-hero__precos {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 40px);
}
.sb-preco__rot { margin-bottom: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); }
.sb-preco__valor { font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; line-height: 1; }
.sb-preco__obs { margin-top: 10px; font-size: 14px; color: var(--texto-3); }

/* --- Números -------------------------------------------------------------- */

.sb-numeros { border-block: 1px solid var(--fio); }
.sb-numeros__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(40px, 5vw, 64px);
}
.sb-numeros__n { font-size: clamp(30px, 3vw, 40px); font-weight: 300; line-height: 1; color: var(--salvia); }
.sb-numeros__l { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sb-numeros__d { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--texto-3); }

/* --- Figuras -------------------------------------------------------------- */

.sb-fig img { width: 100%; height: auto; object-fit: cover; }
.sb-fig figcaption { padding-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }

/* --- Plantas (faixa clara) ------------------------------------------------ */

.sb-claro { background: var(--claro); color: var(--tinta); }
.sb-claro .sb-olho { color: var(--tinta-2); }
.sb-claro .sb-olho::before { background: var(--tinta); }
.sb-claro h2 strong { color: var(--tinta); }
.sb-claro .sb-cab p { color: var(--tinta-2); }
.sb-claro .sb-nota { color: var(--tinta-3); }

/* 6 plantas: 3+3 no desktop, 2+2+2 no tablet, 1 por linha no celular. */
.sb-plantas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.sb-planta {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--fio-claro);
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte),
                     100% 100%, var(--corte) 100%, 0 calc(100% - var(--corte)));
}
.sb-planta__fig { padding: clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--fio-claro); }
/* Altura fixa + contain: as plantas têm proporções muito diferentes (as
   coberturas são largas, com os dois pavimentos lado a lado). */
.sb .sb-planta__fig img { width: 100%; height: clamp(220px, 22vw, 280px); object-fit: contain; }
.sb-planta__txt { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px); }
.sb-planta__area { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.sb-planta h3 { color: var(--tinta); }
.sb-planta__d { font-size: 15px; line-height: 1.6; color: var(--tinta-2); }
.sb .sb-planta__v { margin-top: auto; padding-top: 14px; font-size: 20px; font-weight: 600; color: var(--tinta); }
.sb-planta__v span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }

.sb-pedir {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: clamp(32px, 4vw, 48px);
}
.sb-pedir__s { font-size: 14px; color: var(--tinta-2); }
.sb-pedir__s--escuro { color: var(--texto-3); }

/* --- Interiores ----------------------------------------------------------- */

/* Mosaico de 12 colunas: cada linha tem uma foto larga (7) e uma alta (5).
   No celular vira uma coluna. */
.sb-interiores {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.sb-interiores .sb-fig:nth-child(4n + 1),
.sb-interiores .sb-fig:nth-child(4n + 4) { grid-column: span 7; }
.sb-interiores .sb-fig:nth-child(4n + 2),
.sb-interiores .sb-fig:nth-child(4n + 3) { grid-column: span 5; }
.sb .sb-interiores img { height: clamp(260px, 32vw, 460px); }

/* --- Faixa do decorado ---------------------------------------------------- */

.sb-faixa { position: relative; overflow: hidden; }
.sb-faixa__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-faixa__veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 43, 43, .94) 0%, rgba(23, 43, 43, .72) 55%, rgba(23, 43, 43, .35) 100%); }
.sb-faixa__wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px 48px;
  padding-block: clamp(64px, 8vw, 112px);
}
.sb-faixa__p { margin-top: 18px; max-width: 44ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: var(--texto-2); }

/* --- Lazer ---------------------------------------------------------------- */

/* 6 ambientes: 3+3, 2+2+2 ou 1 por linha — nunca meia linha vazia. */
.sb-lazer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.sb .sb-lazer img { height: clamp(240px, 26vw, 340px); }
.sb-lazer .sb-fig img {
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
}
.sb-lazer figcaption { letter-spacing: normal; text-transform: none; }
.sb-lazer__t { display: block; font-size: 18px; font-weight: 600; color: var(--texto); }
.sb-lazer__d { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--texto-3); }

.sb-mais { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--fio); }
.sb-mais__rot { margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--texto-3); }
.sb-chips-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-chips-lista li {
  padding: 9px 16px;
  border: 1px solid var(--fio-input);
  border-radius: 100px;
  font-size: 14px;
  color: var(--texto-2);
}

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

/* Mapa à esquerda, distâncias à direita; no celular o mapa vem primeiro. */
.sb-onde {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.sb-onde__mapa { position: relative; min-height: clamp(300px, 36vw, 460px); background: var(--verde); }
.sb-onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sb .sb-onde__cta { margin-top: 28px; }
.sb-dist__obs { display: block; margin-top: 4px; font-size: 13px; color: var(--texto-3); }
.sb-dist li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 18px;
  border-bottom: 1px solid var(--fio);
  font-size: 16px;
}
.sb-dist li:first-child { border-top: 1px solid var(--fio); }
.sb-dist__fio { flex: 1; height: 1px; background: var(--fio); }
.sb-dist__tempo { font-weight: 600; color: var(--salvia); white-space: nowrap; }
.sb-dist li { align-items: center; }

/* --- Condições ------------------------------------------------------------ */

.sb-pag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.sb-pag > div {
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--verde);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.sb-pag__valor { font-size: clamp(38px, 3.6vw, 52px); font-weight: 300; line-height: 1; color: var(--salvia); }
.sb-pag__rot { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sb-pag__d { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--texto-3); }

.sb-faixas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 0 clamp(32px, 5vw, 72px);
  margin-top: clamp(36px, 4vw, 56px);
}
.sb-faixa-preco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding-block: 18px;
  border-bottom: 1px solid var(--fio);
}
.sb-faixa-preco__t { display: block; font-size: 16px; font-weight: 500; }
.sb-faixa-preco__s { display: block; margin-top: 4px; font-size: 14px; color: var(--texto-3); }
.sb-faixa-preco__v { font-size: 17px; font-weight: 600; color: var(--salvia); white-space: nowrap; }

/* --- Promoção (bloco removível) ------------------------------------------ */

.sb-selo {
  align-self: center;
  padding: 10px 18px;
  border: 1px solid var(--salvia);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto);
}
.sb-selo strong { color: var(--salvia); }

.sb-promo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px clamp(32px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--salvia);
  color: var(--tinta);
}
.sb-promo__rot { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-2); }
.sb .sb-promo__un { margin-top: 10px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sb .sb-promo__tipo { margin-top: 6px; font-size: 15px; color: var(--tinta-2); }
.sb .sb-promo__vendido { margin-top: 18px; font-size: 15px; line-height: 1.6; }
.sb-promo__fluxo > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid rgba(23, 43, 43, .2);
}
.sb-promo__fluxo > div:first-child { border-top: 1px solid rgba(23, 43, 43, .2); }
.sb-promo__fluxo dt { font-size: 15px; color: var(--tinta-2); }
.sb-promo__fluxo dd { font-size: 16px; font-weight: 700; white-space: nowrap; }
.sb .sb-promo__cta { grid-column: 1 / -1; justify-self: start; background: var(--tinta); color: #fff; }
.sb .sb-promo__cta:hover { background: var(--verde); color: #fff; }

/* --- Atendimento ---------------------------------------------------------- */

.sb-ana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
/* `height: auto` obrigatório: o height do atributo venceria o aspect-ratio. */
.sb-ana__foto { max-width: 400px; }
.sb .sb-ana__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.sb-ana__intro { margin-bottom: 28px; }
.sb-razoes { display: grid; gap: 18px; margin-bottom: 34px; }
.sb-razoes li {
  max-width: 54ch;
  padding-left: 20px;
  border-left: 2px solid var(--salvia);
  font-size: 15px;
  line-height: 1.7;
  color: var(--texto-2);
}
.sb-assina { margin-top: 18px; font-size: 13px; color: var(--texto-4); }

/* --- Ficha técnica -------------------------------------------------------- */

.sb .sb-ficha__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.sb-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}
.sb-ficha > div { padding-block: 18px; border-bottom: 1px solid var(--fio); }
.sb-ficha dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--salvia); }
.sb-ficha dd { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--texto-2); }

/* --- Dúvidas -------------------------------------------------------------- */

.sb .sb-faq__titulo { margin-bottom: clamp(32px, 4vw, 52px); }
.sb-faq { max-width: 940px; border-top: 1px solid var(--fio); }
.sb-faq details { border-bottom: 1px solid var(--fio); }
.sb-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.sb-faq summary::-webkit-details-marker { display: none; }
.sb-faq summary:hover { color: var(--salvia); }
.sb-faq__sinal { font-size: 24px; line-height: 1; color: var(--salvia); }
.sb .sb-faq p { max-width: 72ch; padding-bottom: 22px; font-size: 15px; line-height: 1.75; color: var(--texto-3); }

/* --- Contato -------------------------------------------------------------- */

.sb-falar { position: relative; overflow: hidden; }
.sb-falar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.sb-falar__veu { position: absolute; inset: 0; background: linear-gradient(180deg, #172B2B 0%, rgba(23, 43, 43, .8) 50%, #172B2B 100%); }
.sb-falar__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(72px, 9vw, 128px);
}
.sb-falar__p { margin-block: 24px 32px; max-width: 46ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; color: var(--texto-2); }
.sb-ligar { margin-top: 22px; font-size: 15px; color: var(--texto-2); }
.sb-creci { margin-top: 18px; font-size: 13px; color: var(--texto-4); }

.sb-cartao { padding: clamp(26px, 3.4vw, 44px); background: var(--verde); }
.sb-chips__rot { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.sb-chips__rot span { display: block; margin-top: 4px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--texto-4); }
.sb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.sb-chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--fio-input);
  border-radius: 100px;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--texto-2);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sb-chip:hover { border-color: var(--salvia); color: var(--salvia); }
.sb-chip--on,
.sb-chip--on:hover { background: var(--salvia); border-color: var(--salvia); color: var(--fundo); }

@media (prefers-reduced-motion: reduce) { .sb-chip { transition: none; } }

.sb-form { display: grid; gap: 18px; }
.sb-campo { display: grid; gap: 8px; }
.sb-rot { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.sb-rot__op { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--texto-4); }
.sb-form input,
.sb-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--fio-input);
  border-radius: 4px;
  background: var(--fundo);
  font-family: var(--sans);
  font-size: 16px;   /* evita o zoom automático do iOS */
  color: var(--texto);
  outline: none;
  resize: vertical;
}
.sb-form input:focus,
.sb-form textarea:focus { border-color: var(--salvia); }
.sb-form input::placeholder { color: var(--texto-4); }
.sb-form__fine { font-size: 13px; color: var(--texto-4); }

.sb-obrigada__t { font-size: 26px; font-weight: 600; }
.sb-obrigada__p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--texto-2); }

/* --- Rodapé compartilhado ------------------------------------------------- */

.sb .rlp {
  --rlp-fundo: #112121;
  --rlp-texto: rgba(255, 255, 255, .64);
  --rlp-claro: #FFFFFF;
  --rlp-linha: rgba(255, 255, 255, .12);
  --rlp-fraco: rgba(255, 255, 255, .46);

  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom));
}
.sb .rlp__wordmark { max-width: 180px; }
/* O botão flutuante bateria na barra fixa — sobe ele. */
.sb .rlp-wa { bottom: calc(76px + env(safe-area-inset-bottom)); }

/* --- Barra fixa ----------------------------------------------------------- */

.sb-barra {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: rgba(17, 33, 33, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--fio);
  transform: translateY(105%);
  transition: transform .25s ease;
}
.sb-barra--on { transform: translateY(0); }
.sb-barra__wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.sb-barra__txt { min-width: 0; }
.sb-barra__valor,
.sb-barra__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-barra__valor { font-size: 15px; font-weight: 600; }
.sb-barra__sub { margin-top: 2px; font-size: 12px; color: var(--texto-3); }
.sb .sb-barra .sb-btn { padding: 14px 22px; font-size: 12px; letter-spacing: .12em; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .sb-barra { transition: none; } }

/* --- Lightbox ------------------------------------------------------------- */

.sb-lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(15, 29, 29, .95);
}
.sb-lb[hidden] { display: none; }
.sb-lb__palco { margin: 0; max-width: min(1400px, 92vw); text-align: center; }
.sb .sb-lb__img { width: auto; height: auto; max-width: 100%; max-height: 80vh; margin-inline: auto; object-fit: contain; border-radius: 0; clip-path: none; }
.sb-lb__legenda { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.sb-lb__fechar,
.sb-lb__nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.sb-lb__fechar { top: 16px; right: 20px; width: 48px; height: 48px; font-size: 40px; }
.sb-lb__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 72px; font-size: 56px; }
.sb-lb__nav--ant  { left: 8px; }
.sb-lb__nav--prox { right: 8px; }
.sb-lb__fechar:hover, .sb-lb__nav:hover { color: #B7CAA6; }

.sb-zoom { cursor: zoom-in; }

/* --- Celular -------------------------------------------------------------- */

@media (max-width: 760px) {
  /* O mosaico de 12 colunas não colapsa sozinho. */
  .sb-interiores { grid-template-columns: minmax(0, 1fr); }
  .sb-interiores .sb-fig:nth-child(n) { grid-column: auto; }
  .sb .sb-interiores img { height: clamp(240px, 70vw, 360px); }
  .sb h1 { letter-spacing: .05em; }
  .sb h2 { letter-spacing: .05em; }
}

/* --- Vídeo de apresentação ------------------------------------------------ */
/* O arquivo só baixa no clique (preload="none" no <video>): o que aparece é o
   poster, coberto por um <button> — assim também abre pelo teclado. Largura
   limitada a 980px porque o filme é 848x480; esticado até 1320px ficaria mole. */
.sb-player {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  overflow: hidden;
  background: #0E1C1C;
  /* Sem box-shadow: o clip-path do .sb-corte cortaria a sombra fora da caixa. */
}
.sb-player video {
  display: block;
  width: 100%;
  height: auto;          /* o atributo height do <video> não pode vencer a proporção */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0E1C1C;
}
.sb-player__capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--texto);
  /* Dois véus: o de baixo assenta o quadro, o do meio apaga o logo que o
     próprio poster traz atrás do botão — senão os dois textos se atropelam. */
  background:
    radial-gradient(60% 55% at 50% 48%, rgba(10, 20, 20, .58), rgba(10, 20, 20, 0) 70%),
    linear-gradient(to top, rgba(10, 20, 20, .60), rgba(10, 20, 20, .10));
  transition: opacity .25s;
}
.sb-player--on .sb-player__capa { opacity: 0; pointer-events: none; }
.sb-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(58px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--salvia);
  color: var(--fundo);
  transition: transform .2s, background .2s;
}
.sb-player__play svg { width: 40%; margin-left: 8%; }
.sb-player__capa:hover .sb-player__play,
.sb-player__capa:focus-visible .sb-player__play {
  transform: scale(1.06);
  background: var(--salvia-2);
}
.sb-player__rot {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.sb-player__tempo {
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--texto-3);
}
/* ============================================================================
   SYMPHONY — Marquês de Abrantes, 55 · Flamengo, Rio de Janeiro
   Wellness, Lifestyle + Residences · Realização BTG Pactual e New View
   Porte fiel do projeto React/Tailwind (Lovable) para CSS puro.
   Design system: madeira/nogueira escura + dourado + creme. Tema música/harmonia.
   Tudo escopado em .symphony (application.css usa require_tree).
   ========================================================================== */

.symphony {
  /* --- Paleta do book Symphony: madeira #2E1E12 + dourado #C9A227 + creme #F5EFE4 --- */
  --sy-wood-deep: #241711;
  --sy-wood: #2e1e12;
  --sy-wood-soft: #3d2817;
  --sy-cream: #f5efe4;
  --sy-cream-deep: #efe6d6;
  --sy-card: #fbf6ec;
  --sy-ink: #1c140d;
  --sy-gold: #c9a227;
  --sy-gold-2: #d8b44a;
  --sy-gold-soft: #e6cf8f;

  --sy-max: 72rem;
  --sy-pad: 1.5rem;
  --sy-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --sy-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sy-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --sy-font-label: "Jost", ui-sans-serif, system-ui, sans-serif;

  min-height: 100vh;
  background-color: var(--sy-cream);
  color: var(--sy-ink);
  font-family: var(--sy-font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .symphony { --sy-pad: 2rem; }
}

.symphony *,
.symphony *::before,
.symphony *::after { box-sizing: border-box; }

.symphony h1,
.symphony h2,
.symphony h3,
.symphony blockquote {
  font-family: var(--sy-font-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.12;
}

/* Rótulos em caixa-alta usam Jost (igual ao Lovable) */
.sy-label,
.sy-hero__eyebrow,
.sy-stats dd,
.sy-tipo__area,
.sy-oport__label,
.sy-oport__meta,
.sy-ficha__k,
.sy-ana__sign,
.sy-video__cap,
.sy-loc__cap,
.sy-btn { font-family: var(--sy-font-label); }
:where(.symphony) p { margin: 0; }
:where(.symphony) ul { margin: 0; padding: 0; list-style: none; }
:where(.symphony a) { color: inherit; text-decoration: none; }

/* Texto só para buscador e leitor de tela. Usado no H1 do hero, que na tela
   mostra apenas a marca SYMPHONY. `display:none` NÃO serve aqui: o leitor de
   tela pula e o Google desconsidera — o texto precisa continuar no fluxo,
   apenas recortado a 1px. */
.sy-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.symphony img,
.symphony video { display: block; max-width: 100%; }
/* Zera a margem padrão que o navegador dá em <figure> (40px laterais + 16px embaixo).
   Sem isso, todo card de foto e a imagem do casarão ficam estreitos e desalinhados.
   :where() tem especificidade ZERO — assim regras específicas (ex.: .sy-casarao__img
   margin-top) continuam valendo, em vez de serem atropeladas pelo reset. */
.symphony :where(figure) { margin: 0; }

/* ---------- Helpers ---------- */
.sy-wrap { max-width: var(--sy-max); margin-inline: auto; }
.sy-section { padding-block: 7rem; padding-inline: var(--sy-pad); }
@media (min-width: 640px) { .sy-section { padding-block: 9rem; } }
.sy-bg-cream { background: var(--sy-cream); }
.sy-bg-cream-deep { background: var(--sy-cream-deep); }
.sy-bg-wood { background: var(--sy-wood); }
.sy-bg-wood-grad { background: linear-gradient(160deg, var(--sy-wood) 0%, var(--sy-wood-deep) 100%); }

.sy-serif { font-family: var(--sy-font-serif); }
.sy-gold { color: var(--sy-gold); }
.sy-em { font-style: italic; color: var(--sy-gold); }

/* Rótulos em caixa-alta espaçada */
.sy-label {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sy-gold);
}
.sy-label--onwood { color: var(--sy-gold-2); }

.sy-hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sy-gold), transparent);
  border: 0;
}

/* ---------- Barras do logo (equalizador) ---------- */
.sy-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.5rem; }
.sy-bars span {
  width: 2px;
  background: var(--sy-gold);
  border-radius: 9999px;
  height: 40%;
}
.sy-bars span:nth-child(1) { height: 55%; }
.sy-bars span:nth-child(2) { height: 90%; }
.sy-bars span:nth-child(3) { height: 35%; }
.sy-bars span:nth-child(4) { height: 100%; }
.sy-bars span:nth-child(5) { height: 60%; }
.sy-bars span:nth-child(6) { height: 80%; }
.sy-bars span:nth-child(7) { height: 45%; }
.sy-bars span:nth-child(8) { height: 95%; }
.sy-bars span:nth-child(9) { height: 50%; }
.sy-bars--animated span { animation: sy-dance 0.8s ease-in-out infinite alternate; }
.sy-bars--animated span:nth-child(2) { animation-delay: 0.12s; }
.sy-bars--animated span:nth-child(3) { animation-delay: 0.24s; }
.sy-bars--animated span:nth-child(4) { animation-delay: 0.36s; }
.sy-bars--animated span:nth-child(5) { animation-delay: 0.1s; }
.sy-bars--animated span:nth-child(6) { animation-delay: 0.3s; }
.sy-bars--animated span:nth-child(7) { animation-delay: 0.18s; }
.sy-bars--animated span:nth-child(8) { animation-delay: 0.05s; }
.sy-bars--animated span:nth-child(9) { animation-delay: 0.26s; }
@keyframes sy-dance { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .sy-bars--animated span { animation: none; }
}

/* ---------- Botões / CTAs ---------- */
.sy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s var(--sy-ease), background 0.3s, color 0.3s, box-shadow 0.3s;
  border: 1px solid transparent;
}
.sy-btn--gold {
  background: linear-gradient(120deg, var(--sy-gold-2), var(--sy-gold));
  color: var(--sy-wood-deep);
  box-shadow: 0 10px 30px -12px rgba(201, 162, 39, 0.6);
}
.sy-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(201, 162, 39, 0.7); }
.sy-btn--outline-gold { border-color: rgba(216, 180, 74, 0.55); color: var(--sy-gold-2); }
.sy-btn--outline-gold:hover { background: rgba(216, 180, 74, 0.1); }
.sy-btn--outline-ink { border-color: rgba(46, 30, 18, 0.35); color: var(--sy-wood); }
.sy-btn--outline-ink:hover { background: rgba(46, 30, 18, 0.06); }

/* O WhatsApp flutuante do Symphony saiu daqui em 09/08/2026: agora vem do
   rodapé compartilhado (`.rlp-wa`, em rodape_lp.css), igual em todas as LPs.
   Ele tem rótulo escrito "Falar com a Ana", que converte melhor que um ícone
   solto. Estas regras foram apagadas, e não só desligadas, porque o CSS é um
   bundle global: regra morta aqui continuaria pesando em todas as páginas. */

/* ---------- Reveal on scroll ---------- */
.sy-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--sy-ease), transform 0.9s var(--sy-ease); }
.sy-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sy-reveal { opacity: 1; transform: none; }
}

/* ============================================================================
   1 — HERO
   ========================================================================== */
.sy-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: var(--sy-pad);
  background: var(--sy-wood-deep);
  overflow: hidden;
}
.sy-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.sy-hero__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 5%, rgba(36, 23, 17, 0.82) 78%);
}
.sy-hero__veil-b {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 14rem;
  background: linear-gradient(to top, var(--sy-wood-deep), transparent);
}
.sy-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-block: 7rem; }

/* Marca da corretora que assina — so aparece nas duplicatas (a da Ana Santos).
   Fica acima do wordmark do Symphony, em tamanho modesto: quem manda no hero e
   o nome do empreendimento, a corretora so assina. */
.sy-hero__corretora { width: clamp(150px, 20vw, 210px); height: auto; margin-bottom: 2.2rem; }

.sy-wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.sy-wordmark__bars { height: 1.6rem; }
.sy-wordmark__name {
  font-family: var(--sy-font-serif);
  font-weight: 400;
  letter-spacing: 0.42em;
  color: var(--sy-gold-2);
  line-height: 1;
}
.sy-wordmark--lg .sy-wordmark__name { font-size: clamp(2.6rem, 8vw, 5.5rem); padding-left: 0.42em; }
.sy-wordmark--sm .sy-wordmark__name { font-size: 1.6rem; padding-left: 0.42em; }

.sy-hero__tagline { margin-top: 2.4rem; font-family: var(--sy-font-serif); font-weight: 300; font-size: clamp(1.6rem, 4vw, 2.9rem); color: var(--sy-cream); }
.sy-hero__sub { margin-top: 1.2rem; max-width: 34rem; font-size: 1rem; line-height: 1.7; color: rgba(245, 239, 228, 0.72); }
.sy-hero__rule { width: 10rem; margin-block: 2.2rem; }
.sy-hero__harmonia { font-family: var(--sy-font-serif); font-style: italic; font-weight: 300; font-size: 1.25rem; color: var(--sy-gold-2); }
.sy-hero__eyebrow { margin-top: 1.5rem; max-width: 28rem; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245, 239, 228, 0.6); line-height: 1.8; }
.sy-hero__cta { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
@media (min-width: 640px) { .sy-hero__cta { flex-direction: row; } }
.sy-hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0.7; }

/* ============================================================================
   Cabeçalhos de seção
   ========================================================================== */
.sy-head { }
.sy-head--center { text-align: center; }
.sy-head--center .sy-label { justify-content: center; }
.sy-title { margin-top: 2rem; font-size: clamp(2rem, 5vw, 3.5rem); color: var(--sy-wood-deep); }
.sy-bg-wood .sy-title, .sy-bg-wood-grad .sy-title { color: var(--sy-cream); }
.sy-lead { margin-top: 2rem; max-width: 42rem; font-size: 1rem; line-height: 1.75; color: rgba(28, 20, 13, 0.7); }
.sy-bg-wood-grad .sy-lead { color: rgba(245, 239, 228, 0.78); }

/* ============================================================================
   2 — VÍDEO
   ========================================================================== */
.sy-video { max-width: 68rem; margin-inline: auto; }
.sy-video__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; box-shadow: 0 40px 80px -40px rgba(36, 23, 17, 0.5); }
.sy-video__frame video { width: 100%; height: 100%; object-fit: cover; }
.sy-video__cap { margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(28, 20, 13, 0.5); text-align: center; }

/* ============================================================================
   3 — CONCEITO
   ========================================================================== */
.sy-concept { max-width: 48rem; margin-inline: auto; text-align: center; }
.sy-concept__bars { margin-top: 2.5rem; display: flex; justify-content: center; }
.sy-concept__bars .sy-bars { height: 2.5rem; }
.symphony .sy-concept__quote { margin-top: 3.5rem; font-family: var(--sy-font-serif); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--sy-wood); }
.sy-concept__divider { margin-top: 3.5rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.sy-concept__divider .sy-hairline { width: 4rem; }
@media (min-width: 640px) { .sy-concept__divider .sy-hairline { width: 8rem; } }
.sy-concept__divider .sy-bars { height: 3rem; }

/* ============================================================================
   4 — EMPREENDIMENTO
   ========================================================================== */
.sy-split { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 900px) { .sy-split { grid-template-columns: 1fr 1fr; } }
.sy-fig { position: relative; }
.sy-fig img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; box-shadow: 0 40px 80px -40px rgba(36, 23, 17, 0.45); }
.sy-fig__corner { position: absolute; bottom: -1rem; left: -1rem; width: 6rem; height: 6rem; border-bottom: 1px solid rgba(216, 180, 74, 0.6); border-left: 1px solid rgba(216, 180, 74, 0.6); }
@media (max-width: 640px) { .sy-fig__corner { display: none; } }

.sy-stats { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; border-top: 1px solid rgba(46, 30, 18, 0.15); padding-top: 2.5rem; }
@media (min-width: 640px) { .sy-stats { grid-template-columns: repeat(3, 1fr); } }
.sy-stats dt { font-family: var(--sy-font-serif); font-size: 1.85rem; color: var(--sy-gold); }
.sy-stats dd { margin-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(46, 30, 18, 0.55); }

/* ============================================================================
   5 — CASARÃO
   ========================================================================== */
.sy-casarao__title { max-width: 40rem; }
.sy-casarao__img { margin-top: 5rem; }
.sy-casarao__img img { width: 100%; height: 42vh; object-fit: cover; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
@media (min-width: 640px) { .sy-casarao__img img { height: 68vh; } }
/* Prefixado com .symphony p/ vencer o reset ".symphony blockquote{margin:0}" (senão o respiro some e o texto cola na foto). */
.symphony .sy-casarao__quote { margin-top: 4rem; text-align: center; font-family: var(--sy-font-serif); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.4rem); color: var(--sy-gold-2); }
.symphony .sy-casarao__cols { margin-top: 4rem; }
.sy-casarao__cols { margin-top: 3.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .sy-casarao__cols { grid-template-columns: 1fr 1fr; } }
.sy-casarao__cols p { font-size: 1.05rem; line-height: 1.75; color: rgba(245, 239, 228, 0.75); }

/* ============================================================================
   Cards de foto (lazer / wellness / decorados)
   ========================================================================== */
.sy-grid { margin-top: 3.5rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sy-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .sy-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sy-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .sy-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sy-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.sy-card { display: flex; flex-direction: column; height: 100%; background: var(--sy-card); }
/* toda foto ampliável mostra a lupa, esteja em galeria ou avulsa */
.symphony [data-lightbox] { cursor: zoom-in; }
.sy-card__img { position: relative; overflow: hidden; height: 18rem; cursor: zoom-in; }
@media (min-width: 640px) { .sy-card__img { height: 20rem; } }
.sy-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--sy-ease); }
.sy-card:hover .sy-card__img img { transform: scale(1.05); }
.sy-card__body { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; }
.sy-card__body .sy-bars { height: 0.85rem; }
.sy-card__title { margin-top: 0.25rem; font-family: var(--sy-font-serif); font-size: 1.5rem; color: var(--sy-wood-deep); }
.sy-card__legend { font-size: 0.9rem; color: rgba(28, 20, 13, 0.6); }
.sy-card--wide { grid-column: 1 / -1; }
@media (min-width: 1000px) { .sy-card--wide { grid-column: span 2; } }

/* ============================================================================
   8 — Infraestrutura
   ========================================================================== */
.sy-infra { margin-top: 2rem; display: grid; gap: 1px; background: rgba(46, 30, 18, 0.1); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sy-infra { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sy-infra { grid-template-columns: repeat(3, 1fr); } }
.sy-infra li { display: flex; align-items: center; gap: 1rem; background: var(--sy-cream); padding: 1.5rem; font-size: 0.9rem; color: rgba(28, 20, 13, 0.75); }
.sy-infra li .sy-bars { height: 0.85rem; flex-shrink: 0; }

/* ============================================================================
   9 — Tipologias
   ========================================================================== */
.sy-tipos { margin-top: 4rem; display: grid; gap: 1px; background: rgba(46, 30, 18, 0.1); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sy-tipos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sy-tipos { grid-template-columns: repeat(4, 1fr); } }
.sy-tipo { display: flex; flex-direction: column; justify-content: space-between; background: var(--sy-cream); padding: 2.5rem; transition: background 0.5s; }
.sy-tipo:hover { background: var(--sy-card); }
.sy-tipo .sy-bars { height: 1.5rem; }
.sy-tipo__name { margin-top: 2rem; font-family: var(--sy-font-serif); font-size: 1.85rem; color: var(--sy-wood-deep); }
.sy-tipo__area { margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sy-gold); }
.sy-tipo__note { margin-top: 2.5rem; font-size: 0.9rem; line-height: 1.7; color: rgba(28, 20, 13, 0.6); }

/* ============================================================================
   10 — Oportunidades
   ========================================================================== */
.sy-oport { margin-top: 3.5rem; display: grid; gap: 1px; background: rgba(46, 30, 18, 0.1); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .sy-oport { grid-template-columns: repeat(3, 1fr); } }
.sy-oport__card { display: flex; flex-direction: column; justify-content: space-between; background: var(--sy-card); padding: 2.5rem; }
.sy-oport__card .sy-bars { height: 1.25rem; }
.sy-oport__tipo { margin-top: 2rem; font-family: var(--sy-font-serif); font-size: 1.85rem; color: var(--sy-wood-deep); }
.sy-oport__meta { margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(46, 30, 18, 0.55); }
.sy-oport__foot { margin-top: 2.5rem; border-top: 1px solid rgba(46, 30, 18, 0.15); padding-top: 2rem; }
.sy-oport__label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sy-gold); }
.sy-oport__val { margin-top: 0.75rem; font-family: var(--sy-font-serif); font-size: 2.25rem; color: var(--sy-wood-deep); }
.sy-oport__fine { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.6; color: rgba(28, 20, 13, 0.55); }

/* ============================================================================
   11 — Localização (empilhado)
   ========================================================================== */
.sy-loc__callout { margin-top: 2rem; max-width: 42rem; border-left: 3px solid var(--sy-gold); background: var(--sy-card); padding: 1.5rem 1.75rem; }
.sy-loc__callout strong { display: block; font-family: var(--sy-font-serif); font-weight: 500; font-size: 1.25rem; color: var(--sy-wood-deep); }
.sy-loc__callout span { display: block; margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.6; color: rgba(28, 20, 13, 0.65); }
.sy-loc__fig { margin-top: 3rem; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.sy-loc__fig img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 40px 80px -40px rgba(36, 23, 17, 0.45); }
.sy-loc__cap { position: absolute; bottom: 0; left: 0; background: rgba(36, 23, 17, 0.9); color: rgba(245, 239, 228, 0.85); padding: 0.9rem 1.5rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.sy-loc__list { margin-top: 3rem; display: grid; gap: 1px; background: rgba(46, 30, 18, 0.1); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sy-loc__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sy-loc__list { grid-template-columns: repeat(3, 1fr); } }
.sy-loc__list li { background: var(--sy-cream); padding: 1.1rem 1.25rem; font-size: 0.9rem; color: rgba(28, 20, 13, 0.75); }
.sy-loc__list li.is-hl { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--sy-gold); }
.sy-loc__list li.is-hl .sy-bars { height: 0.8rem; flex-shrink: 0; }

/* ============================================================================
   12 — Ficha técnica
   ========================================================================== */
.sy-ficha { max-width: 56rem; margin-inline: auto; }
.sy-ficha__list { margin-top: 3rem; border-top: 1px solid rgba(46, 30, 18, 0.15); border-bottom: 1px solid rgba(46, 30, 18, 0.15); }
.sy-ficha__row { display: grid; gap: 0.5rem; padding-block: 1.5rem; border-top: 1px solid rgba(46, 30, 18, 0.12); }
.sy-ficha__row:first-child { border-top: 0; }
@media (min-width: 640px) { .sy-ficha__row { grid-template-columns: 180px 1fr; gap: 2rem; } }
.sy-ficha__k { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(46, 30, 18, 0.5); }
.sy-ficha__v { color: rgba(28, 20, 13, 0.8); }

/* ============================================================================
   13 — Por que falar com a Ana
   ========================================================================== */
.sy-ana { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 900px) { .sy-ana { grid-template-columns: 0.85fr 1fr; } }
.sy-ana__fig { position: relative; }
.sy-ana__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; box-shadow: 0 40px 80px -40px rgba(36, 23, 17, 0.45); }
.sy-ana__reasons { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sy-ana__reasons li { display: flex; gap: 1rem; }
.sy-ana__dot { margin-top: 0.55rem; width: 0.6rem; height: 0.6rem; flex-shrink: 0; border-radius: 50%; background: linear-gradient(120deg, var(--sy-gold-2), var(--sy-gold)); }
.sy-ana__reasons p { line-height: 1.7; color: rgba(28, 20, 13, 0.75); }
.sy-ana__sign { margin-top: 2.5rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(46, 30, 18, 0.55); }

/* ============================================================================
   FAQ
   ========================================================================== */
.sy-faq { max-width: 48rem; margin-inline: auto; }
.sy-faq__list { margin-top: 3.5rem; }
.sy-faq__item { border-bottom: 1px solid rgba(36, 23, 17, 0.12); }
.sy-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sy-font-serif);
  font-size: 1.1rem;
  color: var(--sy-wood-deep);
}
@media (min-width: 640px) { .sy-faq__q { font-size: 1.25rem; } }
.sy-faq__q svg { width: 1.1rem; height: 1.1rem; stroke: var(--sy-gold); stroke-width: 2; fill: none; flex-shrink: 0; transition: transform 0.35s var(--sy-ease); }
.sy-faq__item.is-open .sy-faq__q svg { transform: rotate(180deg); }
.sy-faq__a { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--sy-ease); }
.sy-faq__a > div { padding-bottom: 1.35rem; font-size: 1rem; line-height: 1.7; color: rgba(28, 20, 13, 0.75); }
.sy-faq__cta { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
@media (min-width: 640px) { .sy-faq__cta { flex-direction: row; } }
.sy-faq__cta span { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(28, 20, 13, 0.6); }

/* ============================================================================
   14 — CTA final + formulário
   ========================================================================== */
.sy-final { display: grid; gap: 4rem; align-items: center; max-width: 60rem; margin-inline: auto; }
@media (min-width: 900px) { .sy-final { grid-template-columns: 1fr 1fr; } }
.sy-form { width: 100%; max-width: 26rem; background: var(--sy-card); padding: 2rem; box-shadow: 0 40px 80px -50px rgba(36, 23, 17, 0.4); }
.sy-form h3 { font-family: var(--sy-font-serif); font-size: 1.5rem; color: var(--sy-wood-deep); }
.sy-form label { display: block; margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(46, 30, 18, 0.6); }
.sy-form input, .sy-form textarea {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(46, 30, 18, 0.2);
  background: #fff;
  font: inherit;
  color: var(--sy-ink);
  border-radius: 2px;
}
.sy-form input:focus, .sy-form textarea:focus { outline: 2px solid var(--sy-gold); border-color: transparent; }
.sy-form .sy-btn { width: 100%; margin-top: 1.5rem; }
.sy-form__fine { margin-top: 1rem; font-size: 0.72rem; color: rgba(28, 20, 13, 0.5); text-align: center; }

/* ============================================================================
   15 — Rodapé padrão (peça compartilhada `.rlp`)
   O rodapé próprio do Symphony foi trocado pelo de todas as LPs em 09/08/2026.
   Aqui ficam só as cores: a estrutura vive em rodape_lp.css e vale para as duas
   marcas. Trocar cor é seguro; mexer na estrutura afeta o site inteiro.
   ========================================================================== */
.symphony .rlp {
  --rlp-fundo: var(--sy-wood);
  --rlp-texto: rgba(245, 239, 228, 0.78);
  --rlp-claro: var(--sy-cream);
  --rlp-linha: rgba(245, 239, 228, 0.16);
  --rlp-fraco: rgba(245, 239, 228, 0.5);
}
/* O rótulo das colunas usa o dourado do Symphony, como era no rodapé antigo. */
.symphony .rlp__col h3 { color: var(--sy-gold-2); font-family: var(--sy-font-label); }
.symphony .rlp__links a:hover { color: var(--sy-gold-2); }
/* O Symphony não tem arquivo de logo próprio: o nome entra como texto. A serifa
   dourada mantém a cara da marca dentro da estrutura padrão. */
.symphony .rlp__nome {
  font-family: var(--sy-font-serif);
  font-weight: 400;
  letter-spacing: 0.3em;
  color: var(--sy-gold-2);
}

/* ============================================================================
   Lightbox
   ========================================================================== */
.sy-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 12, 8, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.sy-lightbox.is-open { display: flex; }
.sy-lightbox img { max-width: 95vw; max-height: 84vh; object-fit: contain; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8); }
.sy-lightbox__close { position: absolute; top: 1.25rem; right: 1.5rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(245, 239, 228, 0.12); border: 0; color: var(--sy-cream); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.sy-lightbox__close:hover { background: rgba(245, 239, 228, 0.22); }
/* Navegação da galeria ampliada (setas + legenda/contador) */
.sy-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; background: rgba(245, 239, 228, 0.12); border: 0; color: var(--sy-cream); cursor: pointer; font-size: 1.85rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .25s var(--sy-ease); }
.sy-lightbox__nav:hover { background: rgba(245, 239, 228, 0.24); }
.sy-lightbox__nav[hidden] { display: none; }
.sy-lightbox__nav--prev { left: max(0.6rem, 2vw); }
.sy-lightbox__nav--next { right: max(0.6rem, 2vw); }
.sy-lightbox__cap { position: absolute; left: 50%; bottom: 1.35rem; transform: translateX(-50%); margin: 0; max-width: min(86vw, 40rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(20, 12, 8, 0.55); color: var(--sy-cream); font-family: var(--sy-font-label); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 1.05rem; border-radius: 100px; }
.sy-lightbox__cap[hidden] { display: none; }
.sy-lightbox__cap b { color: var(--sy-gold); font-weight: 400; }
@media (max-width: 640px) {
  .sy-lightbox__nav { width: 2.6rem; height: 2.6rem; font-size: 1.5rem; }
  .sy-lightbox img { max-height: 76vh; }
}
/* Grupo Ana Cintra — home / landing
 * Design system: docs/apple-design-system.md (canvas branco, ink #080808,
 * acentos cromáticos como fills de card, Inter 400/500/600, radius 4/8px). */

:root {
  --ink: #080808;
  --ink-strong: #222222;
  --body: #363636;
  --body-mid: #5a5a5a;
  --mute: #898989;
  --canvas: #ffffff;
  --hairline: #d8d8d8;

  --accent-purple: #7a3dff;
  --accent-pink: #ed52cb;
  --accent-blue: #3b89ff;
  --accent-blue-info: #146ef5;
  --accent-orange: #ff6b00;
  --accent-green: #00d722;

  --rounded-sm: 4px;
  --rounded-md: 8px;

  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  --shadow-layered: 0 84px 24px rgba(0, 0, 0, 0), 0 54px 22px rgba(0, 0, 0, 0.01),
    0 30px 18px rgba(0, 0, 0, 0.04), 0 13px 13px rgba(0, 0, 0, 0.08),
    0 3px 7px rgba(0, 0, 0, 0.09);

  --font-sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
}

/* ---- Typography roles ---- */

.eyebrow {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--body-mid);
  margin-bottom: var(--space-lg);
}

.eyebrow--light { color: rgba(255, 255, 255, 0.7); }

.section-title {
  font-size: clamp(32px, 4.5vw, 44.8px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.4px;
  margin-bottom: var(--space-lg);
}

.section-lead {
  font-size: 18px;
  color: var(--body-mid);
  max-width: 640px;
  margin-bottom: calc(var(--space-3xl) + var(--space-lg));
}

/* ---- Buttons ---- */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 25.6px;
  letter-spacing: -0.16px;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--rounded-sm);
  text-decoration: none;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.btn--primary {
  background: var(--ink);
  color: #ffffff;
}

.btn--primary:hover { opacity: 0.85; }

.btn--secondary {
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline);
}

.btn--secondary:hover { border-color: var(--ink); }

.btn--inverted {
  background: #ffffff;
  color: var(--ink);
}

.btn--inverted:hover { opacity: 0.9; }

.btn--lg { padding: var(--space-lg) var(--space-2xl); }

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

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.site-nav__brand {
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__brand strong { font-weight: 600; }

.site-nav__links {
  display: flex;
  gap: var(--space-2xl);
  margin-left: auto;
}

.site-nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.site-nav__links a:hover { color: var(--body-mid); }

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

.hero {
  position: relative;
  padding: calc(var(--space-3xl) * 4) 0 calc(var(--space-3xl) * 3.5);
  background-image:
    linear-gradient(180deg, rgba(8, 8, 8, 0.5) 0%, rgba(8, 8, 8, 0.66) 100%),
    url(/img/ilha-pura-aereo.jpg);
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}

.hero .eyebrow { color: rgba(255, 255, 255, 0.82); }

.hero__title {
  color: #ffffff;
  font-size: clamp(44px, 7.5vw, 80px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.8px;
  max-width: 900px;
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.28);
}

.hero__lead {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 660px;
  margin-top: var(--space-2xl);
}

/* CTAs sobre a foto: primário fica ink; secundário vira contorno branco */
.hero .btn--secondary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}

.hero .btn--secondary:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
}

.hero__reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-reveal 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__reveal:nth-child(2) { animation-delay: 90ms; }
.hero__reveal:nth-child(3) { animation-delay: 180ms; }
.hero__reveal:nth-child(4) { animation-delay: 270ms; }

@keyframes hero-reveal {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__reveal { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- Stats band ---- */

.stats {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-3xl) 0;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3xl);
}

.stats__item { display: flex; flex-direction: column; gap: 4px; }

.stats__value {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.stats__label { font-size: 14px; color: var(--body-mid); }

/* ---- Empreendimentos ---- */

.devs { padding: calc(var(--space-3xl) * 2.5) 0; }

/* Lançamentos fora do Ilha Pura: segue a seção anterior, sem dobrar o respiro */
.devs--outros { padding-top: 0; }

.dev-card__media { display: block; }

.devs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3xl);
}

.dev-card {
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-md);
  overflow: hidden;
  scroll-margin-top: 96px;
}

.dev-card--featured {
  grid-column: 1 / -1;
  box-shadow: var(--shadow-layered);
}

.dev-card__media img {
  width: 100%;
  aspect-ratio: 1024 / 424;
  object-fit: cover;
}

.dev-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-3xl);
  flex: 1;
}

.dev-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.badge {
  display: inline-block;
  font-size: 12.8px;
  font-weight: 550;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: var(--rounded-sm);
  color: #ffffff;
}

.badge--building { background: var(--accent-blue-info); }
.badge--ready { background: var(--accent-green); color: var(--ink); }

.dev-card__delivery {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mute);
}

.dev-card__name {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

.dev-card--featured .dev-card__name { font-size: 32px; }

.dev-card__desc { color: var(--body-mid); }

.dev-card__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.dev-card__specs li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
  padding-left: var(--space-xl);
  position: relative;
}

.dev-card__specs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--ink);
}

.dev-card__actions { margin-top: auto; padding-top: var(--space-sm); }

/* ---- Por que Ilha Pura ---- */

.why { padding: 0 0 calc(var(--space-3xl) * 2.5); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-xl);
}

.why-card {
  border-radius: var(--rounded-md);
  padding: var(--space-3xl);
  color: #ffffff;
  grid-column: span 2;
}

.why-card:nth-child(4) { grid-column: 1 / span 3; }
.why-card:nth-child(5) { grid-column: 4 / span 3; }

.why-card h3 {
  color: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

.why-card p { font-size: 14px; line-height: 1.6; opacity: 0.92; }

.why-card--blue { background: var(--accent-blue); }
.why-card--orange { background: var(--accent-orange); }
.why-card--green { background: var(--accent-green); color: var(--ink); }
.why-card--purple { background: var(--accent-purple); }
.why-card--pink { background: var(--accent-pink); }

/* ---- Sobre (banda escura) ---- */

.about {
  background: var(--ink);
  padding: calc(var(--space-3xl) * 2.5) 0;
}

.about__inner { max-width: 800px; }

.about__title {
  color: #ffffff;
  font-size: clamp(32px, 4.5vw, 44.8px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.4px;
  margin-bottom: var(--space-xl);
}

.about__text {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  margin-bottom: var(--space-3xl);
}

/* ---- Footer ---- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: var(--space-3xl) 0;
  font-size: 14px;
  color: var(--body-mid);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3xl);
}

.site-footer__brand {
  font-size: 18px;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}

.site-footer__brand strong { font-weight: 600; }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.site-footer__contact a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.site-footer__contact a:hover { color: var(--body-mid); }

.site-footer__legal {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  font-size: 12px;
  color: var(--mute);
}

/* ---- Responsivo ---- */

@media (max-width: 991px) {
  .devs__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .why-card,
  .why-card:nth-child(4),
  .why-card:nth-child(5) { grid-column: span 1; }
  .why-card:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 767px) {
  .container { padding-left: var(--space-xl); padding-right: var(--space-xl); }
  .site-nav__links { display: none; }
  .site-nav__cta { margin-left: auto; }
  .hero { padding: calc(var(--space-3xl) * 1.5) 0 calc(var(--space-3xl) * 1.5); }
  .why__grid { grid-template-columns: 1fr; }
  .why-card:nth-child(5) { grid-column: span 1; }
  .dev-card__body { padding: var(--space-2xl); }
  .site-footer__inner { flex-direction: column; }
}
/* ============================================================================
   ASTRA — Ilha Pura · Barra da Tijuca, RJ
   Design system do empreendimento: papel branco/off-white, tinta teal-petróleo
   #265560 (cor da marca e do lobby), madeira quente e verde das plantas como
   apoio. Tipografia fina e geométrica (Jost display + Inter corpo), muito
   respiro — minimalista, alto padrão, celeste (Astra = estrelas; blocos
   Luna, Lyra, Selene, Gaia). Tudo escopado em .astra (application.css usa
   require_tree, então o namespace é obrigatório).
   ========================================================================== */

.astra {
  --as-paper: #FCFCFA;
  --as-surface: #F4F4EF;
  --as-surface-2: #EFEFE9;
  --as-ink: #16242B;
  --as-graphite: #35474E;
  --as-graphite-soft: #4E5F66;
  --as-teal: #265560;
  --as-teal-deep: #17383F;
  --as-teal-soft: #3C737F;
  --as-wood: #B0824F;
  --as-muted-fg: #667279;
  --as-border: #E5E4DC;
  --as-border-soft: #EDECE5;

  --as-bg: var(--as-paper);
  --as-fg: var(--as-ink);

  --as-font-display: "Jost", ui-sans-serif, system-ui, sans-serif;
  --as-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --as-max: 80rem;
  --as-pad: 1.25rem;

  min-height: 100vh;
  background-color: var(--as-bg);
  color: var(--as-fg);
  font-family: var(--as-font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

@media (min-width: 768px) { .astra { --as-pad: 2rem; } }

.astra *,
.astra *::before,
.astra *::after { box-sizing: border-box; }

.astra h1,
.astra h2,
.astra h3,
.astra h4 {
  font-family: var(--as-font-display);
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 400;
}
/* :where() zera a especificidade: o reset continua como "padrão", mas qualquer
   regra de componente (.as-*__lead, .as-*__checks, etc.) que defina margin vence.
   Sem isso, este reset zerava os espaçamentos das listas/parágrafos. */
:where(.astra) p { margin: 0; }
:where(.astra) ul { margin: 0; padding: 0; list-style: none; }
.astra img,
.astra video { display: block; max-width: 100%; }
:where(.astra a) { color: inherit; text-decoration: none; }
.astra a { text-decoration: none; }

.astra svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.as-shell {
  max-width: var(--as-max);
  margin: 0 auto;
  padding-left: var(--as-pad);
  padding-right: var(--as-pad);
}

/* Eyebrow em teal, fininho e espaçado */
.as-eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--as-teal);
}
.as-eyebrow .as-slash { color: color-mix(in oklab, var(--as-teal) 45%, transparent); }

.as-h2 {
  margin-top: 1rem;
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--as-fg);
}
.as-h2 em { font-style: normal; color: var(--as-teal); }
@media (min-width: 768px) { .as-h2 { font-size: 3rem; } }

/* ============================ NAV (barra clara) ============================ */
.as-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
}
/* Fica opaca ao rolar (classe adicionada via JS) */
.as-nav.is-stuck {
  background: color-mix(in oklab, var(--as-paper) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--as-border);
}
.as-nav__inner {
  display: flex;
  height: 4.5rem;
  align-items: center;
  justify-content: space-between;
}
.as-nav__brand { display: flex; align-items: center; }
/* No topo (sobre o hero escuro) a logo é branca; ao grudar, vira teal */
.as-nav__brand img { height: 1.5rem; width: auto; transition: opacity .3s; }
.as-nav__brand .as-logo-dark { display: none; }
.as-nav.is-stuck .as-nav__brand .as-logo-light { display: none; }
.as-nav.is-stuck .as-nav__brand .as-logo-dark { display: block; }

.as-nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.85);
  transition: color .3s;
}
.as-nav.is-stuck .as-nav__links { color: var(--as-graphite-soft); }
.as-nav__links a { transition: color .2s; }
.as-nav__links a:hover { color: var(--as-teal-soft); }
.as-nav.is-stuck .as-nav__links a:hover { color: var(--as-teal); }
@media (min-width: 900px) { .as-nav__links { display: flex; } }

.as-nav__cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #fff;
  transition: background-color .2s, color .2s, border-color .2s;
}
.as-nav__cta:hover { background: #fff; color: var(--as-teal); border-color: #fff; }
.as-nav.is-stuck .as-nav__cta { border-color: var(--as-teal); color: var(--as-teal); }
.as-nav.is-stuck .as-nav__cta:hover { background: var(--as-teal); color: #fff; }
@media (min-width: 640px) { .as-nav__cta { display: inline-flex; } }

/* ============================ HERO ============================ */
.as-hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--as-teal-deep);
}
.as-hero__media {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  animation: astra-zoom 1800ms ease-out both;
}
.as-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,28,33,.55), rgba(10,28,33,.30) 45%, rgba(10,28,33,.85));
}
.as-hero__scrim--side {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(10,28,33,.5), transparent 60%);
}
.as-hero__inner {
  position: relative;
  z-index: 10;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 9rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) { .as-hero__inner { padding-bottom: 6rem; } }

.as-hero__anim { animation: astra-fade-up 900ms ease-out both; }

.as-hero__place {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  border-left: 2px solid var(--as-teal-soft);
  padding-left: 0.75rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,.85);
}
.as-hero__place .as-sep { color: rgba(255,255,255,.4); }

.as-hero__title {
  max-width: 60rem;
  font-family: var(--as-font-display);
  font-size: 2.375rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
}
.as-hero__title em { font-style: normal; font-weight: 400; color: #fff; }
@media (min-width: 768px) { .as-hero__title { font-size: 3.5rem; } }
@media (min-width: 1024px) { .as-hero__title { font-size: 4.25rem; } }

.as-hero__lead {
  margin-top: 1.75rem;
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}
@media (min-width: 768px) { .as-hero__lead { font-size: 1.125rem; } }

/* Destaques comerciais do hero */
.as-hero__facts {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  max-width: 46rem;
}
.as-hero__fact { border-left: 1px solid rgba(255,255,255,.28); padding-left: 1rem; }
.as-hero__fact-k {
  display: block;
  font-family: var(--as-font-display);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}
.as-hero__fact-v {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,.6);
}

.as-hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
@media (min-width: 640px) { .as-hero__actions { flex-direction: row; align-items: center; } }

/* ============================ BOTÕES ============================ */
.as-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 999px;
  padding: 0.9375rem 1.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: background-color .2s, color .2s, filter .2s, transform .2s, border-color .2s;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  text-align: center;
}
.as-btn--accent {
  background: var(--as-teal);
  color: #fff;
  box-shadow: 0 18px 50px -18px rgba(38,85,96,.7);
}
.as-btn--accent:hover { background: var(--as-teal-deep); }
.as-btn--accent .as-arrow { transition: transform .2s; }
.as-btn--accent:hover .as-arrow { transform: translateX(4px); }

.as-btn--ghost {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06);
  color: #fff;
  gap: 0.5rem;
}
.as-btn--ghost:hover { background: rgba(255,255,255,.14); }

.as-btn--outline {
  border-color: var(--as-teal);
  color: var(--as-teal);
  background: transparent;
}
.as-btn--outline:hover { background: var(--as-teal); color: #fff; }

/* ============================ SEÇÕES ============================ */
.as-section { border-bottom: 1px solid var(--as-border); }
.as-section__pad { padding-top: 5.5rem; padding-bottom: 5.5rem; }
@media (min-width: 768px) { .as-section__pad { padding-top: 7.5rem; padding-bottom: 7.5rem; } }

.as-grid12 { display: grid; gap: 2.5rem; }
@media (min-width: 768px) {
  .as-grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; }
  .as-col4 { grid-column: span 4; }
  .as-col5 { grid-column: span 5; }
  .as-col6 { grid-column: span 6; }
  .as-col7 { grid-column: span 7; }
  .as-col8 { grid-column: span 8; }
}

/* ============================ CONCEITO / PILARES ============================ */
.as-pilares__text { margin-top: 0.5rem; font-size: 1rem; line-height: 1.6; color: var(--as-muted-fg); }
@media (min-width: 768px) { .as-pilares__text { font-size: 1.125rem; } }
.as-pilares__text + .as-pilares__text { margin-top: 1.25rem; }

.as-nums {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 768px) { .as-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.as-num { border-left: 1px solid var(--as-border); padding-left: 1rem; }
.as-num__k { font-family: var(--as-font-display); font-size: 1.5rem; font-weight: 400; color: var(--as-fg); }
.as-num__v { margin-top: 0.375rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--as-muted-fg); }

/* ============================ GALERIAS ============================ */
.as-galerias { background: var(--as-surface); }
.as-galerias__head {
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .as-galerias__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.as-galerias__note { max-width: 28rem; font-size: 0.875rem; line-height: 1.6; color: var(--as-muted-fg); }

.as-galeria + .as-galeria {
  margin-top: 5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--as-border);
}
@media (min-width: 768px) {
  .as-galeria + .as-galeria { margin-top: 6rem; padding-top: 4rem; }
}

.as-galeria__head {
  margin-bottom: 1.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.as-galeria__title {
  font-family: var(--as-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--as-fg);
}
@media (min-width: 768px) { .as-galeria__title { font-size: 1.5rem; } }
.as-galeria__title::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 0.875rem;
  background: var(--as-teal);
}
.as-galeria__count { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--as-muted-fg); white-space: nowrap; }

.as-galeria__nav { display: flex; gap: 0.375rem; }
.as-galeria__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--as-border);
  border-radius: 9999px;
  background: var(--as-bg);
  color: var(--as-fg);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.as-galeria__arrow:hover { background: var(--as-teal); border-color: var(--as-teal); color: #fff; }
.as-galeria__arrow[disabled] { opacity: 0.3; cursor: default; }
.as-galeria__arrow[disabled]:hover { background: var(--as-bg); border-color: var(--as-border); color: var(--as-fg); }
.as-galeria__arrow svg { width: 1.125rem; height: 1.125rem; }

.as-galeria__grid {
  --as-gap: 0.75rem;
  --as-item: 78%;
  display: flex;
  gap: var(--as-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-anchor: none;
  overscroll-behavior-x: contain;
  padding-bottom: 0.25rem;
}
.as-galeria__grid::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .as-galeria__grid { --as-item: calc((100% - var(--as-gap)) / 2); }
}
@media (min-width: 768px) {
  .as-galeria__grid { --as-gap: 1rem; --as-item: calc((100% - 2 * var(--as-gap)) / 3); }
}

.as-galeria--r43 { --as-tile-r: 1.3333; }
.as-galeria--r32 { --as-tile-r: 1.5; }
.as-galeria--r34 { --as-tile-r: 0.75; }

.as-tile {
  position: relative;
  overflow: hidden;
  background: var(--as-surface-2);
  aspect-ratio: var(--as-tile-r, 1);
  padding: 0;
  border: 0;
  cursor: pointer;
  display: block;
  flex: 0 0 auto;
  width: var(--as-item);
  scroll-snap-align: start;
}
.as-tile img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform .7s;
}
.as-tile:hover img { transform: scale(1.04); }
.as-tile__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,28,33,.55), transparent 55%);
  opacity: 0;
  transition: opacity .2s;
}
.as-tile:hover .as-tile__veil { opacity: 1; }
.as-tile__cap {
  position: absolute;
  bottom: 0.875rem;
  left: 0.875rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0;
  transition: opacity .2s;
}
.as-tile:hover .as-tile__cap { opacity: 1; }

@media (min-width: 640px) {
  .as-tile--wide {
    width: calc(var(--as-item) * 2 + var(--as-gap));
    aspect-ratio: calc(var(--as-tile-r, 1) * 2.04);
  }
}
.as-tile--wide img { object-position: center; }

@media (hover: none) {
  .as-tile__veil,
  .as-tile__cap { opacity: 1; }
}

/* Plantas */
.as-galeria--plantas .as-tile {
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid var(--as-border);
  padding-bottom: 2.25rem;
}
.as-galeria--plantas .as-tile img { object-fit: contain; padding: 0.75rem; }
.as-galeria--plantas .as-tile:hover img { transform: none; }
.as-galeria--plantas .as-tile__veil { display: none; }
.as-galeria--plantas .as-tile__cap {
  opacity: 1;
  left: 0; right: 0; bottom: 0;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--as-border);
  background: var(--as-bg);
  color: var(--as-fg);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-align: center;
  transition: color .2s;
}
.as-galeria--plantas .as-tile:hover .as-tile__cap { color: var(--as-teal); }

/* ============================ DIFERENCIAIS DO APÊ (cards claros) ============================ */
.as-difs__text { margin-top: 0.5rem; font-size: 1rem; line-height: 1.6; color: var(--as-muted-fg); }
.as-difs__cards {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--as-border);
  background: var(--as-border);
}
@media (min-width: 640px) { .as-difs__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .as-difs__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.as-difs__card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--as-bg);
  padding: 1.5rem;
  transition: background-color .2s;
}
.as-difs__card:hover { background: var(--as-surface); }
.as-difs__card svg { width: 1.25rem; height: 1.25rem; color: var(--as-teal); stroke-width: 1.6; }
.as-difs__card span { font-size: 0.9375rem; font-weight: 500; color: var(--as-fg); }

/* ============================ SEÇÃO ESCURA (teal) ============================ */
.as-dark {
  border-top: 1px solid var(--as-border);
  border-bottom: 1px solid var(--as-border);
  background: var(--as-teal-deep);
  color: #fff;
}
.as-dark .as-eyebrow { color: color-mix(in oklab, var(--as-teal-soft) 80%, white); }
.as-dark .as-h2 { color: #fff; }
.as-dark .as-h2 em { color: color-mix(in oklab, var(--as-teal-soft) 70%, white); }
.as-dark__lead { margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.6; color: rgba(255,255,255,.72); }

.as-dark__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.14);
}
@media (min-width: 640px) { .as-dark__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.as-dark__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--as-teal-deep);
  padding: 1.5rem;
  transition: background-color .2s;
}
.as-dark__item:hover { background: var(--as-teal); }
.as-dark__item svg { width: 1.5rem; height: 1.5rem; color: color-mix(in oklab, var(--as-teal-soft) 60%, white); stroke-width: 1.4; margin-top: 0.125rem; }
.as-dark__text { display: flex; flex-direction: column; gap: 0.3125rem; }
.as-dark__label { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: #fff; }
.as-dark__benefit { font-size: 0.8125rem; line-height: 1.55; color: rgba(255,255,255,.6); }

/* ============================ VISITA / PLAYER DE VÍDEO ============================ */
.as-visita { background: var(--as-surface); }
.as-visita__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .as-visita__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 4rem; }
}
.as-visita__text { margin-top: 1.5rem; font-size: 1rem; line-height: 1.6; color: var(--as-muted-fg); max-width: 34rem; }
.as-visita__cta { margin-top: 2rem; }

.as-player {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
  background: var(--as-teal-deep);
  box-shadow: 0 30px 70px -30px rgba(23,56,63,.5);
}
.as-player video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--as-teal-deep); }
.as-player__cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  border: 0;
  cursor: pointer;
  background: linear-gradient(to top, rgba(10,28,33,.6), rgba(10,28,33,.15));
  color: #fff;
  font-family: inherit;
  transition: opacity .25s;
}
.as-player.is-playing .as-player__cover { opacity: 0; pointer-events: none; }
.as-player__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: #fff;
  color: var(--as-teal);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
  transition: transform .2s;
}
.as-player__play svg { width: 1.5rem; height: 1.5rem; margin-left: 3px; }
.as-player__cover:hover .as-player__play { transform: scale(1.06); }
.as-player__label { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; }
.as-player__time { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(255,255,255,.6); }

/* ============================ LOCALIZAÇÃO ============================ */
.as-local__addr {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--as-muted-fg);
}
.as-local__addr svg { color: var(--as-teal); }
.as-local__link {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--as-fg);
  padding-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--as-fg);
  transition: color .2s, border-color .2s;
}
.as-local__link:hover { color: var(--as-teal); border-color: var(--as-teal); }

.as-local__list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9375rem 0;
  border-top: 1px solid var(--as-border);
}
.as-local__list > li:first-child { border-top: 0; }
.as-local__poi { display: flex; align-items: center; gap: 1rem; }
.as-local__poi svg { width: 1.125rem; height: 1.125rem; color: var(--as-graphite-soft); }
.as-local__poi span { font-size: 0.875rem; color: var(--as-fg); }
@media (min-width: 768px) { .as-local__poi span { font-size: 0.9375rem; } }
.as-local__time {
  font-family: var(--as-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--as-fg);
  white-space: nowrap;
}

/* ============================ MORAR / INVESTIR + ESTUDO ============================ */
.as-invest { background: var(--as-surface); }
.as-invest__lead { font-size: 1rem; line-height: 1.6; color: var(--as-muted-fg); }
@media (min-width: 768px) { .as-invest__lead { font-size: 1.125rem; } }
.as-invest__perfis { margin-top: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .as-invest__perfis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.as-invest__perfil { border-left: 2px solid var(--as-teal); padding-left: 1.25rem; }
.as-invest__perfil h3 {
  font-family: var(--as-font-display);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--as-teal);
}
.as-invest__perfil p { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.65; color: var(--as-muted-fg); }

.as-estudo {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 2rem;
  border: 1px solid color-mix(in oklab, var(--as-teal) 30%, transparent);
  border-radius: 0.25rem;
  background: color-mix(in oklab, var(--as-teal) 6%, transparent);
  scroll-margin-top: 5rem;
}
@media (min-width: 768px) {
  .as-estudo { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; padding: 2.5rem 3rem; }
}
.as-estudo__title {
  margin-top: 0.75rem;
  font-family: var(--as-font-display);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--as-fg);
}
@media (min-width: 768px) { .as-estudo__title { font-size: 1.625rem; } }
.as-estudo__text { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.6; color: var(--as-muted-fg); max-width: 42rem; }
.as-estudo__cta { white-space: nowrap; }

/* ============================ SEÇÃO DA ANA ============================ */
.as-ana {
  border-top: 1px solid var(--as-border);
  border-bottom: 1px solid var(--as-border);
  background: var(--as-teal-deep);
  color: #fff;
}
.as-ana .as-eyebrow { color: color-mix(in oklab, var(--as-teal-soft) 80%, white); }
.as-ana__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .as-ana__grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 3.5rem; }
}
.as-ana__figure { margin: 0; max-width: 380px; align-self: start; }
.as-ana__figure img { display: block; width: 100%; height: auto; border-radius: 0.25rem; }
.as-ana__card {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.22);
  display: grid;
  gap: 0.3125rem;
}
.as-ana__nome { font-family: var(--as-font-display); font-size: 1.0625rem; font-weight: 500; color: #fff; }
.as-ana__papel { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklab, var(--as-teal-soft) 70%, white); }
.as-ana__creci { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,.5); }
.as-ana__title { margin-top: 0.875rem; font-size: 1.5rem; font-weight: 300; color: #fff; }
.as-ana__title em { font-style: normal; color: color-mix(in oklab, var(--as-teal-soft) 70%, white); }
@media (min-width: 768px) { .as-ana__title { font-size: 2.125rem; } }
.as-ana__text { margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.6; color: rgba(255,255,255,.72); }
.as-ana__checks { margin-top: 2rem; display: grid; gap: 1rem; }
.as-ana__checks li { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.5; font-size: 0.9375rem; color: rgba(255,255,255,.9); }
.as-ana__checks svg { width: 1rem; height: 1rem; margin-top: 0.25rem; color: color-mix(in oklab, var(--as-teal-soft) 60%, white); stroke-width: 2; }
.as-ana__cta { margin-top: 2rem; }

/* ============================ FAQ ============================ */
.as-faq__head { margin-bottom: 3rem; max-width: 44rem; }
.as-faq__list { border-top: 1px solid var(--as-border); }
.as-faq__item { border-bottom: 1px solid var(--as-border); }
.as-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--as-font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--as-fg);
  transition: color .2s;
}
.as-faq__q::-webkit-details-marker { display: none; }
.as-faq__q:hover { color: var(--as-teal); }
@media (min-width: 768px) { .as-faq__q { font-size: 1.125rem; } }
.as-faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--as-teal) 10%, transparent);
  transition: background-color .2s;
}
.as-faq__sign::before,
.as-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 2px;
  background: var(--as-teal);
  transform: translate(-50%, -50%);
  transition: transform .2s, opacity .2s;
}
.as-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.as-faq__item[open] .as-faq__sign { background: var(--as-teal); }
.as-faq__item[open] .as-faq__sign::before,
.as-faq__item[open] .as-faq__sign::after { background: #fff; }
.as-faq__item[open] .as-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.as-faq__a { padding: 0 4rem 1.75rem 0; animation: astra-fade 220ms ease-out; }
.as-faq__a p { max-width: 52rem; font-size: 0.9375rem; line-height: 1.6; color: var(--as-muted-fg); }
.as-faq__foot { margin-top: 2.5rem; font-size: 0.875rem; color: var(--as-muted-fg); }
.as-faq__foot a { color: var(--as-teal); border-bottom: 1px solid color-mix(in oklab, var(--as-teal) 45%, transparent); padding-bottom: 1px; }
.as-faq__foot a:hover { border-bottom-color: var(--as-teal); }

/* ============================ CONHEÇA ANTES DE DECIDIR ============================ */
.as-conheca__text { font-size: 1rem; line-height: 1.6; color: var(--as-muted-fg); }
@media (min-width: 768px) { .as-conheca__text { font-size: 1.125rem; } }
.as-conheca__checks { margin-top: 2rem; display: grid; gap: 1rem; }
.as-conheca__checks li { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.5; font-size: 1rem; color: var(--as-fg); }
.as-conheca__checks svg { margin-top: 0.25rem; color: var(--as-teal); stroke-width: 2; }
.as-conheca__note { margin-top: 1.5rem; padding-left: 1.25rem; border-left: 2px solid var(--as-teal); font-size: 0.9375rem; line-height: 1.6; color: var(--as-muted-fg); }

/* ============================ CONTATO ============================ */
.as-contato {
  border-top: 1px solid var(--as-border);
  border-bottom: 1px solid var(--as-border);
  background: var(--as-surface);
}
.as-contato__grid { display: grid; gap: 3rem; padding-top: 5.5rem; padding-bottom: 5.5rem; }
@media (min-width: 768px) {
  .as-contato__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: 7.5rem; padding-bottom: 7.5rem; }
}
.as-contato__text { margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--as-muted-fg); }
.as-contato__text strong { font-weight: 600; color: var(--as-fg); }
.as-contato__list { margin-top: 2rem; display: grid; gap: 1rem; }
.as-contato__list li { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.5; font-size: 0.9375rem; color: var(--as-fg); }
.as-contato__list svg { margin-top: 0.25rem; color: var(--as-teal); stroke-width: 2; }
.as-contato__links { margin-top: 2rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.as-contato__links a, .as-contato__links div { display: flex; align-items: center; gap: 0.75rem; color: var(--as-fg); transition: color .2s; }
.as-contato__links a:hover { color: var(--as-teal); }
.as-contato__links svg { color: var(--as-teal); }
.as-contato__links div { color: var(--as-muted-fg); }

.as-form { border-radius: 0.25rem; border: 1px solid var(--as-border); background: var(--as-bg); padding: 1.5rem; }
@media (min-width: 768px) { .as-form { padding: 2.5rem; } }
.as-form__tag {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--as-graphite-soft);
}
.as-form__tag i { display: block; height: 1px; width: 2rem; background: var(--as-teal); }
.as-form__fields { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .as-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-form__full { grid-column: span 2; }
}
.as-form label { margin-bottom: 0.5rem; display: block; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--as-graphite-soft); }
.as-form input, .as-form select {
  width: 100%;
  border-radius: 0.25rem;
  border: 1px solid var(--as-border);
  background: var(--as-bg);
  padding: 0.8125rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--as-fg);
}
.as-form input::placeholder { color: var(--as-muted-fg); }
.as-form input:focus, .as-form select:focus { outline: none; border-color: var(--as-teal); }
.as-form__submit { margin-top: 2rem; width: 100%; }
@media (min-width: 640px) { .as-form__submit { width: auto; } }
.as-form__legal { margin-top: 1rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--as-muted-fg); }

/* ============================ REALIZAÇÃO ============================ */
.as-realiza__pad { padding-top: 4.5rem; padding-bottom: 4.5rem; }
@media (min-width: 768px) { .as-realiza__pad { padding-top: 5.5rem; padding-bottom: 5.5rem; } }
.as-realiza__grid { margin-top: 2rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .as-realiza__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.as-realiza__name { font-family: var(--as-font-display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.875rem; color: var(--as-fg); }
.as-realiza__desc { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--as-muted-fg); }

/* ============================ FOOTER ============================ */
.as-footer { background: var(--as-teal-deep); color: rgba(255,255,255,.8); }
.as-footer__inner { display: grid; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .as-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.as-footer__logo { height: 1.75rem; width: auto; margin-bottom: 1.75rem; }
.as-footer__head { margin-bottom: 1.5rem; font-family: var(--as-font-display); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: #fff; }
.as-footer__text { font-size: 0.875rem; line-height: 1.6; color: rgba(255,255,255,.72); }
.as-footer__text + .as-footer__text { margin-top: 0.75rem; }
.as-footer__text strong { font-weight: 600; color: #fff; }
.as-footer__text--dim { font-size: 0.8125rem; color: rgba(255,255,255,.5); }
.as-footer__list { display: grid; gap: 0.875rem; }
.as-footer__list li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: rgba(255,255,255,.82); }
.as-footer__list svg { color: color-mix(in oklab, var(--as-teal-soft) 60%, white); }
.as-footer__list a { color: inherit; transition: color .2s; }
.as-footer__list a:hover { color: #fff; }
.as-footer__gac { height: 2.75rem; width: auto; margin-bottom: 1.25rem; }
.as-footer__legal { border-top: 1px solid rgba(255,255,255,.1); }
.as-footer__legal p { padding-top: 1rem; padding-bottom: 1rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,.5); }

/* ============================ WHATSAPP FLUTUANTE ============================ */
.as-wa {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 30;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #25D366;
  color: #fff;
  box-shadow: 0 16px 40px -8px rgba(37,211,102,.55);
  transition: transform .2s;
}
.as-wa:hover { transform: scale(1.05); }
.as-wa svg { width: 1.5rem; height: 1.5rem; }

/* ============================ LIGHTBOX ============================ */
.as-lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,20,24,.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.as-lb.is-open { display: flex; animation: astra-fade 220ms ease-out; }
.as-lb__btn {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.8);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.as-lb__btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.as-lb__close { top: 1rem; right: 1rem; height: 2.75rem; width: 2.75rem; border-color: rgba(255,255,255,.2); }
.as-lb__prev, .as-lb__next { height: 3rem; width: 3rem; }
.as-lb__prev { left: 1rem; }
.as-lb__next { right: 1rem; }
@media (min-width: 768px) { .as-lb__prev { left: 2rem; } .as-lb__next { right: 2rem; } }
.as-lb__btn svg { width: 1.5rem; height: 1.5rem; }
.as-lb__close svg { width: 1.25rem; height: 1.25rem; }
.as-lb__fig {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4rem 1rem;
}
@media (min-width: 768px) { .as-lb__fig { padding-left: 4rem; padding-right: 4rem; } }
.as-lb__fig img { max-height: 85vh; max-width: 100%; object-fit: contain; }
.as-lb__cap { margin-top: 1rem; text-align: center; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.24em; color: rgba(255,255,255,.6); }
.as-lb__n { margin-left: 0.75rem; color: rgba(255,255,255,.4); }
body.as-lb-open { overflow: hidden; }

/* ============================ CONDIÇÕES DE PAGAMENTO ============================ */
.as-pgto__head { max-width: 46rem; margin-bottom: 3rem; }
.as-pgto__intro { margin-top: 1.5rem; font-size: 1rem; line-height: 1.6; color: var(--as-muted-fg); }
@media (min-width: 768px) { .as-pgto__intro { font-size: 1.0625rem; } }

.as-pgto__grid { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 900px) { .as-pgto__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.as-pgto__card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border: 1px solid var(--as-border);
  border-radius: 0.25rem;
  background: var(--as-bg);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.as-pgto__card:hover {
  transform: translateY(-6px);
  border-color: var(--as-teal);
  box-shadow: 0 26px 55px -28px rgba(38,85,96,.45);
}
.as-pgto__card--destaque {
  border-color: var(--as-teal);
  box-shadow: 0 24px 60px -30px rgba(38,85,96,.5);
}
.as-pgto__card--destaque:hover { box-shadow: 0 30px 65px -28px rgba(38,85,96,.55); }
.as-pgto__badge {
  align-self: flex-start;
  margin-bottom: 1.125rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--as-teal);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.as-pgto__nome { font-family: var(--as-font-display); font-size: 1.125rem; font-weight: 500; color: var(--as-fg); }
.as-pgto__entrega {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--as-teal);
}
.as-pgto__list { display: grid; gap: 1rem; }
.as-pgto__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--as-graphite-soft);
}
.as-pgto__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--as-teal);
}
.as-pgto__obs { margin-top: 2rem; max-width: 54rem; font-size: 0.8125rem; line-height: 1.65; color: var(--as-muted-fg); }
.as-pgto__cta { margin-top: 2rem; }

/* ============================ ANIMAÇÕES ============================ */
@keyframes astra-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes astra-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes astra-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .astra *, .astra *::before, .astra *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* ===========================================================================
   ELOS — Ilha Pura · /elos
   TODAS as classes começam com .elos. O application.css faz require_tree, ou
   seja, este arquivo entra num bundle global junto com onlife.css, astra.css e
   symphony.css — sem o prefixo, uma regra daqui quebraria as outras LPs.
   =========================================================================== */

/* Paleta e tipografia lidas da LP oficial do Elos
   (ilhapura.com.br/empreendimentos/elos), não inventadas. A regra do projeto é
   que cada LP acompanhe o design system da construtora — o do Grupo Ana Cintra
   fica reservado para a home da Ana.
   O que mudou em relação à primeira versão: os teais eram os do bairro Ilha
   Pura, o acento era um areia quente que não existe na marca, e os títulos
   usavam serifa. A construtora usa Albert Sans em tudo e neutros cinza puros. */
.elos {
  --elos-deep:   #004964;   /* teal mais escuro — seções escuras e títulos */
  --elos-teal:   #1B4A61;   /* superfície principal da marca — botões */
  --elos-teal-2: #48A5C9;   /* teal claro — acentos sobre fundo escuro */
  --elos-teal-3: #3C8AA4;   /* teal médio — filetes e detalhes */
  --elos-cream:  #F0F0F0;   /* neutro claro — seções alternadas */
  --elos-paper:  #FFFFFF;
  --elos-ink:    #323232;   /* texto */
  --elos-mute:   #6B6B6B;   /* texto secundário */
  --elos-line:   #E0E0E0;

  /* Uma família só, como na LP oficial. As variáveis --elos-serif/--elos-sans
     continuam existindo para não ter que reescrever cada regra; ambas apontam
     para Albert Sans, e o peso é que diferencia título de texto. */
  --elos-serif: "Albert Sans", system-ui, -apple-system, sans-serif;
  --elos-sans:  "Albert Sans", system-ui, -apple-system, sans-serif;

  --elos-pad: clamp(1.25rem, 5vw, 2.5rem);

  font-family: var(--elos-sans);
  color: var(--elos-ink);
  background: var(--elos-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Reset local. O seletor precisa ser prefixado nos DOIS níveis: um
   `.elos ul{margin:0}` solto venceria por especificidade qualquer margem que
   as regras de filho tentassem aplicar depois. */
.elos figure { margin: 0; }
.elos img { max-width: 100%; height: auto; display: block; }
.elos h1, .elos h2, .elos h3 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }
.elos p { margin: 0; }
.elos ul { margin: 0; padding: 0; list-style: none; }
.elos table { border-collapse: collapse; width: 100%; }
.elos dl, .elos dd, .elos dt { margin: 0; }
.elos *, .elos *::before, .elos *::after { box-sizing: border-box; }

.elos-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--elos-pad);
}
.elos-wrap--narrow { max-width: 820px; }

/* --- Blocos de seção ------------------------------------------------------ */

.elos-sec { padding-block: clamp(3.5rem, 9vw, 7rem); }
.elos-sec--light { background: var(--elos-cream); }
.elos-sec--dark  { background: var(--elos-deep); color: #EAF1F3; }

.elos-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
/* 11/08/2026: medida a página oficial do Elos — os títulos de seção lá são
   Albert Sans peso 200 em preto (#000/#323232), e os nossos estavam em peso 400
   coloridos de azul. Mesma correção feita no Pura: o sistema do Ilha Pura é uma
   base só (Albert Sans, título fino e preto, neutros #F0F0F0/#323232) com UMA
   cor por empreendimento — #1B4A61 no Elos, #3C8AA4 no Pura. */
.elos-head h2 {
  font-family: var(--elos-serif);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 200;
  line-height: 1.12;
  color: var(--elos-ink);
}
.elos-head--invert h2 { color: #FFFFFF; }
.elos-head--invert .elos-lead { color: #C2D4DA; }

.elos-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--elos-teal);
  margin-bottom: 0.9rem !important;
}
.elos-sec--dark .elos-eyebrow { color: var(--elos-teal-2); }

.elos-lead {
  margin-top: 1.1rem !important;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  color: var(--elos-mute);
  max-width: 42rem;
}

/* --- Botões --------------------------------------------------------------- */

.elos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;               /* alvo de toque confortável */
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--elos-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.elos-btn--primary { background: var(--elos-teal); color: #FFFFFF; }
.elos-btn--primary:hover { background: var(--elos-deep); }
.elos-btn--ghost {
  background: transparent;
  color: var(--elos-deep);
  border-color: var(--elos-deep);
}
.elos-btn--ghost:hover { background: var(--elos-deep); color: #FFFFFF; }
.elos-sec--dark .elos-btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.elos-sec--dark .elos-btn--ghost:hover { background: #FFFFFF; color: var(--elos-deep); }

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

/* Tela cheia com vídeo de fundo. `svh` em vez de `vh`: no celular, `100vh`
   conta a barra do navegador que some ao rolar, e o hero fica alto demais. */
.elos-hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--elos-deep);
}
.elos-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Escurecimento mais forte embaixo, onde fica o texto, e no topo, para o
   conteúdo não competir com o céu claro do vídeo. */
.elos-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(6, 28, 34, .72) 0%,
    rgba(6, 28, 34, .40) 42%,
    rgba(6, 28, 34, .88) 100%);
}
.elos-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  max-width: 1180px;
  margin-inline: auto;
  padding: 7rem var(--elos-pad) 3.5rem;
}
@media (min-width: 768px) { .elos-hero__inner { padding-bottom: 5rem; } }

.elos-hero__anim { animation: elos-fade-up 900ms ease-out both; }
@keyframes elos-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.elos-hero__logo {
  width: clamp(130px, 18vw, 180px);
  height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
.elos-hero__place {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem !important;
  padding-left: 0.75rem;
  border-left: 2px solid var(--elos-teal-2);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #CFE4EA;
}
.elos-hero__place span { color: rgba(255,255,255,.4); }

.elos-hero__title {
  max-width: 20ch;
  font-family: var(--elos-serif);
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  font-weight: 200;
  line-height: 1.06;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
/* O `.elos` na frente é obrigatório: `.elos h1{font-weight:400}` tem
   especificidade maior que `.elos-hero__title`, então o peso declarado ali em
   cima nunca chegou a valer — o título do hero sempre saiu em 400. */
.elos .elos-hero__title { font-weight: 200; }
.elos-hero__title em { font-style: normal; font-weight: 500; color: var(--elos-teal-2); }

.elos-hero__lead {
  margin-top: 1.25rem !important;
  max-width: 40rem;
  font-size: clamp(0.98rem, 1.9vw, 1.12rem);
  color: #D6E4E8;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.elos-hero__lead strong { color: #FFFFFF; font-weight: 600; }

.elos-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  max-width: 48rem;
  margin-top: 2.25rem !important;
}
.elos-hero__fact { border-left: 2px solid var(--elos-teal-3); padding-left: 0.875rem; }
.elos-hero__fact-k {
  display: block;
  font-family: var(--elos-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
}
.elos-hero__fact-v {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: #A9C4CB;
}

.elos-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

/* Botão secundário sobre o vídeo: contorno claro, sem fundo. */
.elos-btn--onvideo {
  background: rgba(255,255,255,.08);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
}
.elos-btn--onvideo:hover { background: #FFFFFF; color: var(--elos-deep); border-color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .elos-hero__anim { animation: none; }
}

/* --- Tour em vídeo do decorado ------------------------------------------- */

/* Prefixado: é uma <figure>, e `.elos figure { margin: 0 }` vencia — o vídeo do
   tour ficava colado no que vem depois. */
.elos .elos-tour { margin-bottom: clamp(2rem, 5vw, 3rem); }
.elos-tour video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: #0A2C35;
  display: block;
}
.elos-tour figcaption { padding-top: 0.75rem; }
.elos-tour figcaption strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--elos-deep);
}
.elos-tour figcaption span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--elos-mute);
}

/* --- Por que falar com a Ana ---------------------------------------------- */

.elos-ana { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .elos-ana { grid-template-columns: 0.8fr 1fr; } }

.elos-ana__fig img {
  width: 100%;
  max-width: 420px;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.elos-ana__texto h2 {
  font-family: var(--elos-serif);
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  line-height: 1.12;
  color: var(--elos-deep);
}
.elos-ana__razoes { display: grid; gap: 1rem; margin-top: 1.75rem !important; }
.elos-ana__razoes li { display: flex; gap: 0.75rem; align-items: flex-start; }
.elos-ana__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--elos-teal-3);
}
.elos-ana__razoes p { font-size: 0.95rem; color: var(--elos-mute); }
.elos-ana__assina {
  margin-top: 1.75rem !important;
  margin-bottom: 1.25rem !important;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--elos-deep);
}

/* --- Oferta ITBI + RGI ---------------------------------------------------- */

.elos-oferta {
  background: var(--elos-deep);
  padding: clamp(2.5rem, 6vw, 4rem) var(--elos-pad);
}
.elos-oferta__box {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: #EAF1F3;
}
.elos-oferta__tag {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--elos-teal-3);
  margin-bottom: 1rem !important;
}
.elos-oferta h2 {
  font-family: var(--elos-serif);
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 200;
  line-height: 1.16;
  color: #FFFFFF;
}
.elos-oferta h2 strong { font-weight: 500; color: var(--elos-teal-2); }
.elos-oferta__texto {
  margin-top: 1.25rem !important;
  color: #C2D4DA;
  font-size: 1.02rem;
}
.elos-oferta__prazo {
  margin-top: 1.25rem !important;
  font-size: 0.92rem;
  color: #EAF1F3;
}
.elos-oferta__prazo strong { color: var(--elos-teal-3); }
.elos-oferta .elos-btn { margin-top: 1.75rem; }
.elos-oferta__fine {
  margin-top: 1rem !important;
  font-size: 0.78rem;
  color: #8FA9B1;
}

/* --- Números -------------------------------------------------------------- */

.elos-numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--elos-line);
  border-block: 1px solid var(--elos-line);
}
.elos-numero {
  background: var(--elos-paper);
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
  text-align: center;
}
.elos-numero__n {
  display: block;
  font-family: var(--elos-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--elos-teal);
}
.elos-numero__l {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--elos-deep);
}
.elos-numero__d {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--elos-mute);
}
@media (min-width: 720px) { .elos-numeros { grid-template-columns: repeat(4, 1fr); } }

/* --- Grades de cards ------------------------------------------------------ */

.elos-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .elos-grid--2, .elos-grid--3, .elos-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .elos-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .elos-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.elos-card { display: flex; flex-direction: column; }
.elos-card__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--elos-line);
  border-radius: 5px;
  overflow: hidden;
  cursor: zoom-in;
}
.elos-card__btn img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s ease;
}
.elos-card__btn:hover img { transform: scale(1.03); }
.elos-card figcaption { padding-top: 0.75rem; }
.elos-card figcaption strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--elos-deep);
}
.elos-card figcaption span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.83rem;
  color: var(--elos-mute);
  line-height: 1.45;
}
.elos-card--dark figcaption strong { color: #FFFFFF; }
.elos-card--dark figcaption span { color: #9FB8BF; }
.elos-card--dark .elos-card__btn { background: #10454F; }

/* Plantas são desenhos técnicos: fundo branco e a imagem inteira à vista. */
.elos-grid--plantas { margin-top: clamp(2rem, 5vw, 3rem); }
.elos-card--planta .elos-card__btn { background: var(--elos-paper); border: 1px solid var(--elos-line); }
/* A proporção fica fixa mesmo antes da imagem carregar. Com `aspect-ratio:auto`
   o botão colapsava para ~26px e a grade inteira pulava quando a planta
   (lazy) chegava. */
.elos-card--planta .elos-card__btn img {
  aspect-ratio: 7 / 6;
  object-fit: contain;
  padding: 0.75rem;
}

/* --- Diferenciais --------------------------------------------------------- */

.elos-difs {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 820px) { .elos-difs { grid-template-columns: 1.4fr 1fr; } }

.elos-difs__col {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--elos-paper);
  border: 1px solid var(--elos-line);
  border-radius: 6px;
}
.elos-difs__col--accent { background: var(--elos-deep); border-color: var(--elos-deep); }
.elos-difs__col h3 {
  font-family: var(--elos-serif);
  font-size: 1.4rem;
  color: var(--elos-deep);
  margin-bottom: 1rem;
}
.elos-difs__col--accent h3 { color: #FFFFFF; }
.elos-difs__col ul { display: grid; gap: 0.6rem; }
.elos-difs__col li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.93rem;
  color: var(--elos-mute);
}
.elos-difs__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--elos-teal-3);
}
.elos-difs__col--accent li { color: #C2D4DA; }

/* --- Tipologias ----------------------------------------------------------- */

.elos-tipos { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .elos-tipos { grid-template-columns: repeat(2, 1fr); } }

.elos-tipo {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--elos-line);
  border-radius: 6px;
  background: var(--elos-cream);
}
.elos-tipo h3 {
  font-family: var(--elos-serif);
  font-size: 1.5rem;
  color: var(--elos-deep);
  margin-bottom: 0.75rem;
}
.elos-tipo tr { border-top: 1px solid var(--elos-line); }
.elos-tipo tr:first-child { border-top: 0; }
.elos-tipo th {
  text-align: left;
  padding: 0.7rem 0;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--elos-ink);
}
.elos-tipo th span {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--elos-mute);
}
.elos-tipo td {
  text-align: right;
  padding: 0.7rem 0;
  font-size: 0.95rem;
  color: var(--elos-teal);
  white-space: nowrap;
}

.elos-nota {
  margin-top: 1.5rem !important;
  font-size: 0.78rem;
  color: var(--elos-mute);
  max-width: 44rem;
}

/* --- Momentos de lazer ---------------------------------------------------- */

.elos-momento { margin-top: clamp(2.5rem, 6vw, 4rem); }
.elos-momento:first-of-type { margin-top: 0; }
.elos-momento__head { margin-bottom: 1.5rem; max-width: 40rem; }
.elos-momento__head h3 {
  font-family: var(--elos-serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: #FFFFFF;
}
.elos-momento__head p {
  margin-top: 0.5rem !important;
  font-size: 0.95rem;
  color: #9FB8BF;
}

.elos-facilities {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(255,255,255,.16);
}
.elos-facilities h3 {
  font-family: var(--elos-serif);
  font-size: 1.3rem;
  color: #FFFFFF;
  margin-bottom: 1rem;
}
.elos-facilities ul { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.elos-facilities li {
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 0.85rem;
  color: #C2D4DA;
}

/* --- Design e segurança --------------------------------------------------- */

.elos-seg { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .elos-seg { grid-template-columns: repeat(2, 1fr); } }
.elos-seg__item {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--elos-paper);
  border-left: 3px solid var(--elos-teal-3);
  border-radius: 0 5px 5px 0;
}
.elos-seg__item h3 {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--elos-deep);
}
.elos-seg__item p {
  margin-top: 0.35rem !important;
  font-size: 0.9rem;
  color: var(--elos-mute);
}

/* --- Ficha técnica -------------------------------------------------------- */

.elos-ficha { border-top: 1px solid var(--elos-line); }
.elos-ficha__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--elos-line);
}
.elos-ficha dt {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--elos-mute);
}
.elos-ficha dd { font-size: 0.98rem; color: var(--elos-ink); }
@media (min-width: 640px) {
  .elos-ficha__row { grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: baseline; }
}

/* --- CTA e formulário ----------------------------------------------------- */

.elos-cta__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .elos-cta__grid { grid-template-columns: 1fr 26rem; align-items: start; } }

.elos-cta__texto h2 {
  font-family: var(--elos-serif);
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1.12;
  color: #FFFFFF;
}
.elos-cta__texto .elos-lead { color: #C2D4DA; }
.elos-cta__flag {
  margin-top: 1.5rem !important;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--elos-teal-3);
  background: rgba(255,255,255,.06);
  border-radius: 0 4px 4px 0;
  font-size: 0.92rem;
  color: #EAF1F3;
}
.elos-cta__assina { margin-top: 1.75rem !important; }
.elos-cta__assina strong { display: block; font-size: 1.05rem; color: #FFFFFF; font-weight: 500; }
.elos-cta__assina span { font-size: 0.88rem; color: #9FB8BF; }

.elos-form {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--elos-paper);
  border-radius: 8px;
  color: var(--elos-ink);
}
.elos-form h3 {
  font-family: var(--elos-serif);
  font-size: 1.5rem;
  color: var(--elos-deep);
  margin-bottom: 1.25rem;
}
.elos-form label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--elos-deep);
}
.elos-form__opt { font-weight: 400; color: var(--elos-mute); }
.elos-form input,
.elos-form select,
.elos-form textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 0.35rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--elos-line);
  border-radius: 4px;
  font-family: var(--elos-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--elos-ink);
  background: var(--elos-paper);
}
.elos-form textarea { min-height: auto; resize: vertical; }
.elos-form input:focus,
.elos-form select:focus,
.elos-form textarea:focus {
  outline: 2px solid var(--elos-teal);
  outline-offset: 1px;
  border-color: transparent;
}
.elos-form__submit { width: 100%; margin-top: 0.5rem; }
.elos-form__fine {
  margin-top: 0.9rem !important;
  font-size: 0.75rem;
  color: var(--elos-mute);
  line-height: 1.5;
}

/* --- Vitrine dos condomínios vizinhos ------------------------------------- */
/* O componente é compartilhado e traz as próprias cores padrão; aqui só
   amarramos ele à paleta desta LP. Ver ilhapura_condominios.css. */
.elos .ipc {
  --ipc-fundo:  var(--elos-cream);
  --ipc-acento: var(--elos-teal);
  --ipc-escuro: var(--elos-deep);
  --ipc-tinta:  var(--elos-ink);
  --ipc-suave:  var(--elos-mute);
  --ipc-linha:  var(--elos-line);
}
.elos .ipc h2, .elos .ipc h3 { font-family: var(--elos-serif); }

/* --- Rodapé compartilhado ------------------------------------------------- */
/* O rodapé e o botão flutuante vêm de shared/_rodape_lp, com CSS próprio.
   Aqui só amarramos as cores dele à paleta desta LP. */
/* Escopado em `.elos`: um `.rlp` solto aqui pintaria o rodapé de todas as
   outras LPs com a paleta do Elos, já que o CSS é um bundle global. */
.elos .rlp {
  --rlp-fundo: #05323F;
  --rlp-texto: #A9C4CB;
  --rlp-linha: rgba(255,255,255,.14);
  --rlp-fraco: #7F9BA3;
}

/* --- Lightbox ------------------------------------------------------------- */

.elos-lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 20, 24, .93);
}
.elos-lb[hidden] { display: none; }
.elos-lb figure { max-width: min(1100px, 100%); max-height: 100%; }
.elos-lb img {
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
  border-radius: 4px;
  object-fit: contain;
}
.elos-lb figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.9rem;
  color: #C2D4DA;
}
.elos-lb__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #FFFFFF;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.elos-lb__close:hover { background: rgba(255,255,255,.24); }

/* --- Revelação no scroll -------------------------------------------------- */

.elos-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.elos-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .elos-reveal { opacity: 1; transform: none; transition: none; }
  .elos-card__btn img { transition: none; }
  .elos-faq__item summary,
  .elos-faq__sinal { transition: none; }
}

/* ============================================================================
   Localização + o bairro (seções fundidas) e Ir e vir sem barreiras
   Conteúdo clonado do Astra: é o mesmo bairro para todo condomínio do Ilha
   Pura. Aqui só a roupagem muda, para o design system do Elos.
   ========================================================================== */

/* Âncora invisível: `#bairro` era o id da seção antiga e pode estar em link
   já compartilhado. Fica com scroll-margin para o título não colar no topo. */
.elos-ancora { display: block; height: 0; scroll-margin-top: 2rem; }

.elos-loc {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 900px) { .elos-loc { grid-template-columns: 1fr 1.15fr; align-items: start; } }

.elos .elos-loc__texto h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.15;
  color: var(--elos-deep);
}
.elos .elos-loc__texto p {
  margin: 0 0 1.6rem;
  font-size: clamp(1rem, 1.9vw, 1.08rem);
  line-height: 1.7;
  color: var(--elos-mute);
  max-width: 40ch;
}

/* Grade de duas colunas com filete de 1px: o próprio `gap` sobre um fundo
   colorido desenha as linhas, sem precisar de border em cada célula. */
.elos-loc__lista {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--elos-line);
  border: 1px solid var(--elos-line);
}
.elos-loc__item {
  background: var(--elos-paper);
  padding: 0.95rem 1.1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.elos .elos-loc__item dt {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--elos-ink);
}
/* `dd` tem margin-left de 40px por padrão no navegador e desmontaria a grade. */
.elos .elos-loc__item dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--elos-teal-3);
  white-space: nowrap;
}
.elos-sec--light .elos-loc__item { background: var(--elos-paper); }

/* --- Ir e vir sem barreiras (seção escura) -------------------------------- */

.elos-acess { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .elos-acess { grid-template-columns: 1fr 1.1fr; align-items: center; } }

.elos-acess__fig { margin: 0; }
.elos-acess__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.elos-sec--dark .elos-acess__texto h2 { color: #FFFFFF; }
.elos-acess__texto h2 em { font-style: italic; color: var(--elos-teal-2); }
.elos-sec--dark .elos-acess__texto .elos-lead { color: #C2D4DA; }

/* Prefixado: é um <dl>, e `.elos dl { margin: 0 }` vencia. */
.elos .elos-acess__lista {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.elos-acess__item { background: var(--elos-deep); padding: 1.1rem 1.2rem; }
.elos .elos-acess__item dt {
  margin-bottom: 0.3rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #FFFFFF;
}
.elos .elos-acess__item dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #A8C2CA;
}

/* ============================================================================
   Perguntas frequentes — <details>/<summary> nativo, sem JS
   ========================================================================== */
.elos-faq { border-top: 1px solid var(--elos-line); }

.elos-faq__item { border-bottom: 1px solid var(--elos-line); }

.elos-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
  cursor: pointer;
  font-size: clamp(1rem, 1.9vw, 1.1rem);
  font-weight: 500;
  color: var(--elos-deep);
  line-height: 1.45;
  transition: color 0.2s ease;
}
/* O triângulo padrão do navegador não é estilizável e aparece diferente em cada
   um. Tirado nos dois dialetos: `list-style` cobre Chrome/Firefox, o
   pseudo-elemento `::-webkit-details-marker` cobre o Safari. */
.elos-faq__item summary { list-style: none; }
.elos-faq__item summary::-webkit-details-marker { display: none; }
.elos-faq__item summary:hover { color: var(--elos-teal-3); }
.elos-faq__item summary:focus-visible {
  outline: 2px solid var(--elos-teal-2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sinal de + que vira − quando abre. Feito com dois traços em vez de texto: não
   depende de fonte e fica alinhado em qualquer tamanho de tela. */
.elos-faq__sinal {
  position: relative;
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.35rem;
  transition: transform 0.25s ease;
}
.elos-faq__sinal::before,
.elos-faq__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--elos-teal-3);
}
.elos-faq__sinal::after { transform: rotate(90deg); }
.elos-faq__item[open] .elos-faq__sinal { transform: rotate(45deg); }
.elos-faq__item[open] summary { color: var(--elos-teal-3); }

/* `.elos p { margin: 0 }` tem a mesma especificidade que `.elos-faq__resposta p`
   e venceria por ordem se este arquivo mudasse de posição. O `.elos` na frente
   garante a margem independente disso. */
.elos-faq__resposta { padding: 0 0 1.4rem; max-width: 46rem; }
.elos .elos-faq__resposta p {
  margin: 0;
  font-size: clamp(0.95rem, 1.7vw, 1.03rem);
  line-height: 1.7;
  color: var(--elos-mute);
}

.elos .elos-faq__rodape {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--elos-mute);
}
.elos-faq__rodape a {
  color: var(--elos-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.elos-faq__rodape a:hover { color: var(--elos-teal-3); }
/* ===========================================================================
   ORO BY ORNARE — Ilha Pura · /oro-by-ornare
   TODAS as classes começam com .oro. O application.css faz require_tree, ou
   seja, este arquivo entra num bundle global junto com elos.css, pura.css,
   onlife.css, astra.css e symphony.css — sem o prefixo, uma regra daqui
   quebraria as outras LPs.
   =========================================================================== */

/* Paleta e tipografia MEDIDAS na página oficial do Oro
   (ilhapura.com.br/empreendimentos/oro-by-ornare) em 12/08/2026, com
   getComputedStyle — não inventadas, não tiradas do logo.

   ⚠️ O slug certo é `oro-by-ornare`. `/empreendimentos/oro` também responde
   200, mas carrega uma página parcial — foi a mesma armadilha do Pura.

   Como funciona o sistema do Ilha Pura: TODOS os empreendimentos usam a mesma
   base (Albert Sans, títulos peso 200 em preto, neutros #F0F0F0/#323232) e cada
   um tem UMA cor própria. Elos #1B4A61 · Pura #3C8AA4 · ORO #EF7003, que
   apareceu 35 vezes na página (botões, selos, olhos de seção). O hero deles
   roda sobre um bronze #825127, medido no mesmo passe. */
.oro {
  /* Bronze escurecido para as seções escuras. #825127 puro é a cor do hero
     oficial, mas em bloco grande ele fica ácido; escurecido dá 10,3:1 com
     texto branco em vez de 6,6:1. */
  --oro-deep:   #5C3819;
  --oro-bronze: #825127;   /* o bronze do hero oficial — botões e destaques */
  /* A COR DO ORO. Texto branco sobre ela dá 3,0:1, abaixo do mínimo de
     leitura — mesma situação do #3C8AA4 no Pura. Por isso ela fica em filete,
     olho de seção e detalhe, e o botão vai no bronze escuro. */
  --oro-gold:   #EF7003;
  --oro-sand:   #E8A76B;   /* claro — texto de apoio sobre fundo escuro (5,0:1) */
  --oro-cream:  #F0F0F0;   /* neutro claro do portal — seções alternadas */
  --oro-paper:  #FFFFFF;
  --oro-ink:    #323232;   /* texto e TÍTULOS (no site oficial eles são pretos) */
  --oro-mute:   #6B6B6B;
  --oro-line:   #E0E0E0;

  /* Albert Sans em tudo, como no site inteiro do Ilha Pura. Títulos peso 200. */
  --oro-serif: "Albert Sans", system-ui, -apple-system, sans-serif;
  --oro-sans:  "Albert Sans", system-ui, -apple-system, sans-serif;

  --oro-pad: clamp(1.25rem, 5vw, 2.5rem);

  font-family: var(--oro-sans);
  color: var(--oro-ink);
  background: var(--oro-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Reset local. O seletor precisa ser prefixado nos DOIS níveis: um
   `.oro ul{margin:0}` solto vence por especificidade qualquer margem que as
   regras de filho tentem aplicar depois (gotcha registrado no CLAUDE.md). */
.oro figure { margin: 0; }
.oro img { max-width: 100%; height: auto; display: block; }
.oro h1, .oro h2, .oro h3 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }
.oro p { margin: 0; }
.oro ul { margin: 0; padding: 0; list-style: none; }
.oro table { border-collapse: collapse; width: 100%; }
.oro dl, .oro dd, .oro dt { margin: 0; }
.oro *, .oro *::before, .oro *::after { box-sizing: border-box; }

.oro-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--oro-pad);
}
.oro-wrap--narrow { max-width: 820px; }

/* --- Blocos de seção ------------------------------------------------------ */

.oro-sec { padding-block: clamp(3.5rem, 9vw, 7rem); }
.oro-sec--light { background: var(--oro-cream); }
.oro-sec--dark  { background: var(--oro-deep); color: #F2E7DC; }

.oro-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.oro-head h2 {
  font-family: var(--oro-serif);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 200;
  line-height: 1.12;
  color: var(--oro-ink);
}
.oro-head--invert h2 { color: #FFFFFF; }
.oro-head--invert .oro-lead { color: #DCC6AF; }

.oro-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-bronze);
  margin-bottom: 0.9rem !important;
}
.oro-sec--dark .oro-eyebrow { color: var(--oro-sand); }

.oro-lead {
  margin-top: 1.1rem !important;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  color: var(--oro-mute);
  max-width: 42rem;
}

/* --- Botões --------------------------------------------------------------- */

.oro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;               /* alvo de toque confortável */
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--oro-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.oro-btn--primary { background: var(--oro-bronze); color: #FFFFFF; }
.oro-btn--primary:hover { background: var(--oro-deep); }
.oro-btn--ghost {
  background: transparent;
  color: var(--oro-deep);
  border-color: var(--oro-deep);
}
.oro-btn--ghost:hover { background: var(--oro-deep); color: #FFFFFF; }
.oro-sec--dark .oro-btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.oro-sec--dark .oro-btn--ghost:hover { background: #FFFFFF; color: var(--oro-deep); }

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

/* Imagem de fundo, não vídeo: o material do Oro tem vídeos, mas todos com
   texto queimado na imagem, que brigaria com o título. A perspectiva do Deck
   Sunset no fim de tarde já traz o bronze da marca e deixa a parte de baixo
   escura, que é onde o texto entra.
   `svh` em vez de `vh`: no celular, `100vh` conta a barra do navegador que
   some ao rolar, e o hero fica alto demais. */
.oro-hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--oro-deep);
}
/* 🚨 O prefixo `.oro` salva o topo inteiro. Sem ele, `.oro img { height: auto }`
   (0,1,1) vence `.oro-hero__bg` (0,1,0) e a foto de fundo perde a altura: fica
   uma FAIXA de 211px no celular, com o resto do topo em marrom liso. No desktop
   quase não se via, porque a 1280px de largura a imagem 16:9 já dá ~720px de
   altura e cobre quase tudo. Achado em 14/08/2026 por um print da Ana. */
.oro .oro-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.oro-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(28, 16, 6, .70) 0%,
    rgba(28, 16, 6, .34) 40%,
    rgba(28, 16, 6, .90) 100%);
}
.oro-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  max-width: 1180px;
  margin-inline: auto;
  padding: 7rem var(--oro-pad) 3.5rem;
}
@media (min-width: 768px) { .oro-hero__inner { padding-bottom: 5rem; } }

.oro-hero__anim { animation: oro-fade-up 900ms ease-out both; }
@keyframes oro-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Piso baixado de 150px para 110px em 14/08/2026 (Ana: a logo estava grande
   demais no celular). Só o piso mudou — de 550px de janela para cima o
   `20vw` continua mandando e o desktop está igual ao que era. */
.oro-hero__logo {
  width: clamp(110px, 20vw, 210px);
  height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.5));
}
.oro-hero__place {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem !important;
  padding-left: 0.75rem;
  border-left: 2px solid var(--oro-gold);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #EBD8C4;
}
.oro-hero__place span { color: rgba(255,255,255,.4); }

.oro-hero__title {
  max-width: 20ch;
  font-family: var(--oro-serif);
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  font-weight: 200;
  line-height: 1.06;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
/* Mesma armadilha do reset: `.oro h1{font-weight:400}` tem especificidade
   maior que `.oro-hero__title`, então o peso fino do título do hero não
   valeria. Com o `.oro` na frente, vale. */
.oro .oro-hero__title { font-weight: 200; }
.oro-hero__title em { font-style: normal; font-weight: 500; color: var(--oro-sand); }

.oro-hero__lead {
  margin-top: 1.25rem !important;
  max-width: 40rem;
  font-size: clamp(0.98rem, 1.9vw, 1.12rem);
  color: #E3D2C1;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.oro-hero__lead strong { color: #FFFFFF; font-weight: 600; }

.oro-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  max-width: 48rem;
}
/* 🚨 Precisa do `.oro` na frente: sem ele o reset `.oro ul{margin:0}` vence
   por especificidade e a margem simplesmente não acontece. */
.oro .oro-hero__facts { margin-top: 2.25rem; }
.oro-hero__fact { border-left: 2px solid var(--oro-gold); padding-left: 0.875rem; }
.oro-hero__fact-k {
  display: block;
  font-family: var(--oro-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
}
.oro-hero__fact-v {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: #C9B49F;
}

.oro-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

/* Botão secundário sobre a foto: contorno claro, sem fundo. */
.oro-btn--onphoto {
  background: rgba(255,255,255,.08);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
}
.oro-btn--onphoto:hover { background: #FFFFFF; color: var(--oro-deep); border-color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .oro-hero__anim { animation: none; }
}

/* --- Oferta: parcelas fixas ------------------------------------------------
   Bloco escuro entre o hero e os números, como no Elos e no Pura. Quem sinaliza
   a oferta aqui é o contraste com as seções claras em volta, não uma cor de
   fora da paleta — a arte da campanha é bronze com dourado, que já é
   exatamente o sistema do Oro. */

.oro-oferta {
  background: var(--oro-deep);
  padding: clamp(2.5rem, 6vw, 4.25rem) var(--oro-pad);
}
.oro-oferta__box {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  color: #F2E7DC;
}
.oro-oferta__tag {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oro-gold);
  margin-bottom: 1rem !important;
}
.oro-oferta h2 {
  font-family: var(--oro-serif);
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 200;
  /* Fonte fina e corpo grande em duas linhas precisam de respiro: 1.1 deixava a
     segunda linha encostada na primeira. */
  line-height: 1.16;
  color: #FFFFFF;
}
.oro-oferta h2 strong { font-weight: 500; color: var(--oro-sand); }
.oro-oferta__texto {
  margin-top: 1.75rem !important;
  color: #DCC6AF;
  font-size: 1.02rem;
}
.oro-oferta__prazo {
  margin-top: 1.25rem !important;
  font-size: 0.92rem;
  color: #F2E7DC;
}
.oro-oferta__prazo strong { color: var(--oro-gold); }
/* Dentro do bloco escuro, o botão bronze sumiria no fundo. Branco com texto
   escuro é o que mais salta — e é o contraste mais alto da página. */
.oro-oferta .oro-btn { margin-top: 1.75rem; }
.oro-oferta .oro-btn--primary { background: #FFFFFF; color: var(--oro-deep); }
.oro-oferta .oro-btn--primary:hover { background: var(--oro-gold); color: #FFFFFF; }
.oro-oferta__fine {
  margin-top: 1rem !important;
  font-size: 0.78rem;
  color: #B99C81;
}

/* Aviso da mesma condição, repetido ao lado do formulário. */
.oro-cta__flag {
  margin-top: 1.5rem !important;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--oro-gold);
  background: rgba(255,255,255,.06);
  border-radius: 0 4px 4px 0;
  font-size: 0.92rem;
  color: #F2E7DC;
}

/* --- Números -------------------------------------------------------------- */

.oro-numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--oro-line);
  border-block: 1px solid var(--oro-line);
}
.oro-numero {
  background: var(--oro-paper);
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
  text-align: center;
}
.oro-numero__n {
  display: block;
  font-family: var(--oro-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--oro-bronze);
}
.oro-numero__l {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--oro-deep);
}
.oro-numero__d {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--oro-mute);
}
@media (min-width: 720px) { .oro-numeros { grid-template-columns: repeat(4, 1fr); } }

/* --- Ornare: a assinatura ------------------------------------------------- */
/* Bloco próprio do Oro, que não existe nas outras LPs: a marca de mobiliário
   é o argumento central do produto, e as praças internacionais dela (Hudson
   Yards, Ritz-Carlton, Fendi Château) fazem o trabalho de posicionamento
   melhor do que qualquer adjetivo que eu escrevesse. */
.oro-marca { display: grid; gap: clamp(1.75rem, 5vw, 3rem); }
@media (min-width: 900px) { .oro-marca { grid-template-columns: 1fr 1fr; align-items: center; } }

.oro-marca__enderecos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
}
.oro-marca__end { background: var(--oro-deep); padding: 1.1rem 1.2rem; }
.oro-marca__end strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.3;
}
.oro-marca__end span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oro-sand);
}
.oro .oro-marca__entrega { margin-top: 0; display: grid; gap: 0.6rem; }
.oro-marca__entrega li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.95rem;
  color: #DCC6AF;
}
.oro-marca__entrega li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro-gold);
}

/* --- Grades de cards ------------------------------------------------------ */

.oro-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .oro-grid--2, .oro-grid--3, .oro-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .oro-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .oro-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.oro-card { display: flex; flex-direction: column; }
.oro-card__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--oro-line);
  border-radius: 5px;
  overflow: hidden;
  cursor: zoom-in;
}
.oro-card__btn img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s ease;
}
.oro-card__btn:hover img { transform: scale(1.03); }
.oro-card figcaption { padding-top: 0.75rem; }
.oro-card figcaption strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--oro-deep);
}
.oro-card figcaption span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.83rem;
  color: var(--oro-mute);
  line-height: 1.45;
}
.oro-card--dark figcaption strong { color: #FFFFFF; }
.oro-card--dark figcaption span { color: #C2A78E; }
.oro-card--dark .oro-card__btn { background: #43290F; }

/* --- Grade "de revista" (decorado de 227 m²) -------------------------------
   Pedido da Ana em 13/08/2026: a varanda e a suíte ocupam o dobro da largura.
   A ordem da lista `dec227` é calculada para fechar 3 linhas cheias — 2+1+1+
   1+1+2+1 = 9 células. Mexer na quantidade de fotos sem refazer a conta abre um
   buraco na grade. */
@media (min-width: 640px) {
  .oro-grid--revista .oro-card--destaque { grid-column: span 2; }
  /* Recorte mais panorâmico no card largo: com 3/2 ele ficaria muito mais alto
     que as vizinhas e a linha inteira ganharia um degrau. */
  .oro-grid--revista .oro-card--destaque .oro-card__btn img { aspect-ratio: 21 / 9; }
  /* E as vizinhas crescem para acompanhar a altura da linha, em vez de deixarem
     um vão embaixo. O aspect-ratio continua servindo de altura mínima nas
     linhas que não têm card largo nenhum. */
  .oro-grid--revista .oro-card__btn { flex: 1; }
  .oro-grid--revista .oro-card__btn img { height: 100%; }
}

/* Card em retrato — a foto vertical da fachada com o letreiro dourado. Recortada
   em 3/2 como as outras, ela perderia justamente o topo da torre.
   Ela ocupa DUAS linhas da grade, e a seção tem 1 retrato + 4 paisagens = 6
   células, que fecham exatamente 2 linhas de 3 colunas. Mudar a quantidade de
   fotos da seção da obra sem refazer essa conta deixa um buraco na grade. */
@media (min-width: 640px) {
  .oro-card--retrato { grid-row: span 2; }
  .oro-card--retrato .oro-card__btn { flex: 1; }
  .oro-card--retrato .oro-card__btn img { aspect-ratio: auto; height: 100%; object-fit: cover; }
}
/* Numa coluna só (celular) não há linha para expandir: volta a ser um card
   normal, com a proporção original da foto. */
@media (max-width: 639px) {
  .oro-card--retrato .oro-card__btn img { aspect-ratio: 3 / 4; }
}

/* Plantas são desenhos técnicos: fundo branco e a imagem inteira à vista. */
.oro-grid--plantas { margin-top: clamp(2rem, 5vw, 3rem); }
.oro-card--planta .oro-card__btn { background: var(--oro-paper); border: 1px solid var(--oro-line); }
/* A proporção fica fixa mesmo antes da imagem carregar. Com `aspect-ratio:auto`
   o botão colapsa para uns 26px e a grade inteira pula quando a planta (lazy)
   chega. */
.oro-card--planta .oro-card__btn img {
  aspect-ratio: 31 / 20;
  object-fit: contain;
  padding: 0.75rem;
}

/* --- Panorâmicas do decorado de 178 m² (Collar) ----------------------------
   As três imagens do Collar são panoramas de 8000 px de largura — a sala chega
   a 5,6:1. Recortá-las em 3/2 como os outros cards jogaria fora justamente o
   que elas têm de melhor: a varanda vai da Pedra da Gávea à Praia da Barra num
   quadro só.

   Em tela larga (>= 980px) elas aparecem INTEIRAS, de ponta a ponta da janela.
   Não há lightbox aqui de propósito: o `.oro-lb figure` trava em 1100px, o que
   deixaria a sala com 196px de altura — MENOR do que já está na página. Sangrar
   na largura toda já é a maior versão possível.

   No celular esse formato não existe: a 5,6:1, uma faixa de 375px teria 67px de
   altura. Lá cada panorâmica vira uma faixa ALTA que se arrasta para o lado
   dentro do próprio quadro — a página nunca rola na horizontal.

   ⚠️ Os seletores de imagem são DUPLOS (`.oro .oro-pano__vis img`) porque o
   reset `.oro img { max-width:100%; height:auto }` tem a mesma especificidade e
   venceria por ordem se alguém movesse este bloco para cima no arquivo. */

/* `minmax(0, 1fr)` e o `min-width:0` não são enfeite. A figura é item de grade
   e item de grade tem `min-width:auto`, ou seja, se recusa a encolher abaixo do
   conteúdo. Como a imagem do celular tem 4038px de largura real, uma trilha
   `auto` pode resolver para a largura MÁXIMA do conteúdo em vez da largura da
   janela — e aí quem rola para o lado é a página inteira, não a faixa. Com a
   trilha travada em 0 o estouro fica impossível, independentemente do
   navegador. */
.oro-panos { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.75rem, 6vw, 4.5rem); }
.oro-pano { min-width: 0; }

.oro-pano__vis { background: #3F2711; overflow: hidden; max-width: 100%; }
.oro .oro-pano__vis img { width: 100%; height: auto; }

.oro-pano figcaption {
  max-width: 1180px;
  margin-inline: auto;
  padding: 1.1rem var(--oro-pad) 0;
}
.oro-pano figcaption strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 500;
  color: #FFFFFF;
}
.oro-pano figcaption span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  color: #DCC6AF;
  line-height: 1.5;
}
/* Some em tela larga, onde a panorâmica já cabe inteira. O seletor precisa ser
   mais específico que `.oro-pano figcaption span`, senão o `display:block` dele
   ganha e a dica aparece no desktop. */
.oro-pano figcaption .oro-pano__dica { display: none; }

@media (max-width: 979px) {
  .oro-pano__vis {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .oro .oro-pano__vis img {
    width: auto;
    max-width: none;
    height: min(58vh, 460px);
  }
  .oro-pano figcaption .oro-pano__dica {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--oro-sand);
  }
}

/* --- Diferenciais --------------------------------------------------------- */

.oro-difs {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 820px) { .oro-difs { grid-template-columns: 1.4fr 1fr; } }

.oro-difs__col {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--oro-paper);
  border: 1px solid var(--oro-line);
  border-radius: 6px;
}
.oro-difs__col--accent { background: var(--oro-deep); border-color: var(--oro-deep); }
.oro-difs__col h3 {
  font-family: var(--oro-serif);
  font-size: 1.4rem;
  color: var(--oro-deep);
  margin-bottom: 1rem;
}
.oro-difs__col--accent h3 { color: #FFFFFF; }
.oro-difs__col ul { display: grid; gap: 0.6rem; }
.oro-difs__col li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.93rem;
  color: var(--oro-mute);
}
.oro-difs__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro-gold);
}
.oro-difs__col--accent li { color: #DCC6AF; }

/* --- Tipologias por edifício ---------------------------------------------- */

.oro-tipos { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .oro-tipos { grid-template-columns: repeat(2, 1fr); } }

.oro-tipo {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--oro-line);
  border-radius: 6px;
  background: var(--oro-cream);
}
/* Os edifícios que ainda não abriram vendas entram apagados de propósito: a
   página precisa dizer que eles existem (senão a conta de 6 torres não fecha)
   sem convidar ninguém a pedir uma unidade que não está à venda. */
.oro-tipo--fechado { background: transparent; border-style: dashed; }
.oro-tipo h3 {
  font-family: var(--oro-serif);
  font-size: 1.5rem;
  color: var(--oro-deep);
  margin-bottom: 0.35rem;
}
.oro-tipo__selo {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--oro-bronze);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.oro-tipo__selo--fechado { background: transparent; border: 1px solid var(--oro-mute); color: var(--oro-mute); }
.oro-tipo tr { border-top: 1px solid var(--oro-line); }
.oro-tipo tr:first-child { border-top: 0; }
.oro-tipo th {
  text-align: left;
  padding: 0.7rem 0;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--oro-ink);
}
.oro-tipo th span {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--oro-mute);
}
.oro-tipo td {
  text-align: right;
  padding: 0.7rem 0;
  font-size: 0.95rem;
  color: var(--oro-bronze);
  white-space: nowrap;
}

.oro-nota {
  margin-top: 1.5rem !important;
  font-size: 0.78rem;
  color: var(--oro-mute);
  max-width: 44rem;
}
.oro-sec--dark .oro-nota { color: #B99C81; }

/* --- Aviso sobre a vista -------------------------------------------------- */
/* A vista para a lagoa é o que move o comprador do Oro, e ela NÃO é igual em
   todas as torres. Prometer vista de lagoa para o prédio inteiro traz visita
   que desiste ao abrir a janela: anúncio e tempo de corretora jogados fora.
   Este bloco existe para transformar a diferença em conversa em vez de
   frustração. */
.oro-vista {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-left: 3px solid var(--oro-gold);
  background: var(--oro-paper);
  border-radius: 0 5px 5px 0;
}
.oro-sec--dark .oro-vista { background: rgba(255,255,255,.06); }
.oro-vista strong { display: block; font-weight: 500; color: var(--oro-deep); }
.oro-sec--dark .oro-vista strong { color: #FFFFFF; }
.oro .oro-vista p { margin-top: 0.4rem; font-size: 0.93rem; color: var(--oro-mute); }
.oro-sec--dark .oro-vista p { color: #DCC6AF; }

/* A aérea que ancora a tabela de vistas. Proporção fixa para a grade não pular
   enquanto a imagem (lazy) não chega. */
/* ⚠️ O prefixo `.oro` aqui e na implantação abaixo é OBRIGATÓRIO, não estilo.
   As duas são <figure>, e o reset `.oro figure { margin: 0 }` tem
   especificidade (0,1,1) contra (0,1,0) de `.oro-aerea` — ele vence e zera
   tudo. Sem o prefixo estas margens simplesmente não acontecem. Foi isso que
   deixou a implantação grudada na esquerda, com 640px de vazio ao lado, de
   12/08 a 14/08/2026: o `margin-inline: auto` estava escrito e morto. */
.oro .oro-aerea { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.oro-aerea .oro-card__btn { background: var(--oro-cream); }
.oro-aerea .oro-card__btn img { aspect-ratio: 156 / 70; object-fit: cover; }
.oro .oro-aerea figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--oro-mute);
}
.oro-aerea figcaption strong { color: var(--oro-bronze); font-weight: 600; }

/* A implantação. É um desenho técnico: fundo branco, imagem inteira à vista e
   largura contida — em 1180px ela esticaria a ponto de parecer um erro. */
.oro .oro-implantacao {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  /* 626px é a largura NATIVA do arquivo. Não aumente: é desenho de linha com
     rótulos pequenos (BL. 1 TIARA, 01 a 04) e acima disso borra. Centralizada,
     a diferença para a aérea logo acima (1100px) lê como respiro; encostada na
     esquerda, lia como defeito. */
  max-width: 626px;
  margin-inline: auto;
}
.oro-implantacao .oro-card__btn { background: var(--oro-paper); border: 1px solid var(--oro-line); }
.oro-implantacao .oro-card__btn img {
  aspect-ratio: 313 / 350;
  object-fit: contain;
  padding: 0.5rem;
}
.oro .oro-implantacao figcaption {
  margin-top: 0.75rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--oro-mute);
  text-align: center;
}
.oro-implantacao figcaption strong { color: var(--oro-bronze); font-weight: 600; }

/* A tabela de vista por coluna. Um card por edifício à venda; a linha da lagoa
   vem destacada, porque é ela que o comprador está procurando. */
.oro-vistas {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
/* Quatro edifícios à venda: 2×2 em vez de uma fileira de 4. Com 4 colunas os
   cards ficariam com ~270px e o texto da vista quebraria em toda linha. */
@media (min-width: 720px) { .oro-vistas { grid-template-columns: repeat(2, 1fr); } }

.oro-vista-card {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--oro-line);
  border-radius: 6px;
  background: var(--oro-cream);
}
.oro-vista-card h3 {
  font-family: var(--oro-serif);
  font-size: 1.4rem;
  color: var(--oro-deep);
  margin-bottom: 0.35rem;
}
.oro .oro-vista-card dl { margin-top: 0.9rem; }
.oro-vista-card__row {
  padding: 0.7rem 0;
  border-top: 1px solid var(--oro-line);
}
.oro-vista-card__row:first-child { border-top: 0; }
.oro .oro-vista-card__row dt {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oro-mute);
}
.oro .oro-vista-card__row dd {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--oro-ink);
}
/* A vista da lagoa é a que vende: filete dourado e texto em bronze. */
.oro-vista-card__row--lagoa {
  margin-inline: calc(clamp(1.25rem, 3vw, 1.75rem) * -1);
  padding-inline: clamp(1.25rem, 3vw, 1.75rem);
  border-left: 3px solid var(--oro-gold);
  background: var(--oro-paper);
}
.oro .oro-vista-card__row--lagoa dd { font-weight: 600; color: var(--oro-bronze); }

/* A segunda leitura do mesmo prédio: as faces que dão para outras torres. Vem
   em corpo menor, para não competir com a linha principal. */
.oro .oro-vista-card__nota {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--oro-line);
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--oro-mute);
}

/* --- Momentos de lazer ---------------------------------------------------- */

.oro-momento { margin-top: clamp(2.5rem, 6vw, 4rem); }
.oro-momento:first-of-type { margin-top: 0; }
.oro-momento__head { margin-bottom: 1.5rem; max-width: 40rem; }
.oro-momento__head h3 {
  font-family: var(--oro-serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: #FFFFFF;
}
.oro-momento__head p {
  margin-top: 0.5rem !important;
  font-size: 0.95rem;
  color: #C2A78E;
}

.oro-facilities {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(255,255,255,.16);
}
.oro-facilities h3 {
  font-family: var(--oro-serif);
  font-size: 1.3rem;
  color: #FFFFFF;
  margin-bottom: 1rem;
}
.oro-facilities ul { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.oro-facilities li {
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 0.85rem;
  color: #DCC6AF;
}

/* A mesma lista de pastilhas, na seção clara (serviços pay-per-use). */
.oro-facilities--light {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}
.oro-facilities--light h3 { color: var(--oro-deep); }
.oro-facilities--light li {
  border-color: var(--oro-gold);
  background: var(--oro-paper);
  color: var(--oro-ink);
}

/* --- Segurança ------------------------------------------------------------ */

.oro-seg { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .oro-seg { grid-template-columns: repeat(2, 1fr); } }
.oro-seg__item {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--oro-paper);
  border-left: 3px solid var(--oro-gold);
  border-radius: 0 5px 5px 0;
}
.oro-seg__item h3 {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--oro-deep);
}
.oro-seg__item p {
  margin-top: 0.35rem !important;
  font-size: 0.9rem;
  color: var(--oro-mute);
}

/* --- Ficha técnica -------------------------------------------------------- */

.oro-ficha { border-top: 1px solid var(--oro-line); }
.oro-ficha__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--oro-line);
}
.oro-ficha dt {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oro-mute);
}
.oro-ficha dd { font-size: 0.98rem; color: var(--oro-ink); }
@media (min-width: 640px) {
  .oro-ficha__row { grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: baseline; }
}

/* --- Por que falar com a Ana ---------------------------------------------- */

.oro-ana { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .oro-ana { grid-template-columns: 0.8fr 1fr; } }

.oro-ana__fig img {
  width: 100%;
  max-width: 420px;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.oro-ana__texto h2 {
  font-family: var(--oro-serif);
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  line-height: 1.12;
  color: var(--oro-deep);
}
.oro .oro-ana__razoes { display: grid; gap: 1rem; margin-top: 1.75rem; }
.oro-ana__razoes li { display: flex; gap: 0.75rem; align-items: flex-start; }
.oro-ana__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--oro-gold);
}
.oro-ana__razoes p { font-size: 0.95rem; color: var(--oro-mute); }
.oro-ana__assina {
  margin-top: 1.75rem !important;
  margin-bottom: 1.25rem !important;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--oro-deep);
}

/* --- CTA e formulário ----------------------------------------------------- */

.oro-cta__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .oro-cta__grid { grid-template-columns: 1fr 26rem; align-items: start; } }

.oro-cta__texto h2 {
  font-family: var(--oro-serif);
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1.12;
  color: #FFFFFF;
}
.oro-cta__texto .oro-lead { color: #DCC6AF; }
.oro-cta__assina { margin-top: 1.75rem !important; }
.oro-cta__assina strong { display: block; font-size: 1.05rem; color: #FFFFFF; font-weight: 500; }
.oro-cta__assina span { font-size: 0.88rem; color: #C2A78E; }

.oro-form {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--oro-paper);
  border-radius: 8px;
  color: var(--oro-ink);
}
.oro-form h3 {
  font-family: var(--oro-serif);
  font-size: 1.5rem;
  color: var(--oro-deep);
  margin-bottom: 1.25rem;
}
.oro-form label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--oro-deep);
}
.oro-form__opt { font-weight: 400; color: var(--oro-mute); }
.oro-form input,
.oro-form select,
.oro-form textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 0.35rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--oro-line);
  border-radius: 4px;
  font-family: var(--oro-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--oro-ink);
  background: var(--oro-paper);
}
.oro-form textarea { min-height: auto; resize: vertical; }
.oro-form input:focus,
.oro-form select:focus,
.oro-form textarea:focus {
  outline: 2px solid var(--oro-bronze);
  outline-offset: 1px;
  border-color: transparent;
}
.oro-form__submit { width: 100%; margin-top: 0.5rem; }
.oro-form__fine {
  margin-top: 0.9rem !important;
  font-size: 0.75rem;
  color: var(--oro-mute);
  line-height: 1.5;
}

/* --- Vitrine dos condomínios vizinhos ------------------------------------- */
/* O componente é compartilhado e traz as próprias cores padrão; aqui só
   amarramos ele à paleta desta LP. Ver ilhapura_condominios.css. */
.oro .ipc {
  --ipc-fundo:  var(--oro-cream);
  --ipc-acento: var(--oro-bronze);
  --ipc-escuro: var(--oro-deep);
  --ipc-tinta:  var(--oro-ink);
  --ipc-suave:  var(--oro-mute);
  --ipc-linha:  var(--oro-line);
}
.oro .ipc h2, .oro .ipc h3 { font-family: var(--oro-serif); }

/* --- Rodapé compartilhado ------------------------------------------------- */
/* Escopado em `.oro`: um `.rlp` solto aqui pintaria o rodapé de todas as
   outras LPs com a paleta do Oro, já que o CSS é um bundle global. */
.oro .rlp {
  --rlp-fundo: #3A2310;
  --rlp-texto: #C2A78E;
  --rlp-linha: rgba(255,255,255,.14);
  --rlp-fraco: #9A7F67;
}

/* --- Lightbox ------------------------------------------------------------- */

.oro-lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20, 12, 5, .94);
}
.oro-lb[hidden] { display: none; }
.oro-lb figure { max-width: min(1100px, 100%); max-height: 100%; }
.oro-lb img {
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
  border-radius: 4px;
  object-fit: contain;
}
.oro-lb figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.9rem;
  color: #DCC6AF;
}
.oro-lb__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #FFFFFF;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.oro-lb__close:hover { background: rgba(255,255,255,.24); }

/* --- Revelação no scroll -------------------------------------------------- */

.oro-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.oro-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .oro-reveal { opacity: 1; transform: none; transition: none; }
  .oro-card__btn img { transition: none; }
  .oro-faq__item summary,
  .oro-faq__sinal { transition: none; }
}

/* ============================================================================
   Localização + o bairro, e Ir e vir sem barreiras
   Conteúdo compartilhado com Elos e Pura: é o mesmo bairro para todo
   condomínio do Ilha Pura. Aqui só a roupagem muda.
   ========================================================================== */

.oro-ancora { display: block; height: 0; scroll-margin-top: 2rem; }

.oro-loc {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 900px) { .oro-loc { grid-template-columns: 1fr 1.15fr; align-items: start; } }

.oro .oro-loc__texto h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.15;
  color: var(--oro-deep);
}
.oro .oro-loc__texto p {
  margin: 0 0 1.6rem;
  font-size: clamp(1rem, 1.9vw, 1.08rem);
  line-height: 1.7;
  color: var(--oro-mute);
  max-width: 40ch;
}

/* Grade de duas colunas com filete de 1px: o próprio `gap` sobre um fundo
   colorido desenha as linhas, sem border em cada célula. */
.oro-loc__lista {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--oro-line);
  border: 1px solid var(--oro-line);
}
/* Em 360px (largura comum no Android) as duas colunas não cabiam e a PÁGINA
   INTEIRA passava a rolar para o lado — medido em 14/08/2026. Causa: o `dd` tem
   `white-space:nowrap` e item de grade tem `min-width:auto`, ou seja, se recusa
   a encolher abaixo do conteúdo, então a lista estourava a `.oro-wrap` em 30px.
   Em 375px passava raspando, e era por isso que não tinha aparecido antes.
   Numa coluna só cada item fica com a largura toda e o nowrap deixa de doer. */
@media (max-width: 400px) {
  .oro-loc__lista { grid-template-columns: 1fr; }
}
.oro-loc__item {
  background: var(--oro-paper);
  padding: 0.95rem 1.1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.oro .oro-loc__item dt {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--oro-ink);
}
/* `dd` tem margin-left de 40px por padrão no navegador e desmontaria a grade. */
.oro .oro-loc__item dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--oro-bronze);
  white-space: nowrap;
}

/* --- Ir e vir sem barreiras (seção escura) -------------------------------- */

.oro-acess { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .oro-acess { grid-template-columns: 1fr 1.1fr; align-items: center; } }

.oro-acess__fig { margin: 0; }
.oro-acess__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.oro-sec--dark .oro-acess__texto h2 { color: #FFFFFF; }
.oro-acess__texto h2 em { font-style: italic; color: var(--oro-sand); }
.oro-sec--dark .oro-acess__texto .oro-lead { color: #DCC6AF; }

/* Prefixado: é um <dl>, e `.oro dl { margin: 0 }` vencia. */
.oro .oro-acess__lista {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.oro-acess__item { background: var(--oro-deep); padding: 1.1rem 1.2rem; }
.oro .oro-acess__item dt {
  margin-bottom: 0.3rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #FFFFFF;
}
.oro .oro-acess__item dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #C9B49F;
}

/* ============================================================================
   Perguntas frequentes — <details>/<summary> nativo, sem JS
   ========================================================================== */
.oro-faq { border-top: 1px solid var(--oro-line); }

.oro-faq__item { border-bottom: 1px solid var(--oro-line); }

.oro-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
  cursor: pointer;
  font-size: clamp(1rem, 1.9vw, 1.1rem);
  font-weight: 500;
  color: var(--oro-deep);
  line-height: 1.45;
  transition: color 0.2s ease;
}
/* O triângulo padrão não é estilizável e aparece diferente em cada navegador.
   Tirado nos dois dialetos: `list-style` cobre Chrome/Firefox, o
   pseudo-elemento `::-webkit-details-marker` cobre o Safari. */
.oro-faq__item summary { list-style: none; }
.oro-faq__item summary::-webkit-details-marker { display: none; }
.oro-faq__item summary:hover { color: var(--oro-gold); }
.oro-faq__item summary:focus-visible {
  outline: 2px solid var(--oro-bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sinal de + que vira − quando abre. Dois traços em vez de texto: não depende
   de fonte e fica alinhado em qualquer tamanho de tela. */
.oro-faq__sinal {
  position: relative;
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.35rem;
  transition: transform 0.25s ease;
}
.oro-faq__sinal::before,
.oro-faq__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--oro-gold);
}
.oro-faq__sinal::after { transform: rotate(90deg); }
.oro-faq__item[open] .oro-faq__sinal { transform: rotate(45deg); }
.oro-faq__item[open] summary { color: var(--oro-bronze); }

/* `.oro p { margin: 0 }` tem a mesma especificidade que `.oro-faq__resposta p`
   e venceria por ordem se este arquivo mudasse de posição no bundle. O `.oro`
   na frente garante a margem independente disso. */
.oro-faq__resposta { padding: 0 0 1.4rem; max-width: 46rem; }
.oro .oro-faq__resposta p {
  margin: 0;
  font-size: clamp(0.95rem, 1.7vw, 1.03rem);
  line-height: 1.7;
  color: var(--oro-mute);
}

.oro .oro-faq__rodape {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--oro-mute);
}
.oro-faq__rodape a {
  color: var(--oro-bronze);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.oro-faq__rodape a:hover { color: var(--oro-gold); }
/* ===========================================================================
   PURA — Ilha Pura · /pura
   TODAS as classes começam com .pura. O application.css faz require_tree, ou
   seja, este arquivo entra num bundle global junto com onlife.css, astra.css e
   symphony.css — sem o prefixo, uma regra daqui quebraria as outras LPs.
   =========================================================================== */

/* Paleta e tipografia MEDIDAS na página oficial do Pura
   (ilhapura.com.br/empreendimentos/pura-por-artefacto), em 11/08/2026 — não
   inventadas.

   🚨 A primeira versão desta LP foi feita ANTES de eu ter a página oficial: usei
   um verde tirado do wordmark, creme e dourado do flyer da promoção, e a fonte
   Jost "de ouvido". Estava tudo errado — a Ana pegou. Fica o registro para
   ninguém repetir: LP nova só ganha paleta depois de medir a página oficial do
   empreendimento. Palpite a partir de logo e flyer não vale.

   Como funciona o sistema do Ilha Pura: TODOS os empreendimentos usam a mesma
   base (Albert Sans, títulos peso 200 em preto, neutros #F0F0F0/#323232) e cada
   um tem UMA cor própria. A do Elos é #1B4A61; a do Pura é #3C8AA4. */
.pura {
  --pura-deep:   #004964;   /* azul escuro do portal — seções escuras */
  /* Botões e textos de acento ficam num azul escuro, não no #3C8AA4: texto
     branco sobre o azul claro dá 3,9:1 de contraste, abaixo do mínimo de
     leitura. O site da construtora usa assim mesmo; aqui a legibilidade ganha,
     e a cor do Pura aparece nos detalhes (--pura-teal-3), que é onde ela pode
     ser clara sem prejudicar ninguém. */
  --pura-teal:   #1B4A61;
  --pura-teal-2: #7FC4DB;   /* claro — acentos sobre fundo escuro */
  --pura-teal-3: #3C8AA4;   /* A COR DO PURA — filetes, detalhes, destaques */
  --pura-cream:  #F0F0F0;   /* neutro claro do portal — seções alternadas */
  --pura-paper:  #FFFFFF;
  --pura-ink:    #323232;   /* texto e TÍTULOS (no site eles são pretos) */
  --pura-mute:   #6B6B6B;   /* texto secundário */
  --pura-line:   #E0E0E0;

  /* Albert Sans em tudo, como no site inteiro do Ilha Pura. O peso 200 é o dos
     títulos deles — bem mais fino do que o que eu tinha usado. */
  --pura-serif: "Albert Sans", system-ui, -apple-system, sans-serif;
  --pura-sans:  "Albert Sans", system-ui, -apple-system, sans-serif;

  --pura-pad: clamp(1.25rem, 5vw, 2.5rem);

  font-family: var(--pura-sans);
  color: var(--pura-ink);
  background: var(--pura-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Reset local. O seletor precisa ser prefixado nos DOIS níveis: um
   `.pura ul{margin:0}` solto venceria por especificidade qualquer margem que
   as regras de filho tentassem aplicar depois. */
.pura figure { margin: 0; }
.pura img { max-width: 100%; height: auto; display: block; }
.pura h1, .pura h2, .pura h3 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }
.pura p { margin: 0; }
.pura ul { margin: 0; padding: 0; list-style: none; }
.pura table { border-collapse: collapse; width: 100%; }
.pura dl, .pura dd, .pura dt { margin: 0; }
.pura *, .pura *::before, .pura *::after { box-sizing: border-box; }

.pura-wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--pura-pad);
}
.pura-wrap--narrow { max-width: 820px; }

/* --- Blocos de seção ------------------------------------------------------ */

.pura-sec { padding-block: clamp(3.5rem, 9vw, 7rem); }
.pura-sec--light { background: var(--pura-cream); }
.pura-sec--dark  { background: var(--pura-deep); color: #EAF1F3; }

.pura-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
/* Peso 200 e cor preta: é assim que a página oficial do Pura escreve os
   títulos de seção (48px, weight 200, #000). */
.pura-head h2 {
  font-family: var(--pura-serif);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 200;
  line-height: 1.12;
  color: var(--pura-ink);
}
.pura-head--invert h2 { color: #FFFFFF; }
.pura-head--invert .pura-lead { color: #C2D4DA; }

.pura-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pura-teal);
  margin-bottom: 0.9rem !important;
}
.pura-sec--dark .pura-eyebrow { color: var(--pura-teal-2); }

.pura-lead {
  margin-top: 1.1rem !important;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  color: var(--pura-mute);
  max-width: 42rem;
}

/* --- Botões --------------------------------------------------------------- */

.pura-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;               /* alvo de toque confortável */
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--pura-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pura-btn--primary { background: var(--pura-teal); color: #FFFFFF; }
.pura-btn--primary:hover { background: var(--pura-deep); }
.pura-btn--ghost {
  background: transparent;
  color: var(--pura-deep);
  border-color: var(--pura-deep);
}
.pura-btn--ghost:hover { background: var(--pura-deep); color: #FFFFFF; }
.pura-sec--dark .pura-btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.pura-sec--dark .pura-btn--ghost:hover { background: #FFFFFF; color: var(--pura-deep); }

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

/* Tela cheia com vídeo de fundo. `svh` em vez de `vh`: no celular, `100vh`
   conta a barra do navegador que some ao rolar, e o hero fica alto demais. */
.pura-hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--pura-deep);
}
/* 🚨 O prefixo `.pura` salva o topo inteiro. Sem ele, `.pura img { height: auto }`
   (0,1,1) vence `.pura-hero__bg` (0,1,0) e a foto de fundo perde a altura: vira
   uma FAIXA de 211px no celular, com o resto do topo em cor lisa. Mesmo defeito
   que o Oro tinha; encontrado na varredura de 14/08/2026. */
.pura .pura-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Escurecimento mais forte embaixo, onde fica o texto, e no topo, para o
   conteúdo não competir com o céu claro do vídeo. */
.pura-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(6, 28, 34, .72) 0%,
    rgba(6, 28, 34, .40) 42%,
    rgba(6, 28, 34, .88) 100%);
}
.pura-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  max-width: 1180px;
  margin-inline: auto;
  padding: 7rem var(--pura-pad) 3.5rem;
}
@media (min-width: 768px) { .pura-hero__inner { padding-bottom: 5rem; } }

.pura-hero__anim { animation: pura-fade-up 900ms ease-out both; }
@keyframes pura-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.pura-hero__logo {
  width: clamp(130px, 18vw, 180px);
  height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
.pura-hero__place {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem !important;
  padding-left: 0.75rem;
  border-left: 2px solid var(--pura-teal-2);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #CFE4EA;
}
.pura-hero__place span { color: rgba(255,255,255,.4); }

.pura-hero__title {
  max-width: 20ch;
  font-family: var(--pura-serif);
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  font-weight: 200;
  line-height: 1.06;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
/* Mesma armadilha do reset: `.pura h1{font-weight:400}` tem especificidade
   maior que `.pura-hero__title`, então o peso fino do título do hero nunca
   valia. Com o `.pura` na frente, vale. */
.pura .pura-hero__title { font-weight: 200; }
.pura-hero__title em { font-style: normal; font-weight: 500; color: var(--pura-teal-2); }

.pura-hero__lead {
  margin-top: 1.25rem !important;
  max-width: 40rem;
  font-size: clamp(0.98rem, 1.9vw, 1.12rem);
  color: #D6E4E8;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.pura-hero__lead strong { color: #FFFFFF; font-weight: 600; }

.pura-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  max-width: 48rem;
  margin-top: 2.25rem !important;
}
.pura-hero__fact { border-left: 2px solid var(--pura-teal-3); padding-left: 0.875rem; }
.pura-hero__fact-k {
  display: block;
  font-family: var(--pura-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
}
.pura-hero__fact-v {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: #A9C4CB;
}

.pura-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

/* Botão secundário sobre o vídeo: contorno claro, sem fundo. */
.pura-btn--onvideo {
  background: rgba(255,255,255,.08);
  color: #FFFFFF;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
}
.pura-btn--onvideo:hover { background: #FFFFFF; color: var(--pura-deep); border-color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .pura-hero__anim { animation: none; }
}

/* O bloco .pura-tour do Elos (vídeo do decorado) foi removido: o material do
   Pura não tem vídeo aproveitável, e regra sem uso pesa no bundle global. */

/* --- Por que falar com a Ana ---------------------------------------------- */

.pura-ana { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .pura-ana { grid-template-columns: 0.8fr 1fr; } }

.pura-ana__fig img {
  width: 100%;
  max-width: 420px;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pura-ana__texto h2 {
  font-family: var(--pura-serif);
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  line-height: 1.12;
  color: var(--pura-deep);
}
.pura-ana__razoes { display: grid; gap: 1rem; margin-top: 1.75rem !important; }
.pura-ana__razoes li { display: flex; gap: 0.75rem; align-items: flex-start; }
.pura-ana__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--pura-teal-3);
}
.pura-ana__razoes p { font-size: 0.95rem; color: var(--pura-mute); }
.pura-ana__assina {
  margin-top: 1.75rem !important;
  margin-bottom: 1.25rem !important;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--pura-deep);
}

/* --- Oferta: kit da cobertura (deck, piscina e churrasqueira) --------------
   Bloco escuro entre o hero e os números, como no Elos. A versão anterior era
   creme com dourado, copiada do flyer da promoção — bonita, mas fora do
   sistema do Ilha Pura. Quem sinaliza a oferta aqui é o contraste com as
   seções claras em volta, não uma cor de fora da paleta. */

.pura-oferta {
  background: var(--pura-deep);
  padding: clamp(2.5rem, 6vw, 4.25rem) var(--pura-pad);
}
.pura-oferta__box {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  color: #EAF1F3;
}
.pura-oferta__tag {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pura-teal-3);
  margin-bottom: 1rem !important;
}
.pura-oferta h2 {
  font-family: var(--pura-serif);
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 200;
  /* 1.1 apertava demais: o título tem duas linhas e a de baixo encostava nas
     caixas do kit. Com fonte fina e corpo grande, respiro faz diferença. */
  line-height: 1.16;
  color: #FFFFFF;
}
.pura-oferta h2 strong { font-weight: 500; color: var(--pura-teal-2); }

/* Os três itens do kit, do jeito que a arte lista: deck, piscina e
   churrasqueira. Grade e não lista corrida — no celular viram três linhas. */
.pura-oferta__kit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
/* 🚨 O seletor precisa do `.pura` na frente. Sem ele, o reset `.pura ul{margin:0}`
   vence por especificidade e a margem simplesmente não acontece — foi por isso
   que o título ficou colado nas caixas do kit, e por isso aumentar o valor
   sozinho não resolvia nada. Mesmo gotcha que está no CLAUDE.md. */
.pura .pura-oferta__kit { margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (max-width: 560px) { .pura-oferta__kit { grid-template-columns: 1fr; } }
.pura-oferta__kit li {
  padding: 0.9rem 0.5rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  font-size: 0.95rem;
  font-weight: 500;
  color: #FFFFFF;
}
.pura-oferta__texto {
  margin-top: 1.75rem !important;
  color: #C2D4DA;
  font-size: 1.02rem;
}
.pura-oferta__prazo {
  margin-top: 1.25rem !important;
  font-size: 0.92rem;
  color: #EAF1F3;
}
.pura-oferta__prazo strong { color: var(--pura-teal-3); }
/* Dentro do bloco escuro, o botão azul sumiria no fundo. Branco com texto
   escuro é o que mais salta — e é o contraste mais alto da página. */
.pura-oferta .pura-btn { margin-top: 1.75rem; }
.pura-oferta .pura-btn--primary { background: #FFFFFF; color: var(--pura-deep); }
.pura-oferta .pura-btn--primary:hover { background: var(--pura-teal-3); color: #FFFFFF; }
.pura-oferta__fine {
  margin-top: 1rem !important;
  font-size: 0.78rem;
  color: #8FA9B1;
}

/* --- Números -------------------------------------------------------------- */

.pura-numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--pura-line);
  border-block: 1px solid var(--pura-line);
}
.pura-numero {
  background: var(--pura-paper);
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
  text-align: center;
}
.pura-numero__n {
  display: block;
  font-family: var(--pura-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--pura-teal);
}
.pura-numero__l {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--pura-deep);
}
.pura-numero__d {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--pura-mute);
}
@media (min-width: 720px) { .pura-numeros { grid-template-columns: repeat(4, 1fr); } }

/* --- Grades de cards ------------------------------------------------------ */

.pura-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .pura-grid--2, .pura-grid--3, .pura-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .pura-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .pura-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.pura-card { display: flex; flex-direction: column; }
.pura-card__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--pura-line);
  border-radius: 5px;
  overflow: hidden;
  cursor: zoom-in;
}
.pura-card__btn img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s ease;
}
.pura-card__btn:hover img { transform: scale(1.03); }
.pura-card figcaption { padding-top: 0.75rem; }
.pura-card figcaption strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--pura-deep);
}
.pura-card figcaption span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.83rem;
  color: var(--pura-mute);
  line-height: 1.45;
}
.pura-card--dark figcaption strong { color: #FFFFFF; }
.pura-card--dark figcaption span { color: #9FB8BF; }
.pura-card--dark .pura-card__btn { background: #10454F; }

/* Plantas são desenhos técnicos: fundo branco e a imagem inteira à vista. */
.pura-grid--plantas { margin-top: clamp(2rem, 5vw, 3rem); }
.pura-card--planta .pura-card__btn { background: var(--pura-paper); border: 1px solid var(--pura-line); }
/* A proporção fica fixa mesmo antes da imagem carregar. Com `aspect-ratio:auto`
   o botão colapsava para ~26px e a grade inteira pulava quando a planta
   (lazy) chegava. */
.pura-card--planta .pura-card__btn img {
  aspect-ratio: 7 / 6;
  object-fit: contain;
  padding: 0.75rem;
}

/* --- Diferenciais --------------------------------------------------------- */

.pura-difs {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 820px) { .pura-difs { grid-template-columns: 1.4fr 1fr; } }

.pura-difs__col {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--pura-paper);
  border: 1px solid var(--pura-line);
  border-radius: 6px;
}
.pura-difs__col--accent { background: var(--pura-deep); border-color: var(--pura-deep); }
.pura-difs__col h3 {
  font-family: var(--pura-serif);
  font-size: 1.4rem;
  color: var(--pura-deep);
  margin-bottom: 1rem;
}
.pura-difs__col--accent h3 { color: #FFFFFF; }
.pura-difs__col ul { display: grid; gap: 0.6rem; }
.pura-difs__col li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.93rem;
  color: var(--pura-mute);
}
.pura-difs__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pura-teal-3);
}
.pura-difs__col--accent li { color: #C2D4DA; }

/* --- Tipologias ----------------------------------------------------------- */

/* No Elos eram dois conjuntos de edifícios, lado a lado. No Pura só os
   edifícios Essência e Cor estão lançados, e um card sozinho numa grade de
   duas colunas ficaria com metade da largura e um buraco do lado. */
.pura-tipos { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .pura-tipos { grid-template-columns: repeat(2, 1fr); } }
.pura-tipos--unica { grid-template-columns: 1fr !important; max-width: 720px; }

.pura-tipo {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--pura-line);
  border-radius: 6px;
  background: var(--pura-cream);
}
.pura-tipo h3 {
  font-family: var(--pura-serif);
  font-size: 1.5rem;
  color: var(--pura-deep);
  margin-bottom: 0.75rem;
}
.pura-tipo tr { border-top: 1px solid var(--pura-line); }
.pura-tipo tr:first-child { border-top: 0; }
.pura-tipo th {
  text-align: left;
  padding: 0.7rem 0;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--pura-ink);
}
.pura-tipo th span {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--pura-mute);
}
.pura-tipo td {
  text-align: right;
  padding: 0.7rem 0;
  font-size: 0.95rem;
  color: var(--pura-teal);
  white-space: nowrap;
}

.pura-nota {
  margin-top: 1.5rem !important;
  font-size: 0.78rem;
  color: var(--pura-mute);
  max-width: 44rem;
}

/* --- Momentos de lazer ---------------------------------------------------- */

.pura-momento { margin-top: clamp(2.5rem, 6vw, 4rem); }
.pura-momento:first-of-type { margin-top: 0; }
.pura-momento__head { margin-bottom: 1.5rem; max-width: 40rem; }
.pura-momento__head h3 {
  font-family: var(--pura-serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: #FFFFFF;
}
.pura-momento__head p {
  margin-top: 0.5rem !important;
  font-size: 0.95rem;
  color: #9FB8BF;
}

.pura-facilities {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid rgba(255,255,255,.16);
}
.pura-facilities h3 {
  font-family: var(--pura-serif);
  font-size: 1.3rem;
  color: #FFFFFF;
  margin-bottom: 1rem;
}
.pura-facilities ul { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pura-facilities li {
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 0.85rem;
  color: #C2D4DA;
}

/* A mesma lista de pastilhas, mas na seção clara (serviços pay-per-use). As
   cores de fundo escuro acima ficariam ilegíveis sobre o creme. */
.pura-facilities--light {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}
.pura-facilities--light h3 { color: var(--pura-deep); }
.pura-facilities--light li {
  border-color: var(--pura-teal-3);
  background: var(--pura-paper);
  color: var(--pura-ink);
}

/* --- Design e segurança --------------------------------------------------- */

.pura-seg { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .pura-seg { grid-template-columns: repeat(2, 1fr); } }
.pura-seg__item {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--pura-paper);
  border-left: 3px solid var(--pura-teal-3);
  border-radius: 0 5px 5px 0;
}
.pura-seg__item h3 {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--pura-deep);
}
.pura-seg__item p {
  margin-top: 0.35rem !important;
  font-size: 0.9rem;
  color: var(--pura-mute);
}

/* --- Ficha técnica -------------------------------------------------------- */

.pura-ficha { border-top: 1px solid var(--pura-line); }
.pura-ficha__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--pura-line);
}
.pura-ficha dt {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pura-mute);
}
.pura-ficha dd { font-size: 0.98rem; color: var(--pura-ink); }
@media (min-width: 640px) {
  .pura-ficha__row { grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: baseline; }
}

/* --- CTA e formulário ----------------------------------------------------- */

.pura-cta__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .pura-cta__grid { grid-template-columns: 1fr 26rem; align-items: start; } }

.pura-cta__texto h2 {
  font-family: var(--pura-serif);
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1.12;
  color: #FFFFFF;
}
.pura-cta__texto .pura-lead { color: #C2D4DA; }
.pura-cta__flag {
  margin-top: 1.5rem !important;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--pura-teal-3);
  background: rgba(255,255,255,.06);
  border-radius: 0 4px 4px 0;
  font-size: 0.92rem;
  color: #EAF1F3;
}
.pura-cta__assina { margin-top: 1.75rem !important; }
.pura-cta__assina strong { display: block; font-size: 1.05rem; color: #FFFFFF; font-weight: 500; }
.pura-cta__assina span { font-size: 0.88rem; color: #9FB8BF; }

.pura-form {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--pura-paper);
  border-radius: 8px;
  color: var(--pura-ink);
}
.pura-form h3 {
  font-family: var(--pura-serif);
  font-size: 1.5rem;
  color: var(--pura-deep);
  margin-bottom: 1.25rem;
}
.pura-form label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--pura-deep);
}
.pura-form__opt { font-weight: 400; color: var(--pura-mute); }
.pura-form input,
.pura-form select,
.pura-form textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 0.35rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--pura-line);
  border-radius: 4px;
  font-family: var(--pura-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--pura-ink);
  background: var(--pura-paper);
}
.pura-form textarea { min-height: auto; resize: vertical; }
.pura-form input:focus,
.pura-form select:focus,
.pura-form textarea:focus {
  outline: 2px solid var(--pura-teal);
  outline-offset: 1px;
  border-color: transparent;
}
.pura-form__submit { width: 100%; margin-top: 0.5rem; }
.pura-form__fine {
  margin-top: 0.9rem !important;
  font-size: 0.75rem;
  color: var(--pura-mute);
  line-height: 1.5;
}

/* --- Vitrine dos condomínios vizinhos ------------------------------------- */
/* O componente é compartilhado e traz as próprias cores padrão; aqui só
   amarramos ele à paleta desta LP. Ver ilhapura_condominios.css. */
.pura .ipc {
  --ipc-fundo:  var(--pura-cream);
  --ipc-acento: var(--pura-teal);
  --ipc-escuro: var(--pura-deep);
  --ipc-tinta:  var(--pura-ink);
  --ipc-suave:  var(--pura-mute);
  --ipc-linha:  var(--pura-line);
}
.pura .ipc h2, .pura .ipc h3 { font-family: var(--pura-serif); }

/* --- Rodapé compartilhado ------------------------------------------------- */
/* O rodapé e o botão flutuante vêm de shared/_rodape_lp, com CSS próprio.
   Aqui só amarramos as cores dele à paleta desta LP. */
/* Escopado em `.pura`: um `.rlp` solto aqui pintaria o rodapé de todas as
   outras LPs com a paleta do Pura, já que o CSS é um bundle global. */
.pura .rlp {
  --rlp-fundo: #05323F;
  --rlp-texto: #A9C4CB;
  --rlp-linha: rgba(255,255,255,.14);
  --rlp-fraco: #7F9BA3;
}

/* --- Lightbox ------------------------------------------------------------- */

.pura-lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 20, 24, .93);
}
.pura-lb[hidden] { display: none; }
.pura-lb figure { max-width: min(1100px, 100%); max-height: 100%; }
.pura-lb img {
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
  border-radius: 4px;
  object-fit: contain;
}
.pura-lb figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.9rem;
  color: #C2D4DA;
}
.pura-lb__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #FFFFFF;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.pura-lb__close:hover { background: rgba(255,255,255,.24); }

/* --- Revelação no scroll -------------------------------------------------- */

.pura-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.pura-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pura-reveal { opacity: 1; transform: none; transition: none; }
  .pura-card__btn img { transition: none; }
  .pura-faq__item summary,
  .pura-faq__sinal { transition: none; }
}

/* ============================================================================
   Localização + o bairro (seções fundidas) e Ir e vir sem barreiras
   Conteúdo clonado do Astra: é o mesmo bairro para todo condomínio do Ilha
   Pura. Aqui só a roupagem muda, para o design system do Pura.
   ========================================================================== */

/* Âncora invisível: `#bairro` era o id da seção antiga e pode estar em link
   já compartilhado. Fica com scroll-margin para o título não colar no topo. */
.pura-ancora { display: block; height: 0; scroll-margin-top: 2rem; }

.pura-loc {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 900px) { .pura-loc { grid-template-columns: 1fr 1.15fr; align-items: start; } }

.pura .pura-loc__texto h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.15;
  color: var(--pura-deep);
}
.pura .pura-loc__texto p {
  margin: 0 0 1.6rem;
  font-size: clamp(1rem, 1.9vw, 1.08rem);
  line-height: 1.7;
  color: var(--pura-mute);
  max-width: 40ch;
}

/* Grade de duas colunas com filete de 1px: o próprio `gap` sobre um fundo
   colorido desenha as linhas, sem precisar de border em cada célula. */
.pura-loc__lista {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--pura-line);
  border: 1px solid var(--pura-line);
}
.pura-loc__item {
  background: var(--pura-paper);
  padding: 0.95rem 1.1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.pura .pura-loc__item dt {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--pura-ink);
}
/* `dd` tem margin-left de 40px por padrão no navegador e desmontaria a grade. */
.pura .pura-loc__item dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pura-teal-3);
  white-space: nowrap;
}
.pura-sec--light .pura-loc__item { background: var(--pura-paper); }

/* --- Ir e vir sem barreiras (seção escura) -------------------------------- */

.pura-acess { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .pura-acess { grid-template-columns: 1fr 1.1fr; align-items: center; } }

.pura-acess__fig { margin: 0; }
.pura-acess__fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.pura-sec--dark .pura-acess__texto h2 { color: #FFFFFF; }
.pura-acess__texto h2 em { font-style: italic; color: var(--pura-teal-2); }
.pura-sec--dark .pura-acess__texto .pura-lead { color: #C2D4DA; }

/* Prefixado: é um <dl>, e `.pura dl { margin: 0 }` vencia. */
.pura .pura-acess__lista {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.pura-acess__item { background: var(--pura-deep); padding: 1.1rem 1.2rem; }
.pura .pura-acess__item dt {
  margin-bottom: 0.3rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #FFFFFF;
}
.pura .pura-acess__item dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #A8C2CA;
}

/* ============================================================================
   Perguntas frequentes — <details>/<summary> nativo, sem JS
   ========================================================================== */
.pura-faq { border-top: 1px solid var(--pura-line); }

.pura-faq__item { border-bottom: 1px solid var(--pura-line); }

.pura-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
  cursor: pointer;
  font-size: clamp(1rem, 1.9vw, 1.1rem);
  font-weight: 500;
  color: var(--pura-deep);
  line-height: 1.45;
  transition: color 0.2s ease;
}
/* O triângulo padrão do navegador não é estilizável e aparece diferente em cada
   um. Tirado nos dois dialetos: `list-style` cobre Chrome/Firefox, o
   pseudo-elemento `::-webkit-details-marker` cobre o Safari. */
.pura-faq__item summary { list-style: none; }
.pura-faq__item summary::-webkit-details-marker { display: none; }
.pura-faq__item summary:hover { color: var(--pura-teal-3); }
.pura-faq__item summary:focus-visible {
  outline: 2px solid var(--pura-teal-2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sinal de + que vira − quando abre. Feito com dois traços em vez de texto: não
   depende de fonte e fica alinhado em qualquer tamanho de tela. */
.pura-faq__sinal {
  position: relative;
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.35rem;
  transition: transform 0.25s ease;
}
.pura-faq__sinal::before,
.pura-faq__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--pura-teal-3);
}
.pura-faq__sinal::after { transform: rotate(90deg); }
.pura-faq__item[open] .pura-faq__sinal { transform: rotate(45deg); }
.pura-faq__item[open] summary { color: var(--pura-teal-3); }

/* `.pura p { margin: 0 }` tem a mesma especificidade que `.pura-faq__resposta p`
   e venceria por ordem se este arquivo mudasse de posição. O `.pura` na frente
   garante a margem independente disso. */
.pura-faq__resposta { padding: 0 0 1.4rem; max-width: 46rem; }
.pura .pura-faq__resposta p {
  margin: 0;
  font-size: clamp(0.95rem, 1.7vw, 1.03rem);
  line-height: 1.7;
  color: var(--pura-mute);
}

.pura .pura-faq__rodape {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--pura-mute);
}
.pura-faq__rodape a {
  color: var(--pura-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pura-faq__rodape a:hover { color: var(--pura-teal-3); }
/* ===========================================================================
   SAINT MICHEL — Ilha Pura
   Landing page /saint-michel · view: pages/ilha_pura/saint_michel.html.erb

   TODA classe é prefixada com `.sm`. O application.css faz `require_tree .`,
   então este arquivo entra no mesmo bundle global das outras LPs — sem prefixo,
   uma página quebraria o layout da outra.

   Paleta: VINHO. Medida no logo oficial do empreendimento (o fundo do wordmark
   no book é #853035 e o wordmark em si, #8B3D36). As irmãs já ocupam o teal
   (Elos e Pura), o bronze (Oro) e o grafite (Astra) — o vinho deixa o Saint
   Michel reconhecível na vitrine, onde os cinco aparecem lado a lado.

   Tipografia: Albert Sans (design system do Ilha Pura). Títulos em peso 200.
   =========================================================================== */

.sm {
  --sm-deep:  #4A1B20;   /* vinho escuro — seções escuras */
  --sm-wine:  #853035;   /* a cor do logo — botões e destaques */
  --sm-rose:  #E8C6C4;   /* claro — texto de apoio sobre fundo escuro */
  --sm-cream: #F0F0F0;   /* neutro claro do portal — seções alternadas */
  --sm-paper: #FFFFFF;
  --sm-ink:   #323232;   /* texto e títulos */
  --sm-mute:  #6B6B6B;   /* texto secundário */
  --sm-linha: #E2E2E2;

  /* Rodapé compartilhado (shared/_rodape_lp) — cada LP pinta o seu. */
  --rlp-fundo: #3A1418;
  --rlp-texto: #E8C6C4;
  --rlp-linha: rgba(255,255,255,.14);
  --rlp-fraco: #B98F8C;

  font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--sm-ink);
  background: var(--sm-paper);
  line-height: 1.6;
}

/* Resets escopados, todos dentro de :where().
   ⚠️ Isto NÃO é firula. Escrito como `.sm p { margin: 0 0 1rem }`, o reset tem
   uma classe + um elemento e VENCE qualquer regra de componente de uma classe
   só (`.sm-ana__assina { margin-top: 2rem }`) — a margem simplesmente não
   acontece, sem erro nenhum aparecer. Foi o que quebrou três coisas de uma vez
   nesta página: a foto do hero vazando para fora (`height: auto` vencendo
   `height: 100%`), o botão da oferta branco sobre branco (`color: inherit`
   vencendo a cor do botão) e a assinatura colada no último item da lista.
   `:where()` tem especificidade ZERO: o reset passa a valer (0,1,0) e qualquer
   regra de componente escrita depois ganha dele naturalmente. */
.sm :where(h1, h2, h3) { margin: 0 0 .5em; font-weight: 200; letter-spacing: -.02em; line-height: 1.15; }
.sm :where(h1) { font-size: clamp(2rem, 5.2vw, 3.6rem); }
.sm :where(h2) { font-size: clamp(1.7rem, 3.6vw, 2.9rem); }
.sm :where(h3) { font-size: 1.15rem; font-weight: 500; letter-spacing: 0; }
.sm :where(p)  { margin: 0 0 1rem; }
.sm :where(ul) { margin: 0; padding: 0; list-style: none; }
.sm :where(img) { max-width: 100%; height: auto; display: block; }
/* Sem isto o card de foto fica estreito e desalinhado — gotcha já pago caro. */
.sm :where(figure) { margin: 0; }
.sm :where(a) { color: inherit; }

/* --- Estrutura ---------------------------------------------------------- */
.sm-wrap { width: min(1160px, 92vw); margin-inline: auto; }
.sm-wrap--narrow { width: min(760px, 92vw); }

.sm-sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.sm-sec--cream { background: var(--sm-cream); }
.sm-sec--dark  { background: var(--sm-deep); color: var(--sm-rose); }
.sm-sec--dark h2, .sm-sec--dark h3 { color: #fff; }

.sm-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sm-head--light p { color: var(--sm-rose); }
.sm-eyebrow {
  margin: 0 0 .75rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sm-wine);
}
.sm-sec--dark .sm-eyebrow { color: var(--sm-rose); }
.sm-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--sm-mute); }
.sm-sec--dark .sm-lead { color: var(--sm-rose); }

/* --- Botões ------------------------------------------------------------- */
.sm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .85rem 1.6rem;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .98rem; font-weight: 600; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.sm-btn:hover { transform: translateY(-1px); }
.sm-btn:focus-visible { outline: 3px solid var(--sm-rose); outline-offset: 3px; }
.sm-btn--primary { background: var(--sm-wine); color: #fff; }
.sm-btn--primary:hover { background: var(--sm-deep); }
.sm-btn--claro { background: #fff; color: var(--sm-deep); }
.sm-btn--claro:hover { background: var(--sm-rose); }
.sm-btn--ghost {
  background: rgba(255,255,255,.1); color: #fff;
  border-color: rgba(255,255,255,.6); backdrop-filter: blur(2px);
}
.sm-btn--ghost:hover { background: rgba(255,255,255,.2); }

/* --- 1 · Hero ----------------------------------------------------------- */
.sm-hero {
  position: relative; isolation: isolate;
  min-height: min(92vh, 780px);
  display: flex; align-items: flex-end;
  padding: clamp(2rem, 6vw, 5rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
}
/* O `height: 100%` aqui é o que segura a foto dentro do hero. Se ela voltar a
   assumir a altura natural, reaparece a faixa de imagem sem escurecimento entre
   o topo e a seção seguinte — foi assim que o defeito apareceu no ar. */
.sm-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* O escurecimento existe para o texto branco ter contraste em cima da foto.
   Antes era UM gradiente vertical terminando em .90: o pé do hero virava uma
   faixa quase preta — sumia a piscina e ficava pesado colado na barra vinho da
   seção seguinte.

   Agora são DOIS gradientes sobrepostos. O horizontal escurece só o lado
   esquerdo, que é onde o texto mora; o vertical faz o resto. Assim o pé da
   foto clareia bastante do meio para a direita (a água aparece) SEM perder
   contraste embaixo das letras.

   Medido no render, sobre a parte mais clara da foto: onde fica o texto, a
   opacidade efetiva é ~.72 — a mesma de antes. Na direita, cai para ~.60.
   Se for mexer, meça de novo: clarear o lado esquerdo apaga o texto. */
.sm-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(40,12,15,.55) 0%,
      rgba(40,12,15,.45) 45%,
      rgba(40,12,15,.12) 80%,
      rgba(40,12,15,0)   100%),
    linear-gradient(180deg,
      rgba(40,12,15,.22) 0%,
      rgba(40,12,15,.38) 45%,
      rgba(40,12,15,.55) 80%,
      rgba(40,12,15,.60) 100%);
}
/* No celular o texto ocupa a largura toda — o gradiente lateral deixaria a
   ponta direita das frases sem fundo. Aqui volta a ser só vertical. */
@media (max-width: 860px) {
  .sm-hero__scrim {
    background: linear-gradient(180deg,
      rgba(40,12,15,.32) 0%,
      rgba(40,12,15,.50) 45%,
      rgba(40,12,15,.68) 80%,
      rgba(40,12,15,.74) 100%);
  }
}
.sm-hero__inner { width: min(1160px, 92vw); margin-inline: auto; }
.sm-hero__anim { max-width: 62ch; }
.sm-hero__logo { width: clamp(200px, 22vw, 260px); height: auto; margin-bottom: 1.4rem; }

/* --sm-rose foi medido para fundo chapado escuro. Sobre foto, no texto miúdo,
   ele fica abaixo de 4,5:1 mesmo com o scrim. Este tom é o mesmo rosa, só que
   mais claro, e vale apenas dentro do hero. */
.sm-hero { --sm-rose-foto: #F3DAD8; }
.sm-hero__place {
  margin: 0 0 1rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sm-rose-foto);
}
.sm-hero__place span { margin: 0 .4rem; opacity: .6; }
.sm-hero__title { color: #fff; margin-bottom: 1rem; }
.sm-hero__title em { font-style: normal; color: var(--sm-rose); }
.sm-hero__lead { font-size: clamp(1rem, 1.7vw, 1.2rem); color: #F6EAE9; max-width: 54ch; }
.sm-hero__lead strong { color: #fff; font-weight: 600; }

.sm-hero__facts {
  display: grid; gap: .9rem 2rem; margin: 1.8rem 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.sm-hero__fact { display: flex; flex-direction: column; gap: .15rem; }
.sm-hero__fact-k { font-size: 1.05rem; font-weight: 600; color: #fff; }
.sm-hero__fact-v { font-size: .85rem; color: var(--sm-rose-foto); }

.sm-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- 2 · Oferta --------------------------------------------------------- */
.sm-oferta { background: var(--sm-wine); color: #fff; padding: clamp(3rem, 7vw, 5rem) 0; }
.sm-oferta__box { width: min(760px, 92vw); margin-inline: auto; text-align: center; }
.sm-oferta__tag {
  margin: 0 0 .8rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sm-rose);
}
.sm-oferta h2 { color: #fff; }
.sm-oferta h2 strong { font-weight: 600; }
.sm-oferta__texto { color: #F6EAE9; max-width: 56ch; margin-inline: auto; }
.sm-oferta__prazo { font-size: .85rem; color: var(--sm-rose); margin-bottom: 1.6rem; }

/* --- 3 · Números -------------------------------------------------------- */
.sm-numeros {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.sm-numero {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.6rem; border: 1px solid var(--sm-linha); border-radius: 14px;
}
.sm-numero__n { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 200; color: var(--sm-wine); line-height: 1; }
.sm-numero__l { font-size: 1rem; font-weight: 600; }
.sm-numero__d { font-size: .88rem; color: var(--sm-mute); }

/* --- 4 · O prédio ------------------------------------------------------- */
/* A aérea dos cinco edifícios é uma panorâmica 2,5:1 (959x383). Numa coluna
   lateral ela saía com uns 250 px de altura ao lado de um bloco de texto quase
   três vezes mais alto — parecia miniatura e desequilibrava a seção. Agora o
   texto se divide em duas colunas e a foto ocupa a largura inteira embaixo,
   que é o formato que a panorâmica pede. Não volte para `auto-fit` aqui: com
   três filhos, a 1160 px cabem TRÊS colunas e sobra uma vazia. */
.sm-split {
  display: grid; gap: clamp(1.8rem, 4vw, 2.8rem) clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 860px) {
  .sm-split { grid-template-columns: 1.05fr .95fr; }
}
.sm-split__foto { grid-column: 1 / -1; }
.sm-split__foto img { width: 100%; }
.sm-predio { display: grid; gap: .9rem; align-content: start; }
.sm-predio li { display: flex; flex-direction: column; gap: .1rem; padding-left: 1.6rem; position: relative; }
.sm-predio li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--sm-wine);
}
.sm-predio strong { font-weight: 600; }
.sm-predio span { font-size: .92rem; color: var(--sm-mute); }
.sm-split__foto figcaption { margin-top: .8rem; font-size: .88rem; color: var(--sm-mute); }

/* --- 5 · Lazer ---------------------------------------------------------- */
.sm-momento { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sm-momento:last-child { margin-bottom: 0; }
.sm-momento__texto { max-width: 62ch; margin-bottom: 1.5rem; }
.sm-momento__texto h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 200; color: var(--sm-wine); }
.sm-momento__texto p { margin: 0; color: var(--sm-mute); }

/* --- Galerias ----------------------------------------------------------- */
.sm-galeria {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.sm-galeria--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.sm-card { border-radius: 14px; overflow: hidden; background: var(--sm-cream); }
.sm-sec--cream .sm-card { background: var(--sm-paper); }
.sm-card__zoom {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: none; line-height: 0;
}
.sm-card__zoom:focus-visible { outline: 3px solid var(--sm-wine); outline-offset: -3px; }
.sm-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Planta é desenho técnico: cortar em 3/2 esconde cômodo. Cabe inteira, com
   folga branca em volta. */
.sm-card--planta img { aspect-ratio: auto; object-fit: contain; background: #fff; padding: .6rem; }
.sm-card figcaption { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem; }
.sm-card figcaption strong { font-weight: 600; font-size: 1rem; }
.sm-card figcaption span { font-size: .88rem; color: var(--sm-mute); }

/* --- 6 · Diferenciais do apartamento ------------------------------------ */
.sm-difs { margin-top: clamp(2rem, 4vw, 3rem); }
.sm-difs h3 { margin-bottom: 1rem; }
.sm-difs ul {
  display: grid; gap: .7rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.sm-difs li { position: relative; padding-left: 1.6rem; color: var(--sm-mute); font-size: .95rem; }
.sm-difs li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--sm-wine);
}

/* --- 7 · Unidades ------------------------------------------------------- */
.sm-tipos {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.sm-tipo {
  padding: 1.8rem; border-radius: 14px; background: var(--sm-paper);
  border: 1px solid var(--sm-linha);
  display: flex; flex-direction: column; gap: .3rem;
}
.sm-tipo__nome { margin: 0; font-size: 1.3rem; font-weight: 500; color: var(--sm-ink); }
.sm-tipo__area { margin: 0; font-size: 1.55rem; font-weight: 200; color: var(--sm-wine); }
.sm-tipo__ed   { margin: 0; font-size: .88rem; font-weight: 600; color: var(--sm-ink); }
.sm-tipo__nota { margin: 0; font-size: .88rem; color: var(--sm-mute); }
.sm-plantas__titulo { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.2rem; font-size: 1.3rem; }
.sm-tipos__nota { margin-top: 1.6rem; color: var(--sm-mute); font-size: .95rem; }
.sm-tipos__nota a { color: var(--sm-wine); font-weight: 600; }

/* --- 9 · Localização ---------------------------------------------------- */
/* Duas colunas fixas, não auto-fit: são 10 lugares, e em duas colunas dá 5 e 5,
   sem sobra. Com auto-fit a tela larga abre uma terceira coluna e a última fica
   pela metade. */
.sm-locais { display: grid; gap: .1rem 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .sm-locais { grid-template-columns: 1fr 1fr; }
}
.sm-local {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--sm-linha);
}
.sm-local__nome { font-weight: 500; }
.sm-local__tempo { color: var(--sm-wine); font-weight: 600; white-space: nowrap; }
.sm-locais__nota { margin-top: 1.4rem; font-size: .85rem; color: var(--sm-mute); }

/* --- 10 · Acessibilidade ------------------------------------------------ */
.sm-acesso {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.sm-acesso__item {
  padding: 1.5rem; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.sm-acesso__item h3 { color: #fff; margin-bottom: .3rem; }
.sm-acesso__item p { margin: 0; font-size: .92rem; color: var(--sm-rose); }

/* --- 11 · Ficha, sustentabilidade e segurança --------------------------- */
/* A seção era duas colunas lado a lado: ficha à esquerda, sustentabilidade e
   segurança à direita. Com 12 linhas de um lado e dois blocos curtos do outro,
   a direita acabava ~300 px antes e sobrava um buraco no canto — a Ana
   apontou em 19/08/2026.

   Agora são três faixas de largura inteira, empilhadas: título, ficha em duas
   colunas, e os três blocos embaixo. Nenhuma coluna precisa "dar conta" de
   igualar a altura da outra, então acrescentar item não desequilibra nada. */
.sm-ficha__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
/* O gap do grid já separa o título da tabela; a margem do .sm-head somaria em
   cima disso e abriria um vão grande demais. */
.sm-ficha__grid .sm-head { margin-bottom: 0; }

.sm-ficha { margin: 0; display: grid; gap: 0 clamp(2rem, 4vw, 3.5rem); }
/* `grid-auto-flow: column` preenche a primeira coluna inteira antes de passar
   para a segunda (1–6, depois 7–12), em vez de zigue-zaguear. Com as linhas do
   grid declaradas, as duas colunas compartilham a mesma altura de linha e as
   bordas ficam alinhadas horizontalmente.
   ⚠️ `--sm-ficha-linhas` vem do ERB, calculado a partir do tamanho da lista.
   Sem ele o padrão é 6; se a ficha mudar de tamanho e a variável não vier
   junto, nasce uma terceira coluna do nada. */
@media (min-width: 900px) {
  .sm-ficha {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--sm-ficha-linhas, 6), auto);
  }
}

.sm-ficha__blocos { display: grid; gap: clamp(1.8rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 900px) { .sm-ficha__blocos { grid-template-columns: repeat(3, 1fr); } }
.sm-ficha__blocos .sm-bloco { margin-bottom: 0; }
.sm-bloco li strong { font-weight: 600; color: var(--sm-ink); }
.sm-ficha__linha {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--sm-linha);
}
.sm-ficha dt { flex: 0 0 190px; font-weight: 600; font-size: .92rem; }
.sm-ficha dd { flex: 1 1 220px; margin: 0; color: var(--sm-mute); font-size: .92rem; }
.sm-bloco { margin-bottom: 2rem; }
.sm-bloco:last-child { margin-bottom: 0; }
.sm-bloco h3 { color: var(--sm-wine); }
.sm-bloco ul { display: grid; gap: .55rem; }
.sm-bloco li { position: relative; padding-left: 1.6rem; color: var(--sm-mute); font-size: .95rem; }
.sm-bloco li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--sm-wine);
}

/* --- 12 · Por que falar com a Ana ---------------------------------------
   Mesma anatomia da seção nas outras LPs: foto quadrada de um lado, razões e
   assinatura do outro. */
.sm-ana { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 880px) { .sm-ana { grid-template-columns: 0.8fr 1fr; } }

.sm-ana__fig img {
  width: 100%; max-width: 420px;
  border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover;
}
.sm-ana__razoes { display: grid; gap: 1rem; margin-top: 1.75rem; }
.sm-ana__razoes li { display: flex; gap: .75rem; align-items: flex-start; }
.sm-ana__razoes p { margin: 0; font-size: .95rem; color: var(--sm-mute); }
.sm-ana__dot {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: .5rem;
  border-radius: 50%; background: var(--sm-wine);
}
.sm-ana__assina {
  margin-top: 1.75rem; margin-bottom: 1.25rem;
  font-size: .88rem; font-weight: 500; color: var(--sm-deep);
}

/* --- 13 · FAQ ----------------------------------------------------------- */
.sm-faq { display: grid; gap: .6rem; }
.sm-faq__item { background: var(--sm-paper); border: 1px solid var(--sm-linha); border-radius: 12px; }
.sm-faq__item summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 500; min-height: 48px;
}
.sm-faq__item summary::-webkit-details-marker { display: none; }
.sm-faq__item summary:focus-visible { outline: 3px solid var(--sm-wine); outline-offset: -3px; }
.sm-faq__sinal { flex: none; width: 14px; height: 14px; position: relative; }
.sm-faq__sinal::before,
.sm-faq__sinal::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--sm-wine); transition: transform .18s ease;
}
.sm-faq__sinal::after { transform: rotate(90deg); }
.sm-faq__item[open] .sm-faq__sinal::after { transform: rotate(0deg); }
.sm-faq__resposta { padding: 0 1.3rem 1.2rem; }
.sm-faq__resposta p { margin: 0; color: var(--sm-mute); }
.sm-faq__rodape { margin-top: 1.6rem; color: var(--sm-mute); font-size: .95rem; }
.sm-faq__rodape a { color: var(--sm-wine); font-weight: 600; }

/* --- 14 · CTA + formulário ---------------------------------------------- */
.sm-cta__grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}
.sm-cta__texto h2 { color: #fff; }
.sm-cta__flag {
  display: inline-block; padding: .5rem .9rem; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  font-size: .88rem; color: #fff;
}
.sm-cta__assina { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .15rem; }
.sm-cta__assina strong { color: #fff; font-size: 1.05rem; font-weight: 600; }
.sm-cta__assina span { font-size: .88rem; color: var(--sm-rose); }

.sm-form {
  background: var(--sm-paper); color: var(--sm-ink);
  padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: 16px;
  display: grid; gap: .9rem;
}
.sm-form h3 { margin: 0 0 .3rem; font-size: 1.25rem; font-weight: 500; }
.sm-form label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 500; }
.sm-form__opt { color: var(--sm-mute); font-weight: 400; }
.sm-form input,
.sm-form select,
.sm-form textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  border: 1px solid var(--sm-linha); border-radius: 10px;
  font: inherit; font-size: 1rem; color: var(--sm-ink); background: #fff;
}
.sm-form textarea { min-height: 96px; resize: vertical; }
.sm-form input:focus-visible,
.sm-form select:focus-visible,
.sm-form textarea:focus-visible {
  outline: 3px solid var(--sm-wine); outline-offset: 1px; border-color: var(--sm-wine);
}
.sm-form__submit { width: 100%; margin-top: .3rem; }
.sm-form__fine { margin: 0; font-size: .8rem; color: var(--sm-mute); }

/* --- Lightbox ----------------------------------------------------------- */
.sm-lb {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 4vmin;
  background: rgba(26,8,10,.93);
}
.sm-lb[hidden] { display: none; }
.sm-lb figure { max-width: min(1100px, 92vw); }
.sm-lb img { max-height: 78vh; width: auto; margin-inline: auto; border-radius: 8px; background: #fff; }
.sm-lb figcaption { margin-top: .9rem; text-align: center; color: #F6EAE9; font-size: .92rem; }
.sm-lb__close {
  position: absolute; top: 2vmin; right: 2vmin;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1);
  color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.sm-lb__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* --- Revelação no scroll ------------------------------------------------ */
.sm-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.sm-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sm-reveal { opacity: 1; transform: none; transition: none; }
  .sm-btn { transition: none; }
}

/* --- Telas estreitas ---------------------------------------------------- */
@media (max-width: 520px) {
  .sm-hero { min-height: 86vh; }
  .sm-hero__logo { width: 170px; }
  .sm-hero__actions .sm-btn { width: 100%; }
  .sm-local { padding: .8rem 0; }
  .sm-ficha dt { flex: 1 1 100%; }
}
/* ===========================================================================
   Vitrine dos condomínios do Ilha Pura — componente compartilhado entre as LPs.
   Prefixo próprio `.ipc-` (não o da LP), porque a peça é a mesma em todas.
   Cada LP ajusta as cores sobrescrevendo as variáveis --ipc-* dentro do seu
   próprio seletor. Ver `app/views/shared/_ilhapura_condominios.html.erb`.
   =========================================================================== */

.ipc {
  --ipc-fundo:   #F0F0F0;
  --ipc-cartao:  #FFFFFF;
  --ipc-acento:  #1B4A61;
  --ipc-escuro:  #004964;
  --ipc-tinta:   #323232;
  --ipc-suave:   #6B6B6B;
  --ipc-linha:   #E0E0E0;

  padding-block: clamp(3.5rem, 9vw, 7rem);
  background: var(--ipc-fundo);
  color: var(--ipc-tinta);
}

.ipc *, .ipc *::before, .ipc *::after { box-sizing: border-box; }
.ipc h2, .ipc h3 { margin: 0; font-weight: 400; }
.ipc p { margin: 0; }
.ipc ul { margin: 0; padding: 0; list-style: none; }
.ipc img { max-width: 100%; height: auto; display: block; }

.ipc__wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.ipc__head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
/* 🚨 TODO `<p>` DESTE COMPONENTE PRECISA DO PREFIXO `.ipc`.
   O reset `.ipc p { margin: 0 }` tem especificidade (0,1,1) e vence qualquer
   regra de uma classe só (0,1,0). Descoberto em 14/08/2026 numa varredura: as
   SEIS margens abaixo estavam escritas e mortas desde que a vitrine nasceu, nas
   três LPs ao mesmo tempo — os cards vinham com texto todo grudado.
   O componente é compartilhado, então não dá para prefixar com `.oro`/`.elos`/
   `.pura`: o `.ipc` é a raiz da própria seção e funciona sob qualquer LP. */
.ipc .ipc__eyebrow {
  margin-bottom: 0.9rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ipc-acento);
}
.ipc__head h2 {
  font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ipc-escuro);
}
.ipc .ipc__lead {
  margin-top: 1rem;
  font-size: clamp(0.98rem, 1.9vw, 1.1rem);
  color: var(--ipc-suave);
  max-width: 42rem;
}

.ipc__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .ipc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ipc__grid { grid-template-columns: repeat(3, 1fr); } }

.ipc-card {
  display: flex;
  flex-direction: column;
  background: var(--ipc-cartao);
  border: 1px solid var(--ipc-linha);
  border-radius: 6px;
  overflow: hidden;
}

.ipc-card__foto { position: relative; background: var(--ipc-linha); }
.ipc-card__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* O condomínio vendido entra em escala de cinza: continua na vitrine como
   histórico do bairro, mas não disputa atenção com quem ainda tem unidade. */
.ipc-card--vendido .ipc-card__foto img { filter: grayscale(1); opacity: .85; }

.ipc-card__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  background: var(--ipc-acento);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ipc-card__tag--vendido { background: #6B6B6B; }

.ipc-card__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.25rem 1.25rem;
}
.ipc-card__corpo h3 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ipc-escuro);
}
.ipc .ipc-card__specs {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--ipc-suave);
}
.ipc .ipc-card__preco { margin-top: 0.9rem; }
.ipc-card__preco span {
  display: block;
  font-size: 0.85rem;
  color: var(--ipc-suave);
}
.ipc-card__preco--vazio span { font-style: italic; }

.ipc .ipc-card__oferta {
  margin-top: 0.75rem;
  padding: 0.45rem 0.7rem;
  border-left: 3px solid var(--ipc-acento);
  background: var(--ipc-fundo);
  border-radius: 0 3px 3px 0;
  font-size: 0.78rem;
  color: var(--ipc-escuro);
}

/* `margin-top:auto` alinha os botões na base mesmo quando um card tem a faixa
   da oferta e o vizinho não — sem isso a fileira fica com os botões em alturas
   diferentes. */
.ipc-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-top: 1.1rem;
  min-height: 44px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ipc-acento);
  text-decoration: none;
}
.ipc-card__btn::after {
  content: "→";
  margin-left: 0.4rem;
  transition: transform .2s ease;
}
.ipc-card__btn:hover { color: var(--ipc-escuro); text-decoration: underline; }
.ipc-card__btn:hover::after { transform: translateX(3px); }
.ipc-card__btn--ghost { color: var(--ipc-suave); }
.ipc-card__btn--ghost::after { content: "♡"; }

.ipc .ipc__nota {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ipc-suave);
  max-width: 44rem;
}

@media (prefers-reduced-motion: reduce) {
  .ipc-card__btn::after { transition: none; }
}
/* Aviso de cookies (banner) + Política de privacidade — Grupo Ana Cintra */

/* ---- Aviso de cookies ---- */
.ck{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #17322C; color: #F3EFE7;
  padding: 16px 20px; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5;
}
.ck[hidden]{ display: none; }
.ck__txt{ margin: 0; flex: 1 1 260px; }
.ck__txt a{ color: #A9D8CB; text-decoration: underline; }
.ck__btn{
  flex: 0 0 auto; cursor: pointer; border: 0;
  background: #F3EFE7; color: #17322C;
  font-weight: 600; font-size: 14px; font-family: inherit;
  padding: 10px 22px; border-radius: 100px;
}
.ck__btn:hover{ background: #fff; }

/* ---- Página de política de privacidade ---- */
.priv{
  font-family: 'Inter', system-ui, sans-serif;
  color: #080808; background: #fff;
  min-height: 100vh; padding: 48px 20px 80px;
}
.priv__wrap{ max-width: 760px; margin: 0 auto; }
.priv__back{
  display: inline-block; margin-bottom: 24px;
  color: #2F6A5C; font-size: 14px; font-weight: 500; text-decoration: none;
}
.priv__back:hover{ text-decoration: underline; }
.priv__title{ font-size: clamp(28px,5vw,40px); font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.priv__upd{ color: #6b7770; font-size: 14px; margin: 0 0 32px; }
.priv p{ font-size: 16px; line-height: 1.7; color: #2b3b36; margin: 0 0 16px; }
.priv__h2{ font-size: 20px; font-weight: 600; margin: 36px 0 12px; color: #17322C; }
.priv__ul{ margin: 0 0 16px; padding-left: 22px; }
.priv__ul li{ font-size: 16px; line-height: 1.7; color: #2b3b36; margin-bottom: 8px; }
.priv a{ color: #2F6A5C; }
.priv strong{ color: #17322C; }
.priv__wrap > .priv__back:last-child{ margin-top: 32px; margin-bottom: 0; }
/* ===========================================================================
   Rodapé padrão das landing pages + botão flutuante do WhatsApp.
   Compartilhado entre as duas marcas — ver views/shared/_rodape_lp.html.erb.
   Prefixo próprio `.rlp-`; cada LP ajusta as cores pelas variáveis --rlp-*.
   =========================================================================== */

.rlp {
  --rlp-fundo:  #0A2C35;
  --rlp-texto:  #9FB8BF;
  --rlp-claro:  #FFFFFF;
  --rlp-linha:  rgba(255, 255, 255, .12);
  --rlp-fraco:  #7A959D;

  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  background: var(--rlp-fundo);
  color: var(--rlp-texto);
}

.rlp *, .rlp *::before, .rlp *::after { box-sizing: border-box; }
.rlp h3 { margin: 0; }
.rlp p { margin: 0; }
.rlp img { max-width: 100%; height: auto; display: block; }

.rlp__wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.rlp__grid { display: grid; gap: 2rem; }
@media (min-width: 780px) { .rlp__grid { grid-template-columns: 1.5fr 1fr 1fr; } }

.rlp__wordmark { width: clamp(140px, 20vw, 190px); margin-bottom: 1.1rem; }
.rlp__nome {
  margin-bottom: 1.1rem;
  font-size: 1.4rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rlp-claro);
}
.rlp__desc { font-size: 0.85rem; line-height: 1.65; max-width: 26rem; }

.rlp__col h3 {
  margin-bottom: 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rlp-claro);
}

.rlp__links { display: grid; gap: 0.35rem; }
.rlp__links a {
  display: flex;
  align-items: center;
  min-height: 40px;          /* alvo de toque; o dedo não erra o link */
  font-size: 0.88rem;
  color: var(--rlp-texto);
  text-decoration: none;
}
.rlp__links a:hover { color: var(--rlp-claro); text-decoration: underline; }

.rlp__gac { width: clamp(150px, 22vw, 200px); margin-bottom: 0.9rem; }
/* Logo da corretora parceira, nas duplicatas (a marca da Ana Santos vem acima
   do "Corretora oficial"). O arquivo dela e mais quadrado que o do Grupo, por
   isso um respiro maior embaixo — senao o titulo seguinte encosta. */
.rlp__parceira { margin-bottom: 1.6rem; }
.rlp__creci { font-size: 0.82rem; line-height: 1.6; }
.rlp__creci strong { color: var(--rlp-claro); font-weight: 600; }

/* 🚨 Prefixo `.rlp` obrigatório: é um <p>, e o reset `.rlp p { margin: 0 }`
   (0,1,1) vence a classe sozinha (0,1,0). Este afastamento do texto legal
   estava escrito e morto nas três LPs desde que o rodapé nasceu — o aviso legal
   ficava colado no bloco de cima. Achado na varredura de 14/08/2026. */
.rlp .rlp__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rlp-linha);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--rlp-fraco);
}
.rlp__legal a { color: var(--rlp-texto); text-decoration: underline; }
.rlp__legal a:hover { color: var(--rlp-claro); }

/* --- Botão flutuante ------------------------------------------------------ */

.rlp-wa {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.7rem 1.15rem 0.7rem 0.95rem;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: background-color .2s ease;
}
.rlp-wa svg { width: 26px; height: 26px; fill: #FFFFFF; flex: 0 0 auto; }
.rlp-wa:hover { background: #1FBB58; }

/* Em telas estreitas o rótulo sai e sobra o ícone: a pílula inteira cobriria
   parte do conteúdo justamente onde o polegar rola a página. */
@media (max-width: 420px) {
  .rlp-wa { gap: 0; padding: 0; width: 56px; height: 56px; justify-content: center; }
  .rlp-wa span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rlp-wa { transition: none; }
}

/* ---------------------------------------------- indice de landing pages ---
   Entra no rodape de todas as LPs e no rodape da home. Nao fixa cor: herda a
   do rodape em que estiver (`currentColor` + opacidade), porque os rodapes vao
   do verde-escuro do RIIO ao creme do Symphony. */
.ilp {
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.ilp__titulo {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 1.2rem;
}
.ilp__grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem 2rem;
}
.ilp__bairro {
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .5rem;
  opacity: .9;
}
.ilp__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}
.ilp__lista li { font-size: .84rem; line-height: 1.45; }
.ilp__lista a {
  color: inherit;
  text-decoration: none;
  opacity: .72;
  transition: opacity .15s ease;
}
.ilp__lista a:hover,
.ilp__lista a:focus-visible { opacity: 1; text-decoration: underline; }
/* A propria pagina aparece na lista, sem link — orienta quem le e evita link
   de uma pagina para ela mesma. */
.ilp__aqui { opacity: .45; }
.rlp__atualizado { opacity: .8; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */