@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Montserrat:ital,wght@0,700;0,800;0,900;1,900&family=Allura&display=swap');
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,sans-serif;color:#fff;background:#01040a}body{min-height:100vh;overflow-x:hidden}
.cinema-bg{position:fixed;inset:0;background:url("../img/force-x-cinematic-bg.png") center center/cover no-repeat;z-index:0;transform:scale(1.02);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.055) translateY(-4px)}}.shade{position:fixed;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,3,9,.22),rgba(0,4,12,.40) 25%,rgba(0,4,12,.48) 50%,rgba(0,4,12,.40) 75%,rgba(0,3,9,.22)),linear-gradient(0deg,rgba(0,2,7,.68),transparent 38%,rgba(0,2,8,.32))}
.stars{position:fixed;inset:0;z-index:2;pointer-events:none;background-image:radial-gradient(circle,#48bfff 0 1px,transparent 1.5px);background-size:97px 91px;opacity:.12;animation:stars 8s linear infinite}@keyframes stars{to{background-position:97px 91px}}
.shell{position:relative;z-index:3;max-width:1120px;min-height:100vh;margin:auto;padding:36px 26px 24px;display:flex;flex-direction:column}
.header{text-align:center;text-shadow:0 5px 25px #000}.logo{text-decoration:none;font:italic 900 clamp(43px,6vw,74px)/.9 Montserrat;color:#f6f8fb;letter-spacing:-5px;filter:drop-shadow(0 0 14px rgba(20,158,255,.4))}.logo b{color:#0ca8ff;margin-left:8px;text-shadow:0 0 24px #008cff}.header p{font-size:10px;letter-spacing:8px;color:#9ed6ff;margin:12px 0 0}
.select{flex:1;display:flex;flex-direction:column;justify-content:center;padding:45px 0 30px}.kicker{text-align:center;font-size:13px;letter-spacing:4px;margin-bottom:19px;text-shadow:0 2px 12px #000}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:850px;width:100%;margin:auto}.card{display:block;text-decoration:none;color:#fff;border:1px solid #168eff;border-radius:16px;overflow:hidden;background:linear-gradient(150deg,rgba(2,8,18,.94),rgba(1,5,13,.97));box-shadow:0 0 0 1px rgba(47,192,255,.14) inset,0 0 20px rgba(0,137,255,.30),0 25px 55px rgba(0,0,0,.5);transition:.35s;backdrop-filter:blur(8px)}.card:hover{transform:translateY(-8px) scale(1.015);border-color:#54c8ff;box-shadow:0 0 30px rgba(0,169,255,.45),0 30px 70px #000}
.card-top{height:50px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(56,172,255,.15);background:rgba(4,12,24,.86)}.platform{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}.platform>span>b{color:#ffbd1c}.live{font-size:7px;color:#64e6b7;letter-spacing:.6px}.live i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#2ee59d;box-shadow:0 0 8px #2ee59d;margin-right:4px;animation:pulse 1.5s infinite}@keyframes pulse{50%{opacity:.35}}
.mt-icon{width:31px;height:26px;position:relative}.mt-icon i{position:absolute;width:13px;height:13px;border:2px solid #4caeff;border-radius:50%}.mt-icon i:nth-child(1){left:1px;top:2px}.mt-icon i:nth-child(2){right:1px;top:2px;border-color:#45d1a4}.mt-icon i:nth-child(3){left:9px;bottom:0;border-color:#8a72ff}.mt-icon b{position:absolute;right:-4px;bottom:-2px;color:#ffbd1c;font-size:10px}.tv svg{width:31px;fill:#fff}
.screen{height:200px;position:relative;overflow:hidden;background:rgba(1,7,15,.7)}.chart-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(49,147,217,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(49,147,217,.1) 1px,transparent 1px);background-size:34px 34px}.screen>svg{position:absolute;inset:20px 0 0;width:100%;height:160px}.screen>svg path{fill:none;stroke:#20aaff;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px #009dff)}
.candles{position:absolute;inset:35px 35px;display:flex;align-items:center;justify-content:space-around;opacity:.75}.candles i{width:6px;height:35px;background:#25d9a0;position:relative}.candles i:nth-child(2n){height:53px;background:#ed535f}.candles i:nth-child(3n){height:72px}.candles i:before{content:"";position:absolute;left:2px;top:-13px;width:1px;height:calc(100% + 26px);background:inherit}.buy{position:absolute;top:37px;right:22%;font-size:9px;background:#168c61;border:1px solid #4ce1ac;padding:5px 8px;border-radius:4px;box-shadow:0 0 13px rgba(55,220,167,.3)}
.robot{position:absolute;right:20px;bottom:15px;width:60px;height:73px;border:1px solid #168eff;border-radius:50% 50% 35% 35%;background:linear-gradient(145deg,#122c48,#030913);display:grid;place-items:center;font:900 18px Montserrat;color:#1eb1ff;box-shadow:0 0 25px rgba(0,145,255,.3)}.eye{position:absolute;width:18px;height:7px;border:1px solid #4fd4ff;border-radius:50%;box-shadow:0 0 10px #1cbcff}
.scanline{position:absolute;z-index:2;left:0;right:0;height:1px;background:#31c9ff;box-shadow:0 0 15px #31c9ff;animation:scan 3s ease-in-out infinite}@keyframes scan{0%,100%{top:12%}50%{top:88%}}.signal{position:absolute;left:18px;top:28px;background:rgba(2,15,25,.88);border:1px solid rgba(43,192,255,.4);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column}.signal span{font-size:7px;color:#9cb4c7}.signal b{font-size:10px;color:#7cf342;margin:4px 0}.signal small{font-size:6px;color:#67c7ff}.tf{position:absolute;right:13px;top:26px;display:flex;flex-direction:column;background:rgba(1,10,20,.9);border:1px solid rgba(40,155,230,.25);border-radius:5px;overflow:hidden}.tf i{font-style:normal;font-size:7px;padding:5px 7px;color:#8fa8bb;border-bottom:1px solid rgba(255,255,255,.04)}.tf i.on{color:#fff;background:#087fc2}
.card-body{text-align:left;padding:20px 26px 22px}.card-body>small{font-size:11px;letter-spacing:2px;color:#4b98c9}.card h2{font:italic 900 28px/.88 Montserrat;margin:8px 0 10px;letter-spacing:-1.5px}.card h2 em{color:#fff}.card h2 strong{color:#179fff}.card-body>p{font-size:9px;letter-spacing:2px;color:#b6d7ef;margin:0 0 20px}.button{height:43px;border:1px solid #29baff;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:1px;box-shadow:inset 0 0 20px rgba(0,141,255,.15),0 0 16px rgba(0,155,255,.2);transition:.3s}.button b{position:absolute;margin-left:245px;color:#42caff;font-size:20px}.card:hover .button{background:rgba(8,139,220,.13);box-shadow:inset 0 0 25px rgba(0,141,255,.25),0 0 24px rgba(0,155,255,.35)}.tags{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:17px;font-size:9px;letter-spacing:1.4px;color:#6495b7}.tags i{width:1px;height:8px;background:#34526a}
footer{text-align:center;padding-top:8px}.footer,a{ }.shell footer>a{color:#fff;text-decoration:none;font-size:14px;text-shadow:0 2px 8px #000}.ig{color:#ff4f9d;font-size:22px;vertical-align:-2px;margin-right:7px}.signature{font:400 28px Allura,cursive;margin-top:10px;text-shadow:0 2px 10px #000}.signature b{font-weight:400}
@media(max-width:760px){.cinema-bg{background-position:center center}.shade{background:rgba(0,4,12,.56)}.shell{padding:25px 15px}.header p{letter-spacing:4px;font-size:7px}.select{padding:38px 0 25px}.kicker{font-size:10px;letter-spacing:2.5px}.cards{grid-template-columns:1fr;max-width:430px;gap:22px}.screen{height:185px}.card h2{font-size:26px}.button b{margin-left:230px}footer{padding-top:20px}.shell footer>a{font-size:12px}}
@media(max-width:400px){.card-body{padding:18px}.button b{margin-left:200px}.screen{height:170px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.cinema-bg{transform:none}}


/* COMPOSICIÓN MÁS COMPACTA ALREDEDOR DE LOS PANELES */
@media (min-width:761px){
  .shell{padding-top:20px;padding-bottom:16px}
  .header{transform:translateY(48px);position:relative;z-index:5}
  .select{padding-top:72px;padding-bottom:8px}
  .kicker{margin-bottom:12px}
  footer{padding-top:0;margin-top:-2px;transform:translateY(-4px)}
  .signature{margin-top:5px}
}
@media (max-width:760px){
  .header{transform:translateY(18px)}
  .select{padding-top:48px;padding-bottom:10px}
  .kicker{margin-bottom:13px}
  footer{padding-top:8px;margin-top:0}
  .signature{margin-top:5px}
}