/* ==========================================================================
   BASE: fontes, tokens, reset, barra de rolagem, textura e utilitários
   Tema único e escuro (o preto do selo da Luni), com o verde do pin como
   único acento. Seções variam só no tom do fundo, nunca invertem.
   ========================================================================== */

/* Fontes auto-hospedadas (SIL Open Font License) ------------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kaushan Script";
  src: url("../assets/fonts/kaushan-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Cores */
  --fundo: #0a0c0b;          /* preto levemente esverdeado */
  --fundo-2: #111513;
  --fundo-3: #18201c;
  --mata: #0d3a29;           /* verde escuro dos posts de campanha */
  --mata-2: #124b36;
  --verde: #04c25c;          /* pin do logo: o único acento */
  --verde-claro: #3fe089;
  --papel: #f1ebdc;          /* só objetos "físicos": bilhete e polaroides */
  --tinta: #0a0c0b;

  --texto: #f2f4f1;
  --texto-2: rgba(242, 244, 241, 0.7);
  --texto-3: rgba(242, 244, 241, 0.5);
  --linha: rgba(242, 244, 241, 0.12);
  --linha-forte: rgba(242, 244, 241, 0.22);

  /* Tipografia
     - display: Montserrat, a mesma do "VIAGENS" do logo e dos posts da marca.
     - sans: Figtree no texto corrido.
     - script: Kaushan Script, eco do pincel do "Luni", só em frases curtas fora dos títulos. */
  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Kaushan Script", "Brush Script MT", cursive;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.97rem + 0.18vw, 1.0938rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-md: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-lg: clamp(2.1rem, 1.5rem + 2.6vw, 4rem);
  --fs-xl: clamp(2.6rem, 1.6rem + 4.4vw, 6rem);
  --fs-hero: clamp(2.6rem, 1.2rem + 5vw, 6rem);

  /* Espaçamento e layout */
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);
  --secao-y: clamp(5rem, 3.5rem + 7vw, 10rem);
  --max-w: 84rem;
  --topo-h: 5.25rem;         /* pílula (4rem) + folga do topo */

  /* Forma: botões são pílula; superfícies e imagens usam --raio; objetos físicos têm o próprio raio */
  --raio: 1.25rem;
  --raio-sm: 0.75rem;

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.9s;

  /* Camadas (única escala de z-index do projeto)
     10 conteúdo elevado · 40 WhatsApp flutuante · 50 cabeçalho · 90 textura de grão */
}

/* Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--topo-h);
  background: var(--fundo);

  /* Barra de rolagem da marca (padrão: Chrome 121+, Edge, Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--verde) var(--fundo);
}

/* Barra de rolagem para navegadores sem scrollbar-color (Safari) */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--fundo); }
  ::-webkit-scrollbar-thumb {
    background: var(--verde);
    border: 3px solid var(--fundo);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--verde-claro); }
  ::-webkit-scrollbar-corner { background: var(--fundo); }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Textura de grão fixa: um único pseudo-elemento, sem animação, sem capturar clique */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

main { overflow-x: clip; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
/* :where() zera a especificidade: classes como .envelope continuam valendo nessas listas */
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.05;
  text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--verde); color: var(--tinta); }

/* Utilitários --------------------------------------------------------- */
.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.pular {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--verde);
  color: var(--tinta);
  font-weight: 700;
  border-radius: 999px;
  transform: translateY(-200%);
  transition: transform 0.2s;
}
.pular:focus { transform: none; }

.envelope {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icone { width: 1.25em; height: 1.25em; flex: none; }

.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
}

.logo {
  --pin: var(--verde);
  display: block;
  color: currentColor;
}

/* Revelação no scroll (js/modules/revelar.js adiciona .revelado) ------- */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--atraso, 0s);
}
.js [data-revelar].revelado { opacity: 1; transform: none; }

/* Títulos palavra a palavra (js/modules/texto.js envolve cada palavra) */
.palavra {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.08em;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.palavra > span {
  display: inline-block;
  transform: translateY(0);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js [data-palavras]:not(.revelado) .palavra > span { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-revelar] { opacity: 1; transform: none; }
  .js [data-palavras]:not(.revelado) .palavra > span { transform: none; }
}