/* ============================================================================
   RAÍZES HOME RESORT — Búzios
   Folha de estilo da marca
   ----------------------------------------------------------------------------
   Paleta extraída da logotipo oficial:
     · Offblack (ink) ....... #20201e   — títulos dramáticos, seções escuras
     · Dourado / Bege ....... #b29a6e   — acento, fios, eyebrows, monograma
     · Areia / Cremes ....... #e9e1d0 / #f5efe3 / #faf6ee  — fundos arejados
   Tipografia:
     · Display .... Cormorant   (serifa de alto contraste, ecoa a logo)
     · Interface .. Jost        (sans geométrica, rótulos com tracking)
   ----------------------------------------------------------------------------
   Sumário
     1. Tokens (variáveis)
     2. Reset & base
     3. Tipografia utilitária (rótulos, títulos, corpo)
     4. Botões & links
     5. Navegação
     6. Hero
     7. Faixa de amenidades (marquee)
     8. Manifesto / Conceito
     9. Posicionamento Hotel × Airbnb × Raízes
    10. Experiência
    11. Casa Tartaruga (destaque)
    12. Suítes
    13. Localização — Búzios
    14. Pacotes
    15. Público-alvo
    16. Manifesto final
    17. Contato
    18. Rodapé
    19. Image slots (fotos reais)
    20. Animações de entrada
    21. Responsivo
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Marca */
  --ink:        #20201e;   /* offblack */
  --ink-2:      #2a2925;
  --ink-3:      #35332c;
  --gold:       #b29a6e;
  --gold-deep:  #9a8359;
  --gold-light: #cdb892;
  --sand:       #d8c9aa;
  --areia:      #e9e1d0;
  --cream:      #f5efe3;
  --paper:      #faf7f0;   /* fundo geral da página */

  /* Texto */
  --text:        #26251f;
  --text-soft:   #504c40;
  --text-muted:  #857c6b;
  --on-dark:        #efe7d6;
  --on-dark-soft:   rgba(239,231,214,0.72);
  --on-dark-muted:  rgba(239,231,214,0.48);

  /* Linhas */
  --line:       rgba(32,32,30,0.13);
  --line-soft:  rgba(32,32,30,0.07);
  --line-gold:  rgba(178,154,110,0.40);
  --line-on-dark: rgba(205,184,146,0.26);

  /* Tipos */
  --display: 'Cormorant', Georgia, serif;
  --ui:      'Montserrat', system-ui, sans-serif;

  /* Ritmo */
  --pad-x: clamp(1.5rem, 6vw, 7rem);   /* margem lateral responsiva */
  --maxw: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--ui);
  font-weight: 300;
  background: var(--paper);
  color: var(--text);
  line-height: 1.75;
  overflow-x: hidden;
}

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

/* container central reutilizável */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; }

/* seção padrão */
.section { padding: clamp(4.5rem, 10vw, 9rem) var(--pad-x); }

/* ---------- 3. TIPOGRAFIA UTILITÁRIA ------------------------------------ */
/* Eyebrow / rótulo de seção */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--ui);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px;
  background: var(--gold); display: inline-block;
}
.eyebrow.center { justify-content: center; }
.on-dark .eyebrow { color: var(--gold-light); }

/* Título de seção */
.h-display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text);
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  text-wrap: balance;
}
.h-display em { font-style: italic; color: var(--gold-deep); }
.on-dark .h-display { color: var(--cream); }
.on-dark .h-display em { color: var(--gold-light); }

/* Texto corrente */
.lede {
  font-size: 1.02rem; font-weight: 300;
  color: var(--text-soft); line-height: 1.95;
  max-width: 56ch; text-wrap: pretty;
}
.on-dark .lede { color: var(--on-dark-soft); }

.small-print {
  font-size: 0.8rem; font-weight: 300;
  color: var(--text-muted); line-height: 1.8;
}

/* ---------- 4. BOTÕES & LINKS ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--ui);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: 1.05rem 2.4rem; border: 1px solid transparent;
  transition: all 0.45s var(--ease);
}
.btn-solid { background: var(--ink); color: var(--cream); }
.btn-solid:hover { background: var(--gold-deep); color: var(--ink); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-light); }
.btn-outline {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover { border-color: var(--ink); }
.on-dark .btn-outline { color: var(--cream); border-color: var(--line-on-dark); }
.on-dark .btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }

/* CTA da navegação — destaque sobre a barra escura: texto claro + borda dourada,
   preenche dourado no hover. */
.nav-cta {
  background: transparent; color: var(--cream);
  border: 1px solid var(--gold-light);
}
.nav-cta:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* link sublinhado discreto */
.link-quiet {
  font-family: var(--ui);
  font-size: 0.72rem; font-weight: 400; white-space: nowrap;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--text-soft);
  border-bottom: 1px solid var(--line-gold); padding-bottom: 3px;
  transition: all 0.35s var(--ease);
}
.link-quiet:hover { color: var(--ink); border-color: var(--ink); }
.on-dark .link-quiet { color: var(--on-dark-soft); }
.on-dark .link-quiet:hover { color: var(--cream); border-color: var(--gold-light); }

/* marca gráfica (losango do monograma) */
.mark { color: var(--gold); font-size: 0.7rem; line-height: 1; }

/* ---------- 5. NAVEGAÇÃO ------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--pad-x);
  transition: background 0.5s var(--ease), padding 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
.nav.scrolled {
  background: rgba(28,27,24,0.90);
  backdrop-filter: blur(10px) saturate(1.1);
  padding-block: 0.95rem;
  box-shadow: 0 1px 0 var(--line-on-dark);
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 64px; width: auto; transition: height 0.5s var(--ease); }
.nav.scrolled .nav-logo img { height: 50px; }
.nav-links {
  display: flex; align-items: center; gap: 2.4rem;
}
.nav-link {
  font-family: var(--ui);
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; color: var(--on-dark-soft);
  transition: color 0.3s var(--ease);
}
.nav-link:hover { color: var(--gold-light); }
.nav-menu-toggle { display: none; }

/* ---------- 6. HERO ----------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* respiro no topo (clamp) garante que o conteúdo nunca encoste na nav */
  padding: clamp(8rem, 16vh, 12rem) var(--pad-x) clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
  /* fundo de marca visível enquanto o slot do hero está vazio */
  background: linear-gradient(140deg, #201f1b 0%, #2b271f 55%, #3a3325 100%);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* reforçado para legibilidade do texto sobre a foto clara do hero */
  background:
    linear-gradient(to bottom,
      rgba(20,19,16,0.45) 0%,
      rgba(20,19,16,0.20) 32%,
      rgba(20,19,16,0.66) 72%,
      rgba(20,19,16,0.92) 100%),
    linear-gradient(90deg, rgba(20,19,16,0.55) 0%, rgba(20,19,16,0.10) 55%, transparent 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw);
  margin-inline: auto; width: 100%; }
.hero-eyebrow { color: var(--gold-light); margin-bottom: 1.6rem; }
.hero h1 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(3rem, 8vw, 7rem); line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--cream); max-width: 16ch; margin-bottom: 1.6rem;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(15,14,11,0.55);
}
.hero h1 em { font-style: italic; color: var(--gold-light); }
/* texto de apoio do hero — mais claro e com sombra para destaque sobre a foto */
.hero-sub {
  font-size: 1.1rem; font-weight: 400; line-height: 1.85;
  color: var(--cream); max-width: 44ch; margin-bottom: 2.8rem;
  text-shadow: 0 1px 16px rgba(15,14,11,0.6);
}
.hero-actions { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
/* CTA primário do hero — destaque extra sobre a foto */
.hero-actions .btn-gold {
  box-shadow: 0 16px 40px -14px rgba(15,14,11,0.7);
  font-weight: 600;
}
/* CTA secundário do hero — mais legível: texto claro, borda dourada e sombra */
.hero-actions .link-quiet {
  color: var(--cream); border-color: var(--gold-light);
  text-shadow: 0 1px 12px rgba(15,14,11,0.6);
}
.hero-actions .link-quiet:hover { color: var(--gold-light); border-color: var(--gold-light); }
.hero-index {
  position: absolute; right: var(--pad-x); bottom: clamp(3.5rem,7vw,6.5rem);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  writing-mode: vertical-rl; white-space: nowrap;
  font-family: var(--ui); font-size: 0.62rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--on-dark-muted);
}
.hero-index::after { content: ''; width: 1px; height: 64px; background: var(--line-on-dark); }
@media (max-width: 820px){ .hero-index { display: none; } }

/* ---------- 7. FAIXA DE AMENIDADES (marquee) ---------------------------- */
.marquee {
  background: var(--cream);
  border-block: 1px solid var(--line-soft);
  padding-block: 1.5rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row {
  display: flex; gap: 3.5rem; white-space: nowrap; width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 1.4rem; flex-shrink: 0;
  font-family: var(--ui); font-size: 0.74rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-soft);
}
.marquee-item::before { content: '◇'; font-size: 0.5rem; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 8. MANIFESTO / CONCEITO ------------------------------------- */
.concept { background: var(--paper); }
.concept-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.concept-pillars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.5rem;
  margin-top: 2.8rem;
}
.pillar { border-top: 1px solid var(--line-gold); padding-top: 1.15rem; }
.pillar-name {
  font-family: var(--display); font-size: 1.45rem; font-weight: 500;
  color: var(--gold-deep); margin-bottom: 0.3rem;
}
.pillar-desc { font-size: 0.85rem; font-weight: 300; color: var(--text-muted); line-height: 1.65; }

/* coluna visual com citação sobreposta */
.concept-visual { position: relative; }
.concept-visual .slot { height: clamp(420px, 56vw, 640px); }
.pull-quote {
  position: absolute; left: -1.5rem; bottom: -1.75rem;
  max-width: 360px; background: var(--ink); color: var(--cream);
  padding: 2rem 2.25rem;
}
.pull-quote p {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: 1.3rem; line-height: 1.5; color: var(--cream);
}
.pull-quote cite {
  display: block; margin-top: 1rem; font-family: var(--ui); font-style: normal;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light);
}

/* ---------- 9. POSICIONAMENTO Hotel × Airbnb × Raízes ------------------- */
.position { background: var(--ink); }
.position-head { text-align: center; max-width: 760px; margin: 0 auto clamp(3rem,5vw,4.5rem); }
.position-head .h-display { margin-top: 1.4rem; }
.compare {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--line-on-dark);
}
.compare-col { padding: clamp(2rem,3.2vw,3rem) clamp(1.5rem,2.5vw,2.4rem); position: relative; }
.compare-col + .compare-col { border-left: 1px solid var(--line-on-dark); }
.compare-col.feature { background: var(--gold); color: var(--ink); padding-top: clamp(2.6rem,3.8vw,3.6rem); }
.compare-kicker {
  font-family: var(--ui); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--on-dark-muted); margin-bottom: 0.5rem;
}
.compare-col.feature .compare-kicker { color: rgba(32,32,30,0.6); }
.compare-name {
  font-family: var(--display); font-size: 1.9rem; font-weight: 400;
  color: var(--cream); margin-bottom: 1.6rem; line-height: 1.1;
}
.compare-col.feature .compare-name { color: var(--ink); }
.compare-list { list-style: none; display: flex; flex-direction: column; gap: 0.95rem; }
.compare-list li {
  font-size: 0.9rem; font-weight: 300; line-height: 1.55;
  color: var(--on-dark-soft); padding-left: 1.6rem; position: relative;
}
.compare-col.feature .compare-list li { color: rgba(32,32,30,0.82); }
.compare-list li::before {
  position: absolute; left: 0; top: 0.05rem; font-size: 0.95rem;
}
.compare-list li.no::before  { content: '–'; color: var(--on-dark-muted); }
.compare-list li.yes::before { content: '✦'; font-size: 0.7rem; top: 0.2rem; color: var(--gold-light); }
.compare-col.feature .compare-list li.yes::before { color: var(--ink); }
.compare-badge {
  position: absolute; top: 0; right: 50%; transform: translate(50%, -50%);
  display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap;
  background: var(--ink); color: var(--gold-light);
  font-family: var(--ui); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; padding: 0.7rem 1.5rem;
  box-shadow: 0 12px 30px -12px rgba(20,19,16,0.7);
  border: 1px solid var(--gold-light);
}
.compare-badge::before { content: '\25C6'; font-size: 0.6rem; color: var(--gold); }

/* ---------- 10. EXPERIÊNCIA --------------------------------------------- */
.experience { background: var(--paper); }
.experience-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem);
  align-items: end; margin-bottom: clamp(3rem,6vw,5.5rem);
}
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
.exp-card {
  background: var(--paper); padding: clamp(1.8rem,2.6vw,2.6rem);
  transition: background 0.4s var(--ease);
}
.exp-card:hover { background: var(--cream); }
.exp-num {
  font-family: var(--display); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.1em; color: var(--gold-deep); margin-bottom: 1.4rem;
}
.exp-title {
  font-family: var(--display); font-size: 1.4rem; font-weight: 500;
  color: var(--text); margin-bottom: 0.6rem;
}
.exp-desc { font-size: 0.88rem; font-weight: 300; color: var(--text-muted); line-height: 1.75; }

/* ---------- 11. CASA TARTARUGA (DESTAQUE) ------------------------------- */
.casa { position: relative; background: var(--ink); overflow: hidden; }
/* topo imersivo de imagem cheia */
.casa-hero { position: relative; min-height: 86svh; display: flex; align-items: flex-end;
  background: linear-gradient(140deg, #1d1c18 0%, #2a261e 55%, #3a3325 100%); }
.casa-hero .slot { position: absolute; inset: 0; z-index: 0; }
.casa-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(15,14,11,0.92) 0%, rgba(15,14,11,0.45) 45%, rgba(15,14,11,0.25) 100%);
}
.casa-hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding: 0 var(--pad-x) clamp(3rem,5vw,5rem);
}
.casa-flag {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: var(--ui); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink);
  background: var(--gold); padding: 0.6rem 1.3rem; margin-bottom: 1.8rem;
}
.casa-title {
  font-family: var(--display); font-weight: 300; line-height: 1.0;
  font-size: clamp(3rem, 9vw, 7.5rem); color: var(--cream);
  letter-spacing: -0.02em; margin-bottom: 1.2rem; text-wrap: balance;
}
.casa-title em { font-style: italic; color: var(--gold-light); }
.casa-lead { max-width: 52ch; color: var(--on-dark-soft);
  font-size: 1.08rem; line-height: 1.85; }
/* corpo: texto + faixa de números */
.casa-body {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3.5rem,6vw,6rem) var(--pad-x) clamp(4.5rem,8vw,7rem);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem,6vw,6rem);
  align-items: center;
}
.casa-body .lede + .lede { margin-top: 1.4rem; }
/* Texto da Casa Tartaruga em tom mais claro para leitura fácil sobre o fundo escuro */
.casa-body .lede { color: var(--on-dark); }
.casa-cta { margin-top: 2.6rem; }
.casa-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
.casa-stat { border-top: 1px solid var(--line-on-dark); padding-top: 1.1rem; }
.casa-stat-num {
  font-family: var(--display); font-weight: 300; line-height: 1;
  font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--gold-light); margin-bottom: 0.45rem;
}
.casa-stat-label {
  font-family: var(--ui); font-size: 0.74rem; font-weight: 400;
  letter-spacing: 0.06em; color: var(--on-dark-muted); line-height: 1.5;
}

/* Galeria da Casa Tartaruga — mosaico editorial sobre o fundo escuro da seção */
.casa-gallery {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--pad-x) clamp(4.5rem,8vw,7rem);
}
.casa-gallery-head { margin-bottom: clamp(2rem,3.5vw,3rem); }
.casa-gallery-head .h-display { margin-top: 1rem; color: var(--cream); }
.casa-gallery-head .h-display em { color: var(--gold-light); }
.casa-gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.2vw, 1.2rem);
}
.cg-item {
  position: relative; overflow: hidden; margin: 0;
  background: var(--ink-2); aspect-ratio: 4 / 3;
}
/* itens largos ocupam 2 colunas e ganham proporção panorâmica */
.cg-item.cg-wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.cg-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.9s var(--ease);
}
.cg-item:hover img { transform: scale(1.05); }
.cg-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.7rem 1.3rem 1rem;
  font-family: var(--ui); font-size: 0.74rem; font-weight: 400;
  letter-spacing: 0.04em; color: var(--cream);
  background: linear-gradient(to top, rgba(15,14,11,0.82), transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.cg-item:hover figcaption { opacity: 1; transform: none; }

/* ---------- 12. SUÍTES -------------------------------------------------- */
.suites { background: var(--cream); }
.suites-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem);
  align-items: end; margin-bottom: clamp(3rem,5vw,4.5rem);
}
.suites-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.suite {
  background: var(--paper); display: flex; flex-direction: column;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.suite:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(32,32,30,0.4); }
.suite .slot { height: 240px; }
.suite-body { padding: 1.7rem 1.6rem 2rem; display: flex; flex-direction: column; flex: 1; }
.suite-tag {
  font-family: var(--ui); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.85rem;
}
.suite-name {
  font-family: var(--display); font-size: 1.7rem; font-weight: 400;
  color: var(--text); margin-bottom: 0.7rem;
}
.suite-desc { font-size: 0.86rem; font-weight: 300; color: var(--text-muted); line-height: 1.7; flex: 1; }
.suite-meta {
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-family: var(--ui); font-size: 0.74rem; font-weight: 400;
  letter-spacing: 0.04em; color: var(--text-soft);
}

/* ---------- 13. LOCALIZAÇÃO — BÚZIOS ------------------------------------ */
.location { background: var(--ink); position: relative; overflow: hidden; }
.location-watermark {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-weight: 300; font-size: 22vw; line-height: 1;
  color: rgba(205,184,146,0.05); white-space: nowrap; pointer-events: none; z-index: 0;
}
.location-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem,6vw,6rem);
  align-items: center;
}
.location-visual .slot { height: clamp(360px, 50vw, 560px); }
.location-facts { display: flex; flex-direction: column; gap: 1.8rem; }
.fact { display: flex; gap: 1.6rem; align-items: flex-start;
  border-top: 1px solid var(--line-on-dark); padding-top: 1.5rem; }
.fact-num {
  font-family: var(--display); font-weight: 300; font-size: 2.9rem; line-height: 1;
  color: var(--gold); min-width: 2.6rem;
}
.fact-title {
  font-family: var(--display); font-size: 1.25rem; font-weight: 400;
  color: var(--cream); margin-bottom: 0.3rem;
}
.fact-desc { font-size: 0.86rem; font-weight: 300; color: var(--on-dark-muted); line-height: 1.65; }

/* ---------- 14. PACOTES ------------------------------------------------- */
.packages { background: var(--areia); }
.packages-head { text-align: center; max-width: 640px; margin: 0 auto clamp(3rem,5vw,4.5rem); }
.packages-head .h-display { margin-top: 1.3rem; }
.packages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: stretch; }
.pkg {
  background: var(--paper); padding: clamp(2.2rem,3.4vw,3.2rem); display: flex; flex-direction: column;
  position: relative;
}
.pkg.feature { background: var(--ink); }
.pkg-ribbon {
  position: absolute; top: 0; right: clamp(1.5rem,3vw,2.6rem); transform: translateY(-50%);
  background: var(--gold); color: var(--ink);
  font-family: var(--ui); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; padding: 0.5rem 1.1rem;
}
.pkg-tag {
  font-family: var(--ui); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1rem;
}
.pkg.feature .pkg-tag { color: var(--gold-light); }
.pkg-name {
  font-family: var(--display); font-size: 2.5rem; font-weight: 300; color: var(--text); line-height: 1;
}
.pkg.feature .pkg-name { color: var(--cream); }
.pkg-period {
  font-family: var(--ui); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--text-muted); margin-top: 0.5rem;
}
.pkg.feature .pkg-period { color: var(--on-dark-muted); }
.pkg-tagline {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: 1.2rem; line-height: 1.5; color: var(--gold-deep);
  margin: 1.6rem 0 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--line);
}
.pkg.feature .pkg-tagline { color: var(--gold-light); border-color: var(--line-on-dark); }
.pkg-list { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2.2rem; flex: 1; }
.pkg-list li {
  font-size: 0.88rem; font-weight: 300; color: var(--text-soft);
  padding-left: 1.5rem; position: relative; line-height: 1.55;
}
.pkg.feature .pkg-list li { color: var(--on-dark-soft); }
.pkg-list li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.pkg-price-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.8rem; flex-wrap: wrap;
}
.pkg-price-label {
  font-family: var(--ui); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem;
}
.pkg.feature .pkg-price-label { color: var(--on-dark-muted); }
.pkg-price {
  font-family: var(--display); font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--text);
}
.pkg.feature .pkg-price { color: var(--gold-light); }
.pkg-price-suffix { font-size: 0.78rem; color: var(--text-muted); max-width: 18ch; text-align: right; }
.pkg.feature .pkg-price-suffix { color: var(--on-dark-muted); }
.packages-note { text-align: center; margin-top: 2.5rem; }

/* ---------- 15. PÚBLICO-ALVO -------------------------------------------- */
.audience { background: var(--paper); }
.audience-head { margin-bottom: clamp(3rem,5vw,4.5rem); max-width: 720px; }
.audience-head .h-display { margin-top: 1.3rem; }
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.aud { border-top: 2px solid var(--gold); padding-top: 1.6rem; }
.aud-idx {
  font-family: var(--display); font-size: 1.05rem; font-weight: 500;
  color: var(--gold-deep); margin-bottom: 1.4rem; letter-spacing: 0.05em;
}
.aud-name {
  font-family: var(--display); font-size: 1.35rem; font-weight: 500;
  color: var(--text); margin-bottom: 0.7rem; line-height: 1.15;
}
.aud-desc { font-size: 0.86rem; font-weight: 300; color: var(--text-muted); line-height: 1.7; }

/* ---------- 16. MANIFESTO FINAL ----------------------------------------- */
.finale {
  position: relative; min-height: 82svh; display: flex; align-items: center;
  text-align: center; padding: clamp(5rem,9vw,8rem) var(--pad-x); overflow: hidden;
  background: linear-gradient(140deg, #1d1c18 0%, #2a261e 55%, #3a3325 100%);
}
.finale .slot { position: absolute; inset: 0; z-index: 0; }
.finale-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(18,17,13,0.78), rgba(18,17,13,0.86));
}
.finale-inner { position: relative; z-index: 2; max-width: 860px; margin-inline: auto; }
.finale-text {
  font-family: var(--display); font-weight: 300; line-height: 1.32;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); color: var(--cream);
  margin: 2.2rem 0 2rem; text-wrap: balance;
}
.finale-text em { font-style: italic; color: var(--gold-light); }
.finale-sub {
  font-size: 0.98rem; font-weight: 300; color: var(--on-dark-soft); line-height: 1.9;
  max-width: 56ch; margin: 0 auto 3rem;
}

/* ---------- 17. CONTATO ------------------------------------------------- */
.contact { background: var(--ink); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem); align-items: start;
}
.contact-grid .h-display { margin: 1.3rem 0 1.6rem; }
.contact-conditions {
  margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--line-on-dark);
  font-size: 0.84rem; font-weight: 300; color: var(--on-dark-muted); line-height: 1.85;
}
.contact-conditions strong { color: var(--on-dark-soft); font-weight: 500; }
.contact-card {
  background: var(--ink-2); border: 1px solid var(--line-on-dark);
  padding: clamp(2rem,3vw,2.8rem);
}
.contact-item { padding: 1.2rem 0; border-bottom: 1px solid var(--line-on-dark); }
.contact-item:first-child { padding-top: 0; }
.contact-item:last-of-type { border-bottom: none; }
.contact-label {
  font-family: var(--ui); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem;
}
.contact-value {
  font-family: var(--display); font-size: 1.2rem; font-weight: 400;
  color: var(--cream); text-decoration: none; transition: color 0.3s var(--ease);
}
a.contact-value:hover { color: var(--gold-light); }
.contact-card .btn { width: 100%; justify-content: center; margin-top: 1.8rem; }

/* ---------- 18. RODAPÉ -------------------------------------------------- */
.footer { background: #1a1916; padding: clamp(3rem,5vw,4.5rem) var(--pad-x); }
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem;
  flex-wrap: wrap; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-on-dark);
}
.footer-logo img { height: 60px; width: auto; opacity: 0.95; }
.footer-nav { display: flex; gap: clamp(2rem,5vw,4rem); flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--ui); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.footer-col a, .footer-col p {
  display: block; font-size: 0.85rem; font-weight: 300; color: var(--on-dark-muted);
  text-decoration: none; line-height: 2; transition: color 0.3s var(--ease);
}
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding-top: 2rem;
  font-size: 0.74rem; font-weight: 300; letter-spacing: 0.04em; color: var(--on-dark-muted);
}

/* Fotos de fundo full-bleed (hero e Casa Tartaruga) — <img> simples e robusto,
   cobre toda a área mantendo proporção. Trocar = substituir o arquivo ou o src. */
.hero-photo, .casa-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* ---------- 19. IMAGE SLOTS -------------------------------------------- */
/* Cada foto do resort é um slot: arraste sua imagem real sobre ele.
   Enquanto vazio, mostra um espaço de marca com legenda indicando a foto. */
image-slot, .slot { display: block; width: 100%; }

/* Slots de fundo cheio (hero, Casa Tartaruga, manifesto final) precisam
   sobrescrever o height padrão (160px) do componente. */
.hero-media, .casa-hero .slot, .finale .slot {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* Fundo de marca no host dos slots de conteúdo (aparece quando vazio) */
.concept-visual .slot, .suite .slot, .location-visual .slot {
  background: linear-gradient(135deg, var(--cream), var(--areia));
}

/* Estado vazio — seções claras (conceito, suítes, localização light): areia */
image-slot { color: var(--gold-deep); }
image-slot::part(frame) {
  background: linear-gradient(135deg, var(--cream), var(--areia));
}
image-slot::part(ring) { border-color: var(--line-gold); }

/* Estado vazio — seções escuras de fundo cheio: gradiente ink (texto legível) */
.hero-media, .casa-hero .slot, .finale .slot { color: var(--on-dark-soft); }
.hero-media::part(frame),
.casa-hero .slot::part(frame),
.finale .slot::part(frame) {
  background: linear-gradient(140deg, #23211c 0%, #2f2b22 55%, #3b3426 100%);
}
.hero-media::part(ring),
.casa-hero .slot::part(ring),
.finale .slot::part(ring) { border-color: var(--line-on-dark); }

/* ---------- 20. ENTRADA (estável) -------------------------------------
   Sem opacidade inicial: todo o conteúdo é visível por padrão. A classe
   .reveal permanece no HTML como gancho opcional, mas NUNCA esconde texto —
   garante estabilidade em WordPress/Elementor mesmo se o JS não rodar. */
.reveal { opacity: 1; transform: none; }

/* ---------- 21. RESPONSIVO --------------------------------------------- */
@media (max-width: 1000px) {
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .suites-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .casa-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .cg-item.cg-wide { grid-column: span 2; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  .concept-grid, .experience-head, .suites-head, .location-grid,
  .casa-body, .contact-grid, .packages-grid, .position-head { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .compare-col + .compare-col { border-left: none; border-top: 1px solid var(--line-on-dark); }
  .compare-badge { right: 50%; }
  .pull-quote { position: static; margin-top: 1.5rem; max-width: none; }
  .concept-visual .slot { height: 58vw; }
  .casa-stats { gap: 1.8rem 1.5rem; }
}
@media (max-width: 560px) {
  .exp-grid, .suites-grid, .audience-grid { grid-template-columns: 1fr; }
  .casa-gallery-grid { grid-template-columns: 1fr; }
  .cg-item, .cg-item.cg-wide { grid-column: span 1; aspect-ratio: 4 / 3; }
  /* no mobile a legenda fica sempre visível (sem hover) */
  .cg-item figcaption { opacity: 1; transform: none; }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .casa-title { font-size: clamp(2.8rem, 14vw, 4rem); }
  .pkg-price-suffix { text-align: left; }
  .footer-top { flex-direction: column; }
}