/* ============================================================
   meucarronovo.net — PÁGINA DO VEÍCULO
   Galeria, ficha técnica, local/negociação e o painel de contato.
   ============================================================ */

.migalhas { font-size: 13px; color: var(--texto-2); padding-top: clamp(18px, 3vw, 28px); }
.migalhas a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Alvo de toque: é o único caminho de volta ao catálogo no celular. */
  padding-block: 6px;
  transition: color var(--dur-rapido) var(--ease-firme);
}
.migalhas a:hover { color: var(--marca); }
.migalhas .seta { transition: transform var(--dur-rapido) var(--ease-suave); }
.migalhas a:hover .seta { transform: translateX(-4px); }

/* ============================================================
   Esqueleto da página

   Três áreas nomeadas em vez de "conteúdo + aside": no computador o painel
   ocupa a coluna da direita inteira; no celular a ordem vira foto → preço →
   ficha, e não foto → ficha inteira → preço lá no fim.
   ============================================================ */

.detalhe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas:
    "midia painel"
    "corpo painel";
  gap: clamp(20px, 3.4vw, 44px);
  align-items: start;
  padding-top: clamp(18px, 3vw, 26px);
}
.detalhe-midia { grid-area: midia; min-width: 0; }
.detalhe-corpo { grid-area: corpo; min-width: 0; }
.painel        { grid-area: painel; }

/* ---- Galeria ---- */

.galeria {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--superficie);
  border: 1px solid var(--linha);
  /* O swipe do JS troca a foto; sem isto o navegador tenta arrastar a
     imagem junto e o gesto sai picotado. */
  touch-action: pan-y;
}
/* Mesmo princípio da grade: o fundo é a própria foto borrada, então o
   veículo aparece inteiro sem tarjas vazias. */
.galeria::before {
  content: '';
  position: absolute;
  inset: -6%;
  background-image: var(--foto-fundo, none);
  background-size: cover;
  background-position: center;
  filter: blur(24px) brightness(.42) saturate(.85);
  transform: scale(1.08);
}
.galeria img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Marcador "3 / 8": no celular, onde as miniaturas ficam menores, é ele que
   avisa que existem mais fotos além da que está na tela. */
.galeria-contador {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--texto);
  background: rgba(7, 12, 22, .62);
  border: 1px solid var(--linha);
  padding: 4px 11px;
  border-radius: var(--raio-full);
  backdrop-filter: blur(6px);
}

/* A rolagem lateral e o sangramento vêm de `.faixa-rolavel` (base.css). */
.thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-bottom: 6px;
}

.thumb {
  flex: 0 0 auto;
  width: 100px;
  aspect-ratio: 16 / 10;
  border-radius: var(--raio-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: var(--bg-2);
  cursor: pointer;
  opacity: .5;
  transition: opacity var(--dur-rapido) var(--ease-firme),
              border-color var(--dur-rapido) var(--ease-firme),
              transform var(--dur-rapido) var(--ease-suave);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb:hover { opacity: .9; transform: translateY(-2px); }
.thumb.ativo { border-color: var(--marca); opacity: 1; }

/* ---- Blocos de conteúdo ---- */

.subtitulo {
  font-family: var(--fonte-display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: clamp(18px, 4.4vw, 22px);
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin: clamp(26px, 4vw, 38px) 0 16px;
}

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr));
  gap: 10px;
}
.spec {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  transition: border-color var(--dur-rapido) var(--ease-firme);
}
.spec:hover { border-color: var(--linha-forte); }

/* O ícone é o que dá leitura rápida à ficha: no celular o rótulo em caixa
   alta fica pequeno, e o desenho identifica o dado antes da leitura. */
.spec-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-sm);
  background: var(--marca-fundo);
  color: var(--marca-claro);
}
.spec-texto { min-width: 0; }
.spec-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mudo);
}
.spec-valor {
  display: block;
  font-weight: 700;
  margin-top: 2px;
  /* "Automatizado" e nomes de cor compridos não podem furar o cartão. */
  overflow-wrap: anywhere;
}

/* ---- Local e tipo de negociação ---- */

.info-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 12px;
}
.info-bloco {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(150deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px;
}
.info-icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-sm);
  background: var(--marca-fundo);
  color: var(--marca-claro);
}
.info-texto { min-width: 0; }
.info-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mudo);
}
.info-valor {
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.info-obs { font-size: 13px; color: var(--texto-2); margin-top: 5px; }

.descricao { color: var(--texto-2); overflow-wrap: anywhere; }

/* ---- Painel de contato ---- */

.painel {
  position: sticky;
  top: calc(var(--topo-altura) + 14px);
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-lg);
  padding: clamp(18px, 4.5vw, 28px);
  box-shadow: var(--sombra-card);
}
.painel h1 {
  font-size: clamp(21px, 5.2vw, 25px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.painel-versao { color: var(--mudo); font-size: 14px; margin-top: 5px; }
.painel-preco {
  font-family: var(--fonte-display);
  font-variation-settings: 'wdth' 110;
  font-weight: 800;
  /* Fixo em 44px, "R$ 129.900" furava a lateral do painel num iPhone SE. */
  font-size: clamp(31px, 8.5vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--marca);
  margin: clamp(14px, 3vw, 18px) 0;
}
.chips-destaque { margin-top: 10px; }
.painel-obs { font-size: 12.5px; color: var(--mudo); margin-top: 14px; text-align: center; }
/* No celular o telefone precisa ser discável, não só legível. */
.painel-fone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  transition: color var(--dur-rapido) var(--ease-firme);
}
.painel-fone:hover { color: var(--marca); }

/* ============================================================
   Telas menores

   1024px é onde a coluna de 380px começa a espremer a galeria: dali para
   baixo tudo empilha, na ordem foto → preço/contato → ficha.
   ============================================================ */

@media (max-width: 1024px) {
  .detalhe {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "midia"
      "painel"
      "corpo";
  }
  .painel { position: static; }
}

@media (max-width: 720px) {
  /* Foto um pouco mais alta: em 16/10 numa tela estreita o carro ficava
     com pouco mais de 180px de altura. */
  .galeria { aspect-ratio: 4 / 3; }
  .thumb { width: 84px; }
  .info-bloco { padding: 14px; }
}

@media (max-width: 560px) {
  /* Duas colunas fixas em vez de auto-fill: com 158px de mínimo a ficha
     virava uma única coluna altíssima. */
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .spec { padding: 11px 12px; gap: 9px; }
  .spec-icone { width: 32px; height: 32px; }
}