:root{--azul:#1a8cff;--azul-claro:#b9d9ff;--texto:#3a4250;--gris:#f1f2f6;--borde:#e6e8ef;--rosa1:#ffd7e0;--rosa2:#ffb3c7}
*{box-sizing:border-box;margin:0;padding:0;font-family:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{background:var(--gris);color:var(--texto);min-height:100vh}
button{font:inherit;cursor:pointer}
.oculto{display:none!important}
.vista{max-width:480px;margin:0 auto;min-height:100vh;position:relative;animation:aparece .25s ease}
@keyframes aparece{from{opacity:.4}to{opacity:1}}

/* Bienvenida */
.bienvenida{display:flex;flex-direction:column;align-items:center;padding:52px 0 32px;overflow:hidden;background:#f6f6f8}
.logo-grande{display:flex;align-items:center;gap:10px}
.marca{width:60px;height:60px}.marca.chica{width:22px;height:22px}
.logo-grande .txt{font-size:50px;font-weight:700;letter-spacing:-2px}
.gris{color:#6d6e72}.c1{color:#3ec1d3}.c2{color:#c6d63a}.c3{color:#f7b32b}.c4{color:#e63950}
.lema{font-size:22px;font-weight:700;color:#2b2f3a;margin-top:8px}
.mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:115%;margin:26px 0;flex:1;align-content:center}
.m{background:#fff;border-radius:22px;height:118px;box-shadow:0 6px 20px rgba(40,50,90,.06);display:flex;align-items:center;justify-content:center;font-size:50px;opacity:.75}
.m1{font-size:14px;letter-spacing:3px;color:#ddd;font-weight:700;height:70px;grid-column:span 2}.m2{height:70px;background:linear-gradient(135deg,#d9f1ff,#ffd6e8)}
.m3{background:linear-gradient(#9a9ca3,#4a4d58);opacity:.9}.m5 .marca{width:78px;height:78px}
.m8{background:linear-gradient(#f0a6e0,#fff)}
.botones{width:100%;padding:0 40px;display:flex;flex-direction:column;gap:14px}
.btn-azul{background:var(--azul);color:#fff;border:0;border-radius:30px;padding:14px;font-size:17px;font-weight:500;box-shadow:0 4px 10px rgba(26,140,255,.3);transition:transform .1s}
.btn-azul:active{transform:scale(.97)}
.btn-azul.ancho{width:100%}.btn-azul.chico{padding:10px 20px;font-size:14px}
.btn-borde{background:transparent;color:var(--azul);border:2px solid var(--azul);border-radius:30px;padding:12px;font-size:17px;font-weight:500}

/* Claro (login/registro) */
.claro{padding:16px 22px;display:flex;flex-direction:column;background:#f6f6f8}
.barra{display:flex;height:40px;margin-bottom:10px}
.icono{background:none;border:0;font-size:26px;color:#222}
.logo-chico{display:flex;align-items:center;gap:8px;font-size:26px;font-weight:700;letter-spacing:-1px;margin-bottom:26px}
.logo-chico .marca{width:34px;height:34px}
h1{font-size:25px;font-weight:600;color:#3a4250;margin-bottom:8px}h1.negro{color:#222}
.sub{font-size:16px;color:#4f5867;line-height:1.35;margin-bottom:18px}
form label{display:block;font-size:14px;margin-bottom:16px;color:#5a6270}
form input{display:block;width:100%;margin-top:7px;padding:14px 16px;border-radius:30px;border:1px solid var(--borde);font-size:16px;background:#fff;outline:0}
form input:focus{border-color:var(--azul)}
form .btn-azul{margin-top:6px}
.error{color:#d93838;font-size:13px;min-height:18px;margin-bottom:6px}
.link-p{margin-top:22px;font-size:15px}.link-p a{color:var(--azul);font-weight:700}
.centro{text-align:center}

/* App */
.app{padding-bottom:88px;background:#f1f2f6}
.cab-oscura{background:#0f1420;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#fff;position:sticky;top:0;z-index:5}
.cab-logo{display:flex;align-items:center;gap:7px;font-size:20px;font-weight:600}
.cab-icono{background:none;border:0;font-size:20px;filter:grayscale(1) brightness(3)}
.contenido{padding:18px 16px}.contenido.sin-pad{padding:0 0 10px}.pad{padding:0 16px}
.fondo-suave{min-height:calc(100vh - 58px);background:radial-gradient(circle at 12% 30%,#d4ddfb 0,transparent 42%),radial-gradient(circle at 92% 8%,#f7dcf6 0,transparent 46%),#f1f2f6}
.titulo{font-size:21px;font-weight:600;color:#3a4250;margin:14px 0 2px}.titulo.grande{font-size:24px;margin:16px 0 18px}

/* En vivo */
.envivo{background:#0f1420;color:#fff;padding:0 0 14px}
.envivo-img{height:170px;position:relative;overflow:hidden;background:#0f1420}
.video-vivo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.envivo-img .badge-uno{position:relative;z-index:2}
.badge-uno{background:#e63950;color:#fff;font-weight:800;font-size:12px;padding:4px 10px;border-radius:6px;margin:12px}
.envivo-info{padding:12px 16px 0}
.prog{font-size:20px;font-weight:700}
.pin-vivo{color:#ff4d6a;font-weight:700}
.accesos{display:flex;justify-content:space-around;background:#fff;margin:-10px 12px 0;border-radius:18px;padding:14px 4px;box-shadow:0 6px 18px rgba(40,50,90,.1);position:relative}
.accesos button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:#3a4250;font-weight:500}
.accesos span{font-size:26px}
.shop-banner{display:flex;justify-content:space-between;align-items:center;margin:16px 12px 0;background:linear-gradient(100deg,#e9edf5,#d7deea);border-radius:14px;padding:14px 16px;cursor:pointer}
.st-marca{font-size:12px;color:#5a6270;font-weight:600}.shop-banner h3{font-size:24px}.shop-banner h3 b{color:#c6d63a;-webkit-text-stroke:.5px #8a9a2a}
.btn-verde{display:inline-block;background:#6abf2a;color:#fff;border-radius:16px;padding:6px 16px;font-size:13px;font-weight:600;margin-top:8px}
.shop-foto{flex:0 0 auto;line-height:0}

/* Promos */
.carrusel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:6px 0 0;padding:4px 16px 16px}
.promo{flex:0 0 82%;scroll-snap-align:start;border-radius:14px;color:#fff;padding:26px 18px 14px;text-align:center;min-height:320px;display:flex;flex-direction:column;align-items:center}
.p1{background:linear-gradient(135deg,#5a3fd6,#3a1c8f)}.p2{background:linear-gradient(135deg,#7a2a9e,#38145f)}
.promo h3{font-size:25px;font-weight:700;line-height:1.1}.promo h3 b{color:#c9b8ff;font-size:27px}.promo .rosa{color:#ff4fb3}
.apps{border:2px solid #9d8cff;border-radius:12px;margin:22px 0 16px;padding:20px 10px 12px;width:100%;position:relative}
.etq{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#fff;color:#4a3fd6;border-radius:12px;padding:2px 16px;font-size:15px;font-weight:700;white-space:nowrap}
.logos{display:flex;justify-content:center;gap:10px}
.lg{width:68px;height:62px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800}
.nf{background:#fff;color:#e50914;font-size:14px;letter-spacing:-.5px}.dp{background:linear-gradient(#0b2a5c,#1b4a8c);color:#fff;font-family:Georgia,serif;font-style:italic;font-size:15px}.atv{background:#111;color:#fff;font-size:19px}.atv small{font-size:10px;margin-right:2px}
.precio{margin:6px 0}.precio b{font-size:31px}
.btn-cel{background:#1aa0ff;color:#fff;border:0;border-radius:24px;padding:10px 38px;font-size:15px;margin-top:8px}
.nota{font-size:9px;opacity:.7;margin-top:auto;padding-top:10px}
.banner{display:flex;align-items:center;gap:16px;border-radius:12px;padding:16px;color:#fff;font-size:17px;margin-top:14px;cursor:pointer}
.banner b{font-size:21px;color:#ffd23d}.b1{background:linear-gradient(90deg,#4a148c,#7b1fa2)}.b2{background:linear-gradient(90deg,#1a8cff,#2fc3ff)}.b2 b{color:#fff}
.cara{font-size:44px}

/* Saldos y pagos */
.claro-barra{margin:0 0 6px}
.plan-card{background:#ffe9ef}
.plan-top{display:flex;justify-content:space-between;align-items:flex-start}
.plan-top b{font-size:18px}.monto{font-size:30px;font-weight:700}
.desplegable{background:#fff;border:0;border-radius:18px;color:var(--azul);font-weight:600;padding:8px 16px;margin-top:14px;font-size:14px}
.fila-total{display:flex;justify-content:space-between;font-size:15px;margin-bottom:6px}.fila-total b{font-size:20px}
.btn-pagar{width:100%;background:var(--azul-claro);color:#fff;border:0;border-radius:24px;padding:13px;font-size:16px;font-weight:600;margin-top:14px}

/* Tarjetas / listas */
.tarjeta{background:#fff;border-radius:22px;padding:16px;box-shadow:0 4px 16px rgba(40,50,90,.08);margin-bottom:14px}
.tarjeta.centro{text-align:center}.tarjeta.centro .sub{margin-bottom:14px}
.mini{font-size:12px;color:#6b7180}
.lista{padding:2px 16px}
.lista button{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;border-bottom:1px solid #eee;padding:18px 0;text-align:left;font-size:16px;font-weight:500;color:#2b2f3a}
.lista button:last-child{border-bottom:0}
.ico-ayuda{position:relative;font-size:26px;filter:grayscale(1);flex-shrink:0}
.ico-ayuda i{position:absolute;left:-6px;bottom:-4px;background:#222;color:#fff;border-radius:50%;width:16px;height:16px;font-size:11px;font-style:normal;display:flex;align-items:center;justify-content:center}
.flecha{margin-left:auto;font-size:24px;color:#aaa}
.paquete{display:flex;justify-content:space-between;align-items:center}.paquete h3{font-size:17px}.paquete .p{font-size:22px;font-weight:700;color:var(--azul)}

/* Cuenta usuario */
.cab-cuenta{background:linear-gradient(160deg,var(--rosa1),var(--rosa2));padding:24px 16px 46px;text-align:center;border-radius:0 0 26px 26px}
.avatar{width:92px;height:92px;border-radius:50%;background:#7a4a4a;display:flex;align-items:center;justify-content:center;font-size:48px;margin:6px auto 10px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.cab-cuenta h2{font-size:26px;color:#2b2f3a}
.gemas{display:inline-block;background:rgba(255,255,255,.5);border-radius:14px;padding:3px 14px;font-size:12px;margin-top:8px;color:#8a5a66}
.cta-card{background:#fff;border-radius:14px;padding:12px;margin:16px 8px 0;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.cuenta-cuerpo{margin-top:-26px}
.seccion{font-size:16px;color:#3a4250;margin:4px 4px 10px;font-weight:700}

/* Tabs */
.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#f9fafc;border-top:1px solid #e3e5ea;display:flex;padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:6}
.tabs button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:15px;color:#3a4250;position:relative}
.tabs svg{width:28px;height:28px;fill:none;stroke:#3a4250;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.tabs .activa{font-weight:700}.tabs .activa svg path:first-child{fill:#3a4250}
.tabs .activa::before{content:"";position:absolute;top:-9px;width:54%;height:4px;border-radius:3px;background:#2b3245}

/* Modal / toast */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.caja{background:#fff;width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));animation:sube .25s ease}
@keyframes sube{from{transform:translateY(40px)}to{transform:translateY(0)}}
.caja h3{margin-bottom:12px}#m-cuerpo{margin-bottom:16px;font-size:15px;line-height:1.5}
#m-cuerpo table{width:100%;border-collapse:collapse}#m-cuerpo td{padding:7px 0;border-bottom:1px solid #eee}#m-cuerpo td:first-child{color:#888}
.ok{color:#1a9b4b;font-weight:700}
.toast{position:fixed;bottom:104px;left:50%;transform:translateX(-50%);background:#2b2f3a;color:#fff;padding:11px 18px;border-radius:20px;font-size:14px;z-index:30;max-width:90%;text-align:center}

/* Hoja "¿Qué cubre tu pago?" */
.tabs-per{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px}
.tab-per{flex:0 0 auto;background:#f1f2f6;border:0;border-radius:18px;padding:8px 16px;font-size:14px;color:#6b7180;font-weight:600}
.tab-per.activa{background:#2b2f3a;color:#fff}
.fila-res{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #eee;font-size:15px;color:#3a4250}
.fila-res b{font-size:15px}
.btn-borde-azul{width:100%;background:#fff;color:var(--azul);border:1.5px solid var(--azul);border-radius:24px;padding:13px;font-size:16px;font-weight:600;margin-top:18px}

/* Inicio adaptado a la referencia móvil. */
#p-inicio{background:#10100e;color:#fff;position:relative}
#p-inicio .cab-oscura{position:absolute;top:0;left:0;width:100%;height:80px;padding:18px 24px 10px;background:linear-gradient(#0007,transparent);z-index:4}
.cab-logo{font-size:23px;letter-spacing:-.7px;gap:6px}.cab-logo .marca{filter:grayscale(1) brightness(0) invert(1);width:28px;height:31px}
.cab-icono{filter:none;color:white;width:30px;height:34px;display:grid;place-items:center}.cab-icono svg{width:28px;height:28px}
.envivo{height:clamp(310px,81vw,390px);position:relative;padding:0;background:#18251e;overflow:hidden}
.envivo-img{position:absolute;inset:0;height:100%}.video-vivo{object-position:50% 48%;transform:scale(1.03)}
.hero-sombra{position:absolute;inset:0;background:linear-gradient(180deg,#0003 0%,transparent 25%,#0004 52%,#000c 100%);pointer-events:none}
.envivo-info{position:absolute;bottom:40px;left:25px;right:24px;padding:0}.canal-demo{display:block;font-size:11px;font-weight:600;letter-spacing:3px;margin-bottom:22px}.canal-demo b{font-size:25px;display:block;letter-spacing:-1px;color:#fff}
.prog{font-size:clamp(23px,6.1vw,30px);font-weight:700;line-height:1.25;letter-spacing:-.7px;margin-bottom:12px}
.emision{display:flex;align-items:center;gap:8px;font-size:clamp(10px,2.7vw,13px);font-weight:500}.pin-vivo{display:inline-flex;align-items:center;gap:7px;background:#e51b25;color:white;border-radius:8px;padding:9px 10px;font-size:12px;white-space:nowrap}.pin-vivo i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffffff30}
.hero-control,.hero-play{position:absolute;right:24px;bottom:82px;width:43px;height:43px;border:1px solid #ffffff50;border-radius:50%;background:#14151a66;color:white;display:grid;place-items:center;z-index:3}.hero-control svg,.hero-play svg{width:24px;height:24px}.hero-play{left:calc(50% - 24px);bottom:50%;width:48px;height:48px}.hero-play[hidden]{display:none}
.hero-indice{position:absolute;bottom:42px;right:25px;font-size:12px;border:1px solid #ffffff40;background:#0007;padding:3px 15px;border-radius:20px}
.accesos{margin:0 25px;transform:translateY(-1px);padding:15px 3px 13px;border:1px solid #8b896b;border-radius:22px;background:linear-gradient(120deg,#282a15ee,#343322e8);box-shadow:0 10px 25px #0003;z-index:2;gap:0}
.accesos button{width:20%;min-width:0;gap:10px;color:#fff;font-weight:500;font-size:14px}.accesos .acceso-icono{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#fff;border-radius:19px;color:#4c5668;box-shadow:0 2px 3px #0002}.acceso-icono svg{width:53%;height:60%}.accesos .acceso-nombre{font-size:clamp(11px,3.3vw,16px)}
.shop-banner.foto-real{display:block;position:relative;width:100%;aspect-ratio:736/486;margin:0;border:0;border-radius:0;padding:0;overflow:hidden;background:#34342c;box-shadow:none}
.foto-real img{position:absolute;width:100%;height:auto;max-width:none;left:0;top:0;transform:translateY(-56.1%);pointer-events:none}
.banner-dots{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;gap:5px;background:#0003;padding:4px 9px;border-radius:12px}.banner-dots i{width:5px;height:5px;background:#ffffff80;border-radius:50%}.banner-dots i:first-child{background:#fff}
#p-inicio>.contenido>.pad,#p-inicio .carrusel{background:#f1f2f6;color:#3a4250}#p-inicio>.contenido>.pad{padding-top:22px;padding-bottom:10px}#p-inicio .carrusel{padding-top:8px;padding-bottom:20px}.contenido.sin-pad{padding-bottom:0}
.tabs{background:linear-gradient(#f3f3f6,#e7f0f8);padding:12px 0 calc(14px + env(safe-area-inset-bottom));border-top:0;box-shadow:0 -3px 18px #00000008}.tabs button{gap:7px;font-size:clamp(14px,4vw,19px);font-weight:400}.tabs svg{width:31px;height:31px;stroke-width:1.5}.tabs .activa{font-weight:600}.tabs .activa::before{top:-12px;height:3px;width:52%}.tabs .activa:not([data-tab="inicio"]) svg path:first-child{fill:none}.nav-avatar{width:33px;height:33px;display:grid;place-items:center;background:radial-gradient(circle at 35% 20%,#df9b9b,#a93440 48%,#4b101c);border-radius:50%;color:#ffe1d8;border:2px solid #fff}.nav-avatar svg{width:24px;height:24px;stroke:currentColor}
button:focus-visible,a:focus-visible{outline:3px solid #2999ff;outline-offset:3px}
@media(min-width:600px){body{background:#161b25}.app{box-shadow:0 0 80px #0005}}
@media(prefers-reduced-motion:reduce){.vista{animation:none}.video-vivo{transform:none}}