/* ==========================================================================
   ASA RENT A CAR: BASE
   Reset mínimo + defaults de elemento. HTML semântico já nasce na marca:
   h1 é display, h2 é título, p é corpo, small é etiqueta. Quem escrever
   markup correto acerta a tipografia sem consultar tabela nenhuma.
   Carregar DEPOIS de asa-tokens.css.
   ========================================================================== */

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

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

/* O bloco de reduced-motion em asa-tokens.css zera as quatro durações, mas
   não alcança isto: scroll-behavior é propriedade de elemento, não custom
   property, então precisa da própria regra. Sem ela, quem pediu menos
   movimento levaria scroll animado em toda âncora, e o sistema tem muitas
   (FAQ, landing de destino, hub de links do rodapé). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Fundo padrão da página: branco. O cinza mist (--asa-bg) é superfície de
   composição e camada flutuante: entra onde a composição pede (uma seção
   específica, um hero, um formulário, um modal), nunca como o canvas
   inteiro. Como fundo global de body ele deixaria de ser composição e
   viraria pano de fundo automático de tudo. */
body {
  margin: 0;
  background: var(--asa-bg-elevated);
  color: var(--asa-ink);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body);
  line-height: var(--asa-lh-body);
  font-weight: var(--asa-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, não hidden: overflow-x: hidden no body cria um novo contexto de
     rolagem, e isso é causa documentada de quebra em position: sticky em
     qualquer descendente; o portal depende de sticky em cinco lugares
     (resumo, cupom, header, CTA mobile, filtros). clip contém o mesmo
     estouro horizontal sem criar esse contexto. */
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   OS 5 DEGRAUS
   Registro 1 (Anúncio): caixa alta, itálico, Black, entreletras negativa.
   Mesmo corte do wordmark. Vive em TRÊS lugares, e só neles: o H1 da página,
   o preço e a placa de número. Nunca corpo de texto, nunca para falar com
   uma pessoa.

   O H2 é Registro 2: o degrau Título (32/36) em 700, caixa baixa, com UMA
   palavra em vermelho de ação quando a seção pede assinatura (<em> dentro do
   h2). Oito títulos de seção em caixa alta itálica numa mesma página viram
   grito contínuo e apagam o H1; em peça de anúncio o H1 já cobre.
   -------------------------------------------------------------------------- */

h1,
.asa-display {
  font-size: var(--asa-fs-display-fluid);
  line-height: .94;
  font-weight: var(--asa-weight-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--asa-tracking-display);
  margin: 0;
  text-wrap: balance;
}

/* Registro 2 (Balcão) começa aqui: caixa baixa, sem itálico, sem exclamação.
   É a voz de quem atende. Vive no campo claro. */

h2,
.asa-title {
  font-size: var(--asa-fs-title-fluid);
  line-height: 1.125;
  font-weight: var(--asa-weight-bold);
  font-style: normal;
  text-transform: none;
  letter-spacing: var(--asa-tracking-title);
  margin: 0;
  text-wrap: balance;
}

/* A palavra em vermelho: uma por título, nunca duas, e nunca sobre amarelo
   (2,94:1 reprova, ver 03 Cor). Sobre amarelo a ênfase herda a cor do
   título; sobre preto ela é amarela, como a placa de número. */
h2 em,
.asa-title em,
.asa-accent {
  font-style: normal;
  color: var(--asa-action);
}

.asa-bg-surface h2 em,
.asa-bg-surface .asa-accent { color: inherit; }
.asa-bg-dense h2 em,
.asa-bg-dense .asa-accent,
.asa-bg-deep h2 em,
.asa-bg-deep .asa-accent { color: var(--asa-surface); }

h3,
.asa-highlight {
  font-size: var(--asa-fs-highlight);
  line-height: var(--asa-lh-highlight);
  font-weight: var(--asa-weight-bold);
  letter-spacing: 0;
  margin: 0;
}

p,
.asa-body {
  font-size: var(--asa-fs-body);
  line-height: var(--asa-lh-body);
  font-weight: var(--asa-weight-regular);
  margin: 0;
  max-width: var(--asa-measure);
  text-wrap: pretty;
}

/* Lide de seção: a frase sob o H2, 18/28, cinza de corpo secundário, na
   medida de leitura. Sobre amarelo herda a tinta preta; sobre preto, a
   cinza clara. */
.asa-lead {
  font-size: var(--asa-fs-lead);
  line-height: var(--asa-lh-lead);
  font-weight: var(--asa-weight-regular);
  color: var(--asa-ink-2);
  max-width: var(--asa-measure);
  margin: 0;
  text-wrap: pretty;
}

.asa-bg-surface .asa-lead { color: var(--asa-ink); }
.asa-bg-dense .asa-lead,
.asa-bg-deep .asa-lead { color: var(--asa-ink-inverse-2); }

/* Rótulo: caixa baixa, 14/20, Medium, cinza de legenda. A caixa alta com
   tracking é da etiqueta de benefício (.asa-tag) e de nada mais.
   .asa-label--caps existe para o raro rótulo que é, de fato, uma etiqueta
   sem fundo. */
small,
.asa-label {
  font-size: var(--asa-fs-body-dense);
  line-height: var(--asa-lh-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink-3);
  display: inline-block;
}

.asa-label--caps {
  font-size: var(--asa-fs-label);
  line-height: var(--asa-lh-label);
  text-transform: uppercase;
  letter-spacing: var(--asa-tracking-label);
  color: inherit;
}

/* Rótulo mono: metadado de produto (código de reserva, placa, IATA, nome
   de token nesta documentação). NUNCA acima de um título como sobretítulo:
   o título carrega o próprio peso. A cor muda com o fundo: vermelho escuro
   sobre claro, amarelo sobre preto, verde para o que já existe e não se
   toca. */
.asa-label-mono {
  font-family: var(--asa-font-mono);
  font-size: var(--asa-fs-mono);
  line-height: 1;
  font-weight: var(--asa-weight-medium);
  letter-spacing: var(--asa-tracking-mono);
  text-transform: uppercase;
  color: var(--asa-action-hover);
  display: inline-block;
}

.asa-label-mono--on-dark   { color: var(--asa-surface); }
.asa-label-mono--on-yellow { color: var(--asa-ink); }
.asa-label-mono--ok        { color: var(--asa-ok); }

a {
  color: var(--asa-action-hover);
  text-decoration: none;
  transition: color var(--asa-dur-fast) var(--asa-ease);
}

a:hover {
  color: var(--asa-action);
}

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

/* --------------------------------------------------------------------------
   FOCO
   A marca proíbe sombra em qualquer lugar, então elevação e foco não podem
   usar box-shadow. outline resolve os dois, e não é sombra.
   -------------------------------------------------------------------------- */

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

/* Só remove o anel de quem não navega por teclado. */
:focus:not(:focus-visible) {
  outline: none;
}

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

/* container-type habilita as unidades cqi/cqw: é o que faz a tipografia
   fluida e o corte de 8° responderem à largura real do container, não à
   do viewport. */
.asa-container {
  width: 100%;
  max-width: var(--asa-container-max);
  margin-inline: auto;
  padding-inline: var(--asa-section-pad-x);
  container-type: inline-size;
}

.asa-container--wide {
  max-width: 1500px;
}

.asa-container--flush {
  padding-inline: 0;
}

.asa-section {
  padding-block: var(--asa-section-pad-y);
}

/* Grade de 12 colunas, gutter 24px. Colapsa para 4 no mobile: o que precisa
   sobreviver ao colapso é a hierarquia, não o número de colunas. */
.asa-grid {
  display: grid;
  grid-template-columns: repeat(var(--asa-columns), minmax(0, 1fr));
  gap: var(--asa-gutter);
}

@media (max-width: 767px) {
  .asa-grid { --asa-columns: 4; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .asa-grid { --asa-columns: 8; }
}

/* Âncoras não podem parar embaixo do header fixo. --asa-header-h está
   calibrado para a navbar de 54px desta documentação; o header de produto
   (duas camadas, ~100 a 110px) só precisa mudar o token, e nenhuma âncora
   do site precisa ser tocada. */
[id] {
  scroll-margin-top: var(--asa-header-h);
}

.asa-stack {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-4);
}

/* Layout de duas colunas. Sidebar de filtro + vitrine é o único lugar do
   sistema que precisa disto; abaixo de 1024px a sidebar empilha acima do
   conteúdo e nunca vira sheet automaticamente: isso é decisão de quem
   monta a tela, não do layout. */
.asa-layout-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--asa-space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .asa-layout-2col {
    grid-template-columns: var(--asa-sidebar-w) 1fr;
  }
}