:root{
  --y:#F4D548; --y2:#FFE36B; --k:#14100E; --cream:#FFF8E7; --lila:#B78BF2; --red:#E8553D;
  --pad:clamp(16px,4vw,64px); --r:28px;
  --bounce:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--y);color:var(--k);font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.45;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--k);color:var(--y)}
.hand{font-family:"Gochi Hand",cursive;font-weight:400}
h1,h2,h3{font-weight:800;letter-spacing:-.04em;line-height:.92}
h2{font-size:clamp(40px,6.4vw,104px)}
.y{color:var(--y)}
.dd{width:60px;height:60px;filter:url(#boil);overflow:visible}

/* cursor */
.cursor{position:fixed;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--k);border:3px solid var(--y);
  pointer-events:none;z-index:400;transition:width .25s var(--bounce),height .25s var(--bounce),margin .25s var(--bounce),background .2s}
.cursor.hov{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(20,16,14,.15);border-color:var(--k)}
.cursor.down{width:14px;height:14px;margin:-7px 0 0 -7px}
@media (hover:none){.cursor{display:none}}

/* capa del marcador */
.pen-layer{position:fixed;inset:0;width:100vw;height:100vh;z-index:300;pointer-events:none}
body.pen-on .pen-layer{pointer-events:auto;cursor:crosshair}

/* nav */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;width:min(1100px,calc(100% - 24px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 20px;border-radius:999px;background:var(--k);color:var(--cream);
  box-shadow:0 10px 30px rgba(20,16,14,.25)}
.nav-logo img{height:26px;width:auto}
.nav-links{display:flex;gap:24px;font-weight:600;font-size:15px}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;background:var(--y);transform:scaleX(0);transition:transform .35s var(--bounce)}
.nav-links a:hover::after{transform:none}
.nav-tools{display:flex;align-items:center;gap:6px}
.tool{padding:9px 12px;border-radius:999px;font-weight:600;font-size:14px;transition:background .2s}
.tool:hover{background:rgba(255,248,231,.12)}
.tool[aria-pressed="true"].pen-btn{background:var(--y);color:var(--k)}
.sound-btn[aria-pressed="false"]{opacity:.5}
.nav-cta{background:var(--y);color:var(--k);font-weight:800;padding:10px 18px;border-radius:999px}
.wiggle:hover{animation:wig .5s}
@keyframes wig{25%{transform:rotate(-6deg) scale(1.06)}50%{transform:rotate(5deg) scale(1.06)}75%{transform:rotate(-3deg)}}

/* botones */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--k);color:var(--y);font-weight:800;font-size:18px;padding:16px 26px;border-radius:999px;
  box-shadow:5px 5px 0 var(--cream);border:3px solid var(--k);transition:transform .2s var(--bounce),box-shadow .2s}
.btn:hover{transform:translate(-3px,-3px) rotate(-1.5deg);box-shadow:8px 8px 0 var(--cream)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--cream)}
.btn-line{background:transparent;color:var(--k);box-shadow:5px 5px 0 var(--k)}
.btn-line:hover{box-shadow:8px 8px 0 var(--k)}
.btn-k{box-shadow:5px 5px 0 var(--k);background:var(--cream);color:var(--k)}
.btn-k:hover{box-shadow:8px 8px 0 var(--k)}
.mini-btn{background:var(--k);color:var(--y);font-weight:800;padding:10px 16px;border-radius:999px;transition:transform .2s var(--bounce)}
.mini-btn:hover{transform:rotate(-3deg) scale(1.05)}

/* HERO */
.hero{position:sticky;top:0;height:100svh;min-height:640px;z-index:0}
.hero-play{position:relative;height:100%;overflow:hidden;padding:110px var(--pad) 40px;display:flex;flex-direction:column;justify-content:center}
.hero-title{font-size:clamp(64px,11.5vw,190px);text-transform:uppercase;position:relative;z-index:2;max-width:8ch;pointer-events:none}
.hero-title .ln{display:block;animation:popin .9s var(--bounce) both}
.hero-title .ln:nth-child(2){animation-delay:.12s}
.hero-title .ln:nth-child(3){animation-delay:.24s}
@keyframes popin{from{transform:translateY(60%) rotate(4deg);opacity:0}}
.viral{position:relative;display:inline-block!important;color:var(--cream);-webkit-text-stroke:4px var(--k);paint-order:stroke fill}
.scrib{position:absolute;left:-7%;top:-8%;width:114%;height:118%;overflow:visible;filter:url(#boil)}
.scrib use{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s .7s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-note{font-size:clamp(22px,2vw,30px);display:flex;align-items:center;gap:6px;margin:6px 0 0 6px;transform:rotate(-3deg);position:relative;z-index:2}
.hero-note .arr{width:56px;height:56px;transform:scaleX(-1) rotate(-20deg)}
.hero-sub{font-size:clamp(17px,1.4vw,20px);max-width:420px;margin:18px 0 26px;font-weight:600;position:relative;z-index:2}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;position:relative;z-index:3}
.hero-hint{position:absolute;left:var(--pad);bottom:22px;font-size:20px;opacity:.75;z-index:2}
.shake-btn{position:absolute;right:var(--pad);bottom:18px;z-index:6;font-size:22px;background:var(--cream);padding:6px 16px;border-radius:999px;border:3px solid var(--k);box-shadow:3px 3px 0 var(--k);transition:transform .2s var(--bounce)}
.shake-btn:hover{transform:rotate(-4deg) scale(1.06)}

/* personaje */
.mascot{position:absolute;right:20%;top:46%;width:clamp(150px,15vw,240px);z-index:5;touch-action:none;transform-origin:30% 100%}
.mascot svg{width:100%;overflow:visible;filter:drop-shadow(6px 8px 0 rgba(20,16,14,.25))}
.m-body{fill:var(--k);stroke:var(--k);stroke-width:4}
.m-dots circle{fill:var(--y)}
.m-dots circle{animation:typing 1.2s infinite}
.m-dots circle:nth-child(2){animation-delay:.15s}.m-dots circle:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}
.m-eye ellipse{transition:transform .12s}
.mascot.blink .m-eye ellipse{transform:scaleY(.1)}
.mascot.boing{animation:boing .7s var(--bounce)}
@keyframes boing{0%{transform:scale(1)}20%{transform:scale(1.15,.8)}45%{transform:scale(.88,1.2) translateY(-30px)}70%{transform:scale(1.05,.95)}100%{transform:none}}
.m-say{position:absolute;bottom:100%;left:40%;white-space:nowrap;background:var(--cream);border:3px solid var(--k);border-radius:18px 18px 18px 4px;padding:6px 14px;font-size:20px;
  box-shadow:3px 3px 0 var(--k);transform-origin:0 100%;animation:sayin .5s var(--bounce)}
@keyframes sayin{from{transform:scale(0) rotate(-10deg)}}

/* stickers */
.stk{position:absolute;left:0;top:0;z-index:4;touch-action:none;user-select:none;cursor:grab;will-change:transform}
.stk.grab{cursor:grabbing;z-index:7}
.stk.vid{width:clamp(110px,10vw,160px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:5px solid var(--cream);box-shadow:5px 6px 0 var(--k)}
.stk.vid.sm{width:clamp(90px,8vw,120px)}
.stk.vid video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.stk.txt{background:var(--cream);border:3px solid var(--k);border-radius:14px;padding:8px 16px;font-family:"Gochi Hand",cursive;font-size:26px;white-space:nowrap;box-shadow:4px 4px 0 var(--k)}
.stk.txt.dark{background:var(--k);color:var(--y)}
.stk.dd-s .dd{width:clamp(70px,6vw,100px);height:clamp(70px,6vw,100px);pointer-events:none}
.stk.dd-s.sm .dd{width:clamp(50px,4vw,64px);height:clamp(50px,4vw,64px)}

/* dibujos que salen al hacer clic */
.pop{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;pointer-events:none;z-index:250;animation:popfall 1.6s var(--ease) forwards}
@keyframes popfall{
  0%{transform:scale(0) rotate(0)}
  18%{transform:scale(1.25) rotate(calc(var(--rot) * .3))}
  30%{transform:scale(1) rotate(calc(var(--rot) * .4))}
  100%{transform:translate(var(--dx),160px) scale(.6) rotate(var(--rot));opacity:0}
}

/* hoja que sube sobre el hero */
.sheet{position:relative;z-index:2;background:var(--cream);border-radius:44px 44px 0 0;box-shadow:0 -20px 60px rgba(20,16,14,.18)}

/* frase */
.statement{position:relative;padding:150px var(--pad) 140px;max-width:1300px;margin:0 auto}
.st-text{font-size:clamp(34px,5vw,76px);font-weight:800;letter-spacing:-.035em;line-height:1.12}
.st-text .wd{opacity:.13;transition:opacity .25s}
.st-text .wd.on{opacity:1}
.chip{display:inline-block;vertical-align:middle;width:1.7em;height:1em;border-radius:999px;overflow:hidden;background:var(--k);margin:0 .08em;
  transform:scale(0) rotate(-12deg);transition:transform .5s var(--bounce);position:relative;top:-.06em}
.chip.on{transform:scale(1) rotate(-4deg)}
.chip img,.chip video{width:100%;height:100%;object-fit:cover}
.voicechip{display:inline-flex;align-items:center;justify-content:center;gap:.06em;background:var(--y)}
.voicechip i{width:.08em;height:.5em;border-radius:1em;background:var(--k);animation:vbar .9s ease-in-out infinite}
.voicechip i:nth-child(2){animation-delay:.1s}.voicechip i:nth-child(3){animation-delay:.2s}.voicechip i:nth-child(4){animation-delay:.3s}.voicechip i:nth-child(5){animation-delay:.4s}
@keyframes vbar{50%{transform:scaleY(.3)}}
.hl{font-style:normal;background:var(--y);padding:0 .15em;border-radius:.2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.st-d1{position:absolute;right:6%;top:70px;width:90px;height:90px;animation:spin 9s linear infinite}
.st-d2{position:absolute;left:3%;bottom:40px;width:90px;height:90px}
@keyframes spin{to{rotate:360deg}}

/* imagen que crece */
.expand{height:260vh;position:relative}
.ex-pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.ex-frame{position:relative;width:calc(var(--w,40) * 1vw);height:calc(var(--h,46) * 1vh);border-radius:calc(var(--br,40) * 1px);overflow:hidden;background:var(--k);will-change:width,height}
.ex-frame .set-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s,filter .5s,transform 1s var(--ease)}
.ex-frame .set-bg.fade{opacity:0;filter:blur(12px);transform:scale(1.08)}
.set-person{position:absolute;bottom:-3%;left:62%;transform:translateX(-50%);height:96%;width:auto;aspect-ratio:405/720;object-fit:contain;background:transparent;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.ex-copy{position:absolute;left:5%;top:50%;transform:translateY(-50%);color:var(--cream);opacity:var(--o,0);transition:opacity .3s;max-width:520px}
.ex-copy h2{font-size:clamp(40px,5.6vw,92px);text-shadow:0 6px 30px rgba(0,0,0,.45)}
.ex-kicker{font-size:30px;color:var(--y);display:block;transform:rotate(-4deg);margin-bottom:6px}
.sets{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.sets button{background:rgba(255,248,231,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(255,248,231,.4);color:var(--cream);font-weight:600;padding:10px 16px;border-radius:999px;transition:transform .25s var(--bounce),background .2s}
.sets button:hover{transform:translateY(-3px) rotate(-2deg)}
.sets button.on{background:var(--y);color:var(--k);border-color:var(--y)}
.ex-tag{position:absolute;right:6%;top:18%;font-size:28px;color:var(--y);opacity:var(--o,0);transform:rotate(6deg);text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* servicios */
.services{background:var(--k);color:var(--cream);display:grid;grid-template-columns:1fr 1.2fr;gap:5vw;padding:140px var(--pad);border-radius:44px}
.sv-side{position:sticky;top:120px;align-self:start}
.sv-side h2{font-size:clamp(44px,5.4vw,92px)}
.sv-side p{color:rgba(255,248,231,.65);font-size:19px;margin-top:20px;max-width:380px}
.sv-d{width:110px;height:110px;margin-top:40px;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{translate:0 -14px;rotate:8deg}}
.kicker{display:inline-block;font-size:30px;transform:rotate(-4deg);margin-bottom:10px}
.services .kicker{color:var(--y)}
.sv-cards{display:flex;flex-direction:column;gap:28px}
.sv-card{border-radius:var(--r);padding:30px;position:relative;transition:transform .4s var(--bounce)}
.sv-card:hover{transform:rotate(-1deg) scale(1.01)}
.sv-card.y{background:var(--y);color:var(--k)}
.sv-card.c{background:var(--cream);color:var(--k)}
.sv-card.k{background:#2A221E;color:var(--cream)}
.sv-card.l{background:var(--lila);color:var(--k)}
.sv-head{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.sv-head .n{font-family:"Gochi Hand",cursive;font-size:28px}
.sv-card h3{font-size:clamp(28px,2.6vw,42px)}
.sv-card p{font-size:17px;max-width:460px;margin-bottom:20px;opacity:.85}

.brand-input{width:100%;font:inherit;font-weight:800;font-size:22px;padding:14px 18px;border-radius:16px;border:3px solid var(--k);background:var(--cream);margin-bottom:16px;outline:none}
.brand-input:focus{box-shadow:4px 4px 0 var(--k)}
.brand-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.bt{aspect-ratio:16/9;border-radius:16px;display:grid;place-items:center;padding:10px;overflow:hidden;text-align:center;transition:background .4s,color .4s,transform .4s var(--bounce)}
.bt span{word-break:break-word;line-height:1}
.bt:hover{transform:rotate(-2deg) scale(1.03)}
.bt.t1{background:var(--k);color:var(--y);font-weight:800;font-size:clamp(20px,2vw,32px);letter-spacing:-.04em;text-transform:lowercase}
.bt.t2{background:var(--cream);color:var(--k);font-family:"Gochi Hand",cursive;font-size:clamp(24px,2.4vw,38px)}
.bt.t3{background:var(--lila);color:var(--k);font-weight:800;font-size:clamp(16px,1.6vw,26px);text-transform:uppercase;letter-spacing:.12em}
.bt.t4{background:var(--red);color:var(--cream);font-weight:800;font-size:clamp(20px,2vw,32px);font-style:italic;-webkit-text-stroke:1px var(--k)}

.stack{position:relative;height:340px;cursor:pointer}
.stack img{position:absolute;top:50%;left:50%;width:200px;aspect-ratio:3/4;object-fit:cover;border-radius:16px;border:5px solid #fff;box-shadow:4px 6px 0 var(--k);transition:transform .7s var(--bounce)}
.tap{position:absolute;right:26px;bottom:20px;font-size:22px}
.phone-wrap{position:relative;display:grid;place-items:center}
.phone-wrap video{height:420px;aspect-ratio:9/16;object-fit:cover;border-radius:24px;border:6px solid var(--k);box-shadow:6px 6px 0 var(--y);cursor:pointer}
.sv-card.y .phone-wrap video{box-shadow:6px 6px 0 var(--k)}
.snd{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--cream);color:var(--k);padding:4px 12px;border-radius:999px;font-size:18px;pointer-events:none;border:2px solid var(--k)}
.voice{position:relative;display:grid;place-items:center}
.orb{width:min(320px,90%);aspect-ratio:1;height:auto}
.play-voice{display:flex;align-items:center;gap:10px;background:var(--k);color:var(--cream);font-weight:800;padding:10px 18px 10px 10px;border-radius:999px;margin-top:6px;transition:transform .2s var(--bounce)}
.play-voice:hover{transform:scale(1.05) rotate(-2deg)}
.pv-i{width:30px;height:30px;border-radius:50%;background:var(--y);color:var(--k);display:grid;place-items:center;font-size:11px}

/* encabezados de sección */
.sec-head{padding:0 var(--pad);margin:0 auto 46px;max-width:1400px}
.mark{background:linear-gradient(transparent 55%,var(--y) 55%,var(--y) 92%,transparent 92%)}
.und{position:relative;display:inline-block}
.und svg{position:absolute;left:0;bottom:-.18em;width:100%;height:.3em;filter:url(#boil);overflow:visible}

/* plantillas */
.templates,.ba,.reels,.faq{padding:140px 0 0}
.filters{display:flex;flex-wrap:wrap;gap:10px;padding:0 var(--pad);max-width:1400px;margin:0 auto 26px}
.filters button{padding:10px 18px;border-radius:999px;border:3px solid var(--k);font-weight:600;transition:transform .25s var(--bounce),background .2s}
.filters button:hover{transform:rotate(-3deg)}
.filters button.on{background:var(--k);color:var(--y)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 var(--pad);max-width:1400px;margin:0 auto}
.card{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:var(--k);cursor:pointer;border:4px solid var(--k);transition:transform .4s var(--bounce),box-shadow .3s}
.card:nth-child(odd){rotate:-1deg}.card:nth-child(even){rotate:1.2deg}
.card:hover{transform:scale(1.04) rotate(-2deg);box-shadow:8px 8px 0 var(--y);z-index:2}
.card.hide{display:none}
.card.pop-in{animation:cardin .5s var(--bounce)}
@keyframes cardin{from{transform:scale(.6) rotate(8deg);opacity:0}}
.card video{width:100%;height:100%;object-fit:cover}
.card figcaption{position:absolute;left:10px;right:10px;bottom:10px;background:var(--cream);border:3px solid var(--k);border-radius:12px;padding:6px 12px;font-weight:800;font-size:16px}
.tag{position:absolute;top:10px;left:10px;font-style:normal;background:var(--y);border:2px solid var(--k);border-radius:999px;padding:3px 10px;font-weight:800;font-size:13px;rotate:-6deg}

/* antes después */
.ba-tabs{display:flex;justify-content:center;gap:12px;margin-bottom:22px}
.ba-tabs button{width:64px;height:64px;border-radius:50%;font-size:30px;border:3px solid var(--k);background:#fff;transition:transform .3s var(--bounce)}
.ba-tabs button:hover{transform:scale(1.12) rotate(-8deg)}
.ba-tabs button.on{background:var(--y);box-shadow:3px 3px 0 var(--k)}
.ba-frame{position:relative;width:min(900px,calc(100% - 32px));aspect-ratio:16/10;margin:0 auto;border-radius:30px;overflow:hidden;border:5px solid var(--k);box-shadow:10px 10px 0 var(--y);user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-frame .before{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.handle{position:absolute;top:0;bottom:0;left:var(--x);width:5px;background:var(--k);transform:translateX(-50%)}
.handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--y);border:4px solid var(--k);display:grid;place-items:center;font-size:24px;font-weight:800}
.lbl{position:absolute;top:14px;font-size:22px;padding:2px 14px;border-radius:999px;background:var(--cream);border:3px solid var(--k)}
.lbl.l{left:14px}.lbl.r{right:14px;background:var(--y)}

/* reels: carrusel */
.reels .y{background:var(--k);padding:0 .2em;border-radius:.15em}
.carousel{position:relative;height:620px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.car-track{position:relative;width:100%;height:100%}
.reel{position:absolute;left:50%;top:50%;width:300px;aspect-ratio:9/16;border-radius:26px;overflow:hidden;border:5px solid var(--k);background:var(--k);
  transition:transform .7s var(--bounce),filter .5s,opacity .5s;text-align:left}
.reel img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.reel b{position:absolute;left:10px;right:10px;bottom:10px;background:var(--cream);border:3px solid var(--k);border-radius:12px;padding:6px 10px;font-size:15px}
.reel.center{box-shadow:10px 10px 0 var(--y)}
.reel.center::after{content:"▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:var(--y);border:4px solid var(--k);display:grid;place-items:center;font-size:24px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.1)}}
.car-arrow{position:absolute;z-index:20;top:50%;transform:translateY(-50%);width:58px;height:58px;border-radius:50%;background:var(--k);color:var(--y);font-size:22px;font-weight:800;transition:transform .25s var(--bounce)}
.car-arrow:hover{transform:translateY(-50%) scale(1.12)}
.car-arrow.prev{left:var(--pad)}.car-arrow.next{right:var(--pad)}
.ig-link{display:block;text-align:center;font-size:24px;margin-top:10px}

/* faq */
.faq{max-width:1000px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.faq .sec-head{padding:0;margin-bottom:24px}
.faq details{border:3px solid var(--k);border-radius:22px;margin-bottom:12px;background:#fff;transition:background .3s,transform .3s var(--bounce)}
.faq details:hover{transform:rotate(-.5deg)}
.faq details[open]{background:var(--y)}
.faq summary{list-style:none;padding:20px 24px;font-size:clamp(19px,1.8vw,24px);font-weight:800;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--k);color:var(--y);display:grid;place-items:center;font-size:24px;transition:transform .4s var(--bounce)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding:0 24px 22px;font-size:17px}

/* cta */
.cta{margin-top:140px;background:var(--y);border-radius:44px 44px 0 0;padding:110px var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.cta h2{font-size:clamp(52px,7vw,120px);text-transform:uppercase;margin-bottom:30px}
.cta-left .hand{font-size:24px;margin-top:22px}
.pad{background:#fff;border:4px solid var(--k);border-radius:28px;box-shadow:10px 10px 0 var(--k);overflow:hidden;
  background-image:repeating-linear-gradient(#fff 0 34px,#E8E2D2 34px 35px)}
.pad-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:3px solid var(--k);background:var(--cream);font-size:20px}
.pad-tools{display:flex;gap:8px;align-items:center}
.sw{width:26px;height:26px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 2px var(--k)}
.sw.on{transform:scale(1.2)}
.pad-clear{font-size:20px;text-decoration:underline}
.pad-canvas{display:block;width:100%;height:340px;touch-action:none;cursor:crosshair}

.foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px var(--pad);background:var(--k);color:var(--cream);font-size:14px}
.foot img{height:24px;width:auto}

.lightbox{position:fixed;inset:0;z-index:350;background:rgba(244,213,72,.94);display:grid;place-items:center;padding:20px;animation:lbin .35s var(--ease)}
@keyframes lbin{from{opacity:0}}
.lightbox[hidden]{display:none}
.lightbox video{max-height:88vh;max-width:100%;aspect-ratio:9/16;border-radius:22px;border:5px solid var(--k);background:#000;box-shadow:10px 10px 0 var(--k);animation:cardin .5s var(--bounce)}
.lb-close{position:absolute;top:20px;right:20px;width:54px;height:54px;border-radius:50%;background:var(--k);color:var(--y);font-size:20px;font-weight:800}

/* aparecer */
.rv{opacity:0;transform:translateY(50px) rotate(2deg);transition:opacity .7s var(--ease),transform .9s var(--bounce)}
.rv.in{opacity:1;transform:none}

@media (max-width:980px){
  .nav-links{display:none}
  .tool span{display:none}
  .hero{position:relative;height:auto;min-height:0}
  .hero-play{padding-top:96px;padding-bottom:350px;justify-content:flex-start;height:auto;min-height:100svh}
  .sheet{margin-top:-40px}
  .hero-title{font-size:clamp(54px,16vw,110px)}
  .hero-sub{max-width:62%}
  .mascot{right:auto;left:38%;top:auto;bottom:9%;width:104px}
  .hero-hint{display:none}
  .stk.dd-s .dd{width:54px;height:54px}
  .stk.dd-s.sm .dd{width:40px;height:40px}
  .shake-btn{bottom:56px;font-size:18px}
  .mascot{bottom:70px!important}
  .stk.vid{width:84px;border-width:4px}
  .stk.vid.sm{width:70px}
  .stk.txt{font-size:18px;padding:5px 10px}
  .expand{height:200vh}
  .ex-copy{left:6%;right:6%;top:auto;bottom:6%;transform:none}
  .set-person{left:70%;height:80%}
  .services{grid-template-columns:1fr;padding:100px var(--pad);border-radius:32px}
  .sv-side{position:relative;top:0}
  .sv-card{padding:22px}
  .phone-wrap video{height:380px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card figcaption{font-size:13px;padding:4px 8px}
  .carousel{height:540px}
  .reel{width:250px}
  .car-arrow{width:46px;height:46px;top:auto;bottom:-10px;transform:none}
  .car-arrow:hover{transform:scale(1.1)}
  .cta{grid-template-columns:1fr;padding:80px var(--pad)}
  .templates,.ba,.reels,.faq{padding-top:100px}
  .statement{padding:110px var(--pad) 90px}
}
@media (max-width:560px){
  .hero-sub{max-width:100%;font-size:16px;margin:12px 0 18px}
  .btn{font-size:16px;padding:13px 20px}
  .hero-note{font-size:20px}
  .stack{height:300px}.stack img{width:160px}
  .brand-tiles{grid-template-columns:1fr 1fr}
  .ba-tabs button{width:54px;height:54px;font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}