/* Respa: preto técnico. Fundo preto, letra branca fina, pílula branca, laranja só no produto e no brilho. */
@font-face{font-family:"Hanken Grotesk";font-weight:300;font-display:swap;src:url(/assets/fonts/hanken-300-latin.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-400-latin.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-display:swap;src:url(/assets/fonts/hanken-600-latin.woff2) format("woff2")}
:root{--preto:#000;--grafite:#1A1A1A;--grafite-2:#232323;--linha:#2A2A2A;--cinza:#8A8A8A;--cinza-cl:#B5B5B5;--branco:#FFF;--laranja:#FF6A2B;
  --sans:"Hanken Grotesk",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--preto)}
body{font-family:var(--sans);color:var(--branco);background:var(--preto);line-height:1.55;font-size:17px;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:#fff;color:#000;padding:8px;z-index:9}
.rot{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.rot.lj{color:var(--laranja)}

/* topo */
.faixa{background:var(--grafite);color:var(--cinza-cl);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:9px 16px}
.topo{background:rgba(0,0,0,.82);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.topo .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:block;text-decoration:none}.logo img{height:34px;width:auto}
.topo nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.topo nav a{text-decoration:none;color:var(--cinza-cl)}.topo nav a:hover,.topo nav a[aria-current]{color:var(--branco)}
.menu{display:none;margin-left:auto;background:none;color:var(--branco);border:1px solid var(--linha);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px}
.btn{display:inline-block;background:var(--branco);color:var(--preto);text-decoration:none;border:0;border-radius:999px;padding:13px 24px;font:600 15px var(--sans);cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:#E8E8E8;transform:translateY(-1px)}
.btn.ghost{background:none;color:var(--branco);box-shadow:inset 0 0 0 1.5px #555}.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--branco)}
@media (max-width:880px){.topo nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--preto);flex-direction:column;padding:16px;gap:16px;border-bottom:1px solid var(--linha)}
  .topo nav.aberto{display:flex}.menu{display:block}.topo .btn{display:none}}

/* tipografia */
h1{font-size:clamp(44px,7.4vw,92px);line-height:.98;letter-spacing:-.035em;font-weight:300}
h2{font-size:clamp(32px,4.8vw,56px);line-height:1.02;letter-spacing:-.03em;font-weight:300;margin-bottom:16px}
h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.lead{font-size:19px;color:var(--cinza-cl);max-width:540px}
h1+.lead,.rot+h1,.rot+h2{margin-top:16px}

/* seções */
.sec{padding:104px 0;position:relative}
.sec.g{background:var(--grafite)}
.sec.brilho{overflow:hidden}
.sec.brilho::after{content:"";position:absolute;left:50%;bottom:-260px;width:900px;height:520px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,106,43,.34),transparent);pointer-events:none}
.sec>.wrap{position:relative;z-index:1}

/* hero */
.hero{position:relative;overflow:hidden;padding:56px 0 0}
.hero::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-300px;height:560px;background:radial-gradient(closest-side,rgba(255,106,43,.38),transparent);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;position:relative;z-index:1}
.hero .txt{padding-bottom:96px}
.hero .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero .nota{margin-top:20px}
.hero figure{border-radius:24px 24px 0 0}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr;gap:32px}.hero .txt{padding-bottom:0}.hero figure{border-radius:20px}.hero{padding-bottom:48px}}

/* fotos com selo */
figure{position:relative;overflow:hidden;border-radius:20px;background:var(--grafite)}
figure img{width:100%;height:100%;object-fit:cover}
figure figcaption{position:absolute;left:12px;bottom:12px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(0,0,0,.55);padding:5px 9px;border-radius:999px;backdrop-filter:blur(4px)}

/* três verdades */
.fatos{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.fatos div{padding:28px 24px;border-right:1px solid var(--linha)}.fatos div:last-child{border-right:0}
.fatos b{display:block;font-size:22px;font-weight:300;letter-spacing:-.02em}
.fatos span{font-size:14px;color:var(--cinza)}
.fatos i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--laranja);margin-right:10px;vertical-align:middle}
@media (max-width:760px){.fatos{grid-template-columns:1fr}.fatos div{border-right:0;border-bottom:1px solid var(--linha)}.fatos div:last-child{border-bottom:0}}

/* duo: foto + texto */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.duo.inv>figure{order:2}
.duo figure{aspect-ratio:4/5}
.lista-p{list-style:none;margin-top:26px;border-top:1px solid var(--linha)}
.lista-p li{padding:16px 0;border-bottom:1px solid var(--linha);display:grid;grid-template-columns:120px 1fr;gap:16px;font-size:16px}
.lista-p li b{font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza);padding-top:3px}
@media (max-width:880px){.duo{grid-template-columns:1fr;gap:36px}.duo.inv>figure{order:0}.lista-p li{grid-template-columns:1fr;gap:4px}}

/* passos */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.passos figure{aspect-ratio:4/5;margin-bottom:20px}
.passos .n{font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--laranja)}
.passos h3{margin:6px 0 6px;font-size:22px;font-weight:300;letter-spacing:-.02em}
.passos p{color:var(--cinza-cl);font-size:15px}
@media (max-width:880px){.passos{grid-template-columns:1fr;gap:44px}}

/* momentos: dormir, correr, pedalar, academia */
.momentos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.momentos figure{aspect-ratio:4/5;border-radius:16px;margin-bottom:16px}
.momentos h3{margin:0 0 6px;font-size:22px;font-weight:300;letter-spacing:-.02em}
.momentos p{color:var(--cinza-cl);font-size:15px}
@media (max-width:900px){.momentos{grid-template-columns:1fr 1fr;row-gap:32px}}

/* frase grande */
.frase{font-size:clamp(34px,5.6vw,72px);font-weight:300;line-height:1.04;letter-spacing:-.035em;max-width:980px}
.frase em{font-style:normal;color:var(--laranja)}

/* ofertas */
.ofertas{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;margin-top:44px}
.oferta{background:var(--grafite-2);border:1px solid var(--linha);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.sec:not(.g) .oferta{background:var(--grafite)}
.oferta figure{border-radius:0;aspect-ratio:4/3}
.oferta .c{padding:24px 24px 28px;display:flex;flex-direction:column;gap:8px;flex:1}
.oferta h3{font-size:24px;font-weight:300;letter-spacing:-.02em}
.oferta p{color:var(--cinza-cl);font-size:15px}
.oferta .preco{margin-top:auto;padding-top:14px;font-size:14px;color:var(--cinza)}
.oferta .preco b{font-size:24px;font-weight:400;color:var(--branco)}
.oferta.destaque{border-color:#444}
.tag{align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--preto);background:var(--branco);border-radius:999px;padding:5px 10px}
@media (max-width:880px){.ofertas{grid-template-columns:1fr}}

/* tamanhos */
.tams{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
.tams div{border:1px solid var(--linha);border-radius:16px;padding:18px 16px}
.tams b{display:block;font-size:30px;font-weight:300}
.tams i{display:block;height:4px;border-radius:2px;background:var(--branco);margin:12px 0;position:relative}
.tams i::before,.tams i::after{content:"";position:absolute;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--laranja)}
.tams i::before{left:-2px}.tams i::after{right:-2px}
.tams span{font-size:13px;color:var(--cinza)}
@media (max-width:560px){.tams{grid-template-columns:1fr 1fr}}

/* formulário */
.caixa-form{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (max-width:880px){.caixa-form{grid-template-columns:1fr;gap:36px}}
.form{background:var(--grafite);border:1px solid var(--linha);border-radius:24px;padding:30px;display:grid;gap:14px}
.sec.g .form{background:var(--preto)}
.form h3{font-size:24px;font-weight:300;letter-spacing:-.02em;margin-bottom:4px}
.form label{display:grid;gap:6px;font-size:13px;color:var(--cinza-cl)}
.form input,.form select{font:inherit;font-size:16px;color:var(--branco);background:var(--preto);border:1px solid #3A3A3A;border-radius:12px;padding:13px 14px;width:100%}
.form input:focus,.form select:focus{outline:2px solid var(--branco);outline-offset:1px;border-color:transparent}
.form .chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45}
.form .chk input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--laranja)}
.form .esc{position:absolute;left:-9999px}
.form .btn{justify-self:start;margin-top:6px}
.aviso{font-size:14px;min-height:1.2em}.aviso.erro{color:var(--laranja)}
.preco-l{margin-top:22px;color:var(--cinza);font-size:15px}

/* FAQ */
details{border-bottom:1px solid var(--linha)}
details:first-of-type{border-top:1px solid var(--linha)}
summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:19px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:26px;font-weight:300;color:var(--cinza)}
details[open] summary::after{content:"–"}
details div{padding:0 0 24px;color:var(--cinza-cl);max-width:720px}
.faq-w{max-width:860px}

/* texto corrido */
.texto{max-width:740px}.texto h1{font-size:clamp(38px,5.4vw,60px);margin-bottom:28px}
.texto h2{font-size:24px;font-weight:400;margin:38px 0 10px;letter-spacing:-.01em}
.texto p{color:var(--cinza-cl);margin-bottom:14px}.texto p a{color:var(--branco)}

/* marca */
.cores{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:36px}
.cores i{display:block;aspect-ratio:1;border-radius:16px;border:1px solid var(--linha)}
.cores p{font-size:14px;margin-top:8px}.cores span{display:block;color:var(--cinza);font-size:12px}
@media (max-width:640px){.cores{grid-template-columns:repeat(3,1fr)}}
.logos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px}
.logos div{border-radius:20px;border:1px solid var(--linha);display:grid;place-items:center;padding:48px 24px;min-height:220px}
.logos .cl{background:#F2F2F2}
.logos img{max-height:90px;width:auto}
@media (max-width:640px){.logos{grid-template-columns:1fr}}

/* rodapé */
.rod{border-top:1px solid var(--linha);padding:72px 0 120px}
.rod .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.rod .logo img{height:40px}
.rod p{color:var(--cinza);font-size:14px;margin-top:14px;max-width:320px}
.rod h3{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza);margin-bottom:14px}
.rod ul{list-style:none;display:grid;gap:9px;font-size:15px}.rod ul a{text-decoration:none;color:var(--cinza-cl)}.rod ul a:hover{color:var(--branco)}
.rod .miudo{max-width:none;margin-top:56px;padding-top:24px;border-top:1px solid var(--linha);font-size:12px;line-height:1.7}
@media (max-width:760px){.rod .cols{grid-template-columns:1fr 1fr}.rod .cols>div:first-child{grid-column:span 2}}

/* barra do celular */
.barra-m{display:none}
@media (max-width:880px){.barra-m{display:block;position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.92) 35%);z-index:6}
  .barra-m .btn{display:block;text-align:center}}