/* ==========================================================================
   BASE / RESET / TIPOGRAFIA / UTILITÁRIOS
   ========================================================================== */

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

/* Importante: NÃO usar "scroll-behavior: smooth" aqui.
   O scroll suave nativo do navegador entra em conflito com o ScrollTrigger
   do GSAP (usado no pin/scrub da seção "Método") — as duas animações de
   scroll competem pelo mesmo eixo e geram um efeito fantasma/sobreposição
   nas seções durante a rolagem. Os cliques em âncoras do menu já recebem
   scroll suave via JS (ver main.js), sem essa interferência. */

html.lumina-lenis, html.lumina-lenis body {
  height: auto;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

button { font-family: inherit; cursor: pointer; }

.lumina-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.lumina-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.lumina-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.lumina-section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem);
}

.lumina-section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.lumina-btn {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--lumina-navy-950);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.05em 2.1em;
  border-radius: 999px;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  isolation: isolate;
  overflow: hidden;
  will-change: transform;
  transform: perspective(600px) rotateX(0) rotateY(0);
  transition: box-shadow var(--dur-fast) var(--ease-lumina),
              background var(--dur-fast) var(--ease-lumina);
  box-shadow: 0 6px 20px -8px rgba(201, 150, 47, 0.5);
}

.lumina-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.55) 38%, transparent 55%);
  transform: translateX(-120%);
}

.lumina-btn:hover::after {
  transition: transform 0.85s var(--ease-lumina);
  transform: translateX(120%);
}

.lumina-btn:hover {
  background: var(--color-accent-strong);
  box-shadow: var(--shadow-gold);
}

.lumina-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-on-dark);
  border: 1px solid var(--color-border-on-dark);
  box-shadow: none;
}

.lumina-btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  box-shadow: none;
}

.lumina-skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--color-accent);
  color: var(--lumina-navy-950);
  padding: 0.8em 1.4em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 10000;
  transition: top var(--dur-fast) ease;
}
.lumina-skip-link:focus { top: 1rem; }

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

/* Page load transition curtain */
#lumina-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--lumina-navy-950);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#lumina-loader img {
  width: 64px;
  opacity: 0.9;
}

body.lumina-loading { overflow: hidden; height: 100vh; }

/* Reveal utility (used by ScrollTrigger-driven JS).
   Importante: o estado oculto (opacity/transform) é aplicado somente via
   JS (gsap.set), nunca aqui no CSS estático. Isso garante que, se o GSAP
   ou o CDN falharem por qualquer motivo, todo o conteúdo continua visível
   por padrão em vez de ficar permanentemente escondido. */
.reveal-up {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}