/* =============================================================
   RARO Praia Brava — Design System v4
   Squad applied: Brad Frost (atomic) · Visual Generator · UX Designer
   Font: SF Pro Display via -apple-system / Inter cross-platform
   Approach: Mobile-first (base = mobile, min-width expands up)
   ============================================================= */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Palette */
  --ink: #07090f;
  --ink-deep: #03050a;
  --ink-mid: #0c1220;
  --ink-surface: #141d2e;
  --ink-raised: #1b2740;
  --ink-stroke: rgba(255, 255, 255, 0.07);

  --cream: #f2ede4;
  --cream-warm: #ece6db;
  --cream-border: rgba(26, 22, 16, 0.09);
  --cream-text: #18140f;
  --cream-muted: #504840;
  --cream-subtle: #8c8278;

  --gold: #c8965a;
  --gold-light: #d9a96e;
  --gold-muted: #a57840;
  --gold-dim: rgba(200, 150, 90, 0.32);
  --gold-ghost: rgba(200, 150, 90, 0.10);

  --w: #ffffff;
  --w70: rgba(255, 255, 255, 0.70);
  --w50: rgba(255, 255, 255, 0.50);
  --w30: rgba(255, 255, 255, 0.30);
  --w12: rgba(255, 255, 255, 0.12);
  --w07: rgba(255, 255, 255, 0.07);
  --w04: rgba(255, 255, 255, 0.04);

  /* Typography
     SF Pro Display on Apple (via -apple-system)
     Inter on Windows/Android (Google Fonts fallback)  */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    "Helvetica Neue", Arial, sans-serif;

  /* Type scale — fluid via clamp(mobile, mid, desktop) */
  --t-xxl: clamp(2.25rem, 7vw + 0.5rem, 5.5rem);
  --t-xl: clamp(1.75rem, 4.5vw, 3.5rem);
  --t-lg: clamp(1.25rem, 2.5vw, 2rem);
  --t-md: clamp(1rem, 1.5vw, 1.125rem);
  --t-sm: 0.9rem;
  --t-xs: 0.78rem;
  --t-xxs: 0.68rem;

  /* Spacing — 4pt base grid */
  --s1: 0.25rem;
  /*  4 */
  --s2: 0.5rem;
  /*  8 */
  --s3: 0.75rem;
  /* 12 */
  --s4: 1rem;
  /* 16 */
  --s5: 1.25rem;
  /* 20 */
  --s6: 1.5rem;
  /* 24 */
  --s8: 2rem;
  /* 32 */
  --s10: 2.5rem;
  /* 40 */
  --s12: 3rem;
  /* 48 */
  --s16: 4rem;
  /* 64 */
  --s-section: clamp(4rem, 12vw, 8rem);
  /* vertical section padding */
  --s-inner: clamp(1.25rem, 5vw, 3.5rem);
  /* horizontal inner padding */

  /* Layout */
  --max-w: 80rem;
  --max-w-narrow: 42rem;
  --header-h: 4rem;

  /* Shape — radii */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-full: 9999px;
  --r-card: clamp(8px, 0.8vw + 4px, 14px);
  --r-section: clamp(20px, 3vw + 8px, 44px);

  /*
   * RARO Corner Language — corte diagonal (chamfer) TR + BL
   * Inspirado em arquitetura de precisão: a aresta cortada
   * em 45° dá personalidade sem peso. Escala fluid com clamp.
   */
  --ch-xl: clamp(28px, 3.5vw, 52px);
  /* loc-block, blocos primários  */
  --ch-lg: clamp(18px, 2.2vw, 32px);
  /* video stage, render          */
  --ch-md: clamp(10px, 1.2vw, 16px);
  /* cards, painel stats          */
  --ch-sm: 7px;
  /* elementos pequenos           */

  /* Motion */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-dark: 0 32px 80px rgba(0, 0, 0, 0.4);

  /* Legacy aliases — referenced by JS */
  --accent-gold: var(--gold);
  --bg-dark: var(--ink);
  --bg-light: var(--cream);
  --font-display: var(--font);
  --font-body: var(--font);
  --font-sans: var(--font);
}

/* ═══════════════════════════════════════════════════════════
   RARO CORNER LANGUAGE
   ─────────────────────────────────────────────────────────
   Corte diagonal em 45° nas arestas TR (top-right) e BL
   (bottom-left). Aplicado em camadas:
     1. clip-path nos blocos visuais (mapa, vídeo, renders)
     2. Marcadores de canto em ouro nas seções (::before/::after)
   Simples o suficiente para não chamar atenção,
   distinto o suficiente para ser reconhecível.
   ═══════════════════════════════════════════════════════════ */

/* Mixin clip-path diagonal TR + BL */
.raro-cut {
  --ch: var(--ch-lg);
  border-radius: 0 !important;
  clip-path: polygon(0 0,
      calc(100% - var(--ch)) 0,
      100% var(--ch),
      100% 100%,
      var(--ch) 100%,
      0 calc(100% - var(--ch)));
}

.raro-cut--xl {
  --ch: var(--ch-xl);
}

.raro-cut--md {
  --ch: var(--ch-md);
}

.raro-cut--sm {
  --ch: var(--ch-sm);
}

/* Corte apenas TR (para elementos que "abrem" à direita) */
.raro-cut-tr {
  --ch: var(--ch-lg);
  border-radius: 0 !important;
  clip-path: polygon(0 0,
      calc(100% - var(--ch)) 0,
      100% var(--ch),
      100% 100%,
      0 100%);
}

.raro-cut-tr--xl {
  --ch: var(--ch-xl);
}

.raro-cut-tr--md {
  --ch: var(--ch-md);
}

/* ── Screen-reader only (SEO + a11y) ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  scroll-behavior: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  font-family: var(--font);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  background: var(--ink);
  color: var(--w);
  /* overflow-x: hidden no body quebra position:sticky em Safari/iOS.
     Movido para o html para evitar o bug sem perder o clipping horizontal. */
}

html {
  overflow-x: hidden;
}

/* Noise texture — ultra-subtle film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.022;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: rgba(200, 150, 90, 0.22);
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

body.is-loading {
  overflow: hidden;
}

/* ── 3. LOADER ────────────────────────────────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-deep);
  transition: opacity 0.65s var(--ease-smooth), visibility 0.65s;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s5);
  padding: var(--s8);
}

/* ── Logo animado ──────────────────────────────── */
.page-loader__logo-wrap {
  position: relative;
  line-height: 0;
  user-select: none;
}

.page-loader__logo {
  display: block;
  height: clamp(52px, 11vw, 82px);
  width: auto;
}

/* Ghost: sempre visível, muito fraco — sugere o logo completo */
.page-loader__logo--ghost {
  opacity: 0.07;
}

/* Fill: começa totalmente clipado (invisível) */
.page-loader__logo--fill {
  position: absolute;
  inset: 0;
  height: 100%;
  width: auto;
  /* clip-path animado via GSAP: inset(0 100% 0 0) → inset(0 0% 0 0) */
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

/* ── Linha de progresso ────────────────────────── */
.page-loader__line {
  width: clamp(80px, 22vw, 120px);
  height: 1px;
  background: var(--w07);
  overflow: hidden;
  margin-top: var(--s2);
}

.page-loader__line span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ── Kicker ───────────────────────────────────── */
.page-loader__hint {
  font-size: var(--t-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w30);
  margin-top: var(--s1);
}

/* ── 4. HEADER / NAVIGATION ───────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s;
}

.site-header.is-scrolled {
  background: rgba(7, 9, 15, 0.85);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom-color: var(--ink-stroke);
}

.site-header__inner {
  max-width: calc(var(--max-w) + 4rem);
  margin: 0 auto;
  padding: 0 var(--s5);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
}

/* Brands */
.site-header__brands {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
}

/* Header logo image */
.header-logo {
  display: block;
  height: 34px;
  width: auto;
  object-fit: contain;
  /* Invert to white so it's visible on dark header background */
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity 0.25s;
}

.brand--logo:hover .header-logo {
  opacity: 1;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
}

.brand__nf-mark {
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--w70);
  border: 1px solid var(--gold-dim);
  border-radius: var(--r-sm);
  padding: 0.18rem 0.5rem;
  line-height: 1;
}

.brand__raro {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--w);
}

.brand__sub {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 2px;
}

.brand-sep {
  width: 1px;
  height: 1.2rem;
  background: linear-gradient(180deg, transparent, var(--gold-dim), transparent);
  flex-shrink: 0;
}

/* Desktop nav (hidden on mobile) */
.site-nav {
  display: none;
}

.site-nav__list {
  list-style: none;
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}

.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-xxs);
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--w50);
  position: relative;
  transition: color 0.3s;
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-smooth);
}

.site-nav__list a:hover,
.site-nav__list a.is-active {
  color: var(--w);
}

.site-nav__list a:hover::after,
.site-nav__list a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Header CTA */
.site-header__cta {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* Mobile nav toggle */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.6rem;
  margin: 0 -0.6rem 0 0;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--w70);
  border-radius: 1px;
  transition: transform 0.3s var(--ease-smooth), opacity 0.2s;
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  background: var(--ink-deep);
  border-top: 1px solid var(--ink-stroke);
  padding: var(--s10) var(--s5) var(--s8);
  z-index: 999;
  display: flex;
  flex-direction: column;
}

.mobile-drawer[hidden] {
  display: none;
}

.mobile-drawer nav {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1;
}

.mobile-drawer a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: var(--t-md);
  font-weight: 300;
  color: var(--w70);
  border-bottom: 1px solid var(--ink-stroke);
  transition: color 0.25s;
}

.mobile-drawer a:hover {
  color: var(--w);
}

.mobile-drawer a:last-child {
  border-bottom: 0;
}

/* Scroll progress */
.scroll-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
}

.scroll-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--gold);
}

/* Desktop nav breakpoint */
@media (min-width: 960px) {
  .site-header__inner {
    padding: 0 var(--s8);
  }

  .site-nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

/* ── @property: animatable para o efeito shiny-cta ─────────────────
 * CSS Houdini @property permite animar gradientes e ângulos.
 * Necessário para a animação conic-gradient do btn--shiny.
 * ─────────────────────────────────────────────────────────────────── */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: transparent;
  inherits: false;
}

@keyframes shiny-rotate {
  to {
    --gradient-angle: 360deg;
  }
}

@keyframes shiny-shimmer {
  to {
    rotate: 360deg;
  }
}

@keyframes shiny-breathe {

  from,
  to {
    scale: 1;
  }

  50% {
    scale: 1.2;
  }
}

/* ── 5. BUTTONS ──────────────────────────────────────────────────────
 *
 * LP de conversão: cada botão é um argumento de ação.
 *
 * Primary  — gradiente gold com shimmer-sweep no hover.
 *            Texto branco (máximo contraste). Peso 600.
 *            Nos .section__cta: pulso de glow animado para capturar
 *            a atenção enquanto o usuário ainda está lendo.
 *
 * Outline  — borda gold completa + texto gold + fill dramático no hover.
 *
 * Forma    — RARO Corner Language: clip-path --ch-sm (7 px TR + BL).
 *            Sem border-radius pill. Sem translateY float.
 *
 * drop-shadow em vez de box-shadow: compatível com clip-path.
 * ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0.8rem 1.9rem;
  font-family: var(--font);
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid transparent;
  clip-path: polygon(0 0,
      calc(100% - var(--ch-sm)) 0,
      100% var(--ch-sm),
      100% 100%,
      var(--ch-sm) 100%,
      0 calc(100% - var(--ch-sm)));
  transition:
    transform 0.28s var(--ease-smooth),
    filter 0.28s,
    background 0.22s,
    color 0.22s,
    border-color 0.22s;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}

.btn:active {
  transform: scale(0.97) !important;
  transition-duration: 0.08s;
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.btn--sm {
  min-height: 40px;
  padding: 0.55rem 1.3rem;
  font-size: 0.65rem;
}

.btn--lg {
  min-height: 56px;
  padding: 1rem 2.4rem;
  font-size: var(--t-xxs);
  font-weight: 600;
}

/* ────────────────────────────────────────────────────────────────
   PRIMARY — o chamado à ação principal
   Gradiente gold: profundidade + riqueza que flat color não tem.
   Shimmer: um brilho varre o botão no hover (background-position).
   Texto branco: contraste forte, lê "autoridade" não "sugestão".
   ──────────────────────────────────────────────────────────────── */
.btn--primary {
  background: linear-gradient(110deg,
      var(--gold-muted) 0%,
      var(--gold) 40%,
      var(--gold-light) 55%,
      var(--gold) 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  color: var(--w);
  font-weight: 600;
  filter: drop-shadow(0 4px 22px rgba(200, 150, 90, 0.36));
  transition:
    transform 0.28s var(--ease-smooth),
    filter 0.28s,
    background-position 0.55s var(--ease-smooth),
    color 0.22s,
    border-color 0.22s;
}

.btn--primary:hover {
  background-position: 0% 0;
  transform: scale(1.03);
  filter: drop-shadow(0 10px 40px rgba(200, 150, 90, 0.60));
}

/* Seta → slide-in: microdetalhe de "ação para frente" */
.btn--primary::after {
  content: "→";
  font-size: 0.9em;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.2s, transform 0.28s var(--ease-smooth);
  display: inline-block;
  line-height: 1;
}

.btn--primary:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ────────────────────────────────────────────────────────────────
   SECTION CTA — pulse glow animado
   O botão "respira" enquanto o usuário lê a seção:
   glow varia entre 36 % e 65 % de opacidade a cada 2,8 s.
   Captura atenção sem piscar ou agredir.
   ──────────────────────────────────────────────────────────────── */
@keyframes cta-pulse {

  0%,
  100% {
    filter: drop-shadow(0 4px 22px rgba(200, 150, 90, 0.36));
  }

  50% {
    filter: drop-shadow(0 6px 38px rgba(200, 150, 90, 0.68));
  }
}

@keyframes cta-pulse-wa {

  0%,
  100% {
    filter: drop-shadow(0 4px 18px rgba(26, 92, 64, 0.28));
  }

  50% {
    filter: drop-shadow(0 6px 34px rgba(26, 92, 64, 0.55));
  }
}

@keyframes cta-pulse-gold {

  0%,
  100% {
    filter: drop-shadow(0 4px 18px rgba(200, 150, 90, 0.22));
  }

  50% {
    filter: drop-shadow(0 6px 34px rgba(200, 150, 90, 0.50));
  }
}

/* Pulse em todos os btn--primary (não só .section__cta) */
.btn--primary {
  animation: cta-pulse 2.8s ease-in-out infinite;
}

.btn--primary:hover {
  animation: none;
}

/* Form — outline-gold e whatsapp também respiram */
.lead-form__actions .btn--whatsapp {
  animation: cta-pulse-wa 2.8s ease-in-out infinite 0.4s;
}

.lead-form__actions .btn--whatsapp:hover {
  animation: none;
}

.lead-form__actions .btn--outline-gold {
  animation: cta-pulse-gold 2.8s ease-in-out infinite 0.8s;
}

.lead-form__actions .btn--outline-gold:hover {
  animation: none;
}

/* ────────────────────────────────────────────────────────────────
   OUTLINE GOLD — chamada secundária com mais presença
   Borda full gold (não dim): visível e intencional.
   Texto gold: lê como "alternativa nobre", não como "secundário".
   Hover: fill dramático — transforma o outline em primary.
   ──────────────────────────────────────────────────────────────── */
.btn--outline-gold {
  border: 1.5px solid var(--gold);
  color: var(--gold);
}

.btn--outline-gold:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-deep);
  transform: scale(1.02);
  filter: drop-shadow(0 8px 28px rgba(200, 150, 90, 0.44));
}

/* ── Ghost: borda sutil em fundo escuro ── */
.btn--ghost {
  border-color: var(--w12);
  color: var(--w50);
}

.btn--ghost:hover {
  border-color: var(--w30);
  color: var(--w);
  background: var(--w04);
  transform: scale(1.02);
}

/* ── WhatsApp: identidade verde — não se mexe ── */
.btn--whatsapp {
  background: #1a5c40;
  color: var(--w);
  font-weight: 600;
  filter: drop-shadow(0 4px 18px rgba(26, 92, 64, 0.28));
}

.btn--whatsapp:hover {
  background: #1f6b4a;
  transform: scale(1.02);
  filter: drop-shadow(0 8px 28px rgba(26, 92, 64, 0.42));
}

/* ────────────────────────────────────────────────────────────────────
   SHINY — botão cinematográfico para CTAs de conversão principal
   ──────────────────────────────────────────────────────────────────
   Efeito em 4 camadas:
     1. Border conic-gradient rotativo (o "shiny" principal)
     2. Padrão de pontos com máscara conic rotativa (textura)
     3. Shimmer interno girando (brilho suave)
     4. Glow breathe no span ao hover (profundidade)

   Cores adaptadas para RARO:
     bg        → var(--ink)       fundo escuro premium
     highlight → var(--gold)      ouro traçando as arestas
     subtle    → var(--gold-light) reflexo quente no hover

   clip-path removido neste variant: o border-gradient é o
   elemento diferenciador — o chamfer competiria com ele.
   ──────────────────────────────────────────────────────────────── */
.btn--shiny {
  --shiny-bg: var(--ink);
  --shiny-bg-sub: var(--ink-raised);
  --shiny-hi: var(--gold);
  --shiny-hi-sub: var(--gold-light);
  --shiny-dur: 3.2s;

  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid transparent;
  color: var(--w);
  font-weight: 600;
  letter-spacing: 0.10em;
  background:
    linear-gradient(var(--shiny-bg), var(--shiny-bg)) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-hi) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-hi) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-bg-sub);
  filter: drop-shadow(0 4px 22px rgba(200, 150, 90, 0.20));

  /* anima as @property custom props no hover */
  transition:
    --gradient-angle-offset var(--shiny-dur) cubic-bezier(0.25, 1, 0.5, 1),
    --gradient-percent var(--shiny-dur) cubic-bezier(0.25, 1, 0.5, 1),
    --gradient-shine var(--shiny-dur) cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.3s,
    transform 0.28s var(--ease-smooth);

  /* rotação contínua do border + paused reverse (acelera no hover) */
  animation:
    shiny-rotate linear infinite var(--shiny-dur),
    shiny-rotate linear infinite calc(var(--shiny-dur) / 0.4) reverse paused;
  animation-composition: add;
}

/* Dots pattern — textura sutil que segue a rotação */
.btn--shiny::before,
.btn--shiny::after,
.btn--shiny span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

.btn--shiny::before {
  --sz: calc(100% - 4px);
  --pos: 2px;
  --spc: calc(var(--pos) * 2);
  width: var(--sz);
  height: var(--sz);
  background: radial-gradient(circle at var(--pos) var(--pos),
      rgba(200, 150, 90, 0.55) calc(var(--pos) / 4),
      transparent 0) padding-box;
  background-size: var(--spc) var(--spc);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg),
      black,
      transparent 10% 90%,
      black);
  opacity: 0.5;
  animation:
    shiny-rotate linear infinite var(--shiny-dur),
    shiny-rotate linear infinite calc(var(--shiny-dur) / 0.4) reverse paused;
  animation-composition: add;
}

/* Inner shimmer — brilho girando dentro do botão */
.btn--shiny::after {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg,
      transparent,
      var(--shiny-hi),
      transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.5;
  animation:
    shiny-shimmer linear infinite var(--shiny-dur),
    shiny-shimmer linear infinite calc(var(--shiny-dur) / 0.4) reverse paused;
  animation-composition: add;
}

/* Span: cria contexto para o breathe glow */
.btn--shiny span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

/* Breathe glow — aparece no hover, "respira" em escala */
.btn--shiny span::before {
  --sz: calc(100% + 1rem);
  width: var(--sz);
  height: var(--sz);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-hi);
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1);
  animation: 4.8s shiny-breathe linear infinite;
}

/* Hover: libera as animações pausadas + expande gradient */
.btn--shiny:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-hi-sub);
  transform: scale(1.02);
  filter: drop-shadow(0 8px 36px rgba(200, 150, 90, 0.48));
}

.btn--shiny:is(:hover, :focus-visible),
.btn--shiny:is(:hover, :focus-visible)::before,
.btn--shiny:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}

.btn--shiny:is(:hover, :focus-visible) span::before {
  opacity: 1;
}

.btn--shiny:active {
  transform: scale(0.97) !important;
}

/* Remove a seta →  do primary que herdaria via .btn--primary::after */
.btn--shiny::after {
  content: "";
}

/* Cancela cta-pulse (herdado de btn--primary) e usa só as animações shiny */
.btn--shiny {
  animation:
    shiny-rotate linear infinite var(--shiny-dur),
    shiny-rotate linear infinite calc(var(--shiny-dur) / 0.4) reverse paused;
}

/* btn--sm: reduz duração (brilho mais ágil numa área menor) */
.btn--shiny.btn--sm {
  --shiny-dur: 2.4s;
  font-size: 0.62rem;
}

/* ── 6. HERO — vídeo puro scroll-linked ──────────────────── */
.hero {
  position: relative;
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 32rem;
  overflow: hidden;
  background: #000;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Promove o canvas para layer de compositing dedicado na GPU */
  will-change: transform;
}

.hero__scroll-hint {
  position: absolute;
  bottom: var(--s12);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  pointer-events: none;
  /* sutil fade out via JS ScrollTrigger, mas base transition no CSS */
  transition: opacity 0.8s var(--ease-smooth);
}

.hero__scroll-text {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--w50);
  font-weight: 400;
  margin-bottom: var(--s5);
  animation: scroll-text-pulse 3s ease-in-out infinite;
}

@keyframes scroll-text-pulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.9;
  }
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: var(--w07);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  animation: hero-scroll-hint 2.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

@keyframes hero-scroll-hint {
  0% {
    transform: translateY(-100%);
  }

  60%,
  100% {
    transform: translateY(60px);
  }
}

.hero__spacer {
  /*
   * Determina quanto scroll = 100% do vídeo.
   * Com end:"bottom bottom", o trigger dura exactamente
   * spacer.height pixels — então este valor controla
   * diretamente a "velocidade" da animação.
   * 280vh ≈ 3024px em 1080p → cada frame ≈ 12.5px de scroll.
   */
  height: min(280vh, 3200px);
  pointer-events: none;
  background: var(--ink-deep);
}

/* ── 7. SECTIONS SYSTEM ───────────────────────────────────── */
.section {
  position: relative;
  /* Performance: content-visibility for off-screen sections */
  content-visibility: auto;
  contain-intrinsic-size: 1px 500px;
}

.section-divider {
  display: none;
}

/* Curve overlap — each section curls over the previous */
main>section.section {
  border-radius: var(--r-section) var(--r-section) 0 0;
  margin-top: calc(var(--r-section) * -0.5);
}

main>section:nth-of-type(2) {
  z-index: 2;
}

main>section:nth-of-type(3) {
  z-index: 3;
}

main>section:nth-of-type(4) {
  z-index: 4;
}

main>section:nth-of-type(5) {
  z-index: 5;
}

main>section:nth-of-type(6) {
  z-index: 6;
}

main>section:nth-of-type(7) {
  z-index: 7;
}

main>section:nth-of-type(8) {
  z-index: 8;
}

main>section:nth-of-type(9) {
  z-index: 9;
}

main>section:nth-of-type(10) {
  z-index: 10;
}

/* Dark sections */
.section--dark {
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, var(--ink-mid) 0%, var(--ink-deep) 60%);
  color: var(--w);
}

/* Ambient light on dark sections */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 35% at 50% 0%, rgba(200, 150, 90, 0.04) 0%, transparent 55%);
}

.section--dark>* {
  position: relative;
  z-index: 1;
}

/* Light sections */
.section--light {
  background: var(--cream);
  color: var(--cream-text);
}

/* Lazer override */
.section--lazer {
  background: linear-gradient(160deg, var(--cream) 0%, var(--cream-warm) 100%);
}

/* Marlon override */
.section--marlon {
  background:
    radial-gradient(ellipse 70% 55% at 18% 42%, rgba(200, 150, 90, 0.045) 0%, transparent 55%),
    var(--ink-deep);
}

/* NF override */
.section--nf {
  background: var(--cream);
}

/* Form override */
.section--form {
  background:
    radial-gradient(ellipse 100% 55% at 50% 0%, var(--ink-mid), var(--ink-deep));
}

/* Watermark for localizacao */
.section--local::after {
  content: "BRAVA";
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(5rem, 22vw, 18rem);
  font-weight: 200;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 22, 16, 0.04);
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

.section--local>.section__inner {
  position: relative;
  z-index: 1;
}

/* Inner container */
.section>.section__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-section) var(--s-inner);
  position: relative;
}

/*
 * Marcadores de canto — indicam o eixo diagonal TR / BL
 * Thin L-shapes in gold: visíveis mas não intrusivos.
 * Criam continuidade visual com os clip-paths dos blocos.
 */
.section__inner::before,
.section__inner::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 0;
}

/* TR — superior direito */
.section__inner::before {
  top: calc(var(--s-section) * 0.55);
  right: var(--s-inner);
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  opacity: 0.22;
}

/* BL — inferior esquerdo */
.section__inner::after {
  bottom: calc(var(--s-section) * 0.55);
  left: var(--s-inner);
  border-bottom: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
  opacity: 0.22;
}

/* Seções escuras: tom ligeiramente mais visível */
.section--dark .section__inner::before,
.section--dark .section__inner::after {
  opacity: 0.18;
}

/* Seções estreitas: não mostrar (conteúdo muito concentrado) */
.section__inner--narrow::before,
.section__inner--narrow::after {
  display: none;
}

.section__inner--narrow {
  max-width: var(--max-w-narrow);
}

/* Split layout */
.section__inner--split {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
}

@media (min-width: 900px) {
  .section__inner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s16);
    align-items: center;
  }
}

/* ── 8. SECTION TYPOGRAPHY ────────────────────────────────── */

/* Kicker — editorial ornament lines */
.section-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s4);
}

.section-kicker::before,
.section-kicker::after {
  content: "";
  flex: 0 0 clamp(1rem, 2.5vw, 2.5rem);
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.section--light .section-kicker {
  color: var(--gold-muted);
}

.section__header--left .section-kicker {
  justify-content: flex-start;
}

.section__header {
  text-align: center;
  margin-bottom: var(--s10);
  position: relative;
  overflow: hidden;
}

.section__header--left {
  text-align: left;
}

/* Ghost watermark word from data-bg — identical pattern to A10 site */
.section__header[data-bg]::after {
  content: attr(data-bg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(5rem, 22vw, 15rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  color: currentColor;
  opacity: 0.028;
  z-index: 0;
  line-height: 1;
}

.section__header--left[data-bg]::after {
  left: 0;
  transform: translate(0, -50%);
}

/* All children sit above the watermark */
.section__header>* {
  position: relative;
  z-index: 1;
}

/* Main title */
.section__title {
  font-size: var(--t-xxl);
  font-weight: 200;
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.section--dark .section__title {
  color: var(--w);
}

.section--light .section__title {
  color: var(--cream-text);
}

.section__subtitle {
  font-size: var(--t-sm);
  font-weight: 300;
  margin-top: var(--s3);
  opacity: 0.65;
}

.section__lead {
  text-align: center;
  max-width: 34rem;
  margin: 0 auto var(--s16);
  font-size: var(--t-md);
  font-weight: 300;
  line-height: 1.75;
}

.section--dark .section__lead {
  color: var(--w70);
}

.section--light .section__lead {
  color: var(--cream-muted);
}

.section__lead--emphasis {
  font-style: italic;
}

.section__lead strong {
  font-weight: 600;
}

.section__cta {
  text-align: center;
  margin-top: var(--s16);
}

/* ── 9. MARQUEE STRIP ─────────────────────────────────────── */
.marquee-strip {
  overflow: hidden;
  background: var(--ink-deep);
  border-top: 1px solid var(--ink-stroke);
  border-bottom: 1px solid var(--ink-stroke);
  padding: var(--s3) 0;
  position: relative;
  /* Must sit above all sections (z-index 2–10) so it's never covered
     by the section curve-overlap negative margin-top */
  z-index: 12;
}

.marquee-strip__track {
  display: flex;
  gap: var(--s6);
  width: max-content;
  white-space: nowrap;
  animation: marquee-run 34s linear infinite;
}

@keyframes marquee-run {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.marquee-strip__item {
  font-size: var(--t-xxs);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--w30);
}

.marquee-strip__sep {
  color: var(--gold);
  opacity: 0.35;
  font-size: 0.6rem;
  flex-shrink: 0;
}

/* ── 10. LOCALIZAÇÃO — faixa de dados + mapa ────────────── */

/*
 * Estrutura editorial inspirada em relatórios financeiros premium:
 *   1. Faixa de dados (loc-stat-band): 4 indicadores full-width
 *   2. Linha de ancoragem (loc-bridge): manifesto editorial
 *   3. Mapa panorâmico (loc-map-solo): prova geográfica
 *
 * Os números SÃO o argumento — têm toda a largura.
 * O mapa é a evidência — vem depois, mais largo e mais calmo.
 */

/* ── Marquee de indicadores — passagem contínua ── */
/*
 * Os 4 KPIs passam em loop suave, sem agitação.
 * Velocidade: 36s por ciclo — tempo de leitura confortável.
 * Pausa no hover para quem quer absorver o número.
 * Máscara de borda: desvanesce nas extremidades para elegância.
 */
.loc-stat-marquee {
  overflow: hidden;
  border-top: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
  margin-bottom: var(--s12);
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 7%,
      black 93%,
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0%,
      black 7%,
      black 93%,
      transparent 100%);
}

.loc-stat-marquee__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: loc-stat-scroll 36s linear infinite;
  will-change: transform;
}

/* Pausa no hover para leitura */
.loc-stat-marquee:hover .loc-stat-marquee__track {
  animation-play-state: paused;
}

@keyframes loc-stat-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Cada set: agrupa os 4 KPIs com espaçamento uniforme */
.loc-stat-marquee__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Cada KPI individual */
.loc-stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  flex-shrink: 0;
  padding: var(--s8) clamp(2rem, 4.5vw, 4rem);
}

/* Número: o argumento. Ultra-light, enorme */
.loc-stat-item__num {
  display: block;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 100;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--cream-text);
  white-space: nowrap;
}

/* Sufixo %, min, mil — gold, menor, tracked */
.loc-stat-item__suf {
  font-size: 0.38em;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.18em;
}

/* Rótulo do indicador */
.loc-stat-item__label {
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cream-text);
  white-space: nowrap;
}

/* Fonte / contexto — credibilidade micro */
.loc-stat-item__note {
  font-size: 0.57rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-subtle);
  white-space: nowrap;
}

/* Separador vertical fino entre KPIs */
.loc-stat-sep {
  flex-shrink: 0;
  width: 1px;
  height: clamp(2.8rem, 5vw, 4rem);
  background: var(--cream-border);
  align-self: center;
}

/* ── Linha de ancoragem editorial ──────────────── */
/*
 * Pull-quote que transforma dados em narrativa.
 * Regras horizontais acima e abaixo criam o "respiro"
 * entre as tabelas de dados e o mapa.
 */
.loc-bridge {
  position: relative;
  text-align: center;
  padding: var(--s10) var(--s4);
  margin-bottom: var(--s10);
  font-size: clamp(1.4rem, 3.5vw, 2.6rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--cream-text);
  font-style: italic;
}

.loc-bridge::before,
.loc-bridge::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cream-border), transparent);
}

.loc-bridge::before {
  top: 0;
}

.loc-bridge::after {
  bottom: 0;
}

/* Em mobile: regras vão de borda a borda */
@media (max-width: 599px) {

  .loc-bridge::before,
  .loc-bridge::after {
    left: 0;
    right: 0;
  }
}

/* O <span> dentro da frase vira <br> em desktop */
.loc-bridge__br::before {
  content: "\A";
  white-space: pre;
}

@media (max-width: 599px) {
  .loc-bridge__br::before {
    content: " ";
    white-space: normal;
  }
}

/* ── Mapa panorâmico ───────────────────────────── */
.loc-map-solo {
  margin-top: 0;
}

.loc-map-solo__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(165, 120, 64, 0.16);
  aspect-ratio: 21/8;
  /* Corte diagonal TR + BL — assinatura RARO */
  clip-path: polygon(0 0,
      calc(100% - var(--ch-lg)) 0,
      100% var(--ch-lg),
      100% 100%,
      var(--ch-lg) 100%,
      0 calc(100% - var(--ch-lg)));
  /* Placeholder enquanto o mapa carrega (evita tela preta) */
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2520 50%, #1a1a1a 100%);
}

/* Shimmer animado sobre o placeholder do mapa */
.loc-map-solo__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(165, 120, 64, 0.06) 40%,
    rgba(165, 120, 64, 0.12) 50%,
    rgba(165, 120, 64, 0.06) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: mapShimmer 2s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* Esconde o shimmer quando o iframe carregou */
.loc-map-solo__frame.is-loaded::before {
  opacity: 0;
}

@keyframes mapShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 599px) {
  .loc-map-solo__frame {
    aspect-ratio: 4/3;
  }
}

.loc-map-solo__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  filter: grayscale(20%) contrast(1.05) saturate(0.9);
  transition: filter 0.5s, opacity 0.8s ease;
  z-index: 2;
  opacity: 0;
}

/* Mostra o iframe com fade-in suave quando carregado */
.loc-map-solo__frame.is-loaded .loc-map-solo__iframe {
  opacity: 1;
}

.loc-map-solo__frame:hover .loc-map-solo__iframe {
  filter: grayscale(0%) contrast(1) saturate(1);
}

.loc-map-solo__caption {
  display: flex;
  align-items: center;
  gap: var(--s2);
  justify-content: center;
  padding: var(--s4) var(--s4) var(--s2);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-subtle);
}

.loc-map-solo__caption svg {
  flex-shrink: 0;
  opacity: 0.45;
}

/* ── 11. FEATURE LIST — Empreendimento ───────────────────── */
/* ── 11. FEATURE BENTO — Nada parecido existe ───────────────────────
 *
 * Layout bento editorial: 6 diferenciais em cards de tamanhos variados.
 * Cada card tem:
 *   — ícone SVG dedicado (argumento em gráfico)
 *   — numeração em gold
 *   — ghost icon de fundo para profundidade
 * Grid 3-col no desktop com card-wide (2 col) e card-future (3 col).
 * ─────────────────────────────────────────────────────────────────── */

.feature-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: var(--s16);
}

@media (min-width: 640px) {
  .feature-bento {
    grid-template-columns: 1fr 1fr;
  }

  .feature-bento__card--wide {
    grid-column: span 2;
  }

  .feature-bento__card--future {
    grid-column: span 2;
  }
}

@media (min-width: 960px) {
  .feature-bento {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-bento__card--wide {
    grid-column: span 2;
  }

  .feature-bento__card--future {
    grid-column: span 3;
  }
}

/* Card base */
.feature-bento__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s8);
  padding: var(--s8);
  background: var(--w04);
  border: 1px solid var(--ink-stroke);
  clip-path: polygon(0 0,
      calc(100% - var(--ch-md)) 0,
      100% var(--ch-md),
      100% 100%,
      var(--ch-md) 100%,
      0 calc(100% - var(--ch-md)));
  transition: background 0.3s, border-color 0.3s;
  min-height: 13rem;
}

.feature-bento__card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gold-dim);
}

/* Ghost icon: watermark de profundidade no fundo */
.feature-bento__icon-ghost {
  position: absolute;
  bottom: -8%;
  right: -4%;
  width: 48%;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0.04;
  color: var(--w);
  transition: opacity 0.4s;
}

.feature-bento__card:hover .feature-bento__icon-ghost {
  opacity: 0.09;
}

.feature-bento__icon-ghost svg {
  width: 100%;
  height: 100%;
}

/* Wide card: ghost maior, posição diferente */
@media (min-width: 960px) {
  .feature-bento__card--wide .feature-bento__icon-ghost {
    width: 32%;
    bottom: -5%;
    right: 4%;
  }
}

/* Cabeçalho do card: número + ícone lado a lado */
.feature-bento__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Número editorial */
.feature-bento__num {
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--gold);
  opacity: 0.5;
  transition: opacity 0.25s;
  line-height: 1;
  padding-top: 2px;
}

.feature-bento__card:hover .feature-bento__num {
  opacity: 1;
}

/* Wrapper do ícone */
.feature-bento__icon-wrap {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.feature-bento__icon-wrap svg {
  width: 100%;
  height: 100%;
  color: var(--w50);
  transition: color 0.3s;
}

.feature-bento__card:hover .feature-bento__icon-wrap svg {
  color: var(--gold);
}

/* Corpo do card: ancora ao rodapé pelo flex */
.feature-bento__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s2);
  position: relative;
  z-index: 1;
}

.feature-bento__title {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--w);
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color 0.25s;
}

.feature-bento__card:hover .feature-bento__title {
  color: var(--gold-light);
}

.feature-bento__desc {
  font-size: var(--t-xxs);
  color: var(--w50);
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* Card future (06 — eVTOL): layout horizontal no desktop */
@media (min-width: 960px) {
  .feature-bento__card--future {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--s16);
    min-height: 10rem;
  }

  .feature-bento__card--future .feature-bento__head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s8);
    flex-shrink: 0;
    min-height: 6rem;
  }

  .feature-bento__card--future .feature-bento__body {
    justify-content: flex-end;
  }
}

/* Acento "2030" — decorativo, quase invisível */
.feature-bento__year {
  position: absolute;
  bottom: -0.08em;
  right: var(--s6);
  font-size: clamp(4.5rem, 9vw, 8rem);
  font-weight: 100;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--w);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.4s;
}

.feature-bento__card--future:hover .feature-bento__year {
  opacity: 0.10;
}

/* ── feature-bento--light: modo claro (seção Lazer, fundo cream) ── */
.feature-bento--light .feature-bento__card {
  background: var(--w);
  border-color: rgba(0, 0, 0, 0.08);
}

.feature-bento--light .feature-bento__card:hover {
  background: var(--w);
  border-color: var(--gold);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.feature-bento--light .feature-bento__icon-ghost {
  color: var(--ink);
  opacity: 0.05;
}

.feature-bento--light .feature-bento__card:hover .feature-bento__icon-ghost {
  opacity: 0.10;
}

.feature-bento--light .feature-bento__icon-wrap svg {
  color: rgba(0, 0, 0, 0.30);
}

.feature-bento--light .feature-bento__card:hover .feature-bento__icon-wrap svg {
  color: var(--gold);
}

.feature-bento--light .feature-bento__title {
  color: var(--ink);
}

.feature-bento--light .feature-bento__card:hover .feature-bento__title {
  color: var(--gold-muted);
}

.feature-bento--light .feature-bento__desc {
  color: rgba(0, 0, 0, 0.50);
}

.feature-bento--light .feature-bento__year {
  color: var(--ink);
  opacity: 0.04;
}

.feature-bento--light .feature-bento__card--future:hover .feature-bento__year {
  opacity: 0.08;
}

/* Render block — corte diagonal TR + BL */
.render-block {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--ink-stroke);
  position: relative;
  margin-bottom: var(--s8);
  clip-path: polygon(0 0,
      calc(100% - var(--ch-lg)) 0,
      100% var(--ch-lg),
      100% 100%,
      var(--ch-lg) 100%,
      0 calc(100% - var(--ch-lg)));
}

.render-block img {
  width: 100%;
  aspect-ratio: 14/8;
  object-fit: cover;
  display: block;
}

/* ── 12. GALLERY — Empreendimento ────────────────────────── */
.emp-gallery {
  margin-bottom: var(--s8);
}

.emp-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* mobile: 2 colunas */
  gap: 4px;
}

@media (min-width: 768px) {
  .emp-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  /* desktop: 4 colunas */
}

/* Responsive visibility */
.emp-gallery__item--dt-only {
  display: none;
}

/* hidden on mobile, shown on desktop */
.emp-gallery__item--extra {
  display: none;
}

/* hidden until expanded */

@media (min-width: 768px) {
  .emp-gallery__item--dt-only {
    display: block;
  }
}

/* When expanded: reveal all hidden items, hide stacked card */
.emp-gallery__grid.is-expanded .emp-gallery__item--extra {
  display: block;
}

.emp-gallery__grid.is-expanded .emp-gallery__item--dt-only {
  display: block;
}

.emp-gallery__grid.is-expanded .emp-gallery__stack-card {
  display: none !important;
}

/* Regular gallery items */
.emp-gallery__item {
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--ink-raised);
  aspect-ratio: 4/3;
}

@media (min-width: 768px) {
  .emp-gallery__item {
    border-radius: var(--r-md);
  }
}

.emp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-smooth);
}

.emp-gallery__item:hover img {
  transform: scale(1.06);
}

/* ── STACKED VER MAIS CARD (mobile only) ─────────────────── */
.emp-gallery__stack-card {
  position: relative;
  aspect-ratio: 4/3;
  cursor: pointer;
  border-radius: 0;
  clip-path: polygon(0 0,
      calc(100% - var(--ch-sm)) 0,
      100% var(--ch-sm),
      100% 100%,
      var(--ch-sm) 100%,
      0 calc(100% - var(--ch-sm)));
  background: var(--ink-raised);
  overflow: visible;
  /* layers peek beyond bounds */
}

.emp-gallery__stack-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.emp-gallery__stack-inner {
  position: absolute;
  inset: 0;
}

/* Shared layer style */
.emp-gallery__stack-layer,
.emp-gallery__stack-front {
  position: absolute;
  inset: 0;
  border-radius: 0;
  clip-path: polygon(0 0,
      calc(100% - var(--ch-sm)) 0,
      100% var(--ch-sm),
      100% 100%,
      var(--ch-sm) 100%,
      0 calc(100% - var(--ch-sm)));
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s var(--ease-smooth);
}

.emp-gallery__stack-layer img,
.emp-gallery__stack-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Back layers (rotate + offset) */
.emp-gallery__stack-layer--3 {
  transform: translateX(9px) translateY(-9px) rotate(5deg);
  z-index: 1;
}

.emp-gallery__stack-layer--3 img {
  opacity: 0.55;
}

.emp-gallery__stack-layer--3::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
}

.emp-gallery__stack-layer--2 {
  transform: translateX(5px) translateY(-5px) rotate(3deg);
  z-index: 2;
}

.emp-gallery__stack-layer--2 img {
  opacity: 0.68;
}

.emp-gallery__stack-layer--2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
}

.emp-gallery__stack-layer--1 {
  transform: translateX(2.5px) translateY(-2.5px) rotate(1.5deg);
  z-index: 3;
}

.emp-gallery__stack-layer--1 img {
  opacity: 0.82;
}

.emp-gallery__stack-layer--1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.14);
}

/* Front layer */
.emp-gallery__stack-front {
  z-index: 4;
}

/* Hover: layers fan out */
.emp-gallery__stack-card:hover .emp-gallery__stack-layer--3 {
  transform: translateX(13px) translateY(-13px) rotate(6.5deg);
}

.emp-gallery__stack-card:hover .emp-gallery__stack-layer--2 {
  transform: translateX(8px) translateY(-8px) rotate(4deg);
}

.emp-gallery__stack-card:hover .emp-gallery__stack-layer--1 {
  transform: translateX(4px) translateY(-4px) rotate(2deg);
}

/* Overlay on front */
.emp-gallery__stack-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.18) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--w);
}

.emp-gallery__stack-count {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.emp-gallery__stack-label {
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 2px;
}


/* ── 12. LAZER STAGE — seletor cinematográfico ───────────── */

/* Stage wrapper */
.lz-stage {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  margin-bottom: var(--s8);
}

@media (min-width: 800px) {
  .lz-stage {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--s8);
    align-items: start;
  }
}

@media (min-width: 1100px) {
  .lz-stage {
    grid-template-columns: 1fr 320px;
  }
}

/* ── Tela ─────────────────────────────────────── */
.lz-screen {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 0;
  overflow: hidden;
  background: var(--ink-deep);
  /* Corte TR: como um monitor de cinema inclinado */
  clip-path: polygon(0 0,
      calc(100% - var(--ch-lg)) 0,
      100% var(--ch-lg),
      100% 100%,
      0 100%);
}

@media (min-width: 800px) {
  .lz-screen {
    aspect-ratio: 16/9;
  }
}

/* Vídeo único: ocupa toda a tela */
.lz-scene__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* Gradiente de legibilidade sobre o vídeo */
.lz-scene__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, rgba(7, 9, 15, 0.82) 0%, rgba(7, 9, 15, 0.20) 45%, transparent 100%),
    linear-gradient(to right, rgba(7, 9, 15, 0.30) 0%, transparent 38%);
  pointer-events: none;
}

/* Legenda overlay (bottom-left) */
.lz-screen__caption {
  position: absolute;
  bottom: var(--s5);
  left: var(--s5);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}

@media (min-width: 640px) {
  .lz-screen__caption {
    bottom: var(--s8);
    left: var(--s8);
  }
}

.lz-screen__cap-zone {
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  line-height: 1;
}

.lz-screen__cap-name {
  font-size: clamp(1.1rem, 2.8vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--w);
  line-height: 1.1;
}


/* Crossfade overlay — escurece entre trocas de amenidade */
.lz-crossfade {
  position: absolute;
  inset: 0;
  background: var(--ink-deep);
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 8;
  pointer-events: none;
}

.lz-crossfade.is-fading {
  opacity: 1;
}

/* Barra de progresso auto-advance */
.lz-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  z-index: 10;
}

.lz-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-muted), var(--gold-light));
}

/* ── Painel (nav + chips) ─────────────────────── */
.lz-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* Nav — mobile: scroll horizontal de pills */
.lz-nav {
  display: flex;
  flex-direction: row;
  gap: 0;
  /* mobile: overflow hidden para o marquee — sem scroll manual */
  overflow: hidden;
  padding-bottom: 0;
  /* máscara de borda: fade nas extremidades (igual KPI) */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 7%,
      black 93%,
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0%,
      black 7%,
      black 93%,
      transparent 100%);
}

.lz-nav::-webkit-scrollbar {
  display: none;
}

/* Track: anima o marquee no mobile */
.lz-nav__track {
  display: flex;
  flex-direction: row;
  gap: var(--s2);
  width: max-content;
  will-change: transform;
  animation: lz-nav-marquee 20s linear infinite;
  padding: 2px 0;
}

/* Pausa quando o usuário toca ou há foco dentro */
.lz-nav.is-paused .lz-nav__track,
.lz-nav:focus-within .lz-nav__track {
  animation-play-state: paused;
}

@keyframes lz-nav-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Clones: ocultos por padrão, exibidos apenas no mobile pelo bloco abaixo */
.lz-nav__btn--clone {
  display: none;
}

@media (max-width: 799px) {
  .lz-nav__btn--clone {
    display: inline-flex;
  }
}

.lz-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--cream-border);
  border-radius: 0;
  clip-path: polygon(0 0,
      calc(100% - var(--ch-sm)) 0,
      100% var(--ch-sm),
      100% 100%,
      var(--ch-sm) 100%,
      0 calc(100% - var(--ch-sm)));
  background: transparent;
  cursor: pointer;
  min-height: 44px;
  font-family: var(--font);
  font-size: var(--t-xxs);
  letter-spacing: 0.05em;
  color: var(--cream-muted);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.lz-nav__btn.is-active {
  background: var(--cream-text);
  border-color: var(--cream-text);
  color: var(--cream);
}

.lz-nav__btn:hover:not(.is-active) {
  border-color: rgba(165, 120, 64, 0.4);
  color: var(--cream-text);
}

.lz-nav__num {
  font-weight: 600;
  color: var(--gold);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.lz-nav__btn.is-active .lz-nav__num {
  color: var(--gold-light);
}

.lz-nav__dot {
  display: none;
}

/* visible only on desktop */

/* Nav — desktop: lista vertical com borda esquerda */
@media (min-width: 800px) {
  .lz-nav {
    flex-direction: column;
    overflow: hidden;
    gap: 0;
    border: 1px solid var(--cream-border);
    border-radius: 0;
    clip-path: polygon(0 0,
        calc(100% - var(--ch-md)) 0,
        100% var(--ch-md),
        100% 100%,
        var(--ch-md) 100%,
        0 calc(100% - var(--ch-md)));
    /* desktop: cancela máscara e marquee do mobile */
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* track vira display:contents no desktop — botões ficam direto no lz-nav */
  .lz-nav__track {
    display: contents;
  }

  /* clones não aparecem no desktop */
  .lz-nav__btn--clone {
    display: none;
  }

  .lz-nav__btn {
    white-space: normal;
    flex-shrink: unset;
    border: none;
    border-radius: 0;
    clip-path: none;
    border-bottom: 1px solid var(--cream-border);
    padding: var(--s4) var(--s5);
    justify-content: flex-start;
    gap: var(--s3);
    min-height: 58px;
    color: var(--cream-muted);
    background: var(--w);
    border-left: 3px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }

  .lz-nav__btn:last-child {
    border-bottom: 0;
  }

  .lz-nav__btn.is-active {
    background: var(--cream-warm);
    color: var(--cream-text);
    border-color: transparent;
    border-left-color: var(--gold);
  }

  .lz-nav__btn:hover:not(.is-active) {
    background: rgba(200, 150, 90, 0.04);
    border-color: transparent;
    color: var(--cream-text);
  }

  .lz-nav__num {
    font-size: var(--t-xxs);
    letter-spacing: 0.12em;
    min-width: 1.6em;
  }

  .lz-nav__name {
    flex: 1;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.02em;
  }

  .lz-nav__dot {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    transition: opacity 0.25s;
    flex-shrink: 0;
    margin-left: auto;
  }

  .lz-nav__btn.is-active .lz-nav__dot {
    opacity: 1;
  }
}

/* ── Grid de amenidades individuais ──────────── */
.lz-amenity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}

.lz-amenity-grid[hidden] {
  display: none;
}

.lz-amenity-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.5rem;
  background: var(--w);
  border: 1px solid var(--cream-border);
  border-top: 2px solid var(--cream-border);
  border-radius: 0;
  clip-path: polygon(0 0,
      calc(100% - var(--ch-sm)) 0,
      100% var(--ch-sm),
      100% 100%,
      var(--ch-sm) 100%,
      0 calc(100% - var(--ch-sm)));
  min-height: 48px;
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  position: relative;
}

.lz-amenity-btn:hover:not(.is-active) {
  background: rgba(200, 150, 90, 0.05);
  border-color: rgba(165, 120, 64, 0.3);
  border-top-color: rgba(165, 120, 64, 0.4);
  transform: scale(1.02);
}

.lz-amenity-btn.is-active {
  background: var(--cream-warm);
  border-color: rgba(165, 120, 64, 0.25);
  border-top-color: var(--gold);
}

.lz-amenity-btn__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream-muted);
  line-height: 1.35;
}

.lz-amenity-btn.is-active .lz-amenity-btn__name {
  color: var(--cream-text);
}

/* Desktop: grid 2-col com scroll suave se necessário */
@media (min-width: 800px) {
  .lz-amenity-grid {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(165, 120, 64, 0.25) transparent;
  }

  .lz-amenity-grid::-webkit-scrollbar {
    width: 3px;
  }

  .lz-amenity-grid::-webkit-scrollbar-track {
    background: transparent;
  }

  .lz-amenity-grid::-webkit-scrollbar-thumb {
    background: rgba(165, 120, 64, 0.3);
    border-radius: 2px;
  }
}

/* ── 13. PLANTAS ─────────────────────────────────────────── */
.plantas__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-bottom: var(--s10);
}

.plantas__tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.65rem 1.25rem;
  border-radius: 0;
  clip-path: polygon(0 0,
      calc(100% - var(--ch-sm)) 0,
      100% var(--ch-sm),
      100% 100%,
      var(--ch-sm) 100%,
      0 calc(100% - var(--ch-sm)));
  border: 1px solid var(--w12);
  color: var(--w50);
  font-size: var(--t-xxs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}

.plantas__tab span {
  font-size: 0.6rem;
  opacity: 0.55;
  margin-top: 2px;
}

.plantas__tab:active {
  transform: scale(0.97);
}

.plantas__tab.is-active {
  background: var(--gold);
  color: var(--ink);
  border-color: transparent;
  font-weight: 500;
}

.plantas__panel[hidden] {
  display: none;
}

.planta-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}

@media (min-width: 768px) {
  .planta-showcase {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--s10);
    align-items: start;
  }
}

.planta-showcase__visual {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--ink-stroke);
  background: var(--ink-raised);
  position: relative;
}

.planta-showcase__visual img {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Watermark: logo RARO atrás das plantas humanizadas */
.planta-showcase__visual--watermark {
  background:
    var(--ink-raised) url('../Logo%20_%20NF%20Raro/RARO_Sierra_horizontal_mousse.png') center center / 40% auto no-repeat;
}

.planta-showcase__visual--watermark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(200, 150, 90, 0.04) 0%,
      transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* ── Meta panel premium — planta showcase ────────────────── */
.planta-showcase__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s8) 0;
}

/* Bloco de área — herói visual */
.planta-meta__area {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  line-height: 1;
  margin-bottom: var(--s3);
}

.planta-meta__num {
  font-size: clamp(3.75rem, 8vw, 6.5rem);
  font-weight: 100;
  letter-spacing: -0.05em;
  color: var(--w);
  line-height: 1;
}

.planta-meta__unit {
  font-size: clamp(1.1rem, 2.5vw, 2rem);
  font-weight: 200;
  color: var(--w30);
  letter-spacing: 0.04em;
  line-height: 1;
  padding-bottom: 0.1em;
}

/* Tipologia — kicker dourado */
.planta-meta__type {
  font-size: 0.57rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: var(--s10);
}

/* Divisor fino */
.planta-meta__divider {
  width: 100%;
  height: 1px;
  background: var(--ink-stroke);
  margin-bottom: var(--s6);
}

/* Lista de diferenciais */
.planta-meta__list {
  list-style: none;
}

.planta-meta__item {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--ink-stroke);
  transition: border-color 0.2s;
}

.planta-meta__item:first-child {
  border-top: 1px solid var(--ink-stroke);
}

/* Traço dourado indicador */
.planta-meta__item::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.35;
  flex-shrink: 0;
  transition: width 0.35s var(--ease-smooth), opacity 0.2s;
}

.planta-meta__item:hover::before {
  width: 2rem;
  opacity: 0.65;
}

.planta-meta__item-label {
  font-size: var(--t-sm);
  font-weight: 300;
  color: var(--w50);
  letter-spacing: 0.02em;
  line-height: 1.4;
  transition: color 0.2s;
}

.planta-meta__item:hover .planta-meta__item-label {
  color: var(--w70);
}

/* ── 14. ASSINATURAS ─────────────────────────────────────── */
/* ── Assinaturas — layout editorial com logos-ghost ──── */
.sig-brands {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--cream-border);
  margin-bottom: var(--s16);
}

@media (min-width: 600px) {
  .sig-brands {
    grid-template-columns: 1fr 1fr;
  }
}

.sig-brand {
  position: relative;
  overflow: hidden;
  padding: var(--s12) var(--s8);
  border-bottom: 1px solid var(--cream-border);
  transition: background 0.3s;
}

.sig-brand:last-child {
  border-bottom: none;
}

@media (min-width: 600px) {
  .sig-brand {
    border-bottom: none;
  }

  .sig-brand:first-child {
    border-right: 1px solid var(--cream-border);
  }
}

.sig-brand:hover {
  background: rgba(165, 120, 64, 0.025);
}

/* Ghost logo — camada de profundidade atrás de tudo */
.sig-brand__ghost {
  position: absolute;
  bottom: -6%;
  right: -5%;
  height: 88%;
  width: auto;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
  transition: opacity 0.5s;
}

.sig-brand:nth-child(2) .sig-brand__ghost {
  right: auto;
  left: -5%;
}

.sig-brand:hover .sig-brand__ghost {
  opacity: 0.34;
}

.sig-brand__content {
  position: relative;
  z-index: 1;
}

/* Logo visível — herói do card */
.sig-brand__logo-wrap {
  margin-bottom: var(--s8);
  min-height: 4rem;
  display: flex;
  align-items: center;
}

.sig-brand__logo {
  height: clamp(40px, 5vw, 62px);
  width: auto;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.85;
  transition: opacity 0.3s;
}

.sig-brand:hover .sig-brand__logo {
  opacity: 1;
}

.sig-brand__kicker {
  display: block;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s5);
}

.sig-brand__rule {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
  margin-bottom: var(--s5);
  transform-origin: left center;
  transition: width 0.5s var(--ease-smooth), opacity 0.3s;
}

.sig-brand:hover .sig-brand__rule {
  width: 3.5rem;
  opacity: 0.7;
}

.sig-brand__desc {
  font-size: var(--t-sm);
  color: var(--cream-muted);
  line-height: 1.72;
  max-width: 36ch;
}

.signature-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}

@media (min-width: 540px) {
  .signature-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

.signature-gallery__item {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(165, 120, 64, 0.14);
  /* item ímpar: TR · item par: BL — cria ritmo diagonal alternado */
  clip-path: polygon(0 0,
      calc(100% - var(--ch-md)) 0,
      100% var(--ch-md),
      100% 100%,
      0 100%);
}

.signature-gallery__item:nth-child(2n) {
  clip-path: polygon(0 0,
      100% 0,
      100% 100%,
      var(--ch-md) 100%,
      0 calc(100% - var(--ch-md)));
}

.signature-gallery__item img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease-smooth);
}

.signature-gallery__item--otto img {
  transform: scale(1.30);
}

.signature-gallery__item:hover img {
  transform: scale(1.04);
}

.signature-gallery__item--otto:hover img {
  transform: scale(1.34);
}

.signature-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(to top, rgba(3, 5, 10, 0.7) 0%, transparent 100%);
  color: var(--w);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0.04em;
  z-index: 2;
}

.signature-gallery__caption span {
  display: block;
  font-size: 0.75rem;
  color: var(--gold-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.signature-gallery__item {
  position: relative;
}

/* ── 15. MARLON ──────────────────────────────────────────── */
.marlon-media__frame {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(200, 150, 90, 0.16);
  position: relative;
  /* Corte BL — o Marlon "entra" pela esquerda, o corte direciona o olhar */
  clip-path: polygon(0 0,
      100% 0,
      100% 100%,
      var(--ch-lg) 100%,
      0 calc(100% - var(--ch-lg)));
}

.marlon-media__frame img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.marlon-media__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, transparent 40%, rgba(7, 9, 15, 0.28));
  pointer-events: none;
}

.marlon-quote {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 200;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin: var(--s8) 0;
  color: var(--w);
}

.marlon-quote__mark {
  color: var(--gold);
  font-size: 2.5rem;
  line-height: 0;
  vertical-align: -0.28em;
}

.marlon-tag {
  font-size: var(--t-sm);
  color: var(--w70);
  line-height: 1.65;
  margin-bottom: var(--s8);
}

/* ── 16. NF STATS ────────────────────────────────────────── */
.nf-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--cream-border);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: var(--s10);
  /* Corte diagonal TR + BL — ecoa o loc-block e o render-block */
  clip-path: polygon(0 0,
      calc(100% - var(--ch-md)) 0,
      100% var(--ch-md),
      100% 100%,
      var(--ch-md) 100%,
      0 calc(100% - var(--ch-md)));
}

@media (min-width: 720px) {
  .nf-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.nf-stat {
  padding: var(--s10) var(--s6);
  text-align: center;
  border-right: 1px solid var(--cream-border);
  border-bottom: 1px solid var(--cream-border);
  position: relative;
}

.nf-stat:nth-child(even) {
  border-right: 0;
}

.nf-stat:nth-last-child(-n+2) {
  border-bottom: 0;
}

@media (min-width: 720px) {
  .nf-stat {
    border-bottom: 0;
  }

  .nf-stat:last-child {
    border-right: 0;
  }

  .nf-stat:nth-child(even) {
    border-right: 1px solid var(--cream-border);
  }

  .nf-stat:last-child {
    border-right: 0;
  }
}

/* Gold top line */
.nf-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.45;
}

.nf-stat__value {
  display: block;
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 200;
  line-height: 1;
  color: var(--cream-text);
  letter-spacing: -0.03em;
}

.nf-stat__label {
  display: block;
  font-size: var(--t-xxs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-top: var(--s3);
  line-height: 1.5;
}

.nf-audit {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--cream-muted);
  margin-bottom: var(--s6);
  line-height: 1.65;
}

.nf-logo-block {
  text-align: center;
  margin-top: var(--s4);
}

.nf-logo-block__img {
  height: clamp(22px, 2.75vw, 31px);
  width: auto;
  display: inline-block;
  user-select: none;
}

.site-footer__nf {
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--w50);
  border: 1px solid var(--gold-dim);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.55rem;
}

/* ── 17. FORM ────────────────────────────────────────────── */
.lead-form__row {
  margin-bottom: var(--s6);
}

.lead-form__row--2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}

@media (min-width: 520px) {
  .lead-form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: block;
}

.field__label {
  display: block;
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w30);
  margin-bottom: var(--s2);
}

.field__input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--w12);
  background: var(--w04);
  color: var(--w);
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 300;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  min-height: 52px;
}

.field__input::placeholder {
  color: var(--w30);
}

.field__input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(200, 150, 90, 0.05);
  box-shadow: 0 0 0 3px rgba(200, 150, 90, 0.1);
}

/* Toggle Group Design */
.toggle-group {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s4);
}

.btn-toggle {
  flex: 1;
  background: var(--w04);
  border: 1px solid var(--w12);
  color: var(--w30);
  padding: 0.85rem;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: var(--t-xxs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.3s var(--ease-smooth);
  cursor: pointer;
}

.btn-toggle:hover {
  border-color: var(--gold-muted);
  color: var(--w);
}

.btn-toggle.is-active {
  background: rgba(200, 150, 90, 0.08);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 20px rgba(200, 150, 90, 0.15);
}

.lead-form__status {
  min-height: 1.2rem;
  font-size: var(--t-xxs);
  color: var(--gold);
  margin: var(--s3) 0;
}

.lead-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s8);
}

@media (min-width: 480px) {
  .lead-form__actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.lead-form__address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s8);
  font-size: var(--t-xxs);
  color: var(--w30);
}

.lead-form__address svg {
  flex-shrink: 0;
  opacity: 0.45;
}

/* Bitrix24 embed wrapper - keeps original section rhythm */
.lead-form--embed {
  display: block;
  margin-top: var(--s6);
  min-height: 420px;
}

/* ── 18. FOOTER ──────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 20;
  background: var(--ink-deep);
  padding: var(--s16) var(--s-inner) var(--s12);
}

/* Top gold rule */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(200, 150, 90, 0.28) 50%, transparent 95%);
}

.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}

.site-footer__brands {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}

/* Logo RARO × Sierra — tamanho principal */
.footer-logo {
  display: block;
  height: clamp(36px, 6vw, 56px);
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.3s;
}

.footer-logo:hover {
  opacity: 1;
}

/* Logo NF Empreendimentos — último elemento do footer */
.footer-logo--nf {
  height: clamp(14px, 2.4vw, 22px);
  opacity: 0.65;
  display: block;
  margin: var(--s10) auto 0;
}

.footer-logo--nf:hover {
  opacity: 0.9;
}

.site-footer__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.site-footer__links a {
  font-size: var(--t-xxs);
  letter-spacing: 0.06em;
  color: var(--w30);
  transition: color 0.25s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-footer__links a:hover {
  color: var(--gold);
}

.footer-dot {
  opacity: 0.25;
}

.site-footer__legal {
  font-size: 0.65rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.2);
  max-width: 42rem;
  margin: 0 auto;
}

.site-footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.site-footer__social-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--w30);
  margin-right: var(--s2);
}

.site-footer__social a {
  font-size: var(--t-xxs);
  color: var(--w30);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.25s;
}

.site-footer__social a:hover {
  color: var(--gold);
}

/* ── 19. FILM PLAYER ────────────────────────────────────── */
.section--film {
  padding: 0;
}

.film-player {
  position: relative;
  width: 100%;
  background: #000;
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer;
}

/* Estado vertical (mobile inline) */
.film-player.is-vertical {
  aspect-ratio: 9/16;
  max-width: 480px; /* Evita que fique gigante em tablets portrait */
  margin-left: auto;
  margin-right: auto;
}

/* Garante que ao entrar em fullscreen fique 100% */
.film-player:fullscreen,
.film-player:-webkit-full-screen {
  aspect-ratio: auto;
  height: 100%;
}

.film-player__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s ease;
}

.film-player.is-ended .film-player__video {
  opacity: 0;
  pointer-events: none;
}

/* ── Big play (tela inicial antes de iniciar) ── */
.film-player__big-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.38);
  border: none;
  cursor: pointer;
  transition: opacity 0.35s, background 0.35s;
  z-index: 4;
}

.film-player.is-playing .film-player__big-play,
.film-player.is-ended .film-player__big-play {
  opacity: 0;
  pointer-events: none;
}

.film-player__big-play-icon {
  width: 80px;
  height: 80px;
  border-radius: 0;
  clip-path: polygon(0 0,
      calc(100% - var(--ch-md)) 0,
      100% var(--ch-md),
      100% 100%,
      var(--ch-md) 100%,
      0 calc(100% - var(--ch-md)));
  background: rgba(200, 150, 90, 0.18);
  border: 1.5px solid rgba(200, 150, 90, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w);
  transition: background 0.25s, transform 0.25s;
  backdrop-filter: blur(6px);
}

.film-player__big-play:hover .film-player__big-play-icon {
  background: rgba(200, 150, 90, 0.30);
  transform: scale(1.06);
}

/* ── End-card ── */
.film-player__end-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s8);
  background: var(--ink-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease 0.3s;
  z-index: 5;
}

.film-player.is-ended .film-player__end-card {
  opacity: 1;
  pointer-events: auto;
}

.film-end-card__logo {
  height: clamp(38px, 7vw, 80px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  animation: none;
}

.film-player.is-ended .film-end-card__logo {
  animation: film-logo-in 1.1s var(--ease-smooth) 0.5s both;
}

@keyframes film-logo-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 0.92;
    transform: translateY(0);
  }
}

.film-end-card__replay {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s2) var(--s3);
  transition: color 0.25s;
  opacity: 0;
  animation: none;
}

.film-player.is-ended .film-end-card__replay {
  animation: film-logo-in 0.8s var(--ease-smooth) 1.4s both;
}

.film-end-card__replay:hover {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Controles ── */
.film-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
  padding: 2.5rem var(--s6) var(--s5);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.28s, transform 0.28s;
  pointer-events: none;
}

.film-player:hover .film-controls,
.film-player.is-paused .film-controls,
.film-player.show-controls .film-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.film-player.is-ended .film-controls {
  opacity: 0;
  pointer-events: none;
}

/* Progress bar */
.film-controls__progress {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: var(--s3);
}

.film-controls__progress-track {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0;
}

.film-controls__progress-fill {
  height: 100%;
  background: var(--gold);
  width: 0%;
  border-radius: 0;
  transition: width 0.1s linear;
  pointer-events: none;
}

.film-controls__progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  background: var(--gold);
  clip-path: polygon(0 0,
      calc(100% - 3px) 0,
      100% 3px,
      100% 100%,
      3px 100%,
      0 calc(100% - 3px));
  transform: translate(-50%, -50%);
  transition: left 0.1s linear;
  pointer-events: none;
  opacity: 0;
}

.film-controls__progress:hover .film-controls__progress-thumb {
  opacity: 1;
}

.film-controls__progress:hover .film-controls__progress-track {
  height: 4px;
}

/* Controls bar */
.film-controls__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.film-ctrl-spacer {
  flex: 1;
}

.film-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  padding: var(--s1);
  min-width: 32px;
  min-height: 32px;
  transition: color 0.2s, transform 0.15s;
}

.film-ctrl-btn:hover {
  color: var(--gold);
  transform: scale(1.12);
}

.film-ctrl-time {
  font-family: var(--font);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
}

.film-ctrl-time__sep {
  opacity: 0.4;
  margin: 0 1px;
}

/* Volume slider */
.film-ctrl-vol-slider {
  width: 64px;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.film-ctrl-vol-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  border-radius: 0;
}

.film-ctrl-vol-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.65);
  pointer-events: none;
  border-radius: 0;
  transition: background 0.2s;
}

.film-ctrl-vol-slider:hover .film-ctrl-vol-fill {
  background: var(--gold);
}

/* Mobile: hide vol slider, keep mute btn */
@media (max-width: 480px) {
  .film-ctrl-vol-slider {
    display: none;
  }
}

/* ── 19. FLOATING WHATSAPP ──────────────────────────────── */
@keyframes wa-ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  70%,
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes wa-entry {
  from {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }

  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.btn-float-wa {
  position: fixed;
  bottom: clamp(1.25rem, 3vw, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #1a5c40;
  color: #fff;
  border-radius: 0;
  clip-path: polygon(0 0,
      calc(100% - var(--ch-sm)) 0,
      100% var(--ch-sm),
      100% 100%,
      var(--ch-sm) 100%,
      0 calc(100% - var(--ch-sm)));
  text-decoration: none;
  filter: drop-shadow(0 6px 22px rgba(26, 92, 64, 0.48));
  animation:
    wa-entry 0.5s var(--ease-smooth) 1.2s both,
    cta-pulse-wa 2.8s ease-in-out 2s infinite;
  transition: transform 0.25s var(--ease-smooth), filter 0.25s;
}

.btn-float-wa:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 10px 30px rgba(26, 92, 64, 0.65));
  animation: none;
}

.btn-float-wa:active {
  transform: scale(0.95);
}

.btn-float-wa svg {
  flex-shrink: 0;
}

/* Ping indicator — círculo que se expande */
.btn-float-wa__ping {
  position: absolute;
  inset: 0;
  border-radius: 0;
  clip-path: polygon(0 0,
      calc(100% - var(--ch-sm)) 0,
      100% var(--ch-sm),
      100% 100%,
      var(--ch-sm) 100%,
      0 calc(100% - var(--ch-sm)));
  background: #25d366;
  opacity: 0;
  animation: wa-ping 2s ease-out 2.2s infinite;
  pointer-events: none;
}

/* ── 20. PERFORMANCE HINTS ───────────────────────────────── */
.js-section-title,
.js-section-kicker,
.stat-card,
.feature-bento__card,
.emp-gallery__item,
.lazer-panel,
.lazer-amenity-card,
.sig-brand,
.nf-stat,
.map-block__frame {
  will-change: transform, opacity;
}

/* ── 21. PLANTA ZOOM — Lightbox ───────────────────────────── */
.planta-zoom {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-smooth), visibility 0.4s;
}

.planta-zoom:not([hidden]) {
  opacity: 1;
  visibility: visible;
  display: flex;
}

.planta-zoom__overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 10, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.planta-zoom__close {
  position: absolute;
  top: var(--s8);
  right: var(--s8);
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w);
  background: var(--w12);
  border-radius: var(--r-full);
  transition: background 0.3s, transform 0.3s;
}

.planta-zoom__close:hover {
  background: var(--w30);
  transform: rotate(90deg);
}

.planta-zoom__container {
  position: relative;
  z-index: 5;
  width: 90%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s8);
}

.planta-zoom__img-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  animation: zoom-in 0.5s var(--ease-smooth) both;
}

.planta-zoom__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
}

.planta-zoom__caption {
  font-size: var(--t-md);
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: zoom-fade-up 0.6s var(--ease-smooth) 0.2s forwards;
}

@keyframes zoom-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoom-fade-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Planta showcase: suggest click */
.planta-showcase__visual {
  cursor: zoom-in;
  transition: transform 0.4s var(--ease-smooth);
}

.planta-showcase__visual:hover {
  transform: scale(1.02);
}

/* ── 22. GALLERY ZOOM — Interactive Slider ────────────────── */
.gallery-zoom {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease-smooth), visibility 0.4s;
}

.gallery-zoom:not([hidden]) {
  opacity: 1;
  visibility: visible;
  display: flex;
}

.gallery-zoom__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.98);
  backdrop-filter: blur(20px);
}

.gallery-zoom__close {
  position: absolute;
  top: var(--s8);
  right: var(--s8);
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w);
  background: var(--w12);
  border-radius: var(--r-full);
  transition: all 0.3s;
}

.gallery-zoom__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--r-full);
  border: 1px solid var(--w12);
  transition: all 0.3s;
  cursor: pointer;
}

.gallery-zoom__nav:hover {
  background: var(--w12);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.1);
}

.gallery-zoom__nav--prev {
  left: var(--s8);
}

.gallery-zoom__nav--next {
  right: var(--s8);
}

.gallery-zoom__container {
  position: relative;
  z-index: 5;
  width: 95%;
  max-width: 1400px;
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-zoom__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
  animation: zoom-in 0.5s var(--ease-smooth);
}

.gallery-zoom__counter {
  position: absolute;
  bottom: var(--s8);
  left: 50%;
  transform: translateX(-50%);
  color: var(--w30);
  font-size: var(--t-xxs);
  letter-spacing: 0.2em;
}

/* Hover effect on grid items */
.emp-gallery__item {
  cursor: zoom-in;
  transition: transform 0.4s var(--ease-smooth);
}

.emp-gallery__item:hover {
  transform: scale(0.98);
}

.emp-gallery__item img {
  transition: filter 0.4s;
}

.emp-gallery__item:hover img {
  filter: brightness(1.15);
}

/* ── 22. FOOTER NF LOGO ──────────────────────────────────── */
.site-footer__nf-end {
  margin-top: var(--s12);
  padding-top: var(--s8);
  border-top: 1px solid var(--w07);
  display: flex;
  justify-content: center;
  width: 100%;
}

.footer-logo--nf-end {
  height: 18px;
  width: auto;
  opacity: 0.45;
  filter: grayscale(1) brightness(1.5);
  transition: opacity 0.3s, filter 0.3s;
}

.footer-logo--nf-end:hover {
  opacity: 0.9;
  filter: none;
}