/* ==========================================================================
   Unique Garden Malls — Design System
   Paleta extraída da identidade visual oficial (apresentação institucional)
   ========================================================================== */

/* ---- Reset básico ---- */
@font-face {
  font-family: 'Queensila';
  src: url('assets/fonts/Queensila.ttf') format('truetype');
  font-weight: 400 800;
  font-display: block;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[class], ol[class] { list-style: none; }
a { color: inherit; }

/* ---- Design tokens ---- */
:root {
  /* Cores de marca (extraídas do PPT oficial) */
  --color-bg: #1E3524;
  --color-bg-alt: #24402F;
  --color-surface: #2E4A38;
  --color-surface-light: #34523C;
  --color-primary: #7C9A52;
  --color-primary-dark: #5E7A3E;
  --color-accent: #E4CE7E;
  --color-accent-dark: #C9A84C;
  --color-text: #F4EFDD;
  --color-muted: #C9D6C0;
  --color-border: rgba(244, 239, 221, 0.14);
  --color-white: #FFFFFF;
  --color-heading: #FFFFFF;
  --color-cream: #F4EFDD;
  --color-ink: #17281B;

  /* Estado / feedback */
  --color-error: #E8846B;
  --color-success: #8FBF7F;

  /* Tipografia */
  --font-display: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Calibri", Arial, sans-serif;

  --font-xs:   0.75rem;
  --font-sm:   0.875rem;
  --font-base: 1rem;
  --font-md:   1.125rem;
  --font-lg:   1.25rem;
  --font-xl:   1.5rem;
  --font-2xl:  2rem;
  --font-3xl:  2.75rem;
  --font-4xl:  3.5rem;
  --font-5xl:  4.5rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;

  /* Espaçamento — escala de 4px */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --header-h: 77px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-card: 0 12px 32px rgba(10, 20, 12, 0.28);
  --shadow-lift: 0 20px 48px rgba(10, 20, 12, 0.38);
}

/* ---- Base ---- */
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: var(--font-base);
  line-height: var(--leading-normal);
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
h1 { font-size: var(--font-4xl); }
h2 { font-size: var(--font-3xl); }
h3 { font-size: var(--font-xl); }
h4 { font-size: var(--font-lg); }
p { color: var(--color-muted); }
strong { color: var(--color-text); font-weight: var(--font-semibold); }
address { font-style: normal; }

@media (max-width: 768px) {
  h1 { font-size: var(--font-3xl); }
  h2 { font-size: var(--font-2xl); }
}

/* ---- Skip link ---- */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-150%);
  background: var(--color-accent);
  color: var(--color-ink);
  padding: var(--space-2) var(--space-4);
  z-index: 9999;
  text-decoration: none;
  font-weight: var(--font-semibold);
  border-radius: 0 0 var(--radius-sm) 0;
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---- Foco visível ---- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Visually hidden ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--space-8); }
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}
.col-full    { grid-column: 1 / -1; }
.col-half    { grid-column: span 6; }
.col-third   { grid-column: span 4; }
.col-quarter { grid-column: span 3; }
@media (max-width: 768px) {
  .col-half, .col-third, .col-quarter { grid-column: 1 / -1; }
}

.section     { padding: var(--space-20) 0; }
.section-alt { padding: var(--space-20) 0; background: var(--color-bg-alt); }
.section-deep { padding: var(--space-20) 0; background: var(--color-ink); }
.section__header {
  max-width: 680px;
  margin: 0 auto var(--space-16);
  text-align: center;
}
.section__eyebrow {
  display: inline-block;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.section__title { margin-bottom: var(--space-4); }
.section__lead { font-size: var(--font-md); color: var(--color-muted); }
/* Cabeçalho um pouco mais largo, para leads que ficam melhor em uma linha só.
   Continua responsivo: em telas menores o container limita e o texto quebra. */
.section__header--wide { max-width: 780px; }
@media (max-width: 768px) {
  .section, .section-alt, .section-deep { padding: var(--space-12) 0; }
  .section__header { margin-bottom: var(--space-10); }
}

/* ---- Botões ---- */
.btn-primary,
.btn-secondary,
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  line-height: 1.2;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-ink);
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--color-cream);
  border-color: rgba(244, 239, 221, 0.5);
}
.btn-secondary:hover {
  background: var(--color-cream);
  color: var(--color-ink);
  border-color: var(--color-cream);
}

.btn-whatsapp {
  background: #3E8F5A;
  color: var(--color-white);
}
.btn-whatsapp:hover { opacity: 0.92; transform: translateY(-2px); }

.btn-block { width: 100%; }

/* ---- Header / navegação ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.45);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(30, 53, 36, 0.92);
  backdrop-filter: blur(10px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.site-header__inner > .header-actions {
  margin-left: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.brand__mark {
  height: 52px;
  width: auto;
}
/* No header a marca tem duas linhas; com o logo em 42px o header fica
   mais baixo que antes da frase existir. O rodapé mantém os 52px. */
.site-header .brand__mark { height: 42px; }
.brand__name {
  font-family: var(--font-display);
  font-size: var(--font-md);
  letter-spacing: var(--tracking-wide);
  color: var(--color-heading);
  line-height: 1.1;
}
.brand__name small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  text-transform: uppercase;
  font-weight: var(--font-semibold);
}
/* Marca em duas linhas: logo + nome em cima; embaixo, a frase
   "Open Malls • Lifestyle • Ecossistemas Integrados" vai do início do logo
   até o fim de "Garden". Grid (e não flex com quebra) porque assim a largura
   da marca é a da primeira linha, e a frase se ajusta a ela. */
.brand.brand { display: grid; grid-template-columns: auto auto; justify-content: start; row-gap: 6px; }
.brand__tagline {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  column-gap: 0.4em;   /* nunca deixa as palavras grudarem */
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent);
}
.site-header .brand.brand { row-gap: 4px; }
.site-header .brand__tagline { font-size: 0.5rem; }
/* Header compacto (telas estreitas): logo e nome encolhem, a frase acompanha */
.site-header--mini .brand__tagline { font-size: 0.42rem; letter-spacing: 0.03em; }
.site-header--mini2 .brand__tagline { font-size: 0.36rem; letter-spacing: 0.02em; }

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.main-nav__list a {
  text-decoration: none;
  font-weight: var(--font-semibold);
  font-size: var(--font-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color 0.2s ease;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.main-nav__list a:hover,
.main-nav__list a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.header-actions .btn-primary { padding: var(--space-2) var(--space-6); font-size: 0.95rem; }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: var(--space-2);
  color: var(--color-cream);
}
.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle__icon::before { content: ''; position: absolute; top: -8px; }
.nav-toggle__icon::after { content: ''; position: absolute; top: 8px; }

/* ---- Header auto-medido: colapsa apenas quando o conteudo nao cabe (sem encolher nada) ---- */
.site-header .container { max-width: 1480px; }
.site-header__inner > * { flex-shrink: 0; }
.site-header--collapsed .nav-toggle { display: block; }
.site-header--collapsed .main-nav {
  position: fixed;
  inset: 0 0 0 auto;
  top: var(--header-h);
  width: min(420px, 88vw);
  background: var(--color-bg-alt);
  border-left: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-6);
  transform: translateX(100%);
  overflow-y: auto;
  z-index: 490;
}
.site-header--collapsed .main-nav[data-open="true"] { transform: translateX(0); }
.site-header--anim .main-nav { transition: transform 0.3s ease; }
.site-header--collapsed .main-nav__list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.site-header--collapsed .brand + span[aria-hidden] { display: none; }
.site-header--collapsed .main-nav .header-actions--mobile {
  display: flex;
  margin-top: var(--space-8);
}
.site-header:not(.site-header--collapsed) .header-actions--mobile { display: none; }
.site-header--collapsed:not(.site-header--tight) .main-nav .header-actions--mobile { display: none; }
/* Passos de emergencia so quando fisicamente nao cabe */
.site-header--tight .header-actions .btn-primary { display: none; }
.site-header--mini .brand { column-gap: var(--space-2); }
.site-header--mini .brand__mark { height: 42px; }
.site-header--mini .brand__name { font-size: 0.9rem; }
.site-header--mini .brand__name > span:first-child { letter-spacing: 0.07em !important; }
.site-header--mini .brand__name small { font-size: 0.52rem; }
.site-header--mini .header-actions { gap: var(--space-2); }
.site-header--mini2 .brand__mark { height: 36px; }
.site-header--mini2 .brand__name { font-size: 0.78rem; }
.site-header--mini2 .brand__name small { font-size: 0.45rem; }
.site-header--mini2 .header-actions a[href*="wa.me"] { display: none; }



/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding: var(--space-8) 0 var(--space-20);
  background:
    linear-gradient(180deg, rgba(23, 40, 27, 0.55) 0%, rgba(23, 40, 27, 0.88) 100%),
    var(--color-bg);
  overflow: hidden;
}

/* ---- Vídeo de fundo do hero ---- */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover recorta o excesso em vez de esticar: o vídeo é 16:9 e o hero muda
     de proporção conforme a tela. */
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* O vídeo é filho posicionado e tapa o gradiente que o .hero pinta no próprio
   background, então o véu precisa reproduzi-lo. Vai um pouco mais denso que o
   original porque imagem em movimento atrapalha a leitura mais que cor chapada. */
/* O 0.80 do topo não é chute: o vídeo tem pixels em branco puro (255) e preto
   puro (0). Medindo 30 quadros, 0.72 dava 5,37:1 no texto de apoio. Com 0.80 o
   pior caso possível vai a 7,05:1 (AAA). O rodapé do degradê é mais opaco, logo
   o topo é sempre o pior caso. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(23, 40, 27, 0.80) 0%,
    rgba(23, 40, 27, 0.93) 100%);
}
/* No tema claro o texto do hero é verde escuro sobre creme: um véu escuro o
   tornaria ilegível, então o véu inverte junto com a paleta. Aqui o 0.55 do
   rascunho REPROVAVA (3,53:1) sobre os pixels pretos do vídeo; 0.80 leva a
   7,26:1. */
[data-theme="light"] .hero__overlay {
  background: linear-gradient(180deg,
    rgba(246, 240, 220, 0.80) 0%,
    rgba(237, 228, 200, 0.92) 100%);
}
/* Enquanto o vídeo não começa a tocar (ou se o iOS bloquear o autoplay), ele e
   o véu ficam invisíveis: aparece só o fundo do .hero, sem quadro congelado. */
.hero__video,
.hero__overlay { transition: opacity 0.8s ease; }
.hero--video-wait .hero__video,
.hero--video-wait .hero__overlay { opacity: 0; }
/* O vídeo é enfeite: nada de botão de play nem controles nativos do Safari */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-overlay-play-button,
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}
/* Quem pediu menos movimento no sistema não vê o vídeo; sobra o fundo do .hero,
   idêntico ao site sem vídeo. O véu sai junto, senão escureceria esse fundo. */
@media (prefers-reduced-motion: reduce) {
  .hero__video,
  .hero__overlay { display: none; }
}

.hero__decor {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 154, 82, 0.35), transparent 70%);
  filter: blur(10px);
  z-index: 0;
}
.hero__decor--one { width: 480px; height: 480px; top: -120px; right: -140px; }
.hero__decor--two { width: 360px; height: 360px; bottom: -140px; left: -100px; background: radial-gradient(circle, rgba(228, 206, 126, 0.18), transparent 70%); }

/* Coluna única e centralizada: a segunda coluna existia para a imagem do hero,
   que saiu quando o vídeo passou a ser o fundo. Mesmo desenho que as outras
   páginas já usam no .hero--compact. */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  text-align: center;
}
/* Limita a linha de texto: sem isso o parágrafo esticaria por toda a largura
   do container (1280px), o que cansa a leitura. */
.hero__content { max-width: 820px; }
.hero__eyebrow {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.hero__title {
  font-size: var(--font-5xl);
  margin-bottom: var(--space-6);
}
.hero__subtitle {
  font-size: var(--font-lg);
  color: var(--color-muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-10);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.hero--compact {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding: var(--space-20) 0 var(--space-12);
}
.hero--compact .hero__inner { grid-template-columns: 1fr; text-align: center; }
.hero--compact .hero__subtitle { margin-left: auto; margin-right: auto; }
.hero--compact .hero__cta { justify-content: center; }

@media (max-width: 900px) {
  /* Hero ocupando tudo o que sobra abaixo do cabeçalho: ao abrir o site no
     celular a pessoa vê só esta primeira seção, sem a próxima espiando embaixo.
     O svh é a altura da tela COM as barras do navegador à mostra, que é
     justamente o estado de quem acabou de entrar. */
  .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    padding: var(--space-12) 0;
  }
}
@media (min-width: 901px) {
  .hero__inner { max-height: calc(100vh - var(--header-h) - var(--space-8) - var(--space-20)); }
  /* No computador o texto volta a ficar à esquerda, como era quando havia a
     imagem ao lado. No celular ele segue centralizado. */
  .hero__inner { justify-items: start; text-align: left; }
  .hero__subtitle { margin-left: 0; margin-right: 0; }
  .hero__cta { justify-content: flex-start; }
}
@media (max-width: 560px) {
  /* Botões ocupando a largura toda: em telas estreitas eles quebrariam em duas
     linhas de tamanhos diferentes, e assim a área de toque fica bem maior. */
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__cta .btn-primary,
  .hero__cta .btn-secondary { width: 100%; }
  .hero__subtitle { margin-bottom: var(--space-8); }
}

/* ---- Entrada em cascata do hero ---- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow  { animation: heroFadeUp 0.6s ease forwards; }
.hero__title    { animation: heroFadeUp 0.7s ease 0.1s backwards; }
.hero__subtitle { animation: heroFadeUp 0.7s ease 0.2s backwards; }
.hero__cta      { animation: heroFadeUp 0.7s ease 0.32s backwards; }

/* ---- Animações ao rolar ---- */
.anim-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-fade-up.visible { opacity: 1; transform: translateY(0); }
.anim-fade-up:nth-child(2) { transition-delay: 0.08s; }
.anim-fade-up:nth-child(3) { transition-delay: 0.16s; }
.anim-fade-up:nth-child(4) { transition-delay: 0.24s; }
.anim-fade-up:nth-child(5) { transition-delay: 0.32s; }
.anim-fade-up:nth-child(6) { transition-delay: 0.4s; }

.anim-zoom-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.anim-zoom-in.visible { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .anim-fade-up, .anim-zoom-in { opacity: 1; transform: none; }
  .hero__eyebrow, .hero__title, .hero__subtitle, .hero__cta { opacity: 1; }
}

/* ---- Estatísticas ---- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.stat-card__number {
  font-family: "Playfair Display", "Cambria", Georgia, serif;
  font-size: var(--font-4xl);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat-card__label {
  font-size: var(--font-sm);
  color: var(--color-muted);
  letter-spacing: var(--tracking-normal);
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Cards ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  height: 100%;
}
.card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
  border-color: rgba(228, 206, 126, 0.4);
}
.card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: rgba(228, 206, 126, 0.14);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", "Cambria", Georgia, serif;
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-5);
}
.card h3 { margin-bottom: var(--space-3); }
.card p { font-size: var(--font-sm); }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
#modelos .cards-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
@media (max-width: 900px) {
  .cards-grid, .cards-grid--2 { grid-template-columns: 1fr; }
  section[aria-labelledby="diferenciais-titulo"] .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  section[aria-labelledby="diferenciais-titulo"] .card { min-width: 0; padding: var(--space-5) var(--space-4); }
  #modelos .cards-grid { gap: var(--space-4); }
  #modelos .cards-grid > .card { min-width: 0; padding: var(--space-5) var(--space-4); }
}
@media (max-width: 540px) {
  #modelos .cards-grid { grid-template-columns: 1fr; }
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.badge--operacional { background: rgba(20, 26, 16, 0.82); color: var(--color-accent); border: 1px solid rgba(228, 206, 126, 0.5); backdrop-filter: blur(2px); }
.badge--pipeline { background: rgba(20, 26, 16, 0.82); color: var(--color-accent); border: 1px solid rgba(228, 206, 126, 0.5); backdrop-filter: blur(2px); }

/* ---- Empreendimento (card de portfólio) ---- */
.property-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.property-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.property-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.property-card__media img { width: 100%; height: 100%; object-fit: cover; }
.property-card__badge { position: absolute; top: var(--space-4); left: var(--space-4); }
.property-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.property-card__date { font-size: var(--font-sm); color: var(--color-accent); font-weight: var(--font-semibold); }
.property-card__partners {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
}
.property-card__partners li {
  font-size: var(--font-xs);
  color: var(--color-muted);
  background: rgba(244, 239, 221, 0.08);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1100px) {
  .property-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .property-grid { grid-template-columns: 1fr; }
}

/* ---- Timeline (pipeline de expansão) ---- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent), rgba(228,206,126,0.1));
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.timeline-item__marker {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", "Cambria", Georgia, serif;
  font-weight: var(--font-bold);
  font-size: var(--font-lg);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.timeline-item__content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
}
.timeline-item__date {
  font-size: var(--font-sm);
  color: var(--color-accent);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
  display: block;
}
.timeline-item__partners {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.timeline-item__partners li {
  font-size: var(--font-xs);
  color: var(--color-muted);
  background: rgba(244, 239, 221, 0.08);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
@media (max-width: 600px) {
  .timeline::before { left: 19px; }
  .timeline-item { grid-template-columns: 40px 1fr; gap: var(--space-4); }
  .timeline-item__marker { width: 40px; height: 40px; font-size: var(--font-sm); }
  .timeline-item__content { padding: var(--space-5); }
}

/* ---- Etapas do modelo de negócio ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
  counter-reset: step;
}
.step-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.step-card__number {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  margin: 0 auto var(--space-4);
}
.step-card h3 { font-size: var(--font-base); margin-bottom: var(--space-2); }
.step-card p { font-size: var(--font-xs); }
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-card { overflow-wrap: break-word; }
}
@media (max-width: 380px) {
  .steps { grid-template-columns: 1fr; }
}

/* ---- Logo strip (marcas parceiras) ---- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}
.logo-strip__break {
  flex-basis: 100%;
  height: 0;
  padding: 0 !important;
  margin: 0;
  border: none !important;
  background: none !important;
}
@media (max-width: 700px) {
  .logo-strip__break { display: none; }
}
.logo-strip li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  color: var(--color-cream);
  font-size: var(--font-sm);
}

/* ---- Tabela EVTL / lista com check ---- */
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  color: var(--color-muted);
  font-size: var(--font-sm);
  line-height: 1.6;
}
.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* ---- FAQ / accordion ---- */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: transparent;
  border: none;
  padding: var(--space-6) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--font-lg);
  font-weight: var(--font-bold);
  color: var(--color-heading);
  cursor: pointer;
  transition: color 0.2s ease;
}
/* Sinaliza que a pergunta é interativa (só em aparelhos com mouse) */
@media (hover: hover) and (pointer: fine) {
  .faq-item__question:hover { color: var(--color-accent); }
  .faq-item__question:hover .faq-item__icon {
    background: var(--color-accent);
    color: var(--color-ink);
  }
}
.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
  font-size: var(--font-md);
}
.faq-item__question[aria-expanded="true"] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.faq-item__answer[data-open="true"] { max-height: 600px; }
.faq-item__answer p {
  padding-bottom: var(--space-6);
  font-size: var(--font-base);
}

/* ---- Formulário ---- */
.form-card {
  background: var(--color-cream);
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}
.form-card h2, .form-card h3 { color: var(--color-ink); }
.form-card p { color: #45543F; }
.form-group fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.form-group legend { padding: 0; }

.form-group { margin-bottom: var(--space-6); }
.form-group label {
  display: block;
  font-weight: var(--font-semibold);
  font-size: var(--font-sm);
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}
.form-group .required { color: var(--color-primary-dark); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid #C9C2A8;
  border-radius: var(--radius-sm);
  background: #EDE6D0;
  font-size: var(--font-base);
  color: var(--color-ink);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary-dark);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-instruction { font-size: var(--font-xs); color: #5C6754; margin-top: var(--space-1); }

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.radio-option {
  flex: 1;
  min-width: 140px;
}
.radio-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.radio-option label {
  display: block;
  text-align: center;
  padding: var(--space-4);
  border: 2px solid #C9C2A8;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: var(--font-semibold);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.radio-option input:checked + label {
  border-color: var(--color-primary-dark);
  background: rgba(124, 154, 82, 0.14);
}
.radio-option input:focus-visible + label {
  outline: 3px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.field-error {
  display: block;
  color: #B8442E;
  font-size: var(--font-xs);
  margin-top: var(--space-2);
}
.form-security {
  font-size: var(--font-xs);
  color: #5C6754;
  text-align: center;
  margin-top: var(--space-4);
}
[role="status"], [role="alert"] {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
}
.form-status--success { color: #2F6B3F; }
.form-status--error { color: #B8442E; }

/* ---- CTA final ---- */
.cta-band {
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-ink));
  border-radius: var(--radius-lg);
  padding: var(--space-16);
  text-align: center;
  border: 1px solid var(--color-border);
}
.cta-band__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (max-width: 768px) {
  .cta-band { padding: var(--space-10) var(--space-6); }
}

/* ---- Contato direto ---- */
.contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.contact-info__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}
.contact-info__item a { color: var(--color-accent); text-decoration: none; font-weight: var(--font-semibold); }
.contact-info__item a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .contact-info { grid-template-columns: 1fr; }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-ink);
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid var(--color-border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  row-gap: var(--space-10);
  column-gap: var(--space-16);
  padding-bottom: var(--space-12);
}
.footer-grid > nav[aria-label="Links do rodapé"] { margin-left: var(--space-8); }
.footer-brand p { font-size: var(--font-sm); margin-top: var(--space-4); max-width: 320px; }
/* Marca do rodapé sempre empilhada: a coluna 1.4fr nunca comporta o lockup horizontal */
/* Rodapé usa a mesma montagem da marca do header */
.site-footer .brand { column-gap: var(--space-3); }
.footer-heading {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  font-weight: var(--font-bold);
}
.footer-links li { margin-bottom: var(--space-3); }
.footer-links a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: var(--font-sm);
}
.footer-links a:hover { color: var(--color-accent); }
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  text-decoration: none;
}
.footer-social a:hover { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-xs);
  color: var(--color-muted);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-grid > nav[aria-label="Links do rodapé"] { margin-left: 0; }
  .site-footer .brand__name { font-size: 1.1rem; }
  .footer-bottom { flex-direction: column; gap: var(--space-2); }
}

/* ---- Botão flutuante do WhatsApp ---- */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #3E8F5A;
  color: var(--color-white);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-lift);
  transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: translateY(-3px); }
.whatsapp-float__icon { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 600px) {
  .whatsapp-float span:not(.visually-hidden) { display: none; }
  .whatsapp-float { padding: var(--space-4); }
}

/* ---- Disclaimer ---- */
.disclaimer {
  font-size: var(--font-xs);
  color: var(--color-muted);
  padding-top: var(--space-6);
  margin-top: var(--space-10);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---- Utilitários ---- */
.text-center { text-align: center; }
.mt-8 { margin-top: var(--space-8); }
.mt-16 { margin-top: var(--space-16); }
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: var(--space-10); }
}
.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Carrossel de lançamentos (home) ---- */
.carousel {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
}
.carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.carousel__track {
  display: flex;
  touch-action: pan-y;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: var(--color-surface);
}
.carousel__media {
  position: relative;
  min-height: 360px;
}
.carousel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
}
.carousel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-8);
}
.carousel__date {
  font-size: var(--font-sm);
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}
.carousel__partners {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.carousel__partners li {
  font-size: var(--font-xs);
  color: var(--color-muted);
  background: rgba(244, 239, 221, 0.08);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.carousel__cta { margin-top: var(--space-3); }

/* ---- Dados do empreendimento nos cards: data, localização e lojas ---- */
.carousel__tagline {
  font-family: var(--font-display);
  font-size: var(--font-md);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.venture-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}
.venture-meta__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-sm);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}
.venture-meta__item--date {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}
.venture-meta__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Localização: link discreto para o Google Maps */
.venture-loc {
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.2s ease;
}
.venture-loc > span {
  text-decoration: underline;
  text-decoration-color: rgba(228, 206, 126, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.venture-loc:hover { color: var(--color-accent); }
.venture-loc:hover > span { text-decoration-color: currentColor; }
.venture-loc .venture-meta__icon { color: var(--color-accent); }
.venture-meta__label {
  margin-top: var(--space-1);
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}
.carousel__partners li.is-pending,
.timeline-item__partners li.is-pending {
  background: transparent;
  border: 1px dashed rgba(244, 239, 221, 0.3);
  font-style: italic;
}
.timeline-item__tagline {
  margin-top: var(--space-2);
  color: var(--color-text);
}
.timeline-item__location {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--font-sm);
  color: var(--color-muted);
}

/* ---- Ícone de redirecionamento no canto dos cards ---- */
.venture-open {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(23, 40, 27, 0.72);
  border: 1px solid rgba(244, 239, 221, 0.3);
  color: #F4EFDD;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.venture-open svg { width: 20px; height: 20px; }
.venture-open:hover,
[data-venture-href]:hover .venture-open {
  background: #E4CE7E;
  color: #17281B;
  transform: translate(2px, -2px);
}
/* No carrossel o ícone fica no canto do card inteiro, não só da imagem */
.carousel__slide[data-venture-href] { position: relative; }
.carousel__slide[data-venture-href] .carousel__body h3 { padding-right: var(--space-12); }
/* O card inteiro leva à página; o cursor avisa isso */
[data-venture-href] { cursor: pointer; }
[data-venture-href] .carousel__cta { position: relative; z-index: 2; }
/* Na linha do tempo o ícone fica no canto do quadro de conteúdo */
.timeline-item__content { position: relative; }
.timeline-item__content .venture-open {
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
}
.timeline-item__content h3 { padding-right: var(--space-12); }
@media (max-width: 600px) {
  .timeline-item__content .venture-open { top: var(--space-3); right: var(--space-3); width: 36px; height: 36px; }
}

/* ---- Página individual do empreendimento ---- */
/* O título aqui é curto: sem isto o bloco encolheria e ficaria encostado à
   esquerda (o hero do computador alinha à esquerda), com o texto centralizado
   dentro dele. */
.venture-hero.hero--compact { min-height: 52vh; min-height: 52svh; }
.venture-hero .hero__inner { justify-items: center; text-align: center; }
.venture-hero .hero__subtitle { margin-left: auto; margin-right: auto; }
.venture-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--font-sm);
  color: var(--color-muted);
}
.venture-breadcrumb a { color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
.venture-breadcrumb a:hover { color: var(--color-accent); }
.venture-breadcrumb [aria-current] { color: var(--color-text); }
.venture-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
.venture-detail__media { position: relative; }
.venture-detail__media img { aspect-ratio: 16 / 10; }
.venture-detail__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
}
.venture-detail__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.venture-detail__info .section__eyebrow { margin-bottom: 0; }
.venture-detail__title { font-size: var(--font-2xl); line-height: var(--leading-snug); }
.venture-detail__text { font-size: var(--font-md); line-height: var(--leading-relaxed); }
.venture-meta--detail .venture-meta__item { font-size: var(--font-base); }
.venture-meta--detail .venture-meta__icon { width: 18px; height: 18px; margin-top: 2px; }
.venture-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.venture-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.venture-gallery--1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.venture-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.venture-gallery img { aspect-ratio: 4 / 3; }
.venture-map {
  height: 420px;
  background: var(--color-surface);
}
.venture-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 900px) {
  .venture-detail { grid-template-columns: 1fr; gap: var(--space-8); }
  .venture-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (max-width: 600px) {
  .venture-gallery, .venture-gallery--2 { grid-template-columns: 1fr; }
  .venture-map { height: 320px; }
  .venture-detail__actions { width: 100%; flex-direction: column; }
  .venture-detail__actions a { width: 100%; }
}

/* ---- Janela suspensa do mapa (aparece ao passar o mouse na localização) ---- */
/* Fica no <body>, fora dos cards: o carrossel tem overflow: hidden e
   cortaria uma janela posicionada dentro dele. */
.maps-pop {
  position: fixed;
  z-index: 800;
  width: 300px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-lift);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.maps-pop.is-open { opacity: 1; transform: translateY(0); }
.maps-pop__map {
  display: block;
  width: 100%;
  height: 150px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.maps-pop__address {
  margin-top: var(--space-3);
  font-size: var(--font-sm);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.maps-pop__hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}
.maps-pop__hint svg { width: 14px; height: 14px; }
/* Setinha apontando para a localização */
.maps-pop::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 12px;
  height: 12px;
  background: inherit;
  border: inherit;
  border-top: 0;
  border-left: 0;
  transform: translateX(-50%) rotate(45deg);
  bottom: -7px;
}
.maps-pop--below::after {
  bottom: auto;
  top: -7px;
  transform: translateX(-50%) rotate(225deg);
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.carousel__arrow {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-cream);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.carousel__arrow:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
  transform: translateY(-2px);
}
.carousel__arrow:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
.carousel__arrow svg { width: 20px; height: 20px; }

.carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.carousel__dot {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
}
.carousel__dot::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  background: transparent;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel__dot:hover::before { transform: scale(1.25); }
.carousel__dot[aria-current="true"]::before {
  background: var(--color-accent);
  transform: scale(1.25);
}
.carousel__dot:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .carousel__slide { grid-template-columns: 1fr; }
  .carousel__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .carousel__body { padding: var(--space-6); }
  .carousel__arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}


/* ==========================================================================
   Refinamentos de responsividade (auditoria completa)
   ========================================================================== */

/* ---- Escala fluida do título do hero (a classe vencia a regra mobile do h1) ---- */
@media (max-width: 1100px) {
  .hero__title { font-size: var(--font-4xl); }
}
@media (max-width: 768px) {
  .hero__title { font-size: var(--font-3xl); }
  .hero__subtitle { font-size: var(--font-base); }
}
@media (max-width: 420px) {
  .hero__title { font-size: 2.1rem; }
}



/* ---- Grids com transição gradual (3-4 colunas -> 2 -> 1) ---- */
@media (max-width: 1100px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .cards-grid, .cards-grid--2 { grid-template-columns: 1fr; }
}

/* ---- Estatísticas em telas pequenas ---- */
@media (max-width: 480px) {
  .stats { gap: var(--space-3); }
  .stat-card { padding: var(--space-5) var(--space-3); }
  .stat-card__number { font-size: var(--font-3xl); }
}

/* ---- CTAs do hero empilhados e de largura total no celular ---- */
@media (max-width: 480px) {
  .hero__cta > a { width: 100%; }
  .cta-band__actions > a { width: 100%; }
}

/* ---- Justificado vira alinhado a esquerda no celular (evita rios de espacos) ---- */
@media (max-width: 767px) {
  [style*="text-align: justify"] { text-align: left !important; }
}

/* ---- Formulario e carrossel compactos ---- */
@media (max-width: 480px) {
  .form-card { padding: var(--space-6); }
  .carousel__body { padding: var(--space-5); }
  .carousel__controls { gap: var(--space-3); }
}

/* ---- Secoes: respiro menor em telas pequenas ---- */
@media (max-width: 480px) {
  .section, .section-alt, .section-deep { padding: var(--space-10) 0; }
  .hero { padding: var(--space-10) 0 var(--space-10); }
  .cta-band { padding: var(--space-8) var(--space-4); }
}

/* ---- Fileira com rolagem horizontal (carrossel compacto) ---- */
.scroll-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.scroll-row__viewport {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-row__viewport::-webkit-scrollbar { display: none; }
.scroll-row__track {
  display: flex;
  gap: var(--space-6);
}
.scroll-row__item {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
}
.scroll-row > .carousel__arrow { flex-shrink: 0; }
.scroll-row .carousel__arrow[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
.scroll-row--static > .carousel__arrow { display: none; }
@media (max-width: 700px) {
  .scroll-row { gap: var(--space-2); }
  .scroll-row__item { width: 78vw; }
}

/* ---- Scrollbar personalizada ---- */
/* Esconder a barra do sistema só vale onde a nossa entra no lugar dela (aparelhos
   com mouse). Em telas de toque a nossa não é criada, então a do celular precisa
   continuar aparecendo: sem esta media query, um Android que obedecesse a regra
   deixaria o visitante sem nenhuma barra de rolagem. */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar { display: none; }
}
/* O trilho é uma faixa de 14px na borda direita que recebe o mouse: dá para
   arrastar a barra e clicar no trilho, como na barra do sistema. A barra
   visível continua fina e só engrossa quando o cursor chega nela. */
.custom-scrollbar-track {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  width: 14px;
  z-index: 600;
}
.custom-scrollbar-thumb {
  position: absolute;
  top: 0;
  right: 3px;
  width: 6px;
  border-radius: var(--radius-full);
  background: rgba(228, 206, 126, 0.45);
  opacity: 0;
  cursor: grab;
  transition: opacity 0.4s ease, transform 0.12s linear, width 0.15s ease, background 0.15s ease;
}
.custom-scrollbar-track.is-visible .custom-scrollbar-thumb,
.custom-scrollbar-track:hover .custom-scrollbar-thumb { opacity: 1; }
.custom-scrollbar-track:hover .custom-scrollbar-thumb,
.custom-scrollbar-track.is-dragging .custom-scrollbar-thumb { width: 9px; background: rgba(228, 206, 126, 0.7); }
/* Arrastando: a barra acompanha o cursor sem atraso e nada é selecionado */
.custom-scrollbar-track.is-dragging .custom-scrollbar-thumb { opacity: 1; cursor: grabbing; transition: width 0.15s ease, background 0.15s ease; }
.is-scrollbar-dragging, .is-scrollbar-dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }


/* ==========================================================================
   Luzes ambientes do fundo — movimento continuo, suave e discreto
   ========================================================================== */
.ambient-lights {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ambient-lights__orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.ambient-lights__orb--1 {
  width: 620px; height: 620px;
  left: -200px; top: -160px;
  background: radial-gradient(circle, rgba(228, 206, 126, 0.085) 0%, rgba(228, 206, 126, 0) 68%);
  animation: ambient-drift-1 46s ease-in-out infinite alternate;
}
.ambient-lights__orb--2 {
  width: 720px; height: 720px;
  right: -260px; top: 28%;
  background: radial-gradient(circle, rgba(124, 154, 82, 0.10) 0%, rgba(124, 154, 82, 0) 70%);
  animation: ambient-drift-2 58s ease-in-out infinite alternate;
}
.ambient-lights__orb--3 {
  width: 500px; height: 500px;
  left: 16%; bottom: -220px;
  background: radial-gradient(circle, rgba(244, 239, 221, 0.055) 0%, rgba(244, 239, 221, 0) 66%);
  animation: ambient-drift-3 52s ease-in-out infinite alternate;
}
@keyframes ambient-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(24vw, 14vh, 0) scale(1.14); }
  100% { transform: translate3d(8vw, 34vh, 0) scale(0.94); }
}
@keyframes ambient-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-20vw, -16vh, 0) scale(1.10); }
  100% { transform: translate3d(-6vw, 18vh, 0) scale(0.92); }
}
@keyframes ambient-drift-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(16vw, -20vh, 0) scale(1.12); }
  100% { transform: translate3d(32vw, -8vh, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-lights__orb { animation: none; }
}
/* ---- Carrossel só de fotos (monousuárias) ---- */
.carousel--photos .carousel__slide { grid-template-columns: 1fr; }
.carousel--photos .carousel__media {
  min-height: 0;
  aspect-ratio: 16 / 9;
  max-height: 560px;
}
@media (max-width: 700px) {
  .carousel--photos .carousel__media { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Vídeo institucional — capa clicável + janela com player próprio
   ========================================================================== */
.video-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 640px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.video-card__image,
.video-card__image img {
  width: 100%;
  height: 100%;
}
.video-card__image img {
  object-fit: cover;
  transition: transform 0.8s ease;
}
/* Véu fixo (não segue o tema): o texto da legenda fica sempre sobre a imagem. */
.video-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 40, 27, 0.05) 40%, rgba(23, 40, 27, 0.78) 100%);
  pointer-events: none;
}
.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: 0 12px 32px rgba(10, 20, 12, 0.4);
  transition: transform 0.3s ease, background 0.3s ease;
}
/* Anel pulsando em volta do botão, como convite ao clique */
.video-card__play::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  opacity: 0;
  animation: video-pulse 2.4s ease-out infinite;
}
.video-card__play svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}
@keyframes video-pulse {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}
.video-card__caption {
  position: absolute;
  left: var(--space-8);
  right: var(--space-8);
  bottom: var(--space-6);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: #F4EFDD;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-align: left;
}
.video-card__label {
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.video-card__duration {
  font-size: var(--font-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(23, 40, 27, 0.6);
  border: 1px solid rgba(244, 239, 221, 0.25);
}
.video-card:hover { box-shadow: var(--shadow-lift); border-color: rgba(228, 206, 126, 0.45); }
.video-card:hover .video-card__image img { transform: scale(1.04); }
.video-card:hover .video-card__play { transform: scale(1.08); }
.video-card:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }
@media (max-width: 768px) {
  .video-card { border-radius: var(--radius-md); }
  .video-card__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .video-card__play svg { width: 26px; height: 26px; }
  .video-card__caption { left: var(--space-4); right: var(--space-4); bottom: var(--space-3); }
  .video-card__label { font-size: var(--font-xs); }
}

/* ---- Texto abaixo do vídeo: título à esquerda, descrição à direita ---- */
.video-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-16);
}
.video-intro__eyebrow {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.video-intro__title {
  font-size: var(--font-3xl);
}
/* Fio dourado separando as duas colunas, como divisória editorial */
.video-intro__text {
  font-size: var(--font-md);
  line-height: var(--leading-relaxed);
  padding-left: var(--space-12);
  border-left: 2px solid var(--color-accent);
}
@media (max-width: 900px) {
  .video-intro {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-10);
  }
  .video-intro__title { font-size: var(--font-2xl); }
  .video-intro__text { padding-left: var(--space-5); }
}

/* ---- Janela do vídeo ---- */
/* <dialog> aberto com showModal(): fica na camada superior, acima do header, e
   já prende o foco do teclado dentro dele. */
.video-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-16) var(--space-8);
  border: 0;
  background: transparent;
  color: #F4EFDD;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.video-modal[open] { display: flex; align-items: center; justify-content: center; }
.video-modal.is-visible { opacity: 1; }
/* Fundo borrado: o site continua visível atrás, só desfocado. */
.video-modal::backdrop {
  background: rgba(14, 26, 17, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  backdrop-filter: blur(12px) saturate(110%);
}
[data-theme="light"] .video-modal::backdrop { background: rgba(30, 53, 36, 0.38); }

.video-modal__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 221, 0.3);
  background: rgba(23, 40, 27, 0.75);
  color: #F4EFDD;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.video-modal__close svg { width: 22px; height: 22px; }
.video-modal__close:hover { background: #E4CE7E; color: #17281B; transform: rotate(90deg); }

/* ---- Player ---- */
/* Cores fixas, sem tokens: o player é sempre escuro, nos dois temas,
   como qualquer player de vídeo. */
.vplayer {
  position: relative;
  width: min(100%, 1200px, calc((100vh - 8rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0B140D;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  transition: transform 0.3s ease;
  font-family: var(--font-body);
}
.video-modal.is-visible .vplayer { transform: scale(1); }
.vplayer__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #0B140D;
  cursor: pointer;
}
/* Em tela cheia o player ocupa a tela toda, sem cantos arredondados */
.vplayer:fullscreen { width: 100%; height: 100%; border-radius: 0; transform: none; }
.vplayer:-webkit-full-screen { width: 100%; height: 100%; border-radius: 0; transform: none; }

.vplayer__big-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #E4CE7E;
  color: #17281B;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.vplayer__big-play svg { width: 32px; height: 32px; fill: currentColor; }
.vplayer__big-play:hover { transform: scale(1.08); }
.vplayer.is-playing .vplayer__big-play { opacity: 0; pointer-events: none; }

.vplayer__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 4px solid rgba(244, 239, 221, 0.2);
  border-top-color: #E4CE7E;
  animation: vplayer-spin 0.9s linear infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.vplayer.is-loading .vplayer__spinner { opacity: 1; }
.vplayer.is-loading .vplayer__big-play { opacity: 0; }
@keyframes vplayer-spin { to { transform: rotate(360deg); } }

/* Barra de controles: some depois de alguns segundos parado, volta ao mexer o mouse */
.vplayer__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-10) var(--space-4) var(--space-3);
  background: linear-gradient(180deg, rgba(11, 20, 13, 0) 0%, rgba(11, 20, 13, 0.88) 100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.vplayer.is-idle .vplayer__controls { opacity: 0; transform: translateY(8px); pointer-events: none; }
.vplayer.is-idle { cursor: none; }
.vplayer.is-idle .vplayer__video { cursor: none; }

.vplayer__progress {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-1);
}
.vplayer__rail {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(244, 239, 221, 0.22);
  overflow: hidden;
  transition: height 0.15s ease;
}
.vplayer__progress:hover .vplayer__rail { height: 6px; }
.vplayer__buffered,
.vplayer__played {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
}
.vplayer__buffered { background: rgba(244, 239, 221, 0.35); }
.vplayer__played { background: #E4CE7E; }
/* O range nativo fica por cima, transparente: dá teclado e leitor de tela de graça */
.vplayer__seek {
  position: relative;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.vplayer__seek::-webkit-slider-runnable-track { height: 18px; background: transparent; }
.vplayer__seek::-moz-range-track { height: 18px; background: transparent; }
.vplayer__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  background: #E4CE7E;
  border: 0;
  box-shadow: 0 0 0 4px rgba(228, 206, 126, 0.25);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.vplayer__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #E4CE7E;
  border: 0;
  box-shadow: 0 0 0 4px rgba(228, 206, 126, 0.25);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.vplayer__progress:hover .vplayer__seek::-webkit-slider-thumb,
.vplayer__seek:focus-visible::-webkit-slider-thumb { transform: scale(1); }
.vplayer__progress:hover .vplayer__seek::-moz-range-thumb,
.vplayer__seek:focus-visible::-moz-range-thumb { transform: scale(1); }
.vplayer__seek:focus-visible { outline: none; }
.vplayer__progress:focus-within .vplayer__rail { outline: 2px solid #E4CE7E; outline-offset: 4px; }
.vplayer__tooltip {
  position: absolute;
  bottom: 24px;
  left: 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(11, 20, 13, 0.92);
  color: #F4EFDD;
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.vplayer__progress:hover .vplayer__tooltip { opacity: 1; }

.vplayer__bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.vplayer__btn {
  height: 40px;
  min-width: 40px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #F4EFDD;
  transition: color 0.2s ease, background 0.2s ease;
}
.vplayer__btn:hover,
.vplayer__btn[aria-expanded="true"] { color: #E4CE7E; background: rgba(244, 239, 221, 0.08); }
.vplayer__btn svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
.vplayer__btn svg[fill="none"] { fill: none; }
.vplayer__btn--text {
  font-size: var(--font-sm);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
}
.vplayer__btn--text svg { width: 18px; height: 18px; }
.vplayer__btn:focus-visible { outline: 2px solid #E4CE7E; outline-offset: 0; }
/* .vplayer__btn define display, o que anularia o atributo hidden */
.vplayer [hidden] { display: none !important; }
.vplayer__big-play:focus-visible { outline: 3px solid #F4EFDD; outline-offset: 4px; }

/* Ícones alternados pelo estado do player */
.vp-icon-pause, .vp-icon-muted, .vp-icon-shrink { display: none; }
.vplayer.is-playing .vp-icon-play { display: none; }
.vplayer.is-playing .vp-icon-pause { display: block; }
.vplayer.is-muted .vp-icon-vol { display: none; }
.vplayer.is-muted .vp-icon-muted { display: block; }
.vplayer.is-fullscreen .vp-icon-expand { display: none; }
.vplayer.is-fullscreen .vp-icon-shrink { display: block; }

.vplayer__volume { display: flex; align-items: center; }
.vplayer__volume-range {
  width: 0;
  height: 4px;
  margin: 0;
  opacity: 0;
  border-radius: var(--radius-full);
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, #E4CE7E var(--vol, 100%), rgba(244, 239, 221, 0.25) var(--vol, 100%));
  cursor: pointer;
  transition: width 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}
.vplayer__volume:hover .vplayer__volume-range,
.vplayer__volume:focus-within .vplayer__volume-range { width: 80px; opacity: 1; margin: 0 var(--space-2); }
.vplayer__volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #F4EFDD;
  border: 0;
}
.vplayer__volume-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #F4EFDD;
  border: 0;
}
.vplayer__volume-range:focus-visible { outline: 2px solid #E4CE7E; outline-offset: 4px; }

.vplayer__time {
  margin-left: var(--space-2);
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
  color: rgba(244, 239, 221, 0.85);
  white-space: nowrap;
}
.vplayer__spacer { flex: 1; }

.vplayer__menu-wrap { position: relative; }
.vplayer__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  min-width: 140px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid rgba(244, 239, 221, 0.14);
  background: rgba(23, 40, 27, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 3;
}
.vplayer__menu-title {
  padding: var(--space-1) var(--space-3) var(--space-2);
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: #E4CE7E;
}
.vplayer__menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #F4EFDD;
  font-size: var(--font-sm);
  text-align: left;
  white-space: nowrap;
}
.vplayer__menu-item::before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: no-repeat center / contain;
}
.vplayer__menu-item[aria-checked="true"] { color: #E4CE7E; font-weight: var(--font-bold); }
.vplayer__menu-item[aria-checked="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4CE7E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.vplayer__menu-item:hover,
.vplayer__menu-item:focus-visible { background: rgba(244, 239, 221, 0.1); outline: none; }
.vplayer__menu-item small { margin-left: auto; padding-left: var(--space-3); color: rgba(244, 239, 221, 0.55); font-size: var(--font-xs); }

@media (max-width: 768px) {
  .video-modal { padding: var(--space-16) var(--space-3); }
  .video-modal__close { top: var(--space-3); right: var(--space-3); width: 44px; height: 44px; }
  .vplayer { border-radius: var(--radius-md); }
  .vplayer__big-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .vplayer__big-play svg { width: 24px; height: 24px; }
  .vplayer__controls { padding: var(--space-6) var(--space-2) var(--space-1); }
  .vplayer__btn { height: 34px; min-width: 34px; padding: 0 6px; }
  .vplayer__btn svg { width: 19px; height: 19px; }
  .vplayer__btn--skip,
  .vplayer__volume-range,
  .vplayer__btn--text svg { display: none; }
  .vplayer__time { font-size: var(--font-xs); margin-left: var(--space-1); }
}
@media (prefers-reduced-motion: reduce) {
  .video-card__play::before { animation: none; }
}

/* ============================================================
   TEMAS — Tema Garden (padrão, tokens no :root) e Tema Light
   Tema Light: inversão exata do Garden — fundo amarelado,
   botões/acentos verdes. Só cores mudam; tamanhos e espaços não.
   ============================================================ */
[data-theme="light"] {
  --color-heading: #1E3524;
  --color-bg: #F6F0DC;
  --color-bg-alt: #EFE7CC;
  --color-surface: #FAF5E6;
  --color-surface-light: #F1E9CF;
  --color-primary: #5E7A3E;
  --color-primary-dark: #47612F;
  --color-accent: #2E4A38;
  --color-accent-dark: #17281B;
  --color-text: #1E3524;
  --color-muted: #55664E;
  --color-border: rgba(23, 40, 27, 0.16);
  --color-cream: #1E3524;
  --color-ink: #EDE4C8;
  --color-error: #A63D28;
  --color-success: #2F6B3F;
  --shadow-card: 0 12px 32px rgba(122, 102, 44, 0.16);
  --shadow-lift: 0 20px 48px rgba(122, 102, 44, 0.22);
}
/* Cores fixas que não vêm de tokens — equivalentes invertidos */
[data-theme="light"] .site-header { box-shadow: 0 12px 28px -16px rgba(90, 74, 30, 0.35); }
[data-theme="light"] .hero {
  background:
    linear-gradient(180deg, rgba(246, 240, 220, 0.35) 0%, rgba(237, 228, 200, 0.85) 100%),
    var(--color-bg);
}
[data-theme="light"] .site-header::before { background: rgba(246, 240, 220, 0.92); }
[data-theme="light"] .site-header .brand + span[aria-hidden] { background: rgba(23, 40, 27, 0.22) !important; }
[data-theme="light"] .btn-secondary { border-color: rgba(30, 53, 36, 0.55); }
[data-theme="light"] .hero__decor { background: radial-gradient(circle, rgba(94, 122, 62, 0.22), transparent 70%); }
[data-theme="light"] .hero__decor--two { background: radial-gradient(circle, rgba(201, 168, 76, 0.20), transparent 70%); }
[data-theme="light"] .card:hover { border-color: rgba(46, 74, 56, 0.35); }
/* Botão de play: a capa e o vídeo são escuros nos dois temas, então o accent
   verde do tema claro sumiria ali. Usa o creme do tema claro com ícone verde. */
[data-theme="light"] .video-card__play,
[data-theme="light"] .vplayer__big-play { background: #F6F0DC; color: #1E3524; }
[data-theme="light"] .video-card__play::before { border-color: #F6F0DC; }
[data-theme="light"] .video-card:hover { border-color: rgba(46, 74, 56, 0.35); }
[data-theme="light"] .card__icon { background: rgba(46, 74, 56, 0.10); }
[data-theme="light"] .badge--operacional,
[data-theme="light"] .badge--pipeline { background: rgba(244, 239, 221, 0.88); color: #2E4A38; border-color: rgba(46, 74, 56, 0.5); }
[data-theme="light"] .carousel__partners li,
[data-theme="light"] .property-card__partners li,
[data-theme="light"] .timeline-item__partners li { background: rgba(23, 40, 27, 0.07); }
[data-theme="light"] .carousel__partners li.is-pending,
[data-theme="light"] .timeline-item__partners li.is-pending { background: transparent; border-color: rgba(23, 40, 27, 0.3); }
[data-theme="light"] .venture-loc > span { text-decoration-color: rgba(46, 74, 56, 0.35); }
[data-theme="light"] .venture-loc:hover > span { text-decoration-color: currentColor; }
[data-theme="light"] .timeline::before { background: linear-gradient(180deg, var(--color-accent), rgba(46, 74, 56, 0.1)); }
[data-theme="light"] .custom-scrollbar-thumb { background: rgba(46, 74, 56, 0.45); }
[data-theme="light"] .ambient-lights__orb--1 { background: radial-gradient(circle, rgba(201, 168, 76, 0.16) 0%, rgba(201, 168, 76, 0) 68%); }
[data-theme="light"] .ambient-lights__orb--2 { background: radial-gradient(circle, rgba(94, 122, 62, 0.14) 0%, rgba(94, 122, 62, 0) 70%); }
[data-theme="light"] .ambient-lights__orb--3 { background: radial-gradient(circle, rgba(46, 74, 56, 0.10) 0%, rgba(46, 74, 56, 0) 66%); }
/* Formulário: o cartão inverte para verde escuro; campos acompanham */
[data-theme="light"] .form-card p { color: #C9D6C0; }
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea { background: #24402F; border-color: #3E5A47; }
[data-theme="light"] .radio-option label { border-color: #3E5A47; }
[data-theme="light"] .radio-option input:checked + label { background: rgba(124, 154, 82, 0.22); }
[data-theme="light"] .form-instruction, [data-theme="light"] .form-security { color: #AEBFA6; }
[data-theme="light"] .field-error { color: #E8846B; }
[data-theme="light"] .form-status--success { color: #8FBF7F; }
[data-theme="light"] .form-status--error { color: #E8846B; }

/* ---- Botão de alternância de tema ---- */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle__icon--leaf { display: none; }
[data-theme="light"] .theme-toggle__icon--sun { display: none; }
[data-theme="light"] .theme-toggle__icon--leaf { display: block; }

/* ---- Reforço do nome da marca (header e rodapé): traço na própria cor do texto ---- */
.brand__name > span:first-child {
  -webkit-text-stroke: 0.6px currentColor;
  paint-order: stroke fill;
}