:root{--accent:#F26038}
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans.ttf') format('truetype');font-weight:400 700;font-display:swap}
*{box-sizing:border-box}
img{max-width:100%}

html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;font-family:'Instrument Sans','Segoe UI',Helvetica,sans-serif;background:#FCFCFB;color:#17181A;-webkit-font-smoothing:antialiased}
a{color:#17181A}a:hover{opacity:.72}
summary::-webkit-details-marker{display:none}
:root,[data-theme="light"]{--ink:#17181A;--muted:#6A6F73;--line:#E9E6E2;--ground:#FCFCFB;--surface:#FFFFFF;--tint:#FEF4EF;--tint2:#FDE9DF;--glass:rgba(252,252,251,0.82);--mark:#FCD3C3;--dash:#E3B9A8;--accent:#F26038}
[data-theme="dark"]{--ink:#F2EFEC;--muted:#A6ACB2;--line:#2E3236;--ground:#131417;--surface:#1B1D21;--tint:#241A16;--tint2:#31211A;--glass:rgba(19,20,23,0.82);--mark:rgba(242,96,56,0.38);--dash:#5A3A2C}
img[data-logo="dark"]{display:none !important}
[data-theme="dark"] img[data-logo="dark"]{display:block !important}
[data-theme="dark"] img[data-logo="light"]{display:none !important}
[data-theme="dark"] .u-card{box-shadow:0 1px 2px rgba(0,0,0,.30),0 12px 32px -16px rgba(0,0,0,.55)}
.u-theme{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;padding:0;transition:border-color .2s ease,transform .15s ease}
.u-theme:hover{border-color:var(--accent)}
.u-theme:active{transform:scale(.94)}
.u-theme svg{width:18px;height:18px;display:block}
.u-theme .u-moon{display:none}
[data-theme="dark"] .u-theme .u-moon{display:block}
[data-theme="dark"] .u-theme .u-sun{display:none}
.u-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}
header{transition:box-shadow .3s ease,background-color .3s ease}
header.is-scrolled{box-shadow:0 14px 34px -22px rgba(23,24,26,.35)}
/* marca-texto que se desenha nos títulos */
.u-mark{background-image:linear-gradient(transparent 60%,var(--mark) 60%,var(--mark) 94%,transparent 94%);background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.js-fx .u-mark{background-size:0% 100%;transition:background-size 1s cubic-bezier(.2,.7,.2,1) .55s}
.js-fx.fx-ready .u-mark{background-size:100% 100%}
/* faixa rolante */
@keyframes uMarquee{to{transform:translateX(-50%)}}
.u-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.u-marquee-track{display:flex;width:max-content;animation:uMarquee 42s linear infinite}
.u-marquee:hover .u-marquee-track{animation-play-state:paused}
/* revelações variadas */
.js-reveal .u-reveal.u-fx-left{transform:translateX(-40px)}
.js-reveal .u-reveal.u-fx-zoom{transform:scale(.93)}
.js-reveal .u-reveal.u-fx-wipe{opacity:1;transform:none}
.js-reveal .u-reveal.u-fx-wipe .u-photo{clip-path:inset(0 100% 0 0 round 22px);transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1)}
.js-reveal .u-reveal.u-fx-wipe.is-in .u-photo{clip-path:inset(0 0 0 0 round 22px)}
.js-reveal .u-reveal.u-fx-wipe figcaption{opacity:0;transition:opacity .6s ease .7s}
.js-reveal .u-reveal.u-fx-wipe.is-in figcaption{opacity:1}
/* linha dos passos que se desenha */
.u-step{position:relative}
.u-step::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.js-reveal .u-step.was-in::before{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .3s}
html:not(.js-reveal) .u-step::before{transform:scaleX(1)}
/* tracinho dos subtítulos cresce */
.js-reveal .u-reveal .u-eline{width:0 !important}
.js-reveal .was-in .u-eline{width:18px !important;transition:width .7s ease .35s}
/* mascote entra com um pulinho */
.js-reveal .u-mascot{translate:0 90px;scale:.9;opacity:0;transform-origin:50% 100%}
.js-reveal .u-mascot.m-in{translate:0 0;scale:1;opacity:1;transition:translate 1s cubic-bezier(.2,1.3,.3,1) .15s,scale 1s cubic-bezier(.2,1.3,.3,1) .15s,opacity .45s ease .15s}
/* toque e brilho nos botões */
.u-btn:active{transform:translateY(0) scale(.97)}
.u-card:active{transform:scale(.985)}
@keyframes uSheen{0%{left:-70%}24%{left:140%}100%{left:140%}}
.u-sheen{position:relative;overflow:hidden}
.u-sheen::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewX(-20deg);animation:uSheen 4.8s ease-in-out 2.6s infinite;pointer-events:none}
/* trama de pontos em movimento lento */
@keyframes uDots{to{background-position:240px 240px}}
.u-dots{animation:uDots 48s linear infinite}
/* formulário */
.u-input{width:100%;height:54px;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 16px;font-family:inherit;font-size:16px;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none}
.u-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(242,96,56,.16)}
.u-input::placeholder{color:var(--muted);opacity:.75}
select.u-input{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 24px,calc(100% - 16px) 24px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.u-check{width:22px;height:22px;accent-color:var(--accent);flex:0 0 auto;margin:0}
@media (max-width: 380px){.u-tag{font-size:14px !important;padding:9px 13px !important;gap:7px !important}}
/* cupom */
.u-coupon{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
@keyframes uNudge{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-1.6deg)}93%{transform:rotate(1.6deg)}97%{transform:rotate(-.8deg)}}
.u-coupon{animation:uNudge 6s ease-in-out 3s infinite}
/* fotos com leve paralaxe */
.u-photo img{scale:1.12}
/* respostas do FAQ abrem suave */
details[open]>p{animation:uRise .45s ease both}
summary{list-style:none;position:relative;padding-right:40px !important}
summary::after{content:"+";position:absolute;right:4px;top:50%;translate:0 -50%;font-size:26px;font-weight:400;color:var(--accent);transition:rotate .3s ease}
details[open]>summary::after{rotate:45deg}
@keyframes uRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes uFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes uPulse{0%,100%{opacity:.20;transform:scale(1)}50%{opacity:.30;transform:scale(1.06)}}
@keyframes uPhoneIn{0%{opacity:0;transform:translate3d(180px,90px,0) rotate(14deg) scale(.88)}55%{opacity:1;transform:translate3d(-12px,-8px,0) rotate(-2.2deg) scale(1.02)}78%{transform:translate3d(4px,3px,0) rotate(.7deg) scale(1)}100%{opacity:1;transform:none}}
@keyframes uShine{0%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes uPop{0%{opacity:0;transform:translateY(16px) scale(.82)}70%{opacity:1;transform:translateY(-4px) scale(1.04)}100%{opacity:1;transform:none}}
.u-phone-in{animation:uPhoneIn 1.4s cubic-bezier(.22,.8,.24,1) .3s both}
.u-shine{animation:uShine 1.15s ease-out 1.65s both}
.u-pop{animation:uPop .65s cubic-bezier(.2,.8,.2,1) both}
@media (max-width: 820px){.u-chip{scale:.84}.u-chip-a{left:-28px !important;top:112px !important;transform-origin:left center}.u-chip-b{right:-28px !important;bottom:142px !important;transform-origin:right center}.u-chip-c{left:-6px !important;top:-44px !important;transform-origin:left center}.u-chip-d{right:-6px !important;bottom:-34px !important;transform-origin:right center}}
.u-rise{animation:uRise .85s cubic-bezier(.2,.7,.2,1) both}
.u-float{animation:uFloat 7s ease-in-out infinite}
.u-glow{animation:uPulse 8s ease-in-out infinite}
.u-card{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease}
.u-card:hover{opacity:1;transform:translateY(-5px);border-color:#F3C7B6;box-shadow:0 2px 4px rgba(23,24,26,.04),0 26px 50px -22px rgba(242,96,56,.35)}
.u-btn{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.u-btn:hover{opacity:1;transform:translateY(-2px);filter:brightness(1.04)}
.u-arrow{transition:transform .22s ease;display:inline-block}
.u-card:hover .u-arrow{transform:translateX(5px)}
.js-reveal .u-reveal{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.js-reveal .u-reveal.is-in{opacity:1;transform:none}
@keyframes uHeroIn{0%{opacity:0;transform:translate3d(90px,40px,0) rotate(4deg) scale(.95)}60%{opacity:1;transform:translate3d(-6px,-3px,0) rotate(-.8deg) scale(1.01)}100%{opacity:1;transform:none}}
.u-hero-in{animation:uHeroIn 1.25s cubic-bezier(.22,.8,.24,1) .35s both}
.u-photo img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.u-photo:hover img{transform:scale(1.045)}
@media (max-width: 920px){.u-mascot{position:static !important;order:3;height:300px !important;width:auto;flex:0 0 auto;margin:4px auto calc(-1 * clamp(44px, 5.5vw, 88px)) auto}}
@media (prefers-reduced-motion: reduce){.u-rise,.u-float,.u-glow,.u-hero-in,.u-phone-in,.u-shine,.u-pop,.u-marquee-track,.u-dots,.u-sheen::after,.u-coupon{animation:none}.u-photo img{scale:1}.u-photo img{transition:none}.u-card,.u-btn,.u-arrow{transition:none}}

.g{display:grid}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.city-btn{font-family:inherit;font-size:16px;font-weight:500;padding:13px 20px;border-radius:10px;cursor:pointer;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
#cidade[data-kind="loja"] .city-btn{font-size:15px;padding:11px 16px}
.city-btn[aria-pressed="true"]{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
.city-btn:focus-visible,.u-btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bnav{display:none}
@media (max-width:820px){
  .bnav{position:fixed;z-index:55;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));width:max-content;max-width:calc(100vw - 24px);display:flex;gap:2px;padding:5px;border-radius:18px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border:1px solid var(--line);box-shadow:0 10px 30px -12px rgba(23,24,26,.28)}
  [data-theme="dark"] .bnav{background:rgba(30,32,36,.94);box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
  .bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:0 12px;border-radius:13px;text-decoration:none;color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:.01em;transition:background-color .2s ease,color .2s ease}
  .bnav a svg{width:21px;height:21px;display:block}
  .bnav a[aria-current="page"]{color:var(--accent);background:var(--tint)}
  .bnav a:active{transform:scale(.96)}
  #app,.app-root{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
.hdr-actions{order:3}
.site-nav{order:2}
@media (min-width:821px){header{justify-content:flex-start !important}.site-nav{margin-left:auto}.hdr-actions{margin-left:14px}}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink)}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .hdr-actions{order:2}
  .site-nav{order:3}
  .site-nav{display:none !important;width:100%;flex-direction:column;align-items:flex-start !important;gap:4px !important;padding:8px 0 12px}
  header.open .site-nav{display:flex !important}
  .site-nav .u-btn{margin-top:8px}
}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}
