/* Layout e responsividade da Autoescola Direção.
   Pontos de quebra em em, para acompanhar o tamanho de texto escolhido pelo visitante:
   60em  composição dividida da abertura
   75em  menu completo no cabeçalho */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--azul-900);
  scroll-padding-top: var(--header-h);
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  color: var(--texto);
  background: var(--fundo-suave);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* O <picture> ocupa o quadro inteiro, para object-fit (contain ou cover) valer dentro dele. */
.about__frame picture {
  width: 100%;
  height: 100%;
}

/* Quadros de veículo (cartões e topo das páginas de categoria): o <picture> fica dentro do
   recuo (--recuo) e pode ser mais alto que o quadro (--zoom), para aparar só o branco acima e
   abaixo do veículo. O veículo continua inteiro: o zoom só é usado na foto do carro, que tem
   sobra de fundo. */
.service-card__media picture,
.cat-top__media picture {
  position: absolute;
  right: var(--recuo);
  left: var(--recuo);
  top: calc(var(--recuo) + (1 - var(--zoom, 1)) * (100% - 2 * var(--recuo)) / 2);
  height: calc((100% - 2 * var(--recuo)) * var(--zoom, 1));
}

h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
}

ul[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

:focus-visible {
  outline: 3px solid var(--foco, var(--azul-marca));
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

.container {
  width: min(100% - 2 * var(--margem), var(--conteudo-max));
  margin-inline: auto;
}

.nowrap {
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--raio-pequeno);
  background: var(--amarelo);
  color: var(--azul-900);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-200%);
  --foco: var(--branco);
}

.skip-link:focus {
  transform: none;
}

/* Botões e links de ação */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--raio-medio);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-botao) var(--ease-saida),
    border-color var(--dur-botao) var(--ease-saida),
    color var(--dur-botao) var(--ease-saida),
    box-shadow var(--dur-botao) var(--ease-saida),
    transform 180ms var(--ease-saida);
}

/* Botões nunca passam da largura disponível; o texto só quebra no meio da palavra se não houver outro jeito. */
.btn {
  max-width: 100%;
}

.btn > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.btn--primario {
  background: var(--amarelo);
  color: var(--azul-900);
}

.btn--primario:hover {
  background: var(--amarelo-claro);
}

/* Botões que abrem o WhatsApp: verde do WhatsApp, com texto verde-escuro para ter contraste. */
.btn--whats {
  background: var(--whats);
  color: var(--whats-texto);
  box-shadow: 0 10px 22px -14px rgb(10 47 28 / 0.6);
}

.btn--whats:hover {
  background: var(--whats-hover);
}

/* WhatsApp fixo: círculo verde no canto inferior direito, em todas as telas (pedido de
   18/10/2026). 56 px, a 16 px da borda no celular e 24 px a partir do tablet, respeitando a
   área segura dos aparelhos. Fica abaixo do cabeçalho e do menu aberto, não pulsa e entra uma
   vez. Ícone branco sobre o verde, como o do aplicativo (a marca do WhatsApp não muda de cor); o
   nome do botão vai para leitores de tela e, com mouse, aparece numa etiqueta ao lado. */
:root {
  --fab: 3.5rem;
  --fab-margem: 1rem;
}

@media (min-width: 48em) {
  :root {
    --fab-margem: 1.5rem;
  }
}

.whats-fab {
  position: fixed;
  right: max(var(--fab-margem), env(safe-area-inset-right));
  bottom: max(var(--fab-margem), calc(env(safe-area-inset-bottom) + 0.5rem));
  z-index: 40;
  display: grid;
  place-items: center;
  width: var(--fab);
  height: var(--fab);
  border-radius: 50%;
  background: var(--whats);
  color: var(--branco);
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgb(8 6 30 / 0.45), 0 2px 6px rgb(8 6 30 / 0.18);
  transition:
    background-color var(--dur-botao) var(--ease-saida),
    box-shadow var(--dur-botao) var(--ease-saida),
    transform 180ms var(--ease-saida);
}

.whats-fab:hover {
  background: var(--whats-hover);
}

/* Foco: anel amarelo entre dois anéis azuis, visível sobre fundo claro e escuro. */
.whats-fab:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
  box-shadow: 0 0 0 9px var(--azul-900), 0 10px 24px -8px rgb(8 6 30 / 0.45);
}

.whats-fab__icone {
  width: 1.75rem;
  height: 1.75rem;
}

.whats-fab__dica {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.75rem);
  padding: 0.5rem 0.875rem;
  border-radius: var(--raio-medio);
  background: var(--azul-900);
  color: var(--branco);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgb(8 6 30 / 0.75);
  opacity: 0;
  transform: translate3d(0.5rem, -50%, 0);
  pointer-events: none;
  transition: opacity 180ms var(--ease-saida), transform 220ms var(--ease-saida);
}

.whats-fab:focus-visible .whats-fab__dica {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

@media (hover: hover) {
  .whats-fab:hover .whats-fab__dica {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
  }
}

/* O círculo não esconde o final da página nem o item em foco ao navegar pelo teclado. */
html {
  scroll-padding-bottom: calc(var(--fab) + var(--fab-margem) + 0.5rem);
}

@media print {
  .whats-fab {
    display: none;
  }
}

.btn--contorno {
  min-height: 3rem;
  padding: 0.5rem 1.125rem;
  border-color: rgb(255 255 255 / 0.45);
  color: var(--branco);
  font-size: 0.9375rem;
  font-weight: 600;
}

.btn--contorno .icon {
  color: var(--amarelo);
}

.btn--contorno:hover {
  border-color: rgb(255 255 255 / 0.8);
  background: rgb(255 255 255 / 0.08);
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.25rem 0.125rem;
  border-radius: var(--raio-pequeno);
  color: var(--branco);
  font-weight: 600;
  text-decoration: none;
}

.link-seta__texto {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--dur-botao) var(--ease-saida);
}

.link-seta:hover .link-seta__texto {
  text-decoration-color: var(--amarelo);
}

.icon--seta {
  transition: transform 220ms var(--ease-saida);
}

/* Cabeçalho */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--azul-900);
  color: var(--branco);
  --foco: var(--amarelo);
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease-saida);
}

/* Faixa discreta depois que a página rola: linha fina e sombra suave, sem mudar a altura. */
.site-header::before {
  inset: 0;
  z-index: -1;
  box-shadow: 0 14px 32px -18px rgb(8 6 30 / 0.7);
}

.site-header::after {
  inset: auto 0 0;
  height: 1px;
  background: rgb(255 255 255 / 0.1);
}

.site-header.is-scrolled::before,
.site-header.is-scrolled::after {
  opacity: 1;
}

/* Quando o cabeçalho ocupa muito da altura da tela (texto ampliado, zoom alto, celular deitado),
   ele deixa de acompanhar a rolagem para não cobrir o conteúdo. scripts/site.js decide. */
.site-header.is-static {
  position: relative;
}

/* Cabeçalho flutuante: sem faixa azul. Marca, links e botões são peças azuis separadas que ficam
   sobre a página; o vão entre elas deixa passar o clique para o conteúdo de baixo. A abertura (e
   o topo das páginas de categoria) começa embaixo dele e ganha o espaço da altura do cabeçalho.
   Sem JavaScript, ou com o cabeçalho alto demais (is-static), volta a faixa azul de antes. */
.js .site-header:not(.is-static) {
  margin-bottom: calc(-1 * var(--header-h));
  background: transparent;
  pointer-events: none;
}

/* Faixa de vidro discreta atrás das peças: o que passa por baixo vira um borrão suave, sem
   cor forte. Clara sobre as seções claras e escura sobre a abertura, o topo das categorias e o
   rodapé (scripts/site.js marca o fundo em data-fundo). */
.js .site-header:not(.is-static)::before {
  border-bottom: 1px solid rgb(var(--azul-900-rgb) / 0.06);
  background: rgb(252 252 254 / 0.62);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  opacity: 1;
  transition: background-color 240ms var(--ease-saida), border-color 240ms var(--ease-saida);
}

.js .site-header:not(.is-static)[data-fundo="escuro"]::before {
  border-bottom-color: rgb(255 255 255 / 0.06);
  background: rgb(var(--azul-900-rgb) / 0.38);
}

.js .site-header:not(.is-static)::after {
  display: none;
}

/* Sem desfoque no navegador: a faixa fica quase opaca, para o texto de baixo não aparecer. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .js .site-header:not(.is-static)::before {
    background: rgb(252 252 254 / 0.94);
  }

  .js .site-header:not(.is-static)[data-fundo="escuro"]::before {
    background: rgb(var(--azul-900-rgb) / 0.94);
  }
}

.js .site-header:not(.is-static) .brand,
.js .site-header:not(.is-static) .menu-toggle,
.js .site-header:not(.is-static) .menu-fundo,
.js .site-header:not(.is-static) .site-nav__list > li,
.js .site-header:not(.is-static) .site-nav__cta {
  pointer-events: auto;
}

/* Só a logo (pedido de 18/10/2026): o quadrado amarelo da marca é a peça, sem moldura azul,
   com a mesma sombra das peças do menu. A altura acompanha a do botão Menu e a dos links, sem
   mudar a altura do cabeçalho. */
.js .site-header:not(.is-static) .brand {
  border-radius: 0.625rem;
}

.js .site-header:not(.is-static) .brand__logo {
  width: 56px;
  box-shadow: 0 10px 24px -12px rgb(8 6 30 / 0.7);
}

@media (max-width: 74.99em) {
  .js .site-header:not(.is-static) .brand__logo {
    width: 50px;
  }
}

.js .hero {
  padding-top: var(--header-h);
}

.js .cat-top {
  padding-top: calc(var(--header-h) + clamp(0.75rem, 0.5rem + 1.5vw, 1.75rem));
}

/* Celular e tablet: o botão Menu também vira peça azul. */
.js .site-header:not(.is-static) .menu-toggle {
  border-color: rgb(255 255 255 / 0.16);
  background: var(--azul-900);
  box-shadow: 0 10px 24px -14px rgb(8 6 30 / 0.75);
}

.js .site-header:not(.is-static) .menu-toggle:hover {
  border-color: rgb(255 255 255 / 0.28);
  background: var(--azul-marca);
}

.site-header__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  width: min(100% - 2 * var(--margem), var(--conteudo-max));
  min-height: 4.25rem;
  margin-inline: auto;
  padding-block: 0.625rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 2.75rem;
  margin-right: auto;
  border-radius: var(--raio-pequeno);
  color: var(--branco);
  text-decoration: none;
}

.brand__logo {
  flex: none;
  width: 46px; /* em px: imagem não precisa crescer com o tamanho do texto */
  height: auto;
  aspect-ratio: 1082 / 1017;
  border-radius: 0.625rem;
}

.brand__name {
  display: flex;
  flex-direction: column;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.brand__pre {
  margin-bottom: 0.1875rem;
  color: var(--sobre-azul-2);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.menu-toggle {
  display: none;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  border-radius: var(--raio-pequeno);
  color: var(--sobre-azul);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-botao) var(--ease-saida);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  right: 0.625rem;
  bottom: 0.5rem;
  left: 0.625rem;
  height: 2px;
  border-radius: 2px;
  background: var(--amarelo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-saida);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--branco);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  transform: scaleX(1);
}

/* Sem JavaScript: o menu fica sempre visível, em uma segunda linha quando faltar espaço. */
.no-js .site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

@media (max-width: 74.99em) {
  /* Sem JavaScript o menu ocupa uma segunda linha; o cabeçalho fica no topo da página, sem fixar. */
  .no-js .site-header {
    position: relative;
  }

  html.no-js {
    scroll-padding-top: 0;
  }

  .no-js .site-nav {
    flex-basis: 100%;
    padding-bottom: 0.25rem;
  }

  .no-js .site-nav__link {
    padding-left: 0;
  }

  .js .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 3rem;
    min-width: 3rem;
    justify-content: center;
    padding: 0 0.875rem;
    border: 1px solid rgb(255 255 255 / 0.4);
    border-radius: var(--raio-medio);
    background: transparent;
    color: var(--branco);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-botao) var(--ease-saida), border-color var(--dur-botao) var(--ease-saida), transform 180ms var(--ease-saida);
  }

  .js .menu-toggle:hover {
    border-color: rgb(255 255 255 / 0.75);
    background: rgb(255 255 255 / 0.06);
  }

  .menu-toggle__bars {
    position: relative;
    width: 1.125rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: background-color 180ms var(--ease-saida);
  }

  .menu-toggle__bars::before,
  .menu-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 220ms var(--ease-saida);
  }

  .menu-toggle__bars::before {
    transform: translateY(-6px);
  }

  .menu-toggle__bars::after {
    transform: translateY(6px);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bars {
    background-color: transparent;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
    transform: rotate(-45deg);
  }

  /* Com JavaScript: painel que entra pela direita, só com a largura necessária, e fundo desfocado.
     O painel e o fundo são criados e controlados por scripts/site.js. */
  html.menu-aberto {
    overflow: hidden;
    padding-right: var(--barra, 0px);
  }

  .js .menu-fundo {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    background: rgb(14 12 36 / 0.34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 420ms var(--ease-saida), visibility 0s linear 420ms;
  }

  .js .site-header.is-open .menu-fundo {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .js .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: min(18rem, 100% - 3rem);
    max-width: calc(100% - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--margem) max(1.75rem, env(safe-area-inset-bottom));
    padding-left: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    border-left: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 1.25rem 0 0 1.25rem;
    background: var(--azul-900);
    box-shadow: -28px 0 56px -24px rgb(8 6 30 / 0.7);
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 480ms;
  }

  .js .site-header.is-open .site-nav {
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  /* Em telas baixas o painel rola por dentro; nenhum bloco encolhe para caber. */
  .js .site-nav > * {
    flex-shrink: 0;
  }

  /* Topo do painel: mesma altura do cabeçalho, com o botão Fechar no lugar do botão Menu. */
  .site-nav__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.25rem;
    margin-bottom: 0.5rem;
    padding-block: 0.625rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
  }

  .site-nav__titulo {
    color: var(--sobre-azul-2);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .site-nav__fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-width: 3rem;
    min-height: 3rem;
    padding: 0 0.875rem;
    border: 1px solid rgb(255 255 255 / 0.4);
    border-radius: var(--raio-medio);
    background: transparent;
    color: var(--branco);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-botao) var(--ease-saida), border-color var(--dur-botao) var(--ease-saida), transform 180ms var(--ease-saida);
  }

  .site-nav__fechar:hover {
    border-color: rgb(255 255 255 / 0.75);
    background: rgb(255 255 255 / 0.06);
  }

  .site-nav__x {
    position: relative;
    width: 1.125rem;
    height: 1.125rem;
  }

  .site-nav__x::before,
  .site-nav__x::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
  }

  .site-nav__x::after {
    transform: rotate(-45deg);
  }

  .js .site-nav__list {
    display: grid;
    gap: 0;
  }

  .js .site-nav__link {
    display: flex;
    min-height: 3.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 0;
    font-size: 1.125rem;
  }

  .js .site-nav__link::after {
    right: auto;
    bottom: 0.75rem;
    left: 0;
    width: 2.5rem;
  }

  /* No painel, a seção que está na tela fica branca e com o traço amarelo. */
  .js .site-nav__link.is-ativo {
    color: var(--branco);
  }

  .js .site-nav__link.is-ativo::after {
    transform: scaleX(1);
  }

  .js .site-nav__cta {
    width: 100%;
    margin-top: 1.5rem;
    min-height: 3.25rem;
    font-size: 1.0625rem;
  }
}

.menu-fundo {
  display: none;
}

@media (max-width: 22.49em) {
  .brand__logo {
    width: 40px;
  }

  .menu-toggle__label,
  .site-nav__fechar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .js .menu-toggle,
  .site-nav__fechar {
    padding: 0;
  }
}

@media (min-width: 75em) {
  .site-header__bar {
    min-height: 5rem;
    flex-wrap: nowrap;
  }

  .brand__logo {
    width: 52px;
  }

  .brand__name {
    font-size: 1.3125rem;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.25rem);
  }

  .site-nav__list {
    flex-wrap: nowrap;
    gap: clamp(0rem, 0.8vw, 0.75rem);
  }

  .site-nav__link {
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  /* O WhatsApp do computador fica no círculo do canto; o do painel do celular continua. */
  .site-nav__cta {
    display: none;
  }

  .site-nav__topo {
    display: none;
  }

  /* Cabeçalho transparente: cada link é um botão azul separado, com borda fina e sombra para se
     destacar sobre a abertura, as fotos e as seções claras. O link da seção que está na tela fica
     realçado (azul da logo, borda e traço amarelos); scripts/nav-ativa.js marca qual é. */
  .js .site-nav__list {
    gap: 0.5rem;
  }

  .js .site-nav__link {
    padding: 0 1rem;
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: var(--raio-medio);
    background: var(--azul-900);
    color: var(--sobre-azul);
    box-shadow: 0 10px 24px -14px rgb(8 6 30 / 0.75);
    transition:
      background-color 150ms var(--ease-saida),
      border-color 150ms var(--ease-saida),
      color 150ms var(--ease-saida),
      transform 180ms var(--ease-saida);
  }

  .js .site-nav__link:hover {
    border-color: rgb(255 255 255 / 0.28);
    background: var(--azul-marca);
    color: var(--branco);
  }

  .js .site-nav__link.is-ativo {
    border-color: rgb(234 216 30 / 0.6);
    background: var(--azul-marca);
    color: var(--branco);
  }

  .js .site-nav__link::after,
  .js .site-nav__link:hover::after,
  .js .site-nav__link:focus-visible::after {
    right: auto;
    bottom: 0.4rem;
    left: 50%;
    width: 0.75rem;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
  }

  .js .site-nav__link.is-ativo::after {
    transform: translateX(-50%) scaleX(1);
  }
}

/* Telas baixas na horizontal: cabeçalho mais compacto para sobrar área de leitura. */
@media (orientation: landscape) and (max-height: 30em) {
  .site-header__bar {
    min-height: 3.5rem;
    padding-block: 0.375rem;
  }

  .site-nav__topo {
    min-height: 3.5rem;
    padding-block: 0.375rem;
  }

  .brand__logo {
    width: 36px;
  }
}

/* Abertura */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--azul-900);
  color: var(--branco);
  --foco: var(--amarelo);
}

.hero__grid {
  --interno: min(100% - 2 * var(--margem), var(--conteudo-max));
  --lateral: calc((100% - var(--interno)) / 2);
  display: grid;
  grid-template-columns: [full-start] var(--lateral) [content-start] minmax(0, 1fr) [content-end] var(--lateral) [full-end];
}

/* Empilhado (celular e tablet): foto no topo, logo abaixo do cabeçalho; depois o texto e a ação;
   por último o percurso. No computador as duas colunas dividem a mesma linha. */
.hero__content {
  grid-column: content;
  grid-row: 2;
  container-type: inline-size;
  padding-block: clamp(1.75rem, 1rem + 3vw, 3rem) 0;
}

/* O tamanho acompanha a largura da coluna (cqi) e nunca deixa "a Direção." passar da borda,
   mesmo com o texto do navegador ampliado. */
.hero__title {
  max-width: 9em;
  font-size: clamp(2.5rem, 1.25rem + 5vw, 5.25rem);
  font-size: clamp(min(2.5rem, 15cqi), 1rem + 10cqi, min(5.25rem, 19cqi));
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Empilhado: título um pouco menor no tablet, para a foto no topo não empurrar a ação para longe;
   no celular, até 48 px, como pede o briefing. */
@media (max-width: 59.99em) {
  .hero__title {
    font-size: clamp(min(2.5rem, 15cqi), 1rem + 10cqi, min(4.5rem, 19cqi));
  }
}

@media (max-width: 29.99em) {
  .hero__title {
    font-size: clamp(min(2.5rem, 15cqi), 1rem + 10cqi, min(3rem, 19cqi));
  }
}

.hero__title .w {
  display: inline-block;
}

.hero__title .hl {
  color: var(--amarelo);
}

.hero__lead {
  max-width: 36ch;
  margin-top: 1.5rem;
  color: var(--sobre-azul);
  font-size: var(--texto-apoio);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 2.25rem;
}

@media (max-width: 34.99em) {
  .hero__actions .btn--whats {
    flex: 1 1 100%;
  }
}

.hero__media {
  position: relative;
  grid-column: full;
  grid-row: 1;
  aspect-ratio: 16 / 9;
  background: var(--azul-800);
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 72%;
}

/* Integra a foto ao fundo azul: topo e base no empilhado; lado esquerdo e topo na composição dividida.
   Faixas curtas, para não escurecer o letreiro nem as rodas. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--azul-900-rgb) / 0.75) 0%, rgb(var(--azul-900-rgb) / 0) 12%),
    linear-gradient(0deg, var(--azul-900) 0%, rgb(var(--azul-900-rgb) / 0) 9%);
}

.route {
  position: absolute;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.route__base {
  fill: none;
  stroke: rgb(255 255 255 / 0.42);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.route__accent {
  fill: none;
  stroke: var(--amarelo);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.route__dot {
  fill: var(--amarelo);
}

.route--vertical {
  display: none;
}

/* Empilhado: o percurso fecha a abertura, no azul, depois da ação principal. */
.route--horizontal {
  position: relative;
  grid-column: full;
  grid-row: 3;
  width: min(100%, 40rem);
  height: auto;
  aspect-ratio: 10 / 1;
  margin-block: 1.25rem clamp(1.5rem, 1rem + 3vw, 2.5rem);
}

.route--horizontal .route__base {
  stroke-width: 4;
}

.route--horizontal .route__accent {
  stroke-width: 6;
}

@media (min-width: 60em) {
  .hero__grid {
    --vao: clamp(2rem, 4vw, 4rem);
    grid-template-columns: [full-start] var(--lateral) [content-start] calc(var(--interno) * 0.45) [text-end] var(--vao) [media-start] minmax(0, 1fr) [full-end];
  }

  .hero__content {
    grid-column: content-start / text-end;
    grid-row: 1;
    align-self: center;
    padding-block: clamp(3rem, 7vh, 5.5rem);
  }

  .hero__media {
    grid-column: media-start / full-end;
    grid-row: 1;
    aspect-ratio: auto;
    min-height: min(clamp(24rem, 42vw, 46rem), calc(100vh - var(--header-h) - 7rem));
    min-height: min(clamp(24rem, 42vw, 46rem), calc(100svh - var(--header-h) - 7rem));
  }

  .hero__media::after {
    background:
      linear-gradient(90deg, var(--azul-900) 0%, rgb(var(--azul-900-rgb) / 0.88) 9%, rgb(var(--azul-900-rgb) / 0.42) 21%, rgb(var(--azul-900-rgb) / 0) 36%),
      linear-gradient(180deg, rgb(var(--azul-900-rgb) / 0.7) 0%, rgb(var(--azul-900-rgb) / 0) 13%);
  }

  .route--horizontal {
    display: none;
  }

  /* Dividido: o percurso desce pela faixa em que a foto surge do azul. */
  .route--vertical {
    display: block;
    top: 0;
    left: calc(-0.55 * var(--vao));
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 3;
  }
}

/* Celular em pé: foto vertical atrás do texto. O texto fica no alto, sobre o céu e a fachada,
   com um véu azul-escuro e desfocado; carros e motos aparecem nítidos logo abaixo da ação.
   A foto sobe até que a linha dos carros (845 px de 900 de largura, 93,9% da largura) encontre
   o fim do texto; o recorte de 900 x 1450 deixa de fora só parte do calçamento. */
@media (max-width: 47.99em) and (orientation: portrait) {
  .hero {
    overflow: clip;
  }

  .hero__content {
    position: relative;
    z-index: 2;
    grid-row: 1;
    padding-bottom: 1.25rem;
  }

  .hero__media {
    grid-row: 2;
    aspect-ratio: 900 / 1450;
    margin-top: calc(-93.9% + 1.25rem);
  }

  .hero__img {
    object-position: 50% 0;
  }

  /* Desfoque só na parte de cima, sumindo antes dos carros. */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 58%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 58%);
  }

  /* Véu escuro: contínuo com o azul do topo, forte atrás do texto e transparente nos carros.
     Na base, a foto se funde ao azul onde fica o percurso. */
  .hero__media::after {
    z-index: 1;
    background:
      linear-gradient(180deg,
        var(--azul-900) 0%,
        rgb(var(--azul-900-rgb) / 0.86) 16%,
        rgb(var(--azul-900-rgb) / 0.76) 36%,
        rgb(var(--azul-900-rgb) / 0.72) 50%,
        rgb(var(--azul-900-rgb) / 0.36) 55%,
        rgb(var(--azul-900-rgb) / 0) 61%),
      linear-gradient(0deg, var(--azul-900) 0%, rgb(var(--azul-900-rgb) / 0) 10%);
  }

  .route--horizontal {
    margin-top: 0.25rem;
  }
}

/* Telas baixas na horizontal (celular deitado, janela rasa): título mais curto em altura
   e espaçamentos menores, para a ação principal aparecer na primeira tela. */
@media (orientation: landscape) and (max-height: 30em) {
  .hero__content {
    padding-block: 1.25rem 0;
  }

  .hero__title {
    max-width: none;
    font-size: min(clamp(2.5rem, 1.25rem + 5vw, 5.25rem), max(2.25rem, 12vh));
    font-size: min(clamp(min(2.5rem, 15cqi), 1rem + 10cqi, min(5.25rem, 19cqi)), max(min(2.25rem, 15cqi), 12svh));
  }

  .hero__lead {
    max-width: 62ch;
    margin-top: 0.875rem;
  }

  .hero__actions {
    margin-top: 1.25rem;
  }
}

/* Celular em pé com tela baixa (até 720 px de altura): com a foto no topo, espaçamentos e título
   menores para o botão do WhatsApp continuar na primeira tela. */
@media (orientation: portrait) and (max-height: 45em) and (max-width: 59.99em) {
  .hero__content {
    padding-top: 1.25rem;
  }

  .hero__title {
    font-size: min(clamp(2.25rem, 1.25rem + 5vw, 4.5rem), 6.4vh);
    font-size: min(clamp(min(2.25rem, 15cqi), 1rem + 10cqi, min(4.5rem, 19cqi)), max(min(2.25rem, 15cqi), 6.4svh));
  }

  .hero__lead {
    margin-top: 0.875rem;
    font-size: 1rem;
  }

  .hero__actions {
    margin-top: 1.25rem;
  }
}

/* Celular deitado com a foto no topo: a foto inteira (16:9, sem cortes) cabe na altura da tela,
   centralizada no azul, em vez de ocupar mais que a tela toda. */
@media (orientation: landscape) and (max-height: 30em) and (max-width: 59.99em) {
  .hero__media {
    justify-self: center;
    width: min(100%, 72vh * 16 / 9);
    width: min(100%, 72svh * 16 / 9);
  }

  .hero__media::after {
    background:
      linear-gradient(90deg, var(--azul-900) 0%, rgb(var(--azul-900-rgb) / 0) 9%, rgb(var(--azul-900-rgb) / 0) 91%, var(--azul-900) 100%),
      linear-gradient(180deg, rgb(var(--azul-900-rgb) / 0.75) 0%, rgb(var(--azul-900-rgb) / 0) 12%),
      linear-gradient(0deg, var(--azul-900) 0%, rgb(var(--azul-900-rgb) / 0) 9%);
  }
}

@media (orientation: landscape) and (max-height: 30em) and (min-width: 60em) {
  .hero__content {
    padding-block: 1.5rem;
  }

  .hero__title {
    max-width: 9em;
  }
}

/* Serviços */
.services {
  padding-block: var(--secao-y);
  background: var(--fundo-suave);
  --foco: var(--azul-marca);
}

/* Mesma grade dos cartões: no computador o texto de apoio alinha com a segunda coluna. */
.section-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: end;
  gap: 1rem clamp(1rem, 0.5rem + 1.5vw, 2rem);
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.kicker {
  margin-bottom: 0.75rem;
  color: var(--azul-marca);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.section-title {
  max-width: min(16ch, 100%);
  color: var(--azul-900);
  font-size: clamp(1.75rem, 1.35rem + 2.2vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.section-lead {
  max-width: 34ch;
  color: var(--texto-2);
  font-size: var(--texto-apoio);
  text-wrap: pretty;
}

/* A seção Primeira habilitação fica como está (pedido de 17/10/2026): sua descrição mantém o
   tamanho anterior. */
.license .section-lead {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.service-grid__item {
  display: flex;
  min-width: 0;
}

.service-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 1px 2px rgb(var(--azul-900-rgb) / 0.06), 0 10px 28px -20px rgb(var(--azul-900-rgb) / 0.3);
  transition: transform var(--dur-cartao) var(--ease-saida), border-color var(--dur-cartao) var(--ease-saida), box-shadow var(--dur-cartao) var(--ease-saida);
}

/* Sombra de elevação em camada própria: anima só a opacidade. */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 28px 48px -26px rgb(var(--azul-900-rgb) / 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-cartao) var(--ease-saida);
}

/* Veículo inteiro sobre branco: mesma proporção nos dois cartões, sem cortar rodas, retrovisores ou carroceria. */
.service-card__media {
  --recuo: clamp(0.5rem, 0.25rem + 1vw, 1rem);
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--raio-medio);
  background: #fefefe; /* o mesmo branco do fundo das fotos, sem moldura aparente */
}

/* Do tablet em diante, quadro mais baixo: nome, frase e botão ficam junto do veículo. */
@media (min-width: 40em) {
  .service-card__media {
    aspect-ratio: 16 / 9;
  }
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 280ms var(--ease-saida);
}

.service-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 0.75rem 0.75rem;
}

.service-card__cat {
  padding: 0.3rem 0.625rem;
  border-radius: var(--raio-pequeno);
  background: var(--amarelo);
  color: var(--azul-900);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.service-card__title {
  margin-top: 0.875rem;
  color: var(--azul-900);
  font-size: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.service-card__text {
  max-width: 38ch;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--texto-2);
  text-wrap: pretty;
  font-size: var(--texto-corpo);
}

.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  margin-top: auto;
  padding: 0.75rem 1.25rem;
  border-radius: var(--raio-medio);
  background: var(--azul-marca);
  color: var(--branco);
  font-weight: 800;
  max-width: 100%;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--dur-botao) var(--ease-saida), transform 180ms var(--ease-saida);
}

/* Só quebra no meio da palavra se não houver outro jeito (texto muito ampliado em tela estreita). */
.service-card__cta > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Cartão estreito (celular ou texto ampliado): menos recuo interno e a seta pode descer de linha,
   para o texto do botão ganhar largura. */
.service-grid__item {
  container-type: inline-size;
}

@container (max-width: 22em) {
  .service-card {
    padding: 0.5rem;
  }

  .service-card__body {
    padding: 1.125rem 0.375rem 0.375rem;
  }

  .service-card__cta {
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding-inline: 1rem;
  }
}

/* O cartão inteiro responde ao toque e ao clique; o link continua sendo o único alvo para teclado. */
.service-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--raio);
}

.service-card__cta:focus-visible {
  background: var(--azul-900);
}

@media (hover: hover) {
  .service-card:hover {
    border-color: #cfcde2;
  }

  .service-card:hover .service-card__cta {
    background: var(--azul-900);
  }

  .service-card:hover::before {
    opacity: 1;
  }
}

.service-card:has(.service-card__cta:focus-visible)::before {
  opacity: 1;
}

/* Botões sobre fundo claro e sobre o amarelo */
.btn--azul {
  background: var(--azul-marca);
  color: var(--branco);
}

.btn--azul:hover {
  background: var(--azul-900);
}

.btn--contorno-azul {
  border-color: var(--azul-marca);
  background: transparent;
  color: var(--azul-marca);
}

.btn--contorno-azul:hover {
  background: rgb(53 47 111 / 0.07);
}

.btn--escuro {
  background: var(--azul-900);
  color: var(--branco);
}

.btn--escuro:hover {
  background: var(--azul-marca);
}

.link-seta--claro {
  color: var(--azul-marca);
}

.link-seta--claro .link-seta__texto {
  text-decoration-color: rgb(53 47 111 / 0.35);
}

.link-seta--claro:hover .link-seta__texto {
  text-decoration-color: var(--azul-marca);
}

/* Miolo da página: fundos claros alternados (quase branco e suave). */
.reviews,
.license,
.about,
.contact {
  padding-block: var(--secao-y);
  --foco: var(--azul-marca);
}

.reviews,
.license,
.contact {
  background: var(--fundo-branco);
}

.about {
  background: var(--fundo-suave);
}

/* Quando as avaliações forem ativadas, os fundos seguintes trocam para continuar alternando. */
.reviews:not([hidden]) ~ .license,
.reviews:not([hidden]) ~ .contact {
  background: var(--fundo-suave);
}

.reviews:not([hidden]) ~ .about {
  background: var(--fundo-branco);
}

/* Avaliações (pronta, desativada até haver relatos verificados) */
.reviews__head {
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.review-grid__item {
  display: flex;
  min-width: 0;
}

.review {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

.review::before {
  content: "“";
  color: var(--azul-marca);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 0.8;
}

.review__text {
  flex: 1;
  margin: 0.5rem 0 0;
  color: var(--texto);
  font-size: 1.0625rem;
}

.review__text p {
  margin: 0;
}

.review__author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.875rem;
  margin-top: 1.5rem;
}

.review__author:not(:has(.review__photo)) {
  grid-template-columns: minmax(0, 1fr);
}

.review__photo {
  grid-row: span 2;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.review__name {
  color: var(--azul-900);
  font-weight: 800;
  line-height: 1.3;
}

.review__source {
  color: var(--texto-2);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Primeira habilitação: abertura e requisitos */
.license__head {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 1.25rem + 2.5vw, 3rem);
  text-align: center;
}

.license__head .section-title {
  max-width: min(18ch, 100%);
  margin-inline: auto;
}

.license__head .section-lead {
  margin: 1rem auto 0;
}

.license__reqs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Os três requisitos lado a lado só quando cabem; antes disso, um por linha (sem card sobrando). */
@media (min-width: 48em) {
  .license__reqs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.req-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-medio);
  background: var(--superficie);
  box-shadow: 0 1px 2px rgb(var(--azul-900-rgb) / 0.05), 0 10px 24px -20px rgb(var(--azul-900-rgb) / 0.35);
}

.req-card__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--azul-900);
  color: var(--amarelo);
}

.req-card__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.req-card__icon--texto {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.req-card__text {
  min-width: 0;
  color: var(--azul-900);
  font-weight: 600;
  line-height: 1.35;
}

/* Primeira habilitação: estrada com as etapas.
   Celular e tablet (padrão): estrada numa faixa estreita à esquerda, cards em coluna à direita.
   Computador (60em ou mais): estrada no centro e cards alternando entre esquerda e direita.
   As medidas abaixo são lidas por scripts/journey.js para desenhar a estrada. */
.journey {
  --faixa: clamp(3.25rem, 2.5rem + 4vw, 4.5rem);
  --via: 1.625rem;
  --curva: 0.75rem;
  --cp: 1.875rem;
  --carro-l: 1.375rem;
  --carro-c: 2.5rem;
  --etapa-gap: 1rem;
  position: relative;
  max-width: 68rem;
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0;
  padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
}

/* Detalhe de fundo discreto: grade de pontos que some nas pontas. */
.journey::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgb(53 47 111 / 0.1) 1.2px, transparent 1.7px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 8%, #000 88%, transparent);
}

.journey__road {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease-saida);
}

.journey.is-ready .journey__road {
  opacity: 1;
}

.road-borda {
  fill: none;
  stroke: #2c2862;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.road-acostamento {
  fill: none;
  stroke: #e4e3ef;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.road-asfalto {
  fill: none;
  stroke: var(--azul-900);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.road-faixa,
.road-rastro {
  fill: none;
  stroke: var(--amarelo);
  stroke-linecap: round;
}

.road-faixa {
  opacity: 0.75;
}

.road-ligacao {
  fill: none;
  stroke: var(--azul-marca);
  stroke-dasharray: 1 6;
  stroke-linecap: round;
  stroke-width: 2;
  opacity: 0.4;
  transition: stroke 300ms var(--ease-saida), opacity 300ms var(--ease-saida);
}

.road-ligacao.is-done {
  stroke: #b8a80f;
  opacity: 0.9;
}

.journey__steps {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--etapa-gap);
  margin: 0;
  padding: 0 0 0 calc(var(--faixa) + 0.75rem);
  list-style: none;
}

.journey__step {
  min-width: 0;
}

.journey-card {
  position: relative;
  min-width: 0;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 1px 2px rgb(var(--azul-900-rgb) / 0.05);
  transition: border-color 350ms var(--ease-saida);
}

/* Destaque da etapa atual: barra amarela no lado da estrada e sombra (só opacity e transform). */
.journey-card::before {
  content: "";
  position: absolute;
  top: 0.875rem;
  bottom: 0.875rem;
  left: -1px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--amarelo);
  transform: scaleY(0);
  transition: transform 380ms var(--ease-saida);
}

.journey-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 22px 44px -26px rgb(var(--azul-900-rgb) / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms var(--ease-saida);
}

.journey__step.is-current .journey-card {
  border-color: #ddcd4a;
}

.journey__step.is-current .journey-card::before {
  transform: scaleY(1);
}

.journey__step.is-current .journey-card::after {
  opacity: 1;
}

.journey-card__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--texto-2);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  transition: color 300ms var(--ease-saida);
}

/* Etapa percorrida: marca de conferido ao lado do rótulo. */
.journey-card__label::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.7rem;
  margin: -0.15rem 0.15rem 0 0.1rem;
  border: solid var(--azul-marca);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 300ms var(--ease-saida);
}

.journey__step.is-done .journey-card__label,
.journey__step.is-current .journey-card__label {
  color: var(--azul-marca);
}

.journey__step.is-done .journey-card__label::before,
.journey__step.is-current .journey-card__label::before {
  transform: rotate(45deg) scale(1);
}

.journey-card__title {
  margin-top: 0.375rem;
  color: var(--azul-900);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

/* Nome da etapa: marca-texto amarelo que corre por trás do título quando o carro chega a ela
   e continua nas etapas já percorridas. O texto segue azul-escuro sobre o amarelo (12:1). */
.journey-card__nome {
  margin-inline: -0.2em;
  padding-inline: 0.2em;
  border-radius: 0.3em;
  background-image: linear-gradient(var(--amarelo), var(--amarelo));
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 560ms var(--ease-saida);
}

.journey__step.is-done .journey-card__nome,
.journey__step.is-current .journey-card__nome,
.journey.is-static .journey-card__nome {
  background-size: 100% 100%;
}

.journey-card__text {
  margin-top: 0.375rem;
  color: var(--texto-2);
  text-wrap: pretty;
}

/* Faixa estreita (texto muito ampliado no celular): estrada e recuos menores, em pixels, para o
   texto dos cards ganhar largura. */
.license > .container {
  container: licenca / inline-size;
}

@container licenca (max-width: 15em) {
  .journey {
    --faixa: 40px;
    --via: 18px;
    --curva: 6px;
    --cp: 24px;
    --carro-l: 16px;
    --carro-c: 29px;
    --etapa-gap: 0.75rem;
  }

  .journey__steps {
    padding-left: calc(var(--faixa) + 0.375rem);
  }

  .journey-card {
    padding: 0.75rem 0.75rem 0.875rem;
  }

  .journey-card__label {
    letter-spacing: 0.06em;
  }
}

/* Pontos numerados sobre a estrada (criados pelo script; o card guarda o texto). */
.journey__cp {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: var(--cp);
  height: var(--cp);
  margin: calc(var(--cp) / -2) 0 0 calc(var(--cp) / -2);
  pointer-events: none;
}

.journey__cp-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 3px solid var(--azul-marca);
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul-900);
  font-size: calc(var(--cp) * 0.42);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 14px -6px rgb(8 6 30 / 0.55);
  transition: background-color 300ms var(--ease-saida), border-color 300ms var(--ease-saida), transform 300ms var(--ease-saida), box-shadow 300ms var(--ease-saida);
}

.journey__cp-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--amarelo);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.journey__cp.is-done .journey__cp-dot,
.journey__cp.is-current .journey__cp-dot,
.journey.is-static .journey__cp-dot {
  border-color: var(--azul-900);
  background: var(--amarelo);
}

.journey__cp.is-current .journey__cp-dot {
  transform: scale(1.14);
  box-shadow: 0 0 0 5px rgb(234 216 30 / 0.3), 0 8px 18px -6px rgb(8 6 30 / 0.6);
}

/* Carrinho: posição e giro só por transform, a cada quadro da rolagem. */
.journey__car {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: var(--carro-l);
  height: var(--carro-c);
  margin: calc(var(--carro-c) / -2) 0 0 calc(var(--carro-l) / -2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease-saida);
  will-change: transform;
}

.journey__car svg {
  width: 100%;
  height: 100%;
}

.journey.is-ready .journey__car {
  opacity: 1;
}

/* Sem estrada desenhada (sem JavaScript) ou com movimento reduzido: sem carro. */
.journey:not(.is-ready) .journey__car,
.journey.is-static .journey__car {
  display: none;
}

/* Sem JavaScript: lista simples de cards, sem a faixa da estrada. */
.no-js .journey__steps {
  padding-left: 0;
}

.journey__nota {
  position: relative;
  z-index: 2;
  max-width: 62ch;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
  color: var(--texto-2);
  font-size: 0.9375rem;
  text-align: center;
  text-wrap: pretty;
}

.journey__nota a {
  color: var(--azul-marca);
  font-weight: 600;
  text-underline-offset: 0.25em;
}

.journey__end {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 40rem;
  margin: clamp(1.75rem, 1.25rem + 2vw, 2.5rem) auto 0;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--borda);
  border-top: 4px solid var(--amarelo);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 24px 48px -32px rgb(var(--azul-900-rgb) / 0.45);
  text-align: center;
}

.journey__end-title {
  max-width: min(20ch, 100%);
  color: var(--azul-900);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.journey__end-text {
  max-width: 44ch;
  margin-top: 0.75rem;
  color: var(--texto-2);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  text-wrap: pretty;
}

.journey__end-btn {
  margin-top: 1.5rem;
  transition:
    background-color var(--dur-botao) var(--ease-saida),
    box-shadow var(--dur-botao) var(--ease-saida),
    transform var(--dur-botao) var(--ease-saida);
}

.journey__end-btn:hover,
.journey__end-btn:focus-visible {
  box-shadow: 0 14px 26px -14px rgb(var(--azul-900-rgb) / 0.7);
}

@media (max-width: 29.99em) {
  .journey__end-btn {
    width: 100%;
  }
}

@media (min-width: 60em) {
  .journey {
    --estrada: clamp(11rem, 6rem + 9vw, 14rem);
    --via: 2.625rem;
    --curva: 3.25rem;
    --cp: 2.375rem;
    --carro-l: 1.875rem;
    --carro-c: 3.4rem;
    --etapa-gap: 1.75rem;
  }

  .js .journey__steps {
    padding-left: 0;
  }

  .js .journey__step {
    width: calc((100% - var(--estrada)) / 2);
  }

  .js .journey__step:nth-child(odd) {
    justify-self: start;
  }

  .js .journey__step:nth-child(even) {
    justify-self: end;
  }

  /* Nos cards da esquerda, a barra de destaque fica do lado da estrada (direita). */
  .js .journey__step:nth-child(odd) .journey-card::before {
    right: -1px;
    left: auto;
    border-radius: 4px 0 0 4px;
  }

  .js .journey__step:nth-child(odd) .journey-card {
    text-align: right;
  }

  .js .journey__step:nth-child(odd) .journey-card__label {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .js .journey__step:nth-child(odd) .journey-card__nome {
    background-position: 100% 0;
  }

  .js .journey__step:nth-child(odd) .journey-card__label::before {
    margin: -0.15rem 0.1rem 0 0.15rem;
  }

  .no-js .journey__steps {
    max-width: 40rem;
    margin-inline: auto;
  }
}

/* Etapas compactas das páginas de categoria: vertical no celular, em linha no computador.
   Mesma linguagem da estrada da página inicial: um trecho de asfalto azul com faixa amarela
   tracejada passa pelos pontos numerados, amarelos como os pontos já alcançados. */
.steps {
  display: grid;
  gap: 1.75rem;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  min-width: 0;
  min-height: 2.75rem;
  padding-left: 4rem;
}

/* Ligação entre uma etapa e a próxima: vai do centro de um ponto ao centro do próximo. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.375rem;
  left: calc(1.375rem - 5px);
  z-index: 0;
  width: 10px;
  height: calc(100% + 1.75rem);
  border-radius: 5px;
  background:
    linear-gradient(180deg, var(--amarelo) 50%, transparent 50%) center / 2px 12px repeat-y,
    var(--azul-900);
  box-shadow: 0 0 0 1.5px #e4e3ef, 0 0 0 3px #2c2862;
  transform-origin: top;
}

.step__num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid var(--azul-900);
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--azul-900);
  font-weight: 800;
  box-shadow: 0 6px 14px -6px rgb(8 6 30 / 0.55);
}

.step__title {
  padding-top: 0.5rem;
  color: var(--azul-900);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
}

.step__text {
  max-width: 40ch;
  margin-top: 0.375rem;
  color: var(--texto-2);
  text-wrap: pretty;
  font-size: var(--texto-corpo);
}

@media (min-width: 56em) {
  .steps {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2rem;
  }

  .step {
    padding-top: 4rem;
    padding-left: 0;
  }

  .step:not(:last-child)::after {
    top: calc(1.375rem - 5px);
    left: 1.375rem;
    width: calc(100% + 2rem);
    height: 10px;
    background:
      linear-gradient(90deg, var(--amarelo) 50%, transparent 50%) center / 12px 2px repeat-x,
      var(--azul-900);
    transform-origin: left;
  }
}

/* Sobre. Celular e tablet: título, foto e texto, nessa ordem. Computador: foto à esquerda e,
   à direita, o título e o texto centralizados na altura da foto. */
.about__grid {
  display: grid;
  grid-template-areas: "head" "visual" "text";
  align-items: center;
  gap: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(2rem, 1rem + 4vw, 5rem);
}

.about__head {
  grid-area: head;
  min-width: 0;
}

/* Foto com detalhe amarelo atrás, no canto inferior esquerdo. Proporções entre 4:3 e 5:4,
   sempre com rostos, mãos e volante dentro do quadro. */
.about__visual {
  grid-area: visual;
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0 0 clamp(0.75rem, 0.5rem + 1vw, 1.25rem) clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

.about__visual::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 58%;
  height: 62%;
  border-radius: var(--raio);
  background: var(--amarelo);
}

.about__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  background: var(--azul-900);
  box-shadow: 0 24px 48px -28px rgb(var(--azul-900-rgb) / 0.55);
}

.about__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}

.about__caption {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: calc(clamp(0.75rem, 0.5rem + 1vw, 1.25rem) + 0.75rem);
  padding: 0.25rem 0.625rem;
  border-radius: var(--raio-pequeno);
  background: rgb(var(--azul-900-rgb) / 0.72);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.about__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.about__lead {
  max-width: 48ch;
  color: var(--texto);
  font-size: var(--texto-apoio);
  text-wrap: pretty;
}

/* Prova real (desativada até haver dado conferido; modelo comentado no index.html). */
.about__prova {
  margin-top: 1rem;
  color: var(--azul-marca);
  font-weight: 600;
}

.about__prova strong {
  color: var(--azul-900);
  font-weight: 800;
}

.about__text .link-seta {
  margin-top: 1.25rem;
}

@media (min-width: 52em) {
  .about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "visual ." "visual head" "visual text" "visual .";
    row-gap: 0;
  }

  .about__head {
    align-self: end;
  }

  .about__text {
    align-self: start;
    margin-top: 1rem;
  }

  .about__frame {
    aspect-ratio: 5 / 4;
  }
}

/* Localização e contato */
.contact__head {
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.contact__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: 0 1px 2px rgb(var(--azul-900-rgb) / 0.06), 0 10px 28px -20px rgb(var(--azul-900-rgb) / 0.3);
}

/* Mapa real do Google: acima das informações no celular, ao lado no computador.
   Altura suficiente para usar zoom e arrastar com conforto. */
/* Altura pela largura do cartão (cqi), sem aspect-ratio: assim a altura mínima nunca alarga o quadro. */
.contact__visual {
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: max(16rem, 75cqi);
  background: var(--fundo-suave);
}

.contact__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 40em) and (max-width: 51.99em) {
  .contact__visual {
    height: max(16rem, 56.25cqi);
  }
}

@media (orientation: landscape) and (max-height: 30em) {
  .contact__visual {
    height: 70vh;
    height: 70svh;
  }
}

.contact__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}

.contact__list {
  display: grid;
  gap: 1.5rem;
  margin: 0;
}

.contact__item dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--azul-marca);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.contact__item dd {
  margin: 0.5rem 0 0;
  color: var(--azul-900);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.4;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

@media (max-width: 34.99em) {
  .contact__actions .btn {
    flex: 1 1 100%;
  }
}

@media (min-width: 52em) {
  .contact__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .contact__visual {
    height: auto;
    min-height: 24rem;
  }
}

/* Chamada final */
.final-cta {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--amarelo);
  color: var(--azul-900);
  --foco: var(--azul-900);
}

.final-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 3rem;
}

.final-cta__text {
  min-width: 0;
}

.final-cta__title {
  max-width: min(20ch, 100%);
  font-size: clamp(1.75rem, 1.35rem + 2.2vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.final-cta__lead {
  max-width: 34ch;
  margin-top: 0.875rem;
  color: var(--azul-marca);
  font-size: var(--texto-apoio);
  text-wrap: pretty;
}

/* Sobre o amarelo, o botão verde ganha contorno azul-escuro para se separar da faixa. */
.final-cta__btn {
  min-width: 0;
  min-height: 3.5rem;
  padding-inline: 1.75rem;
  border-color: var(--azul-900);
}

@media (max-width: 34.99em) {
  .final-cta__btn {
    flex: 1 1 100%;
    padding-inline: 1rem;
  }
}

/* Rodapé */
.site-footer {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) calc(var(--fab) + var(--fab-margem) + 0.75rem);
  background: var(--azul-900);
  color: var(--sobre-azul);
  --foco: var(--amarelo);
  font-size: var(--texto-corpo);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2.5rem 3rem;
}

.site-footer .brand {
  display: inline-flex;
  margin-right: 0;
}

.site-footer .brand__logo {
  width: 56px;
}

.site-footer__about {
  max-width: 30ch;
  margin-top: 1rem;
}

.site-footer__title {
  margin-bottom: 0.5rem;
  color: var(--branco);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-footer__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.site-footer__list a > span,
.site-footer__address > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--raio-pequeno);
  color: var(--sobre-azul);
  text-decoration: none;
  transition: color var(--dur-botao) var(--ease-saida);
}

.site-footer__list a:hover {
  color: var(--branco);
  text-decoration: underline;
  text-decoration-color: var(--amarelo);
  text-underline-offset: 0.3em;
}

.site-footer__list .icon {
  color: var(--amarelo);
}

.site-footer__address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-block: 0.625rem;
  line-height: 1.5;
}

.site-footer__address .icon {
  margin-top: 0.125rem;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  color: var(--sobre-azul-2);
  font-size: var(--texto-nota);
}

@media (min-width: 60em) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr);
  }
}

/* Páginas de categoria (habilitacao-carro.html e habilitacao-moto.html) */
.cat-top {
  padding-block: clamp(0.75rem, 0.5rem + 1.5vw, 1.75rem) clamp(2rem, 1rem + 4vw, 4rem);
  background: var(--azul-900);
  color: var(--branco);
  --foco: var(--amarelo);
}

.link-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  border-radius: var(--raio-pequeno);
  color: var(--branco);
  font-weight: 600;
  text-decoration: none;
}

.link-voltar span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--dur-botao) var(--ease-saida);
}

.link-voltar:hover span {
  text-decoration-color: var(--amarelo);
}

.link-voltar .icon {
  transition: transform 220ms var(--ease-saida);
}

/* Imagem grande do veículo: inteira, sobre branco. */
.cat-top__media {
  --recuo: clamp(0.75rem, 0.25rem + 2vw, 2rem);
  position: relative;
  aspect-ratio: 4 / 3;
  margin-top: clamp(0.5rem, 0.25rem + 1vw, 1rem);
  overflow: hidden;
  border-radius: var(--raio);
  background: #fefefe;
  box-shadow: 0 30px 60px -32px rgb(8 6 30 / 0.7);
}

.cat-top__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 40em) {
  .cat-top__media {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 64em) {
  .cat-top__media {
    aspect-ratio: 21 / 9;
    max-height: max(18rem, 62vh);
    max-height: max(18rem, 62svh);
  }
}

@media (orientation: landscape) and (max-height: 30em) {
  .cat-top__media {
    max-height: 70vh;
    max-height: 70svh;
  }
}

.cat-intro {
  --cat-intro-topo: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  padding-block: var(--cat-intro-topo) var(--secao-y);
  background: var(--fundo-suave);
  --foco: var(--azul-marca);
}

.cat-intro__grid {
  display: grid;
  align-items: start;
  gap: 2rem clamp(2rem, 1rem + 4vw, 5rem);
}

.cat-intro__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.cat-intro__title {
  max-width: min(14ch, 100%);
  color: var(--azul-900);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.cat-intro__lead {
  max-width: 46ch;
  margin-top: 1.25rem;
  color: var(--texto);
  font-size: var(--texto-apoio);
  line-height: 1.55;
  text-wrap: pretty;
}

.cat-intro__text p + p:not(.cat-intro__lead) {
  max-width: 52ch;
  margin-top: 1rem;
  color: var(--texto);
  text-wrap: pretty;
  font-size: var(--texto-corpo);
}

.cat-cta-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  max-width: 34rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

.cat-cta-box__title {
  color: var(--azul-900);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.cat-cta-box__text {
  color: var(--texto-2);
  text-wrap: pretty;
  font-size: var(--texto-corpo);
}

.cat-cta-box .btn {
  width: 100%;
  margin-top: 0.5rem;
  padding-inline: 1rem;
  font-size: 1rem;
}

/* Computador: selo, título, texto e o quadro de WhatsApp na primeira tela. O quadro fica parado
   no lugar (sem acompanhar a rolagem), para nunca passar por cima do texto da seção seguinte. A foto do veículo
   sai do meio da faixa azul e vai para a coluna da direita, metade sobre o azul e metade sobre
   o claro; o quadro de WhatsApp vem logo abaixo dela. A faixa e a introdução usam as mesmas
   colunas (1,25 fr para o texto e 1 fr para a foto), por isso foto e quadro ficam alinhados. */
@media (min-width: 64em) {
  .cat-top,
  .cat-intro {
    --cat-vao: clamp(2rem, 1rem + 4vw, 5rem);
    --cat-faixa-baixo: 8.5vw;
  }

  .cat-top {
    padding-bottom: var(--cat-faixa-baixo);
  }

  .cat-top .container {
    position: relative;
  }

  .cat-top__media {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: calc((100% - var(--cat-vao)) / 2.25);
    max-height: none;
    margin-top: 0;
    aspect-ratio: 4 / 3;
  }

  .cat-intro__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: var(--cat-vao);
  }

  /* O quadro começa 1,5 rem abaixo da foto: altura da foto (75% da largura da coluna) menos o
     trecho dela que fica na faixa azul (link de voltar e respiro de baixo) e o respiro de cima
     da introdução. */
  .cat-cta-box {
    margin-top: calc(75% - 3rem - var(--cat-faixa-baixo) + 1.5rem - var(--cat-intro-topo));
  }
}

.cat-section {
  padding-block: var(--secao-y);
  background: var(--fundo-branco);
  --foco: var(--azul-marca);
}

.cat-section--suave {
  background: var(--fundo-suave);
}

.cat-section > .section-head {
  align-items: start;
  margin-bottom: 0;
}

.cat-section__body {
  display: grid;
  gap: 1rem;
  max-width: 60ch;
}

.cat-section__body p {
  color: var(--texto);
  font-size: var(--texto-corpo);
  text-wrap: pretty;
}

.cat-section .steps {
  margin-top: 0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
}

.info-grid__item {
  display: flex;
  min-width: 0;
}

.info-card {
  flex: 1;
  min-width: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

.info-card__title {
  color: var(--azul-900);
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.3;
}

.info-card__title::before {
  content: "";
  display: block;
  width: 2rem;
  height: 4px;
  margin-bottom: 0.875rem;
  border-radius: 2px;
  background: var(--amarelo);
}

.info-card__text {
  margin-top: 0.5rem;
  color: var(--texto-2);
  text-wrap: pretty;
  font-size: var(--texto-corpo);
}

.cat-note {
  max-width: 62ch;
  margin-top: clamp(1.5rem, 1rem + 1vw, 2.25rem);
  color: var(--texto-2);
  font-size: var(--texto-nota);
}

.cat-note a {
  color: var(--azul-marca);
  font-weight: 600;
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}