@font-face{font-family:Anton;src:url(/assets/fonts/anton-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --preto:#111111;--preto-2:#1a1a18;--linha:#2e2e2a;--amarelo:#FFD400;--amarelo-2:#F0C800;
  --vermelho:#E63322;--vermelho-txt:#B8241A;--papel:#FAFAF5;--papel-2:#EFEFE6;
  --tinta-suave:#cfcfc6;--tinta-papel:#3d3d38;
  --raio:10px;--p:0;
  --t-h1:clamp(2.9rem,12.6vw,5.4rem);--t-h2:clamp(2.2rem,7.5vw,3.9rem);--t-h3:clamp(1.45rem,4.6vw,1.9rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--amarelo) var(--preto)}
body{background:var(--preto);color:var(--papel);font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.55;caret-color:var(--amarelo)}
::selection{background:var(--amarelo);color:var(--preto)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--preto)}::-webkit-scrollbar-thumb{background:var(--amarelo);border-radius:5px}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px;border-radius:4px}
.papel :focus-visible{outline-color:var(--preto)}
.oculto{display:none!important}

h1,h2,h3{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.05;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);line-height:1.12;margin-bottom:.45em}
h3{font-size:var(--t-h3);line-height:1.05}
.amarelo{color:var(--amarelo)}
.papel .destaque{background:var(--amarelo);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.wrap{width:min(100%,1120px);margin-inline:auto}
section{padding:clamp(64px,11vw,120px) 18px}
.escuro{background:var(--preto);color:var(--papel)}
.papel{background:var(--papel);color:var(--preto)}
.papel p,.papel li{color:var(--tinta-papel)}
.texto{max-width:62ch}
.texto p+p{margin-top:1em}

/* fita zebrada da claquete */
.fita{height:16px;background:repeating-linear-gradient(-45deg,var(--amarelo) 0 14px,var(--preto) 14px 28px)}

/* topo */
.marca{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:20px 0 0}
.logo{font-family:Anton,sans-serif;font-size:1.55rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.logo span{color:var(--vermelho)}
.por{font-size:.82rem;color:var(--tinta-suave)}

/* hero */
.hero{padding:28px 18px 72px}
.hero-grid{display:grid;gap:28px}
.hero h1{margin-top:22px}
.hero .sub{font-size:1.06rem;color:var(--tinta-suave);margin-top:16px;max-width:46ch}
.cta-bloco{margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--amarelo);color:var(--preto);font-weight:800;font-size:1.02rem;letter-spacing:.02em;text-decoration:none;text-transform:uppercase;padding:18px 26px;border-radius:var(--raio);box-shadow:0 10px 24px rgba(0,0,0,.35);transition:background .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:hover{background:var(--amarelo-2);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.largo{width:100%}
.apoio{font-size:.86rem;color:var(--tinta-suave);margin-top:10px}
.papel .apoio{color:var(--tinta-papel)}

.demo{position:relative;width:min(100%,430px);margin-inline:auto}
.tela{position:relative;aspect-ratio:9/16;border-radius:var(--raio);overflow:hidden;background:#000 center/cover no-repeat;box-shadow:0 30px 60px rgba(0,0,0,.55)}
.tela video{width:100%;height:100%;object-fit:cover}
.som{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;background:rgba(17,17,17,.82);color:var(--papel);border:1.5px solid var(--amarelo);border-radius:99px;padding:9px 14px;font:700 .86rem Archivo,sans-serif;cursor:pointer}
.som svg{width:18px;height:18px}
.legenda-demo{font-size:.9rem;color:var(--tinta-suave);margin-top:12px;text-align:center}

/* régua de cortes (assinatura): trilho, cortes em vermelho e agulha que anda com a rolagem */
.regua{position:relative;height:26px;margin-top:16px}
.regua::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;border-radius:2px;background:var(--linha)}
.regua i{position:absolute;top:7px;height:12px;border-radius:2px;background:var(--vermelho)}
.regua::after{content:"";position:absolute;top:0;left:calc(var(--p) * (100% - 3px));width:3px;height:26px;border-radius:2px;background:var(--amarelo)}
.papel .regua::before{background:#d9d9cf}
.papel .regua::after{background:var(--preto);box-shadow:none}
.separador{padding:0 18px;background:inherit}
.separador .regua{margin:0}

/* dor */
.dores{list-style:none;margin-top:8px;max-width:62ch}
.dores li{display:grid;grid-template-columns:22px 1fr auto;gap:14px;padding:16px 0;border-top:1px solid #dcdcd2;font-size:1.08rem}
.dores li:last-child{border-bottom:1px solid #dcdcd2}
.dores svg{width:22px;height:22px;color:var(--vermelho-txt);margin-top:3px}
.tc svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.tc{font-weight:700;font-size:.8rem;letter-spacing:.04em;color:var(--vermelho-txt);white-space:nowrap;align-self:start;margin-top:4px;font-variant-numeric:tabular-nums}
.rec{display:inline-flex;align-items:center;gap:7px;margin-left:10px;vertical-align:middle;font:800 .72rem Archivo,sans-serif;letter-spacing:.1em;color:var(--papel);border:1.5px solid var(--vermelho);border-radius:var(--raio);padding:4px 9px}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vermelho)}
.separador.antes{padding-top:clamp(40px,7vw,72px)}
.fecho{margin-top:26px;font-weight:700;font-size:1.15rem;color:var(--preto)!important;max-width:52ch}

/* como funciona */
.passos{list-style:none;display:grid;gap:0;margin-top:10px;position:relative}
.passo{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--linha)}
.passo:last-child{border-bottom:1px solid var(--linha)}
.passo .n{width:64px;font-family:Anton,sans-serif;font-size:2.6rem;line-height:1;color:var(--amarelo);border:2px solid var(--amarelo);border-radius:var(--raio);height:64px;display:flex;align-items:center;justify-content:center}
.passo h3{margin-bottom:8px}
.passo p{color:var(--tinta-suave);max-width:56ch}
.fala{display:inline;background:var(--preto-2);border:1px solid var(--linha);border-radius:var(--raio);padding:1px 7px;color:var(--papel);font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* portfólio */
.portfolio{background:var(--preto-2)}
.trilha{display:grid;grid-auto-flow:column;grid-auto-columns:min(64vw,250px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;padding:6px 18px 18px;margin:18px -18px 0;scrollbar-width:thin}
.trilha figure{scroll-snap-align:start}
.trilha .tela{border-radius:var(--raio);box-shadow:0 18px 36px rgba(0,0,0,.45)}
.trilha figcaption{font-weight:700;font-size:.95rem;margin-top:10px}
.trilha figcaption small{display:block;font-weight:400;color:var(--tinta-suave);font-size:.85rem}
.carrosseis{display:grid;grid-auto-flow:column;grid-auto-columns:min(58vw,230px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:18px;padding:4px 18px 14px;margin:26px -18px 0}
.carrosseis img{scroll-snap-align:start}
.carrosseis img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio)}
.carrosseis.capas img{aspect-ratio:9/16}
.nota-portfolio{margin-top:18px;color:var(--tinta-suave)}

/* o que vem */
.itens{list-style:none;margin-top:10px;max-width:760px}
.itens li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-top:1px solid #dcdcd2}
.itens li:last-child{border-bottom:1px solid #dcdcd2}
.itens .ic{width:44px;height:44px;border-radius:var(--raio);background:var(--preto);color:var(--amarelo);display:flex;align-items:center;justify-content:center}
.itens .ic svg{width:24px;height:24px}
.itens b{display:block;color:var(--preto);font-size:1.08rem;margin-bottom:2px}

/* requisitos */
.checklist{list-style:none;margin-top:10px;max-width:62ch}
.checklist li{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:12px 0;color:var(--papel)}
.checklist svg{width:24px;height:24px;color:var(--amarelo);margin-top:1px}
.checklist b{color:var(--papel)}
.checklist small{display:block;color:var(--tinta-suave);font-size:.92rem}

/* para quem */
.colunas{display:grid;gap:34px;margin-top:6px}
.colunas h3{margin-bottom:14px}
.lista-sim,.lista-nao{list-style:none}
.lista-sim li,.lista-nao li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:10px 0}
.lista-sim svg{width:22px;height:22px;color:var(--preto)}
.lista-nao svg{width:22px;height:22px;color:var(--tinta-papel)}

/* quem sou */
.quem{display:grid;gap:28px;align-items:center}
.quem img{width:min(100%,360px);aspect-ratio:1;object-fit:cover;border-radius:var(--raio);box-shadow:0 24px 50px rgba(0,0,0,.5)}
.quem p{color:var(--tinta-suave)}
.quem p b{color:var(--papel)}

/* preço */
.preco{text-align:center}
.preco .ancora{max-width:44ch;margin:0 auto;color:var(--tinta-suave);font-size:1.08rem}
.valor{font-family:Anton,sans-serif;font-size:clamp(4.6rem,20vw,8rem);line-height:.9;color:var(--amarelo);margin:28px 0 6px}
.parcelas{font-weight:700}
.claude-nota{font-size:.9rem;color:var(--tinta-suave);margin:8px auto 26px;max-width:46ch}
.preco .btn{min-width:min(100%,380px)}
/* depoimentos */
.depo{display:grid;gap:26px;margin-top:22px;align-items:center}
.depo-video{width:min(100%,340px)}
.depo-video video{object-fit:contain;background:#000}
.depo-cta{position:absolute;left:8%;right:8%;top:55.5%;height:10.5%;border-radius:999px;color:transparent;font-size:0}
.depo-texto blockquote{font-family:Anton,sans-serif;text-transform:uppercase;font-size:var(--t-h3);line-height:1.1;color:var(--preto)}
.depo-quem{font-weight:800;margin-top:14px;color:var(--preto)}
.depo-desc{color:var(--tinta-papel);margin:6px 0 22px;max-width:46ch}

/* garantia */
.garantia{display:grid;grid-template-columns:92px minmax(0,620px);gap:20px;align-items:center}
.selo{width:92px;height:92px;border-radius:50%;background:var(--preto);color:var(--amarelo);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Anton,sans-serif;line-height:.9}
.selo b{font-size:2.6rem;font-weight:400}
.selo small{font:700 .7rem Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.garantia h2{font-size:clamp(1.9rem,6vw,2.8rem);margin-bottom:.3em}

/* faq */
.faq details{max-width:760px}
.faq details{border-top:1px solid #dcdcd2}
.faq details:last-child{border-bottom:1px solid #dcdcd2}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:700;font-size:1.06rem;color:var(--preto)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;flex-shrink:0;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;max-width:62ch}

/* final */
.final{text-align:center}
.final h2{max-width:14ch;margin-inline:auto}
footer{padding:28px 18px 110px;color:var(--tinta-suave);font-size:.85rem;text-align:center}
footer a{color:var(--papel)}

/* barra fixa (celular) */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(17,17,17,.96);border-top:2px solid var(--amarelo);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.barra.visivel{transform:translateY(0)}
.barra small{font-size:.8rem;color:var(--tinta-suave);line-height:1.25}
.barra small b{display:block;font-family:Anton,sans-serif;font-weight:400;font-size:1.4rem;color:var(--papel)}
.barra .btn{flex:1;padding:15px 14px;font-size:.92rem}

@media (min-width:900px){
  body{font-size:18px}
  .hero{padding:36px 18px 96px}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
  .demo{width:min(100%,400px)}
  .trilha{grid-auto-columns:220px;margin:18px 0 0;padding:6px 0 18px}
  .carrosseis{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);grid-auto-columns:auto;max-width:1000px;margin:28px 0 0;padding:0;overflow:visible}
  .carrosseis.capas{grid-template-columns:repeat(4,1fr);max-width:800px}
  .depo{grid-template-columns:340px 1fr;gap:56px}
  .colunas{grid-template-columns:1fr 1fr;gap:56px}
  .quem{grid-template-columns:360px 1fr;gap:56px}
  .barra{display:none}
  .dores-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
  .passos{grid-template-columns:repeat(3,1fr);gap:28px}
  .passo{grid-template-columns:1fr;align-content:start;row-gap:16px;border-top:2px solid var(--linha);border-bottom:0!important;padding-top:26px}
  .passo h3{min-height:2.2em}
  .passo:last-child{border-bottom:0}
  .itens{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;max-width:none}
  .itens li:nth-last-child(2){border-bottom:1px solid #dcdcd2}
  .checklist{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;max-width:none}
  footer{padding-bottom:40px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.barra,.faq summary svg{transition:none}
}
