/* ==========================================================
   CSC VENDA DIRETA — "Concierge"
   Design system editorial premium: cream + navy + ouro.
   Selectores mantidos compatíveis com js/app.js.
   Camada de movimento em js/motion.js (GSAP).
   ========================================================== */

:root{
  /* ==========================================================
     DOIS TEMAS
     Os valores do ESCURO ficam aqui em cima, com prefixo --d-, definidos
     uma vez só. Embaixo vem o CLARO, que é o padrão. Os dois blocos de
     apelido (media query + [data-tema]) só reapontam, nunca redefinem cor.
     Mexeu numa cor do escuro? Mexe aqui e acabou.
     ========================================================== */
  /* Degraus de verdade: página→card era 1,21:1 e os cards não existiam como
     superfície — a tela inteira lia como um campo chapado. Agora 1,44:1. */
  --d-bg:#071322; --d-surface:#122340; --d-card:#1A3157; --d-hover:#21406E;
  --d-line:#2C4B7A; --d-txt:#F1F5FA; --d-mute:#A7B9CD; --d-mute-dim:#8A9CB2;
  --d-gold-txt:#EBC989; --d-gold-soft:rgba(194,155,60,.13);
  --d-bar:rgba(19,37,64,.78); --d-faixa:rgba(19,37,64,.92);
  --d-ic:linear-gradient(160deg,#1D3358,#122340);
  --d-palco:#06101C; --d-grain:overlay; --d-grain-op:.35;
  /* No escuro a profundidade vem de clareamento: um fio de luz no topo da
     camada. Sombra clara não aparece sobre fundo escuro. */
  --d-e1:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 10px -6px rgba(0,0,0,.6);
  --d-e2:inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -22px rgba(0,0,0,.9);
  --d-e3:0 30px 70px -30px rgba(0,0,0,.9);

  /* ---------- TEMA CLARO (padrão) ---------- */
  --bg:#F4F0E8;        /* chão da página          */
  --surface:#FFFFFF;   /* painel sobre o chão     */
  --card:#FFFFFF;      /* card                    */
  --hover:#FBF8F2;     /* card sob o ponteiro     */
  --line:#E4DED1;      /* borda entre camadas     */
  --txt:#0E1C33; --mute:#5E6B77; --mute-dim:#666E79;   /* 4,8:1 e 4,5:1 sobre o creme */
  --bar:rgba(244,240,232,.82); --faixa:rgba(255,255,255,.9);
  --ic:var(--navy); --palco:#0E1C33; --grain:multiply; --grain-op:.5;

  /* Ouro amostrado da logo: meio-tom e brilho do arco */
  --gold:#C29B3C; --gold-lit:#F4D497;
  --gold-txt:#8B6517;                       /* ouro legível sobre o creme */
  --gold-tinta:#1A1305;                     /* texto sobre fundo dourado */
  --gold-soft:rgba(194,155,60,.10);
  --gold-glow:rgba(244,212,151,.45);
  /* O ouro da logo é metal, não cor chapada: claro no topo, escuro na base.
     É o que dá o relevo. Use em AÇÃO PRINCIPAL — nunca como fundo de área. */
  /* A logo é um ARO de metal sobre navy — não um disco dourado. Área grande de
     ouro não existe em lugar nenhum do site; o ouro é sempre linha ou texto
     pequeno. A ação principal segue a mesma composição: fundo navy um degrau
     mais claro, aro metálico, brilho em volta. */
  --aro-metal:linear-gradient(168deg,#FBE7B4 0%,#C9A14A 30%,#8A6A22 58%,#F0D191 100%);
  --aro-metal-fraco:linear-gradient(170deg,#9A7C3A,#6B5622);
  --acao-fill:linear-gradient(175deg,#22406E,#16294B);
  --acao-brilho:inset 0 1px 0 rgba(255,255,255,.13), 0 0 30px -8px rgba(226,192,119,.42);
  --acao-brilho-forte:inset 0 1px 0 rgba(255,255,255,.18), 0 0 44px -6px rgba(226,192,119,.62);
  /* Preenchimento de metal — só no ESTADO DE INTERAÇÃO. Em repouso ele viraria
     área dourada, que é o que não pertence a este site. A parada mais escura
     mantém 7,2:1 com o texto escuro. */
  --metal-cheio:linear-gradient(177deg,#FFF0C6 0%,#F8DC94 22%,#EAC468 52%,#DBB050 78%,#C99B3C 100%);

  --wpp:#25D366; --wpp-txt:#062E14;

  /* Navy e prata amostrados da logo — mais azuis e mais neutros que antes */
  --navy:#0E1C33; --navy-deep:#071224; --navy-line:#22375A;
  --aco:#A2A5AE;

  /* No claro a profundidade vem de sombra; no escuro, do fio de luz acima. */
  --e1:0 1px 2px rgba(20,31,43,.06);
  --e2:0 8px 24px -12px rgba(20,31,43,.22);
  --e3:0 24px 60px -24px rgba(20,31,43,.34);
  --shadow:var(--e1);
  --dock:rgba(6,16,32,.94);   /* a dock é escura nos dois temas */

  /* Raio */
  --r-s:9px; --r-m:14px; --r-l:20px;

  /* Tipografia — trocar a fonte do site é trocar estas linhas.
     Toda pilha termina em fonte de sistema: se o Google Fonts não carregar,
     o site cai num similar, não em Times. */
  --f-display:'Cal Sans',system-ui,sans-serif;            /* títulos, nomes, botões */
  --f-numero:'Anton',Impact,'Arial Narrow',sans-serif;    /* preços e parcelas: a Cal Sans
                                                             abre espaço demais em "R$" e
                                                             no ponto do milhar */
  --f-corpo:'Archivo',system-ui,sans-serif;               /* texto corrido */
  --f-rotulo:'Montserrat',system-ui,sans-serif;           /* rótulos em caixa alta */
  --f-serif:'Fraunces',Georgia,serif;                     /* itálico do rodapé */

  /* Ritmo de movimento (espelha os tokens do motion.js) */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s; --t-med:.28s; --t-slow:.5s;
  --t-tema:.68s; --ease-tema:cubic-bezier(.4,0,.2,1);
}
/* Seções fundas (hero, rodapé, agenda). Antes clareavam sobre o creme;
   agora aprofundam sobre o navy — é o que dá ritmo entre as seções. */
/* Escuro por preferência do aparelho, quando a pessoa ainda não escolheu. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --bg:var(--d-bg); --surface:var(--d-surface); --card:var(--d-card); --hover:var(--d-hover);
    --line:var(--d-line); --txt:var(--d-txt); --mute:var(--d-mute); --mute-dim:var(--d-mute-dim);
    --gold-txt:var(--d-gold-txt); --gold-soft:var(--d-gold-soft);
    --bar:var(--d-bar); --faixa:var(--d-faixa); --ic:var(--d-ic);
    --palco:var(--d-palco); --grain:var(--d-grain); --grain-op:var(--d-grain-op);
    --e1:var(--d-e1); --e2:var(--d-e2); --e3:var(--d-e3);
  }
}
/* Escuro por escolha explícita no botão — vence a preferência do aparelho. */
:root[data-tema="escuro"]{
  --bg:var(--d-bg); --surface:var(--d-surface); --card:var(--d-card); --hover:var(--d-hover);
  --line:var(--d-line); --txt:var(--d-txt); --mute:var(--d-mute); --mute-dim:var(--d-mute-dim);
  --gold-txt:var(--d-gold-txt); --gold-soft:var(--d-gold-soft);
  --bar:var(--d-bar); --faixa:var(--d-faixa); --ic:var(--d-ic);
  --palco:var(--d-palco); --grain:var(--d-grain); --grain-op:var(--d-grain-op);
  --e1:var(--d-e1); --e2:var(--d-e2); --e3:var(--d-e3);
}

/* Seções fundas (hero, rodapé, agenda). São escuras nos DOIS temas: no claro
   elas contrastam com o creme, no escuro viram um poço mais fundo. */
.dark{
  background:var(--navy-deep); color:#fff;
  --surface:#0F1E36; --card:#0F1E36; --line:#22375A; --hover:#16294A;
  --txt:#FFFFFF; --mute:#9DAFC4; --mute-dim:#8496AC;
  --gold-txt:var(--gold-lit); --gold-soft:rgba(194,155,60,.16);
  --shadow:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-corpo);
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  padding:0;
  min-height:100dvh;
}
:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;border-radius:4px}
img,svg{display:block}
button{font:inherit;color:inherit}

/* Textura de grão sutil, dá "atmosfera" ao fundo cream (frontend-skill) */
.grain:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  mix-blend-mode:var(--grain);opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

/* ---------- moldura de celular (só no computador) ---------- */

.screen{position:relative;background:var(--bg);min-height:100dvh}

/* No celular estes dois invólucros não existem visualmente: os filhos ficam
   no mesmo fluxo, exatamente na ordem de antes. No computador viram colunas. */
.c-midia,.c-info{display:contents}
/* CTA da barra: só no computador, onde a dock de baixo não existe. */
.bar-wpp{display:none}

/* ---------- barra superior ---------- */
.bar{position:sticky;top:0;z-index:20;background:var(--bar);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:11px 15px}
.bar .back{background:none;border:none;color:var(--mute);cursor:pointer;font-size:22px;line-height:1;padding:0;transition:var(--t-fast) var(--ease);min-width:44px;height:44px;display:flex;align-items:center;justify-content:flex-start;margin-left:-6px}
.bar .back:hover{color:var(--gold-txt);transform:translateX(-2px)}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:none;padding:0}
/* O emblema é a faixa da logo (arcos + carro): é a parte que continua
   legível em tamanho pequeno. O badge completo fica no rodapé. */
.mark{width:46px;height:46px;border-radius:13px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 3px 8px -2px rgba(14,28,51,.34),inset 0 0 0 1px rgba(244,212,151,.2);
  transition:transform var(--t-med) var(--ease)}
.logo:hover .mark{transform:translateY(-1px) scale(1.03)}
.bar .spacer{flex:1}
/* Botão de tema — ícone NU, sem caixa. O Instagram ao lado tem borda porque é
   ação (leva a pessoa embora); o tema é um controle da própria página. O peso
   visual diferente é o que impede que sejam lidos como dois botões iguais. */
.tema{width:44px;height:44px;border:none;background:transparent;border-radius:11px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:var(--mute-dim);cursor:pointer;transition:var(--t-fast) var(--ease)}
.tema:hover{color:var(--gold-txt)}
.tema:active{transform:scale(.88)}
.tema svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
/* Mostra a lua no claro (toque leva ao escuro) e o sol no escuro. */
.tema .i-sol{display:none}
:root[data-tema="escuro"] .tema .i-sol{display:block}
:root[data-tema="escuro"] .tema .i-lua{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .tema .i-sol{display:block}
  :root:not([data-tema="claro"]) .tema .i-lua{display:none}
}

/* ---------- troca de tema ----------
   Nada cobre a tela. A PALETA derrete: esta classe liga transição de cor em
   tudo por meio segundo, o tema vira, e cada superfície interpola sozinha.
   O conteúdo fica visível o tempo todo — é isso que tira a brutalidade. */
html.trocando-tema *{
  transition:background-color var(--t-tema) var(--ease-tema),
             color            var(--t-tema) var(--ease-tema),
             border-color     var(--t-tema) var(--ease-tema),
             box-shadow       var(--t-tema) var(--ease-tema)}

/* A barra e a faixa usam backdrop-filter. Durante a troca o Chrome pode segurar
   um instantâneo velho desse fundo — o que aparecia como um retângulo claro
   preso dentro do botão do Instagram. Desligar o filtro na janela da troca
   elimina o instantâneo; ele volta sozinho ao fim. */
html.trocando-tema .bar,
html.trocando-tema .faixa,
html.trocando-tema .dock{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Por cima, UM reflexo diagonal — e só um.
   A versão anterior lançava um halo e dois anéis irradiando do botão ao mesmo
   tempo: a forma disso é onda de choque, e o olho lê como explosão.
   A logo é metal em relevo, e metal não estoura — ele pega uma luz passando.
   Então é isso: uma faixa larga e suave que atravessa a tela em diagonal,
   devagar, uma vez. Uma peça, uma direção, começo e fim calmos. */
.brilho-tema{position:fixed;left:50%;top:50%;width:240vmax;height:46vmax;
  margin-left:-120vmax;margin-top:-23vmax;
  /* Abaixo da barra e da dock (z 20), acima do conteúdo. Uma camada com
     will-change por cima de um elemento com backdrop-filter fazia o Chrome
     falhar o repaint e o ícone do Instagram virava um quadrado branco. */
  z-index:5;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(244,212,151,.05) 26%,
    rgba(244,212,151,.26) 50%,
    rgba(244,212,151,.05) 74%,
    transparent 100%)}
@media (prefers-reduced-motion:reduce){
  .brilho-tema{display:none}
  html.trocando-tema *{transition:none}
}

.ig{width:44px;height:44px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mute);cursor:pointer;transition:var(--t-fast) var(--ease);flex:0 0 auto;background:transparent}
.ig:hover{border-color:var(--gold);color:var(--gold-txt);transform:translateY(-1px)}
.ig svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}

/* ---------- views ---------- */
.view{display:none}
.view.on{display:block}
.view.dock-on{padding-bottom:88px}

.eyebrow{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-txt);font-weight:700;margin-bottom:14px}
h2.big{font-family:var(--f-display);font-size:clamp(27px,8.6vw,35px);line-height:1.02;letter-spacing:-.005em;color:var(--txt)}
h3.sec{font-family:var(--f-display);font-size:17px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt)}
.lede{color:var(--mute);font-size:14.5px;line-height:1.62;margin-top:14px;max-width:34ch}

/* ---------- HERO ---------- */
.hero{position:relative;padding:40px 20px 42px;overflow:hidden;isolation:isolate}
/* O hero tinha um gradiente raso e lia como um retângulo escuro. Agora tem
   uma fonte de luz atrás da marca e um horizonte que escurece para baixo — e
   uma borda dourada de 1px que fecha a seção em vez de ela apenas acabar. */
.hero.dark{
  background:
    radial-gradient(78% 66% at 76% 16%, rgba(70,100,146,.50) 0%, rgba(70,100,146,0) 64%),
    linear-gradient(180deg, #102340 0%, #0A1A30 56%, #060F1C 100%);
  border-bottom:1px solid rgba(244,212,151,.16)}
/* Marca d'água do hero: a logo inteira, nunca com o nome cortado no meio.
   mix-blend-mode:lighten derruba a placa navy (é o mesmo navy do hero) e a
   máscara radial dissolve a borda do quadrado, que senão aparece como emenda. */
.hero .marca-fundo{position:absolute;top:-6px;right:-16px;width:216px;height:216px;
  object-fit:contain;pointer-events:none;z-index:0;
  mix-blend-mode:lighten;opacity:.42;
  -webkit-mask-image:radial-gradient(closest-side,#000 76%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 76%,transparent 100%)}
.hero .in{position:relative;z-index:1}
.hero .lede{color:#B9C7D4}
/* ---------- portas de entrada ---------- */
.portas{padding:26px 20px 6px;position:relative;z-index:1}
.pl{font-size:9.5px;letter-spacing:.2em;color:var(--gold-txt);font-weight:700;margin-bottom:14px;text-transform:uppercase}
.porta{width:100%;text-align:left;cursor:pointer;color:var(--txt);background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 var(--r-m) var(--r-m) 0;padding:16px 17px;display:flex;align-items:center;gap:12px;transition:transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);box-shadow:var(--e1);margin-bottom:10px;position:relative;overflow:hidden}
.porta:hover{border-color:var(--gold);border-left-color:var(--gold);transform:translateX(4px);box-shadow:var(--e2)}
.porta b{display:block;font-family:var(--f-display);font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt)}
.porta span{display:block;font-size:12.5px;color:var(--mute);margin-top:3px}
.porta .arw{margin-left:auto;color:var(--gold-txt);font-size:20px;transition:transform var(--t-med) var(--ease)}
.porta:hover .arw{transform:translateX(4px)}
/* ---------- ícone da porta ----------
   Vem da referência: botão com ícone lê como botão. Em repouso é discreto;
   quando o metal entra, ele vira o negativo. */
/* Fundo translúcido de propósito: um branco sólido virava uma placa pesada
   sobre o botão navy, e sumia sobre o card branco do tema claro. Um véu
   dourado funciona nos dois. */
.p-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;background:rgba(201,161,74,.12);
  box-shadow:inset 0 0 0 1px rgba(201,161,74,.30);
  transition:background .2s var(--ease), box-shadow .2s var(--ease)}
.p-ic svg{width:21px;height:21px;fill:none;stroke:var(--gold-txt);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s var(--ease)}

/* ---------- ação principal ----------
   Os três caminhos não têm o mesmo peso: o primeiro é por onde a maioria vai,
   o segundo é alternativa, o terceiro é exceção. */
.porta.principal{border:2px solid transparent;
  background:var(--acao-fill) padding-box, var(--aro-metal) border-box;
  box-shadow:var(--acao-brilho)}
.porta.principal b{color:#F6D998}
.porta.principal span{color:#C3D0DD}
.porta.principal .arw{color:#E2C077}
.porta.principal:hover{border:2px solid transparent;transform:translateY(-3px);
  box-shadow:var(--acao-brilho-forte)}

/* Metal pega reflexo — dourado, não branco: sobre o navy um clarão branco
   viraria flash. Só onde há ponteiro. */
/* ---------- o metal entra na interação, não no repouso ----------
   Uma cortina de metal atravessa da esquerda para a direita quando o ponteiro
   chega — ou quando o dedo pressiona, já que no celular não há hover. */
.porta:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--metal-cheio);
  clip-path:inset(0 100% 0 0);
  /* 240ms, não 420: enquanto a cortina passa existe um instante em que o
     título dourado está sobre fundo dourado. Nenhuma cor de texto resolve os
     dois lados ao mesmo tempo — então a saída é a janela ser curta. Fica
     dentro da faixa de micro-interação (150–300ms). */
  transition:clip-path .24s var(--ease-out)}
.porta>*{position:relative;z-index:1}
.porta{transition:transform var(--t-med) var(--ease),
                  box-shadow var(--t-med) var(--ease),
                  border-color var(--t-med) var(--ease)}
.porta b,.porta span,.porta .arw{transition:color .18s var(--ease), transform var(--t-med) var(--ease)}

/* Estado cheio: o texto vira escuro e o ícone vira o negativo. */
.porta.cheia:before{clip-path:inset(0 0 0 0)}
.porta.cheia b,.porta.cheia span,.porta.cheia .arw{color:var(--gold-tinta)}
.porta.cheia span{color:rgba(26,19,5,.74)}
.porta.cheia .p-ic{background:rgba(26,19,5,.14);box-shadow:inset 0 0 0 1px rgba(26,19,5,.22)}
.porta.cheia .p-ic svg{stroke:var(--gold-tinta)}
.porta.cheia .arw{transform:translateX(5px)}

@media (hover:hover){
  .porta:hover:before{clip-path:inset(0 0 0 0)}
  .porta:hover b,.porta:hover span,.porta:hover .arw{color:var(--gold-tinta)}
  .porta:hover span{color:rgba(26,19,5,.74)}
  .porta:hover .p-ic{background:rgba(26,19,5,.14);box-shadow:inset 0 0 0 1px rgba(26,19,5,.22)}
  .porta:hover .p-ic svg{stroke:var(--gold-tinta)}
}
/* No toque o mesmo estado aparece enquanto o dedo está pressionando. */
.porta:active:before{clip-path:inset(0 0 0 0)}
.porta:active b,.porta:active span,.porta:active .arw{color:var(--gold-tinta)}
.porta:active .p-ic svg{stroke:var(--gold-tinta)}

/* Segundo caminho: mesmo aro, mais fino e apagado. A hierarquia sobra. */
.porta.secundaria{border:1px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box, var(--aro-metal-fraco) border-box;
  box-shadow:none}
/* Precisa seguir o tema: um dourado claro cravado some sobre o card branco. */
.porta.secundaria b{color:var(--gold-txt)}
.porta.secundaria:hover{border:1px solid transparent}

.porta.q{border-left-color:var(--line)}
.porta.q b{font-size:13.5px;color:var(--mute);font-family:var(--f-corpo);font-weight:600;letter-spacing:0;text-transform:none}
.porta.q:hover{border-left-color:var(--gold)}

/* ---------- faixa de prova (stats que contam) ---------- */

/* ---------- depoimentos ---------- */
.dep{padding:30px 20px 8px}
.dep h3{margin-bottom:6px}
.dep .sub{font-size:12.5px;color:var(--mute);line-height:1.5;margin-bottom:18px;max-width:40ch}
.deps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;cursor:pointer;transition:transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);box-shadow:var(--e1);text-align:left;padding:0;font-family:var(--f-corpo);display:block;width:100%}
.dp:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--e2)}
.dp .thumb{height:120px;background:linear-gradient(160deg,#1E3454,#091628);position:relative;display:flex;align-items:center;justify-content:center}
.dp .play{width:40px;height:40px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -4px var(--gold-glow);transition:transform var(--t-med) var(--ease)}
.dp:hover .play{transform:scale(1.12)}
.dp .play:after{content:"";border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.dp .saiu{position:absolute;top:8px;left:8px;background:rgba(224,174,67,.16);border:1px solid rgba(224,174,67,.4);color:var(--gold-lit);font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;border-radius:99px}
.dp .info{padding:11px}
.dp .info b{display:block;font-family:var(--f-display);font-size:13px;letter-spacing:.02em;color:var(--txt)}
.dp .info span{display:block;font-size:11px;color:var(--mute);margin-top:3px}
.dp .info em{display:block;font-style:normal;font-size:10.5px;color:var(--gold-txt);font-weight:600;margin-top:7px}

/* ---------- selos ---------- */
.selos{padding:22px 20px 4px}
.selo{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
.selo:last-child{border-bottom:none}
.selo .ic{width:38px;height:38px;border-radius:11px;background:var(--ic);box-shadow:inset 0 0 0 1px rgba(244,212,151,.18);flex:0 0 auto;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(224,174,67,.16)}
.selo .ic svg{width:20px;height:20px}
.selo b{display:block;font-size:14px;font-weight:700;color:var(--txt);margin-bottom:3px}
.selo p{font-size:12.5px;color:var(--mute);line-height:1.55}

/* ---------- localização ---------- */
.local{margin:22px 20px 26px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--e1)}
.local b{display:block;font-size:13px;font-weight:700;color:var(--txt);margin-bottom:6px}
.local p{font-size:12.5px;color:var(--mute);line-height:1.65}
.local .lk{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.local .lk button{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-family:var(--f-corpo);font-size:12px;font-weight:600;color:var(--gold-txt);background:transparent;border:1px solid var(--gold);border-radius:99px;padding:9px 15px;transition:var(--t-fast) var(--ease)}
.local .lk button:hover{background:var(--gold-soft);transform:translateY(-1px)}

/* ---------- rodapé ---------- */
.pe{position:relative;padding:38px 20px 34px;text-align:center;overflow:hidden}
.pe.dark{background:radial-gradient(100% 80% at 50% 0%,#1B2A39,var(--navy-deep))}
/* A logo completa vive aqui: fundo navy próprio, wordmark e assinatura
   legíveis, sem recorte nenhum. */
.pe .lock{display:flex;flex-direction:column;align-items:center;margin-bottom:22px;position:relative;z-index:1}
.pe-logo{width:196px;max-width:64%;height:auto;border-radius:18px;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.7),inset 0 0 0 1px rgba(244,212,151,.14)}
.pe .fr{position:relative;z-index:1;font-family:var(--f-serif);font-style:italic;font-size:15px;color:#CBD6E1;line-height:1.6;margin-bottom:20px}
.pe .links{position:relative;z-index:1;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pe .links button{font-size:11.5px;min-height:44px;display:inline-flex;align-items:center;color:#9DAFC4;background:transparent;cursor:pointer;border:1px solid #22375A;border-radius:99px;padding:8px 15px;transition:var(--t-fast) var(--ease);font-family:var(--f-corpo);font-weight:500}
.pe .links button:hover{border-color:var(--gold-lit);color:var(--gold-lit)}

/* ---------- faixa de condição (catálogo) ---------- */
.faixa{position:sticky;top:60px;z-index:15;background:var(--faixa);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:12px 15px;display:flex;align-items:center;gap:10px}
.dark .faixa{background:rgba(28,41,56,.9)}
.faixa .txt{flex:1;min-width:0}
.faixa .k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-dim);font-weight:700}
.faixa .v{font-size:12.5px;color:var(--txt);font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faixa .v.off{color:var(--mute);font-weight:400}
.faixa button{flex:0 0 auto;cursor:pointer;font-family:var(--f-corpo);font-size:11.5px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:99px;border:1.5px solid transparent;
  background:var(--acao-fill) padding-box, var(--aro-metal) border-box;
  box-shadow:var(--acao-brilho);color:#F6D998;transition:var(--t-fast) var(--ease)}
.faixa button:hover{background:#CD9C2A;transform:translateY(-1px)}
.faixa button.ed{background:transparent;color:var(--gold-txt);border:1px solid var(--gold)}
.faixa button.ed:hover{background:var(--gold-soft)}

/* ---------- filtros ---------- */
.fbar{padding:14px 15px 0;display:flex;gap:8px;align-items:center}
.fbtn{cursor:pointer;font-family:var(--f-corpo);font-size:12px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;padding:0 17px;border-radius:99px;background:transparent;color:var(--mute);border:1px solid var(--line);transition:var(--t-fast) var(--ease);display:inline-flex;align-items:center;gap:6px}
.fbtn:hover{border-color:var(--gold);color:var(--gold-txt)}
.fbtn.ativo{background:var(--gold-soft);color:var(--gold-txt);border-color:var(--gold)}
.fcount{font-size:12px;color:var(--mute);margin-left:auto}
.fpanel{display:none;padding:14px 15px 2px;overflow:hidden}
.fpanel.on{display:block}
.flabel{font-size:11px;letter-spacing:.02em;color:var(--mute);font-weight:600;margin:0 0 8px;text-transform:uppercase}
.flabel:not(:first-child){margin-top:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{cursor:pointer;font-family:var(--f-corpo);font-size:12px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;padding:0 15px;border-radius:99px;background:transparent;color:var(--mute);border:1px solid var(--line);transition:var(--t-fast) var(--ease)}
.chip:hover{border-color:var(--gold);color:var(--gold-txt)}
.chip.on{background:var(--gold);color:var(--gold-tinta);border-color:var(--gold)}

/* ---------- lista + card ---------- */
.lista{padding:14px 15px 0;display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;cursor:pointer;transition:transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);box-shadow:var(--e1)}
.card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--e2)}
.foto{height:150px;background:radial-gradient(120% 120% at 70% 20%,#1E3454,#091628);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.foto svg.car{width:74%;max-width:220px;opacity:.55;transition:transform var(--t-slow) var(--ease-out)}
.card:hover .foto svg.car{transform:scale(1.06) translateX(-2%)}
.foto .slot{position:absolute;bottom:8px;left:11px;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#9FB2C8}
.tag{position:absolute;top:10px;left:10px;background:var(--gold);color:var(--gold-tinta);font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:99px;box-shadow:0 4px 12px -4px var(--gold-glow)}
.corpo{padding:15px 16px}
.mod{font-family:var(--f-display);font-size:19px;line-height:1.1;color:var(--txt)}
.meta{font-size:11.5px;color:var(--mute);margin-top:6px}
.preco{font-family:var(--f-numero);font-size:28px;margin-top:10px;color:var(--txt);font-variant-numeric:tabular-nums}
.condicao{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.condicao .cv{display:flex;align-items:baseline;gap:5px;font-size:13px;color:var(--mute);flex-wrap:wrap}
.condicao .cv b{font-family:var(--f-numero);font-weight:400;font-size:23px;color:var(--gold-txt);font-variant-numeric:tabular-nums}
.condicao .cl{font-size:11px;color:var(--mute-dim);margin-top:4px}
.cabe{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-txt);background:var(--gold-soft);border:1px solid var(--gold);border-radius:99px;padding:4px 10px}
.cabe:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ---------- página do carro: galeria cinematográfica ---------- */
.galeria{height:250px;background:radial-gradient(80% 90% at 50% 30%,#2A3C4F 0%,var(--navy) 55%,var(--navy-deep) 100%);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.galeria .spot{position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:120%;height:120%;background:radial-gradient(circle at 50% 35%,var(--gold-glow) 0%,transparent 45%);opacity:.5;pointer-events:none}
.galeria .arco{position:absolute;left:-90px;bottom:-90px;width:250px;height:250px;opacity:.3;z-index:1}
.galeria svg.car{width:80%;max-width:300px;opacity:.85;position:relative;z-index:2;filter:drop-shadow(0 24px 30px rgba(0,0,0,.4))}
.galeria .slot{position:absolute;bottom:14px;left:14px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#9FB2C8;z-index:3}
.topo{padding:20px 20px 0}
.topo .mod{font-size:27px}
.topo .preco{font-size:40px;margin-top:8px}
/* a suposição da simulação, dita na cara */
.isca em{display:block;width:100%;font-style:normal;font-size:11.5px;color:var(--mute-dim);margin-top:3px}
.isca{margin:12px 20px 0;font-size:14px;color:var(--mute);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.isca b{font-family:var(--f-numero);font-weight:400;font-size:27px;color:var(--gold-txt);font-variant-numeric:tabular-nums}
.ficha{margin:18px 20px 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.fi{background:var(--card);padding:12px 14px}
.fi span{display:block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute-dim)}
.fi b{display:block;font-size:14px;font-weight:700;margin-top:3px;color:var(--txt);font-variant-numeric:tabular-nums}
.proc{margin:18px 20px 0;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.proc h3{margin-bottom:14px}
.proc li{list-style:none;font-size:13px;color:var(--mute);padding-left:22px;position:relative;margin-bottom:9px;line-height:1.45}
.proc li:before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:2px;background:var(--gold)}
.proc .laudo-l{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--mute);line-height:1.5}
.proc .laudo-l b{color:var(--gold-txt);font-weight:600}

.mc{margin:18px 20px 0;padding:18px;background:var(--card);border:1px solid var(--gold);border-radius:var(--r-l);box-shadow:var(--e2)}
.mc .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mc .hd button{min-height:44px;display:inline-flex;align-items:center;cursor:pointer;font-family:var(--f-corpo);font-size:11.5px;font-weight:600;color:var(--gold-txt);background:transparent;border:1px solid var(--gold);border-radius:99px;padding:0 16px;transition:var(--t-fast) var(--ease)}
.mc .hd button:hover{background:var(--gold-soft)}
.rl{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.rl:last-of-type{border-bottom:none}
.rl span{color:var(--mute-dim);flex:0 0 auto}
.rl b{font-weight:600;text-align:right;color:var(--txt)}
.rl b.off{color:var(--mute-dim);font-weight:400}
.mc .vazio{text-align:center;padding:6px 0 2px}
.mc .vazio p{font-size:12.5px;color:var(--mute);line-height:1.55;margin-bottom:14px}

/* ---------- agenda de visita ---------- */
.agenda{margin:18px 0 0;padding:26px 20px;position:relative;overflow:hidden}
.agenda.dark{background:radial-gradient(110% 80% at 20% 0%,#1B2A39,var(--navy-deep))}
.agenda h3{margin-bottom:6px}
.agenda .sub{font-size:12.5px;color:#9DAFC4;line-height:1.5;margin-bottom:18px}
.agenda .promessa{margin-top:18px;padding:14px 15px;background:rgba(255,255,255,.05);border-left:3px solid var(--gold);border-radius:0 var(--r-s) var(--r-s) 0;font-size:12.5px;color:#E6E1D6;line-height:1.6}
.agenda .promessa b{color:var(--gold-lit)}
.mini{display:flex;gap:6px;flex-wrap:wrap}
.mini button{flex:1;min-width:66px;min-height:44px;cursor:pointer;font-family:var(--f-corpo);font-size:11.5px;font-weight:600;padding:0 4px;border-radius:9px;background:transparent;color:#9DAFC4;border:1px solid var(--navy-line);transition:var(--t-fast) var(--ease)}
.mini button:hover{border-color:var(--gold-lit);color:#fff}
.mini button.on{background:var(--gold);color:var(--gold-tinta);border-color:var(--gold)}

/* ---------- ações / WhatsApp ---------- */
.acao{padding:18px 20px 26px;display:flex;flex-direction:column;gap:10px}
.wpp{width:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--wpp);color:var(--wpp-txt);border:none;border-radius:13px;font-family:var(--f-display);font-size:15px;letter-spacing:.05em;text-transform:uppercase;padding:17px;transition:transform var(--t-fast) var(--ease),background var(--t-med) var(--ease);box-shadow:0 10px 24px -12px rgba(37,211,102,.7)}
.wpp:hover{background:#1FBF5C;transform:translateY(-2px)}
.wpp:active{transform:translateY(0) scale(.99)}
.wpp svg{width:20px;height:20px;fill:var(--wpp-txt)}
/* A dúvida é saída de exceção, não alternativa ao agendamento.
   Enquanto foi um botão do mesmo tamanho — mesma caixa, mesma caixa alta, mesmo
   ícone do WhatsApp — ela lia como "o outro jeito de fazer a mesma coisa", e a
   pessoa escolhia a opção que não compromete. Aqui ela desce um degrau de
   CATEGORIA, não de cor: vira link, no mesmo nível do telefone logo abaixo.
   Deixar só mais apagada não resolveria — continuaria sendo um botão do mesmo
   tamanho, e forma pesa mais que cor. Continua acessível a quem precisa, e
   para de disputar o primeiro toque. */
.wpp.sec{background:none;color:var(--mute);border:none;box-shadow:none;
  width:auto;align-self:center;padding:9px 12px;min-height:44px;
  font-family:var(--f-corpo);font-size:13.5px;font-weight:400;
  letter-spacing:0;text-transform:none;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.wpp.sec svg{display:none}
.wpp.sec:hover{background:none;color:var(--gold-txt);transform:none;text-decoration-color:var(--gold)}
.wpp.sec:active{transform:scale(.985)}
.ligar{background:none;border:none;cursor:pointer;font-family:var(--f-corpo);font-size:12.5px;color:var(--mute);text-align:center;min-height:44px;padding:6px;transition:var(--t-fast) var(--ease)}
.ligar:hover{color:var(--gold-txt)}
.ligar b{font-weight:600;color:var(--gold-txt);border-bottom:1px solid var(--gold)}
.wpp-sub{font-size:11.5px;color:var(--mute-dim);text-align:center;line-height:1.5}

/* ---------- dock inferior ---------- */
.dock{position:sticky;bottom:0;z-index:20;display:flex;gap:8px;padding:12px 15px calc(12px + env(safe-area-inset-bottom));background:var(--dock);backdrop-filter:blur(14px);border-top:1px solid var(--navy-line)}
.dock button{flex:1;cursor:pointer;border-radius:12px;padding:14px 8px;font-family:var(--f-display);font-size:13px;letter-spacing:.05em;text-transform:uppercase;transition:var(--t-fast) var(--ease)}
.dock .d1{background:transparent;color:#fff;border:1px solid #3A4E63}
.dock .d1:hover{border-color:var(--gold-lit);color:var(--gold-lit)}
.dock .d2{background:var(--wpp);color:var(--wpp-txt);border:none}
.dock .d2:hover{background:#1FBF5C;transform:translateY(-1px)}

/* ---------- onboarding ---------- */
.prog{height:3px;background:var(--line);position:relative;overflow:hidden}
.prog i{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-lit));border-radius:0 3px 3px 0;transition:width var(--t-slow) var(--ease-out)}
.passo{padding:34px 20px 26px}
.passo .n{font-size:11px;color:var(--gold-txt);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;font-weight:700}
.passo h2{font-family:var(--f-display);font-size:28px;line-height:1.06;margin-bottom:9px;color:var(--txt)}
.passo .hint{font-size:13.5px;color:var(--mute);line-height:1.55;margin-bottom:22px;max-width:36ch}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{width:100%;text-align:left;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px 17px;color:var(--txt);font-family:var(--f-corpo);font-size:15px;font-weight:600;transition:transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);box-shadow:var(--e1)}
.opt:hover{border-color:var(--gold);background:var(--hover);transform:translateX(4px);box-shadow:var(--e2)}
.opt small{display:block;font-weight:400;font-size:12px;color:var(--mute);margin-top:4px}
.opt.n{color:var(--mute);font-weight:500}

/* Escolhida: fica marcada com o ouro da marca e um tique. Sem isso a pessoa
   toca e a tela troca sem confirmar que a resposta entrou. */
.opt{position:relative;padding-right:54px}
.opt.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold)}
.opt.on:after{content:"";position:absolute;right:20px;top:50%;width:17px;height:9px;
  border-left:2.5px solid var(--gold-txt);border-bottom:2.5px solid var(--gold-txt);
  transform:translateY(-72%) rotate(-45deg)}

/* Rótulo visível no campo de troca — placeholder sozinho some ao digitar. */
.troca-l{display:block;margin-top:18px;margin-bottom:6px;font-family:var(--f-rotulo);
  font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-txt)}
.troca-in{width:100%;margin-top:8px;padding:14px;font-size:16px;min-height:48px;border-radius:11px;background:var(--surface);border:1px solid var(--line);color:var(--txt);font-family:var(--f-corpo);font-size:15px}
.troca-in::placeholder{color:var(--mute-dim)}
.troca-in:focus{border-color:var(--gold);outline:none}
.segue{width:100%;margin-top:12px;cursor:pointer;border:2px solid transparent;
  background:var(--acao-fill) padding-box, var(--aro-metal) border-box;
  box-shadow:var(--acao-brilho);color:#F6D998;border-radius:13px;font-family:var(--f-display);font-size:15px;letter-spacing:.05em;text-transform:uppercase;padding:16px;transition:var(--t-fast) var(--ease)}
.segue:hover{background:var(--gold);transform:translateY(-1px)}

/* ---------- modal de vídeo ---------- */
.vov{position:absolute;inset:0;z-index:50;display:none;background:rgba(6,9,13,.94);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:16px}
.vov.on{display:flex}
.vbox{width:100%;max-width:320px}
.vplayer{position:relative;width:100%;aspect-ratio:9/16;background:var(--navy-deep);border-radius:18px;overflow:hidden;border:1px solid var(--navy-line);display:flex;align-items:center;justify-content:center}
.vplayer video{width:100%;height:100%;object-fit:cover}
.vinfo{margin-top:16px;text-align:center}
.vinfo b{display:block;font-family:var(--f-display);font-size:18px;letter-spacing:.03em;color:#fff}
.vinfo span{display:block;font-size:12.5px;color:#A2A5AE;margin-top:4px}
.vacao{display:flex;gap:8px;margin-top:18px}
.vacao button{flex:1;cursor:pointer;border-radius:11px;padding:14px;font-family:var(--f-corpo);font-size:13px;font-weight:600;transition:var(--t-fast) var(--ease)}
.vfechar{background:transparent;color:#9DAFC4;border:1px solid #22375A}
.vfechar:hover{border-color:#9DAFC4}
.vwpp{background:var(--wpp);color:var(--wpp-txt);border:none}
.vwpp:hover{background:#1FBF5C}

/* ---------- prévia (sheet de demonstração) ---------- */
.overlay{position:absolute;inset:0;z-index:40;display:none;background:rgba(6,9,13,.82);backdrop-filter:blur(4px);align-items:flex-end}
.overlay.on{display:flex}
.sheet{width:100%;background:var(--navy);border-top:2px solid var(--gold);border-radius:22px 22px 0 0;padding:22px 20px 24px;max-height:88%;overflow-y:auto}
.sheet h3{color:#fff}
.sheet .why{font-size:12px;color:#9DAFC4;line-height:1.5;margin:6px 0 16px}
.bolha{background:#0E4A38;border-radius:4px 14px 14px 14px;padding:15px;font-size:13.5px;line-height:1.65;color:#E8F5EE;white-space:pre-wrap;border:1px solid #14684D}
.rota{margin-top:14px;padding:12px 14px;background:rgba(255,255,255,.05);border-left:3px solid var(--gold);border-radius:0 var(--r-s) var(--r-s) 0;font-size:11.5px;color:#B9C7D4;line-height:1.6}
.rota b{color:var(--gold-lit)}
.sheet .fechar{width:100%;margin-top:12px;background:transparent;border:1px solid #22375A;color:#9DAFC4;border-radius:12px;padding:13px;cursor:pointer;font-family:var(--f-corpo);font-size:13px;font-weight:600}
.sheet .acao{padding:14px 0 0}

/* ==========================================================
   CAMADA DE MOVIMENTO
   Estados iniciais só valem quando motion.js confirma que o
   GSAP carregou E o usuário não pediu menos movimento.
   Sem JS / reduced-motion => tudo visível, nada quebra.
   ========================================================== */
/* Nada aqui esconde conteúdo.
   O CSS já escondeu [data-reveal] e .stagger>* assim que a classe
   motion-ready entrava — ou seja, ANTES de existir qualquer gatilho. Bastava
   um atraso entre isso e o MOTION.boot() (GSAP vindo do CDN, aparelho lento)
   para a página ficar em branco, sem nada agendado para revelar.
   Agora quem esconde é o JS, no mesmo instante em que arma o gatilho:
   sem JS, ou com JS lento, o conteúdo simplesmente aparece. */

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* A assinatura da logo ("INVESTIMENTO AUTOMOTIVO") é Montserrat Light em caixa
   alta bem espaçada. Os micro-rótulos do site herdam esse mesmo tratamento —
   é o que amarra a tipografia da página à da marca. Anton segue nos títulos. */
.eyebrow,.faixa .k,.flabel,.pl,.fi span,.foto .slot,.galeria .slot,.passo .n,
.dp .saiu,.tag,.cabe,.dp .info span{
  font-family:var(--f-rotulo);
}
.eyebrow,.faixa .k,.fi span,.foto .slot,.galeria .slot,.passo .n{font-weight:600}
.dp .info span{font-weight:400}

/* Resposta ao perfil, no topo da lista. Sem borda-caixa dourada em tudo:
   o caso positivo é discreto, o caso "não fechou" é que precisa de atenção. */
.nota{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:15px 16px;box-shadow:var(--e1);
  /* Entrada por animação CSS, não por ScrollTrigger: render() roda a cada
     troca de filtro e não passa pelo bindReveals. Com "both" ela termina
     visível mesmo se a animação for cortada. */
  animation:nota-entra var(--t-med) var(--ease-out) both}
@keyframes nota-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nota b{display:block;font-family:var(--f-display);font-size:15px;color:var(--txt);line-height:1.25}
.nota span{display:block;margin-top:7px;font-size:12.5px;line-height:1.55;color:var(--mute)}
.nota.ok{border-left-color:var(--wpp);background:transparent;border-color:var(--line);box-shadow:none;padding:13px 16px}
.nota.ok b{font-size:14px}
.nota-cta{margin-top:13px;width:100%;min-height:44px;cursor:pointer;background:var(--wpp);
  color:var(--wpp-txt);border:none;border-radius:11px;font-family:var(--f-display);
  font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.nota-cta:hover{background:#1FBF5C}
.nota-cta:active{transform:scale(.97)}

/* ---------- toque ----------
   No celular não existe :hover. Sem :active o toque não devolve nada e a
   interface parece travada; e o realce de hover, quando dispara, fica preso
   depois do toque. touch-action:manipulation corta o atraso de ~300ms que o
   navegador guarda esperando um duplo-toque. */
button,a[onclick],input,.card,.porta,.dp,.chip,.opt{touch-action:manipulation}

/* Link dentro de texto corrido não pode crescer 44px de altura sem empurrar as
   linhas vizinhas. O pseudo-elemento amplia só a área de toque. */
.link-toque{position:relative;display:inline-block}
.link-toque:after{content:"";position:absolute;left:-6px;right:-6px;top:50%;
  height:44px;transform:translateY(-50%)}

@media (hover:none){
  .porta:hover,.card:hover,.dp:hover{transform:none;box-shadow:var(--e1)}
  .porta:hover .arw{transform:none}
}

/* Pressionar responde na hora — 0,96–0,985 de escala, o suficiente para
   sentir sem deslocar o layout em volta. */
.porta:active,.card:active,.dp:active,.opt:active{
  transform:scale(.985);transition-duration:var(--t-fast)}
.wpp:active,.segue:active,.dock button:active,.chip:active,.fbtn:active,
.mini button:active,.faixa button:active,.local .lk button:active,
.pe .links button:active,.ig:active,.logo:active .mark{
  transform:scale(.96);transition-duration:var(--t-fast)}

/* ---------- celular ---------- */
@media(max-width:700px){
  /* viewport-fit=cover deixa a barra passar por baixo do entalhe/status bar */
  .bar{padding-top:calc(11px + env(safe-area-inset-top))}
  .faixa{top:calc(60px + env(safe-area-inset-top))}
  .overlay,.vov{position:fixed}
  .dock{position:fixed;left:0;right:0;bottom:0}
  .view.dock-on{padding-bottom:96px}
}

/* ==========================================================
   COMPUTADOR
   O celular é a base — nada aqui reescreve o que já funciona lá.
   Daqui para cima o site deixa de ser uma coluna e vira layout.

   As faixas que sangram (barra, hero, faixa de condição, rodapé) não usam
   um <div> interno para centralizar: o padding lateral é
   max(24px, (100vw - 1180px)/2), o que dá a mesma coisa com uma linha.
   ========================================================== */
@media (min-width:701px){
  /* Um único modelo de largura, para tudo alinhar na mesma linha:
     coluna de conteúdo de 1180px, com 24px de respiro nas laterais.
       --lado      → para as faixas que sangram (padding lateral)
       --container → para os blocos centralizados (1180 + os dois respiros)
     Usar os dois no MESMO elemento conta o espaço duas vezes: foi o que
     esmagou o catálogo para uma coluna num monitor de 1920. */
  :root{ --lado:max(24px, calc((100vw - 1180px) / 2)); --container:1228px; }

  body{font-size:15px}

  /* --- faixas que sangram ---
     Altura da barra = 16 + 56 (marca) + 16 = 88px. A faixa de condição gruda
     logo abaixo dela, e a mídia do carro 16px mais abaixo ainda. */
  .bar{padding:16px var(--lado)}
  .mark{width:56px;height:56px;border-radius:15px}
  .hero{padding:84px var(--lado) 92px}
  .faixa{padding:16px var(--lado);top:88px}
  .faixa .k{font-size:9.5px;letter-spacing:.2em;color:var(--gold-txt)}
  .faixa .v{font-size:15px}
  .faixa button{font-size:12.5px;padding:0 20px}
  .pe{padding:64px var(--lado) 50px}
  .pe-logo{width:216px}

  /* --- blocos de conteúdo, centralizados no mesmo contêiner --- */
  .portas,.dep,.selos,.local,.fbar,.fpanel,.passo{
    max-width:var(--container);margin-left:auto;margin-right:auto;
    padding-left:24px;padding-right:24px}

  /* --- hero: o título ganha corpo, a marca vira presença --- */
  h2.big{font-size:clamp(44px,5.2vw,74px);letter-spacing:-.01em}
  .hero .in{max-width:660px}
  .hero .lede{font-size:17px;max-width:32ch;margin-top:20px}
  .hero .marca-fundo{width:min(560px,42vw);height:min(560px,42vw);
    top:50%;transform:translateY(-50%);right:calc(50% - 600px);opacity:.55}

  /* --- catálogo em grade --- */
  .lista,#lista-similar{display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:20px;align-items:start;
    padding-left:24px;padding-right:24px;
    max-width:var(--container);margin-left:auto;margin-right:auto}
  .nota{grid-column:1 / -1}
  .foto{height:180px}
  .dep .deps{grid-template-columns:repeat(4,1fr)}

  /* --- onboarding: uma coluna estreita, centrada --- */
  .passo{max-width:660px;padding-top:56px;padding-bottom:44px}
  .passo h2{font-size:30px}

  /* --- respiro entre seções: no computador o ritmo precisa ser maior --- */
  .portas{padding-top:40px}
  .selos{padding-top:14px}
  .fbar{padding-top:20px}
  .fbtn{font-size:13px}
  .lista{padding-top:18px}

  /* --- endereço: texto à esquerda, ações à direita --- */
  /* Título e endereço empilhados à esquerda, ações à direita. Sem as áreas
     nomeadas os três filhos caem em células soltas e o bloco desmonta. */
  .local{display:grid;grid-template-columns:1fr auto;gap:6px 32px;
    grid-template-areas:"titulo acoes" "endereco acoes";
    align-items:center;margin-top:30px;margin-bottom:34px;padding:26px 30px}
  .local b{grid-area:titulo;align-self:end}
  .local p{grid-area:endereco;align-self:start}
  .local .lk{grid-area:acoes;margin-top:0;align-self:center}
}

@media (min-width:1024px){
  /* --- as três portas lado a lado, como cartões --- */
  .portas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
  .pl{grid-column:1 / -1;margin-bottom:4px}
  .porta{margin-bottom:0;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 22px}
  .porta .arw{margin-left:0;margin-top:auto;align-self:flex-end}
  .porta:hover{transform:translateY(-3px)}

  /* --- os três selos lado a lado --- */
  .selos{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;
    padding-top:34px;margin-top:34px;border-top:1px solid var(--line)}
  .selo{border-bottom:none;flex-direction:column;align-items:flex-start;gap:14px;padding:0}

  /* --- página do carro: mídia fixa à esquerda, decisão à direita --- */
  #v-carro{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,520px);
    gap:0 44px;align-items:start;
    max-width:var(--container);margin-left:auto;margin-right:auto;
    padding:30px 24px 64px}
  .c-midia,.c-info{display:block}
  .c-midia{position:sticky;top:104px}
  .galeria{height:460px;border-radius:var(--r-l);border:1px solid var(--line);box-shadow:var(--e2)}
  /* O arco no canto lia como defeito: pequeno e cortado. Grande e suave, vira
     a marca sustentando a foto. */
  .galeria .arco{left:-120px;bottom:-120px;width:360px;height:360px;opacity:.16}
  .topo{padding:0 0 0}
  .isca,.ficha,.proc,.mc,.agenda,.acao{margin-left:0;margin-right:0}
  .agenda{border-radius:var(--r-m)}
  .acao{padding-left:0;padding-right:0}

  /* --- a dock sai: a conversão vive na barra e na coluna do carro ---
     O JS controla a dock por style inline (display:flex), então aqui
     precisa de !important para vencer. */
  .dock{display:none!important}
  .view.dock-on{padding-bottom:0}
  .bar-wpp{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 18px;
    border-radius:99px;border:none;background:var(--wpp);color:var(--wpp-txt);
    font-family:var(--f-display);font-size:13px;letter-spacing:.02em;cursor:pointer;
    transition:var(--t-fast) var(--ease)}
  .bar-wpp svg{width:17px;height:17px;fill:currentColor}
  .bar-wpp:hover{background:#1FBF5C;transform:translateY(-1px)}
  .bar-wpp:active{transform:scale(.97)}
}

/* ======================================================
   FOTOS REAIS DOS CARROS
   ====================================================== */
.foto{height:auto;aspect-ratio:4/3}
.foto img.real,.galeria img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;background:var(--navy-deep)}
.foto img.real{transition:transform var(--t-slow) var(--ease-out)}
.card:hover .foto img.real{transform:scale(1.05)}
.foto .tag{z-index:2}
.galeria{height:auto;aspect-ratio:4/3;max-height:440px}


/* ==========================================================
   VITRINE — PASSO DE ACABAMENTO
   Menos borda, mais ar. O dourado passa a significar uma coisa
   só: filtro ligado. Tudo que não está ligado é texto.
   ========================================================== */

/* --- cabeça da vitrine: um número, um foco --- */
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 20px 16px}
.vhead .vtit{display:flex;align-items:baseline;gap:9px}
.vhead .vtit b{font-family:var(--f-numero);font-weight:400;font-size:34px;line-height:1;color:var(--txt)}
.vhead .vtit span{font-size:15px;color:var(--mute)}
.ord{display:flex;gap:2px;flex-wrap:wrap}
.ordop{background:none;border:0;padding:8px 12px;border-radius:99px;font:inherit;font-size:13.5px;color:var(--mute);cursor:pointer;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.ordop:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.ordop.on{color:var(--gold-txt);font-weight:600}

/* --- painel de filtro: nasce aberto, em linhas rotuladas --- */
.fbar{display:none}
.fpanel,.fpanel.on{display:block;max-height:none;overflow:visible;opacity:1;padding:0 20px 18px}
.fpanel .frow{display:flex;align-items:center;gap:14px;padding:5px 0}
.fpanel .flabel{flex:0 0 58px;width:58px;margin:0;font-family:var(--f-rotulo);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-dim)}
.fpanel .chips{display:flex;gap:4px;flex-wrap:wrap;margin:0;padding:0}

/* --- chip: texto. Vira pastilha dourada só quando está ligado. --- */
.chip{background:none;border:0;padding:8px 12px;border-radius:99px;color:var(--mute);font:inherit;font-size:13.5px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.chip:hover{background:rgba(255,255,255,.05);color:var(--txt);border:0}
.chip i{font-style:normal;font-size:12px;color:var(--mute-dim)}
.chip.tudo{color:var(--txt);font-weight:600;background:none}
.chip.tudo:hover{background:rgba(255,255,255,.05)}
.chip.on{background:var(--gold);color:#1A1305;font-weight:600;padding-left:15px;border:0}
.chip.on i{color:rgba(26,19,5,.55)}
.chip.on:hover{background:var(--gold-txt);color:#1A1305}
.chip .x{width:11px;height:11px;flex:0 0 11px}
.fclear{margin:8px 0 0 72px;padding:6px 0;background:none;border:0;font:inherit;font-size:13px;color:var(--mute);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.fclear:hover{color:var(--txt)}

/* --- card: sem borda, a sombra é que levanta --- */
.card{border:0;border-radius:22px;box-shadow:0 18px 40px -28px rgba(0,0,0,.95)}
.card:hover{border:0;box-shadow:0 26px 54px -26px rgba(0,0,0,.95)}
.card .meta{color:var(--mute-dim)}
.card .tag{left:auto;right:11px;top:11px}

/* --- selo do card. Nome próprio: .selo já existia na home, pros
       três distintivos que giram no hero. --- */
.selo-hv{position:absolute;top:11px;left:11px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:99px;background:rgba(7,18,36,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--gold-txt);font-family:var(--f-rotulo);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.selo-hv svg{width:13px;height:13px;flex:0 0 13px}

/* --- filtro sem resultado: antes era uma div de 0 pixel --- */
.vaziofil{grid-column:1/-1;display:flex;align-items:center;gap:30px;padding:38px 30px;border-radius:20px;background:rgba(19,37,64,.5)}
.vaziofil .lupa{width:84px;height:84px;flex:0 0 84px}
.vaziotxt h3{margin:0 0 10px;font-family:var(--f-display);font-weight:400;font-size:23px;line-height:1.2;color:var(--txt)}
.vaziotxt p{margin:0;max-width:420px;font-size:15px;line-height:1.6;color:var(--mute)}
.vazioacoes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.vwpp{background:#25D366;color:#062E14;border:0;border-radius:99px;padding:13px 22px;font-family:var(--f-display);font-size:15px;cursor:pointer}
.vwpp:hover{filter:brightness(1.06)}
.vlimpa{background:none;border:0;padding:6px 0;font:inherit;font-size:14px;color:var(--mute);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.vlimpa:hover{color:var(--txt)}

/* --- faixa dos que estão chegando --- */
.chegfaixa:empty{display:none}
.chegfaixa{margin:26px 20px 8px;padding-top:26px;border-top:1px solid rgba(255,255,255,.07)}
.chegtopo{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.chegmarca{display:inline-flex;flex:0 0 auto;opacity:.92}
.chegmarca svg{display:block}
.chegdiz b{display:block;font-family:var(--f-display);font-weight:400;font-size:19px;color:var(--txt)}
.chegdiz span{display:block;margin-top:3px;font-size:13.5px;color:var(--mute)}
.cheggrade{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.chegitem{text-align:left;background:rgba(19,37,64,.55);border:0;border-radius:14px;padding:14px 16px;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.chegitem:hover{background:var(--hover)}
.chegnome{display:block;font-family:var(--f-display);font-size:15px;color:var(--txt)}
.chegano{display:block;margin-top:4px;font-size:12.5px;color:var(--mute-dim)}

@media (min-width:701px){
  .vhead{max-width:var(--container);margin:0 auto;padding:30px 24px 18px}
  .fpanel,.fpanel.on{max-width:var(--container);margin:0 auto;padding:0 24px 22px}
  .chegfaixa{max-width:var(--container);margin:30px auto 10px;padding:26px 24px 0}
}

@media (max-width:700px){
  .vhead{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 16px 12px}
  .vhead .vtit b{font-size:28px}
  .ord{margin-left:-12px}
  .fpanel,.fpanel.on{padding:0 0 14px}
  .fpanel .frow{gap:8px;padding:3px 16px}
  .fpanel .flabel{flex:0 0 44px;width:44px;font-size:10px;letter-spacing:.12em}
  .fpanel .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:16px}
  .fpanel .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
  .fclear{margin-left:16px}
  .vaziofil{flex-direction:column;align-items:flex-start;gap:20px;padding:26px 22px}
  .vaziofil .lupa{width:64px;height:64px;flex:0 0 64px}
  .chegfaixa{margin:22px 16px 8px}
  .cheggrade{grid-template-columns:1fr 1fr;gap:8px}
}