/* ============================================================
   BLACK FRIDAY AUTOLUIZ — 05/11/2026
   Preto puro (#000) pra o logo da Black, que vem com fundo preto,
   se misturar com a página. Vermelho da marca só em CTA e destaque.
   ============================================================ */
:root{
  --bg:#000;
  --card:#0D0D0F;
  --card-2:#141417;
  --line:#232327;
  --text:#F1F3F5;
  --muted:#A3A9B0;
  --red:#EB0000;
  --red-hi:#FF2222;
  --green:#25D366;
  --green-dk:#1EB257;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Roboto',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.5;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol{list-style:none}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
section[id]{scroll-margin-top:72px}

/* ---------- botão ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:14px 26px;
  border-radius:10px;
  background:var(--red);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:.88rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.05em;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .15s ease,transform .15s ease;
}
.btn:hover{background:var(--red-hi)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.topo-logo:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- topo ---------- */
.topo{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(0,0,0,.88);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topo-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:60px;
}
.topo-logo{flex:0 0 auto;border-radius:4px}
.topo-logo img{width:auto;height:24px}
.topo-data{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:'Montserrat',sans-serif;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.topo-data b{color:#fff}
.topo-data span{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.ponto{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--red);
  animation:pulso 1.6s ease-in-out infinite;
}
@keyframes pulso{50%{opacity:.25}}

/* ---------- hero ---------- */
.hero{padding:52px 0 60px;text-align:center}
.hero-marcas{
  color:var(--muted);
  font-family:'Montserrat',sans-serif;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}
/* logo da Black: PNG transparente feito pra fundo preto */
.hero-logo{
  display:flex;
  justify-content:center;
  margin:6px auto 0;
}
.hero-logo img{width:min(620px,100%)}
.hero-data{
  margin-top:22px;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.15rem,3.6vw,1.6rem);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.hero-data strong{
  display:inline-block;
  padding:2px 12px;
  margin-right:4px;
  border-radius:8px;
  background:var(--red);
  color:#fff;
  font-weight:900;
}
.hero h1{
  max-width:24ch;
  margin:26px auto 0;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.3rem,3.4vw,2rem);
  font-weight:800;
  line-height:1.2;
}
.hero-sub{
  max-width:46ch;
  margin:12px auto 0;
  color:var(--muted);
  font-size:1.02rem;
}
.hero-btn{margin-top:28px;min-width:240px}

/* ---------- contagem ---------- */
.contagem{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:30px;
}
.contagem[hidden]{display:none}
.contagem-rotulo{
  color:var(--muted);
  font-family:'Montserrat',sans-serif;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.contagem-caixas{display:flex;gap:8px}
.contagem-caixas div{
  min-width:66px;
  padding:12px 6px 9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
}
.contagem-caixas b{
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:1.9rem;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.contagem-caixas small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- seções ---------- */
.secao{padding:56px 0}
.secao--catalogo{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#060607;
}
.secao-titulo{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.55rem,4.2vw,2.3rem);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.secao-sub{margin:8px 0 28px;color:var(--muted)}

/* ---------- cards ---------- */
.destaques{display:grid;gap:20px}
.grade{display:grid;gap:16px;grid-template-columns:1fr}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
}
.card-foto{
  position:relative;
  flex:0 0 auto;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#0A0A0B;
}
.card-foto img{width:100%;height:100%;object-fit:cover}
.card-foto--vazia{
  display:flex;
  align-items:flex-end;
  padding:18px;
  background:
    linear-gradient(135deg,rgba(235,0,0,.10),transparent 55%),
    linear-gradient(180deg,#141417,#0A0A0B);
}
.card-foto-nome{
  color:rgba(255,255,255,.14);
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.5rem,6vw,2rem);
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.card-fita,.card-exemplo{
  position:absolute;
  top:14px;
  padding:6px 12px;
  border-radius:999px;
  font-family:'Montserrat',sans-serif;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card-fita{left:14px;background:var(--red);color:#fff}
.card-exemplo{right:14px;background:#FFD400;color:#000}
.card--exemplo{border-style:dashed;border-color:#5a5320}

.card-corpo{
  display:flex;
  flex:1 0 auto;
  flex-direction:column;
  gap:8px;
  padding:20px;
}
.card-marca{
  color:var(--muted);
  font-family:'Montserrat',sans-serif;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.card h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.3rem;
  font-weight:900;
  line-height:1.15;
  text-transform:uppercase;
}
.card p{color:var(--muted);font-size:.95rem}

.preco{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin-top:auto;
  padding-top:10px;
}
.preco-off{
  padding:4px 8px;
  border-radius:6px;
  background:#fff;
  color:#000;
  font-family:'Montserrat',sans-serif;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.preco-de{color:var(--muted);font-size:.92rem}
.preco-por{width:100%;color:var(--muted);font-size:.95rem}
.preco-por strong{
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:2rem;
  font-weight:900;
  line-height:1;
}
.preco-por small{color:#fff;font-size:.9rem;font-weight:700}
.preco-consulta{
  width:100%;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:1rem;
  font-weight:800;
}
.card .btn{width:100%;margin-top:8px}

/* destaque */
.card--destaque{
  border-color:rgba(235,0,0,.55);
  box-shadow:0 0 0 1px rgba(235,0,0,.18),0 30px 70px -40px rgba(235,0,0,.55);
}
.card--destaque .card-foto{aspect-ratio:16/10}
.card--destaque .card-foto img{object-position:center 40%}
.card--destaque .card-corpo{padding:24px}
.card--destaque h3{font-size:clamp(1.7rem,4.4vw,2.3rem)}
.card--destaque .preco-por strong{font-size:clamp(2.4rem,7vw,3rem)}

/* ---------- como funciona ---------- */
.passos{display:grid;gap:14px;margin-top:24px}
.passo{
  padding:22px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
}
.passo b{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-bottom:12px;
  border-radius:50%;
  background:var(--red);
  font-family:'Montserrat',sans-serif;
  font-weight:900;
}
.passo h3{
  margin-bottom:6px;
  font-family:'Montserrat',sans-serif;
  font-size:1.05rem;
  font-weight:800;
}
.passo p{color:var(--muted);font-size:.93rem}

/* ---------- rodapé ---------- */
.rodape{padding:40px 0 48px;border-top:1px solid var(--line)}
.rodape-in{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.rodape-logo{width:auto;height:26px;margin-bottom:6px}
.rodape p{max-width:60ch;color:var(--muted);font-size:.85rem}
.rodape-copy{font-size:.78rem !important;opacity:.7}

/* ---------- telas maiores ---------- */
@media(min-width:560px){
  .grade{grid-template-columns:1fr 1fr}
}
@media(min-width:760px){
  .passos{grid-template-columns:repeat(3,1fr)}
  .hero{padding:72px 0 80px}
  .contagem-caixas div{min-width:84px}
  .contagem-caixas b{font-size:2.4rem}
}
@media(min-width:880px){
  .destaques{grid-template-columns:1fr 1fr}
}
@media(min-width:960px){
  .grade{grid-template-columns:repeat(3,1fr)}
  .topo-logo img{height:28px}
}
@media(max-width:559px){
  .card-foto--vazia{aspect-ratio:16/7}
  .card .btn{padding:14px 12px;letter-spacing:.03em}
  .card--destaque .card-corpo{padding:20px}
}
@media(max-width:380px){
  .topo-data{padding:6px 10px;font-size:.64rem;gap:6px}
  .contagem-caixas div{min-width:58px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ponto{animation:none}
}

/* ==========================================================
   FORMULÁRIO DE CADASTRO (base da skill lp-produto, cores da Black)
   ========================================================== */
.form-lead{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.form-lead.aberto{display:flex}
.form-lead-box{
  position:relative;
  width:100%;
  max-width:460px;
  padding:34px 28px 28px;
  border:1px solid rgba(235,0,0,.5);
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 0%,rgba(235,0,0,.14),transparent 60%),
    var(--card);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.form-lead-close{
  position:absolute;
  top:8px;
  right:10px;
  width:40px;
  height:40px;
  color:var(--muted);
  font-size:28px;
  line-height:1;
}
.form-lead-close:hover{color:#fff}
.form-lead-selo{
  display:inline-block;
  margin:0 6px 14px 0;
  padding:6px 14px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.form-lead-selo--ok{background:var(--green);color:#062608}
.form-lead-produto{
  display:inline-block;
  margin-bottom:14px;
  padding:5px 12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.form-lead-conteudo h3,.form-lead-pergunta{
  display:block;
  margin-bottom:10px;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.15rem,3.4vw,1.45rem);
  font-weight:800;
  line-height:1.25;
}
.form-lead-conteudo p{color:var(--muted);font-size:.92rem;line-height:1.55}
.form-lead-progresso{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.form-lead-progresso span{
  flex:none;
  color:var(--muted);
  font-family:'Montserrat',sans-serif;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.form-lead-barra{
  flex:1;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.1);
}
.form-lead-barra i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--red);
  transition:width .3s ease;
}
.form-lead-input{
  width:100%;
  margin-top:8px;
  padding:15px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-family:'Roboto',sans-serif;
  font-size:1rem; /* 16px: o iPhone não dá zoom no campo */
}
.form-lead-input::placeholder{color:#6E767E}
.form-lead-input:focus{outline:none;border-color:var(--red);background:rgba(235,0,0,.06)}
.form-lead-erro{margin-top:8px;color:#FF6B6B !important;font-size:.82rem !important}
.form-lead-btn{display:flex;width:100%;margin-top:18px;padding:16px 18px;white-space:normal}
.form-lead-btn--zap{background:var(--green);color:#04210E}
.form-lead-btn--zap:hover{background:var(--green-dk)}
.form-lead-pular{
  display:block;
  width:100%;
  min-height:44px;
  margin-top:8px;
  color:var(--muted);
  font-size:.88rem;
  text-decoration:underline;
}
.form-lead-pular:hover{color:#fff}

@media(max-width:600px){
  .form-lead{align-items:flex-end;padding:12px}
  .form-lead-box{padding:28px 18px 20px}
}