/* ==========================================================================
   BASE — reset enxuto, fontes, tipografia, layout e acessibilidade
   ========================================================================== */

/* ---------- Fontes self-hosted ----------
   Fraunces (display) e Figtree (corpo), ambas OFL, já incluídas em
   /assets/fonts/ com o texto da licença ao lado.

   Subsetadas em latin-ext e com os eixos que o projeto não usa congelados:
   na Fraunces, SOFT e WONK saíram e o tamanho óptico foi fixado em 36 —
   isso derrubou o arquivo de 66 kB para 36 kB. Peso continua variável nas
   duas, então 400/600/700 saem do mesmo arquivo.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-variable.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header) + var(--e-5));
}

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

body {
  margin: 0;
  background-color: var(--panna);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: var(--t-p);
  line-height: var(--lh-corpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a { color: var(--verde-borelli); }

/* ---------- Tipografia ---------- */
.h1, .h2, .h3, .h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-titulo);
  color: var(--verde-profundo);
  text-wrap: balance;
}

.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); line-height: var(--lh-media); }
.h4 { font-size: var(--t-h4); line-height: var(--lh-media); font-weight: 600; }

/* Palavra em itálico dentro de um título — usada com muita parcimônia,
   sempre em termos italianos (gelato, artigianale). */
.enfase {
  font-style: italic;
  font-weight: 400;
  color: var(--verde-borelli);
}

/* Eyebrow: rótulo curto acima do título. Sempre diz algo útil, nunca decora. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* O fio antes do eyebrow é a bandeira italiana do logo, reduzida a 3px.
   Citação direta da marca, discreta o bastante para não virar enfeite. */
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--verde-italia) 0 33.3%,
    var(--creme) 33.3% 66.6%,
    var(--vermelho-italia) 66.6% 100%
  );
}

.texto {
  max-width: var(--largura-texto);
  color: var(--tinta-suave);
  line-height: var(--lh-corpo);
}

.texto--grande { font-size: var(--t-p-lg); }
.texto + .texto { margin-top: var(--e-4); }

.micro {
  font-size: var(--t-micro);
  color: var(--tinta-clara);
  line-height: var(--lh-media);
}

/* ---------- Layout ---------- */
.envelope {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.envelope--estreito { max-width: 56rem; }

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

/* Variantes de fundo — nunca mexem em padding, só em cor.
   Isso evita o conflito de especificidade típico entre .secao e .secao--x. */
.secao--pistacchio { background-color: var(--pistacchio-claro); }
.secao--branca { background-color: var(--panna-pura); }
.secao--escura {
  background-color: var(--verde-profundo);
  color: var(--sobre-escuro);
}

.secao--escura .h2,
.secao--escura .h3 { color: var(--panna-pura); }
.secao--escura .texto { color: rgba(246, 248, 242, 0.78); }
.secao--escura .eyebrow { color: rgba(246, 248, 242, 0.6); }

.cabecalho-secao {
  margin-bottom: var(--e-7);
}

/* ---------- Acessibilidade ---------- */
.pular-para-conteudo {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: calc(var(--z-modal) + 1);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-full);
  background-color: var(--verde-profundo);
  color: var(--panna-pura);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--d-rapida) var(--ease-saida);
}

.pular-para-conteudo:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--verde-borelli);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.secao--escura :where(a, button):focus-visible { outline-color: var(--oro); }

/* Visível só para leitores de tela */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reveal on scroll (progressive enhancement) ----------
   Só ativa quando o JS marca <html class="js">. Sem JS, tudo visível. */
.js .revelar {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--d-lenta) var(--ease-saida),
    transform var(--d-lenta) var(--ease-saida);
}

.js .revelar.revelar--visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; }
}