/* base.css — fontes locais, tipografia editorial, grid, cabeçalhos de seção, marquee. */

/* Fontes oficiais (locais, sem CDN) */
@font-face {
  font-family: "Kovegir";
  src: url("../assets/fonts/Kovegir.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margem); }
.secao { padding-block: var(--secao-y); position: relative; }

.secao--escura { background: var(--verde); color: var(--txt-inv); }
.secao--escura h1, .secao--escura h2, .secao--escura h3 { color: var(--papel); }
.secao--areia { background: var(--areia); }
.secao--creme { background: var(--creme); }
.secao--papel { background: var(--papel); }

/* Hairline no topo da seção (divisor editorial) */
.secao--rule { border-top: 1px solid var(--linha); }
.secao--escura.secao--rule { border-top-color: var(--linha-inv); }

/* ---------- Cabeçalho de seção (eyebrow numerado) ---------- */
.eyebrow {
  display: flex; align-items: center; gap: .8rem; flex-wrap: nowrap; white-space: nowrap;
  font-family: var(--mono); font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: clamp(20px, 2.4vw, 36px);
}
.eyebrow .idx { font-variant-numeric: tabular-nums; color: var(--gold); }
.eyebrow .ln { flex: 1; min-width: 24px; height: 1px; background: currentColor; opacity: .4; }
.secao--escura .eyebrow { color: var(--gold); }
.secao--escura .eyebrow .idx { color: var(--gold); }

.secao-head { max-width: 30ch; margin-bottom: clamp(36px, 5vw, 72px); }
.secao-head.largo { max-width: 46ch; }
.titulo-secao { font-size: var(--d-md); }
.subtitulo-secao {
  font-family: var(--sans); font-weight: 400; font-size: var(--t-lead);
  color: var(--txt-suave); margin-top: 1.2rem; max-width: 50ch; line-height: 1.45;
}
.secao--escura .subtitulo-secao { color: var(--txt-inv-suave); }

/* ---------- Grid ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Marquee (faixa do mote, sem gradiente) ---------- */
.marquee {
  background: var(--gold); color: var(--verde);
  overflow: hidden; white-space: nowrap;
  border-block: 1px solid var(--gold-escuro);
}
.marquee__track {
  display: inline-flex; gap: 0; padding-block: clamp(12px, 1.4vw, 18px);
  animation: marquee 30s linear infinite; will-change: transform;
}
.marquee__track span {
  font-family: var(--display); font-size: var(--d-sm);
  padding-inline: clamp(20px, 3vw, 56px); display: inline-flex; align-items: center; gap: clamp(20px,3vw,56px);
}
.marquee__track span::after { content: "✳"; font-size: .55em; color: var(--verde-fundo); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Utilitários ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -150%); z-index: 200; background: var(--gold); color: var(--verde); font-weight: 600; padding: .6rem 1rem; border-radius: var(--raio); transition: transform var(--dur) var(--ease); }
.skip-link:focus { transform: translate(-50%, 0); }
.texto-leve { color: var(--txt-suave); }
.no-scroll { overflow: hidden; }
.italico { font-style: italic; }