/* INSTITUTO NEXUS LEX MED — base
   Direção: obsidian + ouro envelhecido (humano) × luz clínica fria (ciência).
   O aço nunca ocupa mais tela que o ouro. */

:root {
  --obsidian: #08090b;
  --grafite: #111318;
  --noite: #0b1625;
  --osso: #f1eee7;

  --ouro: #c6a45c;
  --ouro-claro: #e0c483;
  --ouro-fosco: rgba(198, 164, 92, 0.42);

  --aco: #d7dee4;
  --aco-fundo: #9fb2be;
  --aco-fosco: rgba(159, 178, 190, 0.34);

  /* Alfas escolhidos por contraste medido sobre o obsidian (#08090b), não por gosto:
     0.92 → 14.5 · 0.62 → 6.8 · 0.55 → 5.5 · sobre o vidro dos cards, 0.55 → 5.3.
     AA exige 4.5 para texto normal. O antigo 0.38 dava 3.17 e reprovava justo no
     .card-det, que carrega o detalhe concreto de cada corporação. */
  --texto: rgba(241, 238, 231, 0.92);
  --texto-2: rgba(241, 238, 231, 0.62);
  --texto-3: rgba(241, 238, 231, 0.55);
  /* só para elementos decorativos que não carregam informação */
  --texto-fraco: rgba(241, 238, 231, 0.4);

  --vidro: rgba(255, 255, 255, 0.045);
  --vidro-borda: rgba(255, 255, 255, 0.09);

  --serif: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --sec: clamp(5rem, 9vw, 9rem);
  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1440px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scrollbar-color: var(--ouro-fosco) transparent;
  scrollbar-width: thin;
  /* `clip` no body não basta: o html continua `visible` e o vazamento do .nexus-bg
     (right: -2vw) escapava por cima, abrindo 28px de scroll horizontal em 1440px.
     `clip` — e não `hidden` — porque hidden criaria contexto de scroll e mataria o
     position: sticky do título do Método. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 350;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

::selection { background: var(--ouro-fosco); color: var(--osso); }

:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--osso);
  color: var(--obsidian);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ─── camadas ─────────────────────────────────────────────
   0 vídeo · 1 tint · 2 grão/partículas · 3 HUD forense · 10 conteúdo */

#bgv, #poster {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* O poster começa VISÍVEL e serve de primeiro quadro: o js/motion.js só o esconde
   quando o vídeo está pronto para assumir. Escondê-lo por padrão deixava o fundo vazio
   enquanto o vídeo carrega — no celular isso não é um instante: o navegador só começa a
   baixar depois do primeiro toque, então a pessoa encarava um hero oco até encostar na
   tela. O poster fica exatamente onde o vídeo fica (mesma camada, pintado depois), então
   a troca é no lugar, sem salto. */
#poster { display: block; }

#tint {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(8, 9, 11, 0.14) 0%, rgba(8, 9, 11, 0.62) 58%, rgba(8, 9, 11, 0.9) 100%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.78) 0%, rgba(8, 9, 11, 0.34) 22%, rgba(8, 9, 11, 0.34) 74%, rgba(8, 9, 11, 0.88) 100%);
}

#atmos {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#grao {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 10; }

.sec {
  position: relative;
  padding: var(--sec) var(--gut);
  max-width: var(--max);
  margin-inline: auto;
}

/* ─── tipografia ───────────────────────────────────────── */

.olho {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.olho::before {
  content: '';
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro));
}
.olho.frio { color: var(--aco-fundo); }
.olho.frio::before { background: linear-gradient(90deg, transparent, var(--aco-fundo)); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7vw, 6.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 4rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }

.lede {
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  color: var(--texto-2);
  max-width: 52ch;
  text-wrap: pretty;
}

.ouro { color: var(--ouro-claro); }
.frio { color: var(--aco); }

/* uma palavra em destaque kinético */
.k {
  color: var(--ouro-claro);
  font-style: italic;
}

/* ─── vidro ────────────────────────────────────────────── */

/* Vidro sem backdrop-filter.
   Motivo medido: cada painel com backdrop-filter obriga o compositor a refazer o
   blur a cada quadro do vídeo de fundo — e o vídeo muda de quadro a cada evento de
   scroll. Com 10 painéis, o renderer engasga. O tint já escurece o vídeo atrás dos
   painéis, então o blur era invisível e custava caro. Aqui o "vidro" é feito com
   camada translúcida + brilho de borda, que o compositor resolve sem releitura. */
.vidro {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02) 42%, rgba(8, 9, 11, 0.35)),
    rgba(17, 19, 24, 0.72);
  border: 1px solid var(--vidro-borda);
  border-radius: 3px;
}

.chip {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--vidro-borda);
  border-radius: 999px;
  background: rgba(11, 12, 15, 0.55);
  white-space: nowrap;
}

/* ─── botões ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.6rem;
  border-radius: 2px;
  border: 1px solid var(--ouro-fosco);
  background: transparent;
  color: var(--osso);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease), transform 0.45s var(--ease);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(198, 164, 92, 0.16), transparent);
  transform: translateX(-101%);
  transition: transform 0.75s var(--ease);
}
.btn:hover { border-color: var(--ouro); transform: translateY(-1px); }
.btn:hover::after { transform: translateX(101%); }

.btn--solido {
  background: var(--ouro);
  border-color: var(--ouro);
  color: #14100a;
  font-weight: 600;
}
.btn--solido:hover { background: var(--ouro-claro); border-color: var(--ouro-claro); }

/* ─── header ───────────────────────────────────────────── */

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gut);
  transition: background 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
.hdr.solto {
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.86), transparent);
}
.hdr.preso {
  background: rgba(8, 9, 11, 0.93);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--osso);
}
.marca svg { width: 26px; height: 26px; flex: none; }
.marca b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
}
.marca-txt { display: block; }
/* classe própria: o seletor descendente `.marca span` alcançava também o wrapper,
   aplicando fonte mono e letter-spacing de 0.28em ao nome da marca inteiro. */
.marca-sub {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  color: var(--texto-3);
  text-transform: uppercase;
  display: block;
  margin-top: 1px;
}

.burger {
  width: 46px;
  height: 46px;
  border: 1px solid var(--vidro-borda);
  border-radius: 2px;
  background: rgba(11, 12, 15, 0.6);
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 0;
  transition: border-color 0.4s var(--ease);
}
.burger:hover { border-color: var(--ouro-fosco); }
.burger i {
  display: block;
  width: 17px;
  height: 1px;
  background: var(--osso);
  transition: transform 0.4s var(--ease), width 0.4s var(--ease);
}
.burger i:nth-child(2) { width: 11px; }
.burger:hover i:nth-child(2) { width: 17px; }

/* ─── rodapé ───────────────────────────────────────────── */

.rodape {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 9, 11, 0.92);
  padding: 3rem var(--gut) 2.5rem;
  font-size: 0.78rem;
  color: var(--texto-3);
  line-height: 1.75;
}
.rodape-in {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
}
.rodape p { margin: 0 0 0.4rem; max-width: 64ch; }
.rodape .oab { font-family: var(--mono); letter-spacing: 0.04em; color: var(--texto-2); }

/* ─── reveals ──────────────────────────────────────────────
   O conteúdo é VISÍVEL por padrão. Só escondemos para animar depois que o JS
   confirmou que o GSAP carregou (classe .js-anim no <html>).
   Motivo: com .rv { opacity: 0 } no CSS, um CDN fora do ar deixaria 27 elementos
   invisíveis para sempre — título, botões, chips e cards inclusive. Página em branco.
   Assim, se algo falhar, o site degrada para estático legível em vez de sumir. */

.js-anim .rv { opacity: 0; transform: translateY(22px); }
.js-anim .rv-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js-anim .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}