/* =========================================================
   Placas Express — páginas
   Seções específicas de cada página.
   Cada seção da home tem composição própria, de propósito.
   ========================================================= */

/* =============== INÍCIO (visual 2026 · Modelo C) =============== */

/* ---------- hero: foto da placa sendo instalada + véu azul ---------- */

.heroi {
  --titulo: var(--branco);
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88svh, 720px);
  overflow: hidden;
  background: var(--marinho-fundo);
  color: var(--branco);
  isolation: isolate;
}
.heroi__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url(../img/hero-placa.webp) 76% center / cover no-repeat;
}
@media (max-width: 899px) {
  /* no celular a foto fica em cima e o texto entra logo abaixo */
  .heroi.heroi { min-height: 0; align-items: flex-start; }
  .heroi__foto { bottom: auto; height: min(88vw, 460px); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .heroi .heroi__conteudo { padding-top: min(64vw, 350px); padding-bottom: 48px; }
}
.heroi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veu-heroi-celular);
}
.heroi__conteudo {
  display: grid;
  gap: 24px;
  padding-block: 120px 56px;
}
.heroi__legenda {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sobre-marinho-2);
}
.heroi__titulo {
  max-width: 12ch;
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.heroi__lead {
  max-width: 30rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--sobre-marinho);
}
.heroi__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.heroi__acoes .link-seta { color: var(--branco); border-bottom-width: 1px; }
.heroi__provas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  padding-top: 20px;
  border-top: 1px solid var(--linha-marinho);
  font-size: 0.88rem;
  font-weight: 500;
}
.heroi__provas li { padding-inline: 18px; border-left: 1px solid var(--linha-marinho); }
.heroi__provas li:first-child { padding-left: 0; border-left: 0; }

@media (min-width: 900px) {
  .heroi { align-items: center; }
  .heroi::before { background: var(--veu-heroi); }
  .heroi__foto { background-position: right center; }
  .heroi__conteudo { max-width: 640px; padding-block: 96px; margin-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .heroi__foto { animation: heroi-zoom 14s var(--ease) both; }
  .heroi__conteudo > * { animation: sobe 0.8s var(--ease) both; }
  .heroi__conteudo > :nth-child(2) { animation-delay: 0.08s; }
  .heroi__conteudo > :nth-child(3) { animation-delay: 0.16s; }
  .heroi__conteudo > :nth-child(4) { animation-delay: 0.24s; }
  .heroi__conteudo > :nth-child(5) { animation-delay: 0.32s; }
}
@keyframes heroi-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* faixa das três cores da marca, entre o hero e as unidades */
.faixa-marca {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 8px;
  background: linear-gradient(90deg, var(--acao) 0 33.33%, var(--azul-faixa) 0 66.66%, var(--azul) 0);
}

/* ---------- 01 · unidades ---------- */

.unidades .cab-secao { margin-bottom: 28px; }
/* na home: só cidade, endereço e WhatsApp (fixo e e-mail ficam na página Unidades) */
.unidades .card-unidade__contatos { display: none; }

@media (min-width: 900px) {
  .unidades .cab-secao__titulo { grid-column: 1 / span 9; }
}

/* ---------- 02 · tipos de placa (catálogo em cartões) ---------- */

.tipos-secao__cab {
  display: grid;
  gap: 14px;
  margin-bottom: 40px;
}
.tipos-secao__cab .etiqueta { justify-self: start; }
.tipos-secao__titulo { font-size: var(--t-1); max-width: 18ch; }
.tipos-secao__texto { max-width: 38ch; color: var(--texto-suave); }

@media (min-width: 900px) {
  .tipos-secao__cab { grid-template-columns: 1fr auto; align-items: end; column-gap: 48px; }
  .tipos-secao__cab .etiqueta { grid-column: 1 / -1; }
}

.catalogo {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) { .catalogo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .catalogo { grid-template-columns: repeat(5, 1fr); } }

.catalogo__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 8px;
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.catalogo__item:hover { box-shadow: 0 18px 36px -24px rgb(20 38 76 / 45%); transform: translateY(-2px); }

.catalogo__vitrine {
  display: grid;
  place-items: center;
  height: 150px;
  padding: 0 28px;
  background: var(--vitrine-placa);
}
.catalogo__vitrine .placa {
  max-width: 170px;
  box-shadow: 0 12px 24px -14px rgb(0 0 0 / 50%);
  transition: transform 0.3s var(--ease);
}
.catalogo__item--moto .catalogo__vitrine .placa { max-width: 84px; }
.catalogo__item:hover .placa { transform: translateY(-3px); }

.catalogo__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
}
.catalogo__info .legenda { color: var(--acao-texto); }
.catalogo__info h3 { font-size: 1.1rem; }
.catalogo__info p:not(.legenda) { font-size: 0.9rem; line-height: 1.6; color: var(--texto-suave); }
.catalogo__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
}
.catalogo__link::after { content: "→"; transition: transform 0.2s var(--ease); }
.catalogo__link:hover::after { transform: translateX(4px); }

/* ---------- 03 · como funciona (marinho, números grandes) ---------- */

.passos-secao__cab {
  display: grid;
  gap: 16px;
  margin-bottom: 40px;
}
.passos-secao__cab .etiqueta { justify-self: start; }
.passos-secao__titulo { font-size: var(--t-1); color: var(--branco); }
.passos-secao__texto {
  justify-self: start;
  padding: 14px 18px;
  font-size: 0.92rem;
  color: var(--sobre-marinho);
  border: 1px solid var(--linha-marinho);
  border-radius: 8px;
}
.passos-secao__texto strong { color: var(--acao-claro); }

@media (min-width: 900px) {
  .passos-secao__cab { grid-template-columns: auto 1fr; align-items: end; column-gap: 40px; }
  .passos-secao__cab .etiqueta { grid-column: 1 / -1; }
  .passos-secao__texto { justify-self: end; }
}

.passos {
  display: grid;
  gap: 16px;
  counter-reset: passo;
}
@media (min-width: 900px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.passo {
  counter-increment: passo;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  background: var(--vidro-marinho);
  border: 1px solid var(--linha-marinho);
  border-radius: 8px;
}
.passo::before {
  content: counter(passo, decimal-leading-zero);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--acao);
}
.passo h3 { font-size: 1.3rem; color: var(--branco); }
.passo p { font-size: 0.95rem; line-height: 1.6; color: var(--sobre-marinho-2); }
.passos-secao__acao { margin-top: 32px; }

/* ---------- 04 · por que a Express (azul + cartões brancos) ---------- */

.diferenciais { --titulo: var(--sobre-acao); background: var(--acao); color: var(--sobre-acao); }
.diferenciais .etiqueta { color: var(--sobre-acao); }
.diferenciais__grade { display: grid; gap: 40px; align-items: center; }
.diferenciais__intro { display: grid; gap: 20px; }
.diferenciais__titulo {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--sobre-acao);
}
.diferenciais__intro p:not(.etiqueta) { max-width: 42ch; font-size: 1.05rem; line-height: 1.65; }
.diferenciais__intro .botao { justify-self: start; }

.diferenciais__lista { display: grid; gap: 14px; }
@media (min-width: 600px) { .diferenciais__lista { grid-template-columns: 1fr 1fr; } }
.diferencial {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  background: var(--branco);
  border-radius: 8px;
}
.diferencial svg { width: 26px; height: 26px; color: var(--acao-texto); }
.diferencial dt { font-size: 1.1rem; font-weight: 700; color: var(--tinta); }
.diferencial dd { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--texto-suave); }

@media (min-width: 992px) {
  .diferenciais__grade { grid-template-columns: 1fr 1fr; gap: 72px; }
}

/* ---------- 05 · dúvidas ---------- */

.duvidas-secao { background: var(--branco); }
.duvidas-secao__grade { display: grid; gap: 32px; }
.duvidas-secao__cab { display: grid; gap: 16px; align-content: start; }
.duvidas-secao__cab .etiqueta,
.duvidas-secao__cab .link-seta { justify-self: start; }
.duvidas-secao__cab .link-seta { color: var(--azul); border-bottom-width: 1px; }
.duvidas-secao__titulo { font-size: var(--t-1); }
.duvidas-secao .faq { border-top: 1px solid var(--linha); }
.duvidas-secao .faq summary { grid-template-columns: 1fr 24px; }
.duvidas-secao .faq summary::before { display: none; }
.duvidas-secao .faq summary::after { color: var(--acao-texto); }
.duvidas-secao .faq__resposta { padding-left: 0; }

@media (min-width: 992px) {
  .duvidas-secao__grade { grid-template-columns: 5fr 7fr; gap: 80px; }
}

/* ---------- chamada final: a mesma foto do hero, escurecida ---------- */

.chamada {
  --titulo: var(--branco);
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 8vw, 96px);
  background: var(--marinho-fundo);
  color: var(--branco);
  isolation: isolate;
}
.chamada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url(../img/hero-placa.webp) right 40% / cover no-repeat;
}
.chamada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veu-chamada);
}
.chamada__grade { display: grid; gap: 24px; align-items: center; }
.chamada__titulo { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--branco); }
.chamada__lado { display: grid; gap: 20px; }
.chamada__lado p { font-size: 1.05rem; color: var(--sobre-marinho); }
.chamada__lado .botao { justify-self: start; }

@media (min-width: 992px) {
  .chamada__grade { grid-template-columns: 1fr auto; }
  .chamada__texto { display: grid; gap: 12px; }
}

/* =============== PÁGINAS INTERNAS =============== */

/* ---------- cabeçalho da página ---------- */

.cab-pagina {
  padding-block: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 56px);
  background: var(--fundo-forte);
  color: var(--sobre-forte);
  border-bottom: 1px solid var(--linha-forte);
}

.cab-pagina__grade {
  display: grid;
  gap: 18px;
}
.cab-pagina .etiqueta { justify-self: start; }

.migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--sobre-forte-2);
}
.migalhas li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--sobre-forte-3);
}
.migalhas a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-decoration: none;
}
.migalhas a:hover { color: var(--azul); text-decoration: underline; }

.cab-pagina__titulo { font-size: var(--t-1); }

.cab-pagina__texto {
  max-width: 42ch;
  font-size: 1.05rem;
  color: var(--sobre-forte-2);
}

@media (min-width: 900px) {
  .cab-pagina__grade {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: end;
  }
  .cab-pagina__grade > * { grid-column: 1 / -1; }
  .cab-pagina__titulo { grid-column: 1 / span 8; }
  .cab-pagina__texto { grid-column: 9 / -1; padding-bottom: 0.4em; }
}

/* ---------- placas: anatomia da placa Mercosul ---------- */

.anatomia {
  display: grid;
  gap: 40px;
  align-items: center;
}

.anatomia__placa {
  position: relative;
  max-width: 520px;
}
.anatomia__placa .placa { box-shadow: var(--sombra-placa); }

/* marcadores numerados sobre a placa */
.anatomia__marca {
  position: absolute;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--fonte-titulo);
  font-size: 0.8rem;
  font-weight: 800;
  background: var(--acao);
  color: var(--sobre-acao);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--fundo-neutro);
}
.anatomia__marca--1 { top: -12px; left: 18%; }
.anatomia__marca--2 { bottom: 12%; left: -12px; }
.anatomia__marca--3 { bottom: -12px; right: 18%; }

.anatomia__lista {
  counter-reset: marca;
  border-top: 2px solid var(--tinta);
}
.anatomia__lista li {
  counter-increment: marca;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 12px;
  padding-block: 16px;
  border-bottom: 1px solid var(--linha);
  color: var(--texto-suave);
}
.anatomia__lista li::before {
  content: counter(marca);
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--acao-texto);
}
.anatomia__lista strong { display: block; color: var(--texto); }

@media (min-width: 900px) {
  .anatomia { grid-template-columns: 1.1fr 1fr; gap: 64px; }
}

/* ---------- placas: quando trocar ---------- */

.quando {
  display: grid;
  gap: 0;
  counter-reset: quando;
  border-top: 1px solid var(--linha-forte);
}
.quando li {
  counter-increment: quando;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 16px;
  align-items: baseline;
  padding-block: 20px;
  border-bottom: 1px solid var(--linha-forte);
}
.quando li::before {
  content: counter(quando, decimal-leading-zero);
  font-family: var(--fonte-titulo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sobre-forte-3);
}
.quando strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}
.quando span { color: var(--sobre-forte-2); }

@media (min-width: 900px) {
  .quando { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}

/* ação dentro do catálogo nas páginas internas */
.catalogo__acao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 0;
  font-weight: 600;
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.catalogo__acao:hover { color: var(--acao-texto); }

/* ---------- unidades (página) ---------- */

.aviso-linha {
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* ---------- dúvidas (página) ---------- */

.duvidas-pagina__grade {
  display: grid;
  gap: 40px;
}

.duvidas-pagina__nav {
  display: grid;
  gap: 16px;
  align-content: start;
}
.duvidas-pagina__nav ul { display: grid; gap: 2px; }
.duvidas-pagina__nav a:not(.botao) {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
}
.duvidas-pagina__nav a:not(.botao):hover { color: var(--azul); }
.duvidas-pagina__nav .botao { justify-self: start; margin-top: 12px; }

.grupo-faq + .grupo-faq { margin-top: 56px; }
.grupo-faq h2 {
  margin-bottom: 20px;
  font-size: var(--t-2);
  scroll-margin-top: 110px;
}

@media (min-width: 992px) {
  .duvidas-pagina__grade {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
  }
  .duvidas-pagina__nav {
    grid-column: 1 / span 3;
    position: sticky;
    top: 120px;
    align-self: start;
  }
  .duvidas-pagina__conteudo { grid-column: 5 / -1; }
}

/* ---------- quem somos ---------- */

.sobre {
  display: grid;
  gap: 40px;
  align-items: center;
}

.sobre__titulo {
  font-size: var(--t-1);
  max-width: 16ch;
}
.sobre__titulo em { font-style: normal; color: var(--acao); }

.sobre__texto {
  max-width: 44ch;
  margin-top: 20px;
  font-size: 1.1rem;
  color: var(--texto-suave);
}

@media (min-width: 900px) {
  .sobre { grid-template-columns: 1.3fr 1fr; gap: 64px; }
}

/* estados em formato de etiqueta de placa */
.estados {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.estado {
  display: grid;
  overflow: hidden;
  border: 1.5px solid var(--tinta);
  border-radius: var(--raio-placa);
  background: var(--branco);
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.estado:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tinta); }
.estado__faixa {
  padding: 4px 12px;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.estado__uf {
  padding: 10px 12px 2px;
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
}
.estado__nome {
  padding: 0 12px 12px;
  font-size: 0.85rem;
  color: var(--texto-suave);
}

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

/* ---------- contato ---------- */

.contato {
  display: grid;
  gap: 48px;
}

.form-whats {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--branco);
  border: 1.5px solid var(--tinta);
  border-radius: var(--raio-placa);
}
.form-whats h2 { font-size: var(--t-2); }
.form-whats > p { color: var(--texto-suave); }

.campo { display: grid; gap: 6px; }
.campo label {
  font-size: 0.9rem;
  font-weight: 600;
}
.campo label small { font-weight: 400; color: var(--texto-suave); }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-botao);
  transition: border-color 0.2s;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--tinta-suave); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 1px;
  border-color: var(--tinta);
}
.campo--duplo { display: grid; gap: 18px; }

.form-whats__nota {
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.form-whats .botao { justify-self: start; }

@media (min-width: 600px) {
  .campo--duplo { grid-template-columns: 1fr 1fr; }
}

.canais { border-top: 2px solid var(--tinta); }
.canal {
  display: grid;
  gap: 6px;
  padding-block: 24px;
  border-bottom: 1px solid var(--linha);
}
.canal h2 { font-size: var(--t-3); }
.canal p { color: var(--texto-suave); }
.canal a:not(.botao) {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--azul);
  overflow-wrap: anywhere;
}
.canal .botao { justify-self: start; margin-top: 8px; }
.canal__redes { display: flex; gap: 20px; }

@media (min-width: 992px) {
  .contato {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .form-whats { grid-column: 1 / span 7; }
  .canais { grid-column: 9 / -1; }
}

/* ---------- privacidade (texto corrido) ---------- */

.aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 72ch;
  margin-bottom: 40px;
  padding: 14px 16px;
  background: var(--papel);
  border: 1.5px dashed var(--acao-texto);
  border-radius: var(--raio-botao);
  font-size: 0.95rem;
}

.texto-corrido {
  max-width: 72ch;
  color: var(--texto-suave);
}
.texto-corrido h2 {
  margin: 48px 0 14px;
  font-size: var(--t-3);
  color: var(--texto);
  scroll-margin-top: 110px;
}
.texto-corrido h2:first-child { margin-top: 0; }
.texto-corrido p + p { margin-top: 12px; }
.texto-corrido ul {
  margin-top: 12px;
  padding-left: 20px;
  list-style: square;
}
.texto-corrido li + li { margin-top: 6px; }
.texto-corrido strong { color: var(--texto); }
.texto-corrido a { color: var(--azul); }
.texto-corrido .marcador {
  padding: 0 4px;
  background: var(--papel);
  border: 1px dashed var(--acao-texto);
  border-radius: var(--raio-etiqueta);
  color: var(--acao-texto);
  font-weight: 600;
}
.sobre .etiqueta + .sobre__titulo { margin-top: 20px; }

/* quem somos: assinatura da marca sobre o azul (sem mascote) */
.sobre__assinatura {
  display: grid;
  gap: 20px;
  justify-items: center;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px);
  background: linear-gradient(120deg, var(--acao), var(--acao-2));
  border-radius: var(--raio-placa);
  text-align: center;
}
.sobre__assinatura img { width: min(100%, 360px); height: auto; }
.sobre__assinatura p {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--sobre-acao);
}

@media (max-width: 719px) {
  .heroi__acoes .botao { width: 100%; }
}

/* ---------- unidades na home, celular: carrossel com arraste lateral ---------- */
.dica-arrastar { display: none; }

@media (max-width: 699px) {
  .unidades .lista-unidades {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    /* o carrossel encosta nas bordas da tela */
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 14px;
    scrollbar-width: thin;
  }
  .unidades .card-unidade { scroll-snap-align: start; }

  .unidades .filtro {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
  }
  .unidades .filtro button { flex: none; padding-inline: 14px; }

  .unidades .dica-arrastar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -16px 0 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--texto-suave);
  }
  .unidades .dica-arrastar svg { width: 16px; height: 16px; }
}

/* ---------- ajustes do visual 2026 ---------- */
.diferenciais .botao--escuro { background: var(--grafite); color: var(--branco); }
.diferenciais .botao--escuro:hover { background: var(--preto); box-shadow: none; transform: none; }

@media (max-width: 639px) {
  /* catálogo vira carrossel com arraste, como as unidades */
  .catalogo {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 14px;
    scrollbar-width: thin;
  }
  .catalogo__item { scroll-snap-align: start; }
  .catalogo__vitrine { height: 120px; }

  /* diferenciais em 2 colunas compactas */
  .diferenciais__lista { grid-template-columns: 1fr 1fr; gap: 10px; }
  .diferencial { padding: 16px; gap: 8px; }
  .diferencial dt { font-size: 0.98rem; }
  .diferencial dd { font-size: 0.82rem; }

  .passo { padding: 22px; }
  .passo::before { font-size: 2.4rem; }
  .heroi__provas li { padding-inline: 12px; }
}
/* números dos passos sempre em azul (o efeito antigo deixava 02 e 03 apagados) */
.js .passo[data-revelar]::before,
.js .passo[data-revelar].visivel::before { color: var(--acao); }

/* =============== acabamento premium (seções abaixo do hero) =============== */

/* etiqueta com traço fino antes, em cinza; o azul fica só no traço */
.etiqueta { gap: 0; color: var(--texto-suave); font-size: 0.72rem; letter-spacing: 0.16em; align-items: center; }
.etiqueta::before { content: ""; width: 28px; height: 1px; margin-right: 12px; background: var(--acao); }
.secao--marinho .etiqueta,
.diferenciais .etiqueta { color: var(--sobre-marinho-2); }

.cab-secao__titulo,
.tipos-secao__titulo,
.passos-secao__titulo,
.duvidas-secao__titulo { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -0.03em; }

/* unidades: fundo branco, cartões com fio fino, sem sombra colorida */
.unidades { background: var(--branco); }
.unidades .card-unidade { border-radius: 4px; box-shadow: none; }
.unidades .card-unidade:hover,
.unidades .card-unidade:focus-within { transform: none; border-color: var(--tinta-suave); box-shadow: none; }
.card-unidade__uf { background: none; padding: 0; color: var(--texto-suave); letter-spacing: 0.16em; }
.card-unidade__acoes .botao { border-radius: 4px; }
.filtro button { border-radius: 4px; background: transparent; }

/* catálogo: vitrine escura, as placas aparecem como produto */
.tipos-secao { background: var(--papel); }
.catalogo__item { border: 0; border-radius: 4px; }
.catalogo__item:hover { transform: none; box-shadow: none; }
.catalogo__vitrine { height: 170px; background: var(--marinho); }
.catalogo__vitrine .placa { box-shadow: 0 18px 30px -16px rgb(0 0 0 / 70%); }
.catalogo__info .legenda { color: var(--texto-suave); }
.catalogo__link { color: var(--tinta); }

/* como funciona: números finos, linha azul em cima */
.passo { background: none; border: 0; border-top: 1px solid var(--linha-marinho); border-radius: 0; padding: 28px 0 0; }
.passo::before { font-size: 0.9rem; letter-spacing: 0.16em; color: var(--acao-claro); }
.js .passo[data-revelar]::before,
.js .passo[data-revelar].visivel::before { color: var(--acao-claro); }
.passo h3 { font-size: 1.35rem; }
.passos-secao__texto { border-radius: 4px; }

/* por que a Express: sai o bloco azul, entra fundo escuro com fios finos */
.diferenciais { --titulo: var(--branco); background: var(--marinho-fundo); color: var(--sobre-marinho); }
.diferenciais__titulo { color: var(--branco); }
.diferenciais__intro p:not(.etiqueta) { color: var(--sobre-marinho); }
.diferenciais .botao--escuro { background: transparent; color: var(--branco); border: 1px solid var(--linha-marinho); }
.diferenciais .botao--escuro:hover { background: var(--branco); color: var(--marinho); }
.diferenciais__lista { gap: 0; border-top: 1px solid var(--linha-marinho); }
.diferencial { background: none; border-radius: 0; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--linha-marinho); }
.diferencial svg { color: var(--acao); }
.diferencial dt { color: var(--branco); }
.diferencial dd { color: var(--sobre-marinho-2); }
@media (min-width: 600px) {
  .diferencial:nth-child(odd) { border-right: 1px solid var(--linha-marinho); }
  .diferencial:nth-child(even) { padding-left: 24px; }
}

/* botões um pouco mais retos em todo o site */
.botao { border-radius: 4px; }

/* como funciona em fundo claro (evita dois blocos escuros seguidos) */
.passos-secao { background: var(--branco); }
.passos-secao__titulo { color: var(--titulo); }
.passos-secao__texto { color: var(--texto-suave); border-color: var(--linha); }
.passos-secao__texto strong { color: var(--acao-texto); }
.passo { border-top-color: var(--tinta); }
.passo h3 { color: var(--titulo); }
.passo p { color: var(--texto-suave); }
.passo::before,
.js .passo[data-revelar]::before,
.js .passo[data-revelar].visivel::before { color: var(--acao-texto); }

/* quem somos: assinatura sobre a foto do hero, no mesmo clima da home */
.sobre__assinatura {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 300px;
  align-content: center;
  background: var(--marinho-fundo);
  border-radius: 4px;
}
.sobre__assinatura::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(../img/hero-placa.webp) right center / cover no-repeat; }
.sobre__assinatura::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--veu-chamada); }
.sobre__assinatura img { width: min(100%, 300px); }
.sobre__assinatura p { font-weight: 600; color: var(--sobre-marinho); }

/* =============== menos azul: neutros quentes + grafite (o azul fica no hero) =============== */

/* cartões de unidade: botão grafite, filtro grafite */
.botao--marinho { background: var(--grafite); }
.botao--marinho:hover { background: var(--preto); }
.botao--marinho svg { color: var(--acao); }
.filtro button[aria-pressed="true"] { background: var(--grafite); border-color: var(--grafite); }
.card-unidade__uf { color: var(--acao-texto); }

/* vitrine clara, como foto de produto em estúdio */
.tipos-secao { background: var(--branco); }
.catalogo__item { border: 1px solid var(--linha); }
.catalogo__vitrine { height: 180px; background: var(--vitrine-clara); }
.catalogo__vitrine .placa { box-shadow: 0 22px 30px -18px rgb(0 0 0 / 45%), 0 2px 4px rgb(0 0 0 / 8%); }

/* como funciona sobre o papel quente */
.passos-secao { background: var(--papel); }

/* por que a Express: grafite em vez de azul */
.diferenciais { background: var(--grafite); }
.diferenciais,
.diferenciais__intro p:not(.etiqueta),
.diferencial dd { color: var(--sobre-grafite); }
.diferenciais .etiqueta { color: var(--sobre-grafite); }
.diferenciais__lista,
.diferencial { border-color: var(--linha-grafite); }
@media (min-width: 600px) { .diferencial:nth-child(odd) { border-right-color: var(--linha-grafite); } }
.diferenciais .botao--escuro { border-color: var(--linha-grafite); }
.diferenciais .botao--escuro:hover { color: var(--grafite); }

/* rodapé grafite */
.rodape {
  --sobre-forte-2: var(--sobre-grafite);
  --linha-forte: var(--linha-grafite);
  background: var(--preto);
}
.rodape__base { color: var(--sobre-grafite); }

/* respiro maior entre as seções */
.secao { padding-block: clamp(72px, 9vw, 128px); }

/* =============== só cores da marca: azul, cinza institucional e azul (sem preto) =============== */

/* unidades: WhatsApp em azul, filtro ativo em azul */
.botao--marinho { background: var(--acao); color: var(--sobre-acao); }
.botao--marinho:hover { background: var(--acao-2); }
.botao--marinho svg { color: var(--sobre-acao); }
.filtro button[aria-pressed="true"] { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); }

/* por que a Express: azul da marca (degradê do manual), com fios finos */
.diferenciais {
  --titulo: var(--sobre-acao);
  background: linear-gradient(120deg, var(--acao), var(--acao-2));
  color: var(--sobre-acao);
}
.diferenciais__titulo,
.diferencial dt { color: var(--sobre-acao); }
.diferenciais__intro p:not(.etiqueta),
.diferencial dd,
.diferenciais .etiqueta { color: var(--sobre-acao); }
.diferenciais .etiqueta::before { background: var(--sobre-acao); }
.diferenciais__lista,
.diferencial { border-color: var(--linha-acao); }
@media (min-width: 600px) { .diferencial:nth-child(odd) { border-right-color: var(--linha-acao); } }
.diferencial svg { color: var(--sobre-acao); }
.diferenciais .botao--escuro { background: var(--branco); color: var(--tinta); border-color: var(--branco); }
.diferenciais .botao--escuro:hover { background: var(--papel); color: var(--tinta); }

/* rodapé no cinza institucional */
.rodape {
  --sobre-forte-2: var(--sobre-cinza);
  --acao-rodape: var(--acao-claro);
  --linha-forte: var(--linha-grafite);
  background: var(--cinza-marca);
}
.rodape__base { color: var(--sobre-cinza); }

/* fotos reais das placas nas vitrines */
.catalogo__vitrine { padding: 18px 22px; }
.catalogo__foto { width: 100%; max-width: 230px; height: auto; max-height: 124px; object-fit: contain; filter: drop-shadow(0 14px 16px rgb(0 0 0 / 22%)); transition: transform 0.35s var(--ease); }
.catalogo__foto--moto { max-width: 118px; max-height: 128px; }
.catalogo__item:hover .catalogo__foto { transform: translateY(-4px); }
.catalogo__item { background: var(--branco); }
.tipos-secao { background: var(--papel); }

/* por que a Express: fundo claro, o azul fica só nos ícones e nos fios */
.diferenciais {
  --titulo: var(--titulo-escuro);
  background: var(--branco);
  color: var(--texto-suave);
}
.diferenciais__titulo,
.diferencial dt { color: var(--titulo-escuro); }
.diferenciais__intro p:not(.etiqueta),
.diferencial dd { color: var(--texto-suave); }
.diferenciais .etiqueta { color: var(--texto-suave); }
.diferenciais .etiqueta::before { background: var(--acao); }
.diferenciais__lista,
.diferencial { border-color: var(--linha); }
@media (min-width: 600px) { .diferencial:nth-child(odd) { border-right-color: var(--linha); } }
.diferencial svg { color: var(--acao-texto); }
.diferenciais .botao--escuro { background: var(--acao); color: var(--sobre-acao); border-color: var(--acao); }
.diferenciais .botao--escuro:hover { background: var(--acao-2); color: var(--sobre-acao); }
.passos-secao { background: var(--papel); }
/* alternância: catálogo (papel) · passos (branco) · diferenciais (papel) · dúvidas (branco) */
.passos-secao { background: var(--branco); }
.diferenciais { background: var(--papel); }

/* =============== mais vida: passos com visual e diferenciais com foto =============== */

.passos { gap: 20px; }
.passo {
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 6px;
  overflow: hidden;
  background: var(--branco);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.passo:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgb(38 38 43 / 45%); }
.passo::before {
  position: absolute;
  top: 18px;
  left: 22px;
  z-index: 1;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
}
.passo { position: relative; }
.passo h3, .passo p { padding-inline: 26px; }
.passo p { padding-bottom: 28px; }
.passo__visual {
  display: grid;
  place-items: center;
  height: 170px;
  margin-bottom: 8px;
}
.passo__visual svg { width: 64px; height: 64px; }
.passo__visual--acao { background: linear-gradient(135deg, var(--acao), var(--acao-2)); color: var(--branco); }
.passo__visual--azul { background: linear-gradient(135deg, var(--azul), var(--azul-escuro)); color: var(--branco); }
.passo__visual--placa { background: var(--vitrine-clara); }
.passo__visual--placa img { width: 62%; height: auto; filter: drop-shadow(0 14px 16px rgb(0 0 0 / 22%)); }
/* número do passo em pílula sobre o visual */
.passo::before,
.js .passo[data-revelar]::before,
.js .passo[data-revelar].visivel::before {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--branco);
  color: var(--acao-texto);
}
.passo:hover .passo__visual svg { transform: scale(1.06); }
.passo__visual svg { transition: transform 0.35s var(--ease); }

/* diferenciais: o texto fica sobre a foto; os quatro pontos em cartões */
.diferenciais__intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 660px;
  align-content: end;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 6px;
  background: var(--marinho-fundo);
  color: var(--sobre-marinho);
}
.diferenciais__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url(../img/suv.webp) 55% -20px / auto 58% no-repeat, var(--fundo-foto);
  transition: transform 1.2s var(--ease);
}
.diferenciais__intro:hover .diferenciais__foto { transform: scale(1.04); }
.diferenciais__intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veu-cartao);
}
.diferenciais__intro .etiqueta { color: var(--sobre-marinho-2); }
.diferenciais__intro .diferenciais__titulo { color: var(--branco); }
.diferenciais__intro p:not(.etiqueta) { color: var(--sobre-marinho); }

.diferenciais__lista { gap: 14px; border: 0; }
.diferencial,
.diferencial:nth-child(odd),
.diferencial:nth-child(even) {
  padding: 26px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 6px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.diferencial:hover { transform: translateY(-3px); border-color: var(--acao); box-shadow: 0 22px 36px -28px rgb(243 107 48 / 60%); }
.diferencial svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 6px;
  background: var(--acao-suave);
  color: var(--acao-texto);
}
@media (min-width: 992px) {
  .diferenciais__grade { align-items: stretch; gap: 32px; }
  .diferenciais__lista { align-content: center; }
}

@media (max-width: 719px) {
  .diferenciais__foto { background-size: auto 46%; background-position: 60% 0; }
  .passo__visual { height: 130px; }
}

/* rodapé no azul do logotipo (sem cinza) */
.rodape {
  --sobre-forte-2: var(--sobre-marinho);
  --acao-rodape: var(--acao-claro);
  --linha-forte: var(--linha-marinho);
  background: var(--marinho);
}
.rodape__base { color: var(--sobre-marinho); }

/* =============== celular: mais compacto e responsivo (só até 599px) =============== */
@media (max-width: 599px) {
  /* ritmo vertical menor entre seções */
  .secao { padding-block: 56px; }
  .secao__cabeca, .secao-cabeca { margin-bottom: 24px; }

  /* hero: botão do WhatsApp não cobre o CTA, provas em linhas limpas */
  .heroi .heroi__conteudo { padding-bottom: 36px; }
  .heroi__acoes { gap: 14px; }
  .heroi__provas { display: grid; gap: 8px; padding-top: 16px; }
  .heroi__provas li,
  .heroi__provas li:first-child { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; font-size: 0.88rem; }
  .heroi__provas li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--acao); }

  /* WhatsApp flutuante um pouco menor no celular */
  .whatsapp-flutuante { width: 54px; height: 54px; right: 14px; bottom: 14px; }
  .whatsapp-flutuante svg { width: 26px; height: 26px; }

  /* unidades: cartão mais largo e compacto */
  .unidades .lista-unidades { grid-auto-columns: 88%; }
  .card-unidade { padding: 20px; }

  /* catálogo: cartões menores, sem espaço vazio */
  .catalogo { grid-auto-columns: 72%; }
  .catalogo__vitrine { height: 110px; padding: 14px 18px; }
  .catalogo__info { padding: 18px; gap: 6px; }
  .catalogo__link { margin-top: 6px; }

  /* passos: cartão horizontal (visual à esquerda, texto à direita) */
  .passos { gap: 12px; }
  .passo {
    display: grid;
    grid-template-columns: 92px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    align-items: start;
  }
  .passo__visual { grid-row: 1 / span 2; height: 100%; min-height: 112px; margin: 0; }
  .passo__visual svg { width: 38px; height: 38px; }
  .passo__visual--placa img { width: 78px; }
  .passo::before { top: 8px; left: 8px; font-size: 0.68rem; }
  .passo h3 { padding: 18px 16px 0 0; font-size: 1.05rem; }
  .passo p { padding: 4px 16px 18px 0; font-size: 0.88rem; }
  .passos-secao__acao .botao { width: 100%; }

  /* por que a Express: cartão da foto mais baixo, lista em 1 coluna com ícone ao lado */
  .diferenciais__intro { min-height: 520px; }
  .diferenciais__intro .botao { width: 100%; }
  .diferenciais__lista { grid-template-columns: 1fr; gap: 10px; }
  .diferencial,
  .diferencial:nth-child(odd),
  .diferencial:nth-child(even) {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    row-gap: 2px;
    padding: 16px 18px;
  }
  .diferencial svg { grid-row: 1 / span 2; width: 44px; height: 44px; padding: 10px; }
  .diferencial dt { font-size: 1rem; }
  .diferencial dd { font-size: 0.86rem; line-height: 1.5; }

  /* dúvidas e chamada final */
  .chamada .botao { width: 100%; }
}
@media (max-width: 599px) {
  .whatsapp-flutuante { transition: transform 0.25s var(--ease), opacity 0.25s; }
  .heroi-na-tela .whatsapp-flutuante { opacity: 0; transform: scale(0.8); pointer-events: none; }
  .catalogo { align-items: start; }
  .diferenciais__intro { min-height: 0; padding-top: 250px; }
  .diferenciais__foto { background-size: 125% auto; background-position: 50% 0; }
  .rodape__base { padding-bottom: 84px; }
}

/* =============== celular: hero limpo (foto em bloco + texto no azul) =============== */
@media (max-width: 599px) {
  .heroi.heroi { background: var(--marinho); }
  .heroi::before { display: none; }
  .heroi__foto {
    height: 62vw;
    background-position: 72% 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
    mask-image: linear-gradient(180deg, #000 78%, transparent);
  }
  .heroi .heroi__conteudo { padding-top: calc(62vw + 8px); padding-bottom: 40px; gap: 18px; }
  .heroi__legenda,
  .heroi__provas { display: none; }
  .heroi__titulo { max-width: none; font-size: clamp(1.9rem, 8.4vw, 2.3rem); line-height: 1.1; }
  .heroi__lead { font-size: 1rem; line-height: 1.6; }
  .heroi__acoes { display: grid; gap: 14px; justify-items: center; margin-top: 4px; }
  .heroi__acoes .botao { width: 100%; }
  .heroi__acoes .link-seta { font-size: 0.95rem; }
}

/* =============== vitrine das placas: todas centralizadas e dentro da caixa =============== */
.catalogo__vitrine {
  display: grid;
  place-items: center;
  height: 180px;
  padding: 18px;
  overflow: hidden;
}
.catalogo__foto,
.catalogo__foto--carro,
.catalogo__foto--comercial,
.catalogo__foto--colecao {
  display: block;
  width: min(210px, 82%);
  max-width: none;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.catalogo__foto--moto { width: auto; height: 118px; max-width: none; max-height: 100%; }
@media (max-width: 599px) {
  .catalogo__vitrine { height: 150px; padding: 14px; }
  .catalogo__foto,
  .catalogo__foto--carro,
  .catalogo__foto--comercial,
  .catalogo__foto--colecao { width: min(190px, 80%); }
  .catalogo__foto--moto { width: auto; height: 104px; }
}

/* =============== revisão geral =============== */
/* etiquetas das seções claras com o mesmo cinza das outras (o azul-claro não tinha contraste) */
.secao--escura .etiqueta { color: var(--texto-suave); }

/* botão das chamadas finais e do formulário de contato em azul, igual ao resto do site */
.chamada .botao--escuro,
.botao--whatsapp { background: var(--acao); color: var(--sobre-acao); border-color: var(--acao); }
.chamada .botao--escuro:hover,
.botao--whatsapp:hover { background: var(--acao-2); color: var(--sobre-acao); }

/* rodapé um tom mais escuro do azul, para não emendar com a chamada azul logo acima */
.rodape { background: var(--marinho-fundo); }

/* nomes das unidades no rodapé não quebram no meio ("Belo Horizonte/MG") */
.rodape__unidades a { white-space: nowrap; }

/* rodapé: títulos e frase em azul claro sobre o azul fechado */
.rodape {
  --acao-rodape: var(--acao-claro);
  background: var(--rodape-azul);
}
.rodape__titulo { color: var(--acao-claro); }

/* =============== filtro de unidades: estado por extenso e com destaque =============== */
.filtro,
.unidades .filtro {
  display: block;
  margin: 0 0 32px;
  padding: 20px;
  overflow: visible;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--acao);
  border-radius: 8px;
  box-shadow: 0 18px 40px -32px rgb(38 38 43 / 45%);
}
.secao--papel .filtro { background: var(--branco); }
.filtro__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--titulo);
}
.filtro__rotulo svg { width: 20px; height: 20px; color: var(--acao-texto); }
.filtro__opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.filtro .filtro__opcoes button,
.unidades .filtro .filtro__opcoes button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 12px 16px;
  text-align: left;
  background: var(--papel);
  color: var(--tinta);
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.filtro .filtro__opcoes button strong { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.filtro .filtro__opcoes button span { font-size: 0.82rem; font-weight: 500; opacity: 1; color: var(--texto-suave); }
.filtro .filtro__opcoes button:hover { border-color: var(--acao); }
.filtro .filtro__opcoes button[aria-pressed="true"] { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); }
.filtro .filtro__opcoes button[aria-pressed="true"] span { color: var(--sobre-acao); }

/* nome do estado no cartão, por extenso */
.card-unidade__uf { letter-spacing: 0.06em; }

@media (max-width: 599px) {
  .filtro, .unidades .filtro { margin-inline: 0; padding: 16px; }
  .filtro__opcoes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .filtro__opcoes button:first-child { grid-column: 1 / -1; }
  .filtro .filtro__opcoes button, .unidades .filtro .filtro__opcoes button { min-height: 58px; padding: 10px 12px; }
  .filtro .filtro__opcoes button strong { font-size: 0.95rem; }
  .unidades .dica-arrastar { margin-top: 0; }
}

/* =============== hero: estados em destaque, CTA explicativo e logo maior =============== */
.heroi__estados { display: grid; gap: 10px; }
.heroi__estados-rotulo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acao-claro);
}
.heroi__estados ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 520px;
}
.heroi__estados li {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.heroi__estados li svg { grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--acao); }
.heroi__estados li strong { font-size: 0.98rem; font-weight: 700; color: var(--branco); line-height: 1.2; }
.heroi__estados li span { font-size: 0.8rem; color: var(--sobre-marinho); }
.heroi__estados li span:empty { display: none; }
@media (min-width: 1200px) {
  .heroi__conteudo { max-width: 780px; gap: 20px; }
  .heroi__estados ul { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 780px; }
  .heroi__estados li { grid-template-columns: 18px 1fr; column-gap: 7px; padding: 10px 12px; }
  .heroi__estados li svg { width: 18px; height: 18px; }
  .heroi__estados li strong { font-size: 0.9rem; white-space: nowrap; }
}

/* logo do cabeçalho maior */
.cabecalho__logo img { height: 66px; }
@media (min-width: 992px) {
  .cabecalho__barra { min-height: 96px; }
  .cabecalho__logo img { height: 74px; }
}
@media (max-width: 599px) {
  .heroi__acoes .botao { justify-content: center; text-align: center; line-height: 1.3; }
}

/* =============== página Placas: carro e moto da mesma categoria no mesmo cartão =============== */
@media (min-width: 1100px) { .catalogo--grupos { grid-template-columns: repeat(3, 1fr); } }
.catalogo--grupos .catalogo__vitrine { height: 190px; }
.catalogo__vitrine--par { display: flex; align-items: center; justify-content: center; gap: 18px; }
.catalogo__vitrine--par .catalogo__foto--carro { width: 58%; max-width: 230px; }
.catalogo__vitrine--par .catalogo__foto--moto { width: auto; height: 112px; max-width: 32%; object-fit: contain; }
.ancora { position: relative; top: -120px; display: block; width: 0; height: 0; }
@media (max-width: 599px) {
  .catalogo--grupos .catalogo__vitrine { height: 150px; }
  .catalogo__vitrine--par { gap: 12px; }
  .catalogo__vitrine--par .catalogo__foto--moto { height: 92px; }
}
@media (min-width: 1100px) {
  .catalogo--grupos .catalogo__item:last-child:nth-child(3n+1) { grid-column: 1 / -1; flex-direction: row; }
  .catalogo--grupos .catalogo__item:last-child:nth-child(3n+1) .catalogo__vitrine { flex: 0 0 calc((100% - 32px) / 3); height: auto; min-height: 190px; }
  .catalogo--grupos .catalogo__item:last-child:nth-child(3n+1) .catalogo__info { justify-content: center; padding: 28px 36px; }
}
@media (min-width: 1200px) {
  .catalogo--grupos { grid-template-columns: repeat(4, 1fr); }
  .catalogo--grupos .catalogo__item:last-child:nth-child(3n+1) { grid-column: auto; flex-direction: column; }
  .catalogo--grupos .catalogo__item:last-child:nth-child(3n+1) .catalogo__vitrine { flex: none; height: 170px; min-height: 0; }
  .catalogo--grupos .catalogo__item:last-child:nth-child(3n+1) .catalogo__info { justify-content: flex-start; padding: 22px; }
  .catalogo--grupos .catalogo__vitrine { height: 170px; padding: 14px; }
  .catalogo__vitrine--par { gap: 12px; }
  .catalogo__vitrine--par .catalogo__foto--moto { height: 96px; }
}
@media (min-width: 1200px) { .catalogo--grupos .catalogo__vitrine:not(.catalogo__vitrine--par) .catalogo__foto--carro { width: 62%; } }
/* 9 cartões: volta para 3 colunas; cartão da placa reduzida com a foto ocupando a vitrine */
@media (min-width: 1200px) { .catalogo--grupos { grid-template-columns: repeat(3, 1fr); } .catalogo--grupos .catalogo__vitrine { height: 190px; } .catalogo__vitrine--par .catalogo__foto--moto { height: 108px; } }
.catalogo__vitrine--foto { padding: 0 !important; background: #111; }
.catalogo__vitrine--foto .catalogo__foto--reduzida { width: 100%; max-width: none; height: 100%; max-height: none; object-fit: cover; filter: none; }
.catalogo__vitrine--foto { background: #0b0c0f; }
.catalogo__vitrine--foto .catalogo__foto--reduzida { object-fit: contain; padding: 8px 12px; }
.catalogo--grupos .catalogo__foto--reduzida { width: 70%; max-width: 280px; max-height: 150px; object-fit: contain; }

/* hero: unidades com mais destaque */
.heroi__estados { gap: 12px; }
.heroi__estados-rotulo { font-size: 0.9rem; letter-spacing: 0.1em; color: var(--branco); display: flex; align-items: center; gap: 10px; }
.heroi__estados-rotulo::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--acao); }
.heroi__estados li {
  padding: 14px 16px;
  background: var(--branco);
  border: 0;
  border-left: 4px solid var(--acao);
  border-radius: 6px;
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / 55%);
  backdrop-filter: none;
}
.heroi__estados li strong { font-size: 1.02rem; color: var(--titulo); }
.heroi__estados li span { font-size: 0.86rem; font-weight: 700; color: var(--acao-texto); }
.heroi__estados li svg { color: var(--acao-texto); }
@media (min-width: 1200px) {
  .heroi__estados li { padding: 14px 14px; }
  .heroi__estados li strong { font-size: 0.95rem; }
}
.heroi .heroi__estados li strong { color: var(--tinta); }
.tipos-secao__acao { display: flex; justify-content: center; margin-top: 36px; }
@media (max-width: 599px) { .tipos-secao__acao .botao { width: 100%; justify-content: center; } }

/* passos: destaque para despachante, frotista e lojista */
.passos-secao__destaque {
  display: grid;
  gap: 8px;
  justify-items: start;
  max-width: 440px;
  padding: 20px 22px;
  background: var(--acao-suave);
  border-left: 4px solid var(--acao);
  border-radius: 6px;
}
.passos-secao__destaque-titulo { font-size: 1.1rem; font-weight: 700; color: var(--titulo); }
.passos-secao__destaque p:not(.passos-secao__destaque-titulo) { font-size: 0.95rem; line-height: 1.55; color: var(--tinta); }
.passos-secao__destaque .botao { margin-top: 6px; }
@media (max-width: 599px) { .passos-secao__destaque { max-width: none; } .passos-secao__destaque .botao { width: 100%; justify-content: center; } }
/* estados da hero viraram botões */
.heroi__estados li { padding: 0; }
.heroi__estados li a {
  display: grid; grid-template-columns: 22px 1fr 16px; column-gap: 8px; align-items: center;
  padding: 14px 14px; color: inherit; text-decoration: none; border-radius: 6px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.heroi__estados li a::after { content: "→"; grid-row: 1 / span 2; grid-column: 3; font-weight: 700; color: var(--acao-texto); transition: transform 0.2s var(--ease); }
.heroi__estados li a svg { grid-row: 1 / span 2; }
.heroi__estados li { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.heroi__estados li:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgb(0 0 0 / 60%); }
.heroi__estados li:hover a::after { transform: translateX(3px); }
.heroi__estados li a:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }
@media (min-width: 1200px) {
  .heroi__estados li a { grid-template-columns: 18px minmax(0, 1fr) 12px; column-gap: 6px; padding: 12px 10px 12px 12px; }
  .heroi__estados li strong { font-size: 0.88rem; }
}
.heroi__estados li, .heroi .heroi__estados li { display: block; }
.heroi__estados li a strong, .heroi__estados li a span { grid-column: 2; min-width: 0; }
@media (max-width: 599px) {
  .heroi__estados li a { grid-template-columns: 18px minmax(0, 1fr) 12px; column-gap: 7px; padding: 12px 10px; }
  .heroi__estados li strong { font-size: 0.92rem; }
}
#tipos { scroll-margin-top: 90px; }
/* CTA do cabeçalho no azul da marca */
.cabecalho .cabecalho__cta,
.cabecalho .menu__lista .cabecalho__cta { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); }
.cabecalho .cabecalho__cta:hover,
.cabecalho .menu__lista .cabecalho__cta:hover { background: var(--acao-2); border-color: var(--acao-2); color: var(--sobre-acao); }

/* faixa própria para despachantes, frotistas e lojistas (saiu de dentro dos passos) */
.faixa-parceiros { background: var(--marinho); color: var(--branco); padding-block: 36px; }
.faixa-parceiros__grade { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.faixa-parceiros__texto { display: grid; gap: 6px; min-width: 0; padding-left: 18px; border-left: 4px solid var(--acao); }
.faixa-parceiros__rotulo { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acao-claro); }
.faixa-parceiros .faixa-parceiros__titulo { font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--branco); }
.faixa-parceiros__texto p:last-child { color: var(--sobre-marinho); font-size: 1rem; }
@media (max-width: 599px) { .faixa-parceiros .botao { width: 100%; justify-content: center; } }

/* celular: áreas de toque confortáveis (mín. 44px) */
@media (max-width: 599px) {
  .rodape a { min-height: 44px; display: inline-flex; align-items: center; }
  .card-unidade a:not(.botao) { min-height: 44px; display: inline-flex; align-items: center; }
  .texto-corrido a, .cab-pagina a { padding-block: 10px; }
}
@media (max-width: 599px) {
  .rodape .rodape__social a { display: grid; place-items: center; }
  .catalogo, .catalogo--grupos { align-items: stretch; }
}
/* breadcrumb: sem o respiro extra que desalinhava */
.cab-pagina .migalhas a { padding-block: 0; }
@media (max-width: 599px) { .migalhas a { min-height: 44px; display: inline-flex; align-items: center; } .migalhas { align-items: center; } }
/* dica de arrastar também nos carrosséis de placas */
@media (max-width: 639px) {
  .dica-arrastar--catalogo { display: flex; align-items: center; gap: 8px; margin: -8px 0 12px; font-size: 0.78rem; font-weight: 600; color: var(--texto-suave); }
  .dica-arrastar--catalogo svg { width: 16px; height: 16px; }
}
@media (max-width: 599px) { .card-unidade a:not(.botao) { min-height: 36px; } }
/* diferenciais sem ícone (Quem somos): texto empilhado, sem sobreposição */
@media (max-width: 599px) {
  .diferencial:not(:has(svg)),
  .diferencial:nth-child(odd):not(:has(svg)),
  .diferencial:nth-child(even):not(:has(svg)) { display: block; }
  .diferencial:not(:has(svg)) dd { margin-top: 4px; }
}

/* =============== site leve: foto do hero menor no celular, sem animações pesadas =============== */
@media (max-width: 899px) { .heroi__foto { background-image: url(../img/hero-placa-celular.webp); } }
.heroi__foto { animation: none !important; }
.heroi__conteudo > * { animation: none !important; }
.faixa-rolante__trilho { animation: none !important; }
.botao--primario:hover::before { animation: none !important; }
.diferenciais__intro:hover .diferenciais__foto { transform: none; }
.heroi__estados li { backdrop-filter: none; }
/* passo 3: placa centralizada e no mesmo peso visual dos ícones */
.passo__visual--placa { display: grid; place-items: center; }
.passo__visual--placa img { display: block; width: 46%; max-width: 170px; margin: 0; }
@media (max-width: 599px) {
  .passo__visual--placa img { width: 66px; max-width: 72%; margin-top: 12px; }
}

/* =============== página Placas no celular: lista vertical compacta (sem carrossel) =============== */
@media (max-width: 639px) {
  .catalogo.catalogo--grupos {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    gap: 12px;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
    scroll-snap-type: none;
  }
  .catalogo--grupos + .dica-arrastar, .tipos-secao .dica-arrastar--catalogo:has(+ .catalogo--grupos) { display: none; }
  .catalogo--grupos .catalogo__item { display: grid; grid-template-columns: 128px 1fr; align-items: stretch; }
  .catalogo--grupos .catalogo__vitrine,
  .catalogo--grupos .catalogo__vitrine--par { height: auto; min-height: 118px; padding: 10px; flex-direction: column; gap: 6px; }
  .catalogo--grupos .catalogo__vitrine .catalogo__foto--carro { width: 100%; max-width: 112px; }
  .catalogo--grupos .catalogo__vitrine--par .catalogo__foto--moto { height: 46px; max-width: 60px; }
  .catalogo--grupos .catalogo__foto--reduzida { width: 100%; max-width: 112px; max-height: 90px; }
  .catalogo--grupos .catalogo__info { padding: 14px 14px 12px; gap: 4px; }
  .catalogo--grupos .catalogo__info .legenda { font-size: 0.66rem; }
  .catalogo--grupos .catalogo__info h3 { font-size: 1rem; }
  .catalogo--grupos .catalogo__info p:not(.legenda) { font-size: 0.84rem; line-height: 1.45; }
  .catalogo--grupos .catalogo__acao { margin-top: 4px; font-size: 0.88rem; min-height: 36px; }
}
.catalogo--grupos .catalogo__item { position: relative; }
.catalogo--grupos .ancora { position: absolute; top: -110px; left: 0; }

/* ---------- "Como chegar" (Google Maps) ao lado do WhatsApp ---------- */
.card-unidade__acoes { flex-wrap: wrap; }
.card-unidade__acoes .botao--marinho,
.card-unidade__acoes .botao--chegar { flex: 1 1 140px; justify-content: center; }
.card-unidade__acoes .botao--chegar {
  background: #fff;
  color: var(--tinta);
  border: 1.5px solid var(--linha);
  font-weight: 700;
}
.card-unidade__acoes .botao--chegar:hover,
.card-unidade__acoes .botao--chegar:focus-visible { border-color: #335CA5; color: #335CA5; }
.card-unidade__acoes .botao--chegar .icone-pino { width: 20px; height: 20px; flex: none; }

/* ---------- avaliações do Google ---------- */
.avaliacoes__lista:empty { display: none; }
.avaliacoes__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
@media (min-width: 700px)  { .avaliacoes__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .avaliacoes__lista { grid-template-columns: repeat(3, 1fr); } }
.avaliacao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--linha);
  border-top: 3px solid var(--acao);
  border-radius: 6px;
}
.avaliacao__topo { display: flex; align-items: center; gap: 12px; }
.avaliacao__inicial {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #335CA5;
  color: #fff;
  font-weight: 700;
}
.avaliacao__autor { margin: 0; font-weight: 700; color: var(--tinta); }
.avaliacao__autor a { color: inherit; text-decoration: none; }
.avaliacao__autor a:hover { text-decoration: underline; }
.avaliacao__meta { margin: 2px 0 0; font-size: 0.85rem; color: #535253; }
.avaliacao__estrelas { margin: 0; color: var(--acao); font-size: 1.1rem; letter-spacing: 2px; }
.avaliacao__texto { margin: 0; color: var(--tinta); line-height: 1.55; }
.avaliacao__fonte { margin: auto 0 0; font-size: 0.78rem; color: #535253; }

.avaliacoes__aviso {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--acao-suave);
  color: var(--acao-texto);
  font-size: 0.85rem;
  font-weight: 600;
}
@media (max-width: 699px) { .avaliacoes__lista .avaliacao:nth-child(n+4) { display: none; } }
.avaliacoes[hidden] { display: none; }
.avaliacoes__estrelas-topo { display: block; margin-bottom: 6px; color: var(--acao); font-size: 1.5rem; letter-spacing: 4px; }
.avaliacao__estrelas { font-size: 1.25rem; }