/* ============================================================
   MAARTORI — Base
   Reset, tipografia e utilitários de layout.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--deep);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a.link-inline { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
a.link-inline:hover { color: var(--accent); }

img { display: block; max-width: 100%; }

button { font-family: var(--font); cursor: pointer; }
input, select, textarea { font-family: var(--font); }

/* ---- Tipografia ---- */
h1, .h1 { font-size: var(--text-h1); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
h2, .h2 { font-size: var(--text-h2); font-weight: 500; line-height: 1.2; }
h3, .h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.3; }

/* Global text balancing — evita linhas desiguais (orfãs/viúvas) em qualquer título ou parágrafo */
h1, h2, h3, h4, h5, h6, p, blockquote, .lead, .section-header p, .card p {
  text-wrap: balance;
}

.text-hero { font-size: var(--text-hero); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.text-body-sm { font-size: var(--text-body-sm); line-height: 1.6; }
.text-muted { color: var(--muted); }

/* Label de seção — SEMPRE uppercase + tracking 0.1em (regra da skill) */
.label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.label .label-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ---- Contextos de fundo ---- */
.bg-deep { background: var(--deep); color: var(--on-dark); }
.bg-deep .text-muted, .bg-deep .muted-dark { color: var(--on-dark-secondary); }
.bg-surface { background: var(--surface); }
.bg-white { background: var(--white); }

/* ---- Layout ---- */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.section-lg { padding-top: var(--space-7); padding-bottom: var(--space-7); }

.section-header { margin-bottom: var(--space-5); max-width: 720px; }
.section-header .label { margin-bottom: var(--space-2); color: var(--accent); }
.section-header h2 { margin-bottom: var(--space-1); }
.section-header p { color: var(--muted); }
.bg-deep .section-header p { color: var(--on-dark-secondary); }
/* o label dentro do section-header não deve herdar a cor de '.section-header p' */
.bg-deep .section-header .label { color: var(--accent); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding-top: var(--space-5); padding-bottom: var(--space-5); }
}

.divider { border: none; border-top: var(--border-divider); }

/* ---- Acessibilidade ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.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: -9999px; top: 0; z-index: 999;
  background: var(--deep); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }