/* Claude · ronda 13. Se carga al final: solo añade capas decorativas y ajusta el reloj de la oferta. */
:root{--r13-glass:rgba(12,18,17,.76);--r13-line:#d3efa24d;--r13-lime:#d3efa2;--r13-ink:#edf0e9;--r13-muted:#b4c0b6}
html:not(.cosmos){--r13-glass:rgba(20,37,30,.86);--r13-ink:#f3f6ee}

/* ───────── Reloj de la oferta: tamaño original en reposo; al pasar el puntero se expande 2,2× de forma simétrica desde el centro-base ───────── */
.timer-dock{transform:none!important;translate:-50% 0;transform-origin:50% 100%!important;scale:1;transition:opacity .5s ease,translate .5s cubic-bezier(.22,.8,.2,1),scale .6s cubic-bezier(.22,.9,.3,1),box-shadow .5s ease,border-color .5s ease!important;will-change:scale}
.timer-dock.is-away{transform:none!important;translate:-50% 14px}
.timer-dock:not(.is-away):hover{scale:2.2!important;border-color:#d3efa2aa;box-shadow:0 22px 60px #000b,0 0 40px #d3efa22b}
.timer-dock.tapped{animation:none!important;scale:2.2!important}
@media(max-width:760px){.timer-dock:not(.is-away):hover,.timer-dock.tapped{scale:1.6!important}}
@media(prefers-reduced-motion:reduce){.timer-dock{transition:none!important}}

/* ───────── Capas flotantes del recorrido ───────── */
.route-step{--fxd:1}
.fx{position:absolute;grid-column:1/-1!important;grid-row:1/-1!important;left:var(--px,0);top:var(--py,0);width:var(--pw,0);height:var(--ph,0);pointer-events:none;z-index:4;font-family:inherit}
.fx *{pointer-events:none}
.fx-card,.fx-doc,.fx-chip,.fx-bubble,.fx-voice,.fx-screen,.fx-icon,.fx-ok,.fx-medal>span{background:var(--r13-glass);border:1px solid var(--r13-line);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 18px 40px -12px #000a,0 0 0 1px #ffffff08 inset;color:var(--r13-ink)}
.fx-card b,.fx-doc b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.fx-card small,.fx-screen small{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--r13-lime)}
.fx>*{opacity:0;transition:opacity .7s ease}
.fx.in-view>*{opacity:1}
.fx-reels,.fx-reels *{opacity:1}

/* 1 · reels de Kim subiendo y desvaneciéndose, a la derecha */
.fx-s1 .fx-reels{position:absolute;left:0;top:0;width:100%;height:100%;opacity:1}
.fx-reel{position:absolute;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:1px solid #d3efa238;background:#0c1211;box-shadow:0 14px 30px -10px #000c}
.fx-reel video{width:100%;height:100%;object-fit:cover;display:block}
.fx-s1 .chain-tile{opacity:0;animation:r13Chain var(--dur,10s) ease-in-out forwards}
@keyframes r13Chain{0%{transform:translateY(46px) rotate(var(--rot,0));opacity:0}16%{opacity:.92}70%{opacity:.8}100%{transform:translateY(-230px) rotate(calc(var(--rot,0)*-1));opacity:0}}
@keyframes r13Rise{0%{transform:translateY(40px) rotate(var(--rot,0));opacity:0}14%{opacity:.85}78%{opacity:.7}100%{transform:translateY(-440px) rotate(calc(var(--rot,0)*-1));opacity:0}}

/* 2 · checklist de calificación */
.fx-s2 .fx-check{position:absolute;right:-12%;top:-30%;bottom:auto;width:min(236px,78%);padding:14px 16px 12px;border-radius:16px;transform:rotate(1.8deg)}
.fx-check ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.fx-check li{position:relative;padding-left:26px;font-size:12.5px;color:var(--r13-ink)}
.fx-check li::before{content:'';position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:5px;border:1.5px solid #d3efa266}
.fx-check li::after{content:'';position:absolute;left:5px;top:4px;width:6px;height:9px;border:solid #17301f;border-width:0 2px 2px 0;transform:rotate(40deg) scale(0);transform-origin:50% 60%;opacity:0}
.fx-s2.in-view .fx-check li::before{animation:r13Box 7s ease-in-out infinite;animation-delay:calc(var(--i)*.9s)}
.fx-s2.in-view .fx-check li::after{animation:r13Tick2 7s ease-in-out infinite;animation-delay:calc(var(--i)*.9s)}
@keyframes r13Box{0%,8%{background:transparent;border-color:#d3efa266}16%,86%{background:var(--r13-lime);border-color:var(--r13-lime)}96%,100%{background:transparent;border-color:#d3efa266}}
@keyframes r13Tick2{0%,8%{transform:rotate(40deg) scale(0);opacity:0}18%,86%{transform:rotate(40deg) scale(1);opacity:1}96%,100%{transform:rotate(40deg) scale(0);opacity:0}}

/* 3 · Aura crea el programa: piezas que se unen en un documento */
.fx-s3 .fx-doc{position:absolute;left:-30%;top:-10%;width:min(204px,64%);padding:14px;border-radius:16px;transform:rotate(-2deg)}
.fx-doc .tag{display:inline-block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#17301f;background:var(--r13-lime);border-radius:99px;padding:2px 8px;margin-bottom:8px}
.fx-doc em{display:block;font-style:normal;font-size:11px;color:var(--r13-muted);margin:3px 0 10px}
.fx-doc i{display:block;height:5px;border-radius:3px;background:#ffffff1c;margin-top:6px}.fx-doc i.s{width:62%}
.fx-doc .spark{position:absolute;right:12px;top:12px;width:14px;height:14px;background:var(--r13-lime);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:r13Spark 3.2s ease-in-out infinite}
@keyframes r13Spark{0%,100%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1.2) rotate(40deg);opacity:1}}
.fx-s3 .fx-chip{position:absolute;left:calc(-30% + 60px);top:calc(-10% + 50px);font-size:11.5px;padding:6px 11px;border-radius:99px;white-space:nowrap;opacity:0}
.fx-s3.in-view .fx-chip{animation:r13Merge 6.4s cubic-bezier(.5,0,.2,1) infinite}
.fx-s3 .c1{--sx:-90px;--sy:-60px;animation-delay:0s!important}
.fx-s3 .c2{--sx:-100px;--sy:70px;animation-delay:.7s!important}
.fx-s3 .c3{--sx:10px;--sy:110px;animation-delay:1.4s!important}
.fx-s3 .c4{--sx:80px;--sy:-70px;animation-delay:2.1s!important}
@keyframes r13Merge{0%{transform:translate(var(--sx),var(--sy)) scale(1);opacity:0}12%{opacity:1}55%{transform:translate(0,0) scale(.7);opacity:.95}68%,100%{transform:translate(0,0) scale(.3);opacity:0}}

/* 4 · aceptar / editar propuesta */
.fx-s4 .fx-validate{position:absolute;right:-6%;top:-18%;bottom:auto;width:min(210px,70%);padding:14px 16px;border-radius:16px;transform:rotate(-1.6deg)}
.fx-validate b{margin:3px 0 12px}
.fx-btns{display:flex;gap:8px}
.fx-btn{flex:1;text-align:center;font-size:12px;font-weight:600;padding:9px 8px;border-radius:10px;white-space:nowrap}
.fx-btn.ghost{border:1px solid #d3efa266;color:var(--r13-ink);background:#ffffff0a}
.fx-btn.go{background:var(--r13-lime);color:#17301f}
.fx-s4.in-view .fx-btn.go{animation:r13Press 4.8s ease-in-out infinite}
@keyframes r13Press{0%,55%,100%{transform:scale(1);box-shadow:0 0 0 0 #d3efa200}62%{transform:scale(.94)}72%{transform:scale(1.03);box-shadow:0 0 0 10px #d3efa222}90%{box-shadow:0 0 0 18px #d3efa200}}

/* 5 · pago online */
.fx-s5 .fx-pay{position:absolute;right:calc(100% - 64px);top:-2%;width:150px;height:96%}
.fx-icon{position:absolute;display:grid;place-items:center;border-radius:16px}
.fx-icon svg{fill:none;stroke:var(--r13-lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-icon.card{left:0;top:4%;width:92px;height:64px;transform:rotate(-8deg)}.fx-icon.card svg{width:62px}
.fx-icon.pos{right:0;top:30%;width:62px;height:86px;transform:rotate(6deg)}.fx-icon.pos svg{width:38px}
.fx-icon .wave{position:absolute;left:-14px;top:12px;width:22px;height:22px;border:2px solid #d3efa299;border-color:#d3efa2 transparent transparent transparent;border-radius:50%;transform:rotate(-45deg);opacity:0}
.fx-icon .w2{left:-24px;top:6px;width:36px;height:36px}
.fx-s5.in-view .fx-icon .wave{animation:r13Wave 2.6s ease-in-out infinite}.fx-s5.in-view .fx-icon .w2{animation-delay:.25s}
@keyframes r13Wave{0%,100%{opacity:0}40%{opacity:1}}
.fx-s5.in-view .fx-icon.card{animation:r13Bob 5s ease-in-out infinite}.fx-s5.in-view .fx-icon.pos{animation:r13Bob 5.6s ease-in-out infinite reverse}
@keyframes r13Bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.fx-ok{position:absolute;left:0;bottom:0;padding:7px 12px 7px 30px;border-radius:99px;font-size:12px}
.fx-ok::before{content:'';position:absolute;left:11px;top:7px;width:6px;height:11px;border:solid var(--r13-lime);border-width:0 2px 2px 0;transform:rotate(40deg)}

/* 6 · tres miniaturas: vídeos, plan alimentario y calendario */
.fx-s6 .fx-screens{position:absolute;left:calc(100% - 58px);top:-10%;width:176px;height:78%}
.fx-screen{position:absolute;width:128px;padding:10px;border-radius:14px}
.fx-screen.v{right:0;top:0;transform:rotate(3deg)}.fx-screen.f{left:0;top:34%;transform:rotate(-3deg)}.fx-screen.c{right:6%;bottom:0;transform:rotate(2deg)}
.fx-screen .play{display:block;height:54px;border-radius:9px;margin-top:8px;background:linear-gradient(135deg,#2d4636,#1b2a22);position:relative}
.fx-screen .play::after{content:'';position:absolute;left:50%;top:50%;margin:-9px 0 0 -6px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--r13-lime)}
.fx-screen i{display:block;height:4px;border-radius:2px;background:#ffffff1f;margin-top:8px;position:relative;overflow:hidden}.fx-screen i::after{content:'';position:absolute;inset:0;width:38%;background:var(--r13-lime)}
.fx-s6.in-view .fx-screen.v i::after{animation:r13Prog 6s linear infinite}
@keyframes r13Prog{from{width:6%}to{width:94%}}
.fx-screen .plate{display:block;width:52px;height:52px;margin:8px auto 4px;border-radius:50%;background:conic-gradient(var(--r13-lime) 0 38%,#6fa06a 38% 66%,#e3c27a 66% 100%);-webkit-mask:radial-gradient(circle,transparent 42%,#000 44%);mask:radial-gradient(circle,transparent 42%,#000 44%)}
.fx-screen .cal{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.fx-screen .cal u{display:block;height:15px;border-radius:4px;background:#ffffff14}.fx-screen .cal u.on{background:var(--r13-lime)}
.fx-s6.in-view .fx-screen{animation:r13Bob 6s ease-in-out infinite}.fx-s6.in-view .fx-screen.f{animation-duration:7s;animation-direction:reverse}.fx-s6.in-view .fx-screen.c{animation-duration:6.6s;animation-delay:-2s}

/* 7 · chat y nota de voz */
.fx-s7 .fx-chat{position:absolute;right:calc(100% - 72px);top:2%;width:212px;height:96%;display:grid;align-content:center;gap:10px}
.fx-bubble{position:relative;max-width:206px;padding:10px 13px;border-radius:16px;font-size:12.5px;line-height:1.4}
.fx-bubble.in{border-bottom-left-radius:4px;justify-self:start}
.fx-bubble.out{border-bottom-right-radius:4px;justify-self:end;background:rgba(211,239,162,.9);border-color:var(--r13-lime);color:#17301f;font-weight:500}
.fx-voice{justify-self:start;display:flex;align-items:center;gap:3px;padding:9px 14px;border-radius:99px;margin-left:14px}
.fx-voice i{display:block;width:3px;border-radius:2px;background:var(--r13-lime);height:6px}
.fx-voice i:nth-child(2n){height:12px}.fx-voice i:nth-child(3n){height:18px}.fx-voice i:nth-child(5){height:9px}
.fx-voice em{font-style:normal;font-size:11px;color:var(--r13-muted);margin-left:8px}
.fx-s7.in-view .fx-bubble,.fx-s7.in-view .fx-voice{animation:r13Pop 8s ease-in-out infinite;animation-delay:calc(var(--n,0)*1.3s)}
.fx-s7 .fx-bubble.in{--n:0}.fx-s7 .fx-bubble.out{--n:1}.fx-s7 .fx-voice{--n:2}
.fx-s7.in-view .fx-voice i{animation:r13Wave2 1.1s ease-in-out infinite}.fx-s7.in-view .fx-voice i:nth-child(2n){animation-delay:.15s}.fx-s7.in-view .fx-voice i:nth-child(3n){animation-delay:.3s}
@keyframes r13Pop{0%{opacity:0;transform:translateY(14px) scale(.96)}8%,82%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes r13Wave2{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.25)}}
@keyframes r13Shine{0%,55%{opacity:0;transform:translateX(-30px)}70%{opacity:1}100%{opacity:0;transform:translateX(34px)}}

@media(max-width:1100px){.fx-s1 .fx-reels{width:110px}.fx-s7 .fx-chat{width:180px}.fx-bubble{max-width:158px;font-size:11.5px}}
@media(max-width:760px){
  .fx-s2 .fx-check{right:2%;top:-36%;bottom:auto;width:min(210px,70%)}
  .fx-s3 .fx-doc{right:2%;top:-8%;width:min(180px,58%)}.fx-s3 .fx-chip{right:calc(2% + 30px);top:calc(-8% + 50px)}
  .fx-s3 .c1{--sx:-120px;--sy:-24px}.fx-s3 .c2{--sx:-110px;--sy:70px}.fx-s3 .c3{--sx:20px;--sy:96px}.fx-s3 .c4{--sx:76px;--sy:-40px}
  .fx-s4 .fx-validate{right:2%;top:-30%;bottom:auto;width:min(200px,70%)}
  .fx-s5 .fx-pay{right:2%;left:auto;top:auto;bottom:-14%;width:min(250px,80%);height:90px}.fx-icon.card{left:0;top:0}.fx-icon.pos{right:0;top:0;width:54px;height:74px}.fx-ok{left:26%;bottom:0}
  .fx-s6 .fx-screens{left:auto;right:2%;top:auto;bottom:-24%;width:min(300px,92%);height:112px}.fx-screen{width:96px;padding:7px}.fx-screen.v{right:auto;left:0;top:0}.fx-screen.f{left:34%;top:10px}.fx-screen.c{right:0;bottom:auto;top:0}
  .fx-s7 .fx-chat{left:3%;right:auto;width:62%;top:auto;bottom:4%;height:auto;gap:6px}.fx-s7 .fx-bubble.in{display:none}.fx-s7 .fx-bubble{max-width:100%;font-size:11.5px;padding:8px 11px}.fx-voice{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.fx *,.fx *::before,.fx *::after{animation:none!important}.fx-s1 .fx-reel{opacity:.85;transform:none}.fx-check li::before{background:var(--r13-lime);border-color:var(--r13-lime)}.fx-check li::after{transform:rotate(40deg) scale(1);opacity:1}.fx-s3 .fx-chip{display:none}.fx-bubble,.fx-voice{opacity:1}}
body.motion-paused .fx *,body.motion-paused .fx *::before,body.motion-paused .fx *::after{animation-play-state:paused!important}

/* ───────── Cierre: vídeos ambientales muy tenues ───────── */
.closing{position:relative;overflow:hidden}
.closing>.wrap{position:relative;z-index:2}
.fx-ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fx-reel.amb{top:var(--top,40%);bottom:auto;opacity:0;border-radius:12px;animation:r13Amb var(--dur,12s) ease-in-out forwards}
@keyframes r13Amb{0%{transform:translateY(40px) rotate(var(--rot,0));opacity:0}20%{opacity:.8}72%{opacity:.7}100%{transform:translateY(-110px) rotate(calc(var(--rot,0)*-1));opacity:0}}
@media(prefers-reduced-motion:reduce){.fx-ambient{display:none}}

/* ───────── Reparto: lienzo del dinero sobre el flujo de pago ───────── */
.payment-flow{position:relative}
.money-canvas{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
.payment-flow .pay-node>.glyph{transition:box-shadow .2s ease,transform .2s ease}

/* ───────── Centrado real en secciones fijadas (sticky): contenido centrado vertical y horizontalmente ───────── */
@media(min-width:981px){
  .g6.g6-pinned .gallery-wrap{align-items:center!important;align-content:center!important}
  .g6.g6-pinned .g6-right{height:100%!important;justify-content:center!important;align-items:center!important}
  .g6.g6-pinned .gallery-stage{height:min(100%,848px)!important;margin-block:auto}
  .g6.g6-pinned .g6-left{align-self:center!important;margin-block:auto}
}

/* ───────── Fondos de tarjetas con capa oscura ───────── */
.has-bg{position:relative;overflow:hidden;isolation:isolate}
.has-bg>*:not(.card-bg){position:relative;z-index:2}
.card-bg{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.card-bg i{position:absolute;inset:-4%;background-size:cover;background-repeat:no-repeat;filter:saturate(.88) contrast(1.02);transform:scale(1.04);opacity:1}
.card-bg.is-rotating i{opacity:0;transition:opacity 1.1s ease,transform 4.6s ease-out;transform:scale(1.04)}.card-bg.is-rotating i.on{opacity:1;transform:scale(1.1)}
.card-bg i.prod{background-size:contain;background-repeat:no-repeat;background-position:center!important;background-color:#e6e9e1;inset:0;filter:none}
@keyframes r13Fade{0%{opacity:0;transform:scale(1.04)}8%{opacity:1}30%{opacity:1}38%{opacity:0}100%{opacity:0;transform:scale(1.12)}}
.card-bg:not(.is-rotating) i{animation:r13Drift 18s ease-in-out infinite alternate}
@keyframes r13Drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.1) translate(-1.2%,-1%)}}
.card-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,12,.48),rgba(8,12,12,.8) 72%),radial-gradient(120% 90% at 10% 0%,rgba(8,12,12,.25),transparent);backdrop-filter:blur(1.5px) saturate(.95);-webkit-backdrop-filter:blur(1.5px) saturate(.95)}
.has-bg h3,.has-bg h4{color:#f3f6ee;text-shadow:0 1px 14px #0009}
.has-bg p{color:#d4dccf!important;text-shadow:0 1px 10px #000a}
@media(prefers-reduced-motion:reduce){.card-bg i{animation:none!important;transition:none!important}.card-bg.is-rotating i:not(:first-child){display:none}.card-bg.is-rotating i:first-child{opacity:1}}

/* Reparto: sin flechas; solo la animación del dinero (se conserva su espacio en la rejilla) */
.payment-flow .light-path{visibility:hidden}

/* Elementos flotantes un poco más pequeños (escritorio); cada uno vive ~1/3 dentro de la foto y el resto en el aire */
@media(min-width:761px){
 .fx-s2 .fx-check{scale:.8;transform-origin:100% 0}
 .fx-s3 .fx-doc{scale:.8;transform-origin:0 0}
 .fx-s4 .fx-validate{scale:.74;transform-origin:100% 0}
 .fx-s5 .fx-pay{scale:.82;transform-origin:100% 0}
 .fx-s6 .fx-screens{scale:.8;transform-origin:0 0}
 .fx-s7 .fx-chat{scale:.84;transform-origin:100% 50%}
}

/* Fuegos artificiales del paso 8: detrás de la foto */
.fx-fireworks{position:absolute;z-index:-1;pointer-events:none}
@media(prefers-reduced-motion:reduce){.fx-fireworks{display:none}}

/* ───────── Cifras de impacto: destello al alcanzar el máximo y reposo en verde de acento ───────── */
.impact-stat{position:relative}
html .impact-stat strong.is-peak{color:#f3ffd9!important;animation:r13Peak 1.9s cubic-bezier(.2,.7,.2,1) both}
html .impact-stat strong.is-done{color:var(--lime)!important;text-shadow:0 0 28px #d9f3ac3d!important}
@keyframes r13Peak{0%{transform:scale(1);text-shadow:0 0 0 #d9f3ac00}12%{transform:scale(1.09);text-shadow:0 0 22px #f3ffd9,0 0 54px #d9f3ac,0 0 110px #a8e060}45%{transform:scale(1.03);text-shadow:0 0 34px #d9f3acaa,0 0 80px #d9f3ac55}100%{transform:scale(1);text-shadow:0 0 28px #d9f3ac3d,0 0 60px #d9f3ac18}}
.impact-stat.is-finale::after{content:"";position:absolute;inset:-10% -4%;pointer-events:none;background:radial-gradient(circle at 50% 55%,#d9f3ac55,#d9f3ac18 35%,transparent 62%);opacity:0;animation:r13Burst 1.7s ease-out 1}
@keyframes r13Burst{0%{opacity:0;transform:scale(.55)}20%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
html .impact-stat.is-finale strong.is-peak{animation-duration:2.4s}
@media(prefers-reduced-motion:reduce){html .impact-stat strong.is-peak{animation:none}.impact-stat.is-finale::after{animation:none}}

/* ───────── Cifras de impacto: sin líneas ni cuadros, ritmo vertical equidistante (rótulo · cifra · leyenda) ───────── */
html .impact-grid{border:0!important;gap:8px 0!important}
html .impact-grid .impact-stat,html .impact-grid .impact-stat:first-child,html .impact-grid .impact-stat:nth-child(n){border:0!important;background:transparent!important;padding:20px 18px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:0}
html .impact-grid .impact-kicker{margin:0 0 12px!important;min-height:0!important;line-height:1.2!important}
html .impact-grid .impact-stat>strong{min-height:0!important;margin:0 0 12px!important;line-height:1.02!important;display:block!important}
html .impact-grid .impact-stat h3{margin:0 auto!important;min-height:0!important}




/* ───────── Fondos de tarjetas: imagen completa, nítida y con aire (sin recortes); el relleno es la misma imagen desenfocada ───────── */
.card-bg i{background-size:contain!important;background-repeat:no-repeat;background-position:center!important;inset:0!important;transform:none!important;filter:none!important;isolation:isolate;animation:none!important}
.card-bg.fit-right i{background-position:right center!important}
.card-bg i::before{content:"";position:absolute;inset:-8%;background:inherit;background-size:cover!important;background-position:center!important;filter:blur(26px) brightness(.5) saturate(.9);z-index:-1}
.card-bg i.prod::before{display:none}
.card-bg.is-rotating i{opacity:0;transition:opacity 1.1s ease}.card-bg.is-rotating i.on{opacity:1}
.has-bg .card-shade{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(180deg,rgba(8,12,12,.5),rgba(8,12,12,.82) 78%)}
.card-bg.fit-right+*{}
.feature-cards article.has-bg{min-height:290px}
.feature-cards article.has-bg>*:not(.card-bg){max-width:46%}
.feature-cards article.has-bg .card-bg~*{position:relative;z-index:2}
.feature-cards .card-bg.fit-right .card-shade{background:linear-gradient(90deg,rgba(8,12,12,.94) 0,rgba(8,12,12,.86) 36%,rgba(8,12,12,.2) 62%,transparent 100%)}
.future-grid article.has-bg{min-height:360px}
@media(max-width:760px){.feature-cards article.has-bg>*:not(.card-bg){max-width:none}.feature-cards .card-bg.fit-right i{background-position:center bottom!important}.feature-cards .card-bg.fit-right .card-shade{background:linear-gradient(180deg,rgba(8,12,12,.88),rgba(8,12,12,.5) 60%,rgba(8,12,12,.2))}.feature-cards article.has-bg{min-height:340px}}

/* ───────── Sin líneas separadoras entre secciones; mismo aire entre todos los bloques ───────── */
html .section,html .section+.section,html .scope-block,html .future-section,html .footer-v7,html .feature-section,html .business,html .investment,html .closing{border-top:0!important;border-bottom:0!important;box-shadow:none}
html hr{display:none}

/* Fondos de tarjetas (corrección): relleno desenfocado detrás y la imagen completa y nítida delante */
.card-bg i{background:none!important}
.card-bg i::before{content:"";position:absolute;inset:-8%;background-image:var(--img);background-size:cover;background-position:center;filter:blur(26px) brightness(.5) saturate(.9);z-index:0}
.card-bg i::after{content:"";position:absolute;inset:0;background-image:var(--img);background-size:contain;background-repeat:no-repeat;background-position:center;z-index:1}
.card-bg.fit-right i::after{background-position:right center}
.card-bg i.prod::before{display:none}
.card-bg i.prod::after{background-color:#e6e9e1}
@media(max-width:760px){.feature-cards .card-bg.fit-right i::after{background-position:center bottom}}

/* resumen final: título que cambia con el scroll */
.plan-pinned .section-title h2,.plan-pinned .section-title .lead{transition:opacity .26s ease,transform .26s ease}
.plan-pinned .section-title.swap h2,.plan-pinned .section-title.swap .lead{opacity:0;transform:translateY(8px)}
/* cierre: dos llamadas a la acción */
.closing .contract-cta{font-size:19px;padding:20px 44px}
.decline-cta{display:block;margin:18px auto 0;background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.75}
.decline-cta:hover{opacity:1}
.decline-msg{margin:18px auto 0;max-width:420px;font-size:15px;color:var(--ink);animation:r13Fade .5s ease both}
@keyframes r13Fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#review-confirmation{display:none!important}
.closing-center{position:relative;z-index:2}
@keyframes r13Amb{0%{transform:translateY(24px) rotate(var(--rot,0));opacity:0}18%{opacity:.8}75%{opacity:.75}100%{transform:translateY(-36px) rotate(var(--rot,0));opacity:0}}

/* bienvenida: tres pasos */
#welcome-dialog .welcome-lead{max-width:34ch;font-size:clamp(19px,2.2vw,23px);line-height:1.4;margin:0 auto 14px}
#welcome-dialog .welcome-small{max-width:none;margin:0 auto 14px;font-size:15px}
.welcome-steps{list-style:none;margin:0 auto 24px;padding:0;display:grid;gap:10px;max-width:400px;text-align:left}
.welcome-steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;font-size:16px;line-height:1.4;color:var(--ink)}
.welcome-steps i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #d9f3ac66;color:var(--lime);font:600 13px/1 ui-monospace,Menlo,monospace;font-style:normal}
.welcome-steps strong{color:var(--lime);font-weight:600}

/* Tarjetas «próximas versiones»: una sola regla para todas — la imagen cubre la tarjeta completa, centrada, mismo tono */
.future-grid .card-bg i::before{display:none!important}
.future-grid .card-bg i::after{background-size:cover!important;background-position:center!important;background-repeat:no-repeat}
.future-grid .card-bg i{background-color:#0b100f}
.future-grid .card-bg i::after{filter:saturate(.9) contrast(1.02)}
.future-grid .card-shade{background:linear-gradient(180deg,rgba(8,12,12,.58),rgba(8,12,12,.78) 70%,rgba(8,12,12,.9))!important}

/* tarjeta de dos caras */
.flip-card{perspective:1800px;margin-top:8px}
.flip-inner{display:grid;position:relative;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.65,.05,.25,1)}
.flip-card[data-face="flow"] .flip-inner{transform:rotateY(180deg)}
.flip-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;position:relative;min-width:0}
.flip-back{transform:rotateY(180deg)}
.flip-story{margin:0!important;height:100%;display:flex;flex-direction:column;justify-content:center;padding:44px 40px 36px;border:1px solid #728c6260;border-radius:32px;background:linear-gradient(145deg,#213528,#111d18);box-shadow:0 34px 70px -24px #0009,0 2px 0 #c5dfae24 inset}
html.cosmos .flip-story{background:#0a0a0a;border-color:#ffffff1f}
.flip-story>h3{text-align:center;margin:0 0 8px}
.flip-btn{position:absolute;top:16px;right:18px;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 12px;border-radius:99px;border:1px solid #d3efa255;background:#0b100fcc;color:var(--lime);font:500 13px/1 inherit;cursor:pointer;transition:border-color .2s,background .2s}
.flip-btn:hover{border-color:var(--lime);background:#16221c}
.flip-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flip-btn.hint svg{animation:r13Spin 2.4s ease-in-out infinite}
.flip-btn.hint::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:1px solid #d3efa2;opacity:0;animation:r13Ping 2.4s ease-out infinite}
@keyframes r13Spin{0%,60%,100%{transform:rotate(0)}85%{transform:rotate(360deg)}}
@keyframes r13Ping{0%{opacity:.7;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}.flip-btn.hint svg,.flip-btn.hint::after{animation:none}}
@media(max-width:760px){.flip-story{padding:36px 20px 28px}.flip-btn span{display:none}.flip-btn{padding:10px}}

/* Recorrido de ocho pasos: un concepto por pantalla, con mucho aire */
@media(min-width:981px){
 .journey-map{padding-top:0!important;padding-bottom:0!important}
 .journey-sequence{gap:clamp(150px,26vh,300px)!important}
 .route-step{min-height:clamp(340px,50vh,540px)}
}
@media(max-width:980px){.journey-sequence{gap:96px!important}}

/* Reparto: sin líneas conectoras; foto de Kim idéntica en móvil y escritorio */
.payment-story .pay-branches::before,.payment-story .pay-branches::after,.payment-story .pay-branch::before,.payment-story .pay-branch::after{display:none!important}
.payment-story .pay-node>img.pay-avatar{width:72px!important;height:72px!important;padding:0!important;object-fit:cover;object-position:50% 22%;border-radius:50%}
@media(max-width:760px){.payment-story .pay-branches{padding-top:0!important;border:0!important}.payment-story .payment-flow{gap:56px}}
@media(max-width:760px){.flip-story{justify-content:flex-start;padding-top:72px}.flip-story>h3{margin-bottom:28px}}
@media(max-width:760px){.payment-story .payment-flow>.light-path{display:none!important}}


/* Menú móvil: carrusel centrado, una opción al centro, desplazable de lado a lado */
@media(max-width:760px){
 .top nav{position:relative;display:flex!important;overflow-x:auto;justify-content:flex-start!important;gap:8px!important;padding:6px 0 10px!important;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
 .top nav::-webkit-scrollbar{display:none}
 .top nav::before,.top nav::after{content:"";flex:0 0 calc(50% - 64px)}
 .top nav a{flex:0 0 auto;scroll-snap-align:center;padding:8px 16px;border-radius:99px;opacity:.55;transition:opacity .25s,color .25s,background .25s;white-space:nowrap}
 .top nav a.is-current{opacity:1;color:var(--lime);background:#ffffff12}
}
@media(max-width:760px){.top{flex-wrap:wrap}.top nav{order:5;flex:0 0 100%!important;width:100%!important;max-width:100%;margin:0!important}}

/* Titular del hero: siempre tres líneas */
.hero h1{font-size:clamp(25px,3.7vw,54px)!important;line-height:1.1}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 em{display:block}
@media(max-width:760px){.hero h1{font-size:clamp(21px,6.2vw,36px)!important}}





/* Alineación: la descripción comparte borde con su título en cada lado del recorrido */
@media(min-width:981px){
 .route-step:nth-child(odd) > div:not(.route-orb) p{margin-left:auto;margin-right:0;text-align:right}
 .route-step:nth-child(even) > div:not(.route-orb) p{margin-right:auto;margin-left:0;text-align:left}
}

@media(min-width:981px){.referral-layout .referral-explanation{text-align:left!important;margin-left:0!important;margin-right:0!important;max-width:none!important;width:100%}}


/* Menú de escritorio: fijo arriba y más compacto al bajar */
@media(min-width:761px){
 html header.top,html.cosmos header.top,html.cosmos .top{position:sticky!important;top:0;z-index:60;transition:min-height .35s ease,padding .35s ease,background .35s ease}
 header.top.is-compact{min-height:54px!important;padding-top:6px!important;padding-bottom:6px!important}
 header.top .brand{transition:transform .35s ease}
 header.top.is-compact .brand{transform:scale(.82);transform-origin:left center}
 header.top.is-compact nav a{font-size:14px}
}

/* Barra de avance: pegada al borde inferior del menú fijo, en ambos temas */
html.cosmos .progress{display:block!important}
@media(min-width:761px){
 .progress{position:fixed!important;left:0;right:0;top:var(--hdr,88px)!important;height:2px;z-index:59;background:transparent!important}
 .progress i{background:var(--lime)!important;box-shadow:none}
}
/* Tema Claro: un solo fondo para todas las secciones (el mismo negro verdoso del body) */
html:not(.cosmos) main>section,html:not(.cosmos) main>section.section{background:transparent!important}

/* Móvil y escritorio: menú siempre fijo; la barra de avance cuelga de su borde inferior */
html header.top,html.cosmos header.top,html.cosmos .top{position:sticky!important;top:0;z-index:60}
.progress{position:fixed!important;left:0;right:0;top:var(--hdr,88px)!important;height:2px;z-index:59;background:transparent!important}
.progress i{background:var(--lime)!important;box-shadow:none}
@media(max-width:760px){
 header.top{transition:min-height .3s ease,padding .3s ease}
 header.top.is-compact{min-height:96px!important;padding-top:8px!important;padding-bottom:2px!important}
 header.top.is-compact .motion{display:none}
 html{scroll-padding-top:120px}
}

/* Tras girar, la tarjeta queda plana: así los clics llegan a los controles (sin hit-test 3D) */
.flip-card.is-static .flip-inner{transform:none!important;transform-style:flat!important;transition:none!important}
.flip-card.is-static .flip-face{backface-visibility:visible!important;-webkit-backface-visibility:visible!important;transform:none!important}
.flip-card.is-static[data-face="flow"] .flip-front,.flip-card.is-static[data-face="calc"] .flip-back{visibility:hidden;pointer-events:none}

/* Auditoría móvil: estabilidad, rendimiento y toques */
html{overflow-x:clip}
@media(max-width:760px){
 .timer-dock.tapped,.timer-dock:hover{scale:1!important}
 .collage-card{filter:none!important}
 .asm{filter:none!important}
 .hero .reveal{opacity:1!important;transform:none!important}
 .bottom-glass,.fx-card,.fx-doc,.fx-chip,.fx-bubble,.fx-voice,.fx-screen,.fx-icon,.fx-ok{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .motion,.cosmos-toggle,.flip-btn,.decline-cta{min-height:44px;min-width:44px}
 .top nav a{min-height:44px;display:inline-flex;align-items:center}
}
@media(hover:none){.timer-dock:hover{scale:1!important}}
.call-note{margin:16px auto 0;color:var(--muted);text-align:center}

/* ═════ CONTENEDORES (r16): cada bloque con título es una caja con padding único y contiene todo su contenido ═════ */
:root{--blk:clamp(110px,16vh,175px);--title-gap:clamp(40px,6vh,72px)}
main>section.section:not(.hero):not(.g6){padding-block:var(--blk)!important;margin-block:0!important}
main>section#funciones{padding-block:0!important}
#funciones .scope-block,#funciones .future-section{padding-block:var(--blk)!important;margin-block:0!important;min-height:0!important}
/* pantallas fijas: su holgura interna se compensa con un margen negativo calculado */
#funciones .gallery-section.g6-pinned,#plan.plan-pinned{margin-top:var(--pin-mt,0)!important;margin-bottom:var(--pin-mb,0)!important;padding-block:0!important}
/* dentro de cada bloque: sin márgenes sueltos en el primer y último elemento; separación uniforme título → contenido */
main>section .wrap>*:first-child,#funciones .scope-block>*:first-child,#funciones .future-section>*:first-child{margin-top:0!important}
main>section .wrap>*:last-child,#funciones .scope-block>*:last-child,#funciones .future-section>*:last-child{margin-bottom:0!important}
main>section .section-title,#funciones .scope-heading{margin-bottom:var(--title-gap)!important}
main>section .section-title:last-child{margin-bottom:0!important}
@media(max-width:760px){:root{--blk:clamp(72px,10vh,110px);--title-gap:36px}}

:root{--sec-pad:var(--blk)}
html.eq-m .night-in,html.eq-m .reveal,html.eq-m .asm,html.eq-m [class*='is-in']{transform:none!important;translate:none!important;scale:none!important}

/* El menú compacto no cambia la altura total en el flujo: el hueco que libera se conserva como margen (sin saltos al hacer scroll) */
header.top{transition:min-height .35s ease,padding .35s ease,margin-bottom .35s ease,background .35s ease}
@media(min-width:761px){header.top.is-compact{margin-bottom:34px}}
@media(max-width:760px){header.top.is-compact{margin-bottom:32px}}

/* Oferta: ancla de valor con gráfico */
.value-anchor{max-width:760px;margin:0 auto clamp(40px,6vh,64px);padding:0}
.va-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 10px}
.va-row span{font-size:15px;color:var(--muted)}
.va-row strong{font:400 clamp(26px,3.2vw,38px)/1 var(--serif);color:var(--ink);letter-spacing:-.02em}
.va-row.you span{color:var(--lime)}.va-row.you strong{color:var(--lime)}
.va-bar{height:14px;border-radius:99px;background:#ffffff10;overflow:hidden;margin:0 0 26px}
.va-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#ffffff40,#ffffff70);transition:width 1.4s cubic-bezier(.16,.8,.24,1) .15s}
.va-bar i.you{background:linear-gradient(90deg,#b9d58f,var(--lime));transition-delay:.7s}
.value-anchor.in-view .va-bar i.full{width:100%}
.value-anchor.in-view .va-bar i.you{width:16.7%}
.va-save{margin:6px 0 0;text-align:center;font-size:18px;color:var(--ink)}
.va-save b{color:var(--lime);font-weight:600}
.va-save small{display:block;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.price .was{display:block;font:500 15px/1 ui-sans-serif,system-ui;color:var(--muted);text-decoration:line-through;margin:0 0 6px}
@media(prefers-reduced-motion:reduce){.va-bar i{transition:none}.value-anchor .va-bar i.full{width:100%}.value-anchor .va-bar i.you{width:16.7%}}
@media(max-width:760px){.va-row{flex-direction:column;align-items:flex-start;gap:4px}}
.va-roi{margin:2px 0 18px;text-align:center;font-size:17px;color:var(--ink)}.va-roi b{color:var(--lime);font-weight:600}

.flip-card.flip-snap .flip-inner{transition:none!important}

/* Bienvenida: tras elegir tema se quita el ruido; solo iconos, atenuados */
.welcome-hint,.theme-opt span:not(.tap-ring),.theme-pill{transition:opacity .45s ease,max-width .45s ease,padding .45s ease,gap .45s ease,margin .45s ease}
#welcome-dialog.has-pick .welcome-hint{opacity:0;pointer-events:none;height:0;overflow:hidden;margin:-14px 0 0!important}
#welcome-dialog.has-pick .theme-opt span:not(.tap-ring){opacity:0;max-width:0;overflow:hidden;white-space:nowrap}
#welcome-dialog.has-pick .theme-opt{gap:0;padding:0 14px}
#welcome-dialog.has-pick .theme-pill{opacity:.38}
#welcome-dialog.has-pick .theme-pill:hover,#welcome-dialog.has-pick .theme-pill:focus-within{opacity:.85}
@media(min-width:761px){#welcome-dialog .welcome-lead{max-width:none;font-size:clamp(19px,2vw,23px)}}

/* Bienvenida: columna más angosta, líneas equilibradas y más aire */
@media(min-width:761px){
#welcome-dialog{width:min(740px,calc(100% - 40px))}
#welcome-dialog .welcome-lead{max-width:30em;text-wrap:balance;margin:0 auto 30px}
#welcome-dialog .welcome-small{margin:0 auto 24px;max-width:none!important;white-space:nowrap}
#welcome-dialog .welcome-steps{gap:16px;margin-bottom:34px}
#welcome-dialog h2{margin-bottom:28px}
}
.welcome-lead{text-wrap:balance}

/* Cierre: a los 4 s el texto se atenúa; quedan encendidos el contador y el botón */
.closing-center>h2,.closing-center>.lead,.closing-center>.call-note,.closing-center>.decline-cta,.closing-center .clock-unit,.closing-center #offer-label{transition:opacity 1.2s ease}
.closing-center.is-focus>h2,.closing-center.is-focus>.lead,.closing-center.is-focus>.call-note,.closing-center.is-focus>.decline-cta{opacity:.32}
.closing-center.is-focus .clock-unit,.closing-center.is-focus #offer-label{opacity:.6}
.closing-center.is-focus .offer-clock,.closing-center.is-focus .contract-cta{opacity:1}

/* Rendimiento: sin desenfoque de fondo en capas fijas o en movimiento (cada fotograma volvía a desenfocar los vídeos de debajo).
   Los fondos ya son casi opacos, así que el aspecto se mantiene. */
header.top,.bottom-glass,.timer-dock,.fx-card,.fx-doc,.fx-chip,.fx-bubble,.fx-voice,.fx-screen,.fx-icon,.fx-ok,html.cosmos .bottom-glass,html.cosmos header.top,html.cosmos .timer-dock{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
header.top{background-color:rgba(14,21,21,.97)!important}
html.cosmos header.top{background-color:rgba(5,5,5,.96)!important}
.timer-dock{background-color:rgba(22,32,31,.95)!important}
.fx-card,.fx-doc,.fx-chip,.fx-screen,.fx-icon,.fx-ok,.fx-voice,.fx-bubble.in{background-color:rgba(20,37,30,.95)!important}

/* Móvil: los reels del cierre quedan detrás del texto y atenuados, para que nunca tapen contenido */
@media(max-width:760px){
 #siguiente .fx-ambient{z-index:0!important;opacity:.32}
 #siguiente .closing-center{position:relative;z-index:1}
}
/* Bienvenida: tarjeta de escritorio ~25% menos voluminosa, texto y animación intactos */
@media(min-width:761px){#welcome-dialog{width:min(620px,calc(100% - 40px));padding:clamp(40px,3.5vw,52px) clamp(24px,4vw,56px) clamp(34px,3vw,44px)}#welcome-dialog .welcome-lead{margin-bottom:24px}#welcome-dialog .welcome-small{white-space:normal;max-width:42ch!important;margin:0 auto 18px}#welcome-dialog .welcome-steps{gap:12px;margin-bottom:26px}#welcome-dialog h2{margin-bottom:24px}}