/* =========================================================================
   Teixeira Multimarcas - folha de estilo unica
   Escrita a mao, sem framework e sem compilacao.
   Basta enviar por FTP e funciona.
   ========================================================================= */

:root {
  --verde: #009B3A;
  --verde-escuro: #06402B;
  --verde-hover: #007e2f;
  --azul: #4884EA;
  --azul-hover: #2f6fd4;
  --zap: #25D366;
  --zap-hover: #1EBE5A;

  --g50:  #f9fafb;
  --g100: #f3f4f6;
  --g200: #e5e7eb;
  --g300: #d1d5db;
  --g400: #9ca3af;
  --g500: #6b7280;
  --g600: #4b5563;
  --g700: #374151;
  --g800: #1f2937;
  --g900: #111827;

  --fundo-admin: #F4F7F9;

  --sombra-sm: 0 1px 2px rgba(0,0,0,.05);
  --sombra:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --sombra-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --sombra-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);

  --raio:    .5rem;
  --raio-lg: .75rem;
  --raio-xl: 1rem;

  --largura: 80rem;
}

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

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--g900);
  background-color: var(--g50);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- utilidades minimas ---------- */
.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }
.escondido { display: none !important; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================================================================
   FUNDOS DECORATIVOS
   ========================================================================= */

/* As duas paginas publicas empilham topo / conteudo / rodape,
   para o rodape ficar sempre no fim da tela mesmo com pouco conteudo. */
.fundo-pontos,
.fundo-ondas {
  display: flex;
  flex-direction: column;
}

/* Malha de pontos que piscam.
   Nao esta em uso no momento - o site inteiro usa o fundo de ondas.
   Para voltar a usar em alguma pagina, troque 'fundo-ondas' por
   'fundo-pontos' no 'classeBody' do arquivo correspondente. */
.fundo-pontos {
  background-color: #f9fafb;
  background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='1' fill='%239ca3af'%3E%3Canimate attributeName='opacity' values='0.2;1;0.2' dur='3s' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='21' cy='7' r='1' fill='%239ca3af'%3E%3Canimate attributeName='opacity' values='1;0.2;1' dur='5s' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='7' cy='21' r='1' fill='%239ca3af'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='4s' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='21' cy='21' r='1' fill='%239ca3af'%3E%3Canimate attributeName='opacity' values='0.8;0.1;0.8' dur='6s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/svg%3E");
  min-height: 100vh;
}

/* -------------------------------------------------------------------------
   ONDAS SUAVES - o fundo padrao do sistema inteiro
   Usado na vitrine, na pagina do veiculo e no painel administrativo.
   Para trocar o desenho, basta mudar aqui: vale para tudo de uma vez.
   ------------------------------------------------------------------------- */
/* Os filhos diretos do body precisam poder encolher.
   Sem isto, um conteudo largo (a tabela de comparacao, por exemplo)
   empurra a pagina inteira e o celular reduz o zoom de tudo.
   E o comportamento padrao do flex: min-width comeca em "auto". */
.fundo-ondas > *,
.fundo-pontos > * { min-width: 0; max-width: 100%; }

/* A caixa que rola nunca pode ser mais larga que a tela:
   e ela que segura a tabela larga, em vez de empurrar a pagina. */
.comparar__rolagem { max-width: 100%; }

/* Fundo de ondas.
   Duas camadas empilhadas, nesta ordem (a primeira fica POR CIMA):
   1. um degrade que vai de transparente ate a cor do fundo, ancorado
      EMBAIXO - ele apaga as ondas conforme a pagina chega ao rodape;
   2. as ondas em si.
   O degrade existe porque textura em area vazia nao da leveza, da o
   contrario: enche de padrao um espaco que deveria descansar.
   O tom transparente e escrito como rgba(249,250,251,0) - o mesmo --g50 -
   e nao como 'transparent', que em alguns navegadores desbota para preto. */
.fundo-ondas,
.admin {
  background-color: var(--g50);
  background-image:
    linear-gradient(to top,
      rgb(249,250,251) 0,
      rgb(249,250,251) 200px,
      rgba(249,250,251,0) 560px),
    url("data:image/svg+xml,%3Csvg width='120' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2306402B' stroke-width='2.5' stroke-opacity='0.07'%3E%3Cpath d='M0,20 Q30,0 60,20 T120,20'/%3E%3Cpath d='M0,40 Q30,20 60,40 T120,40'/%3E%3Cpath d='M0,60 Q30,40 60,60 T120,60'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 120px 60px;
  background-repeat: no-repeat, repeat;
}

.fundo-ondas { min-height: 100vh; }

/* Espaco para a barra fixa do WhatsApp do celular nao cobrir o conteudo.
   IMPORTANTE: esse espaco vai no RODAPE, nunca no body. No body, ele
   apareceria DEPOIS do rodape - como uma faixa clara sobrando no fim
   da pagina, ja que o rodape e o ultimo elemento. */
.pagina-veiculo .rodape { padding-bottom: 6.5rem; }

/* No computador a barra do WhatsApp nao existe: nada de espaco extra. */
@media (min-width: 1024px) {
  .pagina-veiculo .rodape { padding-bottom: 2.5rem; }
}

/* =========================================================================
   CABECALHO PUBLICO
   ========================================================================= */

.topo {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--g200);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--sombra-sm);
}

.topo__interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.marca {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--g900);
  white-space: nowrap;
}
.marca span { color: var(--verde); }

@media (min-width: 420px) { .marca { font-size: 1.3rem; } }
@media (min-width: 640px) { .marca { font-size: 1.5rem; } }

.menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  font-size: .8125rem;
  color: var(--g600);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .menu { gap: 1.5rem; font-size: .875rem; }
}
.menu a { transition: color .2s; }
.menu a:hover { color: var(--verde); }

/* =========================================================================
   VITRINE
   ========================================================================= */

.vitrine { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 3rem 1rem; position: relative; z-index: 10; }

.vitrine__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.vitrine__titulo { font-size: 1.5rem; font-weight: 700; color: var(--g900); }
.vitrine__sub    { color: var(--g500); margin-top: .25rem; }
.vitrine__contador { color: var(--verde); font-weight: 700; }

@media (min-width: 768px) {
  .vitrine__titulo { font-size: 1.875rem; }
}

.grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px)  { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .grade { grid-template-columns: repeat(4, 1fr); } }

/* ---------- card de veiculo ---------- */
.card {
  background: #fff;
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--g100);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s, transform .3s;
}
.card:hover { box-shadow: var(--sombra-xl); }

.card__foto {
  position: relative;
  width: 100%;
  height: 12rem;
  background: var(--g200);
  overflow: hidden;
}
.card__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.card:hover .card__foto img { transform: scale(1.1); }

.card__semfoto {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--g400); font-size: .8rem; font-weight: 600;
}

.card__ano {
  position: absolute;
  top: .5rem; right: .5rem;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .5rem;
  border-radius: .25rem;
}

.card__corpo {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card__marca {
  font-size: .75rem;
  color: var(--g900);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}

/* Verde e a cor de base do titulo; ao passar o mouse ele escurece para preto.
   O inverso do padrao comum, mas foi decisao visual: o verde marca a vitrine
   e o preto confirma qual card esta sob o cursor. */
.card__modelo {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--verde);
  line-height: 1.25;
  margin-bottom: .5rem;
  transition: color .2s;
}
.card__modelo span { color: var(--g500); font-weight: 400; }
.card:hover .card__modelo { color: var(--g900); }

.card__specs {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .875rem;
  color: var(--g500);
  font-weight: 500;
  margin-bottom: 1rem;
}
.card__specs span { display: inline-flex; align-items: center; gap: .25rem; }
.card__specs svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.card__preco {
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--g100);
}
.preco-valor   { font-size: 1.5rem; font-weight: 900; color: var(--verde); }
.preco-consulte {
  font-size: 1.25rem; font-weight: 900; color: var(--g900);
  border-bottom: 2px solid var(--g900); padding-bottom: 2px;
}
/* No card da vitrine, sem sublinhado: o card inteiro ja e um link,
   e o traco fazia "Consulte-nos" parecer um segundo link dentro dele. */
.card__preco .preco-consulte { border-bottom: 0; padding-bottom: 0; }

.aviso-vazio {
  text-align: center;
  padding: 5rem 1rem;
  background: #fff;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--g100);
  color: var(--g500);
  font-size: 1.125rem;
}

/* ---------- rodape ---------- */
/* =========================================================================
   FAIXA "VENHA CONHECER A LOJA" (fica logo acima do rodape)
   Fecha a pagina quando ha poucos veiculos e leva endereco e horario em
   texto de verdade, que e o que o Google usa para busca local.
   ========================================================================= */

.faixa-loja {
  width: 100%;              /* sem isso o bloco encolhe ate o texto (ver aviso la em cima) */
  background: #fff;
  border-top: 1px solid var(--g100);
  padding: 2.5rem 1rem;
}

/* Duas fileiras: o titulo em cima ocupando a largura toda, e embaixo
   os dados a esquerda com os botoes a direita. Tentar encaixar as tres
   coisas numa fileira so faz os botoes quebrarem para baixo do titulo,
   deixando um buraco no meio. */
.faixa-loja__interno {
  max-width: var(--largura);
  margin: 0 auto;
}

.faixa-loja__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.faixa-loja__titulo {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--g900);
  margin-bottom: .25rem;
}
.faixa-loja__sub { color: var(--g500); font-size: .9375rem; }

.faixa-loja__dados {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}

.faixa-loja__item {
  display: flex;
  gap: .625rem;
  font-size: .875rem;
  color: var(--g700);
  line-height: 1.6;
}
.faixa-loja__item strong {
  display: block;
  color: var(--g900);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .2rem;
}
.faixa-loja__item address { font-style: normal; }
.faixa-loja__ref { color: var(--g500); font-size: .8125rem; }

.faixa-loja__icone {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--verde);
  flex-shrink: 0;
  margin-top: .15rem;
}

/* WhatsApp em cima (acao principal) e os dois apps de rota embaixo,
   lado a lado. Os tres numa fileira so nao cabem junto com o endereco
   e o horario - a coluna resolve sem apertar nada. */
.faixa-loja__acoes {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex-shrink: 0;
  min-width: 15rem;
}

.faixa-loja__rotulo {
  display: block;
  color: var(--g900);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .35rem;
}

.faixa-loja__rotas-btns {
  display: flex;
  gap: .5rem;
}

/* Os dois botoes de rota dividem a largura em partes iguais.
   min-width: 0 e obrigatorio: sem ele um item flex se recusa a
   encolher abaixo do proprio texto e um dos botoes fica maior. */
.faixa-loja__btn--rota {
  flex: 1 1 0;
  min-width: 0;
  padding: .6rem .75rem;
  font-size: .875rem;
}

/* Logotipo oficial de aplicativo (Waze, Google Maps).
   Vai como <img>, entao NAO herda a cor do texto como os icones em SVG
   herdam - e nem deve: logotipo de marca se usa na cor original. */
.logo-marca {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  flex-shrink: 0;
}

.faixa-loja__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: var(--raio);
  border: 1px solid var(--g200);
  background: #fff;
  color: var(--g900);
  font-weight: 700;
  font-size: .9375rem;
  white-space: nowrap;
  transition: all .2s;
}
.faixa-loja__btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.faixa-loja__btn:hover { border-color: var(--g900); }

.faixa-loja__btn--zap {
  background: var(--zap);
  border-color: var(--zap);
  color: #fff;
}
.faixa-loja__btn--zap:hover { background: #1eb855; border-color: #1eb855; }

@media (max-width: 767px) {
  .faixa-loja__linha { flex-direction: column; gap: 1.5rem; }
  .faixa-loja__dados { flex-direction: column; gap: 1.25rem; }
  .faixa-loja__acoes { width: 100%; }
  .faixa-loja__btn   { width: 100%; }
  /* Os dois de rota continuam lado a lado no celular: e onde eles mais
     servem, e cada um ainda fica com area de toque folgada. */
  .faixa-loja__btn--rota { width: auto; }
}

.rodape {
  background: var(--g900);
  color: var(--g400);
  /* Faixa baixa: aqui ficam so a assinatura, o WhatsApp e os direitos.
     O endereco saiu daqui e vive na faixa clara logo acima. */
  padding: 1.75rem 1rem;
  /* auto = empurra o rodape para o fim da tela quando a pagina tem
     pouco conteudo. Nao trocar por um valor fixo: voltaria a sobrar
     uma faixa de fundo embaixo do rodape. */
  margin-top: auto;
}
.rodape__interno {
  max-width: var(--largura);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  justify-content: space-between;
  align-items: flex-start;
  font-size: .875rem;
}
.rodape strong { color: #fff; }
.rodape a:hover { color: var(--verde); }

.rodape__loja strong {
  display: block;
  font-size: 1rem;
}

.rodape__contato a { font-weight: 600; }
.rodape__direitos  { color: var(--g500); }

/* Com uma linha so em cada bloco, alinhar pelo centro deixa os tres
   na mesma altura. Com o endereco de tres linhas isso nao dava certo -
   por isso era flex-start antes. */
@media (min-width: 768px) {
  .rodape__interno { align-items: center; }
}

/* No celular tudo alinhado a esquerda, um bloco embaixo do outro */
@media (max-width: 767px) {
  .rodape__interno { flex-direction: column; gap: 1rem; }
}

/* =========================================================================
   PAGINA DO VEICULO
   ========================================================================= */

.trilha {
  /* width: 100% e obrigatorio. Sem ele, este bloco encolhe ate o tamanho
     do texto e o "margin: 0 auto" centraliza a caixa inteira no meio da
     tela, em vez de alinhar o texto a esquerda como o resto do site. */
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 1rem;
  font-size: .875rem;
  color: var(--g500);
  position: relative;
  z-index: 10;
}
.trilha a:hover { color: var(--verde); }
.trilha strong { color: var(--g900); font-weight: 600; }

.veiculo { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 1rem; position: relative; z-index: 10; }

.veiculo__titulo-bloco {
  margin-bottom: 1.5rem;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(4px);
  padding: 1rem;
  border-radius: var(--raio-lg);
  border: 1px solid var(--g100);
  display: inline-block;
}
.veiculo__titulo {
  font-size: 1.875rem;
  font-weight: 900;
  color: var(--g900);
  letter-spacing: -.025em;
  line-height: 1.1;
}
.veiculo__titulo span { color: var(--verde); }
.veiculo__subtitulo {
  font-size: 1.125rem;
  color: var(--g500);
  margin-top: .25rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
@media (min-width: 768px) {
  .veiculo__titulo { font-size: 3rem; }
}

/* ---------- mosaico de fotos ---------- */
.mosaico {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: 2rem;
}
@media (min-width: 1024px) { .mosaico { grid-template-columns: repeat(3, 1fr); } }

.mosaico__principal {
  position: relative;
  cursor: pointer;
  border-radius: var(--raio-xl);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  background: var(--g100);
  /* A LARGURA manda: a caixa ocupa todo o espaco disponivel ao lado das
     miniaturas, e a altura sai da proporcao 4/3 - a mesma das fotos.
     Assim a imagem preenche a caixa inteira, sem sobra dos lados.

     NAO coloque "max-height" aqui: junto com aspect-ratio, limitar a
     altura faz o navegador ENCOLHER A LARGURA para manter a proporcao,
     e reaparece o vazio entre a foto grande e as miniaturas. */
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) { .mosaico__principal { grid-column: span 2; } }

.mosaico__principal img {
  width: 100%;
  height: 100%;
  /* "contain" mantem o veiculo inteiro, sem cortar as pontas. Como a caixa
     tem a mesma proporcao das fotos, na pratica a imagem preenche tudo.
     Uma foto em outra proporcao aparece centralizada e inteira. */
  object-fit: contain;
  transition: transform .5s;
}
.mosaico__principal:hover img { transform: scale(1.02); }

/* Navegador antigo, sem aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
  .mosaico__principal { height: 340px; }
  @media (min-width: 768px) { .mosaico__principal { height: 500px; } }
}

.mosaico__lado {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: .75rem;
  /* Acompanha a altura da foto grande, sem teto proprio */
  height: 100%;
}
@media (min-width: 1024px) { .mosaico__lado { display: grid; } }

.mosaico__mini {
  position: relative;
  height: 100%;
  background: var(--g100);
  border-radius: var(--raio-xl);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sombra-sm);
}
.mosaico__mini img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.mosaico__mini:hover img { transform: scale(1.1); }

.mosaico__mais {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.25rem;
  transition: background .2s;
}
.mosaico__mais:hover { background: rgba(0,0,0,.8); }

/* ---------- colunas de conteudo ---------- */
.veiculo__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .veiculo__grade { grid-template-columns: 2fr 1fr; align-items: start; }
}

.bloco {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  border-radius: var(--raio-xl);
  border: 1px solid var(--g100);
  box-shadow: var(--sombra-sm);
  margin-bottom: 2.5rem;
}
.bloco__titulo {
  font-size: 1.5rem;
  font-weight: 700;
  border-bottom: 2px solid var(--g100);
  padding-bottom: .75rem;
  margin-bottom: 1.5rem;
}

.ficha {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) { .ficha { grid-template-columns: repeat(4, 1fr); } }

.ficha__item {
  background: var(--g50);
  padding: 1rem;
  border-radius: var(--raio);
}
.ficha__rotulo {
  display: block;
  font-size: .75rem;
  color: var(--g500);
  text-transform: uppercase;
  font-weight: 700;
}
.ficha__valor {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--g900);
  margin-top: .25rem;
}

.descricao {
  color: var(--g700);
  line-height: 1.7;
  white-space: pre-wrap;
  font-size: 1.125rem;
}

.opcionais {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem .5rem;
}
@media (min-width: 768px) { .opcionais { grid-template-columns: repeat(3, 1fr); } }

.opcionais li {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--g700);
  font-size: .95rem;
  font-weight: 500;
}
.opcionais svg { width: 1.25rem; height: 1.25rem; color: var(--verde); flex-shrink: 0; }

/* ---------- caixa de preco / contato ---------- */
.caixa-preco {
  position: sticky;
  top: 6rem;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-xl);
  border: 1px solid var(--g100);
}
.caixa-preco__rotulo {
  font-size: .875rem;
  color: var(--g500);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.caixa-preco__valor {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--verde);
  margin-bottom: 2rem;
  line-height: 1.1;
}
.caixa-preco__valor .preco-consulte {
  font-size: 2rem;
  border-bottom-width: 4px;
}

.botao-zap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--zap);
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 1rem;
  border-radius: var(--raio-lg);
  border: 0;
  box-shadow: var(--sombra);
  transition: background .2s, box-shadow .2s;
}
.botao-zap:hover { background: var(--zap-hover); box-shadow: var(--sombra-lg); }
.botao-zap svg { width: 1.5rem; height: 1.5rem; }

.caixa-preco__nota {
  text-align: center;
  font-size: .75rem;
  color: var(--g400);
  font-weight: 500;
  margin-top: 1rem;
}

/* Preco no topo, so no celular */
.preco-mobile {
  display: block;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  border-radius: var(--raio-lg);
  border: 1px solid var(--g200);
  box-shadow: var(--sombra-sm);
  margin-bottom: 2.5rem;
}
.preco-mobile__valor { font-size: 1.875rem; font-weight: 900; color: var(--verde); }
@media (min-width: 1024px) { .preco-mobile { display: none; } }

.coluna-lateral { display: none; }
@media (min-width: 1024px) { .coluna-lateral { display: block; } }

/* Barra fixa de WhatsApp no rodape do celular */
.barra-zap {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  padding: 1rem;
  background: #fff;
  border-top: 1px solid var(--g200);
  box-shadow: 0 -4px 6px -1px rgba(0,0,0,.1);
  z-index: 40;
}
@media (min-width: 1024px) { .barra-zap { display: none; } }

/* =========================================================================
   GALERIA EM TELA CHEIA
   ========================================================================= */

.galeria {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.95);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galeria__palco {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No celular a tela ja e estreita: a foto usa quase toda a largura e
     as setas ficam POR CIMA dela, como nos aplicativos de fotos. */
  padding: 0 .75rem;
}

/* Da tela de tablet para cima sobra espaco, entao as setas saem de cima
   da foto e ficam ao lado. */
@media (min-width: 768px) {
  .galeria__palco { padding: 0 5rem; height: 90vh; }
}
@media (min-width: 1280px) {
  .galeria__palco { padding: 0 6rem; }
}

.galeria__palco img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .375rem;
  /* o limite de ampliacao de cada foto e calculado no app.js,
     a partir da resolucao real do arquivo */
}

.galeria__contador {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .1em;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  padding: .375rem 1rem;
  border-radius: 9999px;
  white-space: nowrap;
  pointer-events: none;
}

.galeria__botao {
  position: absolute;
  color: #fff;
  background: rgba(0,0,0,.5);
  border: 0;
  border-radius: 9999px;
  padding: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background .2s;
  z-index: 110;
}
.galeria__botao:hover { background: rgba(0,0,0,.85); }
.galeria__botao svg { width: 2rem; height: 2rem; }

.galeria__fechar { top: 1rem; right: 1rem; background: transparent; }
.galeria__fechar:hover { background: rgba(255,255,255,.2); }
.galeria__fechar span { display: none; font-weight: 700; }
.galeria__anterior { left: .5rem; }
.galeria__proxima  { right: .5rem; }

@media (min-width: 768px) {
  .galeria__fechar { top: 2rem; right: 2rem; }
  .galeria__fechar span { display: block; }
  .galeria__anterior { left: 2rem; }
  .galeria__proxima  { right: 2rem; }
}

/* =========================================================================
   PAINEL ADMINISTRATIVO
   ========================================================================= */

/* o fundo de ondas vem da regra la de cima, junto com .fundo-ondas */
.admin { min-height: 100vh; padding: 1rem; }
@media (min-width: 768px) { .admin { padding: 2rem; } }

.admin__interno { max-width: var(--largura); margin: 0 auto; }
.admin__interno--estreito { max-width: 56rem; margin: 0 auto; }

.admin__topo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .admin__topo { flex-direction: row; align-items: center; }
}
.admin__titulo { font-size: 1.875rem; font-weight: 700; color: var(--g800); }
.admin__sub    { color: var(--g500); font-size: .875rem; }
.admin__acoes  { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---------- botoes ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem 1.25rem;
  border-radius: var(--raio);
  border: 1px solid transparent;
  font-weight: 500;
  transition: background .2s, color .2s, border-color .2s;
  background: transparent;
  color: var(--g600);
}
.btn:hover { background: #fff; border-color: var(--g200); }

.btn--azul { background: var(--azul); color: #fff; box-shadow: var(--sombra-sm); }
.btn--azul:hover { background: var(--azul-hover); border-color: transparent; color: #fff; }

.btn--escuro { background: var(--g800); color: #fff; font-weight: 700; }
.btn--escuro:hover { background: var(--g900); color: #fff; border-color: transparent; }

.btn--branco { background: #fff; border-color: var(--g200); box-shadow: var(--sombra-sm); }

.btn--sair:hover { color: #dc2626; }

.btn--grande {
  width: 100%;
  padding: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 1rem;
  box-shadow: var(--sombra);
}
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- cartoes de metrica ---------- */
.metricas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .metricas { grid-template-columns: repeat(2, 1fr); } }

.metrica {
  background: #fff;
  padding: 1.25rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--g100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.metrica__rotulo {
  color: var(--g500);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.metrica__valor { font-size: 1.875rem; font-weight: 700; color: var(--g800); margin-top: .25rem; }
.metrica__valor--verde { color: var(--verde); }
.metrica__icone {
  width: 3rem; height: 3rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.metrica__icone svg { width: 1.5rem; height: 1.5rem; }
.metrica__icone--azul  { background: #eff6ff; color: #3b82f6; }
.metrica__icone--verde { background: #f0fdf4; color: #16a34a; }

/* ---------- lista de anuncios ---------- */
.lista { display: flex; flex-direction: column; gap: 1rem; }

.item {
  background: #fff;
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--g100);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1.5rem;
  transition: border-color .2s;
}
.item:hover { border-color: var(--g200); }
@media (min-width: 768px) { .item { flex-direction: row; } }

.item__foto {
  width: 100%;
  height: 10rem;
  background: var(--g100);
  border-radius: .25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--g400);
}
@media (min-width: 768px) { .item__foto { width: 14rem; } }
.item__foto img { width: 100%; height: 100%; object-fit: cover; }
.item__foto div { display: flex; flex-direction: column; align-items: center; font-size: .75rem; font-weight: 600; gap: .5rem; }

.item__meio { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.item__marca {
  font-size: .75rem; color: var(--g500); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.item__modelo { font-size: 1.25rem; font-weight: 700; color: var(--g900); line-height: 1.25; }
.item__modelo span { color: var(--g600); font-size: 1.125rem; font-weight: 400; }

.item__specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem 1rem;
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--g600);
  font-weight: 500;
}
@media (min-width: 1024px) { .item__specs { grid-template-columns: repeat(3, 1fr); } }
.item__specs div { display: flex; align-items: center; gap: .5rem; }
.item__specs svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

.item__rodape { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.item__preco { font-size: 1.25rem; font-weight: 900; color: var(--g900); line-height: 1.25; }
.selo {
  font-size: .75rem; font-weight: 700;
  background: #f0fdf4; color: #16a34a;
  padding: .25rem .5rem; border-radius: .25rem;
  white-space: nowrap;
}

.item__botoes {
  display: flex;
  flex-direction: row;
  gap: .5rem;
  justify-content: center;
  border-top: 1px solid var(--g100);
  padding-top: 1rem;
}
@media (min-width: 768px) {
  .item__botoes {
    flex-direction: column;
    justify-content: flex-start;
    border-top: 0;
    border-left: 1px solid var(--g100);
    padding-top: 0;
    padding-left: 1rem;
  }
}

.icone-btn {
  width: 2.5rem; height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid var(--g200);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--g500);
  transition: all .2s;
}
.icone-btn svg { width: 1rem; height: 1rem; }
.icone-btn--ver:hover      { color: #3b82f6; border-color: #3b82f6; background: #eff6ff; }
.icone-btn--editar:hover   { color: #ca8a04; border-color: #ca8a04; background: #fefce8; }
.icone-btn--excluir        { color: #f87171; border-color: #fecaca; }
.icone-btn--excluir:hover  { color: #dc2626; background: #fef2f2; }

/* =========================================================================
   DIAGNOSTICO (admin/diagnostico.php)
   ========================================================================= */

.diag-resumo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .diag-resumo { grid-template-columns: repeat(4, 1fr); } }

.diag-resumo__item {
  background: #fff;
  border: 1px solid var(--g200);
  border-left-width: 5px;
  border-radius: var(--raio);
  padding: 1rem 1.25rem;
  box-shadow: var(--sombra-sm);
}
.diag-resumo__numero { display: block; font-size: 1.875rem; font-weight: 800; line-height: 1; }
.diag-resumo__rotulo {
  display: block; margin-top: .35rem;
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--g500);
}

.diag-grupo { margin-bottom: 1.75rem; }
.diag-grupo__titulo {
  font-size: .8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--g500);
  margin-bottom: .625rem;
  padding-left: .25rem;
}

.diag-lista {
  background: #fff;
  border: 1px solid var(--g200);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}

.diag-item {
  display: flex;
  gap: .875rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--g100);
  border-left: 5px solid transparent;
}
.diag-item:last-child { border-bottom: 0; }

.diag-item__marca {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .8125rem;
  margin-top: .1rem;
}

.diag-item__nome     { font-weight: 600; color: var(--g800); }
.diag-item__detalhe  { font-size: .875rem; color: var(--g500); margin-top: .15rem; }
.diag-item__resolver {
  font-size: .875rem;
  margin-top: .4rem;
  padding: .5rem .75rem;
  background: var(--g50);
  border-radius: .375rem;
  color: var(--g700);
  line-height: 1.5;
}

/* cores por situacao */
.diag--ok      { border-left-color: #16a34a; }
.diag--ok      .diag-item__marca,
.diag-resumo__item.diag--ok      .diag-resumo__numero { color: #16a34a; }
.diag--ok      .diag-item__marca { background: #f0fdf4; }

.diag--atencao { border-left-color: #d97706; }
.diag--atencao .diag-item__marca,
.diag-resumo__item.diag--atencao .diag-resumo__numero { color: #b45309; }
.diag--atencao .diag-item__marca { background: #fffbeb; }
.diag--atencao.diag-item { background: #fffdf7; }

.diag--erro    { border-left-color: #dc2626; }
.diag--erro    .diag-item__marca,
.diag-resumo__item.diag--erro    .diag-resumo__numero { color: #dc2626; }
.diag--erro    .diag-item__marca { background: #fef2f2; }
.diag--erro.diag-item { background: #fffafa; }

.diag--info    { border-left-color: var(--g300); }
.diag--info    .diag-item__marca,
.diag-resumo__item.diag--info    .diag-resumo__numero { color: var(--g500); }
.diag--info    .diag-item__marca { background: var(--g100); }

/* =========================================================================
   FORMULARIOS
   ========================================================================= */

.form {
  background: #fff;
  padding: 1.5rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--g100);
}
@media (min-width: 768px) { .form { padding: 2rem; } }

.form__secao { margin-bottom: 2rem; }
.form__secao:last-of-type { margin-bottom: 0; }

.form__linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .form__linha--2 { grid-template-columns: repeat(2, 1fr); }
  .form__linha--3 { grid-template-columns: repeat(3, 1fr); }
  .form__linha--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 480px) and (max-width: 767px) {
  .form__linha--4 { grid-template-columns: repeat(2, 1fr); }
}

.campo { display: flex; flex-direction: column; }
.campo__rotulo {
  font-size: .875rem;
  font-weight: 700;
  color: var(--g700);
  margin-bottom: .25rem;
}
.campo__dica { font-size: .75rem; color: var(--g400); font-weight: 500; margin-top: .25rem; }

.campo input[type="text"],
.campo input[type="number"],
.campo input[type="password"],
.campo select,
.campo textarea {
  width: 100%;
  padding: .5rem 1rem;
  border: 1px solid var(--g300);
  border-radius: var(--raio);
  background: var(--g50);
  font: inherit;
  color: var(--g900);
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.campo textarea { padding: .75rem 1rem; resize: vertical; min-height: 7rem; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 0;
  background: #fff;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(72,132,234,.25);
}

/* ---------- opcionais em pilulas ---------- */
.opcionais-caixa {
  background: var(--g50);
  padding: 1rem;
  border-radius: var(--raio);
  border: 1px solid var(--g200);
}
.opcionais-caixa h2 { font-size: 1.125rem; font-weight: 700; color: var(--g800); margin-bottom: 1rem; }

.pilulas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }

.pilula {
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid var(--g300);
  background: #fff;
  color: var(--g600);
  transition: all .15s;
  user-select: none;
}
.pilula:hover { background: var(--g100); }
.pilula.ativa {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.pilula.personalizada { border-style: dashed; }

.opcional-novo { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.opcional-novo .campo { flex: 1; min-width: 12rem; max-width: 24rem; }
.opcional-novo .campo input { background: #fff; }

/* ---------- fotos no formulario ---------- */
.fotos-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) { .fotos-grade { grid-template-columns: repeat(4, 1fr); } }

.foto-item {
  position: relative;
  border-radius: var(--raio);
  overflow: hidden;
  border: 4px solid var(--g200);
  transition: all .2s;
  background: var(--g100);
}
.foto-item.capa {
  border-color: var(--verde);
  box-shadow: var(--sombra-lg);
}
.foto-item img { width: 100%; height: 8rem; object-fit: cover; }
.foto-item.marcada-para-remover { opacity: .35; filter: grayscale(1); }

.foto-item__selo {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: var(--verde);
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;
  padding: .25rem;
}
.foto-item__capa-btn {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .5rem;
  border: 0;
  transition: background .2s;
}
.foto-item__capa-btn:hover { background: var(--verde); }

.foto-item__remover {
  position: absolute;
  top: .5rem; right: .5rem;
  background: #fff;
  color: #ef4444;
  border: 0;
  border-radius: 9999px;
  width: 1.75rem; height: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra);
  transition: all .2s;
}
.foto-item__remover:hover { background: #ef4444; color: #fff; }
.foto-item__remover svg { width: .875rem; height: .875rem; }

.area-upload {
  position: relative;
  border: 2px dashed var(--g300);
  border-radius: var(--raio-lg);
  background: var(--g50);
  padding: 2rem;
  text-align: center;
  transition: background .2s, border-color .2s;
}
.area-upload:hover { background: var(--g100); border-color: var(--azul); }
.area-upload input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.area-upload svg { width: 2.5rem; height: 2.5rem; color: var(--g400); margin: 0 auto .75rem; }
.area-upload__titulo { display: block; color: var(--g700); font-weight: 600; font-size: 1.125rem; margin-bottom: .25rem; }
.area-upload__sub    { display: block; color: var(--g500); font-size: .875rem; }
.area-upload__conta {
  margin-top: 1rem;
  display: inline-block;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  padding: .5rem 1rem;
  border-radius: 9999px;
  box-shadow: var(--sombra-sm);
}

.secao-fotos { border-top: 1px solid var(--g100); padding-top: 1.5rem; }
.secao-fotos h2 { font-size: 1.25rem; font-weight: 700; color: var(--g800); margin-bottom: 1rem; }
.secao-fotos p.instrucao { font-size: .875rem; color: var(--g500); margin-bottom: .75rem; font-weight: 600; }

/* =========================================================================
   LOGIN
   ========================================================================= */

.login-tela {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-size: cover;
  background-position: center;
  background-color: var(--verde-escuro);
}

.login-caixa {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(4px);
  padding: 2rem;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-xl);
  width: 100%;
  max-width: 28rem;
  border: 1px solid var(--g100);
}
.login-caixa h1 { font-size: 1.875rem; font-weight: 900; color: var(--verde-escuro); text-align: center; }
.login-caixa p.sub { color: var(--g500); text-align: center; margin-top: .5rem; margin-bottom: 2rem; }
.login-caixa .campo { margin-bottom: 1.5rem; }
.login-caixa .campo input:focus { border-color: var(--verde-escuro); box-shadow: 0 0 0 3px rgba(6,64,43,.25); }

.btn--verde-escuro {
  width: 100%;
  background: var(--verde-escuro);
  color: #fff;
  font-weight: 700;
  padding: .75rem 1rem;
}
.btn--verde-escuro:hover { background: #042e1f; color: #fff; border-color: transparent; }

/* =========================================================================
   AVISOS
   ========================================================================= */

.aviso {
  padding: .75rem 1rem;
  border-radius: var(--raio);
  margin-bottom: 1.5rem;
  font-size: .875rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.aviso--erro    { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.aviso--sucesso { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.aviso--atencao { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.aviso ul { margin-top: .5rem; padding-left: 1.25rem; list-style: disc; }
.aviso--centro { text-align: center; }

/* =========================================================================
   ACOES DO VEICULO (compartilhar / ficha / comparar)
   ========================================================================= */

.acoes-veiculo {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 2.5rem;
}

.btn-acao {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--g200);
  border-radius: 9999px;
  color: var(--g700);
  font-size: .875rem;
  font-weight: 600;
  transition: all .2s;
  box-shadow: var(--sombra-sm);
}
.btn-acao svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

.btn-acao:hover {
  border-color: var(--verde);
  color: var(--verde);
  background: #fff;
}

.btn-acao.ativo {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}
.btn-acao.ativo:hover { background: var(--verde-hover); color: #fff; }

.btn-acao--ok {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}

/* Botao "Comparar" sobre a foto, na vitrine */
.card-caixa { position: relative; height: 100%; }

.card-comparar {
  position: absolute;
  top: .5rem; left: .5rem;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .55rem;
  border: 0;
  border-radius: .375rem;
  /* Mesma linguagem do selo do ano (canto oposto): fundo escuro
     translucido e texto branco. Antes era uma pilula branca, que
     sumia sobre carro claro e brigava com o selo por ser outro estilo. */
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  box-shadow: var(--sombra-sm);
  transition: all .2s;
}
.card-comparar svg { width: .85rem; height: .85rem; }
.card-comparar:hover { background: rgba(0,0,0,.8); color: #fff; }

.card-comparar.ativo {
  background: var(--verde);
  color: #fff;
}
.card-comparar.ativo:hover { background: var(--verde-hover); color: #fff; }

/* =========================================================================
   BARRA DE COMPARACAO (rodape flutuante)
   ========================================================================= */

.barra-comparar {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  z-index: 45;
  background: rgba(17,24,39,.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 -6px 20px rgba(0,0,0,.25);
  padding: .75rem 1rem;
  animation: sobe-barra .25s ease-out;
}

@keyframes sobe-barra {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.barra-comparar__interno {
  max-width: var(--largura);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.barra-comparar__lista {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.12);
  color: #fff;
  border-radius: 9999px;
  padding: .3rem .5rem .3rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip button {
  background: rgba(255,255,255,.2);
  border: 0;
  color: #fff;
  width: 1.15rem; height: 1.15rem;
  border-radius: 9999px;
  line-height: 1;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.chip button:hover { background: #ef4444; }

.barra-comparar__dica {
  color: var(--g400);
  font-size: .8125rem;
  font-weight: 500;
}

.barra-comparar__acoes {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

.barra-comparar__limpar {
  background: transparent;
  border: 0;
  color: var(--g400);
  font-size: .8125rem;
  font-weight: 600;
  padding: .5rem;
  transition: color .2s;
}
.barra-comparar__limpar:hover { color: #fff; }

.barra-comparar__ir.desligado {
  opacity: .4;
  pointer-events: none;
  cursor: not-allowed;
}

/* Espaco para a barra de comparacao nao cobrir o rodape.
   Vai no rodape (e nao no body) para a faixa escura seguir ate o fim
   da tela, sem deixar um vazio claro embaixo. */
.com-barra-comparar .rodape { padding-bottom: 6rem; }

@media (max-width: 640px) {
  .barra-comparar__interno { gap: .625rem; }
  .barra-comparar__acoes   { width: 100%; justify-content: space-between; }
  .barra-comparar__ir      { flex: 1; justify-content: center; }
  .com-barra-comparar .rodape { padding-bottom: 9rem; }
}

/* Na pagina do veiculo ja existe a barra do WhatsApp no celular:
   a de comparacao sobe para nao ficar uma em cima da outra. */
@media (max-width: 1023px) {
  .pagina-veiculo .barra-comparar { bottom: 5rem; }
}

/* =========================================================================
   PAGINA DE COMPARACAO
   ========================================================================= */

.comparar {
  /* width: 100% e obrigatorio aqui. Sem ele, a tabela larga faz o <main>
     crescer alem da tela e o celular reduz o zoom da pagina inteira. */
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 1rem 3rem;
  position: relative;
  z-index: 10;
}

.comparar__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.comparar__acoes-topo { display: flex; gap: .625rem; flex-wrap: wrap; }

/* No celular a tabela rola de lado */
.comparar__rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--g200);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra);
}

.tabela-comparar {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .9375rem;
}

.tabela-comparar th,
.tabela-comparar td {
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--g100);
  vertical-align: middle;
}

/* Coluna dos rotulos: fica grudada na esquerda ao rolar */
.tc-rotulo {
  width: 11rem;
  min-width: 9rem;
  font-weight: 600;
  color: var(--g600);
  font-size: .875rem;
  background: var(--g50);
  position: sticky;
  left: 0;
  z-index: 2;
}

.tc-carro {
  width: auto;
  min-width: 12rem;
  text-align: center !important;
  vertical-align: top;
  padding: 1rem;
  background: #fff;
  border-bottom: 2px solid var(--g200);
}

.tc-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Retangulo fixo, com cantos arredondados como o resto do site.
     A proporcao 4/3 e a mesma da maioria das fotos, entao quase nao
     sobra moldura em volta. */
  aspect-ratio: 4 / 3;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--g100);
  margin-bottom: .75rem;
  padding: .25rem;
}
.tc-foto img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* "contain" e o que garante o veiculo INTEIRO, sem cortar as pontas */
  object-fit: contain;
  border-radius: var(--raio);
  transition: transform .4s;
}
.tc-foto:hover img { transform: scale(1.04); }

/* Navegador antigo, sem aspect-ratio: cai numa altura fixa */
@supports not (aspect-ratio: 4 / 3) {
  .tc-foto { height: 9rem; }
}

.tc-nome {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--g900);
  line-height: 1.25;
  transition: color .2s;
}
.tc-nome:hover { color: var(--verde); }

.tc-marca {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--g400);
  margin-bottom: .1rem;
}
.tc-versao { color: var(--g500); font-weight: 400; }

.tc-preco { margin-top: .625rem; }
.tc-preco .preco-valor    { font-size: 1.25rem; }
.tc-preco .preco-consulte { font-size: 1rem; }

/* Faixa que separa as seções */
.tc-secao td {
  background: var(--verde-escuro);
  color: #fff;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .5rem 1rem;
}
.tc-secao__dica {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  font-size: .75rem;
  margin-left: .5rem;
}

.tabela-comparar tbody td { text-align: center; font-weight: 600; }
.tc-vazio { color: var(--g400); font-weight: 400; }

.tc-sim { color: var(--verde); }
.tc-nao { color: var(--g300); }
.tc-icone { width: 1.15rem; height: 1.15rem; display: inline-block; vertical-align: middle; }

/* Bloco "O que diferencia": fundo bem suave, so para separar do resto.
   O peso visual fica na faixa do titulo, nao em cada linha. */
.tc-exclusivo { background: #fffdf5; }
.tc-exclusivo .tc-rotulo {
  background: #fefce8;
  color: #854d0e;
  font-weight: 700;
}

.tc-secao--destaque td {
  background: #a16207;
}

.tc-contato td {
  padding: 1.25rem 1rem;
  background: var(--g50);
  border-bottom: 0;
}
.botao-zap--pequeno {
  font-size: .9375rem;
  padding: .625rem .875rem;
  border-radius: var(--raio);
}
.botao-zap--pequeno svg { width: 1.15rem; height: 1.15rem; }

.tc-ver {
  display: block;
  margin-top: .625rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--g500);
  text-decoration: underline;
}
.tc-ver:hover { color: var(--verde); }

.comparar__nota {
  margin-top: 1rem;
  font-size: .8125rem;
  color: var(--g500);
  text-align: center;
}

/* =========================================================================
   FICHA DO VEICULO (ficha.php) - feita para virar uma folha impressa ou PDF
   ========================================================================= */

.ficha-tela {
  background: var(--g200);
  padding: 1rem;
  min-height: 100vh;
}

/* Barra com os botoes: existe na tela, some no papel */
.ficha-barra {
  max-width: 210mm;
  margin: 0 auto 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* A "folha": largura de uma A4 */
.folha {
  max-width: 210mm;
  margin: 0 auto;
  background: #fff;
  padding: 14mm 12mm;
  box-shadow: var(--sombra-lg);
  color: var(--g900);
  font-size: 10.5pt;
  line-height: 1.45;
}

.folha__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 3px solid var(--verde);
  margin-bottom: 1.25rem;
}
.folha__marca { font-size: 16pt; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.folha__marca span { color: var(--verde); }
.folha__local { font-size: 9pt; color: var(--g500); margin-top: .15rem; }
.folha__contato { text-align: right; font-size: 9.5pt; }
.folha__zap  { font-weight: 700; color: var(--verde-escuro); }
.folha__site { color: var(--g500); margin-top: .15rem; }

.folha__titulo {
  font-size: 21pt;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.folha__titulo span { color: var(--verde); }
.folha__sub {
  font-size: 10pt;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  margin-top: .2rem;
}

/* ---------- fotos ---------- */
.folha__fotos { margin: 1rem 0; }

.folha__capa {
  width: 100%;
  height: 78mm;
  background: var(--g100);
  border-radius: .375rem;
  overflow: hidden;
}
.folha__capa img { width: 100%; height: 100%; object-fit: cover; }

.folha__miniaturas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5mm;
  margin-top: 2.5mm;
}
.folha__miniaturas img {
  width: 100%;
  height: 24mm;
  object-fit: cover;
  border-radius: .25rem;
  background: var(--g100);
}

/* ---------- preco ---------- */
.folha__preco {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-left: 5px solid var(--verde);
  border-radius: .375rem;
  padding: .6rem .9rem;
  margin: 1rem 0;
}
.folha__preco-rotulo {
  font-size: 9pt;
  font-weight: 700;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.folha__preco-valor { font-size: 19pt; font-weight: 900; color: var(--verde); }
/* "Consulte-nos" nao e preco: nao vai de verde, para nao parecer um valor */
.folha__preco-valor--consulte {
  color: var(--g900);
  font-size: 16pt;
  border-bottom: 3px solid var(--g900);
}

/* ---------- blocos ---------- */
.folha__bloco { margin-bottom: 1rem; }
.folha__bloco h2 {
  font-size: 11pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--g700);
  border-bottom: 1px solid var(--g200);
  padding-bottom: .25rem;
  margin-bottom: .5rem;
}

.folha__tabela { width: 100%; border-collapse: collapse; }
.folha__tabela th,
.folha__tabela td {
  text-align: left;
  padding: .3rem .5rem;
  border-bottom: 1px solid var(--g100);
  vertical-align: top;
}
.folha__tabela th {
  width: 16%;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--g500);
  font-weight: 700;
}
.folha__tabela td { width: 34%; font-weight: 600; }

.folha__opcionais {
  columns: 3;
  column-gap: 1rem;
  font-size: 9.5pt;
}
.folha__opcionais li {
  break-inside: avoid;
  padding-left: .85rem;
  position: relative;
  margin-bottom: .12rem;
}
.folha__opcionais li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: .3rem; height: .3rem;
  background: var(--verde);
  border-radius: 50%;
}

.folha__descricao { white-space: pre-wrap; font-size: 9.5pt; }

/* ---------- rodape da folha ---------- */
.folha__rodape {
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 2px solid var(--verde);
  font-size: 9.5pt;
}
.folha__rodape-linha { margin-bottom: .3rem; }
.folha__rodape-link  { color: var(--g600); }
.folha__aviso {
  margin-top: .6rem;
  font-size: 8pt;
  color: var(--g400);
  line-height: 1.35;
}

/* =========================================================================
   IMPRESSAO
   ========================================================================= */
@page {
  size: A4;
  margin: 10mm;
}

@media print {
  /* Tudo que e navegacao ou botao sai do papel */
  .topo, .barra-zap, .caixa-preco, .galeria, .rodape,
  .ficha-barra, .barra-comparar, .acoes-veiculo { display: none !important; }

  body { background: #fff !important; }

  .ficha-tela { background: #fff; padding: 0; min-height: 0; }

  .folha {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  /* Nao deixa um bloco ser cortado no meio entre duas paginas */
  .folha__bloco,
  .folha__fotos,
  .folha__preco,
  .folha__rodape { break-inside: avoid; page-break-inside: avoid; }

  /* No papel as fotos ficam um pouco menores: assim a ficha da maioria
     dos veiculos cabe em UMA folha, em vez de jogar so o rodape
     para uma segunda pagina quase vazia. */
  /* 58mm e nao 62mm: a assinatura da agencia acrescentou uma linha no
     rodape e a folha passou para DUAS paginas - a segunda so com o
     rodape. Foi o mesmo defeito de antes, de volta pelo mesmo motivo.
     Quem acrescenta algo no fim da folha paga o espaco no comeco dela.
     TESTE OBRIGATORIO ao mexer aqui: gerar o PDF dos veiculos e conferir
     que todos cabem em UMA folha.

     MEDIDO, nao estimado: o navegador quebra a folha quando ela passa de
     ~1035px de altura (A4 com margem de 10mm). Vale medir de novo em vez
     de confiar na conta de milimetros - o resultado nao bate.

     Onde ganhar espaco, em ordem: capa, miniaturas e a lista de opcionais.
     A lista e a melhor das tres porque encolhe junto com o veiculo que tem
     muitos itens, que e justamente o caso que estoura. Nunca cortar
     conteudo para caber. */
  .folha__capa { height: 54mm; }
  .folha__miniaturas img { height: 17mm; }

  /* A lista de opcionais e a parte que mais varia de um veiculo para
     outro - apertar aqui rende mais no caso dificil do que na foto. */
  /* A lista usa columns (multi-coluna), entao quem controla o espaco
     vertical e a margem do item, nao gap. */
  .folha__opcionais    { font-size: 8.5pt; column-gap: .8rem; }
  .folha__opcionais li { margin-bottom: .02rem; line-height: 1.3; }

  /* A assinatura no papel: sem borda, sem respiro - so a linha de texto. */
  .folha__assinatura {
    margin-top: .2rem;
    padding-top: .2rem;
    border: 0;
    font-size: 7pt;
  }

  .folha__titulo { font-size: 19pt; }
  .folha__preco  { margin: .6rem 0; padding: .45rem .9rem; }
  .folha__bloco  { margin-bottom: .7rem; }
  .folha__rodape { margin-top: .8rem; }

  /* Garante que os fundos coloridos saiam na impressao */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a { text-decoration: none; color: inherit; }
}

/* =========================================================================
   PAINEL DE ESTATISTICAS (admin/estatisticas.php)
   Graficos feitos com CSS puro - nenhuma biblioteca. O site nao tem
   dependencia externa nenhuma e nao vai passar a ter por causa de uma
   barra colorida.
   ========================================================================= */

.est-periodo {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.est-periodo__item {
  padding: .5rem .9rem;
  border: 1px solid var(--g200);
  border-radius: var(--raio);
  background: #fff;
  font-size: .875rem;
  font-weight: 600;
  color: var(--g600);
  transition: all .2s;
}
.est-periodo__item:hover { border-color: var(--g400); color: var(--g900); }
.est-periodo__item--ativo {
  background: var(--g900);
  border-color: var(--g900);
  color: #fff;
}

.est-var { font-size: .75rem; margin-top: .2rem; font-weight: 600; }
.est-var--sobe  { color: var(--verde); }
.est-var--desce { color: #dc2626; }
.est-var--igual { color: var(--g400); font-weight: 400; }

.est-bloco {
  width: 100%;            /* sem isso o bloco encolhe ate o texto */
  background: #fff;
  border: 1px solid var(--g100);
  border-radius: var(--raio);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.est-titulo { font-size: 1.125rem; font-weight: 800; color: var(--g900); }
.est-ajuda {
  color: var(--g500);
  font-size: .8125rem;
  line-height: 1.5;
  margin: .35rem 0 1.25rem;
}
.est-ajuda--fim { margin: 1rem 0 0; }
.est-vazio { color: var(--g400); font-size: .875rem; }

/* Duas colunas no computador, empilhado no celular. */
.est-colunas { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .est-colunas { grid-template-columns: 1fr 1fr; align-items: start; }
  .est-colunas .est-bloco { margin-top: 0; }
  .est-colunas { margin-top: 1.5rem; }
}

/* ---------- barra horizontal ---------- */
.eb { margin-bottom: .9rem; }
.eb__topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .3rem;
}
.eb__rotulo { font-size: .875rem; color: var(--g700); }
.eb__valor  { font-size: .875rem; font-weight: 800; color: var(--g900); }
.eb__trilho {
  height: .5rem;
  background: var(--g100);
  border-radius: 99px;
  overflow: hidden;
}
.eb__preenche {
  height: 100%;
  background: var(--verde);
  border-radius: 99px;
}

/* ---------- tabela por veiculo ---------- */
/* A caixa que rola nunca pode ser mais larga que a tela: e ela que segura
   a tabela, em vez de a tabela empurrar a pagina (ADR-0009). */
.est-rolagem { max-width: 100%; overflow-x: auto; }

.est-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  min-width: 32rem;
}
.est-tabela th {
  text-align: left;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--g500);
  padding: 0 .75rem .6rem;
  border-bottom: 1px solid var(--g200);
  white-space: nowrap;
}
.est-tabela td {
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--g100);
  color: var(--g700);
}
.est-tabela tbody tr:hover { background: var(--g50); }
.est-tabela a { color: var(--g900); font-weight: 600; }
.est-tabela a:hover { color: var(--verde); }
.est-num { text-align: right; white-space: nowrap; }
.est-removido { opacity: .55; }

.est-taxa {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: .25rem;
  font-weight: 700;
}
.est-taxa--boa    { background: #f0fdf4; color: #15803d; }
.est-taxa--ruim   { background: #fef2f2; color: #dc2626; }
.est-taxa--neutra { color: var(--g600); }

.est-parados {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--g100);
  font-size: .8125rem;
  color: var(--g500);
  line-height: 1.6;
}

/* ---------- barras de hora ---------- */
.est-horas {
  display: flex;
  align-items: flex-end;
  gap: .25rem;
  height: 7rem;
}
.est-hora {
  flex: 1 1 0;
  min-width: 0;          /* item flex se recusa a encolher sem isto */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.est-hora__barra {
  background: var(--verde);
  border-radius: .2rem .2rem 0 0;
  min-height: .2rem;
}
.est-hora:hover .est-hora__barra { background: var(--verde-escuro); }
.est-hora__rotulo {
  font-size: .625rem;
  color: var(--g400);
  text-align: center;
  margin-top: .25rem;
  height: .875rem;
}

.est-rodape {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-radius: var(--raio);
  background: var(--g50);
  border: 1px solid var(--g100);
  color: var(--g500);
  font-size: .8125rem;
  line-height: 1.6;
}
.est-rodape p + p { margin-top: .6rem; }

.aviso--info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* =========================================================================
   ASSINATURA DE QUEM FEZ O SITE
   Canto inferior direito do rodape. Discreta de proposito: e credito de
   autoria, nao anuncio. Quem procura, acha; quem nao procura, nao tropeca.
   ========================================================================= */

.assinatura {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--g500);
  /* No computador o bloco fica a direita, alinhado com os direitos;
     no celular tudo fica a esquerda (regra la embaixo). */
  justify-content: flex-end;
}

.assinatura__credito {
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .6875rem;
}

.assinatura__nome {
  color: var(--g300);
  font-weight: 700;
  letter-spacing: .01em;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.assinatura__nome:hover {
  color: #fff;
  border-bottom-color: var(--g500);
}

.assinatura__zap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--g500);
  transition: color .2s, transform .2s;
}
.assinatura__zap svg { width: 100%; height: 100%; }
.assinatura__zap:hover { color: var(--zap); transform: scale(1.12); }

.rodape__direitos { text-align: right; }

@media (max-width: 767px) {
  /* O rodape inteiro alinha a esquerda no celular; a assinatura acompanha,
     senao ela ficaria sozinha jogada para o outro lado. */
  .rodape__direitos { text-align: left; }
  .assinatura       { justify-content: flex-start; margin-top: .6rem; }
}

/* ---------- assinatura na ficha impressa ---------- */
/* Sem icone e sem link: no papel um link nao clica, e o icone verde do
   WhatsApp em preto e branco vira um borrao. Texto puro resolve melhor. */
.folha__assinatura {
  margin-top: .6rem;
  padding-top: .5rem;
  border-top: 1px solid var(--g100);
  font-size: 7.5pt;
  color: var(--g400);
  text-align: right;
  letter-spacing: .02em;
}
.folha__assinatura strong { color: var(--g600); }