:root {
  --red:#E8381A;--rd:#C42E12;
  --blk:#0A0A0A;--blk2:#111;
  --cream:#F5F0E8;--cream2:#EDE8DF;
  --wht:#fff;--g2:#1A1A1A;--g3:#2A2A2A;--mut:#666;
  --fd:'Barlow Condensed',sans-serif;--fb:'Barlow',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--blk);color:var(--wht);font-family:var(--fb);overflow-x:hidden;cursor:none}

/* CURSOR */
#cursor{width:40px;height:40px;border:1px solid rgba(232,56,26,.6);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transition:width .2s,height .2s,background .2s,border-color .2s;transform:translate(-50%,-50%)}
#cursor-dot{width:5px;height:5px;background:var(--red);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%)}
body.cursor-expanded #cursor{width:70px;height:70px;background:rgba(232,56,26,.08);border-color:var(--red)}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:20px 6vw;transition:background .3s,padding .3s}
#nav.scrolled{background:rgba(10,10,10,.95);backdrop-filter:blur(12px);padding:14px 6vw;border-bottom:1px solid var(--g3)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--fd);font-weight:900;font-size:22px;letter-spacing:1px;text-transform:uppercase;color:var(--cream);text-decoration:none}
.nav-logo span{color:var(--red)}
.nav-links{display:flex;gap:32px}
.nav-links a{color:var(--mut);font-size:14px;font-weight:500;text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--wht)}
.nav-cta{background:var(--red);color:var(--wht);font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:10px 24px;text-decoration:none;transition:background .2s}
.nav-cta:hover{background:var(--rd)}
.nav-burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--wht)}
.nav-mobile{display:none;flex-direction:column;padding:12px 6vw 20px;background:rgba(10,10,10,.98)}
.nav-mobile a{color:var(--cream);font-size:18px;font-weight:500;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--g3)}
.nav-mobile.open{display:flex}
.nav-cta-mobile{background:var(--red)!important;color:var(--wht)!important;text-align:center;padding:14px!important;margin-top:12px;border:none!important;font-family:var(--fd);font-weight:700;letter-spacing:1px;text-transform:uppercase}

/* BUTTONS */
.btn-red{background:var(--red);color:var(--wht);border:none;font-family:var(--fd);font-weight:700;font-size:18px;letter-spacing:1px;text-transform:uppercase;padding:18px 36px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:background .2s,transform .15s}
.btn-red:hover{background:var(--rd);transform:translateY(-2px)}
.btn-red span{transition:transform .2s}
.btn-red:hover span{transform:translateX(4px)}
.btn-ghost{background:none;border:1px solid var(--g3);color:var(--mut);font-family:var(--fd);font-weight:700;font-size:16px;letter-spacing:1px;text-transform:uppercase;padding:18px 36px;text-decoration:none;display:inline-flex;align-items:center;transition:all .2s}
.btn-ghost:hover{border-color:var(--wht);color:var(--wht)}
.btn-xl{font-size:20px;padding:22px 44px}

/* LAYOUT */
.container{max-width:1200px;margin:0 auto;padding:0 6vw}
.container-wide{max-width:1400px;margin:0 auto;padding:0 4vw}
section{padding:100px 0}
.section-tag{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.section-tag::before{content:'';display:block;width:28px;height:2px;background:var(--red)}
.section-title{font-family:var(--fd);font-weight:900;font-size:clamp(44px,6vw,80px);line-height:.95;letter-spacing:-1px;text-transform:uppercase;color:var(--cream);margin-bottom:60px}
.section-title em{color:var(--red);font-style:normal}
.section-sub{font-size:16px;color:#ccc;line-height:1.6;margin-bottom:60px;max-width:520px;margin-top:-40px}

/* HERO */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:0;position:relative;overflow:hidden}
.hero-parallax-bg{position:absolute;inset:-20%;background:radial-gradient(ellipse at 60% 40%,rgba(232,56,26,.08) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(232,56,26,.04) 0%,transparent 50%);pointer-events:none;will-change:transform}
.hero-noise{position:absolute;inset:0;opacity:.4;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E")}
.hero-content{padding:160px 6vw 80px;max-width:960px;position:relative;z-index:1}
.hero-tag{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.hero-tag::before{content:'';display:block;width:28px;height:2px;background:var(--red)}
.hero-h1{font-family:var(--fd);font-weight:900;font-size:clamp(80px,13vw,170px);line-height:.88;letter-spacing:-2px;text-transform:uppercase;color:var(--cream);margin-bottom:28px;display:flex;flex-direction:column;will-change:transform}
.red-line{color:var(--red)}
.line-wrap{overflow:hidden;display:block}
.hero-sub{font-size:18px;color:#ddd;line-height:1.5;margin-bottom:40px;max-width:440px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-marquee{background:var(--red);overflow:hidden;padding:14px 0;position:relative;z-index:1}
.marquee-track{display:flex;white-space:nowrap;animation:marquee 20s linear infinite;font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--wht)}
.marquee-track span{padding:0 20px}
.marquee-track .sep{color:rgba(255,255,255,.5);padding:0 4px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scroll-indicator{position:absolute;right:6vw;bottom:100px;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--fd);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mut);z-index:1}
.scroll-line{width:1px;height:48px;background:var(--g3);position:relative;overflow:hidden}
.scroll-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--red);animation:scrollAnim 2s ease-in-out infinite}
@keyframes scrollAnim{0%{top:-100%}100%{top:100%}}

/* MERCADO */
#mercado{background:var(--g2)}
.mercado-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.big-statement{font-family:var(--fd);font-weight:900;font-size:clamp(48px,6vw,80px);line-height:.92;text-transform:uppercase;color:var(--cream);display:flex;flex-direction:column;gap:2px}
.big-statement em{color:var(--red);font-style:normal}
.mercado-text{font-size:17px;color:#ccc;line-height:1.6;margin-bottom:48px}
.stat-row{display:flex;flex-direction:column;gap:28px}
.stat-item{border-left:3px solid var(--red);padding-left:20px}
.stat-num{font-family:var(--fd);font-weight:900;font-size:52px;color:var(--red);line-height:1}
.stat-num::after{content:'M+';font-size:24px}
.stat-item:nth-child(2) .stat-num::after{content:'%'}
.stat-item:nth-child(3) .stat-num::after{content:'x'}
.stat-label{font-size:14px;color:#ccc;margin-top:4px;line-height:1.4}

/* VS */
#vs{background:var(--blk)}
.vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:center}
.vs-card{border:1px solid var(--g3);padding:40px}
.vs-card-header{margin-bottom:28px}
.vs-label{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;padding:6px 14px}
.vs-label.bad{background:rgba(255,100,100,.1);color:#ff6b6b;border:1px solid rgba(255,100,100,.2)}
.vs-label.good{background:rgba(232,56,26,.1);color:var(--red);border:1px solid rgba(232,56,26,.3)}
.vs-list{list-style:none;display:flex;flex-direction:column;gap:16px}
.vs-list li{display:flex;align-items:center;gap:14px;font-size:15px}
.bad-item{color:#ccc}
.good-item{color:var(--cream)}
.vs-icon{font-size:18px;flex-shrink:0}
.vs-divider{font-family:var(--fd);font-weight:900;font-size:48px;color:var(--red);text-align:center;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ── STICKY STEPS (Cómo funciona) ── */
#como-funciona{padding:0;background:var(--blk)}
.sticky-steps-wrap{display:grid;grid-template-columns:380px 1fr;min-height:400vh;position:relative}
.sticky-steps-left{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:60px 48px;border-right:1px solid var(--g3);z-index:10}
.sticky-steps-header .section-tag{margin-bottom:12px}
.sticky-steps-progress{margin-top:48px}
.ssp-line{width:2px;height:200px;background:var(--g3);position:relative;overflow:hidden}
.ssp-fill{position:absolute;top:0;left:0;width:100%;background:var(--red);height:0%;transition:height .1s linear}

.sticky-steps-right{padding:120px 60px 120px 80px}
.sstep{min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:60px 0;border-bottom:1px solid var(--g3);opacity:.25;transform:translateY(20px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.sstep:last-child{border-bottom:none}
.sstep.active{opacity:1;transform:translateY(0)}
.sstep-num{font-family:var(--fd);font-weight:900;font-size:100px;color:rgba(232,56,26,.1);line-height:1;margin-bottom:-20px;transition:color .4s}
.sstep.active .sstep-num{color:rgba(232,56,26,.2)}
.sstep-icon{font-size:52px;margin-bottom:20px;display:block;transition:transform .3s}
.sstep.active .sstep-icon{animation:iconPop .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes iconPop{0%{transform:scale(.6) rotate(-10deg)}100%{transform:scale(1) rotate(0deg)}}
.sstep h3{font-family:var(--fd);font-weight:900;font-size:clamp(36px,4vw,56px);text-transform:uppercase;color:var(--cream);margin-bottom:20px;line-height:.95}
.sstep h3 em{color:var(--red);font-style:normal}
.sstep p{font-size:16px;color:#ccc;line-height:1.7;max-width:560px;margin-bottom:24px}
.sstep-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.sstep-tags span{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);border:1px solid rgba(232,56,26,.3);padding:5px 14px}
.sstep-cta{margin-top:8px}

/* ── STACKING SERVICE CARDS ── */
#servicios{padding:100px 0 0;background:var(--blk)}
#servicios .container{padding-bottom:60px}
/* Isolated stacking context so cards don't bleed into other sections */
.stack-cards-wrap{position:relative;isolation:isolate}
.stack-card{
  position:sticky;
  background:var(--blk);
  border-top:1px solid var(--g3);
  /* No min-height:100vh — height is driven by content only */
  padding:80px 6vw;
  transition:box-shadow .3s;
}
.stack-card:nth-child(1){top:60px;z-index:10}
.stack-card:nth-child(2){top:80px;z-index:20;box-shadow:0 -8px 40px rgba(0,0,0,.6)}
.stack-card:nth-child(3){top:100px;z-index:30;box-shadow:0 -8px 40px rgba(0,0,0,.7)}
.stack-card:nth-child(4){top:120px;z-index:40;box-shadow:0 -8px 40px rgba(0,0,0,.75)}
.stack-card:nth-child(5){top:140px;z-index:50;box-shadow:0 -8px 40px rgba(0,0,0,.8)}
.stack-card:nth-child(6){top:160px;z-index:60;box-shadow:0 -8px 40px rgba(0,0,0,.85)}
.sc-inner{display:grid;grid-template-columns:200px 1fr;gap:60px;align-items:center;max-width:1000px;margin:0 auto;width:100%}
.sc-left{display:flex;flex-direction:column;align-items:center;gap:16px}
.sc-num{font-family:var(--fd);font-weight:900;font-size:96px;color:var(--g3);line-height:1;letter-spacing:-2px}
.sc-icon-wrap{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border:1px solid var(--g3);background:var(--g2)}
.sc-icon{font-size:36px;display:block}

/* Icon animations */
@keyframes iconSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes iconSwing{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(5deg)}}
@keyframes iconGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(232,56,26,0))}50%{filter:drop-shadow(0 0 12px rgba(232,56,26,.8))}}

.sc-icon.playing[data-anim="spin"]{animation:iconSpin 1.5s linear infinite}
.sc-icon.playing[data-anim="bounce"]{animation:iconBounce 0.8s ease-in-out infinite}
.sc-icon.playing[data-anim="pulse"]{animation:iconPulse 0.7s ease-in-out infinite}
.sc-icon.playing[data-anim="swing"]{animation:iconSwing 0.6s ease-in-out infinite}
.sc-icon.playing[data-anim="float"]{animation:iconFloat 2s ease-in-out infinite}
.sc-icon.playing[data-anim="glow"]{animation:iconGlow 1.2s ease-in-out infinite}

.sc-right{padding:60px 0}
.sc-tag{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sc-tag::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
.sc-title{font-family:var(--fd);font-weight:900;font-size:clamp(40px,5vw,68px);text-transform:uppercase;color:var(--cream);line-height:.95;margin-bottom:24px;letter-spacing:-.5px}
.sc-title em{color:var(--red);font-style:normal}
.sc-desc{font-size:15px;color:#ccc;line-height:1.7;max-width:520px;margin-bottom:24px}
.sc-price{font-family:var(--fd);font-weight:700;font-size:18px;letter-spacing:1px;text-transform:uppercase;color:var(--cream);border:1px solid var(--g3);padding:8px 20px;display:inline-block}

/* ── STICKY EJEMPLOS ── */
#ejemplos{background:var(--blk);padding:100px 0 0;position:relative;z-index:1}
.ejemplos-header{padding:0 4vw 80px;max-width:800px}
.sticky-case{display:grid;grid-template-columns:360px 1fr;min-height:250vh;position:relative}
.sticky-case--alt{background:var(--g2)}
.sticky-left{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:40px;z-index:10}
.sticky-origin-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:280px}
.origin-label{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--mut)}
.origin-img-wrap{position:relative;width:220px;height:220px;overflow:hidden;border:1px solid var(--g3);transition:border-color .3s}
.origin-img-wrap:hover{border-color:var(--red)}
.origin-img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.origin-img-wrap:hover .origin-img{transform:scale(1.05)}
.origin-overlay{position:absolute;inset:0;background:rgba(232,56,26,.85);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.origin-img-wrap:hover .origin-overlay{opacity:1}
.origin-overlay span{font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--wht)}
.origin-product-name{font-family:var(--fd);font-weight:900;font-size:22px;text-transform:uppercase;color:var(--cream);text-align:center}
.origin-arrow-down{display:flex;flex-direction:column;align-items:center;gap:8px}
.origin-arrow-down svg{width:20px;height:32px;animation:bounceDown 1.5s ease-in-out infinite}
@keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.origin-arrow-down span{font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red)}
.sticky-right{padding:60px 40px 100px}
.sticky-right-inner{display:flex;flex-direction:column;gap:48px}
.content-reveal-block{opacity:0;transform:translateY(50px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);max-width:700px}
.content-reveal-block.in-view{opacity:1;transform:translateY(0)}
.content-reveal-block--wide{max-width:100%}
.crb-media{overflow:hidden;border:1px solid var(--g3);transition:border-color .3s}
.crb-media:hover{border-color:rgba(232,56,26,.4)}
.crb-media img{width:100%;height:auto;display:block;max-height:480px;object-fit:cover;transition:transform .6s ease}
.crb-media:hover img{transform:scale(1.03)}
.crb-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.crb-video-item{position:relative;overflow:hidden;border:1px solid var(--g3);aspect-ratio:9/16;background:var(--g2);cursor:pointer;transition:border-color .3s}
.crb-video-item:hover{border-color:var(--red)}
.crb-video-item video{width:100%;height:100%;object-fit:cover;display:block}


/* crb-label: solo línea roja, sin texto */
.crb-label{font-size:0;color:transparent;margin-bottom:12px;display:flex;align-items:center}
.crb-label::before{content:'';display:block;width:40px;height:2px;background:var(--red)}

/* video hint: solo icono */
.video-play-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.25);transition:opacity .3s}
.video-play-hint svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));transition:transform .2s}
.crb-video-item:hover .video-play-hint{opacity:0}
.crb-video-item:hover .video-play-hint svg{transform:scale(1.1)}

/* PRICING */
#precios{background:var(--g2);position:relative;z-index:1}
.billing-toggle{display:flex;gap:4px;margin-bottom:48px;flex-wrap:wrap}
.btog-btn{background:none;border:1px solid var(--g3);color:var(--mut);font-family:var(--fd);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;padding:10px 20px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px}
.btog-btn:hover,.btog-btn.active{background:var(--red);border-color:var(--red);color:var(--wht)}
.disc-tag{background:rgba(255,255,255,.2);font-size:11px;padding:2px 6px}
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:32px}
.plan-card{background:transparent;border:1px solid var(--g3);padding:32px 24px;position:relative;transition:all .2s}
.plan-card:hover{border-color:rgba(232,56,26,.5);transform:translateY(-4px)}
.plan-card.featured{border-color:rgba(232,56,26,.4);background:rgba(232,56,26,.04)}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--red);color:var(--wht);font-family:var(--fd);font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 14px;white-space:nowrap}
.plan-name{font-family:var(--fd);font-weight:900;font-size:22px;text-transform:uppercase;color:var(--cream);margin-bottom:8px}
.plan-price{margin-bottom:24px}
.plan-amount{font-family:var(--fd);font-weight:900;font-size:36px;color:var(--red);display:block;transition:all .3s}
.plan-period{font-size:12px;color:var(--mut)}
.plan-feats{list-style:none;font-size:13px;line-height:2;margin-bottom:28px;color:#ccc}
.plan-btn{display:block;text-align:center;text-decoration:none;border:1px solid var(--g3);color:var(--mut);font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:1px;text-transform:uppercase;padding:13px;transition:all .15s}
.plan-btn:hover{border-color:var(--red);color:var(--red)}
.plan-btn-red{background:var(--red);border-color:var(--red);color:var(--wht)!important}
.plan-btn-red:hover{background:var(--rd)}
.addons-row{display:flex;gap:12px;flex-wrap:wrap}
.addon-pill{border:1px solid var(--g3);padding:12px 20px;font-size:14px;color:var(--mut);transition:all .15s;display:flex;gap:12px;align-items:center}
.addon-pill:hover{border-color:var(--red);color:var(--cream)}
.addon-pill span{color:var(--red);font-weight:600}

/* BRIEF */
#brief{background:var(--blk);padding:100px 0 0;position:relative;z-index:1}
.brief-iframe-wrap{
  width:100%;margin-top:20px;
  /* Reset cursor so the iframe doesn't inherit cursor:none */
  cursor:auto;
}
#brief-iframe{
  width:100%;height:900px;border:none;display:block;
  background:var(--blk);
  cursor:auto;
}

/* CTA */
#cta-final{background:var(--red);position:relative;z-index:1;overflow:hidden;padding:120px 0;text-align:center}
.cta-bg-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--fd);font-weight:900;font-size:clamp(120px,22vw,320px);color:rgba(0,0,0,.08);letter-spacing:-6px;user-select:none;pointer-events:none;white-space:nowrap}
.cta-content{position:relative;z-index:1}
.cta-tag{font-family:var(--fd);font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:12px}
.cta-tag::before,.cta-tag::after{content:'';display:block;width:28px;height:2px;background:rgba(255,255,255,.4)}
.cta-title{font-family:var(--fd);font-weight:900;font-size:clamp(48px,8vw,96px);line-height:.92;letter-spacing:-1px;text-transform:uppercase;color:var(--wht);margin-bottom:20px}
.cta-title em{color:var(--blk);font-style:normal}
#cta-final p{font-size:18px;color:rgba(255,255,255,.75);margin-bottom:44px}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
#cta-final .btn-red{background:var(--blk);color:var(--wht)}
#cta-final .btn-red:hover{background:var(--g2)}
#cta-final .btn-ghost{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}
#cta-final .btn-ghost:hover{border-color:var(--wht);color:var(--wht)}

/* FOOTER *//* GIF SHOWCASE STICKY */
#gif-showcase {
  background: var(--blk);
  padding: 0;
  position: relative;
  z-index: 1;
}
.gif-sticky-outer {
  height: 350vh;
  position: relative;
}
.gif-sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 3vw;
  background: var(--blk);
  overflow: hidden;
}
/* Base: hidden, slid off-screen */
.gif-item {
  flex: 1;
  max-width: 300px;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.75s cubic-bezier(.4,0,.2,1), transform 0.75s cubic-bezier(.4,0,.2,1);
}
/* Left slides in from left */
.gif-item--left {
  transform: translateX(-120px);
}
/* Right slides in from right */
.gif-item--right {
  transform: translateX(120px);
}
/* Center slides in from bottom */
.gif-item--up {
  transform: translateY(80px);
}
/* Visible state */
.gif-item.visible {
  opacity: 1;
  transform: translate(0, 0);
}
/* Main/center GIF — bigger */
.gif-item--main {
  flex: 1.6;
  max-width: 460px;
}
.gif-frame {
  background: transparent;
  position: relative;
  overflow: hidden;
}
.gif-frame img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 72vh;
  object-fit: contain;
}
.gif-label {
  font-family: var(--fd);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--wht);
  background: var(--red);
  padding: 10px 20px;
  text-align: center;
}
@media(max-width: 900px) {
  /* Mobile: no sticky, normal flow, slide in from sides */
  .gif-sticky-outer {
    height: auto !important;
  }
  .gif-sticky-stage {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    flex-direction: column;
    gap: 32px;
    padding: 40px 6vw 60px;
    align-items: center;
  }
  .gif-item {
    max-width: 92vw;
    flex: unset;
    width: 100%;
    opacity: 0;
  }
  .gif-item--main {
    max-width: 92vw;
    flex: unset;
  }
  /* On mobile, odd items slide from left, even from right */
  .gif-item:nth-child(1) { transform: translateX(-80px); }
  .gif-item:nth-child(2) { transform: translateX(80px); }
  .gif-item:nth-child(3) { transform: translateX(-80px); }
  /* Override desktop transforms */
  .gif-item--left  { transform: translateX(-80px); }
  .gif-item--up    { transform: translateX(80px); }
  .gif-item--right { transform: translateX(-80px); }
  .gif-item.visible { opacity: 1; transform: translateX(0) !important; }
  .gif-frame img { max-height: none; width: 100%; }
}

/* STICKY SECTION HEADERS — mobile */
@media(max-width: 900px) {
  .sticky-section-header {
    position: sticky;
    top: 0;
    z-index: 150;
    background: var(--blk);
    padding: 14px 6vw 10px;
    border-bottom: 1px solid var(--g3);
    margin-bottom: 24px;
  }
  .sticky-section-header .section-tag {
    margin-bottom: 4px;
    font-size: 13px;
  }
  .sticky-section-header .section-title {
    font-size: clamp(34px, 8vw, 52px);
    margin-bottom: 0;
    line-height: 0.95;
  }
  /* Hide subtitle inside sticky header on mobile so it doesn't crowd */
  .sticky-section-header .section-sub {
    display: none;
  }
  /* Dark bg variants */
  #mercado .sticky-section-header { background: var(--g2); }
  #vs .sticky-section-header { background: var(--blk); }
  #precios .sticky-section-header { background: var(--g2); }
  #servicios .sticky-section-header { background: var(--blk); }
  #ejemplos .sticky-section-header { background: var(--blk); }
  #como-funciona .sticky-section-header { background: var(--blk); }

  /* Fix ejemplos header spacing — not sticky so needs padding */
  .ejemplos-header.sticky-section-header {
    margin-bottom: 0;
    padding-bottom: 16px;
  }

  /* GIF label — pegado a la imagen sin espacio */
  .gif-item .gif-label {
    margin-top: 0;
    display: block;
  }
  .gif-frame {
    display: flex;
    flex-direction: column;
    font-size: 0;
    line-height: 0;
  }
  .gif-frame img {
    display: block;
    width: 100%;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
  }
  .gif-frame .gif-label {
    font-size: 13px;
    line-height: normal;
  }
}


/* DAY MODE */
body.day-mode{background:#fff;color:#111}
body.day-mode #nav{background:rgba(255,255,255,.95);border-bottom:1px solid #ddd}
body.day-mode #nav.scrolled{background:rgba(255,255,255,.97)}
body.day-mode .nav-logo,body.day-mode .nav-links a{color:#111}
body.day-mode .nav-links a:hover{color:var(--red)}
body.day-mode .hero-h1,body.day-mode .hero-sub,body.day-mode .section-title,body.day-mode .big-statement{color:#111}
body.day-mode .sstep h3,body.day-mode .sc-title,body.day-mode .cta-title,body.day-mode .plan-name,body.day-mode .sc-price,body.day-mode .origin-product-name,body.day-mode .footer-logo,body.day-mode .good-item,body.day-mode .stitle{color:#111}
body.day-mode .bill-p,body.day-mode .btog-btn,body.day-mode .section-tag{color:#444}
body.day-mode .section-sub,body.day-mode .mercado-text,body.day-mode .stat-label,body.day-mode .sstep p,body.day-mode .sc-desc,body.day-mode .plan-feats,body.day-mode .bad-item,body.day-mode .footer-brand p,body.day-mode .terms-section p,body.day-mode .terms-section li{color:#444}
body.day-mode .hero-sub{color:#444}
body.day-mode #mercado{background:#f0f0f0}
body.day-mode #vs{background:#fafafa}
body.day-mode #como-funciona,body.day-mode #servicios,body.day-mode #ejemplos,body.day-mode #hero{background:#fff}
body.day-mode #precios{background:#f5f5f5}
body.day-mode .stack-card{background:#fff;border-top-color:#ddd}
body.day-mode .stack-card:nth-child(2),body.day-mode .stack-card:nth-child(3),body.day-mode .stack-card:nth-child(4),body.day-mode .stack-card:nth-child(5),body.day-mode .stack-card:nth-child(6){box-shadow:0 -8px 40px rgba(0,0,0,.08)}
body.day-mode .sc-num{color:#ddd}
body.day-mode .sc-icon-wrap{background:#f0f0f0;border-color:#ddd}
body.day-mode .plan-card{border-color:#ddd}
body.day-mode .plan-card.featured{background:rgba(232,56,26,.04)}
body.day-mode .plan-name{color:#111}
body.day-mode .btog-btn{border-color:#ddd;color:#666}
body.day-mode .addon-pill{border-color:#ddd;color:#444}
body.day-mode .vs-card{border-color:#ddd}
body.day-mode .sstep{border-bottom-color:#ddd}
body.day-mode .sticky-steps-left{border-right-color:#ddd}
body.day-mode .ssp-line{background:#ddd}
body.day-mode .sstep-num{color:rgba(232,56,26,.1)}
body.day-mode .sticky-case{background:#fafafa}
body.day-mode .sticky-case--alt{background:#f0f0f0}
body.day-mode .origin-img-wrap{border-color:#ddd}
body.day-mode .crb-media{border-color:#ddd}
body.day-mode .crb-video-item{background:#eee;border-color:#ddd}
body.day-mode footer{background:#111;}
body.day-mode .footer-logo,body.day-mode .footer-links a,body.day-mode .footer-bottom{color:#ccc}
body.day-mode .nav-mobile{background:rgba(255,255,255,.98)}
@media(max-width:900px){
  body.day-mode .sticky-section-header{background:#fff;border-bottom-color:#ddd}
  body.day-mode #mercado .sticky-section-header{background:#f0f0f0}
  body.day-mode #precios .sticky-section-header{background:#f0f0f0}
  body.day-mode .sticky-section-header .section-title{color:#111 !important}
  body.day-mode .sticky-section-header .section-tag{color:var(--red) !important}
  /* Secciones con fondo negro — texto crema en modo día */
  body.day-mode #servicios .sticky-section-header,
  body.day-mode #como-funciona .sticky-section-header,
  body.day-mode #ejemplos .sticky-section-header,
  body.day-mode #vs .sticky-section-header { background:#0A0A0A !important; }
  body.day-mode #servicios .sticky-section-header .section-title,
  body.day-mode #como-funciona .sticky-section-header .section-title,
  body.day-mode #ejemplos .sticky-section-header .section-title,
  body.day-mode #vs .sticky-section-header .section-title { color:var(--cream) !important; }
}
body.day-mode .nav-mobile a{color:#111;border-bottom-color:#eee}
body.day-mode #cursor{border-color:rgba(232,56,26,.5)}
body.day-mode .hero-marquee{background:var(--red)}
body.day-mode .hero-parallax-bg{opacity:.3}
.nav-logo-img{height:36px;width:auto;margin-right:10px;vertical-align:middle;display:inline-block;flex-shrink:0}
@media(max-width:900px){.nav-logo-img{display:none!important}}
@media(max-width:900px){.nav-logo-img{display:none!important}}
.nav-logo-light{display:none}
.nav-logo-dark{display:inline-block}
body.day-mode .nav-logo-dark{display:none}
body.day-mode .nav-logo-light{display:inline-block}
#day-toggle{position:fixed;bottom:28px;right:28px;z-index:500;background:var(--blk);border:1px solid var(--g3);color:var(--cream);font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;padding:12px 20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
#day-toggle:hover{border-color:var(--red);color:var(--red)}
body.day-mode #day-toggle{background:#fff;border-color:#ddd;color:#333;box-shadow:0 4px 20px rgba(0,0,0,.12)}
body.day-mode #day-toggle:hover{border-color:var(--red);color:var(--red)}

footer{background:var(--blk);border-top:1px solid var(--g3);padding:80px 0 40px;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:60px}
.footer-logo{font-family:var(--fd);font-weight:900;font-size:24px;letter-spacing:1px;text-transform:uppercase;color:var(--cream);margin-bottom:16px}
.footer-logo span{color:var(--red)}
.footer-brand p{font-size:14px;color:#bbb;line-height:1.6}
.footer-links h4,.footer-contact h4{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mut);margin-bottom:20px}
.footer-links{display:flex;flex-direction:column}
.footer-links a{color:#ccc;font-size:14px;text-decoration:none;padding:6px 0;transition:color .2s}
.footer-links a:hover{color:var(--red)}
.footer-contact a{color:var(--red);font-family:var(--fd);font-weight:700;font-size:16px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:color .2s}
.footer-contact a:hover{color:var(--cream)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--g3);padding-top:24px;font-size:13px;color:var(--mut)}
.footer-bottom a{color:#bbb;text-decoration:none}
.footer-bottom a:hover{color:var(--wht)}

@media(max-width:1100px){
  .sticky-case{grid-template-columns:280px 1fr}
  .sticky-steps-wrap{grid-template-columns:300px 1fr}
}
@media(max-width:900px){
  #nav{
    transition:background .3s,padding .3s,transform .35s cubic-bezier(.4,0,.2,1);
  }
  #nav.nav-hidden{
    transform:translateY(-110%);
  }
  .mercado-grid,.vs-grid{grid-template-columns:1fr}
  .vs-divider{display:none}
  .plans-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .sticky-case{grid-template-columns:1fr;min-height:auto}
  .sticky-left{position:relative;height:auto;padding:60px 4vw 20px}
  .sticky-right{padding:20px 4vw 60px}
  .sticky-steps-wrap{grid-template-columns:1fr;min-height:auto}
  .sticky-steps-left{position:relative;height:auto;padding:60px 6vw 40px;border-right:none;border-bottom:1px solid var(--g3)}
  .sticky-steps-right{padding:60px 6vw}
  .sc-inner{grid-template-columns:1fr;gap:24px}
  .sc-left{flex-direction:row;align-items:center}
  .sc-num{font-size:60px}
}
@media(max-width:600px){
  .plans-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .crb-video-grid{grid-template-columns:1fr}
  body{cursor:auto}
  #cursor,#cursor-dot{display:none}
  /* Disable stacking on mobile — show as normal flow */
  .stack-card{position:relative!important;top:auto!important;box-shadow:none!important;border-top:1px solid var(--g3)}
  .stack-cards-wrap{display:flex;flex-direction:column}
}