/* =========================================================================
   COQUETEL DAS HERDEIRAS
   Mundo: verde esmeralda como terra, dourado como única luz, arco como porta.
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* paleta pinada */
  --verde:        #0F4C45;
  --verde-fundo:  #0A3832;   /* profundidade / véus */
  --verde-borda:  #1C6156;
  --ouro:         #C8A45D;
  --ouro-texto:   #7A5D26;   /* dourado legível sobre claro (5.5:1) e sobre areia (5.1:1) */
  --ouro-claro:   #E0C88A;   /* dourado legível sobre verde (6:1) */
  --creme:        #F7F1E7;
  --cafe:         #2A1812;
  --areia:        #D8C3A5;
  --areia-fundo:  #EDE2CF;

  /* papéis */
  --fundo:        var(--creme);
  --tinta:        var(--cafe);
  --tinta-suave:  #5A423A;

  /* tipografia */
  --serifa: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --sans:   "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ritmo — escala 8 */
  --e1: 0.5rem;  --e2: 1rem;   --e3: 1.5rem;  --e4: 2rem;
  --e5: 3rem;    --e6: 4rem;   --e7: 6rem;    --e8: 8rem;
  --secao: clamp(4.5rem, 10vw, 9rem);

  --larg:         1200px;
  --larg-estreito: 720px;
  --margem: clamp(1.25rem, 5vw, 4rem);

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --raio: 2px;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--ouro) var(--verde-fundo);
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ouro-texto);
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

/* superfícies do navegador — parte do design, não default */
::selection { background: var(--ouro); color: var(--cafe); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--verde-fundo); }
::-webkit-scrollbar-thumb { background: var(--ouro-texto); border: 3px solid var(--verde-fundo); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ouro); }

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
  border-radius: var(--raio);
}
.secao--verde :focus-visible,
.secao--cafe :focus-visible,
.cabecalho :focus-visible,
.rodape :focus-visible { outline-color: var(--ouro-claro); }

.pular {
  position: absolute; left: var(--e2); top: -100px; z-index: 999;
  background: var(--ouro); color: var(--cafe);
  padding: 0.75rem 1.25rem; font: 500 0.8rem/1 var(--sans);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: top 0.2s var(--curva);
}
.pular:focus { top: var(--e2); }

/* ---------- 3. LAYOUT ---------- */
.int { width: 100%; max-width: var(--larg); margin-inline: auto; padding-inline: var(--margem); }
.int--estreito { max-width: var(--larg-estreito); }

.secao { padding-block: var(--secao); position: relative; }
.secao--claro { background: var(--creme); color: var(--cafe); }
.secao--areia { background: var(--areia-fundo); color: var(--cafe); }
.secao--cafe  { background: var(--cafe);  color: var(--creme); }
.secao--verde { background: var(--verde); color: var(--creme); }

/* filete dourado que separa toda seção sobre fundo escuro */
.secao--verde::before, .secao--cafe::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--ouro) 22%, var(--ouro) 78%, transparent);
  opacity: 0.5;
}

/* ---------- 4. TIPOGRAFIA ---------- */
.titulo {
  font-family: var(--serifa);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin-bottom: var(--e4);
}
.titulo--grande { font-size: clamp(2.3rem, 5.6vw, 4.2rem); }
.titulo--centro { text-align: center; }
.titulo em {
  font-style: italic;
  color: var(--ouro-texto);
  display: inline-block;
}
.secao--verde .titulo em, .secao--cafe .titulo em, .hero em { color: var(--ouro-claro); }

.sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 46ch;
  margin-bottom: var(--e4);
}
.secao--verde .sub, .secao--cafe .sub { color: var(--areia); }

.prosa { max-width: 62ch; }
.prosa p { margin-bottom: var(--e3); font-size: clamp(1rem, 1.3vw, 1.075rem); }
.prosa p:last-child { margin-bottom: 0; }
.prosa em { font-style: italic; color: var(--ouro-claro); }
.secao--claro .prosa em { color: var(--ouro-texto); }
.prosa__destaque {
  font-family: var(--serifa);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important;
  line-height: 1.3;
  color: var(--ouro-claro);
  padding-left: var(--e3);
  border-left: 1px solid var(--ouro);
  margin-block: var(--e4) var(--e4);
}

/* ---------- 5. BOTÕES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px;
  padding: 0.9rem 2.1rem;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--raio);
  cursor: pointer;
  transition: background-color 0.35s var(--curva), color 0.35s var(--curva),
              border-color 0.35s var(--curva), transform 0.35s var(--curva);
}

/* .btn--ouro — pill dourado premium.
   Estrutura em três camadas empilhadas por z-index:
   ::before (-2) = halo externo pulsante, fora do botão;
   próprio botão (0) = gradiente champagne metálico + texto;
   ::after (1) = filete claro que percorre a borda em conic-gradient,
                 mascarado só na fatia da borda com padding-box/border-box.
   O conjunto lê como reflexo, não como neon — o brilho encosta na cor
   dominante da paleta em vez de saturar. */
.btn--ouro {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  min-height: 56px; padding: 0.95rem 2.4rem;
  color: var(--cafe);
  border: 1px solid transparent;
  background:
    linear-gradient(135deg,
      #B8933F 0%,
      #E7CE86 22%,
      #C8A45D 50%,
      #E7CE86 78%,
      #B8933F 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,241,205,0.55),
    inset 0 -1px 0 rgba(90,60,15,0.18),
    0 6px 18px rgba(200,164,93,0.28);
  transition:
    transform 0.3s var(--curva),
    box-shadow 0.3s var(--curva),
    background-position 0.8s var(--curva);
}
.btn--ouro::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: inherit; z-index: -2; pointer-events: none;
  background: radial-gradient(closest-side, rgba(231,206,134,0.55), rgba(200,164,93,0) 72%);
  opacity: 0.75; filter: blur(6px);
  animation: btn-halo 3.6s ease-in-out infinite;
}
/* Filete de luz que percorre a borda.
   Truque: o pseudo-element é estático (nada rotaciona), mas o ângulo de
   partida do conic-gradient é animado via @property. A máscara com
   padding-box + border-box xor recorta só a fatia da borda — o gradiente
   gira dentro dela sem vazar nos cantos do pill. */
@property --btn-sweep {
  syntax: "<angle>"; inherits: false; initial-value: 0deg;
}
.btn--ouro::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--btn-sweep),
    rgba(255,244,214,0) 0deg,
    rgba(255,244,214,0) 235deg,
    rgba(255,244,214,0.85) 275deg,
    rgba(255,255,255,1) 295deg,
    rgba(255,244,214,0.85) 315deg,
    rgba(255,244,214,0) 355deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: btn-sweep 3.6s linear infinite;
}
.btn--ouro:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,241,205,0.7),
    inset 0 -1px 0 rgba(90,60,15,0.18),
    0 10px 26px rgba(200,164,93,0.42);
}
.btn--ouro:hover::before { opacity: 1; }
.btn--ouro:active { transform: translateY(0); }

@keyframes btn-halo {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.03); }
}
@keyframes btn-sweep {
  to { --btn-sweep: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--ouro { background-position: 0% 50%; }
  .btn--ouro::before,
  .btn--ouro::after { animation: none; }
}

.btn--fantasma { background: transparent; color: var(--ouro-claro); border-color: rgba(200,164,93,0.55); }
.btn--fantasma:hover { background: var(--ouro); color: var(--cafe); border-color: var(--ouro); }

.btn--texto {
  background: transparent; color: var(--creme); padding-inline: 0.25rem;
  border-bottom: 1px solid rgba(247,241,231,0.35); border-radius: 0; min-height: 44px;
}
.btn--texto:hover { color: var(--ouro-claro); border-bottom-color: var(--ouro-claro); }

.btn--largo { width: 100%; }

/* ---------- 6. MARCA ---------- */
.marca { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.marca__ramo { width: 40px; height: 18px; flex: none; fill: var(--ouro); stroke: var(--ouro); stroke-width: 1.1; }
.marca__ramo path[d^="M1"], .marca__ramo path[d^="M43"], .marca__ramo path[d^="M22 10"] { fill: none; }
.marca__nome {
  font-family: var(--serifa); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--creme);
  line-height: 1; white-space: nowrap;
}
.marca__nome-b { color: var(--ouro); }

/* ---------- 7. WHATSAPP FLUTUANTE ---------- */
/* Fica acima da barra fixa do celular; no desktop a barra some e ele desce. */
.zap {
  position: fixed; right: clamp(0.9rem, 4vw, 2rem); z-index: 95;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--verde);
  border: 2px solid var(--ouro);
  box-shadow: 0 4px 12px rgba(10,24,18,0.34);
  transition: background-color 0.3s var(--curva), transform 0.3s var(--curva),
              box-shadow 0.3s var(--curva);
}
.zap svg { width: 28px; height: 28px; fill: var(--ouro-claro); }
.zap:hover { background: var(--verde-fundo); transform: translateY(-3px); box-shadow: 0 7px 18px rgba(10,24,18,0.42); }
.zap:hover svg { fill: var(--ouro); }
.zap:active { transform: translateY(0); }
/* Quando a barra de conversão sobe, o botão sobe junto para não ficar por baixo. */
body.com-barra .zap { bottom: calc(64px + 0.75rem + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) {
  .zap,
  body.com-barra .zap { bottom: clamp(1.25rem, 3vw, 2rem); }
  .zap { width: 60px; height: 60px; }
  .zap svg { width: 31px; height: 31px; }
}

/* ---------- 8. HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background-color: var(--verde);
  background-image: url("../imagens/imagem-hero-mobile.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  isolation: isolate;
}
/* Nesta arte o arco dourado fica por volta de 38% da altura e o campo verde
   ocupa todo o resto. O véu reforça o verde onde o texto vive e se dissolve
   antes de alcançar a figura. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(10,56,50,0.72) 0%,
    rgba(10,56,50,0.70) 30%,
    rgba(10,56,50,0.56) 40%,
    rgba(10,56,50,0.12) 50%,
    rgba(10,56,50,0) 62%);
}
.hero__quadro {
  width: 100%; max-width: var(--larg); margin-inline: auto;
  padding: var(--e4) var(--margem) clamp(1.75rem, 5vw, 3rem);
}
.hero__texto { max-width: 34rem; }

/* O arquivo do logo é quadrado com muita área transparente em cima e embaixo.
   O recorte por aspect-ratio + cover devolve a marca no seu próprio formato,
   sem o vazio que roubaria altura do campo verde. */
.hero__logo {
  width: clamp(122px, 32vw, 208px);
  aspect-ratio: 1.5;
  height: auto;
  object-fit: cover;
  object-position: center;
  margin-bottom: var(--e1);
  /* A marca foi desenhada para fundo claro: o "das Herdeiras" em teal
     encosta no valor do verde da página. O ganho de brilho separa a
     caligrafia do fundo sem descaracterizar o dourado. */
  filter: brightness(1.5) saturate(0.92);
}

.hero__titulo {
  font-family: var(--serifa);
  font-size: clamp(1.45rem, 6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.16;
  color: var(--creme);
  letter-spacing: -0.004em;
  text-wrap: balance;
  margin-bottom: var(--e2);
}
.hero__titulo em { display: block; font-style: italic; color: var(--ouro-claro); margin-top: 0.3em; }

.hero__sub {
  font-size: clamp(0.92rem, 3.4vw, 1.05rem);
  line-height: 1.6; color: var(--areia); max-width: 34ch;
  margin-bottom: var(--e2);
}

/* Uma ação só na dobra, em todo dispositivo: o botão conduz ao convite. */
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }

/* ---------- 9. PERFIS "PARA QUEM É" ---------- */
.perfis {
  display: grid; gap: var(--e2);
  margin-bottom: var(--e5);
}
.perfil {
  display: flex; gap: var(--e2); align-items: flex-start;
  background: var(--creme);
  border: 1px solid rgba(122,93,38,0.22);
  border-top: 2px solid var(--ouro);
  padding: var(--e3);
  font-size: 1rem; line-height: 1.62; color: var(--tinta-suave);
  box-shadow: 0 6px 20px rgba(42,24,18,0.06);
  /* translate e scale são propriedades independentes: o reveal usa translate,
     o hover usa scale — nunca brigam no mesmo transform. */
  transition: translate 0.7s var(--curva), opacity 0.7s var(--curva),
              scale 0.3s ease, box-shadow 0.35s ease;
}
/* Entrada/saída suave (JS alterna .dentro). Começa centralizado, subindo. */
.js .perfil { opacity: 0; translate: 0 26px; }
.js .perfil.dentro { opacity: 1; translate: 0 0; }
/* Hover (desktop): escala mínima + sombra um pouco mais presente. */
@media (hover: hover) {
  .perfil:hover {
    scale: 1.02;
    box-shadow: 0 12px 30px rgba(42,24,18,0.11);
  }
}
/* Ícones em traço fino dourado, um por card. */
.perfil__marca {
  width: 24px; height: 24px; flex: none; margin-top: 0.1rem;
  fill: none; stroke: var(--ouro); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 9b. LINHAS DE CONDUÇÃO E REMATE ---------- */
.conduz {
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.6;
  color: var(--areia); margin-bottom: var(--e3);
}
.secao--claro .conduz { color: var(--tinta-suave); }
.conduz--centro { text-align: center; max-width: 44ch; margin-inline: auto; }

.remate {
  margin-top: var(--e4); padding-top: var(--e3);
  border-top: 1px solid rgba(200,164,93,0.4);
  font-family: var(--serifa); font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.34; color: var(--creme);
}
.remate em { display: block; font-style: italic; color: var(--ouro-claro); }
.remate--claro {
  color: var(--cafe); text-align: center;
  max-width: 40ch; margin-inline: auto;
  border-top-color: rgba(122,93,38,0.35);
}
.remate--claro em { color: var(--ouro-texto); }

/* ---------- 10. ARCO (moldura de imagem) ---------- */
.arco {
  position: relative;
  border-radius: 50vw 50vw var(--raio) var(--raio);
  overflow: hidden;
  isolation: isolate;
}
.arco::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(200,164,93,0.55);
  border-radius: inherit; pointer-events: none;
}
.arco img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- 11. TRAVESSIA (dobra "não sairá da mesma forma") ----------
   A dobra é um convite: título ornamentado, uma frase emocional, quatro
   pilares em 2×2 com só filete dividindo, e um fecho maior. Camadas visuais
   fora do fluxo: textura de papel, partículas douradas, aura radial atrás
   do título. Nada de cards; espaço negativo é o material principal. */
.travessia {
  position: relative; overflow: hidden;
  padding-block: clamp(6rem, 12vw, 10rem);
}
.travessia .int--estreito { max-width: 900px; position: relative; z-index: 2; }

/* Textura de papel: cruz de gradientes muito claros e um ruído radial. */
.travessia__textura {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(231,206,134,0.05), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(200,164,93,0.04), transparent 55%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.008) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,0.02) 0 1px, transparent 1px 3px);
  opacity: 0.9;
}

/* Aura dourada por trás do título — só no bloco de cabeça, não em toda a dobra. */
.travessia__aura {
  position: absolute; z-index: 1;
  top: 5%; left: 50%; transform: translateX(-50%);
  width: min(560px, 78%); aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(231,206,134,0.14) 0%,
    rgba(200,164,93,0.08) 32%,
    transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}

/* Partículas douradas discretas, posicionadas com nth-child. */
.travessia__particulas { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.travessia__particulas span {
  position: absolute; display: block;
  width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, rgba(231,206,134,0.9) 0%, rgba(200,164,93,0) 70%);
  opacity: 0; animation: particula 7s ease-in-out infinite;
}
.travessia__particulas span:nth-child(1) { top:  8%; left: 12%; animation-delay: 0s; }
.travessia__particulas span:nth-child(2) { top: 18%; left: 88%; animation-delay: 1.1s; width: 2px; height: 2px; }
.travessia__particulas span:nth-child(3) { top: 34%; left:  6%; animation-delay: 2.4s; width: 4px; height: 4px; }
.travessia__particulas span:nth-child(4) { top: 46%; left: 94%; animation-delay: 3.2s; }
.travessia__particulas span:nth-child(5) { top: 58%; left: 18%; animation-delay: 0.8s; width: 2px; height: 2px; }
.travessia__particulas span:nth-child(6) { top: 66%; left: 82%; animation-delay: 4.0s; }
.travessia__particulas span:nth-child(7) { top: 78%; left: 10%; animation-delay: 1.8s; width: 4px; height: 4px; }
.travessia__particulas span:nth-child(8) { top: 86%; left: 74%; animation-delay: 5.2s; }
.travessia__particulas span:nth-child(9) { top: 92%; left: 40%; animation-delay: 3.8s; width: 2px; height: 2px; }
@keyframes particula {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.6); }
  50%      { opacity: 0.85; transform: translateY(-8px) scale(1); }
}

/* --- Cabeça: ornamento + título + lead emocional --- */
.travessia__cabeca {
  text-align: center;
  position: relative; z-index: 2;
  margin-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
.ornamento {
  display: block; margin: 0 auto var(--e3);
  width: clamp(110px, 20vw, 150px); height: auto;
  fill: var(--ouro); stroke: var(--ouro); stroke-width: 1.1;
  opacity: 0.85;
}
.ornamento path[d="M0 7h44"],
.ornamento path[d="M120 7H76"] { fill: none; }
.ornamento circle { fill: var(--ouro); stroke: none; }
.ornamento--baixo {
  margin: clamp(3rem, 6vw, 4.5rem) auto var(--e3);
  transform: rotate(180deg);
  opacity: 0.6;
}

.travessia__titulo {
  margin-inline: auto; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: 22ch;
}

.travessia__lead {
  font-family: var(--serifa);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--creme);
  max-width: 34ch; margin-inline: auto;
  font-weight: 300;
}
.travessia__lead em {
  font-style: italic; color: var(--ouro-claro);
  display: block; margin-top: 0.15em;
}

/* --- Pilares em 2×2. Não são cards: só filete + espaço. --- */
/* ============ Jornada de transformação (pilares) ============
   Espinha dourada vertical que a rolagem acende de cima a baixo; cada pilar
   acende quando a luz chega no seu marco. Mobile-first: espinha à esquerda.
   Variáveis compartilhadas pelo trilho e pelos marcos, para ficarem no mesmo
   eixo em qualquer breakpoint. */
.jornada {
  position: relative;
  --linha-x: 14px;          /* eixo da espinha; vira 50% no desktop */
  --marco: 11px;            /* diâmetro do ponto */
}

/* Trilho: linha de base tênue; a luz cresce por cima dela. */
.jornada__trilho {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--linha-x);
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    transparent, rgba(200,164,93,0.16) 7%, rgba(200,164,93,0.16) 93%, transparent);
  pointer-events: none;
}
.jornada__luz {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 0;    /* GSAP anima a altura de 0 a 100% */
  background: linear-gradient(to bottom,
    rgba(200,164,93,0) 0%,
    rgba(200,164,93,0.5) 14%,
    #E7CE86 86%, #F3E4B6 100%);
  box-shadow: 0 0 8px rgba(200,164,93,0.5);
  border-radius: 2px;
}
/* Cabeça de luz na ponta que desce. */
.jornada__luz::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  width: 9px; height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #FFF4D6 0%, #E7CE86 42%, rgba(200,164,93,0) 72%);
  box-shadow: 0 0 12px rgba(231,206,134,0.9), 0 0 22px rgba(200,164,93,0.45);
}

.pilares {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.75rem, 8vw, 3.75rem);
  list-style: none;
  padding: clamp(2rem, 6vw, 3rem) 0;
  position: relative;
  z-index: 1;
  border-block: 1px solid rgba(200,164,93,0.22);
}
.pilar {
  position: relative;
  padding-left: calc(var(--linha-x) + clamp(1.75rem, 7vw, 2.5rem));
  text-align: left;
}

/* Marco: ponto na espinha, à altura do início do pilar. O anel verde recorta
   a linha atrás dele para o ponto parecer pousado sobre a espinha. */
.pilar__marco {
  position: absolute;
  top: 0.5rem;
  left: var(--linha-x);
  width: var(--marco); height: var(--marco);
  transform: translate(-50%, 0) scale(0.7);
  border-radius: 50%;
  background: var(--verde);
  border: 1px solid rgba(200,164,93,0.5);
  box-shadow: 0 0 0 3px var(--verde);
  opacity: 0.6;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1),
              background 0.7s ease, box-shadow 0.7s ease, border-color 0.7s ease;
}

/* Entrada do conteúdo: escondido só sob .js, sobe ao ativar. */
.pilar__conteudo {
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.js .pilar__conteudo { opacity: 0; transform: translateY(20px); }
.pilar.ativo .pilar__conteudo,
.pilar.vis .pilar__conteudo { opacity: 1; transform: none; }

/* Ativação: marco acende com glow. */
.pilar.ativo .pilar__marco {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  background: radial-gradient(circle, #F3E4B6 0%, #C8A45D 65%, #B8933F 100%);
  border-color: rgba(243,228,182,0.9);
  box-shadow: 0 0 0 3px var(--verde),
              0 0 10px rgba(231,206,134,0.85), 0 0 20px rgba(200,164,93,0.45);
}

.pilar__indice {
  font-family: var(--serifa); font-style: italic;
  font-size: 0.85rem; letter-spacing: 0.14em;
  color: var(--ouro); opacity: 0.75;
  display: block; margin-bottom: 0.4rem;
}
.pilar__titulo {
  font-family: var(--serifa);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 400; letter-spacing: 0.02em;
  color: var(--ouro-claro);
  margin: 0 0 var(--e2);
  position: relative;
  padding-bottom: var(--e2);
  transition: color 0.9s ease, text-shadow 0.9s ease;
}
/* Ao ativar, o título vira champagne com glow suave. */
.pilar.ativo .pilar__titulo {
  color: #C8A45D;
  text-shadow: 0 0 18px rgba(200,164,93,0.45);
}
/* Filete divisor fino sob cada título, com fade. */
.pilar__titulo::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 1px;
  background: linear-gradient(to right, var(--ouro), rgba(200,164,93,0));
}
.pilar__texto {
  font-size: 0.96rem; line-height: 1.72;
  color: var(--areia);
  max-width: 34ch;
  font-weight: 300;
}

/* --- Fecho maior, dourado na segunda linha --- */
.travessia__fecho {
  text-align: center;
  font-family: var(--serifa);
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  line-height: 1.4;
  color: var(--creme);
  max-width: 26ch; margin: 0 auto;
  font-weight: 300;
  letter-spacing: 0.005em;
}
.travessia__fecho em {
  font-style: italic; color: var(--ouro-claro);
  display: block; margin-top: 0.2em;
  font-weight: 400;
}

@media (min-width: 768px) {
  /* No desktop a espinha vai para o centro e os blocos alternam os lados. */
  .jornada { --linha-x: 50%; }
  .pilares {
    gap: clamp(3rem, 6vw, 5rem);
    padding: clamp(3rem, 5vw, 4.5rem) 0;
  }
  .pilar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding-left: 0;
  }
  /* Marco no centro vertical de cada linha. */
  .pilar__marco { top: 50%; transform: translate(-50%, -50%) scale(0.7); }
  .pilar.ativo .pilar__marco { transform: translate(-50%, -50%) scale(1); }

  .pilar__conteudo { max-width: 34ch; }
  /* Bloco à esquerda: coluna 1, encosta na espinha, alinhado à direita. */
  .pilar[data-lado="esq"] .pilar__conteudo {
    grid-column: 1;
    text-align: right; justify-self: end;
    padding-right: clamp(1.75rem, 3vw, 2.75rem);
  }
  .pilar[data-lado="esq"] .pilar__texto { margin-left: auto; }
  .pilar[data-lado="esq"] .pilar__titulo::after {
    left: auto; right: 0;
    background: linear-gradient(to left, var(--ouro), rgba(200,164,93,0));
  }
  /* Bloco à direita: coluna 2, alinhado à esquerda. */
  .pilar[data-lado="dir"] .pilar__conteudo {
    grid-column: 2;
    text-align: left; justify-self: start;
    padding-left: clamp(1.75rem, 3vw, 2.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .travessia__particulas span { animation: none; opacity: 0.4; }
  /* Sem rolagem animada: tudo já revelado, sem transição. */
  .js .pilar__conteudo { opacity: 1; transform: none; transition: none; }
  .pilar__marco, .pilar__titulo { transition: none; }
  .jornada__luz { height: 100% !important; }
}

/* ---------- 13. BIO ---------- */
.bio__grade { display: grid; gap: var(--e5); }
.citacao {
  margin-top: var(--e4); padding-top: var(--e3);
  border-top: 1px solid rgba(200,164,93,0.45);
}
.citacao p {
  font-family: var(--serifa); font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.3; color: var(--ouro-texto);
  margin-bottom: var(--e2);
}
.citacao cite {
  font-family: var(--sans); font-style: normal; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave);
}

/* ---------- 14. CONVITE ---------- */
.cartao {
  background: rgba(10,56,50,0.55);
  border: 1px solid rgba(200,164,93,0.45);
  padding: clamp(1.75rem, 5vw, 3.25rem);
}
.cartao__logo {
  display: block; margin: 0 auto var(--e3);
  width: clamp(160px, 46vw, 240px);
  aspect-ratio: 1.5; height: auto;
  object-fit: cover; object-position: center;
  filter: brightness(1.5) saturate(0.92);
}
.filete { height: 1px; border: 0; background: rgba(200,164,93,0.35); margin-block: var(--e4); }

/* Dados do encontro: rótulo em versalete, valor em Cormorant dourado.
   Empilha no celular; vira três colunas com filete divisor a partir de 600px. */
.cartao__dados {
  display: flex; flex-direction: column;
  gap: var(--e2);
  margin: 0 0 var(--e4);
  padding-block: var(--e3);
  border-block: 1px solid rgba(200,164,93,0.28);
  text-align: center;
}
/* 0.7rem = 11.2px: mesmo token do .preco__rotulo, acima do piso de 11px. */
.cartao__dados dt {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--areia); margin-bottom: 0.3rem;
}
.cartao__dados dd {
  margin: 0;
  font-family: var(--serifa);
  font-size: clamp(1.15rem, 3.4vw, 1.4rem); line-height: 1.2;
  color: var(--ouro-claro);
}

.preco { text-align: center; margin-bottom: var(--e4); }
.preco__rotulo {
  display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--areia); margin-bottom: 0.5rem;
}
.preco__ancora {
  font-size: 0.95rem; color: var(--areia); margin-bottom: 0.15rem;
}
.preco__ancora s {
  text-decoration-color: var(--ouro);
  text-decoration-thickness: 1.5px;
  font-family: var(--serifa); font-size: 1.35rem;
  color: #C3B49E; margin-inline: 0.15rem;
}
.preco__valor {
  font-family: var(--serifa); font-size: clamp(3.4rem, 11vw, 5rem); line-height: 1;
  font-weight: 500; color: var(--ouro-claro); font-variant-numeric: tabular-nums;
}
.preco__valor span {
  font-size: clamp(1.2rem, 3.6vw, 1.75rem);
  vertical-align: 0.75em; margin-right: 0.12em; letter-spacing: 0.04em;
}

.cartao__nota {
  margin-top: var(--e3); text-align: center;
  font-size: 0.88rem; line-height: 1.6; color: var(--areia);
}
.cartao__nota strong { color: var(--ouro-claro); font-weight: 600; }

/* ---------- 15. FAQ ---------- */
.faq { padding-top: var(--e1); border-top: 1px solid rgba(122,93,38,0.3); }
.item { border-bottom: 1px solid rgba(122,93,38,0.3); }
.item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  padding-block: var(--e3); min-height: 56px;
  cursor: pointer; list-style: none;
  font-family: var(--serifa); font-size: clamp(1.18rem, 2.3vw, 1.42rem); line-height: 1.35;
  color: var(--cafe);
  transition: color 0.3s var(--curva);
}
.item summary::-webkit-details-marker { display: none; }
.item summary:hover { color: var(--ouro-texto); }
.item__sinal {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: var(--ouro-texto); stroke-width: 1.3; stroke-linecap: round;
  transition: transform 0.4s var(--curva);
}
.item[open] .item__sinal { transform: rotate(135deg); }
.item__corpo { padding-bottom: var(--e3); }
.item__corpo p { font-size: 1rem; line-height: 1.72; color: var(--tinta-suave); max-width: 62ch; }

/* ---------- 16. FECHO ---------- */
.fecho { text-align: center; }
.fecho__frase {
  font-family: var(--serifa); font-size: clamp(1.55rem, 4vw, 2.6rem); line-height: 1.32;
  color: var(--creme); margin-bottom: var(--e4); text-wrap: balance;
}
.fecho__frase em { font-style: italic; color: var(--ouro-claro); }
.fecho__meta {
  margin-top: var(--e3);
  font-family: var(--serifa); font-size: 1.05rem; letter-spacing: 0.03em;
  color: var(--areia);
}

/* ---------- 17. RODAPÉ ---------- */
.rodape { background: var(--cafe); color: var(--areia); padding-block: var(--e6) var(--e5); text-align: center; }
.rodape .marca { justify-content: center; margin-bottom: var(--e3); }
.rodape__nota { font-size: 0.95rem; color: var(--areia); margin-bottom: var(--e2); }
.rodape__legal { font-size: 0.78rem; color: #B9A390; }

/* ---------- 18. BARRA FIXA (mobile) ---------- */
.barra {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  background: rgba(10,56,50,0.97);
  border-top: 1px solid rgba(200,164,93,0.4);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 0.45s var(--curva);
}
.barra.visivel { transform: translateY(0); }
.barra__int {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.6rem var(--margem);
  max-width: var(--larg); margin-inline: auto;
}
.barra__info { line-height: 1.35; }
.barra__info strong {
  display: block; font-family: var(--serifa); font-size: 1.25rem; font-weight: 500;
  color: var(--ouro-claro); font-variant-numeric: tabular-nums;
}
/* Uma linha só: a barra é um rodapé de ação, não um bloco de texto. */
.barra__info span {
  display: block; white-space: nowrap;
  font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--areia);
}
.barra .btn {
  min-height: 44px; padding: 0.55rem 0.9rem; font-size: 0.7rem;
  letter-spacing: 0.07em; white-space: nowrap; flex: none;
}
/* Na barra fixa o halo pulsante é ruído: mantemos só o filete rotativo. */
.barra .btn--ouro::before { display: none; }

/* ---------- 19. MOVIMENTO (um gesto, orquestrado) ---------- */
.js .rev { opacity: 0; transform: translateY(24px); }
.js .rev.vis {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
  transition-delay: var(--atraso, 0ms);
}
.js .secao--verde::before, .js .secao--cafe::before { transform: scaleX(0); transform-origin: center; }
.js .secao.vis::before { transform: scaleX(1); transition: transform 1.2s var(--curva); }

@media (prefers-reduced-motion: reduce) {
  .js .rev, .js .rev.vis { opacity: 1; transform: none; transition: none; }
  .js .perfil { opacity: 1; translate: 0 0; transition: none; }
  .js .secao--verde::before, .js .secao--cafe::before, .js .secao.vis::before { transform: none; transition: none; }
  .btn, .item__sinal, .barra, .cabecalho { transition: none !important; }
}

/* =========================================================================
   20. RESPONSIVO
   ========================================================================= */

/* --- < 768px: no celular tudo é centralizado e a serifa cresce ---
   A coluna estreita torna o alinhamento à esquerda irregular; centralizado,
   o texto recupera simetria e o campo verde da foto vira moldura. */
@media (max-width: 767px) {
  .hero__texto,
  .bio__corpo,
  .prosa,
  .int--estreito { text-align: center; }

  .hero__logo,
  .hero__texto .sub,
  .hero__sub,
  .conduz,
  .sub,
  .prosa,
  .remate { margin-inline: auto; }

  .hero__acoes { justify-content: center; }

  .perfil { flex-direction: column; align-items: center; text-align: center; gap: var(--e1); }
  .perfil__marca { margin-top: 0; }
  /* Mais respiro entre os cards no celular. */
  .perfis { gap: clamp(1.5rem, 5vw, 2rem); }

  .citacao { text-align: center; }

  /* No celular a jornada é uma timeline à esquerda: texto alinhado à esquerda
     do eixo, sem centralizar (a espinha dourada faz o alinhamento). */
  .travessia { padding-block: clamp(5rem, 14vw, 7rem); }
  .pilares { padding: clamp(2rem, 7vw, 3rem) 0; }

  /* títulos em Cormorant um degrau acima no celular */
  .titulo { font-size: clamp(1.85rem, 7.4vw, 2.5rem); }
  .titulo--grande { font-size: clamp(2.1rem, 8.4vw, 2.9rem); }
  /* O hero é o único bloco com teto de altura: o texto precisa caber
     inteiro no campo verde da foto, abaixo do arco dourado. */
  .hero__titulo { font-size: clamp(1.72rem, 6.9vw, 2.3rem); margin-bottom: var(--e1); }
  /* Logo um pouco menor e parágrafo mais compacto encurtam o bloco; como o
     hero é bottom-aligned, o topo (logo) desce e sai de cima da figura. */
  .hero__logo { width: clamp(100px, 25vw, 136px); }
  .hero__sub { font-size: clamp(0.82rem, 3vw, 0.95rem); line-height: 1.5; }
  .hero__quadro { padding-bottom: 2rem; }
  .travessia__titulo { font-size: clamp(1.9rem, 8.2vw, 2.6rem); }
  .travessia__fecho { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .pilar__titulo { font-size: clamp(1.4rem, 6vw, 1.75rem); }
  .remate { font-size: clamp(1.45rem, 5.8vw, 1.9rem); }
  .fecho__frase { font-size: clamp(1.7rem, 6.8vw, 2.3rem); }
  .citacao p { font-size: clamp(1.6rem, 6.2vw, 2.1rem); }
}

/* --- ≥ 600px --- */
@media (min-width: 600px) {
  /* Os três dados lado a lado, separados por filete fino. */
  .cartao__dados { flex-direction: row; align-items: center; gap: 0; }
  .cartao__dados > div { flex: 1; padding-inline: var(--e2); }
  .cartao__dados > div + div { border-left: 1px solid rgba(200,164,93,0.28); }
  .perfis { grid-template-columns: repeat(2, 1fr); }
}

/* --- ≥ 768px --- */
@media (min-width: 768px) {
  .hero__sub { max-width: 40ch; }
  .barra__int { padding-inline: var(--margem); }
}

/* --- ≥ 1000px: hero desktop, grades editoriais --- */
@media (min-width: 1000px) {
  .hero {
    align-items: center;
    background-image: url("../imagens/imagem-hero-desktop.webp");
    background-position: right center;
    min-height: min(92svh, 860px);
  }
  .hero::after {
    background: linear-gradient(to right,
      rgba(10,56,50,0.78) 0%,
      rgba(10,56,50,0.66) 30%,
      rgba(10,56,50,0.30) 50%,
      rgba(10,56,50,0) 68%);
  }
  .hero__quadro { padding-block: var(--e5); }
  .hero__texto { max-width: 35rem; }
  .hero__titulo { font-size: clamp(2rem, 2.85vw, 2.6rem); margin-bottom: var(--e2); }
  .hero__sub { font-size: 1.05rem; margin-bottom: var(--e3); }
  .hero__logo { margin-bottom: var(--e3); }

  /* Seis colunas para que os cinco perfis fechem 3 + 2 com a última
     fileira centralizada, em vez de deixar um vão à direita. */
  .perfis { grid-template-columns: repeat(6, 1fr); gap: var(--e3); }
  .perfil { grid-column: span 2; }
  .perfil:nth-child(4) { grid-column: 2 / span 2; }
  .perfil:nth-child(5) { grid-column: 4 / span 2; }

  .bio__grade {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--e7);
    align-items: center;
  }
  .barra { display: none; }
  .cabecalho__cta { font-size: 0.72rem; padding: 0.7rem 1.6rem; }
}

/* --- ≥ 1400px --- */
@media (min-width: 1400px) {
  /* A headline é longa: acima de 3rem ela passa de cinco linhas
     e empurra o CTA para fora da dobra. */
  .hero__titulo { font-size: 3rem; }
  .hero__texto { max-width: 38rem; }
  .arco img { aspect-ratio: 4 / 5; }
}

/* --- telas muito baixas em paisagem --- */
@media (max-width: 999px) and (orientation: landscape) and (max-height: 560px) {
  .hero { min-height: auto; padding-top: 5rem; background-position: center 20%; }
  .hero__quadro { padding-block: var(--e5) var(--e4); }
  .hero::after {
    background: linear-gradient(to right,
      rgba(10,56,50,0.92) 0%, rgba(10,56,50,0.8) 45%, rgba(10,56,50,0.35) 75%, rgba(10,56,50,0.1) 100%);
  }
  .hero__texto { max-width: 32rem; }
}

/* --- impressão --- */
@media print {
  .cabecalho, .barra, .pular, .hero::after { display: none; }
  body { background: #fff; color: #000; }
  .secao { padding-block: 1.5rem; break-inside: avoid; }
}