/* ==========================================================
   PISTA 47 · estilo
   >>> TROCAR AS CORES E FONTES AQUI (o resto se ajusta sozinho)
   ========================================================== */
:root{
  --fundo:#0c0e11;          /* fundo (carbono) */
  --painel:#15181d;         /* cartões */
  --painel-2:#1c2027;
  --texto:#eef1f4;
  --cinza:#8b94a1;          /* textos secundários */
  --linha:rgba(238,241,244,.1);
  --lima:#c8ff2e;           /* cor de destaque */
  --lima-escuro:#a6dc0c;
  --fonte-titulo:'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --fonte-mono:'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --raio:6px;
  --gutter:18px;
}

/* ---------- base ---------- */
main{overflow-x:clip}
.og [data-status]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--fundo);color:var(--texto);font:16px/1.55 var(--fonte-titulo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.mono{font-family:var(--fonte-mono);letter-spacing:.02em}
.ic{width:1.15em;height:1.15em;flex:none}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:0 22px;border-radius:var(--raio);border:1.5px solid transparent;
  font:800 15px/1 var(--fonte-titulo);font-stretch:112%;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;
  transition:background .2s, color .2s, transform .12s;
}
.btn:active{transform:scale(.97)}
.btn-lima{background:var(--lima);color:#0c0e11}
.btn-lima:hover{background:#d9ff6a}
.btn-contorno{border-color:rgba(238,241,244,.3);color:var(--texto)}
.btn-contorno:hover{border-color:var(--lima);color:var(--lima)}
.btn-mini{min-height:40px;padding:0 16px;font-size:13px;background:var(--lima);color:#0c0e11}
.btn-largo{width:100%;min-height:58px;font-size:16px}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--gutter);background:rgba(12,14,17,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linha);
}
.marca{display:flex;align-items:center;gap:10px}
.marca-barras{display:flex;gap:3px;transform:skewX(-20deg)}
.marca-barras i{width:5px;height:22px;background:var(--lima)}
.marca-barras i:nth-child(2){opacity:.6}
.marca-barras i:nth-child(3){opacity:.3}
.marca-nome{font:900 22px/1 var(--fonte-titulo);font-stretch:125%;font-style:italic;letter-spacing:-.01em}
.marca-nome b{color:var(--lima);font-weight:900;margin-left:2px}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;padding:36px var(--gutter) 30px;
  background:
    radial-gradient(80% 50% at 85% 75%,rgba(200,255,46,.16),transparent 70%),
    linear-gradient(var(--linha) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,var(--linha) 1px,transparent 1px) 0 0/28px 28px;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,var(--fundo));pointer-events:none}
.hero > *{position:relative;z-index:1}
.rotulo{font-size:12.5px;color:var(--lima);text-transform:uppercase}
h1{
  margin-top:16px;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(40px,12.2vw,96px);line-height:.92;letter-spacing:-.03em;
}
.destaque{color:var(--lima);font-style:italic}
.lead{margin-top:18px;color:#bcc3cc;font-size:16.5px;max-width:38ch}
.status{margin-top:18px;display:inline-flex;align-items:center;gap:9px;font-size:12.5px;text-transform:uppercase;color:var(--cinza);border:1px solid var(--linha);padding:7px 12px;border-radius:var(--raio)}
.status-ponto{width:8px;height:8px;border-radius:50%;background:#ff5a4f;flex:none}
.status.aberto{color:var(--texto)}
.status.aberto .status-ponto{background:var(--lima);box-shadow:0 0 10px var(--lima)}
.acoes{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acoes .btn{padding:0 12px;font-stretch:100%;font-size:14px}
.hero-carro{margin:30px calc(var(--gutter) * -1) 0;position:relative}
.carro{width:112%;max-width:none;margin-left:-6%;height:auto;display:block}
.carro-brilho{animation:passa 4.5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes passa{0%{transform:skewX(-20deg) translateX(0)}60%,100%{transform:skewX(-20deg) translateX(620px)}}
.hero-foto{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--raio)}
.hero-legenda{position:absolute;right:var(--gutter);top:0;font-size:11px;color:var(--cinza)}

/* ---------- trilho de palavras ---------- */
.trilho{border-block:1px solid var(--linha);overflow:hidden;padding:12px 0;background:var(--painel)}
.trilho-in{display:flex;width:max-content;animation:corre 30s linear infinite}
.trilho-in span{font-size:13px;text-transform:uppercase;color:var(--cinza);padding:0 18px;position:relative}
.trilho-in span::after{content:"/";position:absolute;right:-4px;color:var(--lima)}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- seções ---------- */
.secao{max-width:1120px;margin:0 auto;padding:64px var(--gutter) 0}
.secao-cab{margin-bottom:24px}
h2{margin-top:8px;font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(32px,9.4vw,56px);line-height:.95;letter-spacing:-.02em}

/* ---------- seletor de porte ---------- */
.porte{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:16px;position:sticky;top:64px;z-index:20;padding:10px 0;background:var(--fundo)}
.porte-rotulo{width:100%;font-size:11.5px;color:var(--cinza);text-transform:uppercase;border:0;padding:0}
.porte label,.chips label{position:relative;cursor:pointer}
.porte input,.chips input{position:absolute;opacity:0;pointer-events:none}
.porte label span,.chips span{
  display:block;padding:10px 14px;border-radius:var(--raio);border:1.5px solid rgba(238,241,244,.2);
  font-weight:700;font-size:14.5px;transition:background .15s,color .15s,border-color .15s;
}
.porte input:checked + span,.chips input:checked + span{background:var(--lima);color:#0c0e11;border-color:var(--lima)}
.porte input:focus-visible + span,.chips input:focus-visible + span{outline:2px solid var(--lima);outline-offset:2px}

/* ---------- cartões de serviço ---------- */
.servicos{display:grid;gap:10px}
.servico{
  position:relative;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 18px 14px;
  transition:border-color .2s;
}
.servico::before{content:"";position:absolute;left:0;top:18px;width:3px;height:26px;background:var(--lima);opacity:0;transition:opacity .2s}
.servico.marcado{border-color:var(--lima)}
.servico.marcado::before{opacity:1}
.servico-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.servico-num{font-size:12px;color:var(--cinza)}
.servico-ic{width:30px;height:30px;color:var(--lima)}
.servico h3{font-weight:800;font-stretch:110%;font-size:21px;line-height:1.1;text-transform:uppercase;letter-spacing:-.01em}
.servico p{margin-top:8px;color:#a9b1bc;font-size:15px}
.servico-pe{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:16px;padding-top:12px;border-top:1px dashed var(--linha)}
.servico-preco{font-weight:800;font-size:22px;font-stretch:105%;font-variant-numeric:tabular-nums}
.servico-preco small{display:block;font:500 11px var(--fonte-mono);color:var(--cinza);text-transform:uppercase;letter-spacing:.04em}
.servico-preco.avaliar{font-size:17px;color:var(--lima)}
.servico-prazo{font-size:12px;color:var(--cinza);white-space:nowrap}
.servico-add{
  margin-top:12px;width:100%;min-height:42px;border-radius:var(--raio);border:1px dashed rgba(238,241,244,.25);
  background:transparent;cursor:pointer;font:600 13px var(--fonte-mono);color:var(--cinza);text-transform:uppercase;
}
.servico.marcado .servico-add{background:rgba(200,255,46,.1);border:1px solid var(--lima);color:var(--lima)}
.aviso-preco{margin-top:14px;font-size:11.5px;color:var(--cinza)}

/* ---------- antes e depois ---------- */
.comparacoes{display:grid;gap:16px}
.comparar{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);user-select:none;-webkit-user-select:none}
.ad-camada{position:absolute;inset:0;display:grid;place-items:center}
.ad-camada img{width:100%;height:100%;object-fit:cover}
.ad-camada svg{width:80%;height:auto}
.ad-depois{clip-path:inset(0 0 0 var(--pos))}
.ad-linha{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--lima);pointer-events:none;box-shadow:0 0 12px rgba(200,255,46,.6)}
.ad-pegador{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:var(--lima);color:#0c0e11;display:grid;place-items:center;font:800 16px var(--fonte-mono);letter-spacing:-.1em;
}
.ad-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ad-tag{position:absolute;top:12px;font-size:11px;text-transform:uppercase;padding:5px 9px;border-radius:4px;pointer-events:none}
.ad-tag-antes{left:12px;background:rgba(0,0,0,.6);color:var(--texto)}
.ad-tag-depois{right:12px;background:var(--lima);color:#0c0e11}
.comparar figcaption{position:absolute;left:12px;bottom:12px;font-size:11.5px;background:rgba(0,0,0,.6);padding:5px 9px;border-radius:4px;pointer-events:none;text-transform:uppercase}
.comparar figcaption i{font-style:normal;color:var(--cinza);margin-left:4px}
/* desenhos de exemplo (somem quando colocar foto) */
.ad-pintura-antes{
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.25) 0 1px,transparent 1.5px) 0 0/23px 19px,
    radial-gradient(circle at 70% 60%,rgba(220,200,170,.25) 0 1.2px,transparent 1.6px) 0 0/31px 27px,
    repeating-radial-gradient(circle at 62% 38%,rgba(255,255,255,.07) 0 1px,transparent 1px 7px),
    repeating-radial-gradient(circle at 25% 75%,rgba(255,255,255,.06) 0 1px,transparent 1px 9px),
    linear-gradient(160deg,#6d4146,#3d2729 70%,#2c1d1f);
  filter:saturate(.7);
}
.ad-pintura-depois{
  background:
    linear-gradient(104deg,transparent 46%,rgba(255,255,255,.55) 47.5%,rgba(255,255,255,.1) 50%,transparent 51%),
    linear-gradient(104deg,transparent 56%,rgba(255,255,255,.18) 57%,transparent 60%),
    radial-gradient(70% 50% at 35% 15%,rgba(255,255,255,.45),transparent 60%),
    linear-gradient(160deg,#d0142f,#7a0716 55%,#2d0207);
}
.ad-farol-antes{background:radial-gradient(circle at 50% 50%,#3a3326,#1b1914)}
.ad-farol-antes svg{filter:blur(.6px)}
.ad-farol-depois{background:radial-gradient(circle at 50% 50%,#1f2731,#0b0e12)}

/* ---------- passos ---------- */
.passos{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--linha)}
.passos li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:18px 0;border-bottom:1px solid var(--linha)}
.passos span{font-size:22px;font-weight:700;color:var(--lima)}
.passos b{display:block;font-weight:800;font-stretch:110%;text-transform:uppercase;font-size:17px;margin-bottom:2px}
.passos div{color:#a9b1bc;font-size:15px}

/* ---------- orçamento ---------- */
.orcamento{background:var(--painel);border:1px solid var(--linha);border-radius:10px;padding:26px 18px;position:relative;overflow:hidden}
.orcamento::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--lima) 0 24px,transparent 24px 32px)}
.form{display:grid;gap:18px}
.campo{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.campo > span,.campo legend{font-size:12px;text-transform:uppercase;color:var(--lima);padding:0}
.campo legend small{color:var(--cinza);text-transform:none;font-size:11.5px}
.campo input,.campo textarea{
  width:100%;min-height:52px;padding:14px;border-radius:var(--raio);border:1.5px solid rgba(238,241,244,.18);
  background:var(--fundo);color:var(--texto);font:500 16px var(--fonte-titulo);resize:vertical;
}
.campo input::placeholder,.campo textarea::placeholder{color:#5d6672}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--lima)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:14px;padding:9px 12px}
.nota{font-size:12px;color:var(--cinza);text-align:center}
.destaque-pulso{animation:pulso 1s ease}
@keyframes pulso{30%{box-shadow:0 0 0 3px var(--lima)}}

/* ---------- horários e endereço ---------- */
.secao-onde{display:grid;gap:56px;padding-bottom:70px}
.secao-onde .status{margin:0 0 14px}
.horarios{width:100%;border-collapse:collapse;font-size:15.5px}
.horarios th,.horarios td{padding:12px 2px;border-bottom:1px solid var(--linha);text-align:left}
.horarios th{font-weight:600;color:#bcc3cc}
.horarios td{text-align:right;font-family:var(--fonte-mono);font-size:14px}
.horarios tr.fechado td{color:var(--cinza)}
.horarios tr.hoje th,.horarios tr.hoje td{color:var(--lima)}
.horarios tr.hoje th::before{content:"› "}
.endereco{font-style:normal;font-size:18px;font-weight:700;margin-bottom:16px}
.mapa{aspect-ratio:4/3;border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);background:var(--painel)}
.mapa iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.4) brightness(.9)}
.secao-onde .acoes{margin-top:12px}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);padding:40px var(--gutter) 100px;text-align:center;background:var(--painel)}
.rodape-marca{font-size:30px;margin-bottom:10px}
.rodape p{font-size:12.5px;color:var(--cinza)}
.demo{margin-top:22px;padding-top:16px;border-top:1px solid var(--linha);font:12.5px var(--fonte-titulo);color:#6c7480}
.demo a{text-decoration:underline;text-underline-offset:3px}

/* ---------- botão flutuante ---------- */
.flutuante{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--lima);color:#0c0e11;box-shadow:0 8px 24px -4px rgba(200,255,46,.45);
  transform:translateY(90px);transition:transform .3s ease;
}
.flutuante svg{width:28px;height:28px}
.flutuante.visivel{transform:none}

/* ---------- telas maiores ---------- */
@media (min-width:760px){
  :root{--gutter:36px}
  .hero{padding-top:70px;display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:center}
  .hero > p,.hero > h1,.hero > .acoes{grid-column:1}
  h1{font-size:clamp(48px,6vw,92px)}
  .hero-carro{grid-column:2;grid-row:1/7;margin:0}
  .carro{width:118%;margin-left:0}
  .acoes{max-width:440px}
  .porte-rotulo{width:auto;margin-right:6px}
  .servicos{grid-template-columns:repeat(3,1fr)}
  .comparacoes{grid-template-columns:1fr 1fr}
  .passos{grid-template-columns:repeat(4,1fr);border:0;gap:16px}
  .passos li{grid-template-columns:1fr;border-top:1px solid var(--lima);border-bottom:0}
  .orcamento{padding:44px;max-width:760px;margin:0 auto}
  .secao-onde{grid-template-columns:1fr 1fr}
}

/* ---------- aviso do modo demonstração (só aparece com DEMO = true no app.js) ---------- */
.demo-aviso{width:min(400px,calc(100% - 32px));border:0;border-radius:22px;padding:24px 20px 16px;background:#fff;color:#1f1a17;font-family:inherit;box-shadow:0 20px 50px -10px rgba(0,0,0,.45);text-align:center}
.demo-aviso::backdrop{background:rgba(15,12,10,.6)}
.da-titulo{font-weight:800;font-size:18px;margin:0 0 6px;text-transform:none;letter-spacing:0}
.da-texto{font-size:14.5px;color:#5d5550;margin:0 0 14px;line-height:1.45}
.da-balao{text-align:left;white-space:pre-wrap;background:#dcf8c6;color:#111;border-radius:12px 12px 2px 12px;padding:10px 12px;font:14px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;margin:0 0 16px auto;max-width:94%;max-height:40vh;overflow:auto;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.da-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;background:#25d366;color:#fff!important;font-weight:700;font-size:15.5px;text-decoration:none}
.da-btn svg{width:20px;height:20px}
.da-fechar{margin-top:6px;width:100%;min-height:44px;border:0;background:none;color:#5d5550;font-family:inherit;font-weight:600;font-size:14.5px;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}