/*
  Círculo Sacratu · LP de candidatura
  ------------------------------------------------------------------
  Design read (design-taste-frontend §0.B):
    Reading this as: event application landing for Araçatuba service workers,
    with a warm premium-consumer brand language from an approved KV, leaning
    toward native CSS + Vasquz/Inter + restrained motion.

  Dials: DESIGN_VARIANCE 6 · MOTION_INTENSITY 7 · VISUAL_DENSITY 4
  (revisão 2: parallax, rolagem suave e carrossel pedidos pelo usuário, como na LP da iscool)

  Famílias de layout (uma por área):
    1. #topo           split assimétrico: texto + círculo do KV com as mãos
    2. #encontro       manifesto tipográfico + 3 cards de dados (quando/onde/quanto)
    3. #origem         arte sangrando (círculo de pétalas) + coluna estreita de texto
    4. #por-que        título com texto embaixo + fileira de 4 cards coloridos
    5. #para-quem      bloco centralizado + carrossel infinito de etiquetas
    6. #como-funciona  timeline horizontal com número no círculo (vertical no celular)
    7. #perguntas      sanfona (details nativo)
    8. #candidatura    split: título e arte à esquerda, cartão manteiga à direita
    9. footer          wordmark SACRATU em tamanho de parede
    Pétalas da lótus soltas pela página, com parallax (petalas.css).

  Overrides do spec e do usuário sobre a skill (precedência: usuário > spec > skill):
    - Stack: HTML/CSS/JS sem framework (padrão das LPs Sacratu, vira tema Velk).
    - Tema único travado na paleta da marca; sem modo claro/escuro.
    - Inter e a paleta bordô/manteiga/terracota são da marca (KV aprovado).
    - Vasquz só no h1 e nos números; todo h2 em Inter light, caixa alta (pedido do usuário).
    - Título do hero em exatamente 2 linhas (pedido do usuário).
    - Cards em #encontro e #por-que pedidos pelo usuário (a skill evita cards iguais em fileira).
    - Círculo do hero é o PNG do KV, com o desfoque já aplicado; não é decoração gerada.
    - Rótulo do hero ("mote • 1ª Nascente · Araçatuba") com "•" e "·" vem do usuário.
    - Rolagem suave que intercepta a roda do mouse (só ponteiro fino, sem "reduzir movimento"),
      pedida pelo usuário como na LP da iscool.
    - No desktop, logo no topo e título no meio da coluna, como na LP aprovada (Desk.png).
*/

/* ---------- Fontes ---------- */
@font-face {
  font-family: 'Vasquz';
  src: url('../fonts/vasquz.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Paleta do KV (amostrada dos assets) */
  --bordo: #422020;          /* fundo base, igual às pétalas escuras */
  --bordo-fundo: #2f1616;    /* zonas mais profundas */
  --terracota: #b5603a;
  --malva: #a2706f;
  --rose: #f3d3c8;
  --manteiga: #e4d789;       /* acento único: títulos, botão, contador */
  --manteiga-claro: #efe4a6;
  --rosa-claro: #fadad3;

  --texto: #f6e9e0;
  --texto-suave: rgb(246 233 224 / 0.76);
  --linha: rgb(243 211 200 / 0.18);

  --fonte-display: 'Vasquz', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Formas: interativos em pílula, contêineres com 28px */
  --raio: 28px;
  --raio-pilula: 999px;

  --gutter: clamp(20px, 5vw, 56px);
  --largura: 1240px;
  --barra-altura: 56px;      /* 64px no desktop */

  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);

  /* Escala tipográfica de 8pt: 12 (meio passo) e múltiplos de 8; entrelinhas também na grade */
  --t-12: 0.75rem;
  --t-16: 1rem;
  --t-24: 1.5rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-48: 3rem;
  --t-64: 4rem;

  --fs-h2: var(--t-24);      /* 48 a partir de 768px */
  --lh-h2: 1.3333;           /* 24/32 e 48/56 */
}
@media (min-width: 768px) {
  :root { --fs-h2: var(--t-48); --lh-h2: 1.1667; }
}
@media (min-width: 1024px) {
  :root { --barra-altura: 64px; }
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* âncoras e campos focados param abaixo da barra fixa */
  scroll-padding-top: calc(var(--barra-altura) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  html.js-suave { scroll-behavior: auto; } /* a rolagem suave do JS assume */
}
body {
  margin: 0;
  background: var(--bordo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* as pétalas sangram pela borda da tela: corta o excesso lateral aqui, porque o overflow do body
   vai para a janela e o celular ainda alarga a página para caber o que vazou */
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Grão do KV: só num pseudo-elemento fixo, nunca em contêiner que rola */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Tipografia ----------
   Vasquz só no h1 (e nos números de destaque); todo h2 em Inter light, caixa alta. */
.hero__titulo {
  font-family: var(--fonte-display);
  font-weight: 400;
  color: var(--manteiga);
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.titulo-secao {
  font-family: var(--fonte-texto);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: var(--lh-h2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--manteiga);
}

.eyebrow {
  font-family: var(--fonte-texto);
  font-size: var(--t-12);
  font-weight: 600;
  line-height: 1.3333;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.9rem;
  border: 0;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto);
  font-size: var(--t-12);
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease-saida), background-color 0.25s var(--ease-saida);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible,
a:focus-visible,
summary:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.btn--primary { background: var(--manteiga); color: var(--bordo); }
.btn--primary:hover { background: var(--manteiga-claro); }
.btn--escuro { background: var(--bordo); color: var(--manteiga); }
.btn--escuro:hover { background: #552a29; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* Acessibilidade */
[tabindex='-1']:focus { outline: none; } /* destino de âncora recebe foco só para o leitor de tela */
.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}