/* ============================================================
   Recanto Beija-Flor — Imersão: Copa → Subsolo → Raiz
   Jornada de scroll contínua, com transições suaves entre zonas.
   Inspirado no "descent" do Sonar Promos (vars CSS interpoladas
   via JS) e no medidor narrativo do StreamNest.
   ============================================================ */

:root {
  /* Paleta institucional (docs/extra.md) */
  --ivory: #F7F3E8;
  --surface: #FCFAF3;
  --sand: #E5D8BD;
  --forest: #173D2D;
  --forest-deep: #0F2A1F;
  --forest-soft: #1F4A38;
  --olive: #667A45;
  --olive-deep: #55693A;
  --olive-hover: #4A5C32; /* hover mantém contraste AA do texto */

  /* Accent dourado */
  --gold: #B7924A;
  --gold-bright: #D4AF37; /* ouro clássico: rico p/ fundos verdes */
  --gold-deep: #6B4D17;   /* escuro p/ AA sobre areia */

  /* Texto */
  --ink: #292C29;
  --muted: #4E5549;
  --dim: #565D52;         /* escurecido p/ AA sobre marfim */
  --on-dark: #F3EEDF;
  --on-dark-muted: #C9CFC2;

  /* Linhas */
  --line: rgba(23, 61, 45, .14);
  --line-strong: rgba(23, 61, 45, .3);
  --line-dark: rgba(243, 238, 223, .16);

  --radius-sm: 12px;
  --radius: 16px;
  --nav-h: 4.25rem;

  /* ---- Variáveis de descida (atualizadas via JS) ---- */
  --sun-opacity: 1;              /* luz da copa, some ao descer */
  --root-glow: 0;                /* brilho dourado da raiz, sobe ao descer */
  --journey-bg-r: 247;           /* fundo interpolado do body */
  --journey-bg-g: 243;
  --journey-bg-b: 232;

  --font-title: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-body: "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font: 400 clamp(1rem, 1.1vw, 1.0625rem)/1.7 var(--font-body);
  color: var(--muted);
  background: rgb(var(--journey-bg-r), var(--journey-bg-g), var(--journey-bg-b));
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease;
}

img, svg { display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--forest); text-wrap: balance; }
p { margin: 0 0 1rem; }
em { font-style: italic; }

h1 { font: 700 clamp(2.4rem, 6vw, 4.2rem)/1.08 var(--font-title); letter-spacing: -.02em; }
h2 { font: 700 clamp(1.9rem, 4.4vw, 3rem)/1.12 var(--font-title); letter-spacing: -.015em; }
h3 { font: 600 clamp(1.15rem, 2.2vw, 1.4rem)/1.3 var(--font-title); }

.marca { color: var(--gold-deep); }
.definicao { font-size: 1.05em; }

.container { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.container--estreito { width: min(820px, 100% - 2.5rem); }

section { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
section[id], div[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* ---------- Canvas de partículas ----------
   z-index acima dos fundos das seções (que são opacos),
   abaixo do conteúdo (containers com z-index 2).
   Assim partículas e raízes ficam visíveis sobre qualquer zona. */
section .container { position: relative; z-index: 2; }
.hero__inner { position: relative; z-index: 2; }

/* ---------- Acessibilidade ---------- */
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 100;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--forest); color: var(--on-dark);
  transform: translateY(-300%); transition: transform .2s;
}
.skip-link:focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(15, 42, 31, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; }
.nav__logo {
  font: 700 1.15rem/1 var(--font-title); color: var(--on-dark);
  text-decoration: none; letter-spacing: .01em; white-space: nowrap;
  animation: logoFlutua 6s ease-in-out infinite;
  will-change: transform;
}
.nav__logo em { color: var(--gold-bright); }
.nav__links { display: flex; align-items: center; gap: 1.5rem; }
.nav__links a:not(.btn) {
  font: 500 .92rem/1 var(--font-body); color: var(--on-dark-muted);
  text-decoration: none; position: relative; padding-block: .35rem;
}
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--gold-bright); transition: right .25s ease;
}
.nav__links a:not(.btn):hover::after { right: 0; }
.nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line-dark); border-radius: 10px;
  background: transparent; color: var(--on-dark); cursor: pointer;
}
.nav__toggle .icone-fechar { display: none; }
.nav__toggle[aria-expanded="true"] .icone-menu { display: none; }
.nav__toggle[aria-expanded="true"] .icone-fechar { display: block; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  font: 600 1rem/1 var(--font-body); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn--whatsapp { background: var(--olive-deep); color: var(--on-dark); }
.btn--whatsapp:hover { background: var(--olive-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.btn--outline { border-color: var(--line-strong); color: var(--forest); background: transparent; }
.btn--outline:hover { background: rgba(23, 61, 45, .06); transform: translateY(-2px); }
.secao--subsolo .btn--outline,
.secao--profundo .btn--outline,
.secao--transformadora .btn--outline,
.secao--florescencia .btn--outline,
.secao--guia .btn--outline,
.secao--calmo .btn--outline { border-color: var(--line-dark); color: var(--on-dark); }
.secao--subsolo .btn--outline:hover,
.secao--profundo .btn--outline:hover,
.secao--transformadora .btn--outline:hover,
.secao--florescencia .btn--outline:hover,
.secao--guia .btn--outline:hover,
.secao--calmo .btn--outline:hover { background: rgba(243, 238, 223, .08); }
.btn--compact { padding: .6rem 1.1rem; font-size: .92rem; }
.btn--grande { padding: 1.05rem 2rem; font-size: 1.08rem; }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow {
  display: inline-flex; gap: .5rem; align-items: center;
  font: 500 .75rem/1 var(--font-mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep);
  padding: .55rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(252, 250, 243, .95);
  box-shadow: 0 1px 0 rgba(23, 61, 45, .08);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

.kicker {
  font: 500 .78rem/1.4 var(--font-mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 1.1rem;
}
/* Kickers nas zonas escuras: dourado claro p/ contraste AA */
.secao--subsolo .kicker,
.secao--profundo .kicker,
.secao--transformadora .kicker,
.secao--florescencia .kicker,
.secao--guia .kicker,
.secao--calmo .kicker,
.secao--raiz-brilhante .kicker { color: var(--gold-bright); }

/* ---------- Section head ---------- */
.section-head { max-width: 720px; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.section-head h2 { margin-bottom: 1rem; }
.section-head .lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); margin: 0; }

/* ---------- Ghost words ---------- */
.ghost {
  position: absolute; top: 1.5rem; left: 2%; z-index: 0;
  font: 800 clamp(4.5rem, 14vw, 10rem)/1 var(--font-title);
  color: var(--gold); opacity: .07; user-select: none; pointer-events: none;
  white-space: nowrap; font-style: italic;
}
.ghost--claro { color: var(--on-dark); opacity: .05; }

/* ============================================================
   HERO — COPA DA ÁRVORE (iluminada por raios solares)
   ============================================================ */
.hero {
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + clamp(1.75rem, 4vw, 3rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* Foto retrato (864×1536) composta em duas camadas: a superior mostra o
   céu dourado do pôr do sol (faixa ~15–47%), a inferior as silhuetas dos
   cavalos (faixa ~60–94%) — assim o hero widescreen mostra os dois. */
.hero__bg-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  opacity: calc(.84 + .14 * var(--sun-opacity));
  filter: saturate(1.35) brightness(1.06) contrast(1.08) sepia(.12);
  transition: opacity .4s ease;
  will-change: transform;
}
.hero__bg-img--baixo {
  position: absolute; inset: 0;
  object-position: center 88%;
  opacity: calc(.82 + .12 * var(--sun-opacity));
  -webkit-mask-image: linear-gradient(to bottom, transparent 38%, black 72%);
  mask-image: linear-gradient(to bottom, transparent 38%, black 72%);
}

/* Copas de árvore nas bordas superiores — moldura de folhas mais definida */
.hero__copa {
  position: absolute; inset: 0; pointer-events: none;
}
.hero__copa::before, .hero__copa::after {
  content: ""; position: absolute; top: -14%; width: 46%; height: 52%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 55% 45% at 24% 34%, rgba(23, 61, 45, .5), transparent 66%),
    radial-gradient(ellipse 46% 40% at 62% 26%, rgba(102, 122, 69, .52), transparent 62%),
    radial-gradient(ellipse 40% 36% at 45% 56%, rgba(23, 61, 45, .4), transparent 60%),
    radial-gradient(ellipse 30% 28% at 78% 44%, rgba(102, 122, 69, .34), transparent 58%);
  filter: blur(1.5px);
}
.hero__copa::before { left: -9%; }
.hero__copa::after { right: -9%; }

/* Overlay: deixar o pôr do sol brilhar, scrim suave no texto */
.hero__bg-overlay {
  position: absolute; inset: 0;
  background:
    /* Base suave — cavalos visíveis na metade inferior */
    linear-gradient(to bottom,
      rgba(18, 42, 30, .08) 0%,
      rgba(247, 243, 232, .04) 25%,
      rgba(247, 243, 232, .12) 50%,
      rgba(247, 243, 232, .55) 100%
    ),
    /* Scrim lateral esquerda (legibilidade do texto — mais leve) */
    linear-gradient(to right,
      rgba(252, 250, 243, .55) 0%,
      rgba(252, 250, 243, .18) 32%,
      rgba(252, 250, 243, 0) 55%
    ),
    /* Brilho intenso do sol — canto superior direito, bem presente */
    radial-gradient(ellipse 72% 56% at 78% 10%,
      rgba(255, 186, 76, calc(.52 * var(--sun-opacity))) 0%,
      rgba(255, 155, 58, calc(.22 * var(--sun-opacity))) 38%,
      transparent 62%
    ),
    /* Vinheta nas bordas — foco no horizonte */
    radial-gradient(ellipse 96% 80% at 50% 44%, transparent 50%, rgba(14, 36, 24, .32) 100%);
}

/* Raios solares volumétricos — god rays suaves, abertos para o céu
   a partir do SOL REAL da fotografia (--sun-x/--sun-y, medidos via JS
   + modlens). Intensidade baixa, névoa iluminada, ciclo 15-30s. */
.hero {
  --sun-x: 78%; /* fallback antes do JS medir */
  --sun-y: 8%;
}
.hero__godrays {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: var(--sun-opacity);
  background:
    /* Raio 1 — leque para o céu (0° = para cima, sentido horário) */
    conic-gradient(from 0deg at var(--sun-x) var(--sun-y),
      transparent 0deg, rgba(255, 202, 122, .26) 10deg, transparent 18deg,
      transparent 30deg, rgba(255, 188, 100, .2) 38deg, transparent 46deg,
      transparent 58deg, rgba(255, 205, 130, .16) 66deg, transparent 74deg,
      transparent 84deg, rgba(255, 182, 94, .14) 92deg, transparent 100deg,
      transparent 270deg, rgba(255, 196, 116, .16) 296deg, transparent 304deg,
      transparent 314deg, rgba(255, 205, 128, .2) 322deg, transparent 330deg,
      transparent 340deg, rgba(255, 190, 106, .14) 346deg, transparent 354deg,
      transparent 360deg),
    /* Raio 2 — mais estreito, ângulos ligeiramente deslocados */
    conic-gradient(from 8deg at var(--sun-x) var(--sun-y),
      transparent 0deg, rgba(255, 196, 118, .15) 20deg, transparent 27deg,
      transparent 40deg, rgba(255, 186, 98, .1) 46deg, transparent 53deg,
      transparent 68deg, rgba(255, 200, 122, .12) 74deg, transparent 81deg,
      transparent 92deg, rgba(255, 180, 92, .09) 100deg, transparent 107deg,
      transparent 282deg, rgba(255, 194, 112, .12) 290deg, transparent 297deg,
      transparent 308deg, rgba(255, 202, 124, .14) 316deg, transparent 323deg,
      transparent 334deg, rgba(255, 188, 104, .1) 340deg, transparent 347deg,
      transparent 360deg),
    /* Névoa difusa ao redor do sol — base dos raios */
    radial-gradient(ellipse 70% 55% at var(--sun-x) var(--sun-y),
      rgba(255, 200, 120, .26) 0%,
      rgba(255, 178, 92, .13) 34%,
      transparent 62%);
  filter: blur(5px);
  animation: godRaysPulse 22s ease-in-out infinite;
  transition: opacity .4s ease;
}
/* Segunda leva de raios, dessincronizada: aparecem e desaparecem em
   pontos ligeiramente diferentes — "respiração" sem cara de loop */
.hero__godrays::after {
  content: "";
  position: absolute; inset: 0;
  background:
    conic-gradient(from 0deg at var(--sun-x) var(--sun-y),
      transparent 0deg, rgba(255, 206, 132, .10) 16deg, transparent 24deg,
      transparent 40deg, rgba(255, 190, 108, .07) 48deg, transparent 56deg,
      transparent 72deg, rgba(255, 202, 126, .08) 80deg, transparent 88deg,
      transparent 300deg, rgba(255, 194, 114, .07) 306deg, transparent 313deg,
      transparent 330deg, rgba(255, 200, 122, .09) 337deg, transparent 344deg,
      transparent 360deg);
  filter: blur(10px);
  opacity: 0;
  animation: godRaysDrift 27s ease-in-out infinite;
}
@keyframes godRaysPulse {
  0%   { opacity: calc(var(--sun-opacity) * .85); transform: scale(1) rotate(0deg); filter: blur(5px); }
  25%  { opacity: var(--sun-opacity); transform: scale(1.01) rotate(.3deg); filter: blur(4px); }
  50%  { opacity: calc(var(--sun-opacity) * .92); transform: scale(1.02) rotate(-.2deg); filter: blur(6px); }
  75%  { opacity: var(--sun-opacity); transform: scale(1.005) rotate(.15deg); filter: blur(4.5px); }
  100% { opacity: calc(var(--sun-opacity) * .85); transform: scale(1) rotate(0deg); filter: blur(5px); }
}
@keyframes godRaysDrift {
  0%   { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
  18%  { opacity: calc(var(--sun-opacity) * .8); transform: translate(5px, -4px) scale(1.015) rotate(.5deg); }
  40%  { opacity: calc(var(--sun-opacity) * .3); transform: translate(-8px, 3px) scale(1.03) rotate(-.4deg); }
  64%  { opacity: calc(var(--sun-opacity) * .85); transform: translate(3px, -6px) scale(1.02) rotate(.3deg); }
  85%  { opacity: calc(var(--sun-opacity) * .25); transform: translate(-5px, 5px) scale(1.01) rotate(-.2deg); }
  100% { opacity: 0; transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* Vaza-luz: glow quente que escapa da borda esquerda da foto
   para o fundo bege — integra imagem ao layout (100-250px) */
.hero__light-leak {
  position: absolute;
  top: 10%; right: 42%;
  width: clamp(100px, 22vw, 260px); height: 55%;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to left,
      rgba(255, 185, 100, .42) 0%,
      rgba(255, 165, 80, .24) 30%,
      rgba(255, 150, 70, .12) 60%,
      transparent 100%);
  filter: blur(18px);
  opacity: var(--sun-opacity);
  animation: leakBreath 18s ease-in-out infinite;
  transition: opacity .4s ease;
}
@keyframes leakBreath {
  0%, 100% { opacity: var(--sun-opacity); transform: translateX(0); }
  50%      { opacity: calc(var(--sun-opacity) * .78); transform: translateX(-8px); }
}

/* Canvas atmosférico — partículas de poeira com profundidade */
#hero-canvas {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: calc(var(--sun-opacity));
  transition: opacity .4s ease;
}

/* Canvas das raízes — fixo sobre TODA a jornada (copa → subsolo → raiz).
   Fica acima dos fundos opacos das seções e abaixo do conteúdo
   (containers z-2): as raízes surgem e crescem conforme a descida,
   e o canvas de pulsos desenha os feixes de luz que as percorrem. */
#roots-canvas,
#roots-pulses-canvas {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
}

/* Luz quente do pôr do sol — clima ameno, banha a cena toda,
   sensação de estar olhando o horizonte de frente */
.hero__luz {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Brilho forte ao redor do sol real da fotografia */
    radial-gradient(ellipse 78% 60% at var(--sun-x) var(--sun-y),
      rgba(255, 195, 100, .85) 0%,
      rgba(255, 158, 62, .46) 35%,
      transparent 60%),
    /* Brilho na linha do horizonte — faixa quente onde céu encontra chão */
    radial-gradient(ellipse 110% 18% at 50% 46%,
      rgba(255, 168, 70, .56) 0%,
      rgba(255, 140, 55, .28) 40%,
      transparent 72%),
    /* Wash diagonal âmbar — luz envolvente vindo do sol */
    linear-gradient(120deg,
      rgba(255, 172, 68, .46) 0%,
      rgba(255, 198, 118, .26) 34%,
      rgba(255, 210, 130, .14) 52%,
      transparent 68%),
    /* Aquecimento na base — calor do chão refletindo */
    linear-gradient(to top,
      rgba(255, 180, 95, .3) 0%,
      rgba(255, 200, 115, .16) 20%,
      transparent 45%);
  mix-blend-mode: overlay;
  opacity: calc(var(--sun-opacity));
  animation: luzBreath 24s ease-in-out infinite;
  transition: opacity .4s ease;
}
@keyframes luzBreath {
  0%, 100% { opacity: calc(var(--sun-opacity) * .95); }
  40%      { opacity: calc(var(--sun-opacity) * 1.02); }
  70%      { opacity: calc(var(--sun-opacity) * .9); }
}

/* Sol do pôr do sol — orbe pulsante atrás do selo da logo,
   com halo alaranjado amplo, desvanecendo ao descer */
.hero__sun {
  position: absolute;
  top: calc(var(--nav-h) + 1rem);
  right: max(1.25rem, 4.5vw);
  width: clamp(88px, 10.5vw, 136px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%,
    rgba(255, 250, 228, .98) 0%,
    rgba(255, 224, 150, .75) 30%,
    rgba(255, 178, 84, .4) 52%,
    transparent 78%);
  box-shadow:
    0 0 50px 22px rgba(255, 210, 120, .6),
    0 0 130px 65px rgba(255, 170, 80, .38);
  opacity: calc(.95 * var(--sun-opacity));
  animation: sunPulse 8s ease-in-out infinite;
  transition: opacity .4s ease;
  will-change: transform, opacity;
}
.hero__sun::before {
  content: "";
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 180, 90, .4) 0%,
    rgba(255, 150, 60, .16) 45%,
    transparent 72%);
  mix-blend-mode: screen;
  animation: sunHalo 8s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 50px 22px rgba(255, 210, 120, .6),
      0 0 130px 65px rgba(255, 170, 80, .38);
  }
  50% {
    transform: scale(1.045);
    box-shadow:
      0 0 58px 26px rgba(255, 216, 130, .66),
      0 0 148px 72px rgba(255, 175, 85, .44);
  }
}
@keyframes sunHalo {
  0%, 100% { opacity: .78; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.06); }
}



.hero__inner { position: relative; z-index: 2; max-width: 880px; padding: 0; }

/* Moldura da foto — aparece só no desktop (no mobile a foto é o fundo) */
.hero__foto { display: none; }
.hero h1 {
  margin: 1.1rem 0 0;
  font-size: clamp(2.35rem, 5.6vw, 4.15rem);
  max-width: 18ch;
  color: #0A1E15; /* verde quase-preto, sem sombra: nítido */
}
.hero h1 em { color: var(--gold-deep); }
.hero__rule {
  width: 76px; height: 3px; border-radius: 2px; margin: 1.4rem 0 0;
  background: linear-gradient(to right, var(--gold), rgba(183, 146, 74, .15));
}
.hero__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: #262D27; max-width: 620px;
  margin-top: 1.15rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.hero__nota {
  margin-top: 1rem; font: 500 .85rem/1 var(--font-mono); color: #333B34;
  letter-spacing: .04em;
}

/* Emblema circular da logo — selo vivo flutuando sobre o céu */
.hero__emblema-wrap {
  position: absolute;
  top: calc(var(--nav-h) + 1.5rem);
  right: max(1.25rem, 5vw);
  width: clamp(76px, 9vw, 120px);
  aspect-ratio: 1;
  z-index: 3;
  animation: emblemaFlutua 7s ease-in-out infinite;
  will-change: transform;
}
.hero__emblema-wrap::before {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1.5px dashed rgba(183, 146, 74, .45);
  border-radius: 50%;
  animation: anelGira 26s linear infinite;
}
.hero__emblema {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-bright);
  box-shadow:
    0 0 0 6px rgba(252, 250, 243, .55),
    0 0 0 7px rgba(183, 146, 74, .5),
    0 14px 34px rgba(23, 61, 45, .35);
  transform: rotate(-7deg);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero__emblema:hover {
  transform: rotate(-7deg) scale(1.06);
  box-shadow:
    0 0 0 6px rgba(252, 250, 243, .65),
    0 0 0 7px rgba(183, 146, 74, .6),
    0 18px 40px rgba(23, 61, 45, .4);
}
@keyframes emblemaFlutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes anelGira {
  to { transform: rotate(360deg); }
}

/* Indicador de descida — convite para ir até a raiz */
.hero__cue {
  position: absolute; bottom: 1.7rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  z-index: 2; text-decoration: none;
}
.hero__cue-icon {
  width: 26px; height: 44px; position: relative;
  border: 2px solid var(--gold-deep); border-radius: 999px;
  opacity: .8;
}
.hero__cue-icon::after {
  content: ""; position: absolute; top: 8px; left: 50%;
  width: 4px; height: 8px; border-radius: 2px;
  background: var(--gold-deep);
  animation: cueDown 1.9s ease-in-out infinite;
}
.hero__cue-label {
  font: 500 .68rem/1 var(--font-mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-deep);
}
@keyframes cueDown {
  0% { transform: translate(-50%, 0); opacity: 1; }
  72% { transform: translate(-50%, 16px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

.nav__logo-img {
  height: 48px; width: auto;
  border-radius: 50%;
  transition: transform .3s ease, filter .3s ease;
}
.nav__logo:hover .nav__logo-img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 7px rgba(183, 146, 74, .55));
}
@keyframes logoFlutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ============================================================
   ZONA 1 — TRANSIÇÃO (da copa ao solo)
   ============================================================ */
.secao--transicao {
  background: linear-gradient(to bottom,
    var(--ivory) 0%,
    var(--sand) 30%,
    #D9C9A8 62%,
    #C4AE8A 100%
  );
}

/* ============================================================
   ZONA 2 — SUBSOLO (a terra que guarda os padrões)
   ============================================================ */
.secao--subsolo {
  background: linear-gradient(to bottom,
    #C4AE8A 0%,
    #9C825F 16%,
    #6E5740 38%,
    #46382A 62%,
    #3A3122 100%
  );
  color: var(--on-dark);
}
.secao--subsolo h2 { color: var(--on-dark); }
.secao--subsolo .section-head .lead { color: var(--on-dark-muted); }

/* Brilho dourado que começa a emergir da raiz */
.secao--subsolo::before {
  content: "";
  position: absolute;
  bottom: -180px; left: 50%; transform: translateX(-50%);
  width: 720px; height: 460px;
  background: radial-gradient(circle at 50% 100%,
    rgba(183, 146, 74, calc(.22 * var(--root-glow))) 0%,
    rgba(183, 146, 74, .06) 45%,
    transparent 70%
  );
  pointer-events: none;
  transition: opacity .3s ease;
}

/* ============================================================
   ZONA 3 — SUBSOLO PROFUNDO
   ============================================================ */
.secao--profundo {
  background:
    repeating-linear-gradient(to bottom, rgba(243, 238, 223, .025) 0 1px, transparent 1px 96px),
    linear-gradient(to bottom,
      #3A3122 0%,
      #2C251A 34%,
      #241E14 100%
    );
  color: var(--on-dark);
}
.secao--profundo h2 { color: var(--on-dark); }
.secao--profundo .section-head .lead { color: var(--on-dark-muted); }

/* ============================================================
   ZONA 4 — RAIZ TRANSFORMADORA (tudo começa a melhorar)
   ============================================================ */
.secao--transformadora {
  background: linear-gradient(to bottom,
    #241E14 0%,
    #3A2B1A 42%,
    #4C3620 100%
  );
  color: var(--on-dark);
}
.secao--transformadora h2 { color: var(--on-dark); }
.secao--transformadora .section-head .lead { color: var(--on-dark-muted); }

/* Glow dourado que cresce com o scroll — a raiz floresce */
.secao--transformadora::after,
.secao--florescencia::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 60%,
    rgba(206, 138, 64, calc(.18 * var(--warm, 0))) 0%,
    transparent 70%
  );
  pointer-events: none;
  transition: opacity .3s ease;
}

/* ============================================================
   ZONA 5 — RAIZ FLORESCENDO (o Recanto)
   ============================================================ */
.secao--florescencia {
  background: linear-gradient(to bottom,
    #4C3620 0%,
    #3E2D19 55%,
    #302212 100%
  );
  color: var(--on-dark);
}
.secao--florescencia h2 { color: var(--on-dark); }
.secao--florescencia .section-head .lead { color: var(--on-dark-muted); }

/* ============================================================
   ZONA 6 — A GUIA (Luciana)
   ============================================================ */
.secao--guia {
  background: linear-gradient(to bottom,
    #302212 0%,
    #362716 50%,
    #2C1F10 100%
  );
  color: var(--on-dark);
}
.secao--guia h2 { color: var(--on-dark); }
.secao--guia .duas-colunas p { color: var(--on-dark-muted); }

/* ============================================================
   ZONA 7 — SUBSOLO CALMO (FAQ)
   ============================================================ */
.secao--calmo {
  background: linear-gradient(to bottom, #2C1F10 0%, #281B0D 100%);
  color: var(--on-dark);
}
.secao--calmo h2 { color: var(--on-dark); }

/* ============================================================
   ZONA 8 — RAIZ BRILHANTE (transformação final)
   ============================================================ */
.secao--raiz-brilhante {
  background: linear-gradient(to bottom,
    #281B0D 0%,
    #1F1408 40%,
    #150D05 100%
  );
  color: var(--on-dark);
  text-align: center;
}
.secao--raiz-brilhante h2 { color: var(--on-dark); }
.secao--raiz-brilhante::before {
  content: "";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(820px, 100%); height: 820px;
  background: radial-gradient(circle,
    rgba(206, 138, 64, calc(.2 * var(--root-glow))) 0%,
    rgba(206, 138, 64, .07) 42%,
    transparent 72%
  );
  pointer-events: none;
  animation: rootGlow 4.5s ease-in-out infinite;
  transition: opacity .3s ease;
}
@keyframes rootGlow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

.secao--final { text-align: center; }
.secao--final .hero__cta { justify-content: center; margin-top: 2.4rem; }
.secao--final .ghost { left: 0; right: 0; text-align: center; }
.secao--final h2 { max-width: 680px; margin-inline: auto; margin-bottom: 1.4rem; }
.cta-final__texto { max-width: 620px; margin: 0 auto 2.2rem; color: var(--on-dark-muted); }
.cta-final__tel {
  font: 500 1rem/1 var(--font-mono); color: var(--gold-bright); letter-spacing: .06em;
  margin-top: 1.5rem;
}
.secao--final .cta-final__tel::before {
  content: ""; display: block; width: 48px; height: 1px;
  background: rgba(203, 167, 101, .4); margin: 0 auto 1.5rem;
}

/* ---------- RFA layout ---------- */
.rfa-layout {
  display: grid; grid-template-columns: 320px 1fr;
  gap: 3rem; align-items: start; margin-bottom: 1.5rem;
}
.rfa-foto {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-dark);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.rfa-foto img { width: 100%; height: auto; display: block; }
.rfa-conteudo > *:first-child { margin-top: 0; }
.rfa-conteudo .duas-colunas p { color: var(--on-dark-muted); }

/* ---------- Lista de sinais (clara na transição, clara-invertida no escuro) ---------- */
.lista-sinais {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .7rem 2rem;
}
.lista-sinais li { position: relative; padding-left: 1.9rem; color: var(--ink); }
.lista-sinais li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .95em; height: .95em; border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle at center, var(--gold) 0 2.2px, transparent 2.6px);
}
.secao--subsolo .lista-sinais li,
.secao--profundo .lista-sinais li,
.secao--guia .lista-sinais li { color: var(--on-dark); }
.secao--subsolo .lista-sinais li::before,
.secao--profundo .lista-sinais li::before,
.secao--guia .lista-sinais li::before {
  border-color: var(--gold-bright);
  background: radial-gradient(circle at center, var(--gold-bright) 0 2.2px, transparent 2.6px);
}

/* ---------- Trilha (transição: descer até a raiz) ---------- */
.trilha {
  margin: 0 0 2.6rem; position: relative;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgba(23, 61, 45, .18);
}
.trilha img {
  width: 100%; height: clamp(300px, 46vw, 460px); object-fit: cover;
  object-position: center 30%; display: block;
}
.trilha figcaption {
  font: 500 .78rem/1.4 var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-deep);
  padding: .9rem 1.2rem; background: var(--surface);
  border-top: 1px solid var(--line);
}

.fecho {
  font: 600 clamp(1.15rem, 2vw, 1.35rem)/1.5 var(--font-title);
  color: var(--forest); margin: 0;
}
.secao--subsolo .fecho,
.secao--transformadora .fecho,
.secao--florescencia .fecho,
.secao--profundo .fecho { color: var(--on-dark); }

/* ---------- Duas colunas / chips / citação ---------- */
.duas-colunas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.2rem; margin-bottom: 2.2rem; align-items: start;
}
.duas-colunas p { margin: 0; }
.chips { list-style: none; margin: 0 0 2.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li {
  font: 500 .95rem/1 var(--font-body); color: var(--on-dark);
  padding: .6rem 1.1rem; border-radius: 999px;
  background: rgba(22, 15, 8, .5); border: 1px solid var(--line-dark);
  transition: border-color .3s ease, transform .3s ease;
}
.chips li:hover { border-color: rgba(183, 146, 74, .6); transform: translateY(-2px); }
.citacao {
  margin: 0; padding: 1.6rem 1.9rem; border-left: 3px solid var(--gold-bright);
  background: rgba(22, 15, 8, .5); border-radius: 0 var(--radius) var(--radius) 0;
}
.citacao p {
  font: 600 clamp(1.2rem, 2.2vw, 1.5rem)/1.45 var(--font-title);
  color: var(--on-dark); margin: 0;
}

/* ---------- Cards ---------- */
.grade-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem; margin-bottom: 2.4rem;
}
.card {
  background: rgba(22, 15, 8, .5); border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 1.6rem; height: 100%;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.card h3 { margin-bottom: .65rem; color: var(--on-dark); }
.card h3::before {
  content: "—"; display: inline-block; color: var(--gold-bright); margin-right: .5rem;
}
.card p { margin: 0; color: var(--on-dark-muted); }
.card:hover { border-color: rgba(183, 146, 74, .55); background: rgba(22, 15, 8, .72); }

/* ---------- Faixas ---------- */
.faixa {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.2rem; padding: 2.2rem; border-radius: var(--radius);
  background: rgba(22, 15, 8, .45); border: 1px solid var(--line-dark);
  align-items: start;
}
.faixa__texto p:not(.kicker) { margin-bottom: 1rem; color: var(--on-dark-muted); }
.faixa__texto h3 { color: var(--on-dark); margin-bottom: .65rem; }
.faixa__texto .btn { margin-top: .8rem; }
.faixa__lista { font: 500 .92rem/1.6 var(--font-mono); color: var(--gold-bright); }
.nota-legal { font: 400 .85rem/1.6 var(--font-body); color: var(--dim); margin-top: 1.1rem; }
.secao--subsolo .nota-legal,
.secao--profundo .nota-legal,
.secao--transformadora .nota-legal,
.secao--florescencia .nota-legal { color: var(--on-dark-muted); }

/* ---------- Passos ---------- */
.passos { list-style: none; margin: 0 0 2.2rem; padding: 0; }
.passos li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line-dark);
  align-items: start;
}
.passos li:last-child { border-bottom: none; }
.passos__num {
  font: 700 clamp(1.6rem, 3vw, 2.2rem)/1 var(--font-mono);
  color: var(--gold-bright); padding-top: .15rem;
}
.passos h3 { margin-bottom: .35rem; color: var(--on-dark); }
.passos p { margin: 0; color: var(--on-dark-muted); }

/* ---------- Sobre: retrato da terapeuta ---------- */
.sobre-layout {
  display: grid; grid-template-columns: 300px 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
.retrato {
  margin: 0; position: relative;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-dark);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.retrato::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 42, 31, .45), transparent 42%);
  pointer-events: none;
}
.retrato img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%;
}
.retrato figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1rem 1.1rem;
  font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-dark);
}
.retrato figcaption::before {
  content: "—"; display: inline-block; color: var(--gold-bright); margin-right: .45rem;
}

/* ---------- Formação ---------- */
.formacao {
  margin-top: 2.4rem; padding: 2rem; border-radius: var(--radius);
  background: rgba(22, 15, 8, .45); border: 1px solid var(--line-dark);
}
.formacao .lista-sinais { margin-bottom: 0; }

/* ---------- Galeria (O Recanto em imagens) ---------- */
.galeria { margin-top: 2.8rem; }
.galeria__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.galeria-item {
  margin: 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line-dark); background: rgba(22, 15, 8, .45);
  transition: border-color .3s ease, transform .3s ease;
}
.galeria-item:hover {
  border-color: rgba(183, 146, 74, .55); transform: translateY(-3px);
}
.galeria-item img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  display: block;
}
.galeria-item figcaption {
  padding: .65rem .8rem;
  font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-muted);
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .9rem; }
.faq-item {
  background: rgba(22, 15, 8, .45); border: 1px solid var(--line-dark);
  border-radius: var(--radius); padding: .4rem 1.4rem;
  transition: border-color .3s ease, background .3s ease;
}
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font: 600 1.05rem/1.5 var(--font-title); color: var(--on-dark);
  padding: 1rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font: 500 1.4rem/1 var(--font-mono); color: var(--gold-bright);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 1.1rem; padding-right: 1.5rem; color: var(--on-dark-muted); }
.faq-item[open] { border-color: rgba(183, 146, 74, .55); background: rgba(22, 15, 8, .6); }

/* ---------- Footer ---------- */
.footer {
  background: #0D0803; color: var(--on-dark-muted);
  padding: 3.2rem 0 1.6rem;
}
.footer__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--line-dark);
}
.footer__marca { font: 700 1.4rem/1.2 var(--font-title); color: var(--on-dark); margin-bottom: .5rem; }
.footer__marca em { color: var(--gold-bright); }
.footer__tagline { color: var(--on-dark-muted); margin: 0; }
.footer__contato p { margin: 0 0 .4rem; font-size: .95rem; }
.footer__contato a { color: var(--gold-bright); text-decoration: none; }
.footer__contato a:hover { text-decoration: underline; }
.footer__nota { padding-top: 1.4rem; }
.footer__nota p { font-size: .82rem; color: rgba(201, 207, 194, .7); margin: 0 0 .3rem; }
.footer__credito { margin-top: 1rem !important; }
.footer__credito strong { color: var(--gold-bright); font-weight: 600; }

/* ============================================================
   MEDIDOR DE SOLO — a profundidade da raiz
   Um corte vertical do solo: areia → terra → raiz dourada.
   ============================================================ */
.medidor {
  position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; align-items: center;
  gap: .6rem; opacity: 0; transition: opacity .5s ease;
  /* Painel escuro: visível sobre fundos claros e escuros */
  background: rgba(10, 26, 18, .78);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: .85rem .55rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.medidor.is-ativo { opacity: 1; }

.medidor__valor {
  font: 700 1.05rem/1 var(--font-mono); color: var(--gold-bright);
  letter-spacing: -.02em; display: flex; align-items: baseline; gap: .2rem;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  min-width: 48px; /* "80 cm" — largura constante, sem salto entre dígitos */
}
.medidor__unidade { font-size: .68rem; color: var(--on-dark-muted); }

.medidor__trilho {
  width: 16px; height: 230px; border-radius: 9px; position: relative;
  border: 1px solid rgba(243, 238, 223, .25);
  overflow: hidden;
  /* Corte de solo: areia clara no topo → terra → raiz profunda */
  background: linear-gradient(to bottom,
    #E9D3A1 0%,
    #D4B87E 16%,
    #B39466 30%,
    #8A6E4C 46%,
    #5C4A32 62%,
    #4A3520 78%,
    #2A1D0F 92%,
    #150D05 100%
  );
  box-shadow: inset 0 0 0 1px rgba(15, 42, 31, .4), 0 8px 24px rgba(0, 0, 0, .3);
}
/* Gota de energia descendo pelo solo — brilha ao chegar na raiz */
.medidor__marca {
  position: absolute; left: 50%; top: 0;
  width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,
    #FFF3C9 0%,
    var(--gold-bright) 52%,
    #9A7424 100%);
  border: 2px solid rgba(255, 244, 205, .9);
  box-shadow:
    0 0 10px rgba(212, 175, 55, .95),
    0 0 24px rgba(183, 146, 74, .55),
    inset 0 -2px 4px rgba(90, 60, 10, .35);
  transition: box-shadow .3s ease;
}
.medidor__fase {
  font: 600 .68rem/1 var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-bright);
  min-width: 68px; /* o maior rótulo ("FLORESCER") — largura constante */
  text-align: center;
}

/* ---------- Cursor glow (desktop) ---------- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 320px; height: 320px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle,
    rgba(203, 167, 101, .10) 0%,
    rgba(183, 146, 74, .05) 40%,
    transparent 70%);
  transform: translate(-400px, -400px);
  opacity: 0; transition: opacity .4s ease;
}
.cursor-glow.is-ativo { opacity: 1; }

/* ---------- Tilt cards (desktop) ---------- */
.tilt-card { transition: transform .18s ease, border-color .3s ease, background .3s ease; will-change: transform; }

/* Barra fina de progresso (topo, mobile/tablet) */
.progresso-topo {
  position: fixed; inset-inline: 0; top: 0; z-index: 60; height: 4px;
  background: rgba(15, 42, 31, .35);
}
.progresso-topo span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(to right, var(--gold), var(--gold-bright));
  transform-origin: left; transform: scaleX(0);
}

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1200px) {
  .medidor { right: .9rem; }
}

@media (max-width: 1100px) {
  .medidor { display: none; }
}

@media (max-width: 900px) {
  .ghost { font-size: clamp(3rem, 18vw, 5rem); top: .5rem; }
  .hero__godrays { filter: blur(4px); opacity: calc(var(--sun-opacity) * .5); }
  .hero__light-leak { width: 80px; right: 44%; filter: blur(14px); opacity: calc(var(--sun-opacity) * .5); }
  .hero__copa::before, .hero__copa::after { display: none; }
  .hero__sun { opacity: calc(.6 * var(--sun-opacity)); }
  .hero__luz { opacity: calc(.72 * var(--sun-opacity)); }
  .hero__emblema-wrap { display: none; } /* no mobile a logo fica na nav */

  /* Botões: nunca quebram linha; CTAs empilham em coluna cheia */
  .btn { white-space: nowrap; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; width: 100%; }
  .hero__inner { padding: 0; }
  .hero__cue { display: none; }
  .hero h1 { text-shadow: 0 1px 8px rgba(247, 243, 232, .6); }
  .hero__lead { text-shadow: 0 1px 6px rgba(247, 243, 232, .5); }

  /* Nav vira drawer */
  html.js .nav__toggle { display: inline-flex; }
  html.js .nav__links {
    position: fixed; inset-inline: 0; top: var(--nav-h); z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--forest); border-bottom: 1px solid var(--line-dark);
    padding: .6rem 1.25rem 1.4rem; display: none;
  }
  html.js .nav__links.is-open { display: flex; }
  html.js .nav__links a:not(.btn) { padding: .8rem 0; font-size: 1rem; border-bottom: 1px solid var(--line-dark); }
  html.js .nav__links .btn { margin-top: 1rem; }

  .nav { backdrop-filter: none; }
  .nav__logo-img { height: 36px; }
  .hero__bg-img { opacity: calc(.38 + .14 * var(--sun-opacity)); }
  /* Scrim extra no mobile — garante legibilidade do texto sobre a foto */
  .hero__bg-overlay::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(to right,
        rgba(252, 250, 243, .72) 0%,
        rgba(252, 250, 243, .38) 35%,
        transparent 58%),
      linear-gradient(to bottom,
        rgba(247, 243, 232, .1) 0%,
        rgba(247, 243, 232, .08) 30%,
        rgba(247, 243, 232, .52) 70%,
        rgba(247, 243, 232, .72) 100%);
  }
  .rfa-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .rfa-foto { max-width: 100%; }
  .sobre-layout { grid-template-columns: 1fr; }
  .retrato { max-width: 320px; }

  /* Jornada mais leve no mobile: menos fragmentos e deslocamentos */
  .folha--dir, .ramificacao, .pedra--c { display: none; }
  .raiz-svg { height: 120%; opacity: calc(.1 + .2 * var(--root-vis, 0)); }
  .raiz-svg--quente { opacity: calc(.12 + .22 * var(--root-vis, 0)); }
  .sombra-folhagem { filter: blur(10px); opacity: .6; }
}

/* ============================================================
   DESKTOP: hero em duas colunas — texto + foto INTEIRA (pôr do sol
   e cavalos), já que cover num hero widescreen cortaria a imagem.
   ============================================================ */
@media (min-width: 901px) {
  /* Sem foto de fundo: o hero vira um pano marfim→areia atmosférico */
  .hero__bg { display: none; }
  .hero {
    background:
      radial-gradient(ellipse 62% 55% at 84% 0%, rgba(183, 146, 74, .16), transparent 62%),
      linear-gradient(115deg, var(--ivory) 0%, var(--sand) 58%, #D9C9A8 100%);
  }
  .hero__inner {
    display: grid;
    grid-template-columns: 1.05fr .9fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
    max-width: 1180px;
  }
  /* A foto EMERGE do pano: sem moldura, sem sombra dura — máscara
     dissolve as bordas (base + laterais) integrando-a à página. */
  .hero__foto {
    display: block;
    margin: 0;
    position: relative;
    height: min(78vh, 720px);
  }
  .hero__foto-moldura {
    position: relative;
    height: 100%;
    overflow: hidden;
    will-change: transform;
    -webkit-mask-image:
      linear-gradient(to top, black 86%, transparent 100%),
      linear-gradient(to bottom, black 55%, transparent 97%),
      linear-gradient(to left, black 76%, transparent 100%),
      linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to top, black 86%, transparent 100%),
      linear-gradient(to bottom, black 55%, transparent 97%),
      linear-gradient(to left, black 76%, transparent 100%),
      linear-gradient(to right, black 90%, transparent 100%);
    mask-composite: intersect;
  }
  .hero__foto-img {
    width: 100%;
    height: 112%; /* folga para o zoom não expor bordas */
    object-fit: cover;
    object-position: center 30%; /* mantém o céu no topo e os cavalos no meio */
    animation: heroKenBurns 32s ease-in-out infinite alternate;
    filter: saturate(1.07) brightness(1.02);
    will-change: transform;
  }
  @keyframes heroKenBurns {
    from { transform: scale(1.015); }
    to { transform: scale(1.075); }
  }
}

/* ============================================================
   CAMADAS DA JORNADA — fragmentos orgânicos em planos de
   parallax (perto/médio/distante). O conteúdo segue no z-2;
   as camadas atravessam seções criando continuidade espacial.
   ============================================================ */
.jornada-camadas {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
}
.jornada-camadas > * { position: absolute; }
[data-depth] { will-change: transform; }

/* Folhas — silhuetas desfocadas de primeiro plano, balanço dessincronizado.
   O sway usa a propriedade `rotate` para não conflitar com o translateY
   do parallax (aplicado via JS em `transform`). */
.folha {
  fill: currentColor;
  color: rgba(23, 61, 45, .16);
  filter: blur(1.2px);
  transform-origin: 50% 0%;
  animation: folhaBalanca var(--sway-dur, 11s) ease-in-out var(--sway-delay, 0s) infinite alternate;
}
.folha--dir { color: rgba(102, 122, 69, .18); }
.secao--transicao .folha { color: rgba(23, 61, 45, .13); }
@keyframes folhaBalanca {
  from { rotate: -2.4deg; }
  to   { rotate: 2.6deg; }
}
.galho {
  fill: none; stroke: currentColor;
  color: rgba(23, 61, 45, .14);
  filter: blur(.8px);
  transform-origin: 50% 100%;
  animation: galhoBalanca var(--sway-dur, 14s) ease-in-out var(--sway-delay, 0s) infinite alternate;
}
@keyframes galhoBalanca {
  from { rotate: -1.2deg; }
  to   { rotate: 1.4deg; }
}

/* Sombras de folhagem — luz atravessando a copa ao entrar na árvore */
.sombra-folhagem {
  width: 46%; height: 34%;
  background:
    radial-gradient(ellipse 52% 44% at 30% 36%, rgba(23, 61, 45, .16), transparent 64%),
    radial-gradient(ellipse 42% 38% at 66% 30%, rgba(102, 122, 69, .14), transparent 60%),
    radial-gradient(ellipse 34% 30% at 48% 62%, rgba(23, 61, 45, .11), transparent 58%);
  filter: blur(14px);
}
.sombra-folhagem--dir { top: -6%; right: -8%; }
.sombra-folhagem--esq { top: 4%; left: -10%; opacity: .7; }

/* Linha do solo — a câmera atravessa a superfície: forma orgânica
   de terra (sem linha horizontal rígida) avançando sobre o fim da
   seção anterior. */
.linha-solo {
  position: absolute; left: 0; right: 0; top: 0;
  height: clamp(56px, 8vw, 96px);
  margin-top: calc(-.5 * clamp(56px, 8vw, 96px));
  z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, #C4AE8A 0%, #9C825F 45%, #6E5740 100%);
  clip-path: polygon(0 55%, 7% 45%, 15% 54%, 24% 42%, 33% 52%, 42% 40%, 51% 50%, 60% 42%, 69% 52%, 78% 44%, 87% 53%, 94% 45%, 100% 52%, 100% 100%, 0 100%);
  filter: blur(4px);
}

/* Formas verticais sutis — o tronco é percebido, não mostrado */
.tronco-sugerido {
  top: 0; bottom: 0; width: clamp(60px, 8vw, 120px);
  background: linear-gradient(to bottom, transparent 0%, rgba(58, 42, 26, .22) 28%, rgba(44, 32, 20, .28) 60%, transparent 100%);
  filter: blur(10px);
}
.tronco-sugerido--esq { left: 2%; }
.tronco-sugerido--dir { right: 3%; opacity: .8; }

/* Pequenas pedras do subsolo — profundidades distintas */
.pedra {
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: linear-gradient(145deg, rgba(122, 100, 72, .5), rgba(70, 55, 38, .32));
  filter: blur(1px);
}
.pedra--a { width: 34px; height: 22px; top: 34%; left: 18%; }
.pedra--b { width: 22px; height: 15px; top: 58%; right: 24%; }
.pedra--c { width: 46px; height: 28px; bottom: 12%; left: 8%; filter: blur(2px); opacity: .8; }
.pedra--d { width: 30px; height: 20px; top: 46%; right: 14%; }

/* Ramificação quase imperceptível no subsolo */
.ramificacao {
  fill: none; stroke: currentColor;
  color: rgba(143, 113, 74, .3);
  filter: blur(.6px);
}

/* Raízes contínuas — nascem numa seção e terminam 1-2 depois.
   O espelhamento usa a propriedade `scale` (independente do
   transform controlado pelo parallax). */
.raiz-svg {
  top: -12%;
  width: auto;
  /* Aparece suave e ganha intensidade conforme a descida (--root-vis via JS) */
  opacity: calc(.12 + .3 * var(--root-vis, 0));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 78%, transparent 100%);
}
.raiz-svg--espelhada { scale: -1 1; }
.raiz-svg--quente { opacity: calc(.14 + .34 * var(--root-vis, 0)); }

/* Brotos — os primeiros sinais de vida junto à raiz */
.broto {
  width: 42px;
  fill: rgba(140, 164, 96, .5);
  stroke: rgba(140, 164, 96, .5);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, calc(.3 * var(--root-glow, 0))));
}
.broto--final { width: 52px; }

/* Inversão térmica — quanto mais perto da raiz, mais quente e viva:
   lavagens âmbar/terracota crescem com --warm (atualizado via JS) */
.secao--transformadora::before,
.secao--florescencia::before,
.secao--guia::before,
.secao--calmo::before,
.secao--raiz-brilhante::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 60% at 22% 64%, rgba(207, 106, 58, calc(.12 * var(--warm, 0))), transparent 70%),
    radial-gradient(ellipse 60% 52% at 80% 30%, rgba(212, 175, 55, calc(.1 * var(--warm, 0))), transparent 72%);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__godrays, .hero__godrays::after, .secao--raiz-brilhante::before { animation: none; }
  .hero__light-leak, .hero__luz { animation: none; }
  /* Movimento contínuo some; composição, raízes e gradientes permanecem */
  .folha, .galho { animation: none; }
}