@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');


.tx{position:relative;margin:0 calc(50% - 50vw);padding:64px max(16px,calc(50vw - 600px)) 70px;box-sizing:border-box;color:#fff;overflow:hidden;min-height:640px}
.tx-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tx-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,13,.94) 0%,rgba(7,9,13,.84) 45%,rgba(7,9,13,.7) 100%)}
.tx::before{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 70% 45%,#000 25%,transparent 75%);pointer-events:none}
.tx-g{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.tx-k{font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#00BBFF;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(0,187,255,.35);border-radius:999px;padding:7px 14px;background:rgba(0,187,255,.06)}
.tx-k i{width:7px;height:7px;border-radius:50%;background:#00FF9C;box-shadow:0 0 10px #00FF9C}
.tx h1{font:900 82px/.98 Rubik;letter-spacing:-.03em;margin:20px 0 16px;text-transform:none}
.tx h1 em{font-style:normal;background:linear-gradient(90deg,#00BBFF,#FF0088 55%,#FFF200);-webkit-background-clip:text;background-clip:text;color:transparent}
.tx .l{color:#A9B1BE;font-size:18px;line-height:1.55;margin:0 0 26px;max-width:520px}
.tx .ctas{display:flex;gap:12px;flex-wrap:wrap}.tx .b{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:15px 22px;font-weight:700;font-size:16px;text-decoration:none}
.tx .b.p{background:linear-gradient(90deg,#FF0088,#C8006A);color:#fff;box-shadow:0 10px 30px rgba(255,0,136,.35)}.tx .b.s{border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.05)}
.tx .st{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px}
.tx .st b{display:block;font:800 30px/1 Rubik;letter-spacing:-.02em}.tx .st span{font:500 12px 'IBM Plex Mono',monospace;color:#8C95A3;letter-spacing:.04em;text-transform:uppercase}
.tx .st div:nth-child(1) b{color:#00BBFF}.tx .st div:nth-child(2) b{color:#FF0088}.tx .st div:nth-child(3) b{color:#FFF200}
/* --- comparador --- */
.cmp{position:relative;min-width:0;user-select:none;-webkit-user-select:none}
.stage{position:relative;aspect-ratio:1/1;max-width:500px;margin:0 auto;border-radius:50%;touch-action:none;cursor:ew-resize}
.stage::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:conic-gradient(from 0deg,#00BBFF,#FF0088,#FFF200,#00BBFF);filter:blur(40px);opacity:.35;animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ring{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 30px 80px rgba(0,0,0,.6)}
.sd{position:absolute;inset:0;display:grid;place-items:center}
.sd img{width:86%;height:auto;pointer-events:none}
.bf{background:#fff}.af{background:repeating-conic-gradient(#F4F6F9 0 25%,#E2E6EC 0 50%) 0 0/24px 24px;clip-path:inset(0 0 0 var(--x))}
.line{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:linear-gradient(#00BBFF,#FF0088,#FFF200);box-shadow:0 0 16px rgba(255,0,136,.9)}
.knob{position:absolute;top:50%;left:var(--x);width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:#07090D;display:grid;place-items:center;font:800 13px 'IBM Plex Mono';box-shadow:0 0 0 6px rgba(255,255,255,.15),0 8px 24px rgba(0,0,0,.5);z-index:3}
.knob small{display:block;font-size:9px;color:#C8006A;margin-top:-2px}
.lb{position:absolute;top:13%;font:600 11px 'IBM Plex Mono';letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:999px;white-space:nowrap;z-index:4;transition:opacity .2s}
.lb.a{left:10%;background:#EAEEF2;color:#5A6371}.lb.d{right:10%;background:#00FF9C;color:#07090D}
.chips{display:flex;justify-content:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.chip{font:600 12px 'IBM Plex Mono';padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);color:#8C95A3;background:rgba(255,255,255,.04);transition:all .25s}
.chip.on{color:#07090D;background:#00FF9C;border-color:#00FF9C;box-shadow:0 0 18px rgba(0,255,156,.45)}
.ex{display:flex;justify-content:center;gap:8px;margin-top:14px}
.ex button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#C9CED6;border-radius:999px;padding:6px 12px;font:500 12px Rubik;cursor:pointer}
.ex button.on{background:#fff;color:#07090D;border-color:#fff}
.hint{text-align:center;font:500 11px 'IBM Plex Mono';color:#6B7380;margin-top:10px;letter-spacing:.04em}
@media(max-width:760px){.tx{padding:30px 16px 40px}.tx h1{font-size:52px!important}.tx-g{grid-template-columns:1fr;gap:28px}.tx .l{font-size:16px}.tx .st b{font-size:19px}.tx .st span{font-size:9.5px;letter-spacing:0}.km{display:none}.ctas .tx .b{flex:1;justify-content:center}.ov-m{background:rgba(7,9,13,.86)}.stage{max-width:330px}.lb{font-size:10px}}
@media(prefers-reduced-motion:reduce){.stage::before{animation:none}}

/* Beneficios dentro del banner (reemplazan Hasta 8x / 1 clic / Mismo día) y se oculta la franja de abajo */
.cd-trust2{display:none!important}
.tx .tx-ben{list-style:none;margin:34px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.tx .tx-ben li{display:flex;align-items:center;gap:10px;font:600 15px Rubik,system-ui,sans-serif;color:#E6EAF0}
.tx .tx-ben svg{flex:0 0 20px;width:20px;height:20px;fill:none;stroke:#00FF9C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tx--clean .tx-ben{border-top-color:#E3E6EB!important}
.tx--clean .tx-ben li{color:#111418!important}
.tx--clean .tx-ben svg{stroke:#FF0088!important}
@media(max-width:760px){.tx .tx-ben{gap:12px 14px;margin-top:26px}.tx .tx-ben li{font-size:13.5px}}

/* Datos flotando alrededor del comparador */
.tx .cmp{position:relative}
.tx .fl{position:absolute;z-index:5;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:14px;background:rgba(14,17,24,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.35);pointer-events:none;animation:flo 6s ease-in-out infinite}
.tx .fl b{font:800 22px/1 Rubik,system-ui,sans-serif;letter-spacing:-.02em}
.tx .fl span{font:500 10.5px IBM Plex Mono,monospace;letter-spacing:.06em;text-transform:uppercase;color:#A9B1BE}
.tx .fl1{top:4%;left:-4%}.tx .fl1 b{color:#00BBFF}
.tx .fl2{top:42%;right:-6%;animation-delay:-2s}.tx .fl2 b{color:#FF0088}
.tx .fl3{bottom:16%;left:-2%;animation-delay:-4s}.tx .fl3 b{color:#FFF200}
@keyframes flo{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.tx--clean .fl{background:rgba(255,255,255,.85)!important;border-color:#E3E6EB!important;box-shadow:0 12px 30px rgba(17,20,24,.10)!important}
.tx--clean .fl span{color:#7A828E!important}
.tx--clean .fl3 b{color:#111418!important}
@media(max-width:760px){.tx .fl{padding:7px 10px;border-radius:11px}.tx .fl b{font-size:16px}.tx .fl span{font-size:9px}.tx .fl1{top:0;left:0}.tx .fl2{top:44%;right:0}.tx .fl3{bottom:30%;left:0}}
@media(prefers-reduced-motion:reduce){.tx .fl{animation:none}}

/* Etiquetas ANTES / CON IA flotando, sobresaliendo del círculo */
.tx .lb{box-shadow:0 8px 20px rgba(0,0,0,.35);animation:flo 6s ease-in-out infinite}
.tx .lb.a{top:32%!important;left:-5%!important;right:auto!important;animation-delay:-3s}
.tx .lb.d{animation-delay:-1s}
@media(max-width:760px){.tx .lb.a{top:30%!important;left:-3%!important}}
@media(prefers-reduced-motion:reduce){.tx .lb{animation:none}}

/* Botones: Pruébalo ahora → DTF Textil / DTF UV */
.tx .ctl{font:600 12px IBM Plex Mono,monospace;letter-spacing:.12em;text-transform:uppercase;color:#00BBFF;margin:0 0 10px}
.tx .b.b2{background:linear-gradient(90deg,#00A3E0,#0077C8)!important;box-shadow:0 10px 30px rgba(0,163,224,.35)!important}
.tx--clean .ctl{color:#5A6371!important}
.tx--clean .b.b2{background:#fff!important;color:#111418!important;border:1.5px solid #111418!important;box-shadow:none!important;text-decoration:none!important}
@media(max-width:760px){.tx .ctas{flex-wrap:nowrap}.tx .ctas .b{flex:1;justify-content:center;padding:14px 10px}}

.tx.tx--clean .ctas .b.p.b2{background:#fff!important;color:#111418!important;border:1.5px solid #111418!important;box-shadow:none!important;text-decoration:none!important}

.tx .ctl{color:#FFF200!important}
.tx.tx--clean .ctl{color:#111418!important;background:#FFF200;display:inline-block;padding:3px 8px;border-radius:6px}

/* Transición suave del banner oscuro al resto de la página */
.tx{padding-bottom:150px!important}
.tx .tx-fade{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(246,247,249,0) 0%,rgba(246,247,249,.55) 55%,#F6F7F9 100%)}
.tx.tx--clean{padding-bottom:72px!important}.tx--clean .tx-fade{display:none}
@media(max-width:760px){.tx{padding-bottom:110px!important}.tx .tx-fade{height:160px}}

/* Desvanecido más largo */
.tx{padding-bottom:200px!important}
.tx .tx-fade{height:420px!important;background:linear-gradient(to bottom,rgba(246,247,249,0) 0%,rgba(246,247,249,.12) 30%,rgba(246,247,249,.45) 60%,rgba(246,247,249,.85) 85%,#F6F7F9 100%)!important}
@media(max-width:760px){.tx{padding-bottom:150px!important}.tx .tx-fade{height:320px!important}}
.tx.tx--clean{padding-bottom:72px!important}

/* ===== Corte diagonal (reemplaza el desvanecido) ===== */
.tx .tx-fade{display:none!important}
.tx{--cut:150px;padding-bottom:170px!important;background:transparent}
.tx .tx-vid,.tx .tx-ov,.tx::before{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%)}
.tx .tx-cut{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#00BBFF,#FF0088 50%,#FFF200);clip-path:polygon(0 100%,100% calc(100% - var(--cut)),100% calc(100% - var(--cut) + 6px),0 calc(100% + 6px))}
.tx--clean .tx-cut{display:none}
.tx.tx--clean{padding-bottom:72px!important}
@media(max-width:760px){
 .tx{--cut:0px;padding-bottom:40px!important}
 .tx .tx-vid,.tx .tx-ov,.tx::before{clip-path:polygon(0 0,100% 0,100% var(--yr,70%),0 var(--yl,80%))}
 .tx .tx-cut{clip-path:polygon(0 var(--yl,80%),100% var(--yr,70%),100% calc(var(--yr,70%) + 5px),0 calc(var(--yl,80%) + 5px))}
 .tx:not(.tx--clean) .chip{color:#5A6371!important;border-color:#DDE1E7!important;background:#fff!important}
 .tx:not(.tx--clean) .chip.on{color:#07090D!important;background:#00FF9C!important;border-color:#00FF9C!important}
}

@media(max-width:760px){.tx .stage::before{opacity:.18;filter:blur(30px)}.tx{padding-bottom:16px!important}.tx .ring{box-shadow:0 0 0 2px rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.25)!important}}

/* ===== Computadora: banner más bajo, el círculo sobresale del corte; sin franjas del encabezado ===== */
body:has(.tx:not(.tx--clean)) .cd-reg{display:none!important}
@media(min-width:761px){
 .tx:not(.tx--clean){--cl:40px;--cr:300px;padding-top:44px!important;padding-bottom:36px!important;min-height:0!important}
 .tx:not(.tx--clean) .tx-vid,.tx:not(.tx--clean) .tx-ov,.tx:not(.tx--clean)::before{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cr)),0 calc(100% - var(--cl)))}
 .tx:not(.tx--clean) .tx-cut{clip-path:polygon(0 calc(100% - var(--cl)),100% calc(100% - var(--cr)),100% calc(100% - var(--cr) + 6px),0 calc(100% - var(--cl) + 6px))}
 .tx:not(.tx--clean) .tx-k{margin-top:0}
 .tx:not(.tx--clean) h1{margin:14px 0 12px!important}
 .tx:not(.tx--clean) .chip{color:#5A6371!important;border-color:#DDE1E7!important;background:#fff!important}
 .tx:not(.tx--clean) .chip.on{color:#07090D!important;background:#00FF9C!important;border-color:#00FF9C!important}
 .tx:not(.tx--clean) .stage{max-width:470px}
}
@media(min-width:761px){
 .tx:not(.tx--clean){--cl:20px;--cr:190px;padding-bottom:96px!important;overflow:visible!important;margin-bottom:110px!important}
 .tx:not(.tx--clean) .cmp{transform:translateY(110px)}
}
@media(min-width:761px){
 .tx:not(.tx--clean){padding-top:40px!important;padding-bottom:70px!important;margin-bottom:150px!important}
 .tx:not(.tx--clean) .tx-g{align-items:start}
 .tx:not(.tx--clean) .tx-g > div:first-child{padding-top:28px}
 .tx:not(.tx--clean) .cmp{transform:translateY(40px)}
}
@media(min-width:761px){.tx:not(.tx--clean){margin-bottom:70px!important}}

/* «Sin suscripciones · Sin costo extra» destacado */
.tx .tx-free{display:flex;flex-wrap:wrap;gap:10px;margin:-10px 0 24px}
.tx .tx-free span{display:inline-flex;align-items:center;gap:8px;font:800 17px Rubik,system-ui,sans-serif;color:#07090D;background:#00FF9C;padding:9px 15px 9px 12px;border-radius:999px;box-shadow:0 0 22px rgba(0,255,156,.35)}
.tx .tx-free span::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#07090D;color:#00FF9C;font-size:12px}
.tx--clean .tx-free span{background:#111418!important;color:#fff!important;box-shadow:none!important}
.tx--clean .tx-free span::before{background:#00FF9C!important;color:#111418!important}
@media(max-width:760px){.tx .tx-free span{font-size:15px;padding:8px 13px 8px 10px}}
@media(max-width:760px){.tx .tx-free{gap:8px;flex-wrap:nowrap}.tx .tx-free span{font-size:13.5px;padding:8px 11px 8px 8px;gap:6px;white-space:nowrap}.tx .tx-free span::before{width:18px;height:18px;font-size:11px}}

/* ===== Jerarquía: título + botones primero ===== */
body:has(.tx:not(.tx--clean)) .cd-trust2{display:flex!important}
.tx .ctl{margin:6px 0 12px!important;font-size:13px!important}
.tx .ctas{gap:14px!important}
.tx .ctas .b{font-size:20px!important;padding:20px 30px!important;border-radius:16px!important}
.tx .ctas .b.p:not(.b2){box-shadow:0 14px 40px rgba(255,0,136,.5)!important}
.tx .ctas .b.b2{box-shadow:0 14px 40px rgba(0,163,224,.5)!important}
.tx .tx-free{margin:22px 0 10px!important;gap:16px!important}
.tx .tx-free span{background:none!important;box-shadow:none!important;color:#00FF9C!important;padding:0!important;font-size:15px!important;font-weight:700!important}
.tx .tx-free span::before{background:#00FF9C!important;color:#07090D!important}
.tx .l{font-size:15px!important;margin:0!important;max-width:470px!important;color:#8C95A3!important}
.tx--clean .tx-free span{color:#111418!important}
@media(max-width:760px){.tx .ctas .b{font-size:17px!important;padding:17px 10px!important}.tx .tx-free span{font-size:13.5px!important}}

.tx .tx-free span{color:#FFF200!important}
.tx .tx-free span::before{background:#FFF200!important;color:#07090D!important}
.tx--clean .tx-free span{color:#111418!important}

body:has(.tx:not(.tx--clean)) .cd-trust2{display:none!important}

/* Celular: que la sombra del círculo no se corte abajo */
@media(max-width:760px){.tx:not(.tx--clean){overflow:visible!important;overflow-x:clip!important;padding-bottom:56px!important}}
@media(max-width:760px){.tx:not(.tx--clean){padding-bottom:4px!important;margin-bottom:0!important}body:has(.tx:not(.tx--clean)) .cd-wrap > .cd-sec:first-of-type{margin-top:18px!important;padding-top:0!important}}
@media(max-width:760px){body:has(.tx:not(.tx--clean)) .cd-trust2 + .cd-sec{margin-top:14px!important}}
/* Rendimiento */
.tx-off .stage::before,.tx-off .fl,.tx-off .lb{animation-play-state:paused!important}
@media(max-width:760px){.tx .stage::before{animation:none!important}.tx .fl{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(14,17,24,.9)!important}.tx.tx-novid{background:transparent!important}.tx.tx-novid .tx-ov{background-color:#0B0E14}}

/* Sin video (modo rápido): fondo oscuro en la capa recortada también en computadora */
.tx.tx-novid{background:transparent!important}.tx.tx-novid .tx-ov{background-color:#0B0E14}