@font-face{font-family:'c-a-c';src:url(c-a-c.woff2) format('woff2');font-display:swap}
@font-face{font-family:'c-s-d';src:url(c-s-d.woff2) format('woff2');font-display:swap}
@font-face{font-family:'c-s-r';src:url(c-s-r.woff2) format('woff2');font-display:swap}
:root{--cyan:#00BEFF;--cyan2:#00ADEF;--zap:#0dc142;--mut:#9d9d9d;--lin:#2c2c2c;--sup:#141414;
      /* O ciano da marca sobre BRANCO nao tem contraste para texto (fica perto
         de 2:1). Esta versao escurecida e para texto e link dentro do cartao;
         o ciano original continua nos botoes e sobre o fundo escuro. */
      --cyan-texto:#0077a8;--tinta:#141414;--tinta-fraca:#5a5a5a;--lin-clara:#dcdcdc;
      --zapbar:74px;--rodape:74px}
*{box-sizing:border-box}
/* O h1 existe para leitor de tela e para o buscador: a pagina precisa de um
   titulo unico, e o desenho aprovado nao tem onde po-lo. Nao e texto oculto
   para enganar ninguem - diz exatamente o que a pagina e. */
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{margin:0;padding-bottom:var(--rodape);color:#fff;background:#000;
  background:linear-gradient(180deg,#000 0,#2e2e2e 300px,#000 1000px) no-repeat;
  font-family:'c-s-r',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.bt,legend{font-family:'c-a-c',Helvetica,Arial,sans-serif;
  font-weight:400;line-height:1}
.link-legal,h3,.topo b,.lema{font-family:'c-s-d',Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
header .env svg{display:block}
.env{max-width:1160px;margin:0 auto;padding:0 20px}

/* ---- topo ---- */
header{border-bottom:1px solid var(--lin);position:sticky;top:0;z-index:30;
  background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}
header .env{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px;
  transition:height .22s ease}
header .marca svg{height:24px;width:auto;transition:height .22s ease}
header .marca svg path{fill:#fff}
/* A estrela e o simbolo mais forte da pagina e estava menor que o nome da
   concessionaria. Sobe para 46px - a marca do fabricante manda, a do
   revendedor acompanha. */
header .estrela svg{height:46px;width:auto;transition:height .22s ease}
header .estrela svg *{fill:#fff}
/* Rolou: o topo cede altura para o conteudo, sem sumir. */
header.compacto .env{height:52px}
header.compacto .marca svg{height:19px}
header.compacto .estrela svg{height:32px}
@media(max-width:380px){
  header .estrela svg{height:36px}
  header .marca svg{height:20px}
  header.compacto .estrela svg{height:28px}
  header.compacto .marca svg{height:17px}
}
@media(prefers-reduced-motion:reduce){
  header .env,header .marca svg,header .estrela svg{transition:none}}

/* ---- carrossel ---- */
.carrossel{position:relative}
.trilho{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.trilho::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.palco{position:relative}
.foto{position:relative;background:#0a0a0a}
.foto img{width:100%;height:auto}
.veu{display:none}

.oferta{max-width:1160px;margin:0 auto;padding:24px 20px 4px}
h2{font-size:2rem;margin:0 0 6px}
.carro{margin:0 0 18px;font-size:1.02rem;color:var(--mut);font-family:'c-s-d',Helvetica,Arial,sans-serif}
h2:last-child{margin-bottom:18px}
/* A arte tem 504px de largura de verdade. Deixar passar disso e borrar o texto
   que esta dentro dela; reduzir e sempre nitido. Entao ela encolhe, nunca cresce. */
.arte{width:100%;max-width:504px;height:auto}
/* CELULAR: a arte e o titulo no centro. No desktop nao - la a oferta ocupa a
   coluna esquerda do banner, e centralizar dentro de uma coluna estreita
   deixaria o texto boiando longe da margem. */
@media(max-width:999px){
  .oferta{text-align:center}
  .arte{margin-left:auto;margin-right:auto}
  .oferta .acoes{justify-content:center}
  .oferta .carro{text-align:center}
}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}
.bt{display:inline-block;background:var(--cyan);color:#fff;text-decoration:none;
  border:1px solid var(--cyan);padding:13px 30px;font-size:1.1rem;cursor:pointer;
  transition:all .25s ease-out}
.bt:hover{background:#2a2a2a;border-color:#2a2a2a}
.link-legal{background:none;border:0;color:var(--mut);font-size:.78rem;cursor:pointer;
  text-decoration:underline;padding:0}
.link-legal:hover{color:#fff}

.detalhe{max-width:1160px;margin:0 auto;padding:6px 20px 40px}
h3{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:26px 0 10px}
.itens{list-style:none;padding:0;margin:0;display:grid;gap:8px 24px;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.itens li{font-size:.93rem;padding-left:20px;position:relative;color:#e6e6e6}
.itens li::before{content:'';position:absolute;left:0;top:.52em;width:8px;height:1px;background:var(--cyan)}

/* ---- SETAS: o aviso de que da para ir pro lado ----
   Sem circulo e sem caixa. E so o sinal de maior, branco, com sombra para
   aguentar tanto o ceu claro quanto a montanha escura da foto. A seta da
   frente da um empurrao de leve ate a pessoa deslizar a primeira vez - depois
   disso o convite ja foi feito e ela para. */
.seta{position:absolute;top:50%;transform:translateY(-50%);z-index:7;
  border:0;background:none;padding:0 6px;cursor:pointer;color:#fff;
  font-size:2.6rem;line-height:1;opacity:.72;
  text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.6);
  transition:opacity .2s,color .2s}
.seta{text-decoration:none;display:flex;align-items:center;justify-content:center}
.seta:hover{opacity:1;color:var(--cyan)}
.ant{left:6px}
.prox{right:6px}
.chama{animation:acena 2.2s ease-in-out infinite}
.chama.quieta{animation:none}
@keyframes acena{0%,100%{transform:translateY(-50%) translateX(0)}
                 50%{transform:translateY(-50%) translateX(6px)}}
@media(prefers-reduced-motion:reduce){.chama{animation:none}}

.pontos{position:absolute;z-index:7;left:0;right:0;bottom:14px;
  display:flex;justify-content:center;gap:9px}
.ponto{width:9px;height:9px;border-radius:50%;border:0;display:block;background:rgba(255,255,255,.42);
  cursor:pointer;padding:0;transition:all .2s;box-shadow:0 1px 5px rgba(0,0,0,.6)}
.ponto[aria-current="true"]{background:var(--cyan);transform:scale(1.35)}

/* ---- DESKTOP: a mesma geometria do banner do site ----
   O site poe a legenda em `left:5%; right:65%` - ou seja, uma coluna de 30% da
   largura, ancorada no TOPO. E nao e coincidencia: 30% de 1680px da 504px, que
   e exatamente a largura da arte da oferta. A arte foi desenhada para essa
   coluna. Reproduzindo a geometria, ela cai no lugar para que foi feita.

   E o banner vai INTEIRO, sem recorte. Antes eu cortava ele para caber numa
   altura fixa (object-fit:cover), o que refazia o enquadramento que o
   fotografo compos - dai o ar estranho. Ele tem 2,847:1 e fica com 506px de
   altura numa tela de 1440, o que cabe folgado acima da dobra. */
@media(min-width:1000px){
  .foto,.foto picture{width:100%}
  .foto img{width:100%;height:auto}
  .veu{display:block;position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.74) 24%,
                               rgba(0,0,0,.34) 42%,rgba(0,0,0,0) 60%)}
  .oferta{position:absolute;top:0;left:5%;width:30%;min-width:300px;max-width:504px;
    margin:0;padding:clamp(18px,3vw,44px) 0 0;display:block;pointer-events:none}
  .oferta>*{pointer-events:auto}
  .arte{width:100%;max-width:504px}
  h2{font-size:clamp(1.6rem,2.2vw,2.6rem);margin:0 0 6px}
  h2:last-child{margin-bottom:clamp(10px,1.5vw,20px)}
  .carro{margin:0 0 clamp(10px,1.5vw,20px);font-size:clamp(.95rem,1.1vw,1.15rem)}
  .acoes{margin-top:clamp(12px,1.8vw,24px);gap:clamp(10px,1.4vw,18px)}

  /* Bolinhas maiores no desktop, como o carrossel do site. */
  .pontos{bottom:20px}
  .ponto{width:11px;height:11px}

  /* Equipamentos: tres colunas num bloco de largura contida. Espalhados em
     quatro colunas na largura toda, seis itens viravam uma tirinha de duas
     linhas boiando. */
  .detalhe{padding-top:38px;max-width:900px}
  .itens{grid-template-columns:repeat(3,1fr);gap:12px 30px}

  /* Formulario: a coluna encolhe para o cartao nao ficar encostado a esquerda
     com 540px de preto do lado. */
  #simular .env{max-width:720px}

  .seta{font-size:3.4rem;padding:0 10px}
  .ant{left:14px}
  .prox{right:14px}
}
@media(min-width:1400px){.ant{left:28px}.prox{right:28px}}

/* ---- formulario ---- */
#simular{scroll-margin-top:70px;padding:52px 0 60px}
.cartao,.etapa{scroll-margin-bottom:calc(var(--rodape) + 16px)}
#simular h2{font-size:1.7rem}
.sub{color:var(--mut);margin:0 0 26px;font-size:.97rem}
/* ---- o cartao do formulario e BRANCO ----
   O resto da pagina e escuro; o bloco onde a pessoa digita destaca por
   inversao, e campo de texto claro e o que todo mundo espera preencher. */
.cartao{border:1px solid var(--lin-clara);background:#fff;color:var(--tinta);
  max-width:620px;border-radius:2px}
.cartao .topo{border-bottom:1px solid var(--lin-clara);padding:14px 20px;font-size:.8rem;
  color:var(--tinta-fraca);display:flex;justify-content:space-between;gap:12px}
.cartao .topo b{color:var(--cyan-texto)}
.barra{display:flex;gap:5px;padding:0 20px;margin:18px 0 26px}
.barra i{flex:1;height:3px;background:#e2e2e2;transition:background .25s}
.barra i.on{background:var(--cyan)}
fieldset{border:0;margin:0;padding:0 20px 20px}
legend{font-size:1.4rem;padding:0;margin-bottom:16px;color:var(--tinta)}
.ops{display:grid;gap:9px}
.ops label{display:block;border:1px solid var(--lin-clara);background:#fff;
  padding:14px 16px;cursor:pointer;font-size:1rem;transition:all .18s}
.ops label:hover{border-color:#9a9a9a}
.ops input{position:absolute;opacity:0;pointer-events:none}
.ops label:has(input:checked){border-color:var(--cyan-texto);background:rgba(0,119,168,.07)}
.ops input:checked+span{color:var(--cyan-texto)}
.rodape-form{border-top:1px solid var(--lin-clara);padding:16px 20px;display:flex;
  justify-content:space-between;align-items:center;gap:12px}
.rodape-form[hidden]{display:none}
.voltar{background:none;border:0;color:var(--tinta-fraca);cursor:pointer;font-size:.9rem}
.voltar:hover{color:var(--tinta)}
/* Sem o Voltar, o Continuar sozinho tem que ir para a direita. */
.voltar[hidden]+.continuar{margin-left:auto}
.continuar{background:var(--cyan);border:1px solid var(--cyan);color:#fff;cursor:pointer;
  font-family:'c-a-c',Helvetica,Arial,sans-serif;font-size:1.05rem;padding:10px 26px;
  transition:all .2s}
.continuar:hover:not([disabled]){background:#2a2a2a;border-color:#2a2a2a}
.continuar[disabled]{background:none;border-color:var(--lin-clara);color:#b0b0b0;cursor:default}
/* ---- etapa de contato ---- */
.campos{display:grid;gap:14px}
.campo{display:block}
.campo span{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-fraca);margin-bottom:7px}
.campo input{width:100%;background:#fff;border:1px solid var(--lin-clara);color:var(--tinta);
  font-family:'c-s-r',Helvetica,Arial,sans-serif;font-size:1.05rem;padding:13px 15px;
  transition:border-color .18s}
.campo input::placeholder{color:#9a9a9a}
.campo input:focus{outline:none;border-color:var(--cyan-texto);box-shadow:0 0 0 3px rgba(0,119,168,.14)}
.campo input[aria-invalid="true"]{border-color:#d9534f}
/* Fora da tela, mas presente no HTML. `display:none` seria mais simples e e
   justamente o que parte dos robos aprende a pular. */
.confirme{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.aceite{display:flex;gap:11px;align-items:flex-start;margin:20px 0 4px;cursor:pointer;
  font-size:.83rem;color:var(--tinta-fraca);line-height:1.5}
.aceite input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--cyan-texto);cursor:pointer}
.aceite a{color:var(--cyan-texto)}
.erro{color:#b3261e;font-size:.85rem;margin:12px 0 0}
.enviar{margin-top:18px;width:100%;text-align:center}

/* ---- barra de cookies ----
   Fica ACIMA da barra do WhatsApp, nao no lugar dela: as duas sao fixas no
   rodape e sobrepostas uma esconderia a outra. */
.cookies{position:fixed;left:0;right:0;bottom:var(--zapbar);z-index:41;
  background:rgba(10,10,10,.97);border-top:1px solid var(--lin);
  backdrop-filter:blur(8px);padding:14px 0}
.cookies .env{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookies p{margin:0;font-size:.8rem;color:var(--mut);flex:1;min-width:200px;line-height:1.5}
.cookies a{color:var(--cyan)}
.bt-cookies{background:none;border:1px solid var(--lin);color:#fff;cursor:pointer;
  font-family:'c-a-c',Helvetica,Arial,sans-serif;font-size:1rem;padding:9px 26px;
  transition:all .2s}
.bt-cookies:hover{background:var(--cyan);border-color:var(--cyan)}
@media(max-width:699px){.bt-cookies{width:100%}}

.fim{padding:32px 20px 26px;text-align:center}
.fim-titulo{font-family:'c-a-c',Helvetica,Arial,sans-serif;font-size:1.9rem;margin:0 0 10px;color:var(--tinta)}
.fim-ajuda b{color:var(--tinta)}
.fim-ajuda{color:var(--tinta-fraca);font-size:.92rem;margin:0 auto 22px;max-width:38ch;line-height:1.5}
.zap-fim{display:inline-flex;align-items:center;gap:9px;max-width:100%;
  white-space:normal;text-align:left}
/* A referencia fica pequena de proposito: e para o consultor conferir se
   precisar, nao para o cliente decorar. Quem carrega o codigo e o link. */
.fim-ref{margin:18px 0 0;font-size:.74rem;color:#8a8a8a;letter-spacing:.04em}
.cod{color:var(--tinta-fraca);letter-spacing:.14em}

/* ---- barra fixa do WhatsApp ----
   COM O TECLADO ABERTO as duas barras fixas somem. No celular o teclado ocupa
   mais da metade da tela, e `position:fixed` gruda no novo fundo - ou seja,
   elas se plantam exatamente em cima do formulario que a pessoa esta
   preenchendo, e nao sobra espaco para rolar ate o resto dos campos.
   Enquanto ela digita o contato, o atalho do WhatsApp nao serve para nada. */
body.digitando .zap-fixo,
body.digitando .cookies{display:none}

/* ---- barra fixa do WhatsApp ---- */
.zap-fixo{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(0,0,0,.94);border-top:1px solid var(--lin);
  backdrop-filter:blur(8px);padding:11px 0}
.zap-fixo .env{display:flex;align-items:center;justify-content:space-between;gap:14px}
.zap-fixo .quem{font-size:.85rem;color:var(--mut);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.zap-fixo .quem b{color:#fff;font-family:'c-s-d'}
.zap{background:var(--zap);border-color:var(--zap);display:inline-flex;align-items:center;
  gap:9px;padding:12px 24px;white-space:nowrap}
.zap:hover{background:#0aa838;border-color:#0aa838}
.zap svg{width:19px;height:19px;fill:#fff;flex:none}
@media(max-width:699px){
  .zap-fixo .quem{display:none}
  .zap-fixo .env{padding:0 14px}
  .zap{flex:1;justify-content:center}
}

.enc-corpo{padding:26px 20px 44px}
.enc-aviso{margin:0 0 10px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:#e8c98a;font-family:'c-s-d',Helvetica,Arial,sans-serif}
#encerrada .acoes{margin-bottom:8px}
#encerrada .link-legal{text-decoration:none;color:var(--cyan)}
#encerrada .link-legal:hover{color:#fff}
@media(min-width:1000px){
  #encerrada .foto,#encerrada .foto picture{width:100%}
  #encerrada .foto img{width:100%;height:auto}
  #encerrada .enc-corpo{max-width:1160px;margin:0 auto}
}

/* ---- legal ---- */
dialog{border:1px solid var(--lin);background:#111;color:#ddd;max-width:640px;width:92%;
  padding:0;font-size:.85rem;line-height:1.6}
dialog::backdrop{background:rgba(0,0,0,.8)}
dialog .dtopo{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--lin);padding:14px 20px}
dialog .dtopo h4{font-family:'c-a-c';font-weight:400;font-size:1.25rem;margin:0;color:#fff}
dialog .dcorpo{padding:20px;max-height:60vh;overflow:auto}
dialog .dtopo button{background:none;border:0;color:var(--mut);font-size:1.5rem;
  cursor:pointer;line-height:1}

footer{border-top:1px solid var(--lin);padding:30px 0 40px;color:var(--mut);font-size:.78rem}
footer .env{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
footer .lema{color:#fff}