/* ============================================================
   meucarronovo.net — BASE
   Tokens (cor, forma, tipografia, movimento), reset, primitivos
   (botões, chips, selos) e a casca da página (topo + rodapé).
   Carregado em todas as páginas.
   ============================================================ */

:root {
  /* ---- Cor ---------------------------------------------------
     Paleta tirada da logo meucarronovo.net: azul-marinho profundo
     no fundo, azul vivo como cor de ação e cinza-azulado nos textos.
     Trocar a marca é trocar só estas linhas. */
  --bg:           #070c16;  /* marinho quase preto */
  --bg-2:         #0c1424;
  --superficie:   #111c30;
  --superficie-2: #18263e;
  --vidro:        rgba(17, 28, 48, .72);
  --linha:        rgba(255, 255, 255, .08);
  --linha-forte:  rgba(255, 255, 255, .17);
  --texto:        #eef3fa;
  --texto-2:      #a9b6c9;
  --mudo:         #7c8a9e;
  --marca:        #1e6fe0;  /* azul do "Online" da logo */
  --marca-claro:  #6fb0ff;
  --marca-escuro: #0f3f8f;  /* azul-marinho do "Catalogo" */
  --marca-fundo:  rgba(30, 111, 224, .14);
  --whats:        #1fae55;
  --alerta:       #eab308;

  /* ---- Forma ------------------------------------------------ */
  --raio-sm:   10px;
  --raio:      16px;
  --raio-lg:   24px;
  --raio-full: 999px;

  --sombra-card:  0 24px 48px -26px rgba(0, 0, 0, .9);
  --sombra-alta:  0 36px 70px -30px rgba(0, 0, 0, .95);

  /* ---- Tipografia ------------------------------------------- */
  --fonte-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --fonte-corpo:   'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* ---- Movimento -------------------------------------------- */
  /* Escala única de duração/curva: nenhum componente inventa a sua. */
  --dur-instante: 90ms;
  --dur-rapido:   180ms;
  --dur-normal:   340ms;
  --dur-lento:    620ms;
  --ease-suave: cubic-bezier(.22, 1, .36, 1);
  --ease-firme: cubic-bezier(.4, 0, .2, 1);
  --ease-mola:  cubic-bezier(.34, 1.56, .64, 1);
  --passo:      70ms; /* atraso entre itens de uma sequência */

  /* ---- Medidas da casca -------------------------------------
     Altura aproximada do topo fixo depois de encolher. Serve de recuo
     para as âncoras e de referência para o painel grudado do veículo —
     um valor só, para os dois nunca saírem de sincronia. */
  --topo-altura: 116px;
  /* Respiro lateral do `.container`, reutilizado por quem precisa
     "sangrar" até a borda da tela (as faixas roláveis do celular). */
  --margem-lateral: clamp(16px, 4vw, 36px);
}

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

/* O recuo acompanha a altura do topo fixo já encolhido, senão as âncoras
   (#estoque) param com o conteúdo escondido atrás dele. */
html { scroll-behavior: smooth; scroll-padding-top: var(--topo-altura); }

body {
  font-family: var(--fonte-corpo);
  background: var(--bg);
  color: var(--texto);
  font-size: 15.5px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Granulado sutil por cima de tudo: tira o "liso demais" do preto. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
/* Ícones nunca encolhem dentro de flexbox nem herdam line-height. */
.icone { flex: 0 0 auto; display: block; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

/* Faixa que rola na horizontal e vai até a borda da tela, em vez de parar
   na margem do container: no celular é o que deixa claro que há mais itens
   ao lado. Quem usa: os atalhos de marca e as miniaturas do veículo. */
.faixa-rolavel {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.faixa-rolavel::-webkit-scrollbar { height: 4px; }
.faixa-rolavel::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 4px; }
.faixa-rolavel > * { scroll-snap-align: start; }

@media (max-width: 720px) {
  .faixa-rolavel {
    margin-inline: calc(var(--margem-lateral) * -1);
    padding-inline: var(--margem-lateral);
    scroll-padding-inline: var(--margem-lateral);
  }
}

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pular para o conteúdo — só aparece no foco por teclado. */
.pular {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 1000;
  transform: translate(-50%, -160%);
  background: var(--marca);
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: var(--raio-full);
  transition: transform var(--dur-rapido) var(--ease-suave);
}
.pular:focus { transform: translate(-50%, 0); }

/* ============================================================
   Tipografia de apoio
   ============================================================ */

.overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--marca);
}
.overline::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.secao-titulo {
  font-family: var(--fonte-display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* ============================================================
   Botões
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--raio-full);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-rapido) var(--ease-suave),
              box-shadow var(--dur-rapido) var(--ease-suave),
              background-color var(--dur-rapido) var(--ease-firme),
              border-color var(--dur-rapido) var(--ease-firme),
              color var(--dur-rapido) var(--ease-firme);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: var(--dur-instante); }

.btn-marca {
  background: linear-gradient(135deg, var(--marca), var(--marca-escuro));
  color: #ffffff;
}
.btn-marca:hover { box-shadow: 0 16px 34px -18px rgba(30, 111, 224, .85); }

.btn-whats { background: var(--whats); color: #fff; }
.btn-whats:hover { box-shadow: 0 16px 34px -18px rgba(31, 174, 85, .8); }

.btn-vidro {
  background: rgba(255, 255, 255, .05);
  border-color: var(--linha-forte);
  color: var(--texto);
  backdrop-filter: blur(8px);
}
.btn-vidro:hover { background: rgba(255, 255, 255, .1); border-color: var(--marca); color: var(--marca-claro); }

.btn-grande { padding: 15px 28px; font-size: 15px; }
.btn-bloco { width: 100%; margin-top: 18px; }

/* A seta do botão desliza no hover — só transform, nunca layout. */
.btn .seta { transition: transform var(--dur-rapido) var(--ease-suave); }
.btn:hover .seta { transform: translateX(4px); }

/* ============================================================
   Chips e selos
   ============================================================ */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-2);
  background: var(--bg-2);
  border: 1px solid var(--linha);
  padding: 5px 12px;
  border-radius: var(--raio-full);
  /* Opcional comprido (ex.: "Ar digital dual zone") pode quebrar: preso em
     uma linha só ele estouraria a largura da tela no celular. */
  max-width: 100%;
  overflow-wrap: anywhere;
}
.chip .icone { color: var(--mudo); }

/* Chip de informação decisiva — local e tipo de negociação. */
.chip-info {
  color: var(--marca-claro);
  background: var(--marca-fundo);
  border-color: rgba(30, 111, 224, .32);
}
.chip-info .icone { color: inherit; }

.selo {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--raio-full);
  backdrop-filter: blur(6px);
}
.selo-destaque { background: linear-gradient(135deg, var(--marca), var(--marca-escuro)); color: #ffffff; }
.selo-reservado { background: rgba(234, 179, 8, .2); color: var(--alerta); border: 1px solid rgba(234, 179, 8, .45); }
.selo-estatico { position: static; display: inline-block; margin-bottom: 12px; }

/* ============================================================
   Topo fixo — só a marca

   Barra clara, porque a logo tem fundo branco: em cima do preto ela
   apareceria como um retângulo recortado. Fica fixa em toda a rolagem
   e só encolhe, para não roubar altura de tela no celular.
   ============================================================ */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(180deg, #ffffff, #eaeff6);
  border-bottom: 1px solid rgba(15, 63, 143, .14);
  transition: box-shadow var(--dur-normal) var(--ease-firme),
              border-color var(--dur-normal) var(--ease-firme);
}
/* Só ganha "peso" depois que a página rola. */
.topo.rolado {
  border-bottom-color: rgba(15, 63, 143, .3);
  box-shadow: 0 16px 34px -26px rgba(7, 12, 22, .95);
}

/* Fio azul da marca que acende ao rolar, separando topo e conteúdo. */
.topo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--marca), var(--marca-escuro), transparent);
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-firme);
}
.topo.rolado::after { opacity: 1; }

/* O piso baixo do clamp é o que salva o celular: com 96px fixos a marca
   comia quase um sexto da tela antes de aparecer o primeiro veículo. Acima
   de ~710px de largura o tamanho é exatamente o de antes. */
.topo-logo {
  --logo-alt: clamp(52px, 13.5vw, 146px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 6px;
  padding-inline: var(--margem-lateral);
}
/* Ao rolar ela encolhe, mas continua legível — nunca some. */
.topo.rolado .topo-logo { --logo-alt: clamp(40px, 8vw, 88px); }

.topo-logo-img {
  height: var(--logo-alt);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: height var(--dur-normal) var(--ease-suave);
}

/* Enquanto não existir `assets/img/logo.png`, o nome vira a marca do topo. */
.topo-logo-texto {
  font-family: var(--fonte-display);
  font-variation-settings: 'wdth' 115;
  font-weight: 800;
  font-size: clamp(20px, 4vw, 30px);
  line-height: var(--logo-alt);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--marca-escuro);
}

/* ============================================================
   Banner de abertura (só na home)

   Ocupa a largura inteira da tela, com teto de altura. Como a arte é
   16:9 (1672 × 941), em tela larga a altura natural passaria de 1000 px
   e o estoque ficaria longe demais — por isso o corte no topo e na base,
   preservando o miolo (a tela com a marca e os veículos).

   Para mudar o tamanho, mexa só na linha `--banner-altura`.
   ============================================================ */

.banner {
  --banner-altura: 450px;
  display: block;
  background: #eaeff6;
}

.banner-img {
  width: 100%;
  height: auto;
  max-height: var(--banner-altura);
  object-fit: cover;
  object-position: center;
  display: block;
}

/* No celular a altura natural já é menor que o teto: ali a arte aparece
   inteira, sem corte nenhum. */
@media (max-width: 800px) {
  .banner { --banner-altura: 300px; }
}
@media (max-width: 520px) {
  .banner { --banner-altura: 190px; }
}

/* ============================================================
   WhatsApp flutuante (celular)
   ============================================================ */

.whats-flutua {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: 56px;
  height: 56px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--whats);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(31, 174, 85, .7);
  animation: pulsar 3.2s var(--ease-suave) infinite;
}
@keyframes pulsar {
  0%, 100% { box-shadow: 0 14px 30px -10px rgba(31, 174, 85, .7), 0 0 0 0 rgba(31, 174, 85, .45); }
  60%      { box-shadow: 0 14px 30px -10px rgba(31, 174, 85, .7), 0 0 0 16px rgba(31, 174, 85, 0); }
}
@media (max-width: 720px) { .whats-flutua { display: inline-flex; } }

/* ============================================================
   Voltar ao topo
   ============================================================ */

.ao-topo {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  background: var(--vidro);
  backdrop-filter: blur(10px);
  color: var(--texto-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-normal) var(--ease-suave),
              transform var(--dur-normal) var(--ease-suave),
              color var(--dur-rapido) var(--ease-firme),
              border-color var(--dur-rapido) var(--ease-firme),
              visibility 0s linear var(--dur-normal);
}
.ao-topo.visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.ao-topo:hover { color: var(--marca); border-color: var(--marca); }
@media (min-width: 721px) { .ao-topo { bottom: 24px; } }

/* ============================================================
   Rodapé
   ============================================================ */

.rodape {
  position: relative;
  margin-top: clamp(48px, 8vw, 80px);
  border-top: 1px solid var(--linha);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  padding-top: clamp(32px, 5vw, 48px);
  /* No celular o botão flutuante do WhatsApp fica sobre o rodapé: o respiro
     extra evita que ele tape o telefone ou o link das redes. */
  padding-bottom: 0;
}
.rodape-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(24px, 4vw, 32px);
  padding-bottom: 34px;
}
.rodape-titulo {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--marca);
  margin-bottom: 12px;
}
.rodape p { color: var(--texto-2); font-size: 14px; }
.rodape a { transition: color var(--dur-rapido) var(--ease-firme); }
.rodape a:hover { color: var(--marca); }
/* A logo tem fundo branco: no rodapé escuro ela ganha uma placa clara,
   para parecer proposital em vez de um retângulo recortado. */
.rodape-logo {
  display: inline-flex;
  background: linear-gradient(180deg, #ffffff, #eaeff6);
  border-radius: var(--raio);
  padding: 10px 16px;
  box-shadow: 0 18px 36px -26px rgba(0, 0, 0, .95);
  transition: transform var(--dur-rapido) var(--ease-suave);
}
.rodape-logo:hover { transform: translateY(-3px); }
.rodape-logo img {
  height: clamp(78px, 10vw, 104px);
  width: auto;
  object-fit: contain;
}

/* Usado só quando ainda não existe `assets/img/logo.png`. */
.rodape-nome {
  font-family: var(--fonte-display);
  font-variation-settings: 'wdth' 112;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.rodape-sobre { margin-top: 10px; max-width: 34ch; }

.rodape-social { display: flex; gap: 10px; margin-top: 14px; }
.rodape-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--texto-2);
  transition: transform var(--dur-rapido) var(--ease-suave),
              color var(--dur-rapido) var(--ease-firme),
              border-color var(--dur-rapido) var(--ease-firme);
}
.rodape-social a:hover { transform: translateY(-3px); color: var(--marca); border-color: var(--marca); }

.rodape-fim {
  border-top: 1px solid var(--linha);
  padding-block: 20px;
  font-size: 12.5px;
  color: var(--mudo);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

/* ============================================================
   Movimento — entrada na carga e revelação por rolagem
   Regra: só opacity/transform. Sem JS, tudo já nasce visível.
   ============================================================ */

@keyframes surgir {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}

.js [data-entrada] {
  opacity: 0;
  animation: surgir var(--dur-lento) var(--ease-suave) forwards;
  animation-delay: calc(var(--i, 0) * var(--passo) + 80ms);
}

.js [data-revelar] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--dur-lento) var(--ease-suave),
              transform var(--dur-lento) var(--ease-suave);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js [data-revelar].visivel { opacity: 1; transform: none; }

/* ============================================================
   Celular — ajustes da casca

   Regra do bloco: nada de esconder conteúdo. O que muda aqui é tamanho,
   respiro e área de toque. Os breakpoints seguem os do resto do projeto:
   720px separa "celular" de "tablet para cima".
   ============================================================ */

@media (max-width: 720px) {
  :root {
    /* O topo encolhido no celular tem ~52 px + respiro; 116 px deixava as
       âncoras parando bem depois do início da seção. */
    --topo-altura: 78px;
  }

  body { font-size: 15px; }

  /* Alvo de toque confortável: 44 px é o mínimo recomendado para o dedo. */
  .btn { padding: 13px 22px; min-height: 44px; }
  .btn-grande { padding: 15px 24px; }

  /* Botões que ficam sozinhos numa linha ocupam a largura toda — meio botão
     centralizado numa tela estreita é mais difícil de acertar. */
  .vazio .btn { width: 100%; }

  .rodape-fim { justify-content: flex-start; }
  /* Espaço para o WhatsApp flutuante não cobrir o fim do rodapé. */
  .rodape { padding-bottom: 76px; }
}

@media (max-width: 420px) {
  .whats-flutua { width: 52px; height: 52px; right: 12px; bottom: 12px; }
  .ao-topo { right: 12px; bottom: 76px; width: 40px; height: 40px; }
}

/* Acessibilidade tem prioridade sobre qualquer escolha de design:
   nada de deslocamento, só um fade curtíssimo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
    scroll-behavior: auto !important;
  }
  .js [data-entrada],
  .js [data-revelar] { opacity: 1; transform: none !important; }
  .btn:hover, .card:hover { transform: none !important; }
}