:root{
  --fundo:#12100c; --fundo2:#1a1712; --vidro:rgba(48,44,38,.55); --linha:rgba(255,255,255,.1);
  --c1:#5c4e30; --c2:#99835a; --ouro:#d4b77c; --ouro-vivo:#f0d49a;
  --texto:#fff; --suave:rgba(255,255,255,.68); --verde:#25d366;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:Inter,system-ui,sans-serif;line-height:1.55;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{font-family:Rajdhani,sans-serif;line-height:1.05;margin:0}
.caixa{max-width:1160px;margin:0 auto;padding:0 20px}
section{padding:84px 0;position:relative}
.rotulo{color:var(--ouro);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
h2{font-size:clamp(32px,4.4vw,48px);margin:8px 0 14px}
.sub{color:var(--suave);max-width:640px;margin:0;font-size:17px}
.centro{text-align:center}.centro .sub{margin:0 auto}

/* barra de progresso da rolagem */
.progresso{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--c2),var(--ouro-vivo));z-index:50}

/* faixa de oferta */
.faixa{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c1));background-size:200% 100%;animation:faixa 8s linear infinite;
  text-align:center;font-size:14px;font-weight:600;padding:9px 16px}
.faixa b{color:#fff3d6}
@keyframes faixa{to{background-position:200% 0}}

/* topo */
header{position:sticky;top:0;z-index:30;background:rgba(18,16,12,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
header .caixa{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.marca{display:flex;align-items:center;gap:10px;font-family:Rajdhani;font-weight:700;font-size:20px;text-decoration:none;white-space:nowrap}
.marca span{width:38px;height:38px;border-radius:50%;overflow:hidden;border:2px solid var(--c2);display:grid;place-items:center;background:var(--c1)}
.marca img{width:100%;height:100%;object-fit:cover}
nav{display:flex;align-items:center;gap:22px}
nav a{color:var(--suave);text-decoration:none;font-size:14.5px;transition:color .2s}
nav a:hover{color:#fff}
.menu-bt{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:6px}
.menu-bt svg{width:28px;height:28px}
@media(max-width:860px){
  .menu-bt{display:block}
  nav{position:fixed;inset:66px 0 auto 0;background:var(--fundo2);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;
    border-bottom:1px solid var(--linha);transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .3s ease,opacity .3s ease,visibility .3s}
  nav.aberto{transform:none;opacity:1;visibility:visible}
  nav a{padding:14px 0;border-bottom:1px solid var(--linha);font-size:16px}
  nav .botao{margin-top:14px !important}
}

/* botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff !important;font-weight:600;font-size:15.5px;
  padding:14px 24px;border-radius:12px;transition:transform .2s,box-shadow .2s}
.botao:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(153,131,90,.35)}
.botao:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:brilho 3.6s ease-in-out infinite}
@keyframes brilho{0%,60%{left:-60%}100%{left:130%}}
.botao.fino{padding:9px 16px;font-size:14px}
.botao.claro{background:transparent;border:1px solid var(--c2);color:var(--ouro) !important}
.botao.claro:after{display:none}
.botao.zapbt{background:var(--verde)}
.botao svg{width:18px;height:18px}
.pulsa{animation:pulsa 2.4s ease-in-out infinite}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(212,183,124,.45)}50%{box-shadow:0 0 0 12px rgba(212,183,124,0)}}

/* hero */
.hero{padding:70px 0 90px;overflow:hidden}
.bolha{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.bolha.b1{width:520px;height:520px;background:#6d5a33;top:-160px;right:-120px;animation:flutua 14s ease-in-out infinite}
.bolha.b2{width:380px;height:380px;background:#3d3322;bottom:-120px;left:-120px;animation:flutua 18s ease-in-out infinite reverse}
@keyframes flutua{50%{transform:translate(-40px,40px) scale(1.1)}}
.hero .caixa{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative}
.selo-topo{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(212,183,124,.4);background:rgba(212,183,124,.08);
  padding:7px 14px;border-radius:99px;font-size:13.5px;color:var(--ouro-vivo);font-weight:600}
.selo-topo i{width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 0 var(--verde);animation:ponto 1.8s infinite}
@keyframes ponto{70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.hero h1{font-size:clamp(46px,7.2vw,86px);margin:18px 0 6px;letter-spacing:-.5px}
.hero h1 .preco{background:linear-gradient(90deg,var(--ouro),var(--ouro-vivo),var(--ouro));background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:faixa 5s linear infinite;white-space:nowrap}
.troca{font-family:Rajdhani;font-size:clamp(24px,3vw,34px);font-weight:600;color:var(--suave);min-height:1.3em}
.troca b{color:#fff;border-right:3px solid var(--ouro);padding-right:4px;animation:cursor .8s steps(1) infinite}
@keyframes cursor{50%{border-color:transparent}}
.hero p.lead{color:var(--suave);font-size:18px;max-width:560px;margin:14px 0 0}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.numeros{display:flex;gap:34px;flex-wrap:wrap;margin-top:38px}
.numeros b{display:block;font-family:Rajdhani;font-size:34px;color:var(--ouro)}
.numeros small{color:var(--suave);font-size:13px}
.celulares{position:relative;height:540px}
.cel{position:absolute;width:230px;border-radius:30px;border:7px solid #0a0907;box-shadow:0 30px 60px rgba(0,0,0,.6);overflow:hidden;background:#000}
.cel img{display:block;width:100%}
.cel.a{left:0;top:70px;--r:-7deg;transform:rotate(var(--r));animation:boia 6s ease-in-out infinite}
.cel.b{right:10px;top:0;--r:6deg;transform:rotate(var(--r));animation:boia 7s ease-in-out infinite .8s;z-index:2}
.cel.c{left:32%;top:230px;width:190px;--r:-2deg;transform:rotate(var(--r));animation:boia 8s ease-in-out infinite 1.6s;z-index:3}
@keyframes boia{50%{transform:rotate(var(--r)) translateY(-16px)}}
.etiqueta{position:absolute;z-index:4;background:rgba(18,16,12,.92);border:1px solid var(--c2);border-radius:14px;padding:10px 14px;font-size:13.5px;
  display:flex;align-items:center;gap:10px;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:boia 5s ease-in-out infinite;--r:0deg}
.etiqueta b{display:block;color:var(--ouro-vivo);font-size:15px}
.etiqueta .ic{width:34px;height:34px;border-radius:10px;background:rgba(37,211,102,.15);display:grid;place-items:center;color:var(--verde)}
.etiqueta.e1{left:-10px;bottom:40px}
.etiqueta.e2{right:-6px;top:300px;animation-delay:1.2s}
@media(max-width:900px){
  .hero .caixa{grid-template-columns:1fr}
  .celulares{height:430px;max-width:440px;width:100%;margin:10px auto 0}
  .cel{width:185px}.cel.c{width:150px;top:200px}
  .etiqueta.e2{top:250px}
}

/* faixa de confiança */
.confianca{padding:26px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);background:var(--fundo2)}
.confianca .caixa{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.confianca div.it{display:flex;align-items:center;gap:10px;color:var(--suave);font-size:14.5px}
.confianca svg{width:22px;height:22px;color:var(--ouro);flex:none}

/* catálogo */
.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin-top:40px}
.app{background:var(--vidro);border:1px solid var(--linha);border-radius:20px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s;position:relative}
.app:hover{transform:translateY(-8px);border-color:rgba(212,183,124,.55);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.app .tela{height:230px;overflow:hidden;background:radial-gradient(circle at 50% 120%,#3a3122,#16130e);display:flex;justify-content:center;padding-top:22px;position:relative}
.app .tela .mini{width:150px;border-radius:20px 20px 0 0;border:5px solid #0a0907;border-bottom:0;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -6px 30px rgba(0,0,0,.5)}
.app:hover .tela .mini{transform:translateY(-10px) scale(1.04)}
.app .tela .mini img,.app .tela .mini svg{display:block;width:100%}
.app .corpo{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.app .tag{font-size:12px;color:var(--ouro);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.app h3{font-size:25px;margin:4px 0 6px}
.app p{color:var(--suave);margin:0 0 14px;font-size:14.5px}
.app .pe{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.app .valor{font-family:Rajdhani;font-weight:700;font-size:26px;color:var(--ouro-vivo)}
.app .valor small{font-family:Inter;font-size:12px;color:var(--suave);font-weight:400;display:block;margin-top:-4px}
.app .ver{font-weight:600;font-size:14px;color:#fff;display:flex;align-items:center;gap:6px}
.app .ver svg{width:16px;height:16px;transition:transform .25s}
.app:hover .ver svg{transform:translateX(4px)}
.app .fita{position:absolute;top:14px;left:14px;z-index:2;background:var(--verde);color:#062b14;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px}

/* como funciona */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;position:relative}
.passo{background:var(--vidro);border:1px solid var(--linha);border-radius:18px;padding:22px}
.passo .n{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;place-items:center;font-family:Rajdhani;font-weight:700;font-size:20px;margin-bottom:14px}
.passo b{display:block;margin-bottom:4px;font-size:17px}
.passo span{color:var(--suave);font-size:14.5px}
@media(max-width:900px){.passos{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.passos{grid-template-columns:1fr}}

/* sobre */
.sobre{background:var(--fundo2)}
.sobre .caixa{display:grid;grid-template-columns:320px 1fr;gap:50px;align-items:center}
.foto{border-radius:24px;overflow:hidden;border:2px solid var(--c2);position:relative;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.foto img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 6s ease}
.foto:hover img{transform:scale(1.06)}
.lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:24px;padding:0;list-style:none}
.lista li{display:flex;gap:10px;align-items:flex-start;color:var(--suave);font-size:15px}
.lista svg{flex:none;width:20px;height:20px;color:var(--ouro);margin-top:2px}
@media(max-width:800px){.sobre .caixa{grid-template-columns:1fr}.foto{max-width:300px}}

/* trabalhos em carrossel infinito */
.esteira{overflow:hidden;margin-top:36px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.esteira .trilho{display:flex;gap:20px;width:max-content;animation:esteira 40s linear infinite}
.esteira:hover .trilho{animation-play-state:paused}
@keyframes esteira{to{transform:translateX(-50%)}}
.esteira figure{width:200px;margin:0;flex:none}
.esteira .quadro{border-radius:20px;border:1px solid var(--linha);overflow:hidden;height:360px;background:#000}
.esteira .quadro img,.esteira .quadro svg{width:100%;height:100%;display:block;object-fit:cover;object-position:top}
.esteira figcaption{margin-top:10px;font-weight:600;font-size:15px}
.esteira figcaption small{display:block;color:var(--suave);font-weight:400;font-size:13px}

/* perguntas */
details{border-bottom:1px solid var(--linha);padding:18px 0}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;font-size:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--ouro);font-size:24px;line-height:1;transition:transform .3s}
details[open] summary:after{transform:rotate(45deg)}
details p{color:var(--suave);margin:10px 0 0}

.final{text-align:center;overflow:hidden}
.final .acoes{justify-content:center}
footer{border-top:1px solid var(--linha);padding:30px 0;color:var(--suave);font-size:13.5px}
footer .caixa{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{text-decoration:none;color:var(--suave)}

.zap{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;background:var(--verde);display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:40;animation:pulsaVerde 2.6s infinite}
@keyframes pulsaVerde{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.zap svg{width:32px;height:32px;color:#fff}

/* aparecer ao rolar */
.surge{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.surge.visivel{opacity:1;transform:none}
.surge.d1{transition-delay:.1s}.surge.d2{transition-delay:.2s}.surge.d3{transition-delay:.3s}

/* ---- página de um app ---- */
.voltar{display:inline-flex;align-items:center;gap:6px;color:var(--suave);text-decoration:none;font-size:14px;margin-bottom:18px}
.voltar:hover{color:#fff}
.pag-app .caixa.topo{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.pag-app h1{font-size:clamp(40px,6vw,68px);margin:10px 0 12px}
.demo{display:flex;justify-content:center;position:relative}
.demo .cel{position:relative;width:290px;left:auto;top:auto;--r:0deg;animation:boia 7s ease-in-out infinite}
/* a loja roda no tamanho de um celular de verdade (390x844) e é só reduzida pra caber no desenho */
.demo .cel.tela-viva{width:300px;height:649px;background:#fff}
.demo .cel.tela-viva iframe{display:block;width:390px;height:844px;border:0;background:#fff;transform:scale(.7538);transform-origin:0 0}
.preco-box{margin-top:26px;background:var(--vidro);border:1px solid rgba(212,183,124,.45);border-radius:18px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.preco-box .v{font-family:Rajdhani;font-size:44px;font-weight:700;color:var(--ouro-vivo);line-height:1}
.preco-box .v small{display:block;font-family:Inter;font-size:13px;color:var(--suave);font-weight:400;margin-top:4px}
.recursos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:34px}
.recurso{background:var(--vidro);border:1px solid var(--linha);border-radius:16px;padding:18px;display:flex;gap:12px}
.recurso svg{flex:none;width:22px;height:22px;color:var(--ouro);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chips span{border:1px solid var(--linha);background:rgba(255,255,255,.04);border-radius:99px;padding:8px 14px;font-size:14px;color:var(--suave)}
.planos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.plano{border:1px solid var(--linha);border-radius:18px;padding:22px;background:var(--vidro)}
.plano.melhor{border-color:var(--c2);box-shadow:0 0 0 1px var(--c2) inset}
.plano h4{margin:0 0 6px;font-size:17px}
.plano .v{font-family:Rajdhani;font-size:40px;font-weight:700;color:var(--ouro-vivo)}
.plano .v small{font-size:15px;color:var(--suave);font-family:Inter;font-weight:400}
.plano ul{margin:8px 0 18px;padding-left:18px;color:var(--suave);font-size:14.5px}
.plano .botao{width:100%}
@media(max-width:900px){.pag-app .caixa.topo{grid-template-columns:1fr}.planos{grid-template-columns:1fr}.demo .cel{width:250px}.demo .cel.tela-viva{width:260px;height:563px}.demo .cel.tela-viva iframe{transform:scale(.6533)}}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none !important;transition:none !important}
  .surge{opacity:1;transform:none}
}
.cel svg{display:block;width:100%;height:auto}

/* demonstração das funções (PedeJá) */
.galeria{display:grid;grid-template-columns:300px 1fr;gap:28px;margin-top:34px;align-items:start}
.funcoes{display:grid;gap:8px}
.funcoes button{text-align:left;background:var(--vidro);border:1px solid var(--linha);color:#fff;border-radius:12px;padding:12px 16px;cursor:pointer;
  font:inherit;font-size:15px;transition:border-color .2s,background .2s,transform .2s;display:flex;align-items:center;gap:10px}
.funcoes button:before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);flex:none;transition:background .2s}
.funcoes button:hover{transform:translateX(4px)}
.funcoes button.ativo{border-color:var(--c2);background:rgba(153,131,90,.18)}
.funcoes button.ativo:before{background:var(--ouro)}
.explica{margin:8px 0 0;color:var(--suave);font-size:15px;min-height:4.5em;border-left:3px solid var(--c2);padding-left:12px}
.vitrine{display:flex;justify-content:center}
.vitrine img{transition:opacity .35s ease}
.vitrine img.trocando{opacity:0}
.navegador{width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--linha);box-shadow:0 30px 60px rgba(0,0,0,.5);background:#1b1b1b}
.navegador .barra{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#2a2723}
.navegador .barra i{width:10px;height:10px;border-radius:50%;background:#5a524a}
.navegador .barra span{margin-left:10px;font-size:12px;color:var(--suave);background:rgba(0,0,0,.3);padding:3px 12px;border-radius:99px}
.navegador img{display:block;width:100%}
.galeria-cel{grid-template-columns:1fr 250px}
.galeria-cel .cel{position:relative;left:auto;top:auto;width:250px;--r:0deg;animation:boia 7s ease-in-out infinite}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:50px}
@media(max-width:1000px){.duas{grid-template-columns:1fr}}
@media(max-width:800px){.galeria,.galeria-cel{grid-template-columns:1fr}.vitrine{order:-1}.galeria-cel .cel{width:230px}.explica{order:-1;margin:0 0 6px;min-height:0}}
.sozinha{max-width:760px}

/* compra direto na página do app */
.compra{margin-top:24px;display:grid;gap:16px}
.planos.escolha{margin-top:0}
.planos.escolha .plano{cursor:pointer;position:relative;transition:border-color .2s,background .2s}
.planos.escolha .plano input{position:absolute;opacity:0}
.planos.escolha .plano:has(input:checked){border-color:var(--ouro);background:rgba(212,183,124,.12);box-shadow:0 0 0 1px var(--ouro) inset}
.planos.escolha .plano ul{margin-bottom:0}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campo-site{display:grid;gap:6px;font-size:13.5px;color:var(--suave)}
.campo-site.largo{grid-column:1/-1}
.campo-site input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--linha);border-radius:12px;padding:13px 14px;color:#fff;font:inherit;font-size:16px;outline:none}
.campo-site input:focus{border-color:var(--ouro);box-shadow:0 0 0 3px rgba(212,183,124,.18)}
.campo-site .conf{font-size:13px;min-height:1em}
.campo-site .conf.ok{color:#6ee7a0}.campo-site .conf.ruim{color:#ff9b9b}
.erro-compra{margin:0;background:rgba(220,38,38,.15);border:1px solid rgba(220,38,38,.4);color:#ffb4b4;padding:11px 14px;border-radius:12px;font-size:14.5px}
.compra .botao{width:100%;padding:16px;font-size:17px}
.nota-compra{margin:0;color:var(--suave);font-size:13.5px}
.nota-compra a{color:var(--ouro)}
@media(max-width:600px){.campos{grid-template-columns:1fr}}

/* ampliar as telas */
.zoom .dica{display:none}
.vitrine{position:relative}
.ampliar{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  background:rgba(18,16,12,.82);color:#fff;border:1px solid var(--c2);border-radius:99px;padding:8px 14px;font:inherit;font-size:13.5px;font-weight:600;
  backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.ampliar:hover{background:var(--c1);transform:translateY(-2px)}
.ampliar svg{width:16px;height:16px}
.vitrine img{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:100;background:rgba(8,7,5,.98);display:none;flex-direction:column;align-items:center;justify-content:center;padding:18px 70px}
.zoom.aberto{display:flex;animation:zoomEntra .25s ease}
@keyframes zoomEntra{from{opacity:0}to{opacity:1}}
.zoom .palco{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.zoom .palco img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#fff;transition:opacity .2s}
.zoom .palco img.cel{max-height:100%;border-radius:28px;border:7px solid #0a0907}
.zoom .palco iframe{width:390px;height:min(844px,100%);border:7px solid #0a0907;border-radius:30px;background:#fff}
.zoom .legenda{max-width:760px;text-align:center;padding:14px 10px 0;color:var(--suave)}
.zoom .legenda b{display:block;color:#fff;font-size:18px;margin-bottom:4px}
.zoom .fechar,.zoom .seta{position:absolute;border:0;cursor:pointer;background:rgba(255,255,255,.1);color:#fff;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:24px;transition:background .2s}
.zoom .fechar:hover,.zoom .seta:hover{background:var(--c1)}
.zoom .fechar{top:14px;right:14px}
.zoom .seta{top:50%;transform:translateY(-50%)}
.zoom .seta.ant{left:12px}.zoom .seta.prox{right:12px}
.zoom .contador{position:absolute;top:22px;left:20px;color:var(--suave);font-size:14px}
@media(max-width:700px){.zoom{padding:60px 8px 12px}.zoom .seta{top:auto;bottom:14px;transform:none}.zoom .seta.ant{left:14px}.zoom .seta.prox{right:14px}.zoom .legenda{padding-bottom:56px}.zoom .palco iframe{width:100%}}
.demo > .ampliar{left:50%;right:auto;bottom:-22px;transform:translateX(-50%)}
.demo > .ampliar:hover{transform:translateX(-50%) translateY(-2px)}
@media(max-width:700px){
  .zoom .palco{overflow:auto;justify-content:flex-start;align-items:center;-webkit-overflow-scrolling:touch}
  .zoom .palco img:not(.cel){max-width:none;max-height:none;width:860px;flex:none}
  .zoom .dica{display:block;color:var(--ouro);font-size:13px;margin-top:6px}
}
.zoom .palco iframe.largo{width:100%;height:100%;border-radius:14px;border:0}
.testar-grande{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
@media(max-width:700px){.zoom .palco iframe.largo{width:100%;height:100%}}
.testes{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.testes .botao{flex:1 1 200px}
/* três planos: com a sua cara (WhatsApp) + modelo pronto + mensal */
.planos.tres{grid-template-columns:1fr;gap:14px}
.planos.tres .plano{display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;column-gap:22px;align-items:start;padding:22px 22px 20px}
.planos.tres .plano h4{grid-column:1;margin:0}
.planos.tres .plano .v{grid-column:1;font-size:36px;line-height:1.1}
.planos.tres .plano .v small{display:block;margin-top:2px}
.planos.tres .plano ul{grid-column:2;grid-row:1 / span 2;margin:0}
.planos.tres .plano .botao{grid-column:1 / -1;margin-top:16px}
.plano.sua-cara{position:relative;border-color:var(--ouro);background:linear-gradient(160deg,rgba(212,183,124,.16),var(--vidro) 60%)}
.plano .selo-plano{position:absolute;top:-11px;left:18px;background:var(--ouro);color:#12100c;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.plano.sua-cara .botao{display:flex;gap:8px;align-items:center;justify-content:center}
.plano.sua-cara .botao svg{width:18px;height:18px}
.aviso-pronto{margin:14px 0 0;padding:12px 16px;border:1px dashed var(--linha);border-radius:14px;color:var(--suave);font-size:14px}
@media(max-width:600px){.planos.tres .plano{grid-template-columns:1fr}.planos.tres .plano ul{grid-column:1;grid-row:auto;margin-top:10px}}