/* ==========================================================================
   base.css — elementos base, tipografia, containers e utilitários
   Depende de tokens.css.
   ========================================================================== */

html {
  scroll-behavior: smooth;
  /* O header é sticky: sem isto ele cobre o título ao pular para uma âncora. */
  scroll-padding-top: calc(var(--header-altura) + var(--sp-4));
}

body {
  background-color: var(--bg);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--txt-base);
  font-weight: 300;
  line-height: var(--lh-corpo);
  /* Trava horizontal: nenhum elemento pode gerar scroll lateral em 360 px. */
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-size: var(--txt-3xl);
}

h2 {
  font-size: var(--txt-2xl);
}

h3 {
  font-size: var(--txt-lg);
  font-weight: 500;
}

h4 {
  font-size: var(--txt-md);
  font-weight: 500;
}

p {
  text-wrap: pretty;
}

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

a {
  color: var(--acento);
  transition: color var(--transicao);
}

a:hover {
  color: var(--acento-hover);
}

/* Foco visível em dourado — requisito de acessibilidade do projeto.
   :focus-visible evita o anel no clique de mouse, mantendo-o no teclado. */
:focus-visible {
  outline: 2px solid var(--dourado-claro);
  outline-offset: 3px;
  border-radius: var(--radius);
}

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

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--estreito {
  max-width: var(--container-estreito);
}

.secao {
  padding-block: var(--sp-secao);
  /* Compensa o header sticky quando a seção é alvo de âncora. */
  scroll-margin-top: var(--header-altura);
}

.secao--alt {
  background-color: var(--bg-alt);
}

/* Cabeçalho de seção: olho + título + intro, com largura de leitura confortável. */
.secao__cabecalho {
  max-width: 62ch;
  margin-bottom: var(--sp-10);
}

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

/* "Olho" / eyebrow — rótulo dourado acima do H2. */
.olho {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--acento);
  font-family: var(--fonte-display);
  font-size: var(--txt-sm);
  font-weight: 500;
  letter-spacing: var(--ls-olho);
  text-transform: uppercase;
}

.secao__intro {
  margin-top: var(--sp-5);
  color: var(--texto-suave);
  font-size: var(--txt-md);
}

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */

/* Visível só para leitores de tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Pular para o conteúdo — primeiro elemento focável da página. */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: calc(var(--z-lightbox) + 1);
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--dourado);
  color: var(--preto);
  font-weight: 500;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--transicao);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--preto);
}

/* --------------------------------------------------------------------------
   Movimento — respeitar prefers-reduced-motion em TODAS as animações
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}