/* =====================================================================
   02-base.css
   Reset, tipografia base e utilitarios de layout
   Carregado pelo index.html na ordem dos arquivos — a ordem importa
   para a cascata, entao nao troque os <link> de lugar.
   ===================================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: 6rem; scroll-snap-type: y proximity; }



body {
  margin: 0;
  font-family: var(--fonte);
  font-size: clamp(var(--txt-md), 1.08rem + .2vw, 1.2rem);
  line-height: 1.65;
  color: var(--cinza-700);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--azul-600); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  color: var(--cinza-900);
  margin: 0 0 .6em;
  font-weight: 800;
}
h1, h2 { line-height: 1.15; letter-spacing: -.025em; }
h3, h4 { line-height: 1.3;  letter-spacing: 0; }
/* O teto do h1 caiu de 2.8rem para 2.3rem e a inclinacao de 2.5vw para 1.6vw
   (May, 30/07/2026: "o primeiro titulo um pouco grande"). O que pesava era o
   monitor grande: em 1920px o clamp batia no teto e o titulo do hero comia a
   tela. O piso de 1.8rem no celular nao mudou. */
h1 { font-size: clamp(1.8rem, 1.35rem + 1.6vw, 2.3rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
p  { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Acessibilidade: quem pediu menos movimento, recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------
   3. Utilitários de layout
   --------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}

.secao { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.secao--claro { background: var(--azul-50); }

.secao__topo {
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
}
.olho {
  display: inline-block;
  color: var(--azul-600);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .65rem;
}
.secao__topo p { color: var(--cinza-700); font-size: var(--txt-lg); margin: 0; }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azul-700);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 999;
  border-radius: 0 0 var(--raio-sm) 0;
}
.pular-para-conteudo:focus { left: 0; }