:root{
  --papel:#F6EBDD; --tinta:#141110; --marrom:#5A3A24; --laranja:#FF8A2A; --ambar:#FFC14D;
  --metal:#C9CCD1; --grav:#3A3D42; --roxo:#1A1430;
  --font:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gut:20px; --raio:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--font);font-weight:400;font-size:1.0625rem;line-height:1.55}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--font);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
p{margin:0}
a{color:inherit}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--tinta);color:var(--papel);padding:10px 16px;border-radius:12px;z-index:50;font-weight:500}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:6px}
.escuro :focus-visible,.sec-marrom :focus-visible{outline-color:var(--ambar)}

/* rótulos */
.rot{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;line-height:1.4}

/* as três faixas */
.faixas{display:inline-flex;flex-direction:column;gap:6px;transform:skewX(-11deg);transform-origin:left center}
.faixas i{display:block;height:8px;border-radius:8px;background:var(--laranja)}
.faixas i:nth-child(2){background:var(--ambar);width:78%}
.faixas i:nth-child(3){background:var(--marrom);width:50%}
.faixas{width:84px}
.sec-marrom .faixas i:nth-child(3),.escuro .faixas i:nth-child(3),footer .faixas i:nth-child(3){background:var(--papel)}
@media (prefers-reduced-motion:no-preference){
  .faixas i{animation:sai .7s cubic-bezier(.2,.8,.2,1) both}
  .faixas i:nth-child(2){animation-delay:.08s}.faixas i:nth-child(3){animation-delay:.16s}
}
@keyframes sai{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:3px solid var(--tinta);background:var(--laranja);color:var(--tinta);font-family:var(--font);font-weight:800;font-size:1.0625rem;letter-spacing:-.01em;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--tinta);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--tinta)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--tinta)}
.btn.claro{background:var(--papel)}
.sec-marrom .btn{border-color:var(--tinta)}
.link{color:var(--marrom);font-weight:500;text-decoration-color:var(--laranja);text-decoration-thickness:3px;text-underline-offset:4px}
.sec-marrom .link,.escuro .link,footer .link{color:var(--papel)}

/* topo */
.topbar{display:flex;justify-content:flex-end;gap:6px 22px;flex-wrap:wrap;padding-top:18px}
.topbar a{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;text-decoration:none;color:var(--marrom);padding:8px 0}
.topbar a:hover{text-decoration:underline;text-decoration-color:var(--laranja);text-decoration-thickness:3px;text-underline-offset:5px}
.hero{position:relative;overflow:hidden;display:flex;flex-direction:column}
.hero-in{position:relative;z-index:2;order:1;padding-bottom:28px}
.hero h1{margin:0}
.hero h1 img{width:min(88%,520px);height:auto}
.frase{margin-top:22px;color:var(--marrom);font-size:.82rem;letter-spacing:.3em}
.linha{margin-top:26px;font-weight:800;letter-spacing:-.02em;font-size:clamp(1.65rem,6.2vw,2.9rem);line-height:1.1;max-width:20ch}
.hero .sub{margin-top:18px;max-width:42ch;font-weight:500}
.hero .acoes{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.hero .topbar{padding-top:18px}
.slides{order:2;position:relative;aspect-ratio:3/2;background:var(--papel);overflow:hidden}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:right center}
.ctl{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.ctl button{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;min-height:40px;padding:0 14px;border-radius:999px;border:2px solid var(--tinta);background:transparent;color:var(--tinta);cursor:pointer}
.ctl .ctl-b[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.ctl .ctl-p{border-style:dashed;border-color:var(--marrom);color:var(--marrom);margin-left:6px}
.selo{position:absolute;right:calc(var(--gut) * -1 + 8px);top:150px;display:none;background:var(--ambar);color:var(--tinta);padding:12px 22px;border-radius:14px;transform:skewX(-11deg);font-size:.72rem}
@media(min-width:860px){
  .hero{min-height:720px;justify-content:center}
  .slides{position:absolute;inset:0;aspect-ratio:auto;order:0}
  .slides::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--papel) 0,rgba(246,235,221,.92) 30%,rgba(246,235,221,0) 58%)}
  .hero-in{padding-bottom:40px}
  .hero-in>*{max-width:540px}
  .linha{max-width:15ch;font-size:clamp(2rem,3.4vw,2.7rem)}
  .slide img{transform:translateX(2.5%)}
  .hero-in>.topbar{max-width:none}
  .selo{display:block;right:4%;top:110px;max-width:none!important}
}

/* seções */
section{padding:72px 0}
.sec-marrom{background:var(--marrom);color:var(--papel)}
.escuro{background:var(--tinta);color:var(--papel)}
.sec-cab{margin-bottom:36px}
.sec-cab .faixas{margin-bottom:22px}
.sec-cab .rot{color:var(--marrom);margin-bottom:12px}
.sec-marrom .sec-cab .rot,.escuro .sec-cab .rot{color:var(--ambar)}
.sec-cab h2{font-size:clamp(1.9rem,6vw,3rem);max-width:18ch}
.sec-cab p{margin-top:14px;max-width:52ch;font-weight:500}

/* produtos */
.prods{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:720px){.prods{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--papel);color:var(--tinta);border-radius:var(--raio);padding:14px 14px 26px;display:flex;flex-direction:column;border:3px solid var(--tinta);box-shadow:0 7px 0 var(--tinta)}
.foto{position:relative;aspect-ratio:4/3;border-radius:calc(var(--raio) - 8px);overflow:hidden;display:grid;place-items:center;border:3px solid var(--tinta)}
.foto .rot{position:absolute;left:12px;bottom:10px;font-size:.62rem;letter-spacing:.2em}
.foto .tela{width:42%;aspect-ratio:1;border-radius:50%}
.f-bito{background:#0B120C;color:#7CE08A}
.f-bito .tela{border:4px solid #1f3a24;background:radial-gradient(circle at 50% 45%,#1d3b22 0,#0f1d12 70%);box-shadow:0 0 28px #3fbf5a55 inset}
.f-mini{background:var(--roxo);color:#CFC4F4}
.f-mini .tela{border:4px solid #3a2f66;background:radial-gradient(circle at 50% 45%,#2a2050 0,#1A1430 70%)}
.f-mini .tela::after{content:"";display:block;width:34%;height:34%;margin:33% auto 0;border-radius:50%;background:var(--laranja)}
.f-op{background:var(--marrom);color:var(--papel);background-image:repeating-linear-gradient(-11deg,transparent 0 22px,#ffffff10 22px 24px)}
.f-op .tela{width:62%;aspect-ratio:3/1.4;border-radius:14px;border:4px solid #8b6446;background:#4a2f1d}
.card .corpo{padding:20px 8px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.tag{display:inline-block;align-self:flex-start;background:var(--marrom);color:var(--papel);padding:5px 12px;border-radius:8px;transform:skewX(-11deg);font-size:.66rem}
.tag.breve{background:var(--ambar);color:var(--tinta)}
.card h3{font-size:1.9rem}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:.98rem}
.card li{padding-left:22px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:6px;border-radius:6px;background:var(--laranja);transform:skewX(-11deg)}
.card .rodape{margin-top:auto;padding-top:14px}
.card .rodape .link{font-weight:800;color:var(--marrom)}

/* como funciona */
.passos{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:p}
@media(min-width:820px){.passos{grid-template-columns:repeat(3,1fr);gap:24px}}
.passos li{background:var(--marrom);color:var(--papel);border-radius:var(--raio);padding:26px 24px 28px;position:relative;counter-increment:p}
.passos li::before{content:"0" counter(p);display:block;font-family:var(--mono);font-weight:700;letter-spacing:.2em;color:var(--ambar);font-size:.8rem;margin-bottom:16px}
.passos h3{font-size:1.5rem;margin-bottom:8px}
.passos p{font-weight:500}

/* destaques Bito e Mini Bito */
.dest{display:grid;gap:28px;align-items:center;margin-top:44px}
@media(min-width:880px){.dest{grid-template-columns:1.1fr 1fr;gap:56px}.dest.inv{grid-template-columns:1fr 1.1fr}.dest.inv .dest-foto{order:2}}
.dest-foto{margin:0;border-radius:24px;overflow:hidden;border:3px solid var(--tinta);box-shadow:0 8px 0 var(--tinta);background:var(--tinta)}
.dest-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.dest-foto.retrato{max-width:460px;justify-self:center;width:100%}
.dest-foto.retrato img{aspect-ratio:4/5}
.dest-txt{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.dest-txt h3{font-size:clamp(2.4rem,9vw,3.6rem)}
.dest-txt .lead{font-size:1.15rem;font-weight:500;max-width:46ch}
.dest-txt ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.dest-txt li{padding-left:26px;position:relative;font-weight:500}
.dest-txt li::before{content:"";position:absolute;left:0;top:.65em;width:14px;height:7px;border-radius:7px;background:var(--laranja);transform:skewX(-11deg)}
.dest-txt .btn{margin-top:8px}
.foto-op{margin:0;border-radius:calc(var(--raio) - 8px);overflow:hidden;border:3px solid var(--tinta);background:var(--tinta)}
.foto-op img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* encomenda */
.enc{display:grid;gap:32px}
@media(min-width:900px){.enc{grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}}
.enc .zap{margin-top:26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.enc .contatos{margin-top:24px;display:grid;gap:6px;font-weight:500}
.form{background:var(--papel);color:var(--tinta);border-radius:var(--raio);padding:26px 22px 28px;border:3px solid var(--tinta);box-shadow:0 7px 0 var(--tinta);display:grid;gap:18px}
.form label{display:block;margin-bottom:6px;color:var(--marrom)}
.form .btn{justify-self:start}
.form .nota{font-size:.9rem;color:#4b3626}
#msg{min-height:1.4em;font-weight:500}

/* rodapé */
footer{background:var(--tinta);color:var(--papel);padding:56px 0 40px}
footer .topo{display:grid;gap:28px}
@media(min-width:800px){footer .topo{grid-template-columns:1fr auto;align-items:end}}
footer img{width:200px;height:auto}
footer nav{display:flex;flex-wrap:wrap;gap:10px 24px}
footer nav a{font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;text-decoration-color:var(--laranja);text-decoration-thickness:3px;text-underline-offset:5px;padding:8px 0}
footer .fam{margin-top:30px;padding-top:24px;border-top:2px solid #ffffff22;display:flex;flex-direction:column;gap:6px;color:#e6d9c8;font-size:.95rem}

/* páginas legais */
.legal{padding:40px 0 72px}
.legal h1{font-size:clamp(2rem,7vw,3rem);margin:22px 0 8px}
.legal h2{font-size:1.4rem;margin:34px 0 8px}
.legal p,.legal li{max-width:66ch;font-weight:500;margin-top:10px}
.legal ul{padding-left:22px}
.legal .atual{color:var(--marrom)}
.escuro .card{border-color:var(--papel);box-shadow:0 7px 0 var(--marrom)}
.escuro .foto-op{border-color:var(--tinta)}
input,textarea,select{font:inherit;font-weight:500;color:var(--tinta);background:#fff8ee;border:3px solid var(--tinta);border-radius:14px;padding:14px 16px;min-height:52px;width:100%}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:#6c5a4c}

/* simuladores */
.sims{display:grid;gap:36px;justify-items:center}
@media(min-width:900px){.sims{grid-template-columns:1fr 1fr;align-items:start}}
.sim{width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px;align-items:center}
.sim h3{font-size:.8rem;letter-spacing:.3em;color:var(--ambar)}
.sim iframe{width:100%;height:720px;border:3px solid var(--papel);border-radius:28px;background:#000;box-shadow:0 8px 0 var(--marrom)}
.escuro .form{border-color:var(--papel);box-shadow:0 7px 0 var(--marrom)}
footer{background:var(--marrom)}