/* ==========================================================================
   NAVIT — BASE / RESET / TIPOGRAFIA / GRADE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Interruptor geral: qualquer transição/animação (dropdown, acordeão,
   hover) fica instantânea quando o usuário pede movimento reduzido, sem
   depender de cada componente lembrar de declarar sua própria exceção. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

/* Compensa o header fixo ao navegar por âncoras */
:target,
[id]:is(section, main, article) { scroll-margin-top: calc(var(--header-h) + 8px); }

/* ==========================================================================
   PAPÉIS TIPOGRÁFICOS
   Uma família só (Manrope). A hierarquia vem de peso e tracking — extrabold
   com tracking negativo no display, regular no corpo. O mono fica reservado
   a dados, etapas e etiquetas.
   ========================================================================== */

.t-hero,
.t-display,
.t-h2,
.t-quote,
.t-h3,
.t-h4 {
  font-family: var(--font-body);
  color: var(--text-strong);
  text-wrap: balance;
}

.t-hero {
  font-size: var(--text-hero);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
}

.t-display {
  font-size: var(--text-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.t-h2 {
  font-size: var(--text-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h2);
}

/* Frase de pontuação entre blocos — bold, não serif */
.t-quote {
  font-size: var(--text-quote);
  font-weight: var(--fw-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
}

.t-h3 {
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}

.t-h4 {
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  line-height: var(--leading-heading);
}

/* ==========================================================================
   DESTAQUE DE PALAVRA NA MANCHETE
   Traço de acento pintado atrás de uma palavra — a assinatura do hero da
   Fteam, aqui no ciano/azul da Navit. Revelado por scaleX a partir da esquerda.
   ========================================================================== */

.mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  /* Sem isto, uma quebra de linha no meio da palavra destacada faz o traço
     esticar pela coluna inteira. */
  white-space: nowrap;
}

.mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.04em;
  height: 0.18em;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--cyan-300), var(--color-cyan) 55%, var(--color-blue));
  box-shadow: 0 6px 18px -8px rgba(19, 170, 193, 0.55);
  transform-origin: left center;
}

.js-anim .mark::after { transform: scaleX(0); }
[data-reveal].is-revealed .mark::after,
[data-reveal].is-revealed.mark::after {
  transform: scaleX(1);
  transition: transform var(--dur-slow) var(--ease-out) 200ms;
}

@media (prefers-reduced-motion: reduce) {
  .mark::after { transform: none !important; transition: none !important; }
}

.t-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-width: var(--measure-lead);
}

.t-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-width: var(--measure-prose);
}

.t-body--muted { color: var(--text-muted); }

.t-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* Etiqueta mono — dados, etapas, metadados. Uso pontual (doc 03). */
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

/* Números grandes: mono tabular para não dançar no layout */
.t-figure {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-deep); }
.on-inverse .text-accent { color: var(--color-cyan); }

/* ==========================================================================
   CONTAINERS E GRADE
   ========================================================================== */

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

/* A malha e as rotas são camadas absolutas dentro da seção. O container sobe
   acima delas aqui, de uma vez, em vez de cada seção repetir z-index inline. */
.section > .container,
.section > .container--wide,
.section > .container--narrow,
.hero > .container,
.page-hero > .container {
  position: relative;
  z-index: var(--z-content);
}

/* Grade editorial de 12 colunas. As classes .col-* posicionam blocos com
   assimetria controlada em vez de centralizar tudo. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.col-1-6 { grid-column: 1 / span 6; }
.col-1-7 { grid-column: 1 / span 7; }
.col-1-8 { grid-column: 1 / span 8; }
.col-1-9 { grid-column: 1 / span 9; }
.col-1-12 { grid-column: 1 / -1; }
.col-2-7 { grid-column: 2 / span 6; }
.col-5-8 { grid-column: 5 / span 4; }
.col-6-12 { grid-column: 6 / span 7; }
.col-7-12 { grid-column: 7 / span 6; }
.col-8-12 { grid-column: 8 / span 5; }

@media (width < 61.25rem) {
  .grid12 > [class*="col-"] { grid-column: 1 / -1; }
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--section-y-tight); }

/* Alternância consciente de fundos: branco é a base, o tom frio levíssimo
   separa blocos vizinhos e o grafite pontua com impacto. */
.section--raised { background: var(--bg-muted); }
.section--raised + .section--raised { border-top: 1px solid var(--border-subtle); }

/* Cabeçalho de seção: eyebrow + H2 + lead. Padrão único em todo o site. */
.section-head { max-width: var(--measure-prose); }
.section-head > * + * { margin-top: var(--space-5); }
.section-head .t-lead { margin-top: var(--space-6); }

/* Espaço entre o cabeçalho e o conteúdo da seção */
.section-body { margin-top: clamp(40px, 5vw, 64px); }

/* Régua fina — divisória editorial */
.rule {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: 0;
}

/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */

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

.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5);
  background: var(--action);
  color: var(--text-on-action);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--dur-base) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--blue-100);
  color: var(--color-graphite);
}
.on-inverse ::selection {
  background: var(--graphite-500);
  color: var(--color-offwhite);
}

@media (forced-colors: active) {
  .routes-bg, .mesh { display: none; }
}

/* ==========================================================================
   MOTION — gate anti-FOUC
   O conteúdo só é escondido se o JS estiver ativo E o usuário não pedir
   movimento reduzido. Um failsafe de 2,5s no <head> remove a classe caso o
   observer nunca rode, então o texto nunca fica preso invisível.
   ========================================================================== */

.js-anim [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}
.js-anim [data-reveal="fade"] { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}