/* Espuma & Focinho — modelo demonstrativo */
:root{
  --tangerine:#FF6B1A;
  --yellow:#FFC300;
  --pink:#FF3D6E;
  --choco:#2B1810;
  --cream:#FFFAF3;
  --line:3px solid var(--choco);
  --pop:cubic-bezier(.34,1.7,.5,1);
  --snap:cubic-bezier(.2,.9,.3,1.2);
  --title:'Fredoka', 'Baloo 2', system-ui, sans-serif;
  --text:'Nunito', system-ui, sans-serif;
  --mx:0; --my:0;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tangerine);color:var(--choco);font:500 1rem/1.5 var(--text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3{font-family:var(--title);margin:0;line-height:1;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
section{position:relative;scroll-margin-top:70px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto;position:relative;z-index:2}
main{overflow-x:clip;overflow-y:visible}
::selection{background:var(--pink);color:var(--cream)}

/* ---------- Botões ---------- */
.btn{
  --bg:var(--yellow);--fg:var(--choco);--sh:var(--choco);
  display:inline-flex;align-items:center;gap:.55em;
  padding:.85em 1.4em;border:var(--line);border-radius:999px;
  background:var(--bg);color:var(--fg);text-decoration:none;
  font:700 1.12rem/1 var(--title);letter-spacing:.01em;
  box-shadow:0 5px 0 var(--sh);
  transition:transform .28s var(--pop),box-shadow .28s var(--pop);
  will-change:transform;
}
.btn .ico{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round;transition:transform .35s var(--pop)}
.btn:hover{transform:translateY(-5px) rotate(-2deg);box-shadow:0 10px 0 var(--sh)}
.btn:hover .ico{transform:rotate(-14deg) scale(1.15)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sh);transition-duration:.08s}
.btn:focus-visible,.bar a:focus-visible,.link-down:focus-visible,.brand:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
.btn-pink{--bg:var(--pink);--fg:var(--cream)}
.btn-sm{font-size:1rem;padding:.6em 1em;box-shadow:0 3px 0 var(--sh)}
.btn-sm:hover{box-shadow:0 7px 0 var(--sh)}
.btn-lg{font-size:1.25rem;padding:.95em 1.6em}
.final .btn{--sh:var(--pink);border-color:var(--cream)}

/* ---------- Topo fixo ---------- */
.top{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:10px 16px 0;pointer-events:none;
}
.top>*{pointer-events:auto}
.brand{
  display:grid;place-items:center;
  width:78px;height:78px;border-radius:50%;
  background:var(--cream);border:var(--line);box-shadow:0 4px 0 var(--choco);
  transition:transform .3s var(--pop),width .3s var(--snap),height .3s var(--snap);
}
.brand img{width:80%;transform:translateY(2%)}
.brand:hover{transform:rotate(-8deg) scale(1.06)}
.top.scrolled .brand{width:62px;height:62px}
.bar{
  display:flex;align-items:center;gap:6px;
  background:var(--cream);border:var(--line);border-radius:999px;
  padding:6px 6px 6px 8px;box-shadow:0 4px 0 var(--choco);margin-top:8px;
}
.bar>a:not(.btn){display:none}
.hide-xs{display:none}

/* ---------- Bolhas ---------- */
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.bubbles.front{z-index:4;overflow:visible}
.b{
  position:absolute;bottom:-60px;width:var(--s);height:var(--s);
  animation:rise var(--d) linear var(--dl) infinite;will-change:transform;
}
.b i{
  display:block;width:100%;height:100%;border-radius:50%;
  background:
    radial-gradient(circle at 30% 27%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,0) 15%),
    radial-gradient(circle at 70% 76%,rgba(255,255,255,.55) 0 4%,rgba(255,255,255,0) 9%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.04) 0 55%,rgba(255,255,255,.28) 66%,rgba(255,236,246,.75) 71%,rgba(255,255,255,0) 72.5%);
  box-shadow:inset -3px -5px 9px rgba(255,61,110,.22),inset 3px 4px 8px rgba(255,255,255,.35);
  animation:sway var(--sd) ease-in-out infinite alternate;
}
.b.popping i{animation:pop .2s ease-out forwards}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--h,900px) - 140px))}}
@keyframes sway{from{transform:translateX(calc(-1 * var(--sw)))}to{transform:translateX(var(--sw))}}
@keyframes pop{0%{transform:scale(1);opacity:1}60%{transform:scale(1.35);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.drop{position:fixed;z-index:60;width:7px;height:7px;border-radius:50%;background:var(--cream);pointer-events:none;
  animation:drop .42s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes drop{to{transform:translate(var(--tx),var(--ty)) scale(.2);opacity:0}}

/* ---------- Profundidade + pulinho ---------- */
.depth{transform:translate3d(calc(var(--mx) * var(--dx,0px)),calc(var(--my) * var(--dx,0px) + var(--sy,0px)),0);will-change:transform}
.hop{opacity:0;transform:translateY(60px) scale(.9)}
.in .hop{animation:hop .65s var(--snap) forwards}
@keyframes hop{
  0%{opacity:0;transform:translateY(60px) scale(.9,.9)}
  45%{opacity:1;transform:translateY(-18px) scale(.97,1.04)}
  70%{transform:translateY(4px) scale(1.03,.97)}
  100%{opacity:1;transform:none}
}
/* palavras que sobem */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .04em .12em;margin:-.08em -.04em -.12em}
.split .w>*{display:inline-block;transform:translateY(115%) rotate(8deg);transition:transform .5s var(--pop);transition-delay:calc(var(--i) * 55ms)}
.in .split .w>*{transform:none}
.fade{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .5s var(--pop);transition-delay:.25s}
.in .fade{opacity:1;transform:none}

/* ---------- Etiquetas ---------- */
.tag{
  display:inline-block;font:700 .82rem/1 var(--title);letter-spacing:.08em;text-transform:uppercase;
  background:var(--cream);color:var(--choco);border:var(--line);border-radius:999px;padding:.5em .95em;
  transform:rotate(-3deg);box-shadow:0 3px 0 var(--choco)
}
.tag-dark{background:var(--choco);color:var(--yellow);box-shadow:0 3px 0 var(--cream)}

/* ---------- 1. Topo ---------- */
.hero{
  background:var(--tangerine);overflow:hidden;
  min-height:max(660px,100svh);
  display:flex;flex-direction:column;
  padding:118px 0 0;
}
.hero-text{position:relative;z-index:3;width:min(1180px,100% - 32px);margin-inline:auto}
.hero h1{
  font-size:clamp(2.7rem,11.6vw,6.4rem);font-weight:700;line-height:.98;color:var(--choco);
  margin:.35em 0 .3em;max-width:10.5ch;
}
.hl-pink,.hl-cream,.hl-yellow{display:inline-block}
.hl-pink>span,.hl-pink{position:relative}
.hero h1 .w:has(.hl-pink){overflow:visible}
.hl-pink{background:var(--pink);color:var(--cream);border:var(--line);border-radius:.3em;padding:0 .18em .06em;transform-origin:left;box-shadow:0 5px 0 var(--choco);rotate:-3deg}
.hl-cream{color:var(--cream);-webkit-text-stroke:3px var(--choco);paint-order:stroke fill;text-shadow:0 5px 0 var(--choco)}
.hero .lead{font:700 clamp(1.1rem,4.2vw,1.45rem)/1.3 var(--text);max-width:22ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.link-down{font:700 1.02rem var(--title);text-decoration:none;border-bottom:3px solid var(--choco);padding-bottom:1px;transition:transform .25s var(--pop)}
.link-down:hover{transform:translateY(-3px)}
.link-down span{display:inline-block;animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}

.hero-art{position:relative;z-index:2;margin-top:auto;width:122vw;margin-left:-11vw;padding-top:14px}
.hero-art .bubbles.front{inset:-10% 10% 0}
.sticker{position:absolute;right:16vw;top:-8px;width:96px;height:96px;z-index:5}
.sticker svg{width:100%;height:100%;animation:spin 9s linear infinite}
.sticker .st-bg{fill:var(--yellow);stroke:var(--choco);stroke-width:3}
.sticker text{font:700 12.6px var(--title);letter-spacing:.14em;fill:var(--choco)}
.st-core{position:absolute;inset:30%;display:grid;place-items:center;background:var(--pink);border:var(--line);border-radius:50%}
.st-core svg{width:62%;height:62%;animation:none;fill:none;stroke:var(--cream);stroke-width:2.4;stroke-linejoin:round}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Faixa ---------- */
.marquee{
  position:relative;z-index:6;background:var(--choco);color:var(--cream);
  overflow:hidden;padding:14px 0;border-block:3px solid var(--choco);
  rotate:-1.6deg;width:104%;margin:-18px -2% -10px;
}
.marquee-track{display:flex;align-items:center;gap:26px;width:max-content;animation:marq 20s linear infinite}
.marquee span{font:700 clamp(1.3rem,4.5vw,2rem)/1 var(--title);white-space:nowrap}
.marquee span:nth-of-type(3n+2){color:var(--yellow)}
.marquee span:nth-of-type(3n){color:var(--pink)}
.marquee i{width:16px;height:16px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 30%,#fff 0 18%,rgba(255,255,255,.2) 40%,rgba(255,255,255,.7) 70%,transparent 72%)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 2. Serviços ---------- */
.services{background:var(--yellow);padding:74px 0 72px}
.services h2,.how h2{font-size:clamp(2.3rem,9vw,4.2rem);font-weight:700;margin:.35em 0 .25em;max-width:12ch}
.note{font-weight:700;font-size:.95rem;max-width:34ch}
.sv-stage{position:relative;margin-top:26px;padding-top:150px}
.peek{position:absolute;right:-6px;top:0;width:190px;z-index:1}
.cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{
  --bg:var(--cream);--fg:var(--choco);
  position:relative;background:var(--bg);color:var(--fg);
  border:var(--line);border-radius:22px;padding:16px 14px 16px;
  box-shadow:0 6px 0 var(--choco);
  display:flex;flex-direction:column;gap:6px;
  transition:transform .32s var(--pop),box-shadow .32s var(--pop);
  rotate:var(--r,0deg);
}
.card:nth-child(odd){--r:-1.2deg}
.card:nth-child(even){--r:1.4deg}
.card:last-child{grid-column:1 / -1}
.card:hover{transform:translateY(-10px) scale(1.03);rotate:0deg;box-shadow:0 14px 0 var(--choco);z-index:3}
.card:hover .c-ico{animation:wiggle .5s var(--pop)}
@keyframes wiggle{30%{transform:rotate(-16deg) scale(1.15)}60%{transform:rotate(10deg) scale(1.1)}}
.c-tangerine{--bg:var(--tangerine)}
.c-pink{--bg:var(--pink)}
.c-choco{--bg:var(--choco);--fg:var(--cream)}
.c-yellow{--bg:var(--tangerine)}
.c-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--cream);border:var(--line);color:var(--choco)}
.c-cream .c-ico{background:var(--yellow)}
.c-choco .c-ico{background:var(--yellow)}
.c-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.45rem;font-weight:700;margin-top:4px}
.card p{font-size:.92rem;line-height:1.35;font-weight:700;flex:1}
.price{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.price b{display:block;font:700 1.55rem/1 var(--title);letter-spacing:0;text-transform:none}

/* recorte de espuma no topo das seções */
.services::before,.how::before,.final::before{
  content:"";position:absolute;left:0;right:0;top:-22px;height:24px;z-index:3;
  background:radial-gradient(circle at 22px 26px,var(--c) 21px,transparent 22px) repeat-x;background-size:44px 24px;
}
.services{--c:var(--yellow)}
.how{--c:var(--pink)}
.final{--c:var(--choco)}

/* ---------- 3. Como funciona ---------- */
.how{background:var(--pink);padding:70px 0 0}
.how-art{overflow:visible}
.how-grid{display:grid;gap:10px}
.how .tag-dark{color:var(--pink)}
.steps{display:grid;gap:12px;margin-top:22px;counter-reset:s}
.step{
  display:flex;gap:14px;align-items:center;background:var(--cream);border:var(--line);border-radius:20px;
  padding:12px 14px;box-shadow:0 5px 0 var(--choco);
  transition:transform .3s var(--pop),box-shadow .3s var(--pop);
}
.step:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 10px 0 var(--choco)}
.num{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);border:var(--line);font:700 1.6rem/1 var(--title)}
.step:nth-child(2) .num{background:var(--tangerine)}
.step:nth-child(3) .num{background:var(--pink);color:var(--cream)}
.step h3{font-size:1.2rem;font-weight:700}
.step p{font-size:.92rem;font-weight:700;margin-top:3px;opacity:.85}
.step{opacity:0;transform:translateX(-30px)}
.in .step{opacity:1;transform:none;transition:opacity .4s ease,transform .5s var(--pop),box-shadow .3s var(--pop)}
.in .step:nth-child(2){transition-delay:.1s}
.in .step:nth-child(3){transition-delay:.2s}
.in .step:hover{transition-delay:0s;transform:translateY(-6px) rotate(-1deg)}

.how-art{position:relative;width:min(440px,92%);margin:18px auto 0}
.how-art img{width:100%}
.door{
  position:absolute;left:-12%;right:-12%;bottom:0;height:34%;
  background:var(--yellow);border:var(--line);border-bottom:0;border-radius:30px 30px 0 0;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:max(24px,9%);
}
.door::before{content:"";position:absolute;left:-3px;right:-3px;top:-14px;height:18px;background:var(--choco);border-radius:10px}
.door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-conic-gradient(var(--choco) 0 25%,var(--cream) 0 50%) 0 0/14px 14px}
.door i{position:absolute;right:9%;top:22%;width:44px;height:10px;border-radius:6px;background:var(--choco)}
.door b{position:absolute;left:0;right:0;top:30%;height:12px;background:var(--pink);border-block:3px solid var(--choco)}
.door span{position:relative;font:700 clamp(1.3rem,5vw,1.9rem)/1 var(--title);letter-spacing:.06em;color:var(--choco)}
.wind{position:absolute;inset:10% -30% 30% -10%;pointer-events:none;z-index:0}
.wind i{position:absolute;height:6px;border-radius:6px;background:var(--cream);opacity:.85;left:0;width:34%;animation:wind 1.1s linear infinite}
.wind i:nth-child(1){top:12%;animation-delay:-.2s}
.wind i:nth-child(2){top:32%;width:22%;animation-delay:-.6s}
.wind i:nth-child(3){top:52%;width:28%;animation-delay:-.9s}
.wind i:nth-child(4){top:70%;width:18%;animation-delay:-.4s}
@keyframes wind{from{transform:translateX(120%);opacity:0}20%{opacity:.9}to{transform:translateX(-80%);opacity:0}}
.how-art .bubbles.front{inset:-5% 0 20%}

/* ---------- 4. Por que confiar ---------- */
.trust{background:var(--tangerine);padding:36px 0;border-block:3px solid var(--choco);position:relative;z-index:4}
.trust-row{display:grid;gap:16px}
.trust-title{font-size:clamp(1.8rem,7vw,2.4rem);font-weight:700;color:var(--cream);-webkit-text-stroke:2.5px var(--choco);paint-order:stroke fill;text-shadow:0 4px 0 var(--choco)}
.br-lg{display:none}
.trust-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.trust-list li{
  display:flex;align-items:center;gap:10px;font:600 .98rem/1.15 var(--title);min-width:0;
  background:var(--cream);border:var(--line);border-radius:18px;padding:10px 12px;box-shadow:0 4px 0 var(--choco);
  transition:transform .3s var(--pop);
}
.trust-list li:hover{transform:translateY(-6px) rotate(-2deg)}
.t-ico{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);border:var(--line)}
.trust-list li:nth-child(2) .t-ico{background:var(--pink)}
.trust-list li:nth-child(3) .t-ico{background:var(--tangerine)}
.trust-list li:nth-child(4) .t-ico{background:var(--yellow)}
.t-ico svg{width:21px;height:21px;fill:none;stroke:var(--choco);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.trust-list li{opacity:0;transform:translateY(20px) scale(.95)}
.in .trust-list li{opacity:1;transform:none;transition:opacity .35s ease calc(var(--i,0) * 70ms),transform .45s var(--pop) calc(var(--i,0) * 70ms)}
.in .trust-list li:hover{transform:translateY(-6px) rotate(-2deg);transition-delay:0s}

/* ---------- 5. Chamada final ---------- */
.final{background:var(--choco);color:var(--cream);padding:74px 0 0}
.final-grid{display:grid;gap:8px}
.final h2{font-size:clamp(2.8rem,12vw,5.6rem);font-weight:700;line-height:.95;max-width:9ch;color:var(--cream)}
.final .w:has(.hl-yellow){overflow:visible}
.hl-yellow{color:var(--yellow);text-shadow:0 6px 0 var(--pink)}
.final .lead{font-weight:700;font-size:1.12rem;margin:16px 0 22px;max-width:30ch;opacity:.92}
.info{margin-top:26px;display:grid;gap:10px}
.info li{display:flex;align-items:flex-start;gap:10px;font-weight:700;font-size:.98rem}
.info svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--yellow);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.info b{color:var(--yellow)}
.final-art{position:relative;width:min(300px,70%);margin:24px auto 0}
.final-art .bubbles.front{inset:-8% -25% 0}
.float{animation:float 2.6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(1.5deg)}}

.foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:22px 0 26px;margin-top:36px;border-top:2px solid rgba(255,250,243,.14);font-size:.82rem}
.foot img{width:54px}
.foot p{opacity:.6}
.credit{margin-left:auto;font-size:.76rem}

/* ---------- Entrada ---------- */
.intro,.intro-logo{display:none}
.intro-on .intro-logo{display:block}
.intro-on .intro{
  display:block;position:fixed;inset:0;z-index:100;background:var(--yellow);
  transition:transform .45s cubic-bezier(.7,0,.3,1);
}
.intro-bubbles{position:absolute;inset:0;overflow:hidden}
.intro-bubbles .b{animation:introRise var(--d) cubic-bezier(.3,.6,.4,1) var(--dl) both}
@keyframes introRise{from{transform:translateY(0)}to{transform:translateY(calc(-100vh - 120px))}}
.intro-orb{
  position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;
  animation:orbIn .5s cubic-bezier(.2,.9,.3,1.15) both;
}
.intro-ring{display:block;width:100%;height:100%;border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,0) 13%),
    radial-gradient(circle,rgba(255,255,255,.22) 0 60%,rgba(255,255,255,.5) 68%,rgba(255,61,110,.35) 71%,rgba(255,255,255,.95) 73%,rgba(255,255,255,0) 74.5%);
  box-shadow:inset -8px -12px 22px rgba(255,107,26,.35)}
.intro-logo{position:fixed;left:50%;top:50%;width:132px;margin:-59px 0 0 -66px;z-index:102;opacity:0;transform:scale(.6);
  animation:logoIn .45s .08s cubic-bezier(.2,.9,.3,1.15) forwards;transform-origin:center}
@keyframes orbIn{from{transform:translateY(38vh) scale(.35)}to{transform:none}}
@keyframes logoIn{from{opacity:0;transform:translateY(38vh) scale(.3)}to{opacity:1;transform:scale(.82)}}
.intro.popped .intro-ring{animation:ringPop .2s ease-out forwards}
@keyframes ringPop{to{transform:scale(1.45);opacity:0}}
.intro-foam{position:absolute;left:0;right:0;bottom:-30px;height:32px;
  background:radial-gradient(circle at 26px 0,var(--yellow) 25px,transparent 26px) repeat-x;background-size:52px 32px}
.intro.lift{transform:translateY(calc(-100% - 40px))}
.intro-on .brand img{opacity:0}
.intro-done .brand img{opacity:1}
.intro-on .top .bar{transform:translateY(-120%);transition:transform .45s var(--pop)}
.intro-done .top .bar{transform:none}

/* ---------- Telas maiores ---------- */
@media (min-width:480px){
  .hide-xs{display:inline}
}
@media (min-width:600px){
  .trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:760px){
  .top{padding:16px 28px 0}
  .brand{width:96px;height:96px}
  .top.scrolled .brand{width:72px;height:72px}
  .bar{gap:4px;padding:6px 6px 6px 18px;margin-top:10px}
  .bar>a:not(.btn){display:inline-block;font:600 1rem/1 var(--title);text-decoration:none;padding:.55em .8em;border-radius:999px;transition:background .2s,transform .25s var(--pop)}
  .bar>a:not(.btn):hover{background:var(--yellow);transform:translateY(-3px) rotate(-3deg)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .card:last-child{grid-column:auto}
  .card:nth-child(4){grid-column:1 / span 1}
  .peek{width:230px}
  .sv-stage{padding-top:170px}
  .trust-list{grid-template-columns:repeat(4,1fr)}
  .foot img{width:64px}
}
@media (min-width:1000px){
  .hero{min-height:max(640px,min(100svh,900px));padding:0;display:block}
  .hero-text{position:absolute;left:max(28px,calc(50% - 590px));top:50%;transform:translateY(-42%);width:min(560px,44vw);margin:0}
  .hero h1{font-size:clamp(4rem,6.1vw,6.4rem)}
  .hero-art{position:absolute;right:-2vw;bottom:0;width:min(62vw,940px);margin:0;padding:0}
  .sticker{right:auto;left:6%;top:4%;width:122px;height:122px}

  .services{padding:84px 0 80px}
  .sv-head{max-width:640px}
  .sv-stage{padding-top:0;margin-top:30px}
  .cards{grid-template-columns:repeat(5,1fr);gap:16px;padding-right:0}
  .card{padding:18px 16px 18px;min-height:250px}
  .card:nth-child(4){grid-column:auto}
  .peek{width:280px;top:-262px;right:10px}

  .how{padding:80px 0 0}
  .how-grid{grid-template-columns:1.05fr 1fr;align-items:end;gap:40px}
  .how-text{padding-bottom:72px}
  .how-art{width:100%;max-width:470px;margin:0 0 0 auto}

  .trust{padding:30px 0}
  .trust-row{grid-template-columns:auto 1fr;align-items:center;gap:36px}
  .br-lg{display:inline}
  .trust-list li{font-size:1.05rem;padding:12px 14px}

  .final{padding:86px 0 0}
  .final-grid{grid-template-columns:1.25fr 1fr;align-items:center}
  .final-art{width:min(340px,100%);margin:0 auto}
  .foot{margin-top:40px}
}
@media (min-width:1300px){
  .peek{right:40px}
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .hop,.fade,.step,.trust-list li{opacity:1!important;transform:none!important}
  .split .w>*{transform:none!important}
  .bubbles{display:none}
}
/* sem JS: tudo visível */
html:not(.js) .hop,html:not(.js) .fade,html:not(.js) .step,html:not(.js) .trust-list li{opacity:1;transform:none}