/* ==========================================================================
   Kabine — Reset, elementos e layout
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* --nav-top + --nav-h + respiro */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--brand-500); color: #fff; }

/* ------------------------------------------------------------- TIPOGRAFIA */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  color: var(--text);
  text-wrap: balance;
}

.display-xl {
  font-weight: var(--w-display-xl);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--tr-display-xl);
  max-width: 20ch;
}

.display-l {
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
  letter-spacing: var(--tr-display-l);
  max-width: 24ch;
}

.display-m {
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  letter-spacing: var(--tr-display-m);
}

h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-h4);
  font-weight: var(--w-card);
}

/* Segunda tonalidade dentro da mesma frase: cria hierarquia sem trocar peso. */
.display-xl .dim,
.display-l .dim,
.display-m .dim { color: var(--dim); }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: var(--container-prose);
}

.body-sm { font-size: var(--fs-sm); line-height: var(--lh-snug); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-snug); letter-spacing: .01em; }
.muted   { color: var(--text-muted); }
.faint   { color: var(--text-faint); }

/* Todo número que o olho compara em coluna anda em largura fixa. */
.tabular { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- LAYOUT */

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

.container-wide {
  width: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  background: var(--bg);
  color: var(--text);
  padding-block: var(--section-y);
  position: relative;
}

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

/* Cabeçalho de seção: eyebrow + título + lead, centralizado ou à esquerda. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

/* Bloco eyebrow + título. A distância entre os dois vive AQUI, numa fonte só.
   Antes ela vinha do gap do container mais uma margem no eyebrow aplicada só
   quando o pai casava com .section-head ou .hero__inner — o que dava 0, 16, 24
   ou 32px conforme o container. Qualquer cabeçalho novo usa .section-head ou
   .heading-block e herda o valor certo. */
.heading-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.section-head--center {
  align-items: center;
  text-align: center;
}

.section-head--center .lead { margin-inline: auto; text-align: center; }
.section-head--center .display-l { max-width: 20ch; }

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(12, 1fr);
}

.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; }
.wrap  { flex-wrap: wrap; }

.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }
.gap-7 { gap: var(--sp-7); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: calc(var(--z-menu) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand-500);
  color: #fff;
  border-radius: var(--r-md);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

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

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
  html { scroll-padding-top: 88px; }
}