/* ============================================================================
   TRINDADE — Base / chrome global (consome tokens.css)
   Implementa APENAS as classes globais do contrato (reset, container, header,
   footer, botões, seção). Estilo de PÁGINA e composição visual são do próximo
   worker + do design skill. Importar tokens.css ANTES deste arquivo.
   ============================================================================ */

/* --- Reset enxuto --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--color-vinho); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p  { margin: 0 0 var(--space-4); }

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-16); }
.section--alt { background: var(--bg-alt); }

/* --- Kicker / label editorial --- */
.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-detalhe);
  margin-bottom: var(--space-3);
}

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn-primary {
  background: var(--color-vinho);
  color: var(--color-on-primary);
  border-color: var(--color-vinho);
}
.btn-primary:hover { background: var(--color-realce); border-color: var(--color-realce); color: var(--color-on-primary); }
.btn-secondary {
  background: transparent;
  color: var(--color-vinho);
  border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-vinho); background: var(--bg-alt); color: var(--color-vinho); }

/* --- Card --- */
.card {
  background: var(--color-card);
  border: var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

/* --- Header global --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg-paper) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: var(--border-hair);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 72px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  letter-spacing: 0.22em;
  color: var(--color-ink);
  text-transform: uppercase;
}
.wordmark:hover { color: var(--color-vinho); }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  letter-spacing: 0.01em;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--color-vinho); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--space-2); }

/* --- Footer global --- */
.site-footer {
  background: var(--bg-alt);
  border-top: var(--border-hair);
  padding-block: var(--space-12) var(--space-8);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.site-footer__brand .wordmark { font-size: var(--fs-md); }
.site-footer__descriptor {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--space-3);
}
.site-footer__col h4 { font-family: var(--font-body); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted); margin-bottom: var(--space-3); }
.site-footer__col a { display: block; color: var(--color-ink); margin-bottom: var(--space-2); }
.site-footer__bottom {
  border-top: var(--border-hair);
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
}

/* --- Acessibilidade --- */
.visually-hidden {
  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: -999px; top: 0; z-index: 100;
  background: var(--color-vinho); color: var(--color-on-primary);
  padding: var(--space-3) var(--space-4);
}
.skip-link:focus { left: var(--space-4); }

/* --- Responsivo (chrome global) --- */
@media (max-width: 860px) {
  h1 { font-size: var(--fs-2xl); }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .section { padding-block: var(--space-12); }
}