/* ============ Fontes (auto-hospedadas) ============ */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-normal.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  /* usada apenas em "JUNTOS?" (Contato) */
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-normal.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* ============ Tokens ============ */
:root {
  --floresta: #0B2115;
  --amazonia: #244A32;
  --noite: #08150E;
  --igapo: #050D08;
  --bege: #F3EFE5;
  --bege-2: #E9E2D2;
  --ouro: #D8A763;
  --ouro-reflexo: #F2C88A;
  --terracota: #B76843;
  --tinta: #12261A;          /* texto sobre bege */
  --tinta-suave: #3F5446;

  --serif: 'Fraunces', 'Georgia', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --margem: clamp(20px, 5vw, 88px);
  --ease-org: cubic-bezier(.22, .8, .2, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--noite);
  color: var(--bege);
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
main { position: relative; }

/* Títulos: Fraunces com eixos variáveis. --soft e --wonk são animados pelo scroll. */
h1, h2 {
  font-family: var(--serif);
  font-weight: 380;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 0;
  font-variation-settings: 'opsz' 144, 'SOFT' var(--soft, 30), 'WONK' var(--wonk, 0);
}
h1 em, h2 em {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}

.rotulo {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin: 0 0 1.6em;
  display: flex; align-items: center; gap: .9em;
}
.rotulo span { color: var(--ouro); font-variant-numeric: tabular-nums; }
.rotulo::after { content: ''; width: 46px; height: 1px; background: currentColor; opacity: .35; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.pular {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--bege); color: var(--tinta);
  padding: 10px 16px; font-weight: 700; font-size: 13px; text-decoration: none;
  transition: top .25s;
}
.pular:focus { top: 16px; }

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

/* ============ Botão "anel" ============ */
.cta {
  --cta-cor: var(--bege);
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 26px 16px 30px;
  color: var(--cta-cor);
  text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  isolation: isolate;
}
.cta-anel {
  position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--ouro) 70%, transparent);
  border-radius: 100px;
  transition: transform .6s var(--ease-org), background-color .5s, border-color .5s;
  z-index: -1;
}
.cta::before {
  content: ''; position: absolute; inset: 0; border-radius: 100px; z-index: -1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(242, 200, 138, .35), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.cta-seta { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .5s var(--ease-org); }
.cta:hover .cta-anel, .cta:focus-visible .cta-anel { transform: scale(1.06, 1.12); border-color: var(--ouro-reflexo); }
.cta:hover::before { opacity: 1; }
.cta:hover .cta-seta { transform: translateX(5px); }

/* ============ Grão de filme ============ */
.grao {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 60;
  opacity: .085;
  mix-blend-mode: overlay;
  background-size: 180px 180px;
  animation: grao 1s steps(6) infinite;
}
@keyframes grao {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); }
  80% { transform: translate(7%, 2%); }
  100% { transform: translate(-4%, -5%); }
}

/* ============ Botânica (SVG gerado) ============ */
[data-botanica] { pointer-events: none; }
[data-botanica] svg { width: 100%; height: 100%; overflow: visible; }
.bt-linha { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.bt-cheio { fill: currentColor; stroke: none; }