/* ==========================================================================
   BOMBAR CRUZ — BASE
   Reset, tipografia, utilitários de layout e revelação ao scroll.
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  background: var(--verde-profundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
picture { display: contents; }

/* Trava a rolagem do fundo com o menu ou a lupa abertos, sem depender de
   style inline: assim os dois podem abrir e fechar sem apagar um ao outro. */
body.travado { overflow: hidden; }

/* O display das classes de componente venceria o [hidden] do navegador. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

ul, ol { list-style: none; }

::selection { background: var(--dourado); color: var(--preto); }

:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* ------------------------------------------------------------ tipografia -- */

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: var(--t-d1); }
h2 { font-size: var(--t-d2); }
h3 { font-size: var(--t-d3); line-height: 1.14; }

p { text-wrap: pretty; }

strong { font-weight: 700; color: var(--creme); }

/* Sobretítulo — o fio condutor tipográfico do site. */
.olho {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--fonte-texto);
  font-size: var(--olho);
  font-weight: 600;
  letter-spacing: var(--trilha-olho);
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: var(--e-5);
}

.olho::before {
  content: "";
  width: clamp(24px, 4vw, 46px);
  height: 1px;
  background: var(--dourado);
  flex: none;
  opacity: .8;
}

.olho--centro { justify-content: center; }
.olho--centro::after {
  content: "";
  width: clamp(24px, 4vw, 46px);
  height: 1px;
  background: var(--dourado);
  flex: none;
  opacity: .8;
}

/* Caixa alta editorial, usada nos títulos de maior impacto. */
.caixa-alta {
  text-transform: uppercase;
  letter-spacing: -.005em;
}

.dourado { color: var(--dourado); }
.ambar   { color: var(--ambar); }
.creme   { color: var(--creme); }

.texto-apoio {
  color: var(--texto-suave);
  max-width: var(--largura-texto);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
}

/* --------------------------------------------------------------- layout -- */

.env {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--borda-pagina);
}

.env--largo { max-width: 1500px; }

.secao {
  position: relative;
  padding-block: var(--secao);
}

.secao--verde  { background: var(--verde-profundo); }
.secao--fundo  { background: var(--verde-escuro); }
.secao--preta  { background: var(--preto); }

/* Fio dourado que separa blocos sem pesar. */
.fio {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--linha-forte) 22%, var(--linha-forte) 78%, transparent);
}

.cabecalho-secao {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
}

.cabecalho-secao--centro {
  margin-inline: auto;
  text-align: center;
}

.cabecalho-secao p { margin-top: var(--e-5); }

/* O título de seção pesa mais que um h2 solto no meio do texto: é ele que
   marca a troca de assunto durante a rolagem. */
.cabecalho-secao h2 {
  font-size: clamp(2.1rem, 4.9vw, 3.5rem);
  line-height: .99;
}
.cabecalho-secao .texto-apoio { max-width: 54ch; }
.cabecalho-secao--centro .texto-apoio { margin-inline: auto; }

/* ------------------------------------------------------------ ornamentos -- */

/* Textura de granulação aplicada sobre fotografia e seções escuras. */
.grao::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grao);
  opacity: .05;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 2;
}

/* Vinheta sutil — aprofunda os cantos sem escurecer o centro. */
.vinheta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(4, 12, 9, .5) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ------------------------------------------------------------- utilidade -- */

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  background: var(--dourado);
  color: var(--preto);
  padding: var(--e-3) var(--e-5);
  font-weight: 700;
  font-size: var(--t-peq);
  transition: transform var(--rapido) var(--curva);
}
.pular:focus { transform: translate(-50%, 12px); }

/* -------------------------------------------------------------- revelar -- */

[data-revelar] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--lento) var(--curva-suave),
    transform var(--lento) var(--curva);
  will-change: opacity, transform;
}

[data-revelar].visivel {
  opacity: 1;
  transform: none;
}

/* Escalonamento em cascata dentro de um mesmo grupo. */
[data-revelar][data-atraso="1"] { transition-delay:  80ms; }
[data-revelar][data-atraso="2"] { transition-delay: 160ms; }
[data-revelar][data-atraso="3"] { transition-delay: 240ms; }
[data-revelar][data-atraso="4"] { transition-delay: 320ms; }
[data-revelar][data-atraso="5"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    /* Sem o atraso zerado, o painel do menu e a lupa continuariam capturando
       clique por 340ms depois de fechados: o visibility sai com delay. */
    transition-delay: 0s !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
}