/* ==========================================================================
   PADRÃO AUTOMÓVEIS — site.css

   O site. Direção A, "Showroom noturno", escolhida e refinada em 01/10/2026
   (ver memória: o registro chique, e o hero de estúdio pedido pelo usuário
   com uma referência).

   Nasceu da fusão de direcoes-base.css com direcao-a.css — as provas da
   Fase 2, que continuam em /direcoes/ no beta só como registro. Aqui os
   nomes foram unificados: tudo é .pad-, sem o escopo de prova.

   Regras de registro que este arquivo não pode quebrar (feedback do
   usuário: "está um site muito amador"):
   · UM botão por tela (o principal, vermelho); o resto é link de texto.
   · No máximo três pesos de fonte; título leve, rótulo em versalete.
   · Mono só em dinheiro.
   · Um único vermelho grande por tela: o vermelho é sinal, não fundo.

   Movimento: só transform e opacity, a curva da Lavytier, nada muda de
   tamanho numa interação.
   ========================================================================== */

/* ---- as fontes, servidas pelo próprio site (02/10/2026) ----
   Archivo (títulos e texto) e JetBrains Mono (dinheiro), licença SIL OFL,
   recorte "latin" (cobre o português inteiro: ç, ã, õ, acentos). Antes
   vinham do Google Fonts a cada visita. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* marca — §2: o vermelho é sinal, nunca fundo */
  --vermelho: #E8112A;
  --grafite:  #141414;
  --noite:    #0A0A0B;
  --carvao:   #1B1B1D;
  --aco:      #8C8C90;
  --nevoa:    #ECECEA;
  --papel:    #FFFFFF;

  /* tipo — §7: grotesca larga nos títulos, mono nos números */
  --titulo: 'Archivo', system-ui, sans-serif;
  --texto:  'Archivo', system-ui, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, monospace;

  /* movimento: a curva da Lavytier, três durações */
  --ease:    cubic-bezier(.16, 1, .3, 1);
  --t-tap:   .14s;
  --t-state: .38s;
  --t-enter: .9s;

  /* A marca é angulosa — a bandeira e a ponta do P são cortes retos.
     Raio quase zero: a precisão é o luxo aqui, não a maciez. */
  --r: 2px;

  --barra-h: 64px;
  --gutter:  clamp(20px, 5vw, 56px);
}

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

body.pad-site {
  margin: 0;
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* a barra do polegar não pode cobrir o último botão */
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:where(a, [tabindex]):focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 3px;
}

/* ==========================================================================
   BARRA
   ========================================================================== */

.pad-barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 32px;
  height: var(--barra-h);
  padding: 0 var(--gutter);
}
.pad-barra-marca img { width: auto; height: 30px; }

.pad-menu, .pad-barra-portas { display: none; }
@media (min-width: 980px) {
  .pad-menu { display: flex; gap: 26px; font-size: 14px; }
  .pad-menu a { text-decoration: none; opacity: .72; transition: opacity var(--t-tap) var(--ease); }
  .pad-menu a:hover { opacity: 1; }
  .pad-barra-portas { display: flex; gap: 8px; margin-left: auto; }
}

/* ==========================================================================
   BOTÕES — alvo de toque de 48px, sempre
   ========================================================================== */

.pad-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: 600 15px/1 var(--texto);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--t-tap) var(--ease),
    opacity var(--t-tap) var(--ease);
}
.pad-btn:active { transform: translateY(1px); }
.pad-btn--principal { background: var(--vermelho); color: #fff; }
.pad-btn--texto { padding: 0 6px; min-height: 48px; text-decoration: underline; text-underline-offset: 4px; }
.pad-btn--fantasma { min-height: 40px; padding: 0 16px; font-size: 14px; }

.pad-portas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ==========================================================================
   TEXTOS COMUNS
   ========================================================================== */

.pad-carro b, .pad-ficha-nome b { font-weight: inherit; }

.pad-preco { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   A RÉGUA DA FIPE — §5

   --p e --f vêm do PHP (posições de 0 a 1 do preço e da FIPE no trilho).
   Estado final é o padrão: sem JS, a régua já aparece certa. Com JS, ela
   nasce com o marcador sobre a FIPE e o vão vazio, e ao entrar na tela o
   marcador desliza até o preço e o vão se preenche — uma vez (§5).

   Só transform anima: o pino é uma camada do tamanho do trilho que se
   desloca (translateX em % da própria largura = % do trilho), e o vão
   cresce por scaleX a partir da FIPE. Nada muda de tamanho de verdade.
   ========================================================================== */

.pad-regua { --trilho-h: 44px; --vao-h: 3px; --pino: 20px; }

/* O trilho recorta o que passa dele. A camada do marcador tem a largura do
   trilho e, antes da animação, fica deslocada até a FIPE — ou seja, passa
   da borda. Sem o recorte, a régua da ficha (que só anima quando o visitante
   rola até ela) deixava a página inteira com rolagem lateral no celular até
   lá. O pino visível sempre cai dentro do trilho; só a camada vazia sai. */
.pad-regua-trilho {
  position: relative;
  height: var(--trilho-h);
  overflow: hidden;
  overflow: clip;
}

.pad-regua-escala {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .28;
}

.pad-regua-vao {
  position: absolute; bottom: 0;
  left: calc(var(--p) * 100%);
  width: calc((var(--f) - var(--p)) * 100%);
  height: var(--vao-h);
  background: var(--vermelho);
  transform-origin: right center;
}

.pad-regua-fipe-pino {
  position: absolute; bottom: 0;
  left: calc(var(--f) * 100%);
  width: 1px; height: 60%;
  background: currentColor;
}

.pad-regua-padrao-pino {
  position: absolute; inset: 0;
  color: var(--vermelho);
}
.pad-regua-padrao-pino svg {
  position: absolute;
  bottom: calc(var(--vao-h) + 2px);
  /* a ponta do P (42,3% da largura) cai exatamente sobre o preço */
  left: calc(var(--p) * 100% - var(--pino) * .423);
  width: var(--pino); height: auto;
}

.pad-regua-legenda {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  margin-top: 12px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.pad-regua-legenda small {
  display: block;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .6;
}
.pad-regua-legenda b { font-weight: 500; }
.pad-regua-padrao { grid-column: 1; }
.pad-regua-fipe { grid-column: 2; text-align: right; }
.pad-regua-diferenca {
  grid-column: 1 / -1; grid-row: 2;
  font-size: 13px;
}
.pad-regua-diferenca b { color: var(--vermelho); }

@media (prefers-reduced-motion: no-preference) {
  .pad-regua.is-pronta .pad-regua-vao,
  .pad-regua.is-pronta .pad-regua-padrao-pino {
    transition: transform 1.2s var(--ease) .15s;
  }
  .pad-regua.is-pronta:not(.is-visivel) .pad-regua-vao { transform: scaleX(0); }
  .pad-regua.is-pronta:not(.is-visivel) .pad-regua-padrao-pino {
    transform: translateX(calc((var(--f) - var(--p)) * 100%));
  }
}

/* ==========================================================================
   GALERIA — desliza com o dedo, sem biblioteca (§6)

   As fotos são verticais (o material da loja é foto de celular em pé), então
   a galeria é uma tira horizontal de fotos em pé: no celular uma por vez,
   no computador várias lado a lado. Esticar uma foto de 946px numa faixa
   horizontal de 1920 seria mostrar borrão; em pé, ela aparece no tamanho em
   que foi feita.
   ========================================================================== */

.pad-galeria {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pad-galeria::-webkit-scrollbar { display: none; }
.pad-galeria ul { display: flex; gap: 8px; }
.pad-galeria li {
  flex: 0 0 86%;
  scroll-snap-align: center;
}
.pad-galeria img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
@media (min-width: 980px) {
  .pad-galeria li { flex-basis: calc(34% - 6px); scroll-snap-align: start; }
}

/* ==========================================================================
   FICHA
   ========================================================================== */

/* ==========================================================================
   BARRA DO POLEGAR — só no celular (§4)
   ========================================================================== */

@media (min-width: 980px) {
  body.pad-site { padding-bottom: 0; }
}

/* elementos que só uma direção usa: escondidos por padrão */

body.pad-site {
  --cor-fundo:  #09090A;
  --cor-texto:  #F2F2F0;
  --cor-calmo:  #9A9A9E;   /* texto secundário: 7,6:1 sobre o fundo */
  --cor-fio:    rgba(255, 255, 255, .10);
  --margem: clamp(24px, 6vw, 104px);

  background: var(--cor-fundo);
  color: var(--cor-texto);
}

/* ---- versalete espaçado: o rótulo da casa, no lugar da mono ---- */

.pad-carro,
.pad-regua-legenda small {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}

/* ==========================================================================
   BARRA — transparente sobre a abertura, sem caixas
   ========================================================================== */

.pad-barra {
  height: 72px;
  padding: 0 var(--margem);
  background: linear-gradient(to bottom, rgba(9, 9, 10, .92), rgba(9, 9, 10, .55));
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
.pad-barra-marca img { height: 26px; }
.pad-menu { gap: 34px; font-size: 13px; letter-spacing: .02em; }
.pad-menu a { color: var(--cor-calmo); opacity: 1; transition: color var(--t-state) var(--ease); }
.pad-menu a:hover { color: var(--cor-texto); }

.pad-btn--fantasma {
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--cor-texto);
}
.pad-barra-portas { gap: 28px; }

/* ==========================================================================
   LINKS DE AÇÃO — um desenho só para tudo que não é o botão principal
   ========================================================================== */

.pad-btn--secundario,
.pad-btn--texto {
  position: relative;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 14px/1 var(--texto);
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--cor-texto);
}
.pad-btn--secundario::after,
.pad-btn--texto::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 12px;
  height: 1px;
  background: currentColor;
  opacity: .35;
  transform-origin: left center;
  transition: transform var(--t-state) var(--ease), opacity var(--t-state) var(--ease);
}
@media (hover: hover) {
  .pad-btn--secundario:hover::after,
  .pad-btn--texto:hover::after { opacity: 1; }
}
.pad-btn--texto { color: var(--cor-calmo); }

/* o botão: um só, vermelho, reto, sem peso de feirão */
.pad-btn--principal {
  min-height: 54px;
  padding: 0 32px;
  border-radius: 0;
  font: 500 14px/1 var(--texto);
  letter-spacing: .06em;
  transition: transform var(--t-tap) var(--ease), opacity var(--t-state) var(--ease);
}
@media (hover: hover) {
  .pad-btn--principal:hover { opacity: .88; }
}

.pad-portas { gap: 14px 36px; }

/* ==========================================================================
   ABERTURA — v4, O SALÃO (01/10/2026)

   Pedido do usuário: "pode fazer um hero luxuoso", com o render do Tank 300
   de frente. Um carro de frente é simétrico — e simetria é o que separa um
   salão de uma vitrine. A composição inteira gira em torno do eixo do
   carro:

     · em cima, o nome, pequeno, entre dois fios;
     · no meio, o carro sob UMA luz que cai de cima, com o chão refletindo;
     · a promessa partida em duas metades, uma de cada lado do carro, como
       letreiro de cinema (no celular, em cima dele);
     · embaixo, centrados, a conta e o único botão vermelho da tela.

   O luxo aqui é o que NÃO está: nenhuma cor além do vermelho do botão,
   nenhum peso de fonte acima de 300 no título, muito preto em volta.
   ========================================================================== */

.pad-abertura {
  --carro-w: min(84vw, 440px);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 44px 0 72px;
  background: #050506;
  text-align: center;
}

/* A luz do salão: um facho estreito que cai do teto sobre o carro. */
.pad-abertura::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 78% at 50% -10%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 48%, transparent 74%);
  pointer-events: none;
}

/* ---- o nome: pequeno, entre dois fios ---- */

.pad-carro {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  letter-spacing: .34em;
}
.pad-carro::before,
.pad-carro::after {
  content: '';
  flex: 0 0 36px; height: 1px;
  background: rgba(255, 255, 255, .28);
}
/* o espaçamento deixa um vão depois da última letra; o fio da direita
   desconta esse vão para o conjunto ficar no centro */
.pad-carro::after { margin-left: -.34em; }
.pad-carro b {
  font: inherit;
  letter-spacing: inherit;
  color: var(--cor-texto);
}

/* ---- o palco ---- */

.pad-palco {
  position: relative;
  width: 100%;
  margin-top: 28px;
}

/* a promessa: grande e leve */
.pad-promessa {
  position: relative;
  z-index: 2;
  padding: 0 var(--margem);
  font: 300 clamp(36px, 10vw, 48px)/1.02 var(--titulo);
  letter-spacing: -.045em;
  text-transform: none;
  color: var(--cor-texto);
}
.pad-promessa span { display: block; text-wrap: balance; }
.pad-promessa-b { color: var(--cor-calmo); }

.pad-estudio {
  position: relative;
  width: var(--carro-w);
  margin: 36px auto 0;
}

/* o carro saindo do escuro: um halo quase imperceptível atrás dele */
.pad-estudio::before {
  content: '';
  position: absolute;
  left: -30%; right: -30%; top: -12%; bottom: 0;
  background: radial-gradient(ellipse 46% 50% at 50% 50%, rgba(255, 255, 255, .075), transparent 72%);
  pointer-events: none;
}

/* o chão: a linha do horizonte na altura dos pneus, de ponta a ponta, e uma
   poça de luz embaixo do carro. Os pneus tocam o chão a 94% da altura do
   render; a sombra de contato do próprio render cobre a linha entre eles. */
.pad-estudio::after {
  content: '';
  position: absolute;
  left: -80%; right: -80%; top: 93.6%; height: 34%;
  background:
    linear-gradient(to right, transparent, rgba(255, 255, 255, .16) 50%, transparent) top / 100% 1px no-repeat,
    radial-gradient(ellipse 30% 70% at 50% 0%, rgba(255, 255, 255, .055), transparent 72%);
  pointer-events: none;
}

.pad-estudio-carro { position: relative; z-index: 1; }
.pad-estudio-carro img,
.pad-estudio-reflexo img { width: 100%; height: auto; }

/* O reflexo no piso polido: o mesmo carro, de cabeça para baixo.
   O eixo do espelho é a linha dos pneus (94% da altura), não o pé da
   imagem — o render tem a sombra de contato embaixo, e espelhar pelo pé
   deixaria um vão entre o pneu e o reflexo dele. Por isso o bloco começa
   a 88%: 94% menos os 6% de sombra. Fica por baixo do carro (z 0). */
.pad-estudio-reflexo {
  position: absolute;
  left: 0; right: 0; top: 88%;
  z-index: 0;
  opacity: .16;
  transform: scaleY(-1);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 38%);
  mask-image: linear-gradient(to top, #000 0%, transparent 38%);
  pointer-events: none;
}

/* ---- a base: a conta e a ação, centradas ---- */

.pad-abertura-base {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 48px;
  padding: 0 var(--margem);
}

.pad-regua--abertura {
  --trilho-h: 40px;
  --vao-h: 2px;
  --pino: 22px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 40px;
  text-align: left;
}

.pad-abertura .pad-portas { justify-content: center; }

.pad-loja-linha {
  margin-top: 28px;
  font: 400 11px/1.6 var(--texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cor-calmo);
  opacity: .7;
}

@media (min-width: 980px) {
  /* A abertura tem a altura da tela; o carro, o tamanho que cabe nela. */
  .pad-abertura {
    --carro-w: min(36vw, calc((100svh - 72px) * .54), 640px);
    min-height: calc(100svh - 72px);
    justify-content: center;
    padding: 40px 0 56px;
  }

  /* As duas metades da promessa saem do fluxo e emolduram o carro: uma
     colada na margem esquerda, a outra na direita, na altura do capô. */
  .pad-promessa {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12%;
    font-size: clamp(40px, 4vw, 68px);
    pointer-events: none;
  }
  .pad-promessa span { max-width: calc((100% - var(--carro-w)) / 2 - 48px); }
  .pad-promessa-a { text-align: left; }
  .pad-promessa-b { text-align: right; }

  .pad-estudio { margin-top: 8px; }
  .pad-abertura-base { margin-top: 44px; }
}

/* ---- a régua: fio de luz ---- */

.pad-regua { color: var(--cor-texto); }
.pad-regua-escala { opacity: .16; }
.pad-regua-fipe-pino { height: 12px; opacity: .45; }

.pad-regua-legenda { margin-top: 16px; row-gap: 10px; align-items: end; }
.pad-regua-legenda small { margin-bottom: 8px; }
.pad-regua-padrao b {
  font: 300 clamp(30px, 2.8vw, 40px)/1 var(--mono);
  letter-spacing: -.03em;
  color: var(--cor-texto);
}
.pad-regua-fipe b {
  font: 300 15px/1 var(--mono);
  color: var(--cor-calmo);
}
.pad-regua-diferenca {
  font: 400 13px/1.4 var(--texto);
  letter-spacing: .01em;
  color: var(--cor-calmo);
}
.pad-regua-diferenca b { font-family: var(--mono); font-weight: 400; }

/* ==========================================================================
   FICHA
   ========================================================================== */

.pad-ficha {
  position: relative;
  display: grid;
  gap: 48px;
  padding: 72px 0 88px;
  background: #0E0E0F;
  border-top: 1px solid var(--cor-fio);
}

.pad-galeria ul { gap: 2px; padding: 0 var(--margem); }
.pad-galeria img { filter: saturate(.88) contrast(1.04) brightness(.94); }

.pad-ficha-dados {
  padding: 0 var(--margem);
  display: grid;
  align-content: start;
}

.pad-ficha-nome {
  margin-top: 28px;
  font: 500 11px/1.4 var(--texto);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-ficha-nome b {
  display: block;
  margin-top: 12px;
  font-family: var(--titulo);
  font-weight: 300;
  font-size: clamp(40px, 3.8vw, 60px);
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: none;
  color: var(--cor-texto);
}

.pad-preco {
  margin-top: 36px;
  font: 300 clamp(32px, 2.8vw, 42px)/1 var(--mono);
  letter-spacing: -.03em;
}

.pad-regua--ficha { --trilho-h: 36px; --vao-h: 2px; --pino: 20px; margin-top: 20px; }
.pad-regua--ficha .pad-regua-padrao { display: none; }
.pad-regua--ficha .pad-regua-fipe {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; align-items: baseline; gap: 12px;
  text-align: left;
}
.pad-regua--ficha .pad-regua-fipe small { margin: 0; }

/* a ficha técnica: duas colunas, fios finos, versalete no rótulo */

/* selos sem caixa: uma linha com o mesmo ponto da ficha técnica */

.pad-ficha .pad-portas { margin-top: 36px; }

@media (min-width: 980px) {
  .pad-ficha {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 72px;
    padding: 120px 0 128px;
  }
  .pad-galeria ul { padding: 0 0 0 var(--margem); }
  .pad-galeria li { flex-basis: calc(50% - 1px); }
  .pad-ficha-dados {
    position: sticky; top: 120px;
    padding: 0 var(--margem) 0 0;
  }
}

/* ==========================================================================
   ENTRADA — as luzes do salão acendendo

   Primeiro a luz do teto, devagar; o carro aparece dentro dela; as duas
   metades da promessa chegam dos lados, uma de cada vez; por último a
   base. Só transform e opacity. Uma vez, na carga.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @keyframes pad-luz { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pad-foto { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes pad-sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes pad-da-esquerda { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
  @keyframes pad-da-direita { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

  .pad-abertura::before { animation: pad-luz 2.4s ease-out both; }
  .pad-estudio { animation: pad-foto 2s var(--ease) .35s both; }
  .pad-carro { animation: pad-sobe 1s var(--ease) .2s both; }
  .pad-promessa-a { animation: pad-da-esquerda 1.4s var(--ease) .7s both; }
  .pad-promessa-b { animation: pad-da-direita 1.4s var(--ease) .85s both; }
  .pad-abertura-base { animation: pad-sobe 1s var(--ease) 1.1s both; }

  /* no celular as metades estão uma sobre a outra: sobem, não vêm dos lados */
  @media (max-width: 979px) {
    .pad-promessa-a,
    .pad-promessa-b { animation-name: pad-sobe; }
  }
}

/* ---- polegar ---- */

/* ==========================================================================
   SEÇÕES DA VITRINE — Seleção e Modelos (Fase 3)

   O mesmo registro da abertura: título leve, versalete no rótulo, mono só
   no dinheiro, nenhum botão — o cartão inteiro é o link, e o "Ver o carro"
   é o mesmo fio de texto do resto da página. As fotos levam o mesmo
   tratamento de cor da abertura, para a vitrine inteira parecer um salão só
   e não doze fotos de pátio lado a lado.
   ========================================================================== */

.pad-secao {
  padding: 80px 0 88px;
  border-top: 1px solid var(--cor-fio);
}

.pad-secao-topo {
  padding: 0 var(--margem);
  margin-bottom: 48px;
}

.pad-rotulo {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 24px;
  font: 500 11px/1.4 var(--texto);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-rotulo::before {
  content: '';
  flex: 0 0 28px; height: 1px;
  background: var(--vermelho);
}

.pad-titulo {
  font: 300 clamp(36px, 4.4vw, 66px)/1.02 var(--titulo);
  letter-spacing: -.038em;
  color: var(--cor-texto);
}

.pad-lead {
  max-width: 44ch;
  margin-top: 20px;
  font: 400 16px/1.6 var(--texto);
  color: var(--cor-calmo);
}

/* ---- o link de texto, o mesmo fio de toda a página ---- */

.pad-link {
  display: inline-block;
  margin-top: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  font: 500 13px/1 var(--texto);
  letter-spacing: .03em;
  color: var(--cor-texto);
  transition: border-color var(--t-state) var(--ease);
}

/* ---- cartões ---- */

.pad-cartao a,
.pad-modelo a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pad-cartao-foto,
.pad-modelo-foto { overflow: hidden; background: #111; }

.pad-cartao-foto img,
.pad-modelo-foto img {
  width: 100%;
  object-fit: cover;
  filter: saturate(.75) contrast(1.06) brightness(.9);
  transition: transform 1.1s var(--ease);
}
.pad-cartao-foto img { aspect-ratio: 3 / 4; object-position: 50% 72%; }
.pad-modelo-foto img { aspect-ratio: 4 / 5; object-position: 50% 66%; }

@media (hover: hover) {
  .pad-cartao a:hover img,
  .pad-modelo a:hover img { transform: scale(1.035); }
  .pad-cartao a:hover .pad-link,
  .pad-modelo a:hover .pad-link { border-color: var(--cor-texto); }
}

.pad-cartao-marca {
  display: block;
  margin-top: 20px;
  font: 500 10px/1.4 var(--texto);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-cartao-nome {
  display: block;
  margin-top: 8px;
  font: 300 clamp(24px, 2vw, 30px)/1.05 var(--titulo);
  letter-spacing: -.03em;
}
.pad-cartao-ficha {
  display: block;
  margin-top: 10px;
  font: 400 13px/1.5 var(--texto);
  color: var(--cor-calmo);
}
.pad-cartao-preco {
  display: block;
  margin-top: 14px;
  font: 300 17px/1 var(--mono);
  letter-spacing: -.01em;
}

/* ---- Seleção: tira que desliza no celular, quatro colunas no computador ---- */

.pad-selecao-lista {
  display: flex; gap: 16px;
  padding: 0 var(--margem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
}
.pad-selecao-lista::-webkit-scrollbar { display: none; }
.pad-cartao { flex: 0 0 78%; scroll-snap-align: start; }

/* ---- Modelos: grade de duas, depois quatro ---- */

.pad-modelos-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 12px;
  padding: 0 var(--margem);
}
.pad-modelo .pad-cartao-marca { margin-top: 14px; }
.pad-modelo-nome {
  display: block;
  margin-top: 6px;
  font: 400 17px/1.2 var(--titulo);
  letter-spacing: -.015em;
}
.pad-modelo .pad-link { margin-top: 12px; font-size: 12px; }

@media (min-width: 980px) {
  .pad-secao { padding: 128px 0 136px; }
  .pad-secao-topo { margin-bottom: 64px; }

  .pad-selecao-lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
  }
  .pad-modelos-lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 56px 24px;
  }
}

/* ==========================================================================
   PEÇAS DO SITE — o que a prova não tinha (01/10/2026)
   No mesmo registro: versalete no rótulo, título leve, fio fino.
   ========================================================================== */

/* pular para o conteúdo: invisível até o teclado chegar nele */
.pad-pular { position: absolute; left: -9999px; top: 0; z-index: 100; }
.pad-pular:focus {
  left: 16px; top: 16px;
  padding: 12px 18px;
  background: var(--cor-texto);
  color: #000;
  font: 500 13px/1 var(--texto);
}

/* carro vendido ou endereço que não existe */
.pad-aviso {
  margin: 32px var(--margem) 0;
  padding: 18px 22px;
  border-left: 2px solid var(--vermelho);
  background: rgba(255, 255, 255, .035);
  font: 400 15px/1.6 var(--texto);
  color: var(--cor-texto);
}

/* ---- ficha: o caminho de volta ---- */

@media (min-width: 980px) {
  .pad-ficha .pad-galeria { grid-column: 1; grid-row: 2; }
  .pad-ficha .pad-ficha-dados { grid-column: 2; grid-row: 2; }
}

/* ---- A loja: o fecho da página ----
   Um convite grande ("Venha ver de perto."), o único botão vermelho da
   tela e, embaixo, os dados em três colunas de fio fino. */

.pad-loja-chamada { padding: 0 var(--margem); }

.pad-titulo--grande {
  font-size: clamp(48px, 7.6vw, 132px);
  line-height: .96;
  letter-spacing: -.05em;
}
.pad-titulo--grande span { display: block; color: var(--cor-calmo); }

.pad-loja-chamada .pad-aberto { margin-top: 32px; }
.pad-loja-chamada .pad-portas { margin-top: 36px; }

.pad-loja-grade {
  display: grid;
  gap: 40px;
  margin: 88px var(--margem) 0;
  padding-top: 40px;
  border-top: 1px solid var(--cor-fio);
}
.pad-loja-rotulo {
  margin-bottom: 14px;
  font: 500 11px/1.4 var(--texto);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-loja-valor {
  font: 300 20px/1.55 var(--titulo);
  font-style: normal;
  letter-spacing: -.01em;
  color: var(--cor-texto);
}

/* "Aberto agora · até 18h" — o ponto respira quando a loja está aberta */
.pad-aberto {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 11px/1 var(--texto);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-aberto::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pad-aberto.is-aberto { color: var(--cor-texto); }
.pad-aberto.is-aberto::before { background: #3DDC84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .5); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pad-respira { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .45); } 100% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } }
  .pad-aberto.is-aberto::before { animation: pad-respira 2.2s ease-out infinite; }
}

@media (min-width: 980px) {
  .pad-loja-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; margin-top: 128px; }
}

/* ---- rodapé ----
   Três andares: a marca com a frase da casa e o "voltar ao topo"; as
   colunas de navegação e contato; e a linha legal. */

.pad-rodape {
  padding: 72px var(--margem) calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cor-fio);
  font: 400 14px/1.7 var(--texto);
  color: var(--cor-calmo);
}

.pad-rodape-topo {
  display: grid;
  gap: 28px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--cor-fio);
}
.pad-rodape-marca img { width: auto; height: 34px; }
.pad-rodape-frase {
  max-width: 18ch;
  font: 300 clamp(28px, 3.4vw, 52px)/1.02 var(--titulo);
  letter-spacing: -.04em;
  color: var(--cor-texto);
}
.pad-rodape-frase span { color: var(--cor-calmo); }

.pad-topo {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 11px/1 var(--texto);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-calmo);
  transition: color var(--t-state) var(--ease);
}
.pad-topo i {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0;
  transition: transform var(--t-state) var(--ease), border-color var(--t-state) var(--ease), background-color var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.pad-topo:hover { color: var(--cor-texto); }
.pad-topo:hover i { transform: translateY(-4px); background: var(--cor-texto); border-color: var(--cor-texto); color: var(--cor-fundo); }

.pad-rodape-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 24px;
  padding: 48px 0;
}
.pad-rodape-colunas > * { display: grid; align-content: start; gap: 6px; }
.pad-rodape-colunas .pad-loja-rotulo { margin-bottom: 8px; }
.pad-rodape-colunas a {
  justify-self: start;
  color: var(--cor-texto);
  text-decoration: none;
  transition: color var(--t-state) var(--ease);
}
.pad-rodape-colunas a:hover { color: var(--cor-calmo); }

.pad-rodape-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--cor-fio);
  font-size: 12px;
}
.pad-assinatura a { color: var(--cor-texto); text-underline-offset: 4px; }

@media (min-width: 980px) {
  .pad-rodape { padding-top: 112px; }
  .pad-rodape-topo { grid-template-columns: auto 1fr auto; align-items: end; gap: 64px; padding-bottom: 80px; }
  .pad-rodape-frase { max-width: 24ch; }
  .pad-rodape-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 64px 0; }
}

/* ==========================================================================
   A MARCA — antes da vitrine (01/10/2026)

   "Construir algo impecável antes de apresentar os produtos" — pedido do
   usuário. Três tempos (parts/marca.php): manifesto, detalhe, estrada.

   O ritmo é de revista, não de site de loja: muito preto, uma ideia por
   tela, fotos que entram como quem acende a luz. O vermelho continua só no
   fio do rótulo — esta parte não tem botão; quem quiser agir tem o polegar
   e a barra.

   As imagens têm 800 px de origem. Nenhuma passa disso na tela larga: o
   quadro tem teto de largura, e o resto é preto em volta — no salão, o
   espaço vazio é o que dá valor à peça.
   ========================================================================== */

.pad-marca { position: relative; }

.pad-marca .pad-titulo span { display: block; color: var(--cor-calmo); }

/* ---- 1. manifesto ---- */

.pad-manifesto {
  padding: 96px var(--margem) 104px;
  border-top: 1px solid var(--cor-fio);
}

.pad-manifesto-frase {
  max-width: 17ch;
  font: 300 clamp(36px, 5.4vw, 92px)/1 var(--titulo);
  letter-spacing: -.045em;
  color: var(--cor-texto);
}
.pad-manifesto-frase span { display: block; color: var(--cor-calmo); }

/* ---- os três compromissos ----
   Uma linha inteira para cada um, como o índice de um catálogo: número,
   afirmação, prova. O fio de cima se desenha da esquerda para a direita
   quando a linha entra na tela. */

.pad-compromissos {
  list-style: none;
  padding: 0;
  margin-top: 80px;
  border-bottom: 1px solid var(--cor-fio);
}

.pad-compromisso {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 36px 0 40px;
}
.pad-compromisso::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--cor-fio);
  transform-origin: left center;
}

/* o número: grande, leve e apagado — tem o peso do título e a voz de
   um índice; acende quando a linha recebe o mouse */
.pad-compromisso-n {
  font: 300 56px/.9 var(--titulo);
  letter-spacing: -.06em;
  color: rgba(255, 255, 255, .2);
  font-variant-numeric: tabular-nums;
}

.pad-compromisso h3 {
  margin: 0;
  font: 300 clamp(28px, 3.1vw, 50px)/1.04 var(--titulo);
  letter-spacing: -.038em;
  color: var(--cor-texto);
}
.pad-compromisso-texto p {
  max-width: 40ch;
  margin-top: 14px;
  font: 400 15px/1.6 var(--texto);
  color: var(--cor-calmo);
}

/* prova 01 — o selo */
.pad-selo { width: 148px; height: 148px; color: var(--cor-texto); overflow: visible; }
.pad-selo text {
  font: 500 11px/1 var(--texto);
  letter-spacing: .28em;
  fill: var(--cor-calmo);
}
.pad-selo-giro { transform-origin: 100px 100px; }

/* prova 02 — os bancos, por extenso, como créditos de filme */
/* no celular, 2x2 com fio em cima de cada um — em linha, o quarto banco
   quebrava sozinho com o fio vertical sobrando na frente */
.pad-bancos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  font: 300 clamp(22px, 2vw, 30px)/1.2 var(--titulo);
  letter-spacing: -.02em;
  color: var(--cor-texto);
}
.pad-bancos li { padding: 14px 0; border-top: 1px solid var(--cor-fio); }
@media (min-width: 980px) {
  .pad-bancos { display: flex; flex-wrap: wrap; }
  .pad-bancos li { padding: 6px 22px 6px 0; border-top: 0; }
  .pad-bancos li + li { padding-left: 22px; border-left: 1px solid var(--cor-fio); }
}

/* prova 03 — o mês da tabela, com o sinal de "ao vivo" */
.pad-tabela { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
.pad-tabela small {
  flex: 0 0 100%;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font: 500 11px/1.4 var(--texto);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-tabela b {
  font: 300 clamp(40px, 4.2vw, 68px)/1 var(--titulo);
  letter-spacing: -.045em;
  color: var(--cor-texto);
}
.pad-tabela span {
  font: 300 clamp(40px, 4.2vw, 68px)/1 var(--titulo);
  letter-spacing: -.045em;
  color: var(--cor-calmo);
}
/* o único vermelho desta tela: um ponto — o vermelho é sinal */
.pad-pulso {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vermelho);
}

/* ---- os quadros: foto, legenda e a cortina da entrada ---- */

.pad-quadro { position: relative; }
.pad-quadro picture { position: relative; overflow: hidden; }
.pad-quadro img { width: 100%; height: auto; }
.pad-quadro figcaption {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px;
  font: 500 11px/1.4 var(--texto);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-quadro figcaption::before {
  content: '';
  flex: 0 0 20px; height: 1px;
  background: currentColor;
  opacity: .5;
}

/* As fotos de estúdio claro (roda, bagageiro) se apagam nas bordas: sem
   isso, cada uma vira uma janela cinza acesa na página preta. A grade, que
   já é escura, só perde as laterais. */
.pad-quadro--grade picture {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.pad-quadro--roda picture,
.pad-quadro--rack picture {
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}

/* ---- 2. detalhe ---- */

.pad-detalhe { padding: 0 0 112px; }

.pad-detalhe-topo {
  padding: 0 var(--margem);
  margin-bottom: 40px;
}

.pad-quadro--grade {
  width: min(100%, 960px);
  margin: 0 auto;
}
.pad-quadro--grade figcaption { justify-content: center; }
.pad-quadro--grade figcaption::before { display: none; }

.pad-detalhe-par {
  display: grid;
  gap: 56px;
  margin-top: 72px;
  padding: 0 var(--margem);
}

/* ---- 3. estrada ---- */

.pad-estrada {
  position: relative;
  display: grid;
  padding: 0 var(--margem) 120px;
}

/* a serra entra por cima do canto da estrada, com uma borda da cor da
   página — como duas fotos impressas, uma sobre a outra */
.pad-quadro--serra {
  width: 72%;
  justify-self: end;
  margin-top: -18%;
  outline: 10px solid var(--cor-fundo);
  z-index: 1;
}

.pad-estrada-texto { margin-top: 56px; }
.pad-estrada-texto .pad-btn--secundario { margin-top: 28px; }

@media (min-width: 980px) {
  .pad-manifesto { padding: 160px var(--margem) 168px; }
  .pad-compromissos { margin-top: 128px; }
  .pad-compromisso {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 5fr) minmax(0, 5fr);
    align-items: center;
    gap: 48px;
    min-height: 240px;
    padding: 48px 0;
  }
  .pad-compromisso-n { align-self: start; font-size: clamp(72px, 7.4vw, 128px); }
  .pad-compromisso-prova { justify-self: end; }
  .pad-bancos { justify-content: flex-end; }
  .pad-tabela { justify-content: flex-end; text-align: right; }
  .pad-tabela small { justify-content: flex-end; }
  .pad-selo { width: 168px; height: 168px; }

  /* passar o mouse acende a linha: o número e o fio ganham luz */
  .pad-compromisso-n,
  .pad-compromisso::before { transition: color var(--t-state) var(--ease), background-color var(--t-state) var(--ease); }
  .pad-compromisso:hover .pad-compromisso-n { color: var(--cor-texto); }
  .pad-compromisso:hover::before { background-color: rgba(255, 255, 255, .28); }

  .pad-detalhe { padding-bottom: 176px; }
  .pad-detalhe-topo { margin-bottom: 72px; }

  /* a roda, maior; o bagageiro, menor e mais baixo — o olho desce em
     diagonal, como numa página de revista */
  .pad-detalhe-par {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
    align-items: start;
    margin-top: 112px;
  }
  .pad-quadro--roda { max-width: 800px; }
  .pad-quadro--rack { max-width: 678px; margin-top: 200px; }

  .pad-estrada {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: 24px;
    padding-bottom: 176px;
  }
  .pad-quadro--estrada {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    max-width: 800px;
  }
  .pad-quadro--serra {
    grid-column: 6 / 10;
    grid-row: 2;
    width: auto;
    max-width: 800px;
    align-self: end;
    justify-self: stretch;
    margin: 0 0 -64px;
  }
  .pad-estrada-texto {
    grid-column: 8 / 13;
    grid-row: 1;
    align-self: start;
    margin: 96px 0 0 32px;
  }
}

/* ---- a entrada: acende quando chega na tela ----
   Só quando o site.js marcou o elemento como pronto (.is-pronta). Sem
   script, tudo já está no estado final: nada aqui esconde conteúdo. */

@media (prefers-reduced-motion: no-preference) {
  .pad-revela.is-pronta {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  }
  .pad-revela.is-visivel { opacity: 1; transform: none; }

  /* compromissos: primeiro o fio corre, depois número, texto e prova */
  .pad-compromisso.is-pronta::before { transform: scaleX(0); }
  .pad-compromisso.is-pronta > * { opacity: 0; transform: translateY(14px); }
  .pad-compromisso.is-visivel::before {
    transform: none;
    transition: transform 1.4s var(--ease), background-color var(--t-state) var(--ease);
  }
  .pad-compromisso.is-visivel > * {
    opacity: 1; transform: none;
    transition: opacity 1s var(--ease), transform 1.2s var(--ease), color var(--t-state) var(--ease);
  }
  .pad-compromisso.is-visivel > :nth-child(1) { transition-delay: .35s; }
  .pad-compromisso.is-visivel > :nth-child(2) { transition-delay: .5s; }
  .pad-compromisso.is-visivel > :nth-child(3) { transition-delay: .7s; }

  /* o selo gira devagar, sempre — um carimbo vivo, não um enfeite */
  @keyframes pad-giro { to { transform: rotate(360deg); } }
  .pad-selo-giro { animation: pad-giro 48s linear infinite; }

  /* o ponto "ao vivo" respira */
  @keyframes pad-pulsa { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
  .pad-pulso::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--vermelho);
    animation: pad-pulsa 2.4s var(--ease) infinite;
  }

  /* a cortina: um pano da cor da página que corre para a direita, e a foto
     assentando de 1,1 para 1 por baixo dele */
  .pad-quadro picture::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--cor-fundo);
    transform: scaleX(0);
    transform-origin: right center;
    pointer-events: none;
  }
  .pad-quadro.is-pronta picture::after { transform: scaleX(1); }
  .pad-quadro.is-pronta figcaption { opacity: 0; }

  .pad-quadro.is-visivel picture::after {
    transform: scaleX(0);
    transition: transform 1.4s var(--ease);
  }
  .pad-quadro.is-visivel figcaption {
    opacity: 1;
    transition: opacity 1s var(--ease) .8s;
  }
}

/* ==========================================================================
   PEDIDOS — test-drive, seu carro, procuro um carro (§4)

   Formulário de alto padrão não parece formulário: nenhuma caixa cinza,
   nenhuma borda em volta de campo. O campo é uma linha fina com o texto
   grande e leve em cima; a escolha é uma pílula de fio que, marcada, se
   inverte (fundo claro, letra escura). O vermelho continua só no botão.
   ========================================================================== */

/* a isca dos robôs: fora da tela e do leitor de tela */
.pad-isca {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.pad-pedido { display: grid; gap: 36px; }

/* ---- o campo: só a linha ---- */

.pad-campos { display: grid; gap: 28px; }

.pad-campo { display: grid; gap: 10px; }
.pad-campo > span,
.pad-pilulas legend {
  font: 500 11px/1.4 var(--texto);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-campo input {
  width: 100%;
  padding: 6px 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  background: transparent;
  font: 300 clamp(22px, 2vw, 28px)/1.2 var(--titulo);
  letter-spacing: -.02em;
  color: var(--cor-texto);
  transition: border-color var(--t-state) var(--ease);
}
.pad-campo input::placeholder { color: rgba(255, 255, 255, .22); }
.pad-campo input:focus { outline: 0; border-bottom-color: var(--cor-texto); }

/* ---- a pílula ---- */

.pad-pilulas { margin: 0; padding: 0; border: 0; min-width: 0; }
.pad-pilulas legend { padding: 0; margin-bottom: 14px; }
.pad-pilulas > div { display: flex; flex-wrap: wrap; gap: 10px; }

.pad-pilula { position: relative; cursor: pointer; }
.pad-pilula input {
  position: absolute; inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.pad-pilula span {
  display: inline-flex; align-items: baseline; gap: 8px;
  min-height: 46px;
  padding: 13px 20px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r);
  font: 400 14px/1.3 var(--texto);
  color: var(--cor-texto);
  transition:
    background-color var(--t-state) var(--ease),
    border-color var(--t-state) var(--ease),
    color var(--t-state) var(--ease);
}
.pad-pilula small { font-size: 12px; color: var(--cor-calmo); transition: color var(--t-state) var(--ease); }
@media (hover: hover) {
  .pad-pilula:hover span { border-color: rgba(255, 255, 255, .5); }
}
.pad-pilula input:checked + span {
  background: var(--cor-texto);
  border-color: var(--cor-texto);
  color: var(--cor-fundo);
}
.pad-pilula input:checked + span small { color: rgba(9, 9, 10, .6); }
.pad-pilula input:focus-visible + span { outline: 2px solid var(--vermelho); outline-offset: 3px; }
.pad-pilula[hidden] { display: none; }

/* ---- o fim: o botão e o que acontece ---- */

.pad-pedido-fim { display: grid; gap: 16px; justify-items: start; margin-top: 4px; }
.pad-pedido-nota {
  max-width: 44ch;
  font: 400 12px/1.6 var(--texto);
  color: var(--cor-calmo);
}

/* ==========================================================================
   PROCURO UM CARRO — o fim da vitrine
   ========================================================================== */

.pad-titulo--menor { font-size: clamp(30px, 3vw, 46px); }

.pad-procuro {
  display: grid;
  gap: 40px;
  margin: 80px var(--margem) 0;
  padding-top: 56px;
  border-top: 1px solid var(--cor-fio);
}

/* ==========================================================================
   SEU CARRO NA TROCA
   ========================================================================== */

.pad-avaliar-grade {
  display: grid;
  gap: 56px;
  padding: 0 var(--margem);
}
.pad-avaliar .pad-titulo span { display: block; color: var(--cor-calmo); }

.pad-passos {
  display: grid;
  gap: 0;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  max-width: 420px;
}
.pad-passos li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--cor-fio);
  font: 400 15px/1.4 var(--texto);
  color: var(--cor-texto);
}
.pad-passos li:last-child { border-bottom: 1px solid var(--cor-fio); }
.pad-passos span {
  flex: 0 0 28px;
  font: 300 13px/1 var(--titulo);
  letter-spacing: .12em;
  color: var(--cor-calmo);
}

@media (min-width: 980px) {
  .pad-procuro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    margin-top: 112px;
    padding-top: 72px;
  }
  .pad-avaliar-grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 96px;
    align-items: start;
  }
  .pad-avaliar-topo { position: sticky; top: 120px; }
  .pad-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .pad-campo--largo { grid-column: 1 / -1; }
}

/* ==========================================================================
   A GAVETA DO TEST-DRIVE

   Um <dialog> nativo: prende o foco, fecha no Esc, devolve o foco ao botão.
   No computador, desliza da direita, com a página escurecendo atrás; no
   celular, sobe de baixo, como folha.
   ========================================================================== */

.pad-gaveta {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 92svh;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--cor-fio);
  background: #0E0E10;
  color: var(--cor-texto);
  overflow: auto;
  overscroll-behavior: contain;
}
.pad-gaveta::backdrop {
  background: rgba(3, 3, 4, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pad-gaveta-corpo { padding: 28px var(--margem) calc(36px + env(safe-area-inset-bottom)); }

.pad-gaveta-topo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.pad-gaveta-topo .pad-rotulo { margin: 0; }
.pad-gaveta-fechar {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: 500 11px/1 var(--texto);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-calmo);
  cursor: pointer;
}
.pad-gaveta-fechar:hover { color: var(--cor-texto); }

.pad-gaveta-titulo {
  font: 300 clamp(32px, 3.2vw, 44px)/1.04 var(--titulo);
  letter-spacing: -.04em;
}
.pad-gaveta-lead {
  margin: 14px 0 36px;
  font: 400 15px/1.6 var(--texto);
  color: var(--cor-calmo);
}
.pad-gaveta-tempo { margin-top: 20px; font-size: 12px; color: var(--cor-calmo); }

@media (min-width: 980px) {
  .pad-gaveta {
    inset: 0 0 0 auto;
    width: min(520px, 100%);
    height: 100svh;
    max-height: none;
    border-top: 0;
    border-left: 1px solid var(--cor-fio);
  }
  .pad-gaveta-corpo { padding: 36px 48px 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pad-gaveta-sobe { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes pad-gaveta-entra { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes pad-escurece { from { opacity: 0; } to { opacity: 1; } }
  .pad-gaveta[open] { animation: pad-gaveta-sobe .6s var(--ease); }
  .pad-gaveta[open]::backdrop { animation: pad-escurece .5s var(--ease); }
  @media (min-width: 980px) {
    .pad-gaveta[open] { animation-name: pad-gaveta-entra; }
  }
}

/* com a gaveta aberta, a página atrás não rola */
html:has(.pad-gaveta[open]) { overflow: hidden; }

/* ==========================================================================
   ACABAMENTO E INTERAÇÃO (01/10/2026)

   Pedido do usuário: "efeitos de movimento por interatividade em pequenos
   elementos, fazendo um site super legal e detalhado". A regra de sempre
   continua: só transform e opacity (e as propriedades individuais
   translate/scale, que são transform), uma curva só (a da Lavytier), e
   nada que esconda conteúdo sem script. O que segue o mouse só existe com
   mouse (.tem-mouse, posto pelo site.js) e sem "reduzir movimento".
   ========================================================================== */

/* a escala da foto que se descobre: registrada para poder transicionar
   (variável comum não anima) */
@property --ps { syntax: '<number>'; inherits: false; initial-value: 1; }

/* ---- a barra: transparente sobre a abertura, vidro ao rolar, some ao
   descer e volta ao subir; um fio vermelho mede quanto da página já foi ---- */

.pad-barra {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: transform .6s var(--ease), background-color .4s var(--ease);
}
.pad-barra::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(9, 9, 10, .78);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid var(--cor-fio);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.pad-barra.is-rolada::before { opacity: 1; }
/* pegajosa: a barra nunca sai do topo; rolada, o logo se recolhe um nada */
.pad-barra-marca img { transform-origin: left center; transition: transform .6s var(--ease); }
.pad-barra.is-rolada .pad-barra-marca img { transform: scale(.88); }

.pad-progresso {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--vermelho);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .9;
}

/* o menu: o fio passa por baixo no hover; a seção atual fica acesa */
.pad-menu a { position: relative; padding: 6px 0; text-decoration: none; }
.pad-menu a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease);
}
.pad-menu a:hover::after,
.pad-menu a.is-atual::after { transform: scaleX(1); transform-origin: left center; }
.pad-menu a.is-atual { color: var(--cor-texto); }

/* ---- os links de texto: o fio sai pela direita e volta pela esquerda ---- */

@keyframes pad-fio {
  0%   { transform: scaleX(1); transform-origin: right center; }
  45%  { transform: scaleX(0); transform-origin: right center; }
  55%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pad-btn--secundario:hover::after,
  .pad-btn--texto:hover::after { animation: pad-fio .9s var(--ease); }
}

/* .pad-link: o mesmo fio, desenhado por ::after (era borda — e borda não
   anima com transform) */
.pad-link {
  position: relative;
  border-bottom: 0;
  text-decoration: none;
}
.pad-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .35;
  transition: opacity var(--t-state) var(--ease);
}
.pad-link i,
.pad-btn--secundario i {
  display: inline-block;
  font-style: normal;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .pad-cartao a:hover .pad-link::after,
  .pad-modelo a:hover .pad-link::after,
  .pad-link:hover::after { opacity: 1; }
  .pad-cartao a:hover .pad-link i,
  .pad-modelo a:hover .pad-link i { transform: translateX(5px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pad-cartao a:hover .pad-link::after,
  .pad-modelo a:hover .pad-link::after { animation: pad-fio .9s var(--ease); }
}

/* ---- o botão vermelho: magnético (translate, no site.js) e o texto que
   rola por dentro — sai por cima, a cópia entra por baixo ---- */

.pad-btn--principal { transition: transform var(--t-tap) var(--ease), opacity var(--t-state) var(--ease); }
.pad-rolo {
  display: inline-grid;
  overflow: hidden;
  padding: .12em 0;
  margin: -.12em 0;
}
.pad-rolo > span { grid-area: 1 / 1; transition: transform .55s var(--ease); }
.pad-rolo > span + span { transform: translateY(115%); }
@media (hover: hover) {
  .pad-btn--principal:hover { opacity: 1; }
  .pad-btn--principal:hover .pad-rolo > span:first-child { transform: translateY(-115%); }
  .pad-btn--principal:hover .pad-rolo > span + span { transform: none; }
}

/* ---- o cursor que diz o que o clique faz ---- */

.pad-cursor {
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 0; height: 0;
  pointer-events: none;
}
.pad-cursor span {
  position: absolute;
  left: -42px; top: -42px;
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--cor-texto);
  font: 500 10px/1 var(--texto);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cor-fundo);
  transform: scale(0);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.pad-cursor.is-ativo span { transform: scale(1); opacity: 1; }
.tem-mouse [data-cursor] { cursor: none; }

/* ---- cartões: a foto anda contra o mouse dentro da moldura, escurece
   menos no hover; o número acende ---- */

.pad-cartao-foto,
.pad-modelo-foto { position: relative; }
.pad-cartao-foto::after,
.pad-modelo-foto::after {
  content: '';
  position: absolute; inset: 0;
  /* as fotos de pátio entram com a luz baixa (o salão é escuro) e o
     cartão sob o mouse acende — o mesmo gesto de um spot ligando */
  background:
    linear-gradient(to top, rgba(9, 9, 10, .7), rgba(9, 9, 10, .28) 55%, rgba(9, 9, 10, .32)),
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(9, 9, 10, .4));
  pointer-events: none;
  transition: opacity .8s var(--ease);
}
.pad-cartao-foto img,
.pad-modelo-foto img {
  translate: calc(var(--cx, 0) * -14px) calc(var(--cy, 0) * -14px);
  transition: transform 1.1s var(--ease), translate .9s var(--ease);
}
.tem-mouse .pad-cartao-foto img,
.tem-mouse .pad-modelo-foto img { scale: 1.04; }
@media (hover: hover) {
  .pad-cartao a:hover .pad-cartao-foto::after,
  .pad-modelo a:hover .pad-modelo-foto::after { opacity: .3; }
}

.pad-cartao-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 20px;
}
.pad-cartao-topo .pad-cartao-marca { margin: 0; }
.pad-cartao-n {
  font: 300 13px/1 var(--titulo);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .28);
  transition: color var(--t-state) var(--ease);
}
.pad-cartao a:hover .pad-cartao-n { color: var(--cor-texto); }

/* "Preço sob consulta" é frase, não número: fora da mono */
.pad-cartao-preco--consulta {
  font: 400 13px/1.4 var(--texto);
  letter-spacing: .01em;
  color: var(--cor-calmo);
}
.pad-preco--consulta {
  font: 300 clamp(24px, 2.2vw, 30px)/1.1 var(--titulo);
  letter-spacing: -.02em;
  color: var(--cor-calmo);
}

/* ---- entradas: o que tem data-revela sobe ao entrar; cartões em cascata ---- */

@media (prefers-reduced-motion: no-preference) {
  [data-revela].is-pronta:not(.pad-quadro):not(.pad-compromisso) {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  }
  [data-revela].is-visivel:not(.pad-quadro):not(.pad-compromisso) { opacity: 1; transform: none; }

  .pad-selecao-lista > :nth-child(2), .pad-modelos-lista > :nth-child(4n+2), .pad-loja-grade > :nth-child(2) { transition-delay: .08s; }
  .pad-selecao-lista > :nth-child(3), .pad-modelos-lista > :nth-child(4n+3), .pad-loja-grade > :nth-child(3) { transition-delay: .16s; }
  .pad-selecao-lista > :nth-child(4), .pad-modelos-lista > :nth-child(4n+4) { transition-delay: .24s; }

  /* a foto do quadro: a escala da entrada (--ps) e a profundidade ao rolar
     (--py) e o mouse (translate) — três movimentos que não se atropelam */
  .pad-quadro img {
    transform: translateY(var(--py, 0%)) scale(calc(var(--ps) * var(--pz, 1)));
    translate: calc(var(--cx, 0) * -12px) calc(var(--cy, 0) * -12px);
    transition: --ps 2.6s var(--ease), translate .9s var(--ease);
  }
  .pad-quadro.is-pronta img { --ps: 1.1; transform: translateY(var(--py, 0%)) scale(calc(var(--ps) * var(--pz, 1))); }
  .pad-quadro.is-visivel img { --ps: 1; transition: --ps 2.6s var(--ease), translate .9s var(--ease); }
  .tem-mouse .pad-quadro img { --pz: 1.05; }
  .pad-quadro[data-paralaxe] img { --pz: 1.1; }
}

/* ---- a abertura acompanha o mouse em três profundidades e recua ao rolar ---- */

.tem-mouse .pad-abertura::before { translate: calc(var(--mx, 0) * 40px) calc(var(--my, 0) * 16px); }
.tem-mouse .pad-estudio {
  translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -8px + var(--rol, 0) * 90px);
  scale: calc(1 - var(--rol, 0) * .1);
}
.tem-mouse .pad-promessa-a { translate: calc(var(--mx, 0) * 10px) calc(var(--rol, 0) * -40px); }
.tem-mouse .pad-promessa-b { translate: calc(var(--mx, 0) * 10px) calc(var(--rol, 0) * -40px); }
.tem-mouse .pad-palco { opacity: calc(1 - var(--rol, 0) * .9); }

/* ---- compromissos: o selo gira mais um pouco no hover; os bancos se
   apagam todos menos o que está sob o mouse ---- */

.pad-selo { transition: transform 1.6s var(--ease); }
@media (hover: hover) {
  .pad-compromisso:hover .pad-selo { transform: rotate(-60deg) scale(1.04); }
  .pad-bancos li { transition: opacity var(--t-state) var(--ease), color var(--t-state) var(--ease); }
  .pad-bancos:hover li { opacity: .3; }
  .pad-bancos li:hover { opacity: 1; }
}

/* ---- formulários: a linha do campo se desenha no foco; a pílula afunda
   no toque ---- */

.pad-campo { position: relative; }
.pad-campo::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cor-texto);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.pad-campo:focus-within::after { transform: scaleX(1); }
.pad-campo input:focus { border-bottom-color: rgba(255, 255, 255, .22); }
.pad-campo:focus-within > span { color: var(--cor-texto); }
.pad-campo > span { transition: color var(--t-state) var(--ease); }

.pad-pilula span { transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease), color var(--t-state) var(--ease), transform var(--t-tap) var(--ease); }
.pad-pilula:active span { transform: scale(.96); }

/* a gaveta: o conteúdo entra em cascata, depois da folha */
@media (prefers-reduced-motion: no-preference) {
  .pad-gaveta[open] .pad-gaveta-corpo > * { animation: pad-sobe .8s var(--ease) both; }
  .pad-gaveta[open] .pad-gaveta-corpo > :nth-child(2) { animation-delay: .08s; }
  .pad-gaveta[open] .pad-gaveta-corpo > :nth-child(3) { animation-delay: .14s; }
  .pad-gaveta[open] .pad-gaveta-corpo > :nth-child(4) { animation-delay: .2s; }
}

/* ---- a galeria da ficha ---- */

.pad-galeria { scroll-padding-inline-start: var(--margem); }
.pad-galeria.is-arrastando { scroll-snap-type: none; }
.pad-galeria.is-arrastando img { pointer-events: none; }

.pad-galeria-controles {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px;
  padding: 0 var(--margem);
}
.pad-galeria-contador {
  margin-right: auto;
  font: 300 14px/1 var(--titulo);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--cor-calmo);
}
.pad-galeria-contador b { font-weight: 300; color: var(--cor-texto); }
.pad-galeria-seta {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: none;
  font: 400 16px/1 var(--texto);
  color: var(--cor-texto);
  cursor: pointer;
  transition: background-color var(--t-state) var(--ease), color var(--t-state) var(--ease), border-color var(--t-state) var(--ease), transform var(--t-tap) var(--ease);
}
.pad-galeria-seta:hover { background: var(--cor-texto); border-color: var(--cor-texto); color: var(--cor-fundo); }
.pad-galeria-seta:active { transform: scale(.94); }

@media (min-width: 980px) {
  .pad-galeria-controles { padding: 0 0 0 var(--margem); }
}

/* o número inteiro numa linha só: "98265-" de um lado e "4812" do outro
   não se disca */
.pad-numero { display: block; white-space: nowrap; color: var(--cor-calmo); }

/* ==========================================================================
   O MENU (01/10/2026) — "inteligente, animado, leve, fluido, elegante"

   Leve: um <dialog> nativo, CSS e algumas linhas de script — nenhuma
   biblioteca. Fluido: só transform e opacity, a curva da Lavytier.
   Inteligente: sabe em que seção a página está, quantos carros há em cada
   uma, se a loja está aberta agora, e o test-drive já leva o carro certo.
   Elegante: uma cortina escura desce do teto, os nomes sobem um a um de
   dentro de uma fenda, e a foto de prévia troca com o mouse.
   ========================================================================== */

/* ---- o botão: "Menu" e duas linhas que, abertas, viram um X ---- */

.pad-barra-portas { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.pad-barra-portas .pad-btn--fantasma { display: none; }
@media (min-width: 980px) {
  .pad-barra-portas .pad-btn--fantasma { display: inline-flex; }
}

.pad-menu-botao {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 11px/1 var(--texto);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cor-texto);
  cursor: pointer;
}
.pad-menu-icone {
  position: relative;
  display: block;
  width: 26px; height: 10px;
}
.pad-menu-icone i {
  position: absolute; right: 0;
  height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease), width .6s var(--ease);
}
.pad-menu-icone i:first-child { top: 0; width: 26px; }
.pad-menu-icone i:last-child { bottom: 0; width: 16px; }
/* no hover as linhas trocam de tamanho — um respiro, não um enfeite */
@media (hover: hover) {
  .pad-menu-botao:hover .pad-menu-icone i:first-child { width: 16px; }
  .pad-menu-botao:hover .pad-menu-icone i:last-child { width: 26px; }
}
.pad-menu-botao.is-aberto .pad-menu-icone i { width: 22px; right: 2px; }
.pad-menu-botao.is-aberto .pad-menu-icone i:first-child { transform: translateY(4.5px) rotate(45deg); }
.pad-menu-botao.is-aberto .pad-menu-icone i:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ---- o painel ---- */

.pad-painel {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  color: var(--cor-texto);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.pad-painel[open] { display: grid; grid-template-rows: auto 1fr auto; }
.pad-painel::backdrop { background: transparent; }

/* a cortina: o fundo do painel, com uma luz fria vinda do canto */
.pad-painel-cortina {
  position: fixed; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(255, 255, 255, .06), transparent 70%),
    #08080A;
}

.pad-painel-topo {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
  padding: 0 var(--margem);
}
.pad-painel-topo .pad-barra-marca img { width: auto; height: 26px; }

.pad-painel-corpo {
  display: grid;
  align-items: center;
  gap: 48px;
  padding: 24px var(--margem) 40px;
}

/* ---- os nomes ---- */

.pad-painel-nav ol { margin: 0; padding: 0; list-style: none; }
.pad-painel-nav li { border-top: 1px solid var(--cor-fio); }
.pad-painel-nav li:last-child { border-bottom: 1px solid var(--cor-fio); }

.pad-painel-nav a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  padding: 14px 0 12px;
  text-decoration: none;
  color: inherit;
  transition: opacity .5s var(--ease);
}
.pad-painel-n {
  font: 300 12px/1 var(--titulo);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--cor-calmo);
  transition: color var(--t-state) var(--ease);
}
/* a fenda: o nome sobe de dentro dela ao abrir, e rola por dentro dela
   no hover */
.pad-painel-linha {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.pad-painel-texto {
  position: relative;
  display: inline-block;
  font: 300 clamp(40px, 6.4vw, 104px)/1 var(--titulo);
  letter-spacing: -.05em;
  transition: transform .7s var(--ease);
}
.pad-painel-texto::after {
  content: attr(data-texto);
  position: absolute; left: 0; top: 100%;
  padding-top: .06em;
  color: var(--cor-texto);
}
.pad-painel-nav small {
  font: 500 10px/1.4 var(--texto);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cor-calmo);
  text-align: right;
}

/* a seção em que a página está: o número acende em vermelho */
.pad-painel-nav a.is-atual .pad-painel-n { color: var(--vermelho); }

@media (hover: hover) {
  .pad-painel-nav ol:hover a { opacity: .32; }
  .pad-painel-nav ol:hover a:hover { opacity: 1; }
  .pad-painel-nav a:hover .pad-painel-texto { transform: translateY(-100%); }
  .pad-painel-nav a:hover .pad-painel-n { color: var(--cor-texto); }
}
.pad-painel-nav a:focus-visible { outline-offset: 6px; }

/* ---- a prévia: uma foto por item, trocando com o mouse ---- */

.pad-painel-previas { display: none; }

/* ---- a base: onde, quando e as portas ---- */

.pad-painel-base {
  display: grid;
  gap: 28px;
  padding: 28px var(--margem) calc(32px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cor-fio);
  font: 400 14px/1.6 var(--texto);
  color: var(--cor-calmo);
}
.pad-painel-base .pad-loja-rotulo { margin-bottom: 8px; }
.pad-painel-base a:not(.pad-btn) {
  color: var(--cor-texto);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .3);
  text-underline-offset: 4px;
}
.pad-painel-base .pad-aberto { margin: 0; }
.pad-painel-portas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }

@media (min-width: 980px) {
  .pad-painel-corpo {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 8vw;
    padding: 16px var(--margem) 48px;
  }
  .pad-painel-nav a { grid-template-columns: 72px minmax(0, 1fr) auto; padding: 18px 0 14px; }

  .pad-painel-previas {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    max-height: calc(100svh - 300px);
    justify-self: end;
    width: 100%;
    overflow: hidden;
    background: #0D0D0F;
  }
  .pad-painel-previa {
    position: absolute; inset: 0;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity .9s var(--ease), transform 1.4s var(--ease);
  }
  .pad-painel-previa.is-ativa { opacity: 1; transform: none; }
  .pad-painel-previa picture,
  .pad-painel-previa img { width: 100%; height: 100%; }
  .pad-painel-previa img { object-fit: cover; filter: saturate(.8) brightness(.85); }
  /* o render do Tank, sem fundo: inteiro, sob a mesma luz do hero */
  .pad-painel-previa--estudio {
    background: radial-gradient(ellipse 60% 45% at 50% 45%, rgba(255, 255, 255, .09), transparent 72%);
  }
  .pad-painel-previa--estudio img { object-fit: contain; padding: 16%; filter: none; }

  .pad-painel-base {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 48px;
  }
  .pad-painel-portas { justify-content: flex-end; }
}

/* ---- a coreografia ----
   Abrir: a cortina desce (0,9s), o topo aparece, os nomes sobem da fenda
   um a um, a prévia se acende, a base sobe por último.
   Fechar (.is-fechando): o conteúdo some depressa e a cortina volta ao
   teto. O script espera a cortina antes de fechar o <dialog>. */

@media (prefers-reduced-motion: no-preference) {
  @keyframes pad-cortina-desce { from { transform: translateY(-100%); } to { transform: none; } }
  @keyframes pad-cortina-sobe { from { transform: none; } to { transform: translateY(-100%); } }
  @keyframes pad-nome-sobe { from { transform: translateY(105%); } to { transform: none; } }
  @keyframes pad-aparece { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pad-aparece-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes pad-previa-entra { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

  .pad-painel[open] .pad-painel-cortina { animation: pad-cortina-desce .9s var(--ease) both; }
  .pad-painel[open] .pad-painel-topo { animation: pad-aparece .6s var(--ease) .35s both; }
  .pad-painel[open] .pad-painel-linha > .pad-painel-texto { animation: pad-nome-sobe 1.1s var(--ease) both; }
  .pad-painel[open] li:nth-child(1) .pad-painel-texto { animation-delay: .38s; }
  .pad-painel[open] li:nth-child(2) .pad-painel-texto { animation-delay: .45s; }
  .pad-painel[open] li:nth-child(3) .pad-painel-texto { animation-delay: .52s; }
  .pad-painel[open] li:nth-child(4) .pad-painel-texto { animation-delay: .59s; }
  .pad-painel[open] .pad-painel-n,
  .pad-painel[open] .pad-painel-nav small { animation: pad-aparece .8s var(--ease) .7s both; }
  .pad-painel[open] .pad-painel-nav li { animation: pad-aparece .8s var(--ease) .4s both; }
  .pad-painel[open] .pad-painel-previas { animation: pad-previa-entra 1.4s var(--ease) .55s both; }
  .pad-painel[open] .pad-painel-base { animation: pad-aparece-sobe 1s var(--ease) .75s both; }

  /* o hover não pode brigar com a animação de entrada: depois dela, o
     transform volta a ser do hover */
  .pad-painel.is-pronto .pad-painel-linha > .pad-painel-texto { animation: none; }

  .pad-painel.is-fechando .pad-painel-cortina { animation: pad-cortina-sobe .75s cubic-bezier(.7, 0, .3, 1) .2s both; }
  .pad-painel.is-fechando .pad-painel-topo,
  .pad-painel.is-fechando .pad-painel-corpo,
  .pad-painel.is-fechando .pad-painel-base {
    animation: none;
    opacity: 0;
    transition: opacity .25s ease;
  }
}

/* com um painel ou uma gaveta aberta, a página atrás não rola */
html:has(.pad-painel[open]) { overflow: hidden; }

/* seção que recebe o foco vindo do menu: sem o contorno do teclado */
section[tabindex="-1"]:focus { outline: none; }

/* no celular, a linha de apoio desce para baixo do nome: lado a lado, ela
   espremia o nome até cortá-lo ("Seleçã") */
@media (max-width: 979px) {
  .pad-painel-nav a { grid-template-columns: 36px minmax(0, 1fr); row-gap: 6px; padding: 16px 0; }
  .pad-painel-nav small { grid-column: 2; text-align: left; }
}

/* ==========================================================================
   A FICHA, v2 (02/10/2026) — no nível do resto do site

   Uma foto por vez, grande, num palco; o painel ao lado acompanha a
   rolagem. Tocar na foto amplia em tela cheia. Estas regras vêm depois da
   ficha antiga e a substituem onde se cruzam.
   ========================================================================== */

.pad-ficha { padding: 28px 0 88px; gap: 28px; }

/* o caminho: Seleção / Tank 300 */
.pad-trilha {
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--margem);
  font: 500 11px/1 var(--texto);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-trilha a { color: var(--cor-calmo); text-decoration: none; transition: color var(--t-state) var(--ease); }
.pad-trilha a:hover { color: var(--cor-texto); }
.pad-trilha [aria-current] { color: var(--cor-texto); }

/* ---- o palco ---- */

.pad-ficha-galeria .pad-galeria { scroll-padding-inline-start: 0; }
.pad-ficha-galeria .pad-galeria ul { gap: 0; padding: 0; }
.pad-ficha-galeria .pad-galeria li { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.pad-ficha-galeria .pad-galeria a { display: block; overflow: hidden; }
.pad-ficha-galeria .pad-galeria img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
@media (hover: hover) {
  .pad-ficha-galeria .pad-galeria a:hover img { transform: scale(1.02); }
}
.pad-ficha-galeria .pad-galeria-controles { padding: 0 var(--margem); }

/* as miniaturas: só no computador; a acesa é a do palco */
.pad-miniaturas { display: none; }

/* ---- o painel ---- */

.pad-ficha-dados { padding: 0 var(--margem); }
.pad-ficha-nome { margin-top: 0; }

.pad-ficha .pad-portas { margin-top: 32px; }

@media (min-width: 980px) {
  .pad-ficha {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 80px;
    row-gap: 40px;
    padding: 40px 0 128px;
  }
  .pad-trilha { grid-column: 1 / -1; }
  .pad-ficha .pad-ficha-galeria { grid-column: 1; grid-row: 2; padding-left: var(--margem); }
  .pad-ficha .pad-ficha-dados {
    grid-column: 2; grid-row: 2;
    position: sticky; top: 104px;
    align-self: start;
    padding: 24px var(--margem) 0 0;
  }

  /* o palco cabe na tela: a foto nunca empurra o botão para fora dela */
  .pad-ficha-galeria .pad-galeria img {
    aspect-ratio: auto;
    height: clamp(460px, calc(100svh - 230px), 860px);
  }
  .pad-ficha-galeria .pad-galeria-controles { padding: 0; }

  .pad-miniaturas {
    display: flex; gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
  }
  .pad-miniaturas button {
    display: block;
    width: 64px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: .4;
    transition: opacity var(--t-state) var(--ease), transform var(--t-tap) var(--ease);
  }
  .pad-miniaturas button:hover { opacity: .8; }
  .pad-miniaturas button[aria-current] { opacity: 1; outline: 1px solid var(--cor-texto); outline-offset: 3px; }
  .pad-miniaturas button:active { transform: scale(.95); }
  .pad-miniaturas img { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; }
}

/* ---- a tela cheia ---- */

.pad-luz {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: rgba(5, 5, 6, .97);
  color: var(--cor-texto);
  overflow: hidden;
}
.pad-luz[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pad-luz::backdrop { background: rgba(5, 5, 6, .9); }

.pad-luz-topo {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
  padding: 0 var(--margem);
}
.pad-luz-trilho {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.pad-luz-trilho::-webkit-scrollbar { display: none; }
.pad-luz-trilho ul { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.pad-luz-trilho li {
  flex: 0 0 100%;
  display: grid; place-items: center;
  padding: 0 0 24px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.pad-luz-trilho picture { height: 100%; display: grid; place-items: center; }
.pad-luz-trilho img { width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 110px); object-fit: contain; }

.pad-luz-seta { display: none; }
@media (min-width: 980px) {
  .pad-luz-seta {
    position: absolute; top: 50%;
    display: grid;
    margin-top: -24px;
  }
  .pad-luz-seta--antes { left: var(--margem); }
  .pad-luz-seta--depois { right: var(--margem); }
}

@media (prefers-reduced-motion: no-preference) {
  .pad-luz[open] { animation: pad-aparece .5s var(--ease); }
  .pad-luz[open] .pad-luz-trilho { animation: pad-previa-entra .9s var(--ease); }
}
html:has(.pad-luz[open]) { overflow: hidden; }

/* ==========================================================================
   VOLTAR AO TOPO, FLUTUANTE (02/10/2026)

   Um círculo de vidro no canto. Entra depois da abertura (sobe e cresce),
   o anel se preenche conforme a página é lida, a seta rola no hover (sai
   por cima, a cópia entra por baixo — o mesmo gesto do botão vermelho) e,
   no fim da página, cutuca para cima. No hover ele se inverte: fundo claro,
   seta escura. Magnético com mouse (translate, no site.js).
   No celular fica acima do polegar, nunca por cima dele.
   ========================================================================== */

.pad-subir {
  position: fixed;
  right: 16px;
  bottom: calc(76px + 14px + env(safe-area-inset-bottom));
  z-index: 45;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(16, 16, 18, .72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--cor-texto);
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px) scale(.7);
  pointer-events: none;
  transition:
    opacity .5s var(--ease),
    transform .7s var(--ease),
    background-color .45s var(--ease),
    color .45s var(--ease);
}
.pad-subir.is-visivel { opacity: 1; transform: none; pointer-events: auto; }

/* o anel: o trilho apagado e o progresso por cima, começando no topo */
.pad-subir-anel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.pad-subir-anel circle { fill: none; stroke-width: 1.25; }
.pad-subir-trilho { stroke: rgba(255, 255, 255, .14); }
.pad-subir-progresso {
  stroke: currentColor;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 0));
  stroke-linecap: round;
  transition: stroke .45s var(--ease);
}

/* a seta: duas, uma sobre a outra, numa fenda */
.pad-subir-seta {
  position: relative;
  display: block;
  height: 18px;
  overflow: hidden;
  font: 400 16px/18px var(--texto);
}
.pad-subir-seta i {
  display: block;
  font-style: normal;
  transition: transform .55s var(--ease);
}

@media (hover: hover) {
  .pad-subir:hover { background: var(--cor-texto); color: var(--cor-fundo); }
  .pad-subir:hover .pad-subir-trilho { stroke: rgba(9, 9, 10, .12); }
  .pad-subir:hover .pad-subir-seta i { transform: translateY(-100%); }
}
.pad-subir:active { transform: scale(.94); }

@media (prefers-reduced-motion: no-preference) {
  /* no fim da página, a seta cutuca: "volta?" */
  @keyframes pad-cutuca { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }
  .pad-subir.is-fim:not(:hover) .pad-subir-seta { animation: pad-cutuca 1.8s var(--ease) infinite; }

  /* subindo: o anel gira uma volta enquanto a página corre */
  @keyframes pad-gira { to { transform: rotate(270deg); } }
  .pad-subir.is-subindo .pad-subir-anel { animation: pad-gira .9s var(--ease); }
}

@media (min-width: 980px) {
  .pad-subir { right: 32px; bottom: 32px; width: 58px; height: 58px; }
}

/* ==========================================================================
   PRIVACIDADE (/privacidade/) — o mesmo índice numerado dos compromissos
   ========================================================================== */

.pad-privacidade { padding: 72px var(--margem) 112px; }
.pad-privacidade-topo { max-width: 900px; }
.pad-privacidade-lista { margin: 72px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--cor-fio); }
.pad-privacidade-lista li {
  display: grid;
  gap: 16px;
  padding: 36px 0 40px;
  border-top: 1px solid var(--cor-fio);
}
.pad-privacidade-lista h2 {
  margin: 0 0 14px;
  font: 300 clamp(24px, 2.4vw, 34px)/1.1 var(--titulo);
  letter-spacing: -.03em;
  color: var(--cor-texto);
}
.pad-privacidade-lista p {
  max-width: 62ch;
  font: 400 16px/1.7 var(--texto);
  color: var(--cor-calmo);
}
.pad-privacidade-lista p + p { margin-top: 12px; }
.pad-privacidade-lista strong { font-weight: 500; color: var(--cor-texto); }
.pad-privacidade-lista .pad-compromisso-n { font-size: 44px; }
.pad-privacidade-fim { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; margin-top: 56px; }

.pad-pedido-nota a,
.pad-rodape-base a { color: inherit; text-underline-offset: 3px; }
.pad-pedido-nota a:hover,
.pad-rodape-base a:hover { color: var(--cor-texto); }

@media (min-width: 980px) {
  .pad-privacidade { padding: 120px var(--margem) 160px; }
  .pad-privacidade-lista li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 10fr); gap: 48px; padding: 48px 0 52px; }
  .pad-privacidade-lista .pad-compromisso-n { font-size: clamp(56px, 5vw, 88px); }
}

/* ==========================================================================
   RECEBER OFERTAS (§4, porta 7) — o primeiro andar do rodapé
   ========================================================================== */

.pad-ofertas {
  display: grid;
  gap: 36px;
  padding-bottom: 64px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--cor-fio);
}
.pad-ofertas .pad-titulo span { display: block; color: var(--cor-calmo); }

/* o aceite: caixa de verdade (nunca vem marcada), desenhada no registro da
   casa — um quadrado de fio que, marcado, se enche e mostra o visto */
.pad-aceite {
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 52ch;
  font: 400 14px/1.55 var(--texto);
  color: var(--cor-calmo);
  cursor: pointer;
}
.pad-aceite input {
  flex: 0 0 22px;
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r);
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.pad-aceite input::after {
  content: '';
  width: 10px; height: 5px;
  border: solid var(--cor-fundo);
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform .35s var(--ease);
}
.pad-aceite input:checked { background: var(--cor-texto); border-color: var(--cor-texto); }
.pad-aceite input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.pad-aceite input:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 3px; }
.pad-aceite:hover input { border-color: var(--cor-texto); }

/* na ficha, perto do preço */
.pad-avise {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font: 400 13px/1.4 var(--texto);
  color: var(--cor-calmo);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .25);
  text-underline-offset: 4px;
  transition: color var(--t-state) var(--ease);
}
.pad-avise i { font-style: normal; transition: transform .5s var(--ease); }
.pad-avise:hover { color: var(--cor-texto); }
.pad-avise:hover i { transform: translateY(3px); }

@media (min-width: 980px) {
  .pad-ofertas {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    padding-bottom: 96px;
    margin-bottom: 80px;
  }
}

/* ==========================================================================
   A FICHA, v3 — O PAINEL EM BLOCOS (02/10/2026)

   Pedido do usuário: "o conteúdo parece uma bagunça, tudo só em texto,
   onde estão os cards, as micro interações, o design premium?". O painel
   virou sete blocos, cada um com uma função, e cada um responde ao toque:
   cartões que sobem, ícones que se mexem, uma luz que passa pelo preço.
   No computador, agora é a GALERIA que fica parada ao rolar (o painel
   ficou mais alto que a tela, e um painel fixo esconderia o fim dele).
   ========================================================================== */

.pad-ficha .pad-ficha-dados { display: grid; gap: 18px; align-content: start; }

/* ícone base: traço fino, cor do texto calmo */
.pad-icone { display: block; width: 20px; height: 20px; color: var(--cor-calmo); flex: none; transition: color var(--t-state) var(--ease), transform .5s var(--ease); }

/* a amostra da cor: um disco com brilho, como uma gota de tinta */
.pad-amostra {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .7), transparent 42%),
    var(--cor-carro, #888);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 0, 0, .4);
  flex: none;
}
.pad-amostra--grande { width: 22px; height: 22px; }

/* ---- 1. cabeçalho ---- */
.pad-ficha-cabeca { padding-bottom: 6px; }
.pad-ficha-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.pad-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  font: 400 13px/1 var(--texto);
  color: var(--cor-texto);
  transition: border-color var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
}
.pad-tag .pad-icone { width: 15px; height: 15px; }
.pad-tag:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .03); }
.pad-tag:hover .pad-icone { color: var(--cor-texto); }

/* ---- os cartões: uma superfície só para o painel inteiro ---- */
.pad-preco-cartao,
.pad-atalho,
.pad-tecnica-item,
.pad-ficha-loja {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  transition: border-color .45s var(--ease), background-color .45s var(--ease), transform .55s var(--ease);
}
.pad-cartao-rotulo {
  margin: 0 0 12px;
  font: 500 10px/1.4 var(--texto);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}

/* ---- 2. o preço: um cartão com uma luz que passa no hover ---- */
.pad-preco-cartao {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 0;
}
.pad-preco-cartao::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .07) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pad-preco-cartao:hover::before { transform: translateX(110%); transition: transform 1.3s var(--ease); }
}
.pad-preco-cartao:hover { border-color: rgba(255, 255, 255, .16); }
.pad-preco-cartao .pad-preco { margin: 0; }
.pad-preco-cartao .pad-preco--consulta { color: var(--cor-texto); font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -.035em; }
.pad-cartao-apoio { margin-top: 8px; font: 400 13px/1.5 var(--texto); color: var(--cor-calmo); }
.pad-preco-cartao .pad-regua { margin-top: 20px; }

/* o "avise-me" mora no pé do cartão; o sino balança no hover */
.pad-preco-cartao .pad-avise {
  display: flex; align-items: center; gap: 10px;
  margin: 22px -26px 0;
  padding: 16px 26px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  text-decoration: none;
  font-size: 13px;
  color: var(--cor-calmo);
  transition: color var(--t-state) var(--ease), background-color var(--t-state) var(--ease);
}
.pad-preco-cartao .pad-avise .pad-icone { width: 17px; height: 17px; transform-origin: 50% 15%; }
.pad-preco-cartao .pad-avise i { margin-left: auto; }
.pad-preco-cartao .pad-avise:hover { color: var(--cor-texto); background: rgba(255, 255, 255, .025); }
.pad-preco-cartao .pad-avise:hover .pad-icone { color: var(--cor-texto); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pad-sino { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
  .pad-preco-cartao .pad-avise:hover .pad-icone { animation: pad-sino .9s var(--ease); }
}

/* ---- 3. as ações: largas, lado a lado no computador ---- */
.pad-ficha-acoes { display: grid; gap: 10px; }
.pad-ficha-acoes .pad-btn { width: 100%; justify-content: center; }
.pad-btn--contorno {
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  font: 500 14px/1 var(--texto);
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--cor-texto);
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform var(--t-tap) var(--ease);
}
@media (hover: hover) {
  .pad-btn--contorno:hover { background: var(--cor-texto); border-color: var(--cor-texto); color: var(--cor-fundo); }
}

/* ---- 4. atalhos: linhas-cartão com ícone num círculo ---- */
.pad-atalhos { display: grid; gap: 8px; }
.pad-atalho {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px 14px 14px;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--cor-texto);
  cursor: pointer;
}
.pad-atalho[hidden] { display: none; }
.pad-atalho > .pad-icone:first-child {
  width: 42px; height: 42px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .55s var(--ease);
}
.pad-atalho-texto b { display: block; font: 500 14px/1.3 var(--texto); }
.pad-atalho-texto small { display: block; margin-top: 3px; font: 400 12px/1.4 var(--texto); color: var(--cor-calmo); }
.pad-atalho-seta .pad-icone { width: 18px; height: 18px; }
@media (hover: hover) {
  .pad-atalho:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .2); background-color: rgba(255, 255, 255, .03); }
  .pad-atalho:hover > .pad-icone:first-child { background: var(--cor-texto); border-color: var(--cor-texto); color: var(--cor-fundo); transform: rotate(-8deg); }
  .pad-atalho:hover .pad-atalho-seta .pad-icone { transform: translateX(4px); color: var(--cor-texto); }
}
.pad-atalho:active { transform: scale(.985); }
.pad-atalho.is-feito > .pad-icone:first-child { background: var(--cor-texto); color: var(--cor-fundo); }

/* ---- 5. ficha técnica em blocos ---- */
.pad-ficha-bloco { margin-top: 14px; }
.pad-tecnica {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.pad-tecnica-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px; row-gap: 4px;
  padding: 16px;
}
.pad-tecnica-item > .pad-icone,
.pad-tecnica-item > .pad-amostra { grid-row: span 2; }
.pad-tecnica-item > .pad-icone { width: 22px; height: 22px; }
.pad-tecnica-item dt {
  font: 500 10px/1.3 var(--texto);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cor-calmo);
}
.pad-tecnica-item dd { margin: 0; font: 300 18px/1.2 var(--titulo); letter-spacing: -.02em; color: var(--cor-texto); }
@media (hover: hover) {
  .pad-tecnica-item:hover { border-color: rgba(255, 255, 255, .2); transform: translateY(-2px); }
  .pad-tecnica-item:hover > .pad-icone { color: var(--cor-texto); transform: scale(1.12) rotate(-6deg); }
}

/* ---- 6. garantias ---- */
.pad-garantias { margin: 0; padding: 0; list-style: none; }
.pad-garantias li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--cor-fio);
}
.pad-garantias li:last-child { border-bottom: 1px solid var(--cor-fio); }
.pad-garantias .pad-icone {
  width: 42px; height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: var(--cor-texto);
}
.pad-garantias b { display: block; font: 500 14px/1.3 var(--texto); }
.pad-garantias small { display: block; margin-top: 3px; font: 400 13px/1.45 var(--texto); color: var(--cor-calmo); }
.pad-garantias li.is-destaque .pad-icone { background: rgba(232, 17, 42, .12); color: var(--vermelho); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pad-garantias li:hover .pad-icone { transform: scale(1.08); }
}

/* ---- 7. a loja: onde o carro está, com o horário ao vivo ---- */
.pad-ficha-loja {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 16px 18px 16px 14px;
  text-decoration: none;
  color: var(--cor-texto);
}
.pad-ficha-loja > .pad-icone { width: 42px; height: 42px; padding: 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; }
.pad-ficha-loja-texto b { display: block; font: 500 14px/1.3 var(--texto); }
.pad-ficha-loja-texto .pad-aberto { margin-top: 6px; font-size: 10px; }
.pad-ficha-loja-acao {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10px/1 var(--texto);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cor-calmo);
  white-space: nowrap;
}
.pad-ficha-loja-acao .pad-icone { width: 16px; height: 16px; }
@media (hover: hover) {
  .pad-ficha-loja:hover { border-color: rgba(255, 255, 255, .2); transform: translateY(-2px); }
  .pad-ficha-loja:hover .pad-ficha-loja-acao,
  .pad-ficha-loja:hover .pad-ficha-loja-acao .pad-icone { color: var(--cor-texto); }
  .pad-ficha-loja:hover .pad-ficha-loja-acao .pad-icone { transform: translateX(4px); }
  .pad-ficha-loja:hover > .pad-icone { color: var(--cor-texto); }
}

/* entrada do painel: os blocos sobem em cascata */
@media (prefers-reduced-motion: no-preference) {
  .pad-ficha-dados > [data-revela]:nth-child(2) { transition-delay: .06s; }
  .pad-ficha-dados > [data-revela]:nth-child(3) { transition-delay: .12s; }
  .pad-ficha-dados > [data-revela]:nth-child(4) { transition-delay: .18s; }
  .pad-ficha-dados > [data-revela]:nth-child(5) { transition-delay: .24s; }
}

@media (max-width: 400px) {
  .pad-ficha-loja { grid-template-columns: 42px minmax(0, 1fr); }
  .pad-ficha-loja-acao { grid-column: 2; }
}

@media (min-width: 980px) {
  .pad-ficha-acoes { grid-template-columns: 1fr 1fr; }
  /* a galeria fica parada enquanto o painel, mais alto, rola ao lado */
  .pad-ficha .pad-ficha-dados { position: static; }
  .pad-ficha .pad-ficha-galeria { position: sticky; top: 96px; align-self: start; }
}

/* número ímpar de itens: o último ocupa a linha inteira, sem buraco */
.pad-tecnica-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ==========================================================================
   VISTORIA E CELULAR (02/10/2026)

   Pedido do usuário: "uma vistoria, um debug e uma otimização no site
   inteiro… adapte e otimize perfeitamente para dispositivos móveis". O que
   a auditoria (script em 320, 375, 768, 1280 px) apontou, e o acerto:
   · rótulos de 10 px: abaixo do legível num celular — mínimo 11 px;
   · alvos de toque de 14–24 px (links do rodapé, logo): mínimo 44 px de
     área tocável, sem mudar o desenho (a área cresce para dentro do vão);
   · a Seleção no celular é uma tira que desliza e nada dizia isso: um fio
     de progresso embaixo;
   · as pílulas quebravam em linhas tortas ("De R$ 120 a 200 mil" sozinha):
     no celular viram uma grade de 2 ou 3 colunas iguais.
   ========================================================================== */

/* ---- tamanho mínimo de letra ---- */
.pad-cartao-marca,
.pad-cartao-rotulo,
.pad-tecnica-item dt,
.pad-ficha-loja-texto .pad-aberto,
.pad-ficha-loja-acao,
.pad-painel-nav small { font-size: 11px; }

/* ---- área de toque ---- */
.pad-barra-marca,
.pad-rodape-marca { display: inline-flex; align-items: center; min-height: 44px; }
.pad-rodape-colunas > * { gap: 0; }
.pad-rodape-colunas a { display: inline-flex; align-items: center; min-height: 44px; }
.pad-rodape-colunas .pad-loja-rotulo { margin-bottom: 4px; }
.pad-rodape-base a,
.pad-pedido-nota a { display: inline-block; padding: 14px 0; margin: -14px 0; }

/* ---- o fio de progresso da Seleção ---- */
.pad-selecao-progresso {
  position: relative;
  height: 2px;
  margin: 28px var(--margem) 0;
  background: var(--cor-fio);
  overflow: hidden;
}
.pad-selecao-progresso[hidden] { display: none; }
.pad-selecao-progresso span {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(100% / var(--n, 4));
  background: var(--cor-texto);
  transform: translateX(calc(var(--p, 0) * (var(--n, 4) - 1) * 100%));
  transition: transform .2s linear;
}
@media (min-width: 980px) {
  .pad-selecao-progresso { display: none; }
}

/* ---- pílulas em grade no celular ---- */
@media (max-width: 979px) {
  .pad-pilulas > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pad-pilulas > div:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pad-pilula { display: block; }
  .pad-pilula span {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    padding: 10px 8px;
    text-align: center;
    line-height: 1.25;
  }
  .pad-pilula small { flex-basis: 100%; }
  /* as duas ações da ficha e a base dos formulários: largura inteira */
  .pad-pedido-fim .pad-btn { width: 100%; justify-content: center; }
}

/* ---- respiros no celular ---- */
@media (max-width: 979px) {
  .pad-detalhe { padding-bottom: 88px; }
  .pad-detalhe-par { gap: 48px; margin-top: 56px; }
  .pad-manifesto { padding-top: 80px; padding-bottom: 88px; }
  .pad-compromissos { margin-top: 56px; }
  .pad-loja-grade { margin-top: 64px; }
  /* o botão flutuante, menor, para cobrir menos */
  .pad-subir { width: 48px; height: 48px; }
}

/* ==========================================================================
   A BARRA, v3 (02/10/2026)

   Dois pedidos do usuário:
   · "a rolagem deve ser suave quando clicamos no menu" — toda âncora da
     página desliza, e para um pouco abaixo da barra (scroll-padding), para
     o título da seção não nascer escondido atrás dela;
   · "não gosto dessas cores diferentes entre o menu e o hero" — a barra
     ficava sobre o fundo da página (#09090A) e o hero começava 72 px
     abaixo, num preto mais fundo (#050506): uma faixa de outra cor no topo.
     Agora o hero sobe por baixo da barra: um preto só, do topo da tela ao
     carro, e a luz do salão cai desde o alto. A barra fica transparente
     sobre ele e só ganha o vidro ao rolar;
   · e os links "miúdos e perdidos" viraram uma cápsula de vidro no centro
     da barra, com uma pílula de luz que desliza até o link sob o mouse e
     repousa na seção atual, marcada por um ponto vermelho.
   ========================================================================== */

html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- o hero por baixo da barra ---- */
#conteudo > .pad-abertura:first-child {
  margin-top: -72px;
  padding-top: calc(72px + 44px);
}
@media (min-width: 980px) {
  #conteudo > .pad-abertura:first-child {
    min-height: 100svh;
    padding-top: calc(72px + 40px);
  }
}

/* ---- a cápsula ---- */
@media (min-width: 980px) {
  .pad-menu {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 2px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    background: rgba(22, 22, 25, .5);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px -12px rgba(0, 0, 0, .6);
  }
  .pad-menu a {
    position: relative;
    z-index: 1;
    padding: 11px 20px;
    border-radius: 999px;
    font: 500 13px/1 var(--texto);
    letter-spacing: .01em;
    color: var(--cor-calmo);
    transition: color .45s var(--ease);
  }
  .pad-menu a::after { display: none; }
  .pad-menu a:hover,
  .pad-menu a.is-atual { color: var(--cor-texto); }
  .pad-menu a:focus-visible { outline-offset: 2px; }

  /* a pílula de luz */
  .pad-menu-indicador {
    position: absolute;
    left: 0; top: 5px; bottom: 5px;
    width: var(--w, 0);
    transform: translateX(var(--x, 0));
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    opacity: 0;
    pointer-events: none;
    transition: transform .6s var(--ease), width .6s var(--ease), opacity .35s var(--ease);
  }
  .pad-menu.tem-indicador .pad-menu-indicador { opacity: 1; }
  /* "você está aqui": um ponto vermelho sob a seção atual */
  .pad-menu-indicador::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -9px;
    width: 4px; height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--vermelho);
    opacity: 0;
    transform: scale(0);
    transition: opacity .35s var(--ease), transform .45s var(--ease);
  }
  .pad-menu-indicador.is-aqui::after { opacity: 1; transform: none; }

  /* com a barra em vidro (rolada), a cápsula não precisa de vidro próprio */
  .pad-barra.is-rolada .pad-menu { background: rgba(255, 255, 255, .03); box-shadow: none; }
}

/* ==========================================================================
   UM MENU SÓ, E O "ABERTO AGORA" ONDE ELE SERVE (02/10/2026)

   Pedido do usuário: "tem necessidade de termos 2 menus?" — não tem. No
   computador, a cápsula da barra já leva às quatro seções: o botão "Menu"
   (e o painel de tela cheia) ficam só no celular, onde a cápsula não cabe.
   E o "aberto agora", que estava escondido no painel, foi para onde ajuda
   a decidir: na barra fixa, ao lado do WhatsApp (computador) e como um
   ponto verde no botão do WhatsApp do polegar (celular).
   ========================================================================== */

@media (min-width: 980px) {
  .pad-barra .pad-menu-botao { display: none; }
}

/* o selo da barra: só onde há espaço ao lado da cápsula */
.pad-aberto--barra { display: none; }
@media (min-width: 1200px) {
  .pad-aberto--barra:not([hidden]) {
    display: inline-flex;
    margin: 0;
    padding: 9px 14px 9px 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    font: 500 10px/1 var(--texto);
    letter-spacing: .18em;
    white-space: nowrap;
    color: var(--cor-calmo);
  }
  .pad-aberto--barra.is-aberto { color: var(--cor-texto); border-color: rgba(61, 220, 132, .28); }
}

/* o ponto do polegar: o texto some (fica para o leitor de tela), o ponto
   verde aparece no botão do WhatsApp quando a loja está aberta */
.pad-aberto--ponto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   CELULAR: SEM POLEGAR, BARRA EM CÁPSULA (02/10/2026)

   Pedido do usuário: a barra de baixo (Test-drive | WhatsApp) "está
   horrendo, podemos tirar 100%"; em cima, "o menu pegajoso móvel mega
   elegante"; embaixo, "somente um botão elegante de voltar ao topo", que
   é pegajoso.

   No topo da abertura a barra é transparente. Ao rolar, ela vira uma
   CÁPSULA DE VIDRO FLUTUANTE, solta das bordas: o logo, o WhatsApp a um
   toque (com o ponto verde quando a loja está aberta) e o Menu.
   ========================================================================== */

/* sem a barra do polegar, o corpo não reserva mais espaço embaixo */
body.pad-site { padding-bottom: 0; }

/* o WhatsApp da cápsula: só no celular (no computador, o link escrito) */
.pad-barra-zap { display: none; }

@media (max-width: 979px) {
  .pad-barra { padding: 0 22px; }

  /* o vidro vira cápsula: recolhido das bordas, cantos redondos, e entra
     crescendo um nada, como uma gota que se forma */
  .pad-barra::before {
    inset: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(18, 18, 20, .72);
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
    transform: scale(.94);
    transition: opacity .45s var(--ease), transform .6s var(--ease);
  }
  .pad-barra.is-rolada::before { transform: none; }
  /* o fio de leitura acompanha a cápsula, por dentro dela, embaixo */
  .pad-progresso { left: 34px; right: 34px; bottom: 9px; height: 1px; opacity: 0; transition: opacity .4s var(--ease); }
  .pad-barra.is-rolada .pad-progresso { opacity: .8; }

  .pad-barra-portas { gap: 6px; }
  .pad-barra-zap {
    position: relative;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    color: var(--cor-texto);
    transition: background-color var(--t-state) var(--ease), transform var(--t-tap) var(--ease);
  }
  .pad-barra-zap .pad-icone { width: 21px; height: 21px; color: var(--cor-texto); }
  .pad-barra-zap:active { transform: scale(.92); background: rgba(255, 255, 255, .08); }
  /* o ponto verde do "aberto agora", no canto do ícone */
  .pad-barra-zap:has(.pad-aberto--ponto.is-aberto)::after {
    content: '';
    position: absolute; top: 10px; right: 9px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #3DDC84;
    box-shadow: 0 0 0 2px rgba(18, 18, 20, .9);
  }
  .pad-menu-botao { padding: 0 6px 0 10px; }
  .pad-barra.is-rolada .pad-barra-marca img { transform: scale(.9); }

  /* o voltar ao topo: o único elemento fixo embaixo, no canto */
  .pad-subir {
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 52px; height: 52px;
  }
}

/* no toque, a foto acende quando chega ao centro (site.js, 3.5d): o mesmo
   resultado do hover, sem precisar de mouse */
.pad-cartao.is-acesa .pad-cartao-foto::after { opacity: .3; }
.pad-modelo.is-acesa .pad-modelo-foto::after { opacity: .25; }
.pad-cartao.is-acesa .pad-cartao-n { color: var(--cor-texto); }
.pad-cartao-foto::after,
.pad-modelo-foto::after { transition: opacity 1s var(--ease); }

/* ==========================================================================
   O WHATSAPP DA BARRA — a cápsula gêmea da navegação (02/10/2026, v2)

   A v1 (círculo branco + a frase do horário) "não ficou refinado nem
   combinando com a página", disse o usuário: gritava mais que o resto da
   barra. Agora é da mesma família da navegação — a mesma cápsula de vidro,
   a mesma pílula de luz por dentro, a mesma letra dos links. O horário
   virou um ponto junto ao ícone (verde respirando quando a loja está
   aberta, cinza quando fechada), e a frase inteira desce numa dica quando
   o mouse passa — ou quando o teclado chega nele.
   ========================================================================== */

.pad-barra-whats { display: none; }

@media (min-width: 980px) {
  .pad-barra-whats {
    position: relative;
    display: inline-flex;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    background: rgba(22, 22, 25, .5);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px -12px rgba(0, 0, 0, .6);
    text-decoration: none;
    color: var(--cor-texto);
  }
  .pad-barra.is-rolada .pad-barra-whats { background: rgba(255, 255, 255, .03); box-shadow: none; }

  /* a pílula de luz, a mesma da navegação */
  .pad-barra-whats-texto {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9.5px 20px 9.5px 16px;   /* o ícone (16 px) é mais alto que a letra: a pílula fica com a altura exata das da navegação */
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
  }
  .pad-barra-whats-texto b { font: 500 13px/1 var(--texto); letter-spacing: .01em; }

  /* o ícone, fino, com o ponto do horário no canto */
  .pad-barra-whats-icone {
    position: relative;
    display: block;
    order: -1;
    width: 16px; height: 16px;
    background: none;
    transition: transform .6s var(--ease);
  }
  .pad-barra-whats-icone .pad-icone { width: 16px; height: 16px; color: var(--cor-texto); }
  .pad-barra-whats-icone::after {
    content: '';
    position: absolute; top: -3px; right: -4px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #5A5A5F;
    box-shadow: 0 0 0 2px #1B1B1E;
  }
  .pad-barra-whats:has(.pad-aberto--whats.is-aberto) .pad-barra-whats-icone::after { background: #3DDC84; }

  /* a dica: a frase inteira do horário, que desce no hover */
  .pad-aberto--whats {
    position: absolute;
    top: calc(100% + 10px); right: 0;
    display: block;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(18, 18, 20, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font: 500 10px/1 var(--texto);
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cor-calmo);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .35s var(--ease), transform .5s var(--ease);
  }
  .pad-aberto--whats[hidden] { display: none; }
  .pad-aberto--whats::before { display: none; }
  .pad-aberto--whats.is-aberto { color: #7BE3A8; }
  .pad-barra-whats:hover .pad-aberto--whats,
  .pad-barra-whats:focus-visible .pad-aberto--whats { opacity: 1; transform: none; }

  @media (hover: hover) {
    .pad-barra-whats:hover .pad-barra-whats-texto { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
    .pad-barra-whats:hover .pad-barra-whats-icone { transform: rotate(-10deg); }
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 980px) {
  .pad-barra-whats:has(.pad-aberto--whats.is-aberto) .pad-barra-whats-icone::after { animation: pad-respira 2.2s ease-out infinite; }
}

/* ==========================================================================
   INSTAGRAM (20/10/2026) — boa parte da publicidade da loja está lá.
   Cinco lugares, cada um no registro do que está em volta: o círculo de
   vidro na barra (computador), a faixa "No Instagram" antes da loja, o
   cartão na ficha do carro, o rodapé e o menu do celular. Nada aparece
   enquanto dados/loja.php não tiver o perfil (pad_instagram).
   ========================================================================== */

/* ---- a barra: um círculo do mesmo vidro da cápsula do WhatsApp ---- */
.pad-barra-insta { display: none; }
@media (min-width: 980px) {
  .pad-barra-insta {
    position: relative;
    display: inline-grid; place-items: center;
    width: 47px; height: 47px;
    margin-right: -16px;   /* junto da cápsula do WhatsApp: um par, não dois botões soltos */
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    background: rgba(22, 22, 25, .5);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px -12px rgba(0, 0, 0, .6);
    color: var(--cor-texto);
    transition: background-color .45s var(--ease), border-color .45s var(--ease);
  }
  .pad-barra.is-rolada .pad-barra-insta { background: rgba(255, 255, 255, .03); box-shadow: none; }
  .pad-barra-insta .pad-icone { width: 17px; height: 17px; transition: transform .6s var(--ease); }
  .pad-barra-dica {
    position: absolute; top: calc(100% + 10px); right: 50%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(18, 18, 20, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font: 500 10px/1 var(--texto);
    letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
    color: var(--cor-calmo);
    opacity: 0; transform: translate(50%, -6px);
    pointer-events: none;
    transition: opacity .35s var(--ease), transform .5s var(--ease);
  }
  .pad-barra-insta:hover .pad-barra-dica,
  .pad-barra-insta:focus-visible .pad-barra-dica { opacity: 1; transform: translate(50%, 0); }
  @media (hover: hover) {
    .pad-barra-insta:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); }
    .pad-barra-insta:hover .pad-icone { transform: rotate(-10deg) scale(1.06); }
  }
}

/* ---- a faixa "No Instagram" ---- */
.pad-insta {
  display: grid; gap: 56px; align-items: center;
  overflow: hidden;
}
.pad-insta-texto { padding: 0 var(--margem); }
.pad-insta-texto .pad-titulo span { color: var(--cor-calmo); }
.pad-insta .pad-portas { margin-top: 36px; }
.pad-insta-botao { display: inline-flex; align-items: center; gap: 12px; }
.pad-insta-botao .pad-icone { width: 18px; height: 18px; }
.pad-insta-botao b { font-weight: 500; letter-spacing: .01em; }
.pad-insta-botao span { font-weight: 400; }

/* três quadros no formato do Instagram (4:5), em leque */
.pad-insta-leque {
  position: relative;
  display: flex; justify-content: center;
  aspect-ratio: 1 / .78;   /* a altura acompanha os quadros: o selo fica logo abaixo deles */
  max-height: 520px;
  margin: 0 var(--margem);
  text-decoration: none;
}
.pad-insta-quadro {
  position: absolute; top: 6%;
  width: 46%; max-width: 280px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #121214;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85);
  transition: transform .9s var(--ease), filter .9s var(--ease);
}
.pad-insta-quadro picture, .pad-insta-quadro img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pad-insta-quadro:nth-child(1) { transform: translateX(-46%) rotate(-7deg); filter: brightness(.62); }
.pad-insta-quadro:nth-child(2) { z-index: 2; transform: translateY(-4%); }
.pad-insta-quadro:nth-child(3) { transform: translateX(46%) rotate(7deg); filter: brightness(.62); }
.pad-insta-selo {
  position: absolute; z-index: 3; bottom: 0; left: 50%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(18, 18, 20, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font: 500 11px/1 var(--texto); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cor-texto);
  transform: translateX(-50%);
  white-space: nowrap;
}
.pad-insta-selo .pad-icone { width: 15px; height: 15px; }

@media (min-width: 980px) {
  .pad-insta { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4vw; }
  .pad-insta-leque { aspect-ratio: 1 / .72; margin: 0 var(--margem) 0 0; }
  .pad-insta-quadro { width: 44%; }
  @media (hover: hover) {
    .pad-insta-leque:hover .pad-insta-quadro:nth-child(1) { transform: translateX(-62%) rotate(-10deg); filter: brightness(.8); }
    .pad-insta-leque:hover .pad-insta-quadro:nth-child(2) { transform: translateY(-7%) scale(1.03); }
    .pad-insta-leque:hover .pad-insta-quadro:nth-child(3) { transform: translateX(62%) rotate(10deg); filter: brightness(.8); }
  }
}
/* no celular, o leque abre quando entra na tela (o mesmo .is-acesa das fotos) */
@media not all and (hover: hover) {
  .pad-insta-leque.is-acesa .pad-insta-quadro:nth-child(1),
  .pad-insta-leque.is-acesa .pad-insta-quadro:nth-child(3) { filter: brightness(.82); }
}
@media (prefers-reduced-motion: reduce) {
  .pad-insta-quadro, .pad-barra-insta .pad-icone { transition: none; }
}

/* ---- o menu do celular ---- */
.pad-painel-base a.pad-painel-insta {
  display: flex; align-items: center; gap: 10px;
  width: max-content;
  min-height: 44px;
  margin-top: 4px;
}
.pad-painel-insta .pad-icone { width: 17px; height: 17px; }

/* ==========================================================================
   DÚVIDAS — Lavytier Intellect (23/10/2026)
   Uma lista de fios, no registro do resto: número miúdo, pergunta em peso
   leve, um "+" de dois traços que vira "−". No computador, o título fica
   parado à esquerda enquanto a lista rola.
   ========================================================================== */
.pad-duvidas { display: grid; gap: 40px; }
.pad-duvidas-topo { padding: 0 var(--margem); }
.pad-duvidas-topo .pad-titulo span { color: var(--cor-calmo); }
.pad-duvidas-lista { padding: 0 var(--margem); border-top: 0; }

.pad-duvida { border-bottom: 1px solid var(--cor-fio); }
.pad-duvida:first-child { border-top: 1px solid var(--cor-fio); }
.pad-duvida summary {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 12px;
  min-height: 64px;
  padding: 18px 0;
  list-style: none;
  cursor: pointer;
}
.pad-duvida summary::-webkit-details-marker { display: none; }
.pad-duvida-n { font: 500 11px/1 var(--texto); letter-spacing: .14em; color: var(--cor-calmo); }   /* mono só no dinheiro */
.pad-duvida-pergunta {
  font: 400 clamp(17px, 1.5vw, 21px)/1.35 var(--titulo);
  letter-spacing: -.012em;
  color: var(--cor-texto);
  transition: color .4s var(--ease);
}
.pad-duvida-sinal { position: relative; width: 14px; height: 14px; justify-self: end; }
.pad-duvida-sinal::before, .pad-duvida-sinal::after {
  content: ''; position: absolute; top: 50%; left: 0;
  width: 14px; height: 1px; background: var(--cor-texto);
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.pad-duvida-sinal::after { transform: rotate(90deg); }
.pad-duvida[open] .pad-duvida-sinal::after { transform: rotate(0); opacity: 0; }
.pad-duvida[open] .pad-duvida-sinal::before { background: var(--vermelho); }
.pad-duvida-resposta { padding: 0 0 24px 46px; }
.pad-duvida-resposta p {
  max-width: 62ch; margin: 0;
  font: 400 15px/1.7 var(--texto);
  color: var(--cor-calmo);
}
.pad-duvida[open] .pad-duvida-resposta { animation: pad-duvida-abre .6s var(--ease); }
@keyframes pad-duvida-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pad-duvida summary:focus-visible { outline: 1px solid var(--cor-texto); outline-offset: 4px; }
@media (hover: hover) {
  .pad-duvida summary:hover .pad-duvida-pergunta { color: #fff; }
  .pad-duvida:not([open]) summary:hover .pad-duvida-pergunta { color: var(--cor-calmo); }
}

@media (min-width: 980px) {
  .pad-duvidas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4vw; align-items: start; }
  .pad-duvidas-topo { position: sticky; top: 120px; }
  .pad-duvidas-lista { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pad-duvida[open] .pad-duvida-resposta { animation: none; }
}

/* ---- rodapé no celular: o Instagram (@padraoautomoveisoficial) não cabe
   em meia coluna e alargava a página (23/10/2026). O Contato desce para uma
   linha inteira, embaixo de Site e Endereço; o número e o arroba ficam
   abaixo do nome do canal. ---- */
@media (max-width: 979px) {
  .pad-rodape-colunas { grid-template-areas: "site endereco" "contato contato"; }
  .pad-rodape-colunas > nav { grid-area: site; }
  .pad-rodape-colunas > div:nth-of-type(1) { grid-area: contato; }
  .pad-rodape-colunas > div:nth-of-type(2) { grid-area: endereco; }
}
.pad-rodape-colunas a:has(.pad-numero) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 6px 0; }
.pad-rodape-colunas .pad-numero { max-width: 100%; overflow-wrap: anywhere; }   /* só quebra se nem a linha inteira couber */

/* ---- a faixa do Instagram em tela estreita (23/10/2026): o arroba inteiro
   não cabe no botão abaixo de ~400px; lá ele diz "Seguir no Instagram" e
   o arroba continua no selo, logo abaixo das fotos. ---- */
@media (max-width: 979px) { .pad-insta { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) {
  .pad-insta-botao b { display: none; }
  .pad-insta-botao span::after { content: 'no Instagram'; }
}