/* =========================================================
   Placas Express — componentes
   Peças reaproveitadas em várias páginas.
   No WordPress: template-parts/.
   ========================================================= */

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 24px;
  font-family: var(--fonte);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--raio-botao);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.botao svg { width: 20px; height: 20px; flex: none; }
.botao .seta { transition: transform 0.2s var(--ease); }
.botao:hover .seta { transform: translateX(4px); }

.botao--primario {
  background: var(--acao);
  color: var(--sobre-acao);
}
.botao--primario:hover { background: var(--acao-viva); }

.botao--escuro {
  background: var(--botao-forte-fundo);
  color: var(--botao-forte-texto);
}
.botao--escuro:hover {
  background: var(--botao-forte-hover);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--botao-forte-sombra);
}

.botao--azul {
  background: var(--azul);
  color: var(--branco);
}
.botao--azul:hover { background: var(--azul-escuro); }

.botao--contorno {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}
.botao--contorno:hover { background: var(--inverso-fundo); border-color: var(--inverso-fundo); color: var(--inverso-texto); }

.botao--whatsapp {
  background: var(--whatsapp);
  color: var(--whatsapp-texto);
}
.botao--whatsapp:hover { background: var(--whatsapp-vivo); }

.botao--suave {
  background: transparent;
  color: var(--texto);
  border-color: var(--linha);
}
.botao--suave:hover { border-color: var(--tinta); }

.botao--pequeno {
  min-height: 46px;
  padding: 10px 16px;
  font-size: 0.93rem;
}

.botao--bloco { width: 100%; }

/* link de texto com seta (ação secundária, não é botão) */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  transition: gap 0.2s var(--ease), color 0.2s;
}
.link-seta:hover { gap: 16px; }
.link-seta svg { width: 18px; height: 18px; }

/* ---------- placa Mercosul (desenhada em CSS) ---------- */

.placa {
  --cor-fundo: var(--branco);
  --cor-texto: var(--placa-preto);
  --cor-borda: var(--aluminio-2);   /* borda fina e clara, sem moldura preta */
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 130;
  display: flex;
  flex-direction: column;
  /* alumínio escovado bem sutil */
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--preto) 1.6%, transparent) 0 1px, transparent 1px 3px),
    linear-gradient(172deg, color-mix(in srgb, var(--branco) 0%, transparent) 30%, color-mix(in srgb, var(--preto) 5%, transparent) 55%, color-mix(in srgb, var(--branco) 0%, transparent) 75%),
    var(--cor-fundo);
  border: max(1px, 0.35cqi) solid var(--cor-borda);
  border-radius: var(--raio-placa);
  overflow: hidden;
  container-type: inline-size;
}

.placa__faixa {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4%;
  height: 22%;
  padding-inline: 4%;
  background: var(--azul-mercosul);
  color: var(--branco);
  font-family: var(--fonte-placa);
  font-size: 7.5cqi;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
}

.placa__faixa small {
  font-size: 0.42em;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.placa__bandeira {
  justify-self: end;
  width: 1.45em;
  height: 1em;
  background: var(--bandeira-verde);
  position: relative;
}
.placa__bandeira::before {
  content: "";
  position: absolute;
  inset: 12% 9%;
  background: var(--bandeira-amarelo);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.placa__bandeira::after {
  content: "";
  position: absolute;
  width: 0.4em;
  height: 0.4em;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--bandeira-azul);
}

.placa__codigo {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  font-family: var(--fonte-placa);
  font-weight: 600;
  font-size: 21cqi;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--cor-texto);
}

/* rebites (usar com moderação: só nas placas em destaque) */
.placa--rebites .placa__codigo::before,
.placa--rebites .placa__codigo::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3.2cqi;
  height: 3.2cqi;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--branco), var(--aluminio-2) 55%, var(--rebite-sombra));
  box-shadow: inset 0 0 0 0.4cqi color-mix(in srgb, var(--preto) 18%, transparent);
}
.placa--rebites .placa__codigo::before { left: 3.2%; }
.placa--rebites .placa__codigo::after { right: 3.2%; }

/* moto: proporção mais quadrada e código em duas linhas */
.placa--moto { aspect-ratio: 200 / 170; }
.placa--moto .placa__faixa {
  grid-template-columns: 1fr;
  justify-items: center;
  height: 18%;
  font-size: 11cqi;
}
.placa--moto .placa__codigo {
  font-size: 36cqi;
  line-height: 0.92;
  text-align: center;
}

.placa--comercial { --cor-texto: var(--placa-vermelho); }
.placa--colecao {
  --cor-fundo: var(--placa-preto);
  --cor-texto: var(--placa-cinza);
  --cor-borda: var(--placa-preto);
}
.placa--colecao {
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--branco) 2.5%, transparent) 0 1px, transparent 1px 3px),
    var(--cor-fundo);
}

/* botão marinho: ação principal dentro dos cartões (o laranja fica para o hero e a chamada) */
.botao--marinho { background: var(--marinho); color: var(--branco); }
.botao--marinho:hover { background: var(--marinho-fundo); }
.botao--marinho svg { color: var(--acao-claro); }

/* ---------- filtro de unidades (pílulas por estado) ---------- */

.filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.filtro button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  font-family: var(--fonte);
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--branco);
  color: var(--tinta);
  border: 1px solid var(--linha);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.filtro button:hover { border-color: var(--tinta); }
.filtro button[aria-pressed="true"] {
  background: var(--marinho);
  border-color: var(--marinho);
  color: var(--branco);
}
.filtro button span { font-size: 0.78rem; opacity: 0.65; }

/* ---------- cartão de unidade (montado pelo main.js) ---------- */
/* 1 coluna no celular, 2 no tablet, 3 no desktop; botões sempre no pé */

.lista-unidades {
  display: grid;
  gap: 14px;
}
@media (min-width: 700px) {
  .lista-unidades { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 1100px) {
  .lista-unidades { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

.card-unidade {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.card-unidade:hover,
.card-unidade:focus-within {
  border-color: var(--aluminio-2);
  box-shadow: 0 18px 36px -24px rgb(20 38 76 / 45%);
  transform: translateY(-2px);
}
.card-unidade[hidden] { display: none; }

.card-unidade__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--texto-suave);
}
.card-unidade__topo svg { width: 18px; height: 18px; }
.card-unidade__uf {
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--azul);
  background: var(--azul-claro);
  border-radius: 4px;
}

.card-unidade__cidade {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
}

.card-unidade__endereco {
  margin-top: -6px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

.card-unidade__contatos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.84rem;
  color: var(--texto-suave);
}
.card-unidade__contatos a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  text-decoration: none;
  color: var(--texto-suave);
  overflow-wrap: anywhere;
}
.card-unidade__contatos a:hover { color: var(--azul); }
.card-unidade__contatos svg { width: 14px; height: 14px; flex: none; }

.card-unidade__acoes {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.card-unidade__acoes .botao {
  min-height: 46px;
  padding: 10px 14px;
  gap: 8px;
  font-size: 0.9rem;
  white-space: nowrap;
}
.card-unidade__acoes .botao--marinho { flex: 1; }
.card-unidade__acoes .botao svg { width: 18px; height: 18px; }
/* "Rota" vira só o ícone; o nome acessível vem do aria-label do main.js */
.card-unidade__acoes .botao--suave {
  width: 46px;
  padding: 0;
  font-size: 0;
  border: 1px solid var(--linha);
}
.card-unidade__acoes .botao--suave:hover { border-color: var(--tinta); }

/* ---------- perguntas frequentes ---------- */

.faq {
  counter-reset: pergunta;
  border-top: 2px solid var(--tinta);
}

.faq details {
  counter-increment: pergunta;
  border-bottom: 1px solid var(--linha);
}

.faq summary {
  display: grid;
  grid-template-columns: 2.4rem 1fr 24px;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 18px 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--azul); }

.faq summary::before {
  content: counter(pergunta, decimal-leading-zero);
  font-family: var(--fonte-titulo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

/* sinal de + feito com duas linhas finas */
.faq summary::after {
  content: "";
  width: 20px;
  height: 20px;
  justify-self: end;
  background:
    linear-gradient(currentColor, currentColor) center / 20px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 20px no-repeat;
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq__resposta {
  padding: 0 0 28px calc(2.4rem + 12px);
  max-width: 68ch;
  color: var(--texto-suave);
}
.faq__resposta ul {
  margin-top: 12px;
  padding-left: 18px;
  list-style: square;
}
.faq__resposta li + li { margin-top: 6px; }
.faq__resposta strong { color: var(--texto); }

/* ---------- WhatsApp flutuante + seletor de unidade ---------- */

.whatsapp-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 60px;
  height: 60px;
  padding: 0;
  background: var(--whatsapp);
  color: var(--whatsapp-texto);
  font-weight: 600;
  font-size: 0.95rem;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--preto) 40%, transparent);
  transition: transform 0.2s var(--ease);
}
.whatsapp-flutuante:hover { transform: translateY(-2px); }
.whatsapp-flutuante svg { width: 30px; height: 30px; }
.whatsapp-flutuante span { display: none; }

/* só o botão redondo, sem texto, em todas as telas */
@media (min-width: 720px) {
  .whatsapp-flutuante { right: 24px; bottom: 24px; width: 62px; height: 62px; }
}

.seletor {
  width: min(480px, calc(100% - 24px));
  max-height: min(680px, calc(100% - 24px));
  padding: 0;
  border: 2px solid var(--tinta);
  border-radius: var(--raio-placa);
  box-shadow: var(--sombra-dialogo);
  color: var(--texto);
  background: var(--branco);
}
.seletor::backdrop { background: var(--veu); }

.seletor[open] { animation: seletor-entra 0.25s var(--ease); }
@keyframes seletor-entra {
  from { opacity: 0; transform: translateY(12px); }
}

.seletor__topo {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 20px 20px;
  background: var(--fundo-forte);
  color: var(--sobre-forte);
  border-bottom: 1px solid var(--linha-forte);
}
.seletor__topo h2 { font-size: 2rem; }
.seletor__topo p { margin-top: 6px; font-size: 0.92rem; color: var(--sobre-forte-2); }

.seletor__fechar {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-botao);
  background: transparent;
  color: var(--sobre-forte);
  font-size: 1.5rem;
  line-height: 1;
}
.seletor__fechar:hover { background: var(--fundo-forte-hover); }

.seletor__lista { padding: 8px 20px 20px; }

.seletor__grupo + .seletor__grupo { margin-top: 12px; }

.seletor__uf {
  padding: 14px 0 8px;
  font-family: var(--fonte-titulo);
  font-size: var(--t-legenda);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
  border-bottom: 2px solid var(--tinta);
}

.seletor__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  transition: background 0.15s, padding 0.2s var(--ease);
}
.seletor__lista a:hover { background: var(--papel); padding-inline: 10px; }
.seletor__lista a small {
  display: block;
  font-family: var(--fonte);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: none;
  color: var(--texto-suave);
}
.seletor__lista a svg { width: 24px; height: 24px; color: var(--whatsapp-escuro); flex: none; }

/* =========================================================
   Efeitos — só CSS + um JS de poucas linhas (main.js).
   Tudo usa transform/opacity (não pesa no carregamento),
   nada roda antes do conteúdo aparecer e tudo desliga com
   prefers-reduced-motion.
   ========================================================= */

/* ---------- cabeçalho ganha sombra ao rolar ---------- */
.cabecalho { transition: box-shadow 0.3s var(--ease); }
.cabecalho--rolou { box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--preto) 45%, transparent); }

/* ---------- faixa rolante com a assinatura ---------- */
.faixa-rolante {
  overflow: hidden;
  background: var(--azul);
  color: var(--branco);
  border-block: 1px solid color-mix(in srgb, var(--preto) 12%, transparent);
}
.faixa-rolante__trilho {
  display: flex;
  width: max-content;
}
.faixa-rolante__grupo {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.faixa-rolante__grupo span::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 28px;
  vertical-align: middle;
  background: var(--acao);
  border-radius: 2px;
}

/* ---------- WhatsApp: anel de atenção (3 vezes, depois para) ---------- */
.whatsapp-flutuante::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--whatsapp);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* entrada ao rolar: só quando o JS está ativo (sem JS, tudo aparece normal) */
  .js [data-revelar] {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
    transition-delay: var(--atraso, 0s);
  }
  .js [data-revelar].visivel { opacity: 1; translate: 0 0; }

  /* números dos passos: contorno que se preenche ao aparecer */
  .js .passo[data-revelar]::before { transition: color 0.8s var(--ease) 0.25s; }
  .js .passo[data-revelar].visivel::before { color: color-mix(in srgb, var(--tinta) 10%, transparent); }
  .js .passo[data-revelar].visivel:first-child::before { color: var(--acao); }

  .faixa-rolante__trilho { animation: rolar 38s linear infinite; }
  .faixa-rolante:hover .faixa-rolante__trilho { animation-play-state: paused; }

  .whatsapp-flutuante::after { animation: anel 2.2s var(--ease) 4s 3; }

  .botao--primario { position: relative; overflow: hidden; }
  .botao--primario::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--branco) 45%, transparent) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  .botao--primario:hover::before { animation: brilho 0.8s var(--ease) both; }
}

@keyframes brilho   { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes rolar    { to { transform: translateX(-50%); } }
@keyframes anel {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.35); }
}