@font-face{font-family:"Comic Neue";src:url(fonts/ComicNeue-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
:root{
  --tinta:#1F2B4D;      /* azul-marinho das capas */
  --legenda:#FFD84D;    /* caixa amarela da narração */
  --kit:#D7263D;        /* vermelho dos selos */
  --ceu:#E8F4FC;        /* céu claro */
  --papel:#FFFFFF;
  --texto:#24304F;
  --suave:#5A6585;
  --r:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--texto);font:400 1.0625rem/1.55 "Atkinson Hyperlegible",system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:var(--tinta)}
h1,h2,h3{font-family:"Comic Neue","Comic Sans MS",cursive;font-weight:700;color:var(--tinta);line-height:1.15;margin:0 0 .5rem}
h1{font-size:clamp(1.65rem,5.2vw,2.6rem)}
h2{font-size:clamp(1.45rem,4.2vw,2rem)}
h3{font-size:1.5rem}
p{margin:0 0 .8rem}
:focus-visible{outline:3px solid var(--kit);outline-offset:3px}
.pular{position:absolute;left:-9999px}.pular:focus{left:16px;top:8px;background:#fff;padding:.5rem;z-index:20}

.topo{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem 16px;background:rgba(255,255,255,.96);border-bottom:3px solid var(--tinta)}
.logo{height:60px;width:auto}
@media (min-width:860px){.topo{padding-inline:max(16px,calc((100% - 1080px)/2 + 16px))}.logo{height:64px}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.7rem 1.4rem;background:var(--kit);color:#fff;font:700 1.15rem/1.1 "Comic Neue","Comic Sans MS",cursive;text-decoration:none;border:3px solid var(--tinta);border-radius:var(--r);box-shadow:4px 4px 0 var(--tinta);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tinta)}
.btn-peq{min-height:42px;padding:.45rem 1rem;font-size:1rem;box-shadow:3px 3px 0 var(--tinta)}

main{max-width:1080px;margin:0 auto;padding:0 16px}
section{margin:2.75rem 0}

/* hero: um quadro de história em quadrinhos com a caixa de narração */
.hero{margin-top:1.25rem;position:relative}
.quadro{border:4px solid var(--tinta);border-radius:var(--r);overflow:hidden;box-shadow:6px 6px 0 var(--tinta)}
.quadro img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 30%}
.legenda{position:relative;margin:.9rem 0 0;background:var(--legenda);border:3px solid var(--tinta);border-radius:6px;padding:1rem 1.1rem .4rem;box-shadow:4px 4px 0 var(--tinta)}
.legenda p{color:var(--tinta)}
@media (min-width:860px){
  .hero{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:center}
  .legenda{margin:0;padding:1.4rem 1.4rem .6rem}
}
@media (max-width:520px){.legenda h1{font-size:1.45rem}.legenda p{font-size:.95rem}}

/* ofertas */
.kits h2{margin-bottom:1rem}
.lista{display:grid;gap:1.75rem}
.oferta{border:3px solid var(--tinta);border-radius:var(--r);background:#fff;padding:1rem}
.oferta.destaque{box-shadow:6px 6px 0 var(--kit)}
.oferta-topo{display:grid;grid-template-columns:118px 1fr;gap:.9rem;align-items:start}
.oferta-img img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--tinta);border-radius:6px}
.oferta-topo h3,.oferta-topo h1{font-size:1.35rem;margin-bottom:.3rem}
.sub{color:var(--suave);font-size:.98rem;margin:0}
@media (min-width:860px){
  .oferta{padding:1.4rem}
  .oferta-topo{grid-template-columns:190px 1fr}
  .oferta-topo h3,.oferta-topo h1{font-size:1.7rem}
}
.compra{margin:.9rem 0 .4rem}
.preco{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.25rem}
.valor{font:700 2rem/1 "Comic Neue",cursive;color:var(--tinta)}
.garantia{font-size:.95rem;color:var(--suave)}
.aviso{font-weight:700;color:var(--kit);margin-bottom:.6rem}
.compra .btn{width:100%}
.seguro{font-size:.88rem;color:var(--suave);margin:.55rem 0 0;text-align:center}
details{border-top:2px dashed #C9D3E6;margin-top:.9rem;padding-top:.6rem}
summary{cursor:pointer;font-weight:700;color:var(--tinta);padding:.35rem 0;list-style-position:inside}
.itens{padding-left:1.15rem;margin:.4rem 0 .8rem}
.itens li{margin:.3rem 0}
.mini{font-size:.9rem;color:var(--suave);margin-bottom:.4rem}
.fotos{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 .5rem;margin:0;list-style:none}
.fotos li{flex:0 0 62%;scroll-snap-align:start}
.fotos img{border-radius:6px;border:2px solid var(--tinta)}
@media (min-width:860px){
  .lista{grid-template-columns:1.25fr 1fr;align-items:start}
  .oferta.destaque .oferta-img img{aspect-ratio:1}
  .fotos li{flex-basis:45%}
}

/* grátis: cupom com borda tracejada */
.gratis{display:grid;grid-template-columns:110px 1fr;gap:1rem;align-items:start;background:var(--ceu);border:3px dashed var(--tinta);border-radius:var(--r);padding:1.1rem}
.gratis-img img{border:2px solid var(--tinta);border-radius:6px}
.form label{display:block;font-weight:700;margin-bottom:.3rem}
.linha{display:flex;flex-direction:column;gap:.6rem}
.form input{min-height:52px;width:100%;font:inherit;padding:.6rem .8rem;border:3px solid var(--tinta);border-radius:var(--r);background:#fff}
.ok{font-weight:700;color:var(--tinta);background:var(--legenda);padding:.6rem .8rem;border-radius:6px}
@media (min-width:640px){.gratis{grid-template-columns:170px 1fr;padding:1.5rem}.linha{flex-direction:row}.linha .btn{flex:0 0 auto}}
@media (max-width:420px){.gratis{grid-template-columns:88px 1fr;gap:.8rem}}

/* passos: sequência real */
.passos ol{counter-reset:p;list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.passos li{counter-increment:p;position:relative;padding:.2rem 0 .2rem 3.2rem;min-height:2.6rem}
.passos li::before{content:counter(p);position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;display:grid;place-items:center;background:var(--legenda);border:3px solid var(--tinta);border-radius:50%;font:700 1.2rem "Comic Neue",cursive;color:var(--tinta)}
@media (min-width:860px){.passos ol{grid-template-columns:repeat(3,1fr)}}

.sobre{display:grid;gap:1.2rem;align-items:center}
.sobre-img img{width:150px;border-radius:50%}
@media (min-width:860px){.sobre{grid-template-columns:200px 1fr}.sobre-img img{width:200px}}

.garantia-box{background:var(--tinta);color:#fff;border-radius:var(--r);padding:1.3rem 1.2rem}
.garantia-box h2{color:var(--legenda)}
.faq details{border-top:2px solid #E1E7F2}
.faq details p{margin:.3rem 0 .8rem}

.produto .voltar{margin:1rem 0}
.produto{max-width:720px}
.produto .oferta h1{font-size:clamp(1.6rem,5vw,2.2rem)}

.texto{max-width:44rem;padding-top:1.5rem}

.rodape{margin-top:3rem;padding:2rem 16px 6.5rem;background:var(--ceu);text-align:center;font-size:.95rem}
.redes a{margin:0 .6rem;font-weight:700}
.ia{color:var(--suave)}

/* barra fixa de compra no celular */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem 16px calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:3px solid var(--tinta);transform:translateY(110%);transition:transform .25s}
.barra.ver{transform:none}
.barra{transform:none}
body{padding-bottom:0}
.barra .valor{font-size:1.25rem;margin-left:.3rem}
@media (prefers-reduced-motion:reduce){.barra{transition:none}}
@media (min-width:860px){.barra{display:none}.rodape{padding-bottom:2rem}}

/* trecho do vídeo */
.trecho{border-top:0;margin-top:.8rem;padding-top:0}
.trecho summary{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border:2px solid var(--tinta);border-radius:999px;background:var(--legenda);font-size:.98rem;list-style:none}
.trecho summary::-webkit-details-marker{display:none}
.trecho summary::before{content:"";width:0;height:0;border-left:11px solid var(--tinta);border-top:7px solid transparent;border-bottom:7px solid transparent}
.trecho video{display:block;width:100%;max-width:300px;height:auto;margin-top:.7rem;border:3px solid var(--tinta);border-radius:8px;background:#000}

/* preço simbólico */
.nota{font-size:.95rem;color:var(--texto);background:var(--ceu);border-left:4px solid var(--legenda);padding:.45rem .7rem;border-radius:4px;margin:.2rem 0 .7rem}
/* por que */
.motivos{display:grid;gap:1rem}
.motivo{background:var(--legenda);border:3px solid var(--tinta);border-radius:6px;padding:1rem 1.1rem .4rem;box-shadow:4px 4px 0 var(--tinta)}
.motivo h3{font-size:1.3rem}
.motivo p{color:var(--tinta)}
@media (min-width:860px){.motivos{grid-template-columns:repeat(3,1fr)}}

.legenda .btn{margin:.2rem 0 .8rem}

.confianca{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:center;margin:1.2rem 0 0;padding:.7rem 1rem;background:var(--ceu);border-radius:var(--r);font-weight:700;color:var(--tinta);font-size:.95rem}
.confianca li::before{content:"✓ ";color:var(--kit)}
.destaques{list-style:none;padding:0;margin:.8rem 0 .2rem;display:grid;gap:.25rem}
.destaques li{padding-left:1.4rem;position:relative}
.destaques li::before{content:"✓";position:absolute;left:0;color:var(--kit);font-weight:700}
.presente{font-weight:700;color:var(--tinta);margin:.4rem 0 0}