/* ==========================================================================
   ASA RENT A CAR: COMPONENTES

   Nomenclatura: BEM com prefixo asa-.
   Estados de runtime NÃO viram classe modificadora: usam o atributo nativo
   (:disabled, [aria-invalid], [data-state], [aria-current]). É o que o
   framework já emite, e vem com acessibilidade junto.

   Carregar depois de asa-base.css e antes de asa-utilities.css.
   ========================================================================== */

/* ==========================================================================
   BOTÃO

   REGRA DURA: um único botão vermelho por peça. É o único elemento que
   carrega cor cheia numa peça amarela. Se a tela tem dois botões vermelhos,
   nenhum deles comunica prioridade, e o orçamento de 20% de vermelho estoura.
   ========================================================================== */

.asa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--asa-space-2);
  min-height: var(--asa-touch-min);
  padding: 15px 22px;
  border: none;
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  line-height: 1;
  font-weight: var(--asa-weight-bold);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--asa-dur-fast) var(--asa-ease),
              color var(--asa-dur-fast) var(--asa-ease);
}

.asa-btn--primary {
  background: var(--asa-action);
  color: var(--asa-on-action);
}

.asa-btn--primary:hover:not(:disabled) {
  background: var(--asa-action-hover);
  color: var(--asa-on-action);
}

/* Amarelo. Usado para WhatsApp e ações de suporte, nunca para a ação
   principal, que é sempre a vermelha. */
.asa-btn--secondary {
  background: var(--asa-surface);
  color: var(--asa-ink);
}

.asa-btn--secondary:hover:not(:disabled) {
  background: var(--asa-yellow-hover);
  color: var(--asa-ink);
}

/* Terciário: só contorno. Para "voltar", "cancelar" e ações de saída. */
.asa-btn--outline {
  background: transparent;
  color: var(--asa-ink);
  border: var(--asa-border-width) solid var(--asa-line);
}

.asa-btn--outline:hover:not(:disabled) {
  border-color: var(--asa-ink);
  color: var(--asa-ink);
}

.asa-btn--block { display: flex; width: 100%; }

/* Terciário sem contorno nenhum: ação de apoio dentro de um bloco de texto
   (ver mais, editar). Vermelho aqui espalharia a cor por um site de 70
   páginas: usa --asa-ink e só sublinha para não perder a affordance. */
.asa-btn--link {
  display: inline-flex;
  min-height: auto;
  padding: 0;
  background: transparent;
  color: var(--asa-ink);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.asa-btn--link:hover:not(:disabled) { color: var(--asa-action-hover); }

/* Quadrado, só ícone: fechar modal, dispensar barra, favoritar, navegar
   prateleira. 44px é o alvo de toque mínimo, não um valor arbitrário. */
.asa-btn--icon {
  width: var(--asa-touch-min);
  height: var(--asa-touch-min);
  padding: 0;
  flex: none;
}

/* Compacto, para o rodapé do card de veículo. Encolhe o texto e o padding
   lateral, nunca a altura: o alvo de toque continua em 44px. */
.asa-btn--sm {
  padding: 11px 14px;
  font-size: 12px;
}

/* Desabilitado usa token literal, nunca opacity: a marca proíbe texto com
   alpha, e opacity num nó de texto é exatamente isso. */
.asa-btn:disabled {
  background: var(--asa-disabled-bg);
  color: var(--asa-disabled-text);
  border-color: transparent;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   BOTÃO CARREGANDO
   Não é detalhe estético: um botão que não muda durante uma requisição
   convida o segundo clique, e o segundo clique aqui é uma segunda cobrança
   de caução no cartão.
   O sistema proíbe rotação, então nada de spinner. Três pontos em fade, cada
   um com 400ms (o teto do sistema), defasados para formar a onda.
   -------------------------------------------------------------------------- */

.asa-btn[data-state="loading"] {
  pointer-events: none;
}

.asa-btn[data-state="loading"] .asa-btn__label {
  display: none;
}

.asa-btn__loader {
  display: none;
  align-items: center;
  gap: 5px;
}

.asa-btn[data-state="loading"] .asa-btn__loader {
  display: inline-flex;
}

.asa-btn__loader span {
  width: 6px;
  height: 6px;
  border-radius: var(--asa-radius-full);
  background: currentColor;
  animation: asa-dot var(--asa-dur-max) var(--asa-ease) infinite alternate;
}

.asa-btn__loader span:nth-child(2) { animation-delay: 130ms; }
.asa-btn__loader span:nth-child(3) { animation-delay: 260ms; }

@keyframes asa-dot {
  from { opacity: .25; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .asa-btn__loader span { animation: none; opacity: .6; }
}

/* ==========================================================================
   ETIQUETA DE BENEFÍCIO
   Sem radius: é o único componente retangular do sistema, e é isso que a
   separa de um botão à primeira vista.

   --outline é o padrão de prova social ("Preferido do público"): numa
   vitrine de 32 cards, uma etiqueta vermelha cheia somaria um segundo
   vermelho ao lado do preço e o sinal deixaria de ser raro. Vermelho cheio
   fica reservado para o que é ação; --ok e --ink cobrem estado, --warn
   cobre atenção.
   ========================================================================== */

.asa-tag {
  display: inline-block;
  padding: 7px 10px;
  background: var(--asa-action);
  color: var(--asa-on-action);
  font-size: var(--asa-fs-label);
  line-height: 1;
  font-weight: var(--asa-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.asa-tag--ok      { background: var(--asa-ok); }
.asa-tag--ink     { background: var(--asa-ink); color: var(--asa-ink-inverse); }
.asa-tag--warn    { background: var(--asa-warn-bg); color: var(--asa-warn); }
.asa-tag--outline {
  background: transparent;
  color: var(--asa-ink);
  border: var(--asa-border-width) solid var(--asa-line);
  padding: 6px 9px;   /* compensa a borda: mantém a mesma caixa externa da sólida */
}
.asa-tag--neutral { background: var(--asa-disabled-bg); color: var(--asa-ink-2); }

/* ==========================================================================
   PREÇO
   A única ocasião em que vermelho e amarelo se encostam em texto, e só
   neste corpo. O valor é grande e negrito o bastante para o vermelho
   atender ao mínimo de texto grande do WCAG sobre branco (4,69:1) e sobre
   o cinza mist (4,26:1). Nunca sobre amarelo: 2,94:1.
   ========================================================================== */

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

.asa-price__label {
  font-size: var(--asa-fs-label);
  line-height: 1.2;
  font-weight: var(--asa-weight-regular);
  color: var(--asa-ink);
}

.asa-price__value {
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: .9;
  font-weight: var(--asa-weight-black);
  font-style: italic;
  letter-spacing: var(--asa-tracking-price);
  color: var(--asa-action);
}

.asa-price__note {
  font-size: var(--asa-fs-label);
  line-height: 1.4;
  font-weight: var(--asa-weight-regular);
  color: var(--asa-ink);
}

/* Estrutura de 5 partes: __value é o total do período, primário. __daily é
   a diária, secundária, nunca do mesmo tamanho do total, ou o "preço final"
   perde a corrida contra a diária. __installment e __pix são opcionais. */
.asa-price__daily {
  font-size: var(--asa-fs-body-dense);
  line-height: 1.3;
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink-2);
}

.asa-price__installment {
  font-size: var(--asa-fs-label);
  line-height: 1.4;
  color: var(--asa-ink-3);
}

/* Pix é turquesa por manual de marca próprio: cor de terceiro isolada
   neste selo, nunca solta no resto do componente. */
.asa-price__pix {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--asa-radius);
  background: #E6F9F6;
  font-size: var(--asa-fs-label);
  font-weight: var(--asa-weight-medium);
  color: #0F7A6E;
}

/* ==========================================================================
   PLACA DE NÚMERO: prova social
   O componente mais usado do sistema. Números canônicos: 4,7 (Google) e
   9,4 (Reclame Aqui). Sempre em vírgula decimal, formato pt-BR, e sempre
   inteiros de uma vez, nunca contador animado, que remete a dashboard de
   software e não a reputação de gente.
   ========================================================================== */

.asa-numberplate {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-3);
  padding: clamp(20px, 2.6vw, 32px);
  background: var(--asa-bg-dense);
}

.asa-numberplate__value {
  font-size: clamp(58px, 8vw, 104px);
  line-height: .8;
  font-weight: var(--asa-weight-black);
  font-style: italic;
  letter-spacing: var(--asa-tracking-number);
  color: var(--asa-surface);
}

.asa-numberplate__source {
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.3;
  color: var(--asa-ink-inverse);
  max-width: none;
}

/* ==========================================================================
   CARD
   Elevação sem sombra: borda de 1.5px e contraste de fundo. É a única
   forma permitida.
   ========================================================================== */

.asa-card {
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
  overflow: hidden;
}

.asa-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-2);
  padding: 14px;
}

/* --------------------------------------------------------------------------
   CARD DE VEÍCULO
   O título fala da viagem, não da ficha técnica: "Ideal para Jericoacoara e
   Canoa Quebrada", não "1.6 16V flex".
   -------------------------------------------------------------------------- */

.asa-card-vehicle { position: relative; }

/* Selo de prova social sobre a mídia: --outline, nunca vermelho cheio
   (ver ETIQUETA DE BENEFÍCIO acima). */
.asa-card-vehicle__badge {
  position: absolute;
  top: var(--asa-space-3);
  left: var(--asa-space-3);
  z-index: 1;
}

/* Política de cancelamento em texto, não em ícone colorido: é informação de
   apoio, não um selo que disputa atenção com o preço. */
.asa-card-vehicle__policy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

.asa-card-vehicle__policy .asa-icon { width: 14px; height: 14px; color: var(--asa-ok); }

/* Rodapé com dois CTAs: a ação secundária ("Ver detalhes") nunca compete
   em peso com a primária. Outline sempre; a primária segue a regra do botão
   vermelho único (cheia só na tela de instância única). */
.asa-card-vehicle__actions {
  display: flex;
  align-items: center;
  gap: var(--asa-space-2);
}

/* Esgotado nesta data: a mídia recebe um véu claro com a mensagem, e o
   CTA principal fica disabled no markup, nunca em opacity solta, que a
   marca proíbe em nó de texto. */
.asa-card-vehicle__soldout {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .82);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  text-align: center;
}

.asa-card-vehicle[data-state="soldout"] .asa-card-vehicle__soldout { display: flex; }

/* Variante horizontal: página de resultados, onde o card divide a linha
   com o resumo em vez de competir por largura numa grade. */
.asa-card-vehicle--horizontal {
  display: grid;
  grid-template-columns: 240px 1fr;
}

.asa-card-vehicle--horizontal .asa-cut,
.asa-card-vehicle--horizontal .asa-photo { height: 100%; }

@media (max-width: 639px) {
  .asa-card-vehicle--horizontal { grid-template-columns: 1fr; }
}

/* Em --asa-ink-3, nunca em vermelho: seria um terceiro vermelho no card,
   ao lado do preço e do CTA. É metadado de classificação, não ação. */
.asa-card-vehicle__category {
  font-family: var(--asa-font);
  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);
}

.asa-card-vehicle__title {
  font-size: var(--asa-fs-subtitle);
  line-height: 1.2;
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  margin: 0;
}

.asa-card-vehicle__specs {
  font-size: var(--asa-fs-body-dense);
  line-height: 1.45;
  color: var(--asa-ink-3);
  margin: 0;
  max-width: none;
}

.asa-card-vehicle__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-3);
  border-top: 1px solid var(--asa-line-soft);
  padding-top: 10px;
  margin-top: var(--asa-space-1);
}

.asa-card-vehicle__price {
  font-size: var(--asa-fs-price-card);
  line-height: 1;
  font-weight: var(--asa-weight-black);
  font-style: italic;
  letter-spacing: var(--asa-tracking-display);
  color: var(--asa-action);
}

/* ==========================================================================
   ÍCONE DE PERFIL
   Único uso de vermelho cheio fora da ação, comum à v3.1 (B2B): é o que
   garante reconhecimento no círculo de 40px da busca do Google.
   ========================================================================== */

.asa-avatar {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 64px;
  border-radius: var(--asa-radius-full);
  background: var(--asa-action) url('../assets/img/w-atual-branco.png') center / 66% no-repeat;
}

.asa-avatar--on-cover {
  border: 4px solid var(--asa-white);
}

/* ==========================================================================
   ÍCONE
   Biblioteca única (Feather), traço de 1.5px, a mesma espessura da borda
   de card, para que ícone e componente compartilhem a linha do sistema.
   ========================================================================== */

.asa-icon {
  width: var(--asa-icon-inline);
  height: var(--asa-icon-inline);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--asa-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.asa-icon--feature {
  width: var(--asa-icon-feature);
  height: var(--asa-icon-feature);
}

/* ==========================================================================
   CAMPO DE FORMULÁRIO

   Variante outline (borda visível sobre branco), não fill: o checkout tem
   mais de doze campos, e caixas preenchidas em sequência cansam a vista.

   Nenhum texto fica abaixo de 12px em tela, e a escala tem seus degraus
   "nada entre eles": o rótulo do campo usa o degrau denso do sistema
   (14/20, Medium, caixa baixa), nunca um tamanho próprio menor.
   ========================================================================== */

.asa-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Caixa baixa, 14px: o rótulo fala com a pessoa (Registro 2), não é
   etiqueta. 14px também é o que o iOS exige para não dar zoom ao focar. */
.asa-field__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-2);
}

.asa-field__control,
.asa-input,
.asa-select {
  width: 100%;
  min-height: var(--asa-control-h);
  padding: 14px;
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  line-height: 1.2;
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink);
  transition: border-color var(--asa-dur-fast) var(--asa-ease);
}

.asa-input::placeholder {
  color: var(--asa-ink-3);
  font-weight: var(--asa-weight-regular);
}

.asa-input:hover:not(:disabled):not([aria-invalid="true"]) {
  border-color: rgba(20, 21, 23, .3);
}

.asa-input:focus,
.asa-select:focus {
  border-color: var(--asa-action-hover);
  outline: 2px solid var(--asa-action-hover);
  outline-offset: 2px;
}

/* Preenchido: o valor em peso 500 já distingue de vazio (placeholder em 400).
   A borda escurece um passo para marcar que o campo tem conteúdo. */
.asa-input:not(:placeholder-shown) {
  border-color: rgba(20, 21, 23, .28);
}

/* Erro NÃO pode depender só da cor da borda: o foco usa exatamente a mesma
   cor (--asa-action-hover, logo acima), então num campo focado E inválido
   (o estado normal de quem acabou de errar e voltou para corrigir) o sinal
   de erro sumiria. A paleta é fechada e não tem canal de atenção, então
   o segundo canal é a ESPESSURA: 2px contra os 1.5px de todos os outros
   estados. O sinal primário continua sendo a mensagem .asa-field__error, com
   ícone, ligada por aria-describedby.
   É o mesmo princípio de redundância de sinais que o botão primário já usa
   (cor + isolamento + posição); ver 07-hierarquia.html. */
.asa-input[aria-invalid="true"],
.asa-select[aria-invalid="true"] {
  border-color: var(--asa-action-hover);
  border-width: 2px;
}

.asa-input:disabled,
.asa-select:disabled {
  background: var(--asa-disabled-bg);
  border-color: transparent;
  color: var(--asa-disabled-text);
  cursor: not-allowed;
}

/* Ajuda persistente: fica visível mesmo com o campo preenchido. Tudo que a
   pessoa precisa consultar ENQUANTO preenche não pode viver no placeholder,
   que some no primeiro caractere digitado. */
.asa-field__help {
  font-size: var(--asa-fs-label);
  line-height: 1.4;
  color: var(--asa-ink-3);
  max-width: none;
}

/* Erro colado ao campo que falhou, nunca num banner genérico no topo do
   formulário: no momento do erro a atenção já está neste campo. */
.asa-field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--asa-fs-label);
  line-height: 1.4;
  font-weight: var(--asa-weight-medium);
  color: var(--asa-action-hover);
  max-width: none;
}

.asa-field__error .asa-icon { width: 14px; height: 14px; }

/* Campo com adorno à direita (bandeira do cartão, ícone de calendário).
   O adorno é decorativo e não recebe foco. */
.asa-field--adorned { position: relative; }

.asa-field--adorned .asa-input { padding-right: 56px; }

.asa-field__adornment {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  color: var(--asa-ink-3);
}

/* Par validade + CVV lado a lado: espelha o layout físico do cartão e reduz
   o esforço de tradução mental de quem está com ele na mão. */
.asa-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--asa-space-3);
}

.asa-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-4);
  border: 0;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   SELEÇÃO: radio, checkbox, switch

   Radio: uma opção entre várias mutuamente exclusivas (forma de pagamento).
   Checkbox: opções independentes, de zero a todas (consentimento).
   Switch: configuração binária que vale na hora, sem passo de salvar.

   O estado marcado usa PRETO, não vermelho. O vermelho é o orçamento da
   ação principal da tela; um formulário com cinco caixas marcadas em
   vermelho faria a marca perder a assinatura e o CTA perder a prioridade.
   ========================================================================== */

.asa-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--asa-space-3);
  min-height: var(--asa-touch-min);
  padding: 10px 0;
  cursor: pointer;
}

.asa-choice__input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color var(--asa-dur-fast) var(--asa-ease),
              background-color var(--asa-dur-fast) var(--asa-ease);
}

.asa-choice__input[type="checkbox"] { border-radius: var(--asa-radius); }
.asa-choice__input[type="radio"]    { border-radius: var(--asa-radius-full); }

.asa-choice__input:hover:not(:disabled) { border-color: var(--asa-ink); }

.asa-choice__input[type="checkbox"]:checked {
  background: var(--asa-ink);
  border-color: var(--asa-ink);
}

.asa-choice__input[type="checkbox"]:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--asa-white);
  border-bottom: 2px solid var(--asa-white);
  transform: rotate(-45deg) translate(1px, -1px);
}

.asa-choice__input[type="radio"]:checked {
  border-color: var(--asa-ink);
  border-width: 6px;
}

.asa-choice__input:disabled {
  background: var(--asa-disabled-bg);
  border-color: var(--asa-disabled-bg);
  cursor: not-allowed;
}

.asa-choice__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asa-choice__title {
  font-size: var(--asa-fs-body-dense);
  line-height: 1.35;
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink);
}

.asa-choice__note {
  font-size: var(--asa-fs-label);
  line-height: 1.45;
  color: var(--asa-ink-3);
  max-width: none;
}

/* Consentimento opcional não deve competir visualmente com o obrigatório:
   pesos diferentes deixam claro que não são a mesma decisão. */
.asa-choice--optional .asa-choice__title { font-weight: var(--asa-weight-regular); }

/* Bloco selecionável, com preço à direita: proteções, meios de pagamento,
   adicionais (etapas 3 e 4 do funil). Estado marcado é a borda inteira,
   não só o quadrado de 20px: numa lista de 4-5 opções em sequência, um
   check pequeno se perde; a borda inteira não. */
.asa-choice--card {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: auto;
  padding: var(--asa-space-3) var(--asa-space-4);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
  transition: border-color var(--asa-dur-fast) var(--asa-ease);
}

.asa-choice--card:has(.asa-choice__input:checked) {
  border-color: var(--asa-ink);
  border-width: 2px;
}

.asa-choice--card .asa-choice__price {
  margin-left: auto;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  white-space: nowrap;
}

.asa-switch__input {
  appearance: none;
  flex: none;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: 12px;
  background: var(--asa-disabled-bg);
  border: var(--asa-border-width) solid var(--asa-line);
  position: relative;
  cursor: pointer;
  transition: background-color var(--asa-dur-fast) var(--asa-ease);
}

.asa-switch__input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: var(--asa-radius-full);
  background: var(--asa-white);
  border: 1px solid var(--asa-line);
  transition: transform var(--asa-dur-fast) var(--asa-ease);
}

.asa-switch__input:checked {
  background: var(--asa-ink);
  border-color: var(--asa-ink);
}

.asa-switch__input:checked::after {
  transform: translateX(20px);
  border-color: transparent;
}

/* ==========================================================================
   STEPPER
   Um formulário longo dividido em etapas reduz o esforço percebido, e o
   indicador comunica que existe um fim conhecido; a incerteza de "quanto
   ainda falta" é uma das maiores causas de abandono.
   ========================================================================== */

.asa-stepper {
  display: flex;
  align-items: flex-start;
  gap: var(--asa-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.asa-stepper__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 2px solid var(--asa-line);
  font-size: var(--asa-fs-label);
  line-height: 1.3;
  color: var(--asa-ink-3);
}

.asa-stepper__item[data-state="done"] {
  border-top-color: var(--asa-ok);
  color: var(--asa-ok);
}

.asa-stepper__item[aria-current="step"] {
  border-top-color: var(--asa-ink);
  color: var(--asa-ink);
  font-weight: var(--asa-weight-medium);
}

.asa-stepper__index {
  font-family: var(--asa-font-mono);
  font-size: var(--asa-fs-label);
  letter-spacing: var(--asa-tracking-mono);
  text-transform: uppercase;
}

.asa-stepper__label {
  font-size: var(--asa-fs-body-dense);
  line-height: 1.25;
  font-weight: inherit;
}

/* ==========================================================================
   BUSCA DE VEÍCULO
   O componente central de uma locadora: local e datas de retirada e
   devolução. Fica sobre branco, dentro do campo claro do vão.

   O motor completo tem 7 controles: abas de linha de negócio, local com
   autocomplete, dois pares data+hora, chips secundários e "Minha reserva".
   __row é o grid de 4 colunas dos campos; __tabs, __chips e __aside são
   opcionais. Quem só precisa dos 3 campos simples usa __row sozinho dentro
   de .asa-search, como nos exemplos deste arquivo.
   ========================================================================== */

.asa-search {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-3);
  padding: var(--asa-space-4);
  background: var(--asa-bg-elevated);
  border-radius: var(--asa-radius);
}

.asa-search__tabs {
  display: flex;
  gap: var(--asa-space-1);
}

.asa-search__tab {
  padding: 10px var(--asa-space-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink-3);
  cursor: pointer;
}

.asa-search__tab[aria-selected="true"] {
  color: var(--asa-ink);
  border-bottom-color: var(--asa-action);
}

.asa-search__row {
  display: grid;
  gap: var(--asa-space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .asa-search__row {
    grid-template-columns: 1.4fr 1fr 1fr auto;
    align-items: end;
  }
}

.asa-search__row .asa-btn { min-height: var(--asa-control-h); }

.asa-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asa-space-2);
}

.asa-search__aside {
  padding-top: var(--asa-space-3);
  border-top: var(--asa-border-width) solid var(--asa-line-soft);
}

/* --------------------------------------------------------------------------
   COMBOBOX: local com autocomplete, quatro tipos de lugar (aeroporto,
   cidade, bairro, destino) mais o código IATA. A lista mora dentro de um
   .asa-popover já existente; aqui só o conteúdo.
   -------------------------------------------------------------------------- */
.asa-combobox { position: relative; }

.asa-combobox__list {
  list-style: none;
  margin: 0;
  padding: var(--asa-space-1) 0;
  max-height: 320px;
  overflow-y: auto;
}

.asa-combobox__option {
  display: flex;
  align-items: center;
  gap: var(--asa-space-2);
  min-height: var(--asa-touch-min);
  padding: 0 var(--asa-space-3);
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink);
  cursor: pointer;
}

.asa-combobox__option:hover,
.asa-combobox__option[aria-selected="true"] {
  background: var(--asa-surface-hover);
}

.asa-combobox__option-type {
  flex: none;
  width: var(--asa-icon-dense);
  height: var(--asa-icon-dense);
  color: var(--asa-ink-3);
}

.asa-combobox__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.asa-combobox__name {
  font-weight: var(--asa-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asa-combobox__hint {
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

.asa-combobox__iata {
  margin-left: auto;
  flex: none;
  font-family: var(--asa-font-mono);
  font-size: var(--asa-fs-label);
  letter-spacing: var(--asa-tracking-mono);
  color: var(--asa-ink-3);
}

.asa-combobox__empty {
  padding: var(--asa-space-5) var(--asa-space-3);
  text-align: center;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-3);
}

/* --------------------------------------------------------------------------
   DATEPICKER: calendário de intervalo dentro de um .asa-popover. A diária
   de 27h só é vendável se a hora entrar na busca; ver .asa-timeselect,
   sempre ao lado, nunca sozinho.
   -------------------------------------------------------------------------- */
.asa-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--asa-space-3);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.asa-datepicker__weekday {
  padding: 4px 0;
  text-align: center;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

.asa-datepicker__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--asa-radius);
  background: none;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink);
  cursor: pointer;
}

.asa-datepicker__day:hover:not(:disabled) { background: var(--asa-surface-hover); }

/* Intervalo selecionado: o miolo usa a mesma opacidade baixíssima de
   --asa-surface-selected que o menu usa para item marcado: consistência
   de linguagem entre as duas superfícies flutuantes. */
.asa-datepicker__day[data-state="in-range"] { background: var(--asa-surface-selected); }

.asa-datepicker__day[data-state="start"],
.asa-datepicker__day[data-state="end"] {
  background: var(--asa-ink);
  color: var(--asa-ink-inverse);
}

.asa-datepicker__day:disabled {
  color: var(--asa-disabled-text);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   TIMESELECT: select nativo, sem popover próprio: a lista de horários é
   curta e estática, e o nativo já resolve teclado e leitor de tela sem
   reimplementar nada.
   -------------------------------------------------------------------------- */
.asa-timeselect {
  width: 100%;
  min-height: var(--asa-control-h);
  padding: 0 var(--asa-space-3);
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink);
}

/* --------------------------------------------------------------------------
   CHIP: quatro usos. Secundário do motor (idade, país da CNH, cupom), de
   intenção, de sazonalidade e de filtro rápido da vitrine.
   Radius 8px, nunca pill: a regra de forma da marca não abre exceção
   para chip (ver FORMA em asa-tokens.css: "nada mais é arredondado").
   -------------------------------------------------------------------------- */
.asa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--asa-touch-min);
  padding: 0 14px;
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink);
  cursor: pointer;
  transition: background-color var(--asa-dur-fast) var(--asa-ease),
              border-color var(--asa-dur-fast) var(--asa-ease),
              color var(--asa-dur-fast) var(--asa-ease);
}

.asa-chip:hover:not(:disabled) { border-color: var(--asa-ink); }

.asa-chip[aria-pressed="true"] {
  background: var(--asa-ink);
  border-color: var(--asa-ink);
  color: var(--asa-ink-inverse);
}

.asa-chip:disabled {
  color: var(--asa-disabled-text);
  border-color: var(--asa-disabled-bg);
  cursor: not-allowed;
}

.asa-chip__icon { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   BOOKING LOOKUP: o mesmo bloco em três lugares (dentro de um popover no
   header, no widget da home e em /minha-reserva). --plain tira
   a moldura própria para os contextos que já têm uma (o popover, o cartão
   da tela) por baixo.
   -------------------------------------------------------------------------- */
.asa-booking-lookup {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-3);
  padding: var(--asa-space-4);
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
}

.asa-booking-lookup--plain {
  padding: 0;
  border: none;
  background: none;
}

.asa-booking-lookup__title {
  margin: 0;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-booking-lookup__row {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-3);
}

@media (min-width: 560px) {
  .asa-booking-lookup__row {
    flex-direction: row;
    align-items: end;
  }
  .asa-booking-lookup__row .asa-field { flex: 1; }
}

/* ==========================================================================
   ALERTA
   Sem sombra e sem ícone colorido de fundo: borda de 1.5px e um rótulo mono.

   --warn é o canal de atenção, para que "esgotado", "documento recusado"
   e "campo inválido" não disputem o vermelho que é o orçamento do CTA.
   Usar --warn para explicar a caução com valor exato antes de pedir o
   cartão: é atenção, não erro nem ação.
   ========================================================================== */

.asa-alert {
  display: flex;
  gap: var(--asa-space-3);
  padding: var(--asa-space-4);
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-left-width: 4px;
  border-radius: var(--asa-radius);
}

.asa-alert--ok    { border-left-color: var(--asa-ok); }
.asa-alert--error { border-left-color: var(--asa-action-hover); }
.asa-alert--info  { border-left-color: var(--asa-ink); }
.asa-alert--warn  { border-left-color: var(--asa-warn); background: var(--asa-warn-bg); }

/* Compacta: cabe numa barra de resumo, sem o corpo de duas linhas. */
.asa-alert--compact {
  align-items: center;
  padding: var(--asa-space-3);
}

.asa-alert__body { display: flex; flex-direction: column; gap: 4px; }

.asa-alert__title {
  font-size: var(--asa-fs-body-dense);
  line-height: 1.3;
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-alert__text {
  font-size: var(--asa-fs-body-dense);
  line-height: 1.5;
  color: var(--asa-ink-2);
  max-width: none;
}

/* ==========================================================================
   SKELETON
   No formato do conteúdo final, não um spinner: a pessoa já entende a
   estrutura da tela antes dos dados chegarem, e lê isso como "quase pronto".
   Estático de propósito: um brilho em loop contínuo violaria o teto de
   400ms e a regra de que nada no sistema pulsa.
   ========================================================================== */

.asa-skeleton {
  background: var(--asa-disabled-bg);
  border-radius: var(--asa-radius);
}

.asa-skeleton--text  { height: 12px; }
.asa-skeleton--title { height: 18px; }
.asa-skeleton--media { aspect-ratio: 16 / 9; border-radius: 0; }

/* ==========================================================================
   CAMADA FLUTUANTE: overlay, modal, sheet, popover, menu, disclosure
   As superfícies fora do fluxo do documento, base do filtro, da busca, da
   comparação, do checkout e da conta.

   Por que não sobre branco: com o body branco, um popover branco separado
   do fundo branco por 14% de borda é praticamente invisível. A superfície
   flutuante é --asa-surface-float, o cinza mist (neutro claro sem viés de
   matiz); um tom amarelado leria como amarelo diluído em toda superfície
   flutuante do sistema.

   Estado por [data-state], nunca classe modificadora: é o padrão do resto
   do sistema (:disabled, [aria-invalid], [aria-current]).

   Movimento: entrada usa --asa-ease / --asa-dur-scene, igual ao resto do
   sistema. Saída usa --asa-ease-in e a duração mais curta, --asa-dur-fast:
   overlay que demora tanto para sair quanto para entrar parece travado,
   não deliberado. Nenhuma rotação em lugar nenhum: o indicador de
   disclosure troca de ícone, não gira.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OVERLAY: o véu por trás de modal e sheet. Sozinho, sem superfície: quem
   usa monta modal ou sheet dentro dele.
   -------------------------------------------------------------------------- */
.asa-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--asa-z-overlay);
  background: var(--asa-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--asa-dur-scene) var(--asa-ease);
}

.asa-overlay[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}

.asa-overlay[data-state="closing"] {
  transition-duration: var(--asa-dur-fast);
  transition-timing-function: var(--asa-ease-in);
}

/* --------------------------------------------------------------------------
   MODAL: diálogo centrado. Uso: confirmar cancelamento, explicar a
   caução com valor exato, comparar dois carros lado a lado no mobile.
   -------------------------------------------------------------------------- */
.asa-modal {
  position: fixed;
  inset: 0;
  z-index: var(--asa-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--asa-space-4);
  pointer-events: none;
}

.asa-modal[data-state="open"] { pointer-events: auto; }

.asa-modal__surface {
  width: 100%;
  max-width: 480px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  background: var(--asa-surface-float);
  border: var(--asa-border-width) solid var(--asa-line-strong);
  border-radius: var(--asa-radius);
  padding: var(--asa-space-6);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--asa-dur-scene) var(--asa-ease),
              transform var(--asa-dur-scene) var(--asa-ease);
}

.asa-modal[data-state="open"] .asa-modal__surface {
  opacity: 1;
  transform: none;
}

.asa-modal[data-state="closing"] .asa-modal__surface {
  transition-duration: var(--asa-dur-fast);
  transition-timing-function: var(--asa-ease-in);
}

.asa-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--asa-space-3);
  margin-bottom: var(--asa-space-4);
}

.asa-modal__title {
  font-size: var(--asa-fs-highlight);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  margin: 0;
}

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

.asa-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--asa-space-3);
  margin-top: var(--asa-space-6);
}

/* --------------------------------------------------------------------------
   SHEET: a mesma função do modal, ancorada embaixo. Padrão mobile: filtro
   da vitrine, seleção de proteção, disclosure de devolução no motor.
   -------------------------------------------------------------------------- */
.asa-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--asa-z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.asa-sheet[data-state="open"] { pointer-events: auto; }

.asa-sheet__surface {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--asa-surface-float);
  border: var(--asa-border-width) solid var(--asa-line-strong);
  border-bottom: none;
  border-radius: var(--asa-radius) var(--asa-radius) 0 0;
  padding: var(--asa-space-3) var(--asa-space-6) var(--asa-space-6);
  transform: translateY(100%);
  transition: transform var(--asa-dur-scene) var(--asa-ease);
}

.asa-sheet[data-state="open"] .asa-sheet__surface { transform: none; }

.asa-sheet[data-state="closing"] .asa-sheet__surface {
  transition-duration: var(--asa-dur-fast);
  transition-timing-function: var(--asa-ease-in);
}

/* Puxador: sinaliza "isto arrasta" sem precisar de instrução escrita. */
.asa-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: var(--asa-radius-full);
  background: var(--asa-line-strong);
  margin: 0 auto var(--asa-space-4);
}

/* --------------------------------------------------------------------------
   POPOVER: ancorado a um elemento, sem véu por trás. Uso: sugestão do
   autocomplete de local, calendário do date picker, tooltip de ajuda.
   Posicionar com JS (getBoundingClientRect do gatilho); o CSS só cobre a
   superfície e a transição, não o cálculo de posição.
   -------------------------------------------------------------------------- */
.asa-popover {
  position: absolute;
  z-index: var(--asa-z-popover);
  min-width: 220px;
  background: var(--asa-surface-float);
  border: var(--asa-border-width) solid var(--asa-line-strong);
  border-radius: var(--asa-radius);
  padding: var(--asa-space-3);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--asa-dur-fast) var(--asa-ease),
              transform var(--asa-dur-fast) var(--asa-ease);
}

.asa-popover[data-state="open"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.asa-popover[data-state="closing"] {
  transition-timing-function: var(--asa-ease-in);
}

/* --------------------------------------------------------------------------
   MENU: lista de ações dentro de uma superfície flutuante (conta,
   idioma, ações do card salvo). Vive dentro de um .asa-popover.
   -------------------------------------------------------------------------- */
.asa-menu {
  list-style: none;
  margin: 0;
  padding: var(--asa-space-2) 0;
  display: flex;
  flex-direction: column;
}

.asa-menu__item {
  display: flex;
  align-items: center;
  gap: var(--asa-space-2);
  min-height: var(--asa-touch-min);
  padding: 0 var(--asa-space-3);
  background: none;
  border: none;
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--asa-dur-fast) var(--asa-ease);
}

.asa-menu__item:hover:not(:disabled),
.asa-menu__item:focus-visible {
  background: var(--asa-surface-hover);
}

.asa-menu__item[data-state="selected"] {
  background: var(--asa-surface-selected);
  font-weight: var(--asa-weight-medium);
}

.asa-menu__item--danger { color: var(--asa-action-hover); }

.asa-menu__item:disabled {
  color: var(--asa-disabled-text);
  cursor: not-allowed;
}

.asa-menu__divider {
  height: var(--asa-border-width);
  background: var(--asa-line-soft);
  border: none;
  margin: var(--asa-space-2) 0;
}

/* --------------------------------------------------------------------------
   DISCLOSURE: expandir/recolher inline, não flutuante. Uso: FAQ,
   detalhamento de proteção, "o que muda se eu cancelar".
   O indicador TROCA de ícone, nunca gira. É regra dura do sistema
   (11-movimento.html): nada gira, nada pulsa, nada tem bounce.
   -------------------------------------------------------------------------- */
.asa-disclosure { border-bottom: var(--asa-border-width) solid var(--asa-line); }

.asa-disclosure__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-3);
  width: 100%;
  min-height: var(--asa-touch-min);
  padding: var(--asa-space-3) 0;
  background: none;
  border: none;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink);
  text-align: left;
  cursor: pointer;
}

.asa-disclosure__icon--open  { display: none; }
.asa-disclosure__icon--closed { display: block; }

.asa-disclosure[data-state="open"] .asa-disclosure__icon--open  { display: block; }
.asa-disclosure[data-state="open"] .asa-disclosure__icon--closed { display: none; }

.asa-disclosure__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--asa-dur-scene) var(--asa-ease);
}

.asa-disclosure[data-state="open"] .asa-disclosure__panel {
  max-height: var(--asa-disclosure-h, 480px);
}

.asa-disclosure__body {
  padding-bottom: var(--asa-space-4);
  color: var(--asa-ink-2);
}

/* --------------------------------------------------------------------------
   SKIP LINK: obrigatório em acessibilidade. A documentação não precisa
   dele (a navbar é curta), mas o portal, com header de duas camadas, sim.
   Invisível até ganhar foco de teclado.
   -------------------------------------------------------------------------- */
.asa-skiplink {
  position: fixed;
  top: -100%;
  left: var(--asa-space-3);
  z-index: var(--asa-z-toast);
  padding: 12px 20px;
  background: var(--asa-ink);
  color: var(--asa-ink-inverse);
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-medium);
  text-decoration: none;
  transition: top var(--asa-dur-fast) var(--asa-ease);
}

.asa-skiplink:focus {
  top: var(--asa-space-3);
}

/* ==========================================================================
   NAVEGAÇÃO DE PRODUTO
   asa-doc-nav (em asa-docs.css) é chrome desta documentação e não vai
   para produção. Estes três são o menu real do portal, em duas camadas:
   utility bar e navbar, mais o navdrawer no celular.
   ========================================================================== */

/* --------------------------------------------------------------------------
   UTILITY BAR: a camada de cima. Não é sticky de propósito: rola para
   fora, e é assim que o navbar abaixo assume sozinho o offset de
   --asa-header-h quando gruda no topo, sem precisar somar duas alturas.
   -------------------------------------------------------------------------- */
/* Some abaixo de 768px: telefone, cidade e idioma cabem no navdrawer, que
   já leva "Minha reserva"; não vale disputar 36px de altura com texto que
   quebra em duas linhas e estoura a barra. */
.asa-utilitybar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-4);
  height: 36px;
  padding: 0 var(--asa-space-6);
  background: var(--asa-bg-dense);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-inverse-2);
}

@media (min-width: 768px) {
  .asa-utilitybar { display: flex; }
}

.asa-utilitybar__group {
  display: flex;
  align-items: center;
  gap: var(--asa-space-4);
  height: 100%;
}

.asa-utilitybar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.asa-utilitybar__link:hover { color: var(--asa-ink-inverse); }

.asa-utilitybar__link .asa-icon { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   NAVBAR: a camada de baixo, sticky. É esta altura que --asa-header-h
   mede. O link ocupa 100% da altura do header, não só a do seu próprio
   texto, para que o alvo de toque seja o header inteiro, não uma faixa de
   20px dentro dele (o mesmo princípio de asa-doc-nav).
   -------------------------------------------------------------------------- */
.asa-navbar {
  position: sticky;
  top: 0;
  z-index: var(--asa-z-sticky);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--asa-space-4);
  height: var(--asa-header-h);
  padding: 0 var(--asa-space-6);
  background: var(--asa-bg-elevated);
  border-bottom: var(--asa-border-width) solid var(--asa-line);
}

.asa-navbar__brand {
  display: flex;
  align-items: center;
  flex: none;
}

.asa-navbar__brand img { height: 26px; width: auto; }

.asa-navbar__nav {
  display: none;
  align-items: stretch;
  gap: var(--asa-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .asa-navbar__nav { display: flex; }
}

.asa-navbar__link {
  display: flex;
  align-items: center;
  height: 100%;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.asa-navbar__link:hover { color: var(--asa-ink); }

.asa-navbar__link[aria-current="page"] {
  color: var(--asa-ink);
  font-weight: var(--asa-weight-bold);
  border-bottom-color: var(--asa-action);
}

.asa-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--asa-space-3);
  flex: none;
}

.asa-navbar__toggle { display: inline-flex; }

@media (min-width: 1024px) {
  .asa-navbar__toggle { display: none; }
}

/* --------------------------------------------------------------------------
   NAVDRAWER: substituto mobile do menu horizontal. Mesmo par overlay +
   painel do modal e do sheet; muda só a direção de entrada (lateral).
   -------------------------------------------------------------------------- */
.asa-navdrawer {
  position: fixed;
  inset: 0;
  z-index: var(--asa-z-modal);
  display: flex;
  pointer-events: none;
}

.asa-navdrawer[data-state="open"] { pointer-events: auto; }

.asa-navdrawer__surface {
  width: min(320px, 86vw);
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-4);
  background: var(--asa-surface-float);
  border-right: var(--asa-border-width) solid var(--asa-line-strong);
  padding: var(--asa-space-4);
  transform: translateX(-100%);
  transition: transform var(--asa-dur-scene) var(--asa-ease);
}

.asa-navdrawer[data-state="open"] .asa-navdrawer__surface { transform: none; }

.asa-navdrawer[data-state="closing"] .asa-navdrawer__surface {
  transition-duration: var(--asa-dur-fast);
  transition-timing-function: var(--asa-ease-in);
}

.asa-navdrawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.asa-navdrawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.asa-navdrawer__link {
  display: flex;
  align-items: center;
  min-height: var(--asa-touch-min);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-highlight);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  text-decoration: none;
  border-bottom: var(--asa-border-width) solid var(--asa-line-soft);
}

.asa-navdrawer__link[aria-current="page"] { color: var(--asa-action); }

/* ==========================================================================
   VITRINE
   O lado de mostrar o carro: filtro, resultado, ficha técnica, nota e o
   estado vazio que os filtros combináveis produzem inevitavelmente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FILTROS: vive dentro de .asa-layout-2col. Cada opção é um .asa-choice
   com a contagem à direita; contagem zero desabilita o input, nunca
   esconde a opção (esconder muda o layout a cada clique).
   -------------------------------------------------------------------------- */
.asa-filters {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-5);
}

.asa-filters__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--asa-space-4);
  border-bottom: var(--asa-border-width) solid var(--asa-line-soft);
}

.asa-filters__group:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

.asa-filters__group-title {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  line-height: var(--asa-lh-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  margin-bottom: 6px;
}

.asa-filters__option {
  justify-content: space-between;
  width: 100%;
}

.asa-filters__count {
  flex: none;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

.asa-filters__clear {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   RESULT BAR: "32 carros disponíveis · Ordenar: Recomendado ▾".
   -------------------------------------------------------------------------- */
.asa-resultbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-3);
  padding-bottom: var(--asa-space-3);
  border-bottom: var(--asa-border-width) solid var(--asa-line-soft);
}

.asa-resultbar__count {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-subtitle);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-resultbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asa-space-2);
}

.asa-resultbar__sort {
  display: flex;
  align-items: center;
  gap: var(--asa-space-2);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
  white-space: nowrap;
}

.asa-resultbar__sort .asa-select {
  width: auto;
  min-height: 36px;
  padding: 0 var(--asa-space-3);
}

/* --------------------------------------------------------------------------
   SPECLIST: os cinco atributos do card (lugares, malas, câmbio, ar, km
   livre). Slot, não parágrafo: cada atributo é procurável e estilizável
   sozinho.

   No CARD de vitrine a lista é texto, sem ícone por atributo (--text):
   seis cards com três ícones cada seriam 18 ícones repetidos numa tela.
   O ícone por atributo fica para a página do carro, onde a lista é longa
   e o olho precisa de âncora.
   -------------------------------------------------------------------------- */
.asa-speclist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--asa-space-2) var(--asa-space-4);
}

.asa-speclist__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
}

.asa-speclist__item .asa-icon {
  width: var(--asa-icon-dense);
  height: var(--asa-icon-dense);
  color: var(--asa-ink-3);
}

.asa-speclist--text { gap: 0 6px; color: var(--asa-ink-3); }
.asa-speclist--text .asa-speclist__item { color: inherit; }
.asa-speclist--text .asa-speclist__item .asa-icon { display: none; }
.asa-speclist--text .asa-speclist__item + .asa-speclist__item::before { content: "·"; margin-right: 6px; }

/* --------------------------------------------------------------------------
   RATING: nota dentro do card, no ponto de decisão.
   Nunca estrela amarela: o amarelo é o ativo cromático mais forte
   da marca, e "avaliação" não pode virar o que ele significa. Sem
   estrela é o padrão; __icon existe só para quem decidir usá-la, sempre
   em --asa-ink.
   -------------------------------------------------------------------------- */
.asa-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.asa-rating__value {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-rating__icon {
  width: 14px;
  height: 14px;
  color: var(--asa-ink);
  align-self: center;
}

.asa-rating__count,
.asa-rating__source {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

/* --------------------------------------------------------------------------
   EMPTY STATE: consequência inevitável de filtros combináveis.
   -------------------------------------------------------------------------- */
.asa-emptystate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--asa-space-3);
  padding: var(--asa-space-9) var(--asa-space-4);
}

.asa-emptystate .asa-icon--feature { color: var(--asa-ink-3); }

.asa-emptystate__title {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-subtitle);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  margin: 0;
}

.asa-emptystate__text {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-3);
  max-width: 40ch;
}

/* ==========================================================================
   FUNIL
   Os seis componentes do checkout: resumo, upsell, comparação de
   proteção, adicional, detalhamento de preço e meio de pagamento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SUMMARY: o resumo do pedido, fixo à direita no desktop e em barra no
   celular. --sticky e --bar convivem no mesmo markup: o CSS troca por
   breakpoint, ninguém precisa decidir em JS.
   -------------------------------------------------------------------------- */
.asa-summary {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-3);
  padding: var(--asa-space-4);
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
}

.asa-summary--sticky {
  display: none;
}

@media (min-width: 1024px) {
  .asa-summary--sticky {
    display: flex;
    position: sticky;
    top: calc(var(--asa-header-h) + var(--asa-space-4));
  }
}

.asa-summary--bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--asa-z-sticky);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 0;
  border: none;
  border-top: var(--asa-border-width) solid var(--asa-line);
}

@media (min-width: 1024px) {
  .asa-summary--bar { display: none; }
}

.asa-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--asa-space-3);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
}

.asa-summary__row--total {
  padding-top: var(--asa-space-3);
  border-top: var(--asa-border-width) solid var(--asa-line-soft);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

/* --------------------------------------------------------------------------
   UPSELL: a oferta de upgrade com preço por dia e prova social na mesma
   linha ("+R$3,00/dia, escolhido por 4 em cada 10 clientes").
   -------------------------------------------------------------------------- */
.asa-upsell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-3);
  padding: var(--asa-space-4);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
  cursor: pointer;
}

.asa-upsell__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asa-upsell__title {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-upsell__proof {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

.asa-upsell__delta {
  flex: none;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   COMPARISON: tabela comparativa de proteções, lado a lado, no lugar de
   blocos de texto (etapa 3 do funil).
   -------------------------------------------------------------------------- */
.asa-comparison {
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
  overflow: hidden;
  overflow-x: auto;
}

/* --asa-comparison-cols é o número de planos comparados (padrão 3);
   declarar no elemento .asa-comparison quando o número mudar. auto-fit não
   serve aqui: o número de colunas é decidido por quem monta a tela, não
   pelo espaço disponível, que só decide se a tabela rola ou não. */
.asa-comparison__row {
  display: grid;
  grid-template-columns: 1.4fr repeat(var(--asa-comparison-cols, 3), minmax(90px, 1fr));
  min-width: 480px;
}

.asa-comparison__row + .asa-comparison__row {
  border-top: var(--asa-border-width) solid var(--asa-line-soft);
}

.asa-comparison__row--head {
  background: var(--asa-bg);
}

.asa-comparison__col {
  padding: var(--asa-space-3);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
  border-left: var(--asa-border-width) solid var(--asa-line-soft);
}

.asa-comparison__col:first-child {
  border-left: none;
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink);
}

.asa-comparison__row--head .asa-comparison__col {
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-comparison__col--selected { background: var(--asa-surface-selected); }

/* --------------------------------------------------------------------------
   PRICE BREAKDOWN: mora dentro de um .asa-disclosure. Reaproveita
   .asa-summary__row: são a mesma linha "rótulo · valor" em dois lugares
   do funil, e um segundo nome de classe para o mesmo desenho seria
   dívida, não componente.
   -------------------------------------------------------------------------- */
.asa-pricebreakdown {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-2);
}

/* --------------------------------------------------------------------------
   PAYMETHOD: "12x sem juros, desconto no Pix, combinar meios". Pix
   turquesa: cor de terceiro isolada neste selo.
   -------------------------------------------------------------------------- */
.asa-paymethod {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-3);
}

.asa-paymethod__pix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--asa-radius);
  background: #E6F9F6;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  font-weight: var(--asa-weight-medium);
  color: #0F7A6E;
}

.asa-paymethod__installments {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

.asa-paymethod__discount {
  font-family: var(--asa-font);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ok);
}

/* ==========================================================================
   PÓS-VENDA
   asa-card-booking e asa-tasklist: /minha-reserva por inteiro, tudo
   resolvido sem sair da página.
   ========================================================================== */

.asa-card-booking__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-3);
  padding: var(--asa-space-4) var(--asa-space-4) 0;
}

.asa-card-booking__code {
  font-family: var(--asa-font-mono);
  font-size: var(--asa-fs-label);
  letter-spacing: var(--asa-tracking-mono);
  color: var(--asa-ink-3);
}

.asa-card-booking__body {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-2);
  padding: var(--asa-space-3) var(--asa-space-4);
}

.asa-card-booking__vehicle {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-subtitle);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-card-booking__footer {
  display: flex;
  gap: var(--asa-space-2);
  padding: 0 var(--asa-space-4) var(--asa-space-4);
}

/* Lista de tarefas, não stepper (uma etapa por vez, ordem fixa): aqui
   as tarefas podem ser concluídas fora de ordem, cada uma independente. */
.asa-tasklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.asa-tasklist__item {
  display: flex;
  align-items: center;
  gap: var(--asa-space-3);
  min-height: var(--asa-touch-min);
  padding: var(--asa-space-2) 0;
  border-bottom: var(--asa-border-width) solid var(--asa-line-soft);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
}

.asa-tasklist__item:last-child { border-bottom: none; }

.asa-tasklist__item .asa-icon {
  flex: none;
  color: var(--asa-ink-3);
}

.asa-tasklist__item[data-state="done"] {
  color: var(--asa-ink-3);
  text-decoration: line-through;
}

.asa-tasklist__item[data-state="done"] .asa-icon { color: var(--asa-ok); }

.asa-tasklist__item[aria-current="step"] {
  color: var(--asa-ink);
  font-weight: var(--asa-weight-medium);
}

/* ==========================================================================
   CONFIANÇA E CONFORMIDADE
   asa-reassurance, asa-consent, asa-stickybar e asa-figure: a trinca de
   reasseguro, o consentimento LGPD, a barra fixa de cupom e a foto real
   que substitui o hachurado quando ela existir.
   ========================================================================== */

.asa-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asa-space-5);
}

.asa-reassurance__item {
  display: flex;
  align-items: center;
  gap: var(--asa-space-2);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
}

.asa-reassurance__item .asa-icon {
  flex: none;
  color: var(--asa-ok);
}

.asa-reassurance__proof {
  width: 100%;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  font-style: italic;
  color: var(--asa-ink-3);
}

/* Consentimento: banner fixo no rodapé da viewport até decisão; __prefs
   é o painel de granularidade, revelado por disclosure, não por padrão. */
.asa-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--asa-z-toast);
  padding: var(--asa-space-4);
  background: var(--asa-bg-elevated);
  border-top: var(--asa-border-width) solid var(--asa-line);
}

.asa-consent[data-state="closed"] { display: none; }

.asa-consent__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-4);
  max-width: var(--asa-container-max);
  margin-inline: auto;
}

.asa-consent__text {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
  max-width: 60ch;
  margin: 0;
}

.asa-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asa-space-2);
}

.asa-consent__prefs {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-3);
  margin-top: var(--asa-space-4);
  padding-top: var(--asa-space-4);
  border-top: var(--asa-border-width) solid var(--asa-line-soft);
  max-width: var(--asa-container-max);
  margin-inline: auto;
}

/* Sticky bar: cupom de primeira locação, em vez de um slide de carrossel
   que passa. Sticky sob o navbar, não fixed: some com o scroll
   para cima do topo, nunca sobrepõe o header. */
.asa-stickybar {
  position: sticky;
  top: var(--asa-header-h);
  z-index: var(--asa-z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--asa-space-3);
  padding: 10px 44px;
  background: var(--asa-ink);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-inverse);
  text-align: center;
}

.asa-stickybar[data-state="closed"] { display: none; }

.asa-stickybar__dismiss {
  position: absolute;
  right: var(--asa-space-3);
  color: var(--asa-ink-inverse);
}

/* Figura: o modo "foto real" que asa-photo (hachura) substitui quando a
   fotografia existir. Mesma proporção, mesma legenda, câmera diferente. */
.asa-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.asa-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Legenda sobre foto: tinta cheia num chip preto, nunca texto solto com
   sombra (o sistema não tem sombra, e branco sobre foto clara reprova). */
.asa-figure__caption {
  position: absolute;
  left: var(--asa-space-3);
  bottom: var(--asa-space-3);
  padding: 6px 10px;
  background: var(--asa-ink);
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  line-height: var(--asa-lh-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink-inverse);
}

.asa-figure--16x9  { aspect-ratio: 16 / 9; }
.asa-figure--4x5   { aspect-ratio: 4 / 5; }
.asa-figure--16x10 { aspect-ratio: 16 / 10; }

/* ==========================================================================
   NAVEGAÇÃO ESTENDIDA
   Rodapé, trilha de localização, alternância de contexto e a barra de abas
   de app.
   ========================================================================== */

/* Rodapé: hub de links por abas (Aeroportos/Cidades/Destinos). É a única
   superfície do sistema, além do vídeo, em --asa-bg-deep: aqui não há
   flutuação a resolver, é chão de página. */
.asa-footer {
  background: var(--asa-bg-deep);
  color: var(--asa-ink-inverse-2);
  padding: var(--asa-space-9) var(--asa-space-4) var(--asa-space-6);
}

.asa-footer__inner {
  max-width: var(--asa-container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-7);
}

.asa-footer__brand img { height: 28px; width: auto; }

.asa-footer__tabs {
  display: flex;
  gap: var(--asa-space-1);
  border-bottom: var(--asa-border-width) solid var(--asa-line-inverse);
}

.asa-footer__tab {
  padding: var(--asa-space-2) var(--asa-space-1) var(--asa-space-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink-inverse-2);
  cursor: pointer;
}

.asa-footer__tab[aria-selected="true"] {
  color: var(--asa-ink-inverse);
  border-bottom-color: var(--asa-yellow);
}

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

@media (min-width: 768px) {
  .asa-footer__linkhub { grid-template-columns: repeat(4, 1fr); }
}

.asa-footer__group { display: flex; flex-direction: column; }

.asa-footer__group-title {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  line-height: var(--asa-lh-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink-inverse);
  margin: 0 0 var(--asa-space-3);
}

.asa-footer__link {
  display: block;
  padding: 4px 0;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-inverse-2);
  text-decoration: none;
}

.asa-footer__link:hover { color: var(--asa-ink-inverse); }

.asa-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-3);
  padding-top: var(--asa-space-6);
  border-top: var(--asa-border-width) solid var(--asa-line-inverse);
}

.asa-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asa-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-gray-dark-1);
}

.asa-footer__legal a { color: inherit; text-decoration: none; }
.asa-footer__legal a:hover { color: var(--asa-ink-inverse); }

.asa-footer__social { display: flex; gap: var(--asa-space-3); }
.asa-footer__social .asa-icon { width: 18px; height: 18px; color: var(--asa-ink-inverse-2); }
.asa-footer__social a:hover .asa-icon { color: var(--asa-ink-inverse); }

/* Breadcrumb: trilha de até 4 níveis. O último
   item é a página atual e não é link, mesmo padrão de aria-current do
   navbar e do navdrawer. */
.asa-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
}

.asa-breadcrumb__item { display: flex; align-items: center; gap: 6px; }

.asa-breadcrumb__link { color: var(--asa-ink-3); text-decoration: none; }
.asa-breadcrumb__link:hover { color: var(--asa-ink); text-decoration: underline; }

.asa-breadcrumb__item[aria-current="page"] {
  color: var(--asa-ink);
  font-weight: var(--asa-weight-medium);
}

.asa-breadcrumb__sep { width: 12px; height: 12px; color: var(--asa-ink-3); }

/* Tabs: variante de linha para trocar categoria de conteúdo/linha de
   negócio, e --segmented para alternância binária de contexto
   (Alugar | Comprar). É o mesmo padrão de linha de asa-search__tab,
   disponível fora do motor de busca. */
.asa-tabs {
  display: flex;
  gap: var(--asa-space-1);
  border-bottom: var(--asa-border-width) solid var(--asa-line);
}

.asa-tabs__tab {
  padding: 10px var(--asa-space-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink-3);
  cursor: pointer;
}

.asa-tabs__tab[aria-selected="true"] {
  color: var(--asa-ink);
  font-weight: var(--asa-weight-bold);
  border-bottom-color: var(--asa-action);
}

/* Segmentado: os dois lados têm peso igual, por isso um traço de fundo
   neutro em vez de um preenchimento vermelho: preenchido leria como um
   terceiro botão na tela, disputando com o CTA. */
.asa-tabs--segmented {
  display: inline-flex;
  width: fit-content;
  gap: var(--asa-space-1);
  border: none;
  padding: 3px;
  background: var(--asa-disabled-bg);
  border-radius: var(--asa-radius);
}

.asa-tabs--segmented .asa-tabs__tab {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: calc(var(--asa-radius) - 3px);
  padding: 8px var(--asa-space-4);
  color: var(--asa-ink-2);
}

.asa-tabs--segmented .asa-tabs__tab[aria-selected="true"] {
  background: var(--asa-bg-elevated);
  color: var(--asa-ink);
}

/* Tab bar de app. O estado ativo usa o mesmo sinal do link de navbar:
   cor + peso + traço vermelho como indicador de posição. Não é uma segunda
   ação; é a mesma linguagem de "onde eu estou" do navbar. */
.asa-tabbar {
  display: flex;
  align-items: stretch;
  background: var(--asa-bg-elevated);
  border-top: var(--asa-border-width) solid var(--asa-line);
}

.asa-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--asa-space-2) 0;
  border-top: 2px solid transparent;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
  text-decoration: none;
}

.asa-tabbar__item[aria-current="page"] {
  color: var(--asa-ink);
  font-weight: var(--asa-weight-medium);
  border-top-color: var(--asa-action);
}

/* ==========================================================================
   VITRINE ESTENDIDA
   Prateleiras contextuais e os quatro cartões de conteúdo/local que a home
   e os hubs de página precisam além do card de veículo.
   ========================================================================== */

/* Prateleira: rolagem nativa com o PRÓXIMO CARD À MOSTRA (1,15 cards no
   celular, 2,2 no tablet, 3,25 no desktop). A borda do card seguinte é a
   pista de que há mais, e por isso não existe bolinha de paginação ("nada
   gira" também vale para indicador que pisca). Setas, sim: são botões,
   não animação. .asa-shelf__nav com dois .asa-btn--icon, desativados nas
   pontas por JS; sem JS, [data-js] esconde a navegação e a rolagem nativa
   continua funcionando. O deslize respeita o teto de 400ms. */
.asa-shelf { display: flex; flex-direction: column; --asa-shelf-cols: 1.15; }

@media (min-width: 768px)  { .asa-shelf { --asa-shelf-cols: 2.2; } }
@media (min-width: 1024px) { .asa-shelf { --asa-shelf-cols: 3.25; } }

.asa-shelf__nav { display: flex; gap: var(--asa-space-2); flex-shrink: 0; }
.asa-shelf__nav .asa-btn:disabled { opacity: .4; cursor: not-allowed; background: transparent; }

.asa-shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--asa-space-3);
  margin-bottom: var(--asa-space-4);
}

.asa-shelf__title {
  font-size: var(--asa-fs-subtitle);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  margin: 0;
}

.asa-shelf__link {
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-action-hover);
  text-decoration: none;
  white-space: nowrap;
}

.asa-shelf__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--asa-shelf-cols) - 1) * var(--asa-space-6)) / var(--asa-shelf-cols));
  gap: var(--asa-space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--asa-space-2);
  margin-bottom: calc(var(--asa-space-2) * -1);
  scrollbar-width: none;
}

.asa-shelf__track::-webkit-scrollbar { display: none; }

.asa-shelf__track > * {
  min-width: 0;
  scroll-snap-align: start;
}

/* Card de destino. Duas formas: título ABAIXO da foto (padrão de prateleira)
   ou SOBRE a foto, num chip branco (--overlay), para a grade assimétrica de
   destinos da home: 2 tiles grandes + 2 pequenos (.asa-destgrid). O nome
   sobre a foto é o que faz a foto virar conteúdo em vez de ilustração. */
.asa-card-destination { display: block; text-decoration: none; color: inherit; }

.asa-card-destination--overlay { position: relative; overflow: hidden; border-radius: var(--asa-radius); }
.asa-card-destination--overlay .asa-figure,
.asa-card-destination--overlay .asa-photo { height: 100%; }

.asa-card-destination--overlay .asa-card-destination__body {
  position: absolute;
  left: var(--asa-space-4);
  bottom: var(--asa-space-4);
  padding: var(--asa-space-2) var(--asa-space-3);
  background: var(--asa-bg-elevated);
  border-radius: var(--asa-radius);
}

.asa-card-destination--overlay .asa-card-destination__title { margin: 0; }

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

.asa-destgrid > * { aspect-ratio: 1; }
.asa-destgrid > .asa-destgrid__lg { grid-column: span 2; aspect-ratio: 16 / 10; }
.asa-destgrid > .asa-destgrid__wide { grid-column: span 2; aspect-ratio: 16 / 7; }

@media (min-width: 768px) {
  .asa-destgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--asa-space-6); height: 560px; }
  .asa-destgrid > * { aspect-ratio: auto; }
  .asa-destgrid > .asa-destgrid__lg { grid-row: span 2; }
}

.asa-card-destination__title {
  margin: var(--asa-space-2) 0 2px;
  font-size: var(--asa-fs-subtitle);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-card-destination__note {
  margin: 0;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

/* Oferta: o único card da vitrine, além do de veículo, com permissão para
   um selo cheio. É a própria promoção, não um veículo com etiqueta
   anexada, então não disputa a cota do vermelho único. */
.asa-card-offer {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-2);
  padding: var(--asa-space-4);
}

.asa-card-offer__title {
  margin: 0;
  font-size: var(--asa-fs-subtitle);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-card-offer__text {
  margin: 0;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
}

.asa-card-store {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--asa-space-4);
}

.asa-card-store__title {
  margin: 0 0 2px;
  font-size: var(--asa-fs-subtitle);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-card-store__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
}

.asa-card-store__row .asa-icon {
  width: var(--asa-icon-dense);
  height: var(--asa-icon-dense);
  color: var(--asa-ink-3);
  margin-top: 2px;
}

.asa-card-store__link { font-weight: var(--asa-weight-medium); color: var(--asa-action-hover); }

.asa-card-article {
  display: flex;
  flex-direction: column;
  padding: var(--asa-space-4);
}

.asa-card-article__category {
  font-family: var(--asa-font);
  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);
}

.asa-card-article__title {
  margin: 6px 0 0;
  font-size: var(--asa-fs-subtitle);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-card-article__excerpt {
  margin: 4px 0 0;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
}

.asa-card-article__meta {
  margin-top: var(--asa-space-2);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

/* Paginação, para blog e listagens longas. Página atual em
   preenchimento ink, nunca vermelho: é posição, não ação. */
.asa-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--asa-space-1);
}

.asa-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--asa-touch-min);
  height: var(--asa-touch-min);
  padding: 0 4px;
  border: none;
  background: none;
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink-2);
  text-decoration: none;
}

.asa-pagination__item:hover { background: var(--asa-surface-hover); }

.asa-pagination__item[aria-current="page"] {
  background: var(--asa-ink);
  color: var(--asa-ink-inverse);
}

.asa-pagination__item:disabled,
.asa-pagination__item[aria-disabled="true"] {
  color: var(--asa-disabled-text);
  pointer-events: none;
}

/* ==========================================================================
   CONTEÚDO EDITORIAL
   Além de h1/h2/h3/p/small: o bloco de texto corrido, o agrupador de FAQ
   e a prova social em formato de depoimento, para blog, dúvidas e
   institucional.
   ========================================================================== */

.asa-prose {
  max-width: var(--asa-measure);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body);
  line-height: var(--asa-lh-body);
  color: var(--asa-ink-2);
}

.asa-prose h2 {
  font-size: var(--asa-fs-title);
  line-height: var(--asa-lh-title);
  font-weight: var(--asa-weight-bold);
  letter-spacing: var(--asa-tracking-title);
  color: var(--asa-ink);
  margin: var(--asa-space-8) 0 var(--asa-space-3);
}

.asa-prose h2:first-child { margin-top: 0; }

.asa-prose h3 {
  font-size: var(--asa-fs-highlight);
  line-height: var(--asa-lh-highlight);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
  margin: var(--asa-space-6) 0 var(--asa-space-2);
}

.asa-prose p,
.asa-prose ul,
.asa-prose ol { margin: 0 0 var(--asa-space-4); }

.asa-prose ul,
.asa-prose ol { padding-left: 1.2em; }

.asa-prose a { color: var(--asa-action-hover); text-decoration: underline; }
.asa-prose strong { color: var(--asa-ink); font-weight: var(--asa-weight-bold); }

/* Accordion: agrupador de asa-disclosure para FAQ. O disclosure resolve o
   item individual; isto só fecha a borda superior do grupo. Reuso, não um
   quarto padrão de expansível. */
.asa-accordion { border-top: var(--asa-border-width) solid var(--asa-line); }

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

.asa-testimonial__quote {
  margin: 0;
  font-size: var(--asa-fs-highlight);
  line-height: var(--asa-lh-highlight);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink);
}

.asa-testimonial__quote::before { content: '"'; }
.asa-testimonial__quote::after  { content: '"'; }

/* Rodapé do depoimento: nome e fonte. O avatar é opcional: sem foto da
   pessoa, não se usa o ícone de marca no lugar dela (a asa não é a cliente). */
.asa-testimonial__footer { display: flex; align-items: center; gap: var(--asa-space-3); }

.asa-testimonial__name {
  display: block;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-testimonial__source {
  display: block;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-label);
  color: var(--asa-ink-3);
}

/* ==========================================================================
   CONTA
   Upload de documento (Asa Express), código de verificação e o cartão de
   plano de assinatura.
   ========================================================================== */

/* Dropzone: mesmo tratamento de superfície de asa-field, para não parecer
   um componente de terceiro dentro do formulário. */
.asa-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--asa-space-2);
  text-align: center;
  padding: var(--asa-space-7) var(--asa-space-4);
  border: var(--asa-border-width) dashed var(--asa-line-strong);
  border-radius: var(--asa-radius);
  background: var(--asa-bg-elevated);
}

.asa-upload__dropzone .asa-icon--feature { color: var(--asa-ink-3); }

.asa-upload__text { margin: 0; font-family: var(--asa-font); font-size: var(--asa-fs-body-dense); color: var(--asa-ink-2); }
.asa-upload__hint { margin: 0; font-family: var(--asa-font); font-size: var(--asa-fs-label); color: var(--asa-ink-3); }

.asa-upload[data-state="dragover"] .asa-upload__dropzone {
  border-color: var(--asa-ink);
  background: var(--asa-surface-hover);
}

.asa-upload[data-state="error"] .asa-upload__dropzone {
  border-style: solid;
  border-color: var(--asa-action-hover);
}

.asa-upload[data-state="done"] .asa-upload__dropzone {
  border-style: solid;
  border-color: var(--asa-ok);
}

.asa-upload__file {
  display: flex;
  align-items: center;
  gap: var(--asa-space-2);
  padding: var(--asa-space-3);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink);
}

.asa-upload__file .asa-icon { color: var(--asa-ok); }

/* Código de verificação (ver 12-app-nativo.html). Cada dígito É um
   .asa-input: herda foco, inválido e desabilitado de graça, em vez de
   reabrir a discussão de redundância de sinal que o campo já resolveu. */
.asa-codeinput { display: flex; gap: var(--asa-space-2); }

.asa-codeinput__digit {
  width: 44px;
  padding: 14px 0;
  text-align: center;
  font-size: var(--asa-fs-title);
  font-weight: var(--asa-weight-bold);
}

/* Plano: cartão de assinatura. Reaproveita asa-card + asa-price (o preço
   segue vermelho, o mesmo sinal único) em vez de inventar uma quarta
   variação de cartão de preço. */
.asa-card-plan { display: flex; flex-direction: column; gap: var(--asa-space-4); padding: var(--asa-space-6); }

.asa-card-plan--featured { border-width: 2px; border-color: var(--asa-ink); }

.asa-card-plan__name {
  margin: 0;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-highlight);
  line-height: var(--asa-lh-highlight);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-card-plan__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.asa-card-plan__benefits li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  color: var(--asa-ink-2);
}

.asa-card-plan__benefits .asa-icon {
  width: var(--asa-icon-dense);
  height: var(--asa-icon-dense);
  color: var(--asa-ok);
  margin-top: 2px;
}

/* ==========================================================================
   FAIXAS DE PÁGINA
   As estruturas de nível de página que a home usa, uma atrás da outra: hero
   com a busca, faixa-foto com três fatos, editorial foto + texto, prova
   (praças, placas e depoimentos sobre preto), dúvidas em lista e o
   fechamento curto. Cada faixa é <section class="asa-section asa-bg-…"> com
   um .asa-container dentro; o que está aqui é o conteúdo de cada uma.
   A regra de composição (15 Composição): uma estrutura por faixa, nunca a
   mesma duas vezes seguidas, fundo alternado, foto onde há lugar, carro ou
   gente, card só onde há produto para comparar.
   ========================================================================== */

/* Cabeçalho de faixa: H2 em Registro 2 (uma palavra em vermelho via <em>),
   lide de 18/28 e, quando houver, os controles à direita (setas de
   prateleira, link "ver todos"). Empilha no celular, alinha pela base no
   desktop. */
.asa-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-6);
  margin-bottom: var(--asa-space-8);
}

.asa-section-head__copy { max-width: 720px; }

.asa-section-head .asa-lead { margin-top: var(--asa-space-3); }

@media (min-width: 640px) {
  .asa-section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

/* Faixa curta: fechamento e rodapé. */
.asa-section--short { padding-block: clamp(48px, 6vw, 80px); }

/* --------------------------------------------------------------------------
   HERO
   Faixa amarela: o único lugar do Registro 1 (H1) e da marca d'água. A busca
   é um cartão branco dentro dela. O CTA da busca fica dentro da primeira
   dobra em 375×812.
   -------------------------------------------------------------------------- */
.asa-hero {
  position: relative;
  overflow: clip;
  background: var(--asa-surface);
  color: var(--asa-ink);
}

.asa-hero .asa-watermark {
  z-index: 0;
  width: 120%;
  right: -45%;
  top: -2%;
  max-width: 900px;
}

@media (min-width: 640px) {
  .asa-hero .asa-watermark { width: 62%; right: -8%; top: -10%; }
}

.asa-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(28px, 5vw, 80px) clamp(40px, 5vw, 80px);
}

.asa-hero__copy { max-width: 880px; }

/* Trecho do H1 em placa preta com texto amarelo: a frase que a Asa assina
   ("dentro do aeroporto"). Clone na quebra de linha para a placa não abrir
   buraco. */
.asa-hero__mark {
  display: inline-block;
  margin-top: .18em;
  padding: 0 .14em;
  background: var(--asa-ink);
  color: var(--asa-surface);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.asa-hero__search {
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(16px, 2vw, 24px);
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
}

.asa-hero__search .asa-search { margin: 0; }

.asa-hero__hint {
  margin: var(--asa-space-3) 0 0;
  font-size: var(--asa-fs-body-dense);
  line-height: var(--asa-lh-body-dense);
  color: var(--asa-ink-3);
  max-width: none;
}

/* --------------------------------------------------------------------------
   FAIXA-FOTO
   Logo abaixo do hero: uma foto larga (a chegada, a pessoa com a mala) e os
   três fatos operacionais em texto curto, numa régua que sobe sobre a foto.
   É o que substitui o trio ícone + título + texto.
   -------------------------------------------------------------------------- */
.asa-factstrip__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--asa-radius);
  aspect-ratio: 4 / 3;
}

@media (min-width: 640px)  { .asa-factstrip__media { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .asa-factstrip__media { aspect-ratio: 21 / 9; } }

.asa-factstrip__media img,
.asa-factstrip__media .asa-photo,
.asa-factstrip__media .asa-figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.asa-factstrip__facts {
  position: relative;
  display: grid;
  margin: calc(-1 * var(--asa-space-6)) var(--asa-space-4) 0;
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
}

.asa-factstrip__fact {
  padding: var(--asa-space-6);
  border-top: 1px solid var(--asa-line-soft);
}

.asa-factstrip__fact:first-child { border-top: none; }

@media (min-width: 640px) {
  .asa-factstrip__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: calc(-1 * var(--asa-space-8)) var(--asa-space-7) 0;
  }
  .asa-factstrip__fact { border-top: none; border-left: 1px solid var(--asa-line-soft); }
  .asa-factstrip__fact:first-child { border-left: none; }
}

@media (min-width: 1024px) {
  .asa-factstrip__facts { margin: -56px var(--asa-space-9) 0; }
  .asa-factstrip__fact { padding: var(--asa-space-7); }
}

.asa-factstrip__title {
  display: block;
  margin: 0;
  font-size: var(--asa-fs-highlight);
  line-height: var(--asa-lh-highlight);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-factstrip__text {
  margin: var(--asa-space-1) 0 0;
  font-size: var(--asa-fs-body-dense);
  line-height: var(--asa-lh-body-dense);
  color: var(--asa-ink-2);
  max-width: none;
}

/* --------------------------------------------------------------------------
   EDITORIAL
   Foto com o corte de 8° de um lado, texto do outro: H2, lide e uma lista de
   definições (os quatro itens para retirar o carro, por exemplo). É a faixa
   "como funciona"; passo numerado só quando a ordem informa algo.
   -------------------------------------------------------------------------- */
.asa-editorial {
  display: grid;
  gap: var(--asa-space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .asa-editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 64px);
  }
}

.asa-editorial__media { border-radius: var(--asa-radius); overflow: hidden; }

.asa-editorial__media img,
.asa-editorial__media .asa-photo,
.asa-editorial__media .asa-figure {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.asa-editorial__facts {
  display: grid;
  gap: var(--asa-space-6) var(--asa-space-7);
  margin: var(--asa-space-7) 0 0;
}

@media (min-width: 640px) {
  .asa-editorial__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.asa-editorial__facts dt {
  font-size: var(--asa-fs-highlight);
  line-height: var(--asa-lh-highlight);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-ink);
}

.asa-editorial__facts dd {
  margin: var(--asa-space-1) 0 0;
  color: var(--asa-ink-2);
}

/* Aviso dentro do editorial (a caução): cartão branco com borda, texto
   denso, a palavra de alerta em --asa-warn. Não é alerta de sistema. */
.asa-editorial__note {
  margin: var(--asa-space-7) 0 0;
  padding: var(--asa-space-4);
  background: var(--asa-bg-elevated);
  border: var(--asa-border-width) solid var(--asa-line);
  border-radius: var(--asa-radius);
  font-size: var(--asa-fs-body-dense);
  line-height: var(--asa-lh-body-dense);
  color: var(--asa-ink-2);
  max-width: none;
}

.asa-editorial__note b { color: var(--asa-warn, #B65C00); }

/* --------------------------------------------------------------------------
   PROVA
   A faixa preta, uma vez por página: as duas praças em foto grande com o
   nome num chip preto, e abaixo as placas 4,7 · 9,4 ao lado de dois
   depoimentos sem card. Usa .asa-numberplate--bare e .asa-testimonial--bare.
   -------------------------------------------------------------------------- */
.asa-proof__places {
  display: grid;
  gap: var(--asa-space-6);
  margin-top: var(--asa-space-8);
}

@media (min-width: 768px) {
  .asa-proof__places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.asa-card-place {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--asa-radius);
  overflow: hidden;
}

.asa-card-place__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--asa-radius);
  overflow: hidden;
}

.asa-card-place__media img,
.asa-card-place__media .asa-photo,
.asa-card-place__media .asa-figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.asa-card-place__chip {
  position: absolute;
  left: var(--asa-space-4);
  bottom: var(--asa-space-4);
  padding: var(--asa-space-2) var(--asa-space-3);
  background: var(--asa-ink);
  color: var(--asa-ink-inverse);
  border-radius: var(--asa-radius);
  font-size: var(--asa-fs-highlight);
  line-height: var(--asa-lh-highlight);
  font-weight: var(--asa-weight-bold);
}

.asa-card-place__title {
  margin: var(--asa-space-5) 0 0;
  font-size: var(--asa-fs-highlight);
  line-height: var(--asa-lh-highlight);
  font-weight: var(--asa-weight-bold);
}

.asa-card-place__text {
  margin: var(--asa-space-1) 0 0;
  color: var(--asa-ink-inverse-2);
  max-width: none;
}

.asa-card-place__link {
  display: block;
  margin-top: var(--asa-space-3);
  font-size: var(--asa-fs-body-dense);
  line-height: var(--asa-lh-body-dense);
  font-weight: var(--asa-weight-bold);
  color: var(--asa-surface);
  transition: color var(--asa-dur-fast) var(--asa-ease);
}

.asa-card-place:hover .asa-card-place__link,
.asa-card-place:focus-visible .asa-card-place__link { color: var(--asa-ink-inverse); }

.asa-proof__bar {
  display: grid;
  gap: var(--asa-space-8);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--asa-line-inverse);
  align-items: start;
}

@media (min-width: 1024px) {
  .asa-proof__bar { grid-template-columns: 5fr 7fr; }
}

.asa-proof__plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--asa-space-6);
}

.asa-proof__quotes { display: grid; gap: var(--asa-space-7); }

@media (min-width: 640px) {
  .asa-proof__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Placa sem moldura: a própria faixa já é preta. */
.asa-numberplate--bare { padding: 0; background: transparent; }

.asa-numberplate--bare .asa-numberplate__value {
  font-size: clamp(64px, 7vw, 96px);
  line-height: .85;
  font-variant-numeric: tabular-nums;
}

/* Depoimento sem card: corpo 16/26, nome em negrito, fonte em cinza. Sobre
   preto, a tinta inverte. */
.asa-testimonial--bare { padding: 0; gap: var(--asa-space-3); }

.asa-testimonial--bare .asa-testimonial__quote {
  font-size: var(--asa-fs-body);
  line-height: var(--asa-lh-body);
  font-weight: var(--asa-weight-regular);
}

.asa-bg-dense .asa-testimonial__quote,
.asa-bg-deep  .asa-testimonial__quote,
.asa-bg-dense .asa-testimonial__name,
.asa-bg-deep  .asa-testimonial__name { color: var(--asa-ink-inverse); }

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

/* --------------------------------------------------------------------------
   DÚVIDAS
   Lista com divisores, sem cards: a pergunta em Destaque (20/28, 700), a
   resposta em corpo. Funciona com <details>/<summary> nativo, sem JS. À
   esquerda, no desktop, o H2 e o caminho para o atendimento.
   -------------------------------------------------------------------------- */
.asa-faq {
  display: grid;
  gap: var(--asa-space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .asa-faq { grid-template-columns: 4fr 8fr; gap: clamp(40px, 5vw, 64px); }
}

.asa-faq__aside .asa-btn { margin-top: var(--asa-space-5); }

.asa-faq__list { border-top: var(--asa-border-width) solid var(--asa-line); }

/* <details> nativo com a mesma gramática do asa-disclosure. */
details.asa-disclosure > summary.asa-disclosure__trigger { list-style: none; }
details.asa-disclosure > summary.asa-disclosure__trigger::-webkit-details-marker { display: none; }
details.asa-disclosure[open] > .asa-disclosure__trigger .asa-disclosure__icon--closed { display: none; }
details.asa-disclosure[open] > .asa-disclosure__trigger .asa-disclosure__icon--open   { display: block; }

.asa-disclosure--faq .asa-disclosure__trigger {
  padding: var(--asa-space-5) 0;
  font-size: var(--asa-fs-highlight);
  line-height: var(--asa-lh-highlight);
  font-weight: var(--asa-weight-bold);
  transition: color var(--asa-dur-fast) var(--asa-ease);
}

.asa-disclosure--faq .asa-disclosure__trigger:hover { color: var(--asa-action-hover); }

.asa-disclosure--faq .asa-disclosure__trigger .asa-icon { flex-shrink: 0; color: var(--asa-ink-3); }

.asa-disclosure--faq .asa-disclosure__body {
  padding-bottom: var(--asa-space-6);
  max-width: var(--asa-measure);
}

/* --------------------------------------------------------------------------
   FECHAMENTO
   Faixa amarela curta no fim da página: H2 em Registro 2, uma frase e dois
   botões. Não repete o H1 nem a marca d'água do hero.
   -------------------------------------------------------------------------- */
.asa-closing {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-8);
}

@media (min-width: 1024px) {
  .asa-closing {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.asa-closing__copy { max-width: 640px; }

.asa-closing__copy .asa-lead { margin-top: var(--asa-space-3); }

.asa-closing__actions {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-3);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .asa-closing__actions { flex-direction: row; }
}