/* ============================================================
   LP de campanha do Lavee (www.lavee.com.br) — estilos próprios.
   Usa os tokens e componentes do site.css; aqui só o que a LP tem
   e o site não. Celular primeiro: a maior parte dos leads chega
   pelo anúncio no telefone, então cada bloco foi medido a 390 px.
   ============================================================ */

/* ---------- topo enxuto: marca do produto + um botão ---------- */
/* o respiro lateral tem que ser dito aqui: o `.bar` do site.css zera o padding do `.wrap` (mesma especificidade, vem depois)
   e o logo e o botão encostavam nas bordas da tela */
.topo-lp .bar{padding:10px 26px;}
.topo-lp .marca img{height:38px;}
.topo-lp .endosso{font-size:12px; color:var(--cinza); letter-spacing:.02em; white-space:nowrap;
  border-left:1px solid var(--linha); padding-left:11px; line-height:1.2;}
.topo-lp .endosso b{color:var(--azul-700); font-weight:700;}
.topo-lp .bar > .zap{display:inline-flex;}   /* o site.css esconde no celular; aqui não há menu */
@media(max-width:560px){
  .topo-lp .bar{padding:10px 16px; gap:6px;}
  .topo-lp .marca img{height:28px;}
  .topo-lp .endosso{display:none;}
  .topo-lp .lang{gap:0; margin-right:0;}
  .topo-lp .lang a{padding:12px 7px;}                 /* alvo de toque de ~40 px */
  .topo-lp .bar > .zap{padding:12px 13px; font-size:13px;}
  .topo-lp .bar > .zap .t{display:none;}
}

/* ---------- hero ---------- */
.hero-lp{min-height:min(86vh,720px); padding:80px 0 60px;}
.hero-lp .fundo img,.hero-lp .fundo video{object-position:62% 40%;}
.hero-lp .veu{background:linear-gradient(100deg, rgba(4,7,5,.9) 0%, rgba(4,7,5,.68) 38%, rgba(4,7,5,.18) 66%, transparent 100%);}
.hero-lp h1{font-size:clamp(32px,5.2vw,62px); margin:14px 0 16px;}
.hero-lp .lead{max-width:50ch;}
.placar{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16); margin-top:28px; border-radius:var(--r2); overflow:hidden; max-width:720px;}
.placar > div{background:rgba(6,11,8,.72); padding:16px 14px 14px; backdrop-filter:blur(4px);}
.placar .n{font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); font-weight:800; letter-spacing:-.04em;
  color:#9BD984; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums;}
.placar .l{font-size:12.5px; color:#B6C7B8; margin-top:6px; line-height:1.3;}
@media(max-width:760px){
  .hero-lp{min-height:auto; padding:40px 0 34px;}
  .hero-lp .fundo img,.hero-lp .fundo video{object-position:58% 30%;}
  .hero-lp .veu{background:linear-gradient(180deg, rgba(7,12,9,.86) 0%, rgba(7,12,9,.93) 55%, var(--noite) 100%);}
  .hero-lp h1{font-size:clamp(31px,8.8vw,44px);}
  .placar{grid-template-columns:1fr 1fr; margin-top:22px;}
  .placar > div{padding:14px 14px 12px;}
  .placar .n{font-size:24px;}
}

/* botões ocupam a largura toda no telefone: alvo grande, uma coluna */
@media(max-width:560px){
  .acoes .btn{flex:1 1 100%; justify-content:center;}
}

/* ---------- a perda: comparador + argumento ---------- */
.perda{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(22px,4vw,48px); align-items:center;}
@media(max-width:900px){ .perda{grid-template-columns:1fr;} }
.perda .ba{aspect-ratio:16/10;}
.fatos{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px;}
.fatos li{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding:14px 16px;
  border:1px solid var(--linha); border-radius:var(--r2); background:var(--papel);}
.fatos .n{font-family:var(--serif); font-weight:800; font-size:26px; letter-spacing:-.04em; color:var(--azul-700);
  line-height:1; min-width:64px; white-space:nowrap;}
.fatos b{display:block; font-size:15px;} .fatos span{font-size:13.5px; color:var(--tinta-2);}

/* ---------- a conta (calculadora) ---------- */
.conta{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(22px,4vw,48px); align-items:start;}
@media(max-width:900px){ .conta{grid-template-columns:1fr;} }
.controles{border:1px solid var(--linha); border-radius:var(--r2); background:var(--papel); padding:6px 22px 20px;}
.campo{padding:16px 0; border-bottom:1px solid var(--linha);}
.campo:last-child{border-bottom:0;}
.campo .topo{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px;}
.campo label{margin:0; font-size:11.5px;}
.campo .valor{font-family:var(--serif); font-size:20px; font-weight:800; letter-spacing:-.02em;
  color:var(--azul-700); font-variant-numeric:tabular-nums; white-space:nowrap;}
.campo input[type=range]{width:100%; padding:0; border:0; background:transparent; accent-color:var(--verde-700);
  height:34px; cursor:pointer; margin:0;}
.campo .dica{font-size:12.5px; color:var(--cinza); margin-top:0;}

.resultado{border:1px solid var(--linha); border-top:4px solid var(--verde); border-radius:var(--r2);
  background:var(--papel); padding:26px 26px 22px; position:sticky; top:84px; box-shadow:var(--sombra);}
@media(max-width:900px){ .resultado{position:static; padding:22px 20px 20px;} }
.resultado .grande{font-family:var(--serif); font-size:clamp(40px,6vw,60px); font-weight:800;
  letter-spacing:-.05em; color:var(--verde-700); line-height:1; font-variant-numeric:tabular-nums; margin:6px 0 4px;}
.linha-res{display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--linha); font-size:15px;}
.linha-res:last-of-type{border-bottom:0;}
.linha-res span:last-child{font-family:var(--serif); font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap;}
.linha-res.saldo{border-top:1px solid var(--linha); margin-top:4px; font-size:16.5px;}
.linha-res.saldo span:last-child{color:var(--verde-700);}

/* no telefone o resultado fica colado embaixo do topo enquanto a pessoa mexe nos controles */
.res-mini{display:none;}
@media(max-width:900px){
  .res-mini{display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:52px; z-index:40;
    background:var(--noite); color:#fff; border-radius:var(--r2); padding:12px 16px; margin-bottom:12px;
    box-shadow:0 12px 30px -12px rgba(0,0,0,.5);}
  .res-mini .r{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9BD984; display:block;}
  .res-mini .v{font-family:var(--serif); font-weight:800; font-size:22px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1;}
  .res-mini .s{font-size:12px; color:#B6C7B8; text-align:right;}
}

/* ---------- passos em vídeo vertical ---------- */
.passos-lp{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.passo-lp{border:1px solid var(--linha); border-radius:var(--r2); overflow:hidden; background:var(--papel); box-shadow:var(--sombra);}
.passo-lp .filme{position:relative; aspect-ratio:9/16; background:var(--noite-2);}
.passo-lp video{width:100%; height:100%; object-fit:cover; display:block;}
.passo-lp .n{position:absolute; top:12px; left:12px; width:34px; height:34px; border-radius:50%;
  background:var(--verde); color:#fff; font-family:var(--serif); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.4);}
.passo-lp .corpo{padding:16px 18px 20px;}
.passo-lp h3{margin-bottom:6px; font-size:18px;}
.passo-lp p{font-size:15px; color:var(--tinta-2);}
.deslize{display:none;}
@media(max-width:820px){
  /* carrossel com encaixe: três vídeos 9:16 empilhados fariam a página crescer 3 telas */
  .passos-lp{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 26px 8px;
    margin:0 -26px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .passos-lp::-webkit-scrollbar{display:none;}
  .passo-lp{flex:0 0 74vw; max-width:340px; scroll-snap-align:center;}
  .passo-lp .filme{aspect-ratio:4/5;}
  .deslize{display:block; text-align:center; font-size:12px; color:var(--cinza); letter-spacing:.08em; text-transform:uppercase; margin-top:10px;}
}

/* ---------- camada antirreflexo ---------- */
.arc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(22px,4vw,48px); align-items:center;
  margin-top:40px; padding-top:40px; border-top:1px solid var(--noite-linha);}
@media(max-width:860px){ .arc{grid-template-columns:1fr;} }
.ph{border:1px solid var(--noite-linha); border-radius:var(--r2); padding:22px 20px 18px; background:var(--noite-2);}
.ph .esc{position:relative; height:14px; border-radius:999px; margin:40px 0 8px;
  background:linear-gradient(90deg,#B4552B 0%,#D8A244 30%,#4DBC24 46%,#4DBC24 57%,#3C8FD1 75%,#5A3E9B 100%);}
.ph .faixa{position:absolute; top:-6px; bottom:-6px; left:46%; width:11%; border:2px solid #fff; border-radius:6px; box-shadow:0 0 0 3px rgba(0,0,0,.35);}
.ph .marca-ph{position:absolute; top:-30px; left:51.5%; transform:translateX(-50%); font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#9BD984; white-space:nowrap;}
.ph .marca-ph::after{content:""; position:absolute; left:50%; bottom:-9px; width:1px; height:8px; background:#9BD984;}
.ph .lim{position:absolute; top:-6px; bottom:-6px; left:64%; width:2px; background:#F18D39;}
.ph .lim-t{position:absolute; top:22px; left:64%; transform:translateX(-50%); font-size:11px; color:#F18D39; white-space:nowrap; font-weight:700;}
.ph .eixo{display:flex; justify-content:space-between; font-size:11px; color:#7C8E82; margin-top:26px; font-variant-numeric:tabular-nums;}
.ph p{font-size:13.5px; color:#B6C7B8; margin-top:14px;}

/* ---------- provas ---------- */
.provas{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,44px);}
@media(max-width:860px){ .provas{grid-template-columns:1fr;} }
.laudo{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--linha);}
.laudo:last-child{border-bottom:0;}
.laudo .qual{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--verde-700);
  padding-top:4px; flex:0 0 96px; line-height:1.35;}   /* coluna fixa; o rótulo quebra em vez de invadir o texto */
.laudo b{display:block; font-size:15.5px;} .laudo span{font-size:14px; color:var(--tinta-2);}
.marcas{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.marca-selo{font-size:12.5px; font-weight:600; letter-spacing:.03em; border:1px solid var(--linha); background:var(--papel);
  padding:8px 13px; border-radius:999px; color:var(--tinta-2);}
.marca-selo::before{content:"✓ "; color:var(--verde-700); font-weight:800;}

/* ---------- comprar: cards da loja ---------- */
.produtos{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:900px){ .produtos{grid-template-columns:1fr; max-width:520px; margin:0 auto;} }
.prod{position:relative; display:flex; flex-direction:column; border:1px solid var(--linha); border-radius:var(--r2);
  background:var(--papel); overflow:hidden; box-shadow:var(--sombra);}
.prod.destaque{border-color:var(--verde); box-shadow:0 24px 50px -24px rgba(77,188,36,.55);}
.prod .tag{position:absolute; top:14px; left:14px; z-index:1; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--azul-lav); color:var(--azul-700); padding:6px 10px; border-radius:999px;}
.prod.destaque .tag{background:var(--verde); color:#fff;}
.prod .foto{background:var(--papel-2); padding:18px; display:flex; align-items:center; justify-content:center; height:230px;}
.prod .foto img{max-height:100%; width:auto; height:auto; object-fit:contain; display:block;}   /* height:auto: senão o atributo height do <img> vira 640 px */
.prod .corpo{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.prod h3{font-size:19px; margin-bottom:4px;}
.prod .rende{font-size:14px; color:var(--tinta-2); margin-bottom:14px;}
.prod .preco{font-family:var(--serif); font-size:34px; font-weight:800; letter-spacing:-.04em; color:var(--azul-700); line-height:1;}
.prod .preco small{font-size:15px; font-weight:600; letter-spacing:0; color:var(--cinza); margin-left:4px;}
.prod .por{font-size:13.5px; color:var(--tinta-2); margin:6px 0 16px;}
.prod .por b{color:var(--verde-700);}
.prod ul{list-style:none; padding:0; margin:0 0 16px; font-size:13.5px; color:var(--tinta-2); display:grid; gap:4px;}
.prod li::before{content:"· ";}
.prod .btn{margin-top:auto; justify-content:center; width:100%;}
@media(max-width:900px){
  .prod{flex-direction:row; align-items:stretch;}
  .prod .foto{flex:0 0 36%; height:auto; padding:14px;}
  .prod .foto img{max-height:170px; max-width:100%;}
  .prod .tag{top:12px; left:12px; white-space:nowrap;}
  .prod .foto{padding-top:48px;}
  .prod .btn{padding:12px 14px; font-size:14.5px;}
  .prod .corpo{padding:46px 16px 16px;}   /* espaço para a etiqueta, que fica acima das duas colunas */
  .prod .preco{font-size:28px;}
}
@media(max-width:420px){ .prod .foto{flex-basis:34%;} .prod h3{font-size:17px;} }
.cond{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px; font-size:13.5px; color:var(--tinta-2);}
.cond span::before{content:"✓ "; color:var(--verde-700); font-weight:800;}

/* ---------- cadastro (foto real de campo atrás) ---------- */
.cadastro .fundo{position:absolute; inset:0; z-index:0;}
.cadastro .fundo img{width:100%; height:100%; object-fit:cover; object-position:50% 60%; display:block;}
.cadastro .fundo::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(4,40,70,.94) 0%, rgba(4,40,70,.78) 45%, rgba(6,50,40,.55) 100%);}
@media(max-width:760px){ .cadastro .fundo::after{background:rgba(4,40,70,.9);} }
.cadastro form input,.cadastro form select{font-size:16px;}   /* 16 px: abaixo disso o iPhone dá zoom no campo */
.cadastro form .dupla{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:480px){ .cadastro form .dupla{grid-template-columns:1fr;} }

/* ---------- fechamento ---------- */
.fecho{text-align:center; max-width:640px; margin:0 auto;}
.fecho h2{color:#fff; margin-bottom:14px;}
.fecho .lead{margin:0 auto 26px;}
.zap-g{display:inline-flex; align-items:center; gap:11px; background:#25D366; color:#fff; text-decoration:none;
  padding:18px 32px; border-radius:999px; font-size:17.5px; font-weight:700; box-shadow:0 18px 40px -16px rgba(37,211,102,.7);}
.zap-g:hover{background:#1EBE5A;}
@media(max-width:560px){ .zap-g{width:100%; justify-content:center;} }

/* barra fixa do celular: WhatsApp e loja nunca saem da tela */
@media(max-width:760px){
  .cta-bar .btn{font-size:14px; padding:13px 10px;}
  body{padding-bottom:74px;}
}