/* =========================================================================
   Site institucional Easy Truck — usa a MESMA escala do painel
   (variaveis.css é cópia fiel; nenhuma cor, espaço ou raio fora dela).
   Especificidade baixa de propósito: fácil de sobrescrever depois.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, p) { margin: 0; overflow-wrap: break-word; }
:where(a) { color: var(--tinta-marca); }
:where(:focus-visible) { outline: 2px solid var(--dado-1); outline-offset: 2px; border-radius: var(--raio-1); }
:where(svg) { flex: none; }

/* Ritmo vertical por irmão adjacente, como no painel. */
.fluxo > * + * { margin-block-start: var(--fluxo, var(--e-4)); }

/* Trilho central: o conteúdo responde ao espaço, não a breakpoints. */
.trilho {
  inline-size: min(100% - 2 * var(--e-5), 68rem);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- topo -- */
.topo { padding-block: var(--e-4); }
.topo .trilho { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: inherit; }
.marca-icone {
  display: grid; place-items: center;
  inline-size: 2.25rem; block-size: 2.25rem;
  border-radius: var(--raio-1);
  background: var(--dado-1); color: #fff;
}
.marca-icone svg { inline-size: 1.3rem; block-size: 1.3rem; }
.marca strong { font-size: var(--t-titulo); letter-spacing: -0.015em; }
.marca span { display: block; font-size: var(--t-mini); color: var(--tinta-suave); }
.topo .botao-secundario { margin-inline-start: auto; }

/* ---------------------------------------------------------------- botão -- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-block-size: var(--alvo-toque); padding-inline: var(--e-5);
  font-size: var(--t-menor); font-weight: 600; font-family: inherit;
  border: 1px solid transparent; border-radius: var(--raio-1);
  background: var(--dado-1); color: #fff; cursor: pointer; text-decoration: none;
  transition: background var(--duracao) var(--curva), transform var(--duracao) var(--curva);
}
.botao:hover { background: color-mix(in oklab, var(--dado-1) 85%, black); }
.botao:active { transform: translateY(1px); }
.botao svg { inline-size: 1rem; block-size: 1rem; }
.botao-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borda); }
.botao-secundario:hover { background: var(--superficie-2); }

/* ----------------------------------------------------------------- capa -- */
/* Lavagem de cor derivada da cor 1 em oklab: presença de marca sem imagem
   de banco — não existe material fotográfico real, então não há fotografia. */
.capa {
  background:
    radial-gradient(58rem 26rem at 85% -8rem,
      color-mix(in oklab, var(--dado-1) 14%, transparent), transparent 70%),
    linear-gradient(to bottom,
      color-mix(in oklab, var(--dado-1) 7%, var(--fundo)), var(--fundo) 82%);
  padding-block: clamp(var(--e-6), 4vw + var(--e-5), var(--e-7)) var(--e-7);
}
.capa .trilho { max-inline-size: 46rem; --fluxo: var(--e-5); }
.capa .selo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinta-marca);
  background: color-mix(in oklab, var(--dado-1) 10%, white);
  border: 1px solid color-mix(in oklab, var(--dado-1) 22%, white);
  border-radius: 999px; padding: var(--e-1) var(--e-3);
}
.capa h1 {
  font-size: var(--t-numero);
  line-height: 1.08; letter-spacing: -0.025em; font-weight: 700;
  max-inline-size: 18ch;
  text-wrap: balance;
}
.capa h1 em { font-style: normal; color: var(--tinta-marca); }
.capa .apoio { color: var(--tinta-suave); font-size: var(--t-titulo); font-weight: 400; max-inline-size: 52ch; }

/* --------------------------------------------------------------- frentes -- */
.frentes { padding-block: var(--e-6); }
.frentes .trilho {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--e-5);
}
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  box-shadow: var(--sombra-1);
  padding: var(--e-5);
  --fluxo: var(--e-3);
}
.cartao .chip {
  display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: var(--raio-1);
  margin-block-end: var(--e-4);
}
.cartao .chip svg { inline-size: 1.25rem; block-size: 1.25rem; }
.cartao h2 { font-size: var(--t-titulo); letter-spacing: -0.015em; }
.cartao p { color: var(--tinta-suave); font-size: var(--t-menor); max-inline-size: 60ch; }
/* Cada frente com a sua cor de dado — as mesmas do painel. */
.frente-emergencial .chip { background: color-mix(in oklab, var(--dado-1) 12%, white); color: var(--tinta-marca); }
.frente-sac .chip { background: color-mix(in oklab, var(--dado-2) 16%, white); color: var(--tinta-alerta); }

/* ---------------------------------------------------------------- acesso -- */
.acesso { padding-block: var(--e-4) var(--e-7); }
.acesso .cartao {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5);
  box-shadow: var(--sombra-2);
}
.acesso .texto { flex: 1 1 24rem; --fluxo: var(--e-2); }
.acesso h2 { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-titulo); }
.acesso h2 svg { inline-size: 1.1rem; block-size: 1.1rem; color: var(--tinta-marca); }

/* ------------------------------------------------------------------ pé -- */
.pe { border-block-start: 1px solid var(--borda); padding-block: var(--e-5); }
.pe .trilho {
  display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between;
  color: var(--tinta-fraca); font-size: var(--t-mini);
}

/* ------------------------------------------------------------- entrada -- */
/* Movimento único e curto: apresenta a página, não distrai. */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entrar 480ms var(--curva) both; }
  .entra:nth-child(2) { animation-delay: 70ms; }
  .entra:nth-child(3) { animation-delay: 140ms; }
  .entra:nth-child(4) { animation-delay: 210ms; }
  @keyframes entrar {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
  }
}