/* Loja Dilera: mesma identidade do Dilera Boost (contorno preto, fundo bone, sombra dura) */
:root{
  --ink:#111014;--ink-2:#1C1A21;--ink-3:#2C2933;--ink-4:#6F6A7A;
  --bone:#FFF7EF;--bone-2:#F6E9DB;--bone-3:#E6D6C4;
  --pink:#FF2D9B;--pink-2:#E2187F;--cyan:#2ED3E4;--acid:#FFD54A;
  --ok:#1F7A4D;--erro:#D0202A;--muted:#4A4553;
  --head:'Archivo Black','Arial Black',system-ui,sans-serif;
  --body:'Inter','Segoe UI',system-ui,sans-serif;
  --bw:2px;--sh:6px 6px 0 0 var(--ink);--sh-sm:4px 4px 0 0 var(--ink);
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bone);color:var(--ink);line-height:1.55;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.02;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* topo */
.top{border-bottom:var(--bw) solid var(--ink);background:var(--bone);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--head);font-size:1.15rem}
.marca img{width:30px;height:30px}
.marca b{color:var(--pink);font-weight:400}
.top nav{display:flex;gap:18px;font-weight:700;font-size:.9rem}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--pink-2)}
@media (max-width:560px){.top nav .so-desk{display:none}}

/* faixa rolando */
.faixa{background:var(--ink);color:var(--bone);border-bottom:var(--bw) solid var(--ink);overflow:hidden;white-space:nowrap}
.faixa div{display:inline-block;padding:9px 0;font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  animation:rola 28s linear infinite}
.faixa span{margin:0 18px}
.faixa i{font-style:normal;color:var(--acid)}
@keyframes rola{to{transform:translateX(-50%)}}

/* botões */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:900;font-size:1rem;
  padding:15px 24px;border:var(--bw) solid var(--ink);background:var(--pink);color:#fff;box-shadow:var(--sh-sm);
  text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s;border-radius:2px;letter-spacing:.01em}
.bt:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink)}
.bt:active{transform:translate(3px,3px);box-shadow:1px 1px 0 0 var(--ink)}
.bt.claro{background:#fff;color:var(--ink)}
.bt.acid{background:var(--acid);color:var(--ink)}
.bt.cyan{background:var(--cyan);color:var(--ink)}
.bt[disabled]{opacity:.55;cursor:wait;transform:none}
.bt.peq{padding:9px 14px;font-size:.85rem}

/* adesivos */
.tag{display:inline-block;font-weight:900;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border:var(--bw) solid var(--ink);background:var(--acid);box-shadow:3px 3px 0 0 var(--ink)}
.tag.rosa{background:var(--pink);color:#fff}
.tag.cyan{background:var(--cyan)}
.tag.preta{background:var(--ink);color:var(--bone)}

/* hero */
.hero{padding:46px 0 64px;border-bottom:var(--bw) solid var(--ink);
  background:radial-gradient(circle at 1px 1px,rgba(17,16,20,.13) 1px,transparent 0) 0 0/18px 18px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.6rem,7.4vw,5.4rem);margin:18px 0 18px}
.hero h1 .mk{background:var(--pink);color:#fff;padding:0 .12em;display:inline-block;transform:rotate(-1.5deg);
  border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm)}
.hero p.lead{font-size:1.12rem;max-width:30em;color:var(--ink-3)}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.foto{position:relative;border:var(--bw) solid var(--ink);box-shadow:10px 10px 0 0 var(--ink);background:#fff;transform:rotate(1.6deg)}
.foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.foto .balao{position:absolute;left:-22px;bottom:34px;background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--sh-sm);
  padding:12px 14px;font-weight:800;font-size:.95rem;max-width:230px;transform:rotate(-3deg)}
.foto .balao:after{content:"";position:absolute;right:26px;bottom:-12px;width:18px;height:18px;background:#fff;
  border-right:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);transform:rotate(45deg)}
.foto .selo{position:absolute;top:-18px;right:-14px;transform:rotate(8deg)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .foto{max-width:420px;margin:0 auto;transform:rotate(1deg)}
  .foto .balao{left:-6px}
}

/* seções */
.sec{padding:70px 0;border-bottom:var(--bw) solid var(--ink)}
.sec.escura{background:var(--ink);color:var(--bone)}
.sec.rosa{background:var(--pink)}
.tit{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.tit h2{font-size:clamp(2rem,5vw,3.3rem)}
.tit p{max-width:30em;color:var(--muted)}
.escura .tit p{color:var(--bone-3)}

/* vitrine */
.vitrine{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:22px}
.prod{background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--sh);display:flex;flex-direction:column;
  text-decoration:none;transition:transform .15s,box-shadow .15s;min-width:0}
a.prod:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 0 var(--ink)}
.prod .capa{position:relative;border-bottom:var(--bw) solid var(--ink);aspect-ratio:4/3;overflow:hidden;background:var(--bone-2)}
.prod .capa img{width:100%;height:100%;object-fit:cover}
.prod .capa .tag{position:absolute;top:14px;left:14px}
.prod .info{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod h3{font-size:1.45rem}
.prod p{color:var(--ink-3);font-size:.95rem}
.prod .rodape{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;gap:10px}
.preco{font-family:var(--head);font-size:1.6rem}
.preco small{font-family:var(--body);font-weight:700;font-size:.75rem;color:var(--ink-4);display:block;letter-spacing:.06em}
.prod.fechado .capa{background:var(--ink);display:grid;place-items:center}
.prod.fechado .capa .grande{font-family:var(--head);color:var(--bone);font-size:clamp(2.2rem,5vw,3.2rem);
  text-align:center;line-height:.95;transform:rotate(-4deg)}
.prod.fechado .capa .grande em{font-style:normal;color:var(--acid)}
.prod.boost .capa{background:var(--cyan);display:grid;place-items:center}
.prod.boost .capa img{width:46%;height:auto;object-fit:contain}
@media (max-width:900px){.vitrine{grid-template-columns:1fr 1fr}.vitrine .prod:first-child{grid-column:1/-1}}
@media (max-width:600px){.vitrine{grid-template-columns:1fr}}

/* passos */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:p}
.passo{border:var(--bw) solid var(--bone);padding:24px;position:relative}
.passo:before{counter-increment:p;content:counter(p);font-family:var(--head);font-size:3.4rem;line-height:1;color:var(--acid);display:block;margin-bottom:12px}
.passo h3{font-size:1.3rem;margin-bottom:6px}
.passo p{color:var(--bone-3);font-size:.95rem}
@media (max-width:760px){.passos{grid-template-columns:1fr}}

/* formulários */
.card{background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--sh);padding:26px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo label,.campo .rot{font-weight:800;font-size:.85rem}
.campo small{color:var(--ink-4);font-size:.8rem}
input,textarea,select{font:inherit;font-size:1rem;padding:13px 14px;border:var(--bw) solid var(--ink);background:var(--bone);
  color:var(--ink);border-radius:2px;width:100%}
input:focus,textarea:focus,select:focus{outline:none;background:#fff;box-shadow:var(--sh-sm)}
textarea{min-height:130px;resize:vertical}
.campo.erro input,.campo.erro textarea{border-color:var(--erro);background:#FFF0F0}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.duas{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:9px 14px;border:var(--bw) solid var(--ink);font-weight:800;font-size:.88rem;background:#fff}
.chips input:checked+span{background:var(--ink);color:var(--bone)}
.chips input:focus-visible+span{outline:3px solid var(--pink);outline-offset:2px}
.contador{text-align:right;font-size:.75rem;color:var(--ink-4)}
.msg{padding:12px 14px;border:var(--bw) solid var(--ink);font-weight:700;margin-top:14px;display:none}
.msg.on{display:block}
.msg.erro{background:#FFE3E3}
.msg.ok{background:#DDF6E8}
.hp{position:absolute;left:-9999px}

/* página do produto */
.produto{padding:44px 0 70px}
.produto .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:start}
.produto h1{font-size:clamp(2.3rem,6vw,3.8rem);margin:14px 0 14px}
.lista{list-style:none;margin:22px 0;display:grid;gap:10px}
.lista li{padding-left:34px;position:relative;font-weight:600}
.lista li:before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;background:var(--acid);border:var(--bw) solid var(--ink)}
.exemplos{display:grid;gap:10px;margin-top:10px}
.exemplo{border:var(--bw) dashed var(--ink);padding:12px 14px;font-size:.92rem;background:#fff}
.exemplo b{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-2);margin-bottom:3px}
.resumo{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:var(--bw) solid var(--ink);
  padding-top:18px;margin-top:6px;flex-wrap:wrap}
.pagamento{font-size:.8rem;color:var(--ink-4);margin-top:12px}
.sticky{position:sticky;top:84px}
@media (max-width:900px){.produto .wrap{grid-template-columns:1fr}.sticky{position:static}}

/* faq */
.faq details{border:var(--bw) solid var(--ink);background:#fff;margin-bottom:12px}
.faq summary{padding:16px 18px;font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-family:var(--head);font-size:1.3rem;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 18px 18px;color:var(--ink-3)}

/* rodapé */
footer{padding:34px 0 46px;font-size:.85rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{font-weight:700}

/* páginas centradas (obrigado, entrega) */
.centro{min-height:calc(100vh - 62px);display:grid;place-items:center;padding:40px 18px}
.centro .card{max-width:560px;width:100%;text-align:center}
.centro h1{font-size:clamp(2rem,6vw,2.9rem);margin:14px 0 12px}
.player{border:var(--bw) solid var(--ink);box-shadow:var(--sh);background:var(--ink);margin:20px auto 22px;max-width:420px}
.player video{width:100%;max-height:70vh}
.spin{width:38px;height:38px;border:4px solid var(--bone-3);border-top-color:var(--pink);border-radius:50%;margin:18px auto;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .foto,.hero h1 .mk{transform:none}
}

/* drop: texto + formulário lado a lado, empilha no celular */
.drop{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
@media (max-width:760px){.drop{grid-template-columns:1fr}}