/* ============ Screenshots: simulación animada de la app de TV ============ */
.ss-page { padding-top: 64px; padding-bottom: 96px; }
.ss-page h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 900; margin: 6px 0 10px; }

/* Plataformas: marcas en blanco sobre una franja oscura */
.ss-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 8px 0 34px; padding: 16px 24px; border-radius: 18px; background: #0b0e13; border: 1px solid rgba(213,220,230,.16); }
.ss-plat-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8fa0b3; }
.ss-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.ss-logo svg { width: 26px; height: 26px; fill: #fff; }
.ss-logo b { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.ss-plat-note { color: #8fa0b3; font-size: 13px; margin-left: auto; }

/* Televisor */
.ss-tv-wrap { max-width: 1040px; margin: 0 auto; }
.ss-tv { filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }
.ss-bezel { position: relative; background: #0b0e13; border-radius: 22px; padding: 10px; border: 1px solid rgba(213,220,230,.16); box-shadow: inset 0 0 0 2px #05070a; }
.ss-stage-fit { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #070707; }
.ss-stage { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #fff; }
.ss-stand { width: 22%; height: 16px; margin: 0 auto; background: linear-gradient(#1a2029, #0b0e13); border-radius: 0 0 14px 14px; }
.ss-progress { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; background: rgba(255,255,255,.08); border-radius: 0 0 12px 12px; overflow: hidden; }
.ss-progress i { display: block; height: 100%; width: 0; background: var(--sky); }

/* Pantallas */
.scr { position: absolute; inset: 0; display: none; overflow: hidden; background: #070707; }
.scr.on { display: block; animation: scrIn .5s ease both; }
@keyframes scrIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
.scr .bg { position: absolute; inset: 0; background: #060b14 url(/img/tv-bg.jpg) center / cover no-repeat; }
.scr .bg-soft { opacity: .55; filter: blur(2px) saturate(1.2); }
.ic-btn { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,.09); border: 1px solid rgba(213,220,230,.18); font-size: 20px; color: #fff; }
.ic-btn svg { width: 22px; height: 22px; }

/* ---- 1. INICIO ---- */
.h-top { position: absolute; left: 24px; right: 24px; top: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.h-logo { height: 38px; }
.h-btns { display: flex; gap: 10px; }
.h-cards { position: absolute; left: 22px; right: 22px; top: 76px; bottom: 28px; display: flex; gap: 14px; z-index: 2; }
.h-card { position: relative; flex: 1; border-radius: 20px; background: linear-gradient(180deg, var(--a), var(--b)); border: 1px solid rgba(213,220,230,.22); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 0 12px 16px; box-shadow: 0 10px 26px rgba(0,0,0,.5); animation: hFocus 7s infinite; animation-delay: calc(var(--i) * 1.3s); }
.h-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,10,20,.05) 0%, rgba(4,10,20,.62) 45%, #040a14 78%); pointer-events: none; }
.h-card > * { position: relative; z-index: 1; }
.h-art { position: absolute !important; inset: 0 0 38% 0; z-index: 0 !important; opacity: .85; background-size: 200% 200%; animation: artMove 7s ease-in-out infinite; }
.h-art-live { background: radial-gradient(circle at 70% 30%, #f472b6, transparent 45%), radial-gradient(circle at 25% 70%, #6366f1, transparent 50%), linear-gradient(135deg, #1e1b4b, #581c87); }
.h-art-a { background: radial-gradient(circle at 30% 30%, #fb7185, transparent 50%), linear-gradient(135deg, #7f1d1d, #1e1b4b); }
.h-art-b { background: radial-gradient(circle at 60% 35%, #34d399, transparent 50%), linear-gradient(135deg, #064e3b, #0c4a6e); }
.h-art-c { background: radial-gradient(circle at 40% 30%, #fbbf24, transparent 50%), linear-gradient(135deg, #78350f, #1e293b); }
.h-art-d { background: radial-gradient(circle at 55% 35%, #c084fc, transparent 50%), linear-gradient(135deg, #3b0764, #1e1b4b); }
@keyframes artMove { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
.h-ico { width: 38px; height: 38px; color: #fff; margin-bottom: 8px; filter: drop-shadow(0 0 10px rgba(39,187,245,.6)); }
.h-card b { font-size: 22px; font-weight: 800; }
.h-card small { font-size: 11.5px; line-height: 1.35; opacity: .85; margin: 6px 0 10px; max-width: 150px; }
.h-btn { display: inline-block; width: 100%; padding: 10px 0; border-radius: 12px; background: #b6f23a; color: #0a0f1a; font-weight: 800; font-size: 14px; }
.h-prog { display: block; width: 100%; height: 4px; background: #2a3550; border-radius: 2px; margin: -2px 0 10px; }
.h-prog i { display: block; height: 100%; width: 62%; background: #27bbf5; border-radius: 2px; }
.h-card::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(224,244,255,.30), transparent); transform: skewX(-20deg); z-index: 2; animation: hShine 7s infinite; animation-delay: calc(var(--i) * 1.3s); }
@keyframes hFocus { 0%, 17% { transform: scale(1.04); box-shadow: 0 0 0 1px rgba(39,187,245,.30), 0 0 34px 6px rgba(39,187,245,.34); } 22%, 100% { transform: none; box-shadow: 0 10px 26px rgba(0,0,0,.5); } }
@keyframes hShine { 0% { left: -60%; opacity: 1; } 12% { left: 120%; opacity: 1; } 13%, 100% { left: 120%; opacity: 0; } }

/* ---- 2. CATEGORÍAS ---- */
.c-title { position: absolute; top: 92px; left: 0; right: 0; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 5px; z-index: 2; }
.c-view { position: absolute; left: 0; right: 0; top: 150px; height: 190px; overflow: hidden; z-index: 2; }
.c-strip { position: absolute; left: 375px; top: 20px; display: flex; gap: 16px; animation: cStrip 7s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes cStrip { 0%, 14% { transform: translateX(0); } 20%, 34% { transform: translateX(-226px); } 40%, 54% { transform: translateX(-452px); } 60%, 74% { transform: translateX(-678px); } 80%, 94% { transform: translateX(-904px); } 100% { transform: translateX(-904px); } }
.c-card { flex: 0 0 210px; height: 150px; border-radius: 14px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-weight: 700; font-size: 17px; background: rgba(8,12,18,.9); border: 1px solid rgba(213,220,230,.14); color: #dfe6ee; opacity: .62; transform: scale(.86); animation: cHl 7s infinite; animation-delay: calc(var(--i) * 1.4s); }
.c-card:nth-child(n+6) { animation: none; }
@keyframes cHl { 0%, 17% { transform: scale(1); opacity: 1; background: linear-gradient(135deg, #27d3f5, #4f5fe8); box-shadow: 0 0 40px 4px rgba(39,187,245,.40); color: #fff; } 22%, 100% { transform: scale(.86); opacity: .62; } }
.c-count { position: absolute; top: 354px; left: 0; right: 0; text-align: center; font-size: 14px; color: #c9d4e0; z-index: 2; }
.c-n { display: inline-block; position: relative; width: 12px; height: 18px; vertical-align: bottom; overflow: hidden; }
.c-n i { position: absolute; left: 0; font-style: normal; opacity: 0; animation: cN 7s infinite; }
.c-n i:nth-child(1) { animation-delay: 0s; } .c-n i:nth-child(2) { animation-delay: 1.4s; } .c-n i:nth-child(3) { animation-delay: 2.8s; } .c-n i:nth-child(4) { animation-delay: 4.2s; } .c-n i:nth-child(5) { animation-delay: 5.6s; }
@keyframes cN { 0%, 19% { opacity: 1; } 20%, 100% { opacity: 0; } }
.c-fav { position: absolute; top: 396px; left: 0; right: 0; display: flex; justify-content: center; gap: 14px; z-index: 2; }
.c-fav span { padding: 11px 22px; border-radius: 12px; background: rgba(6,12,22,.72); border: 1px solid rgba(213,220,230,.2); font-size: 14px; font-weight: 600; }
.c-hint { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 12px; color: #8fa0b3; z-index: 2; }

/* ---- 3. TV EN VIVO ---- */
.ss-s-live { background: #070707; }
.l-head, .m-head { position: absolute; left: 20px; right: 20px; top: 14px; display: flex; align-items: center; justify-content: space-between; }
.l-cat { display: inline-flex; align-items: baseline; gap: 12px; padding: 9px 18px; border-radius: 12px; background: #111; border: 1px solid rgba(213,220,230,.18); font-weight: 700; font-size: 17px; }
.l-cat small { font-size: 12px; color: #7d8794; font-weight: 500; }
.l-search { padding: 10px 16px; border-radius: 10px; background: #131313; color: #7d8794; font-size: 13px; min-width: 220px; }
.l-body { position: absolute; left: 20px; right: 20px; top: 76px; bottom: 22px; display: flex; gap: 18px; }
.l-list { width: 36%; background: #0b0e11; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.l-t { font-size: 14px; letter-spacing: 1.5px; color: #0090be; font-weight: 800; margin: 0 0 2px 4px; }
.l-row { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 10px; border-radius: 10px; background: #021a27; animation: lRow 7s infinite; animation-delay: calc(var(--i) * 2.33s); }
.l-row:nth-of-type(n+4) { animation: none; }
.l-row i { flex: 0 0 48px; height: 48px; border-radius: 4px; background: var(--c); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 15px; border: 1px solid rgba(255,255,255,.3); }
.l-row span { font-size: 15px; font-weight: 600; display: flex; flex-direction: column; }
.l-row small { color: #0090be; font-size: 11px; margin-top: 2px; font-weight: 500; }
@keyframes lRow { 0%, 31% { background: #00428a; } 34%, 100% { background: #021a27; } }
.l-right { flex: 1; display: flex; flex-direction: column; }
.l-prev { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #080808; border: 1px solid #1a1a1a; }
.l-v { position: absolute; inset: 0; background-size: 220% 220%; animation: lV 7s infinite, artMove 5s ease-in-out infinite; opacity: 0; }
.l-v0 { background-image: radial-gradient(circle at 30% 40%, #f43f5e 0, transparent 38%), radial-gradient(circle at 75% 60%, #2563eb 0, transparent 40%), linear-gradient(135deg, #111827, #1e1b4b); }
.l-v1 { background-image: radial-gradient(circle at 65% 40%, #22c55e 0, transparent 38%), radial-gradient(circle at 25% 70%, #f59e0b 0, transparent 40%), linear-gradient(135deg, #052e16, #0f172a); animation-delay: 2.33s, 0s; }
.l-v2 { background-image: radial-gradient(circle at 40% 35%, #a855f7 0, transparent 38%), radial-gradient(circle at 70% 70%, #06b6d4 0, transparent 40%), linear-gradient(135deg, #1e1b4b, #082f49); animation-delay: 4.66s, 0s; }
@keyframes lV { 0%, 31% { opacity: 1; } 34%, 100% { opacity: 0; } }
.l-live { position: absolute; left: 10px; top: 10px; background: #e11d48; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.l-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: rgba(0,0,0,.65); display: flex; align-items: center; padding: 0 12px; gap: 8px; font-size: 13px; font-weight: 600; }
.l-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.l-nm { position: absolute; left: 30px; opacity: 0; animation: lV 7s infinite; }
.l-nm1 { animation-delay: 2.33s; } .l-nm2 { animation-delay: 4.66s; }
.l-bar em { margin-left: auto; font-style: normal; font-size: 11px; color: #9aa7b4; font-weight: 400; }
.l-guide { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.l-glogo { width: 60px; height: 60px; border-radius: 4px; background: #006df7; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 1px solid rgba(255,255,255,.3); }
.l-guide small { display: block; font-size: 10.5px; letter-spacing: 1px; color: #0090be; font-weight: 800; }
.l-guide b { font-size: 18px; }

/* ---- 4. PELÍCULAS ---- */
.m-grid { position: absolute; left: 22px; right: 22px; top: 78px; bottom: 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.m-card { position: relative; border-radius: 12px; background: linear-gradient(160deg, var(--a), var(--b)); overflow: hidden; display: flex; align-items: flex-end; padding: 10px; animation: mFocus 7s infinite; animation-delay: calc(var(--i) * .7s); }
.m-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7)); }
.m-card em { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.65); padding: 3px 8px; border-radius: 6px; font-size: 12px; font-style: normal; font-weight: 700; color: #fbbf24; }
.m-card b { position: relative; font-size: 13px; font-weight: 600; }
@keyframes mFocus { 0%, 8% { box-shadow: 0 0 0 1.5px rgba(39,187,245,.7), 0 0 26px 3px rgba(39,187,245,.35); filter: brightness(1.15); } 11%, 100% { box-shadow: none; filter: none; } }

/* ---- 5. SERIES ---- */
.d-left { position: absolute; left: 22px; top: 20px; width: 190px; z-index: 2; }
.d-poster { height: 270px; border-radius: 12px; background: linear-gradient(160deg, #f59e0b, #7c2d12 55%, #1c1917); position: relative; overflow: hidden; }
.d-poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.28), transparent 45%); }
.d-left b { display: block; font-size: 17px; margin-top: 14px; }
.d-left small { color: #fbbf24; font-size: 12px; }
.d-fav { display: block; margin-top: 12px; padding: 9px; text-align: center; border-radius: 10px; border: 1px solid rgba(213,220,230,.2); background: rgba(6,12,22,.7); color: #f87171; font-size: 13px; font-weight: 600; }
.d-right { position: absolute; left: 240px; right: 22px; top: 22px; z-index: 2; }
.d-h { display: block; font-size: 16px; margin: 0 0 8px; }
.d-seasons { display: flex; gap: 10px; margin-bottom: 18px; }
.d-seasons span { padding: 9px 18px; border-radius: 10px; border: 1px solid rgba(213,220,230,.18); background: rgba(6,12,22,.7); font-size: 13px; font-weight: 600; }
.d-seasons .on { color: #34d399; border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.14); }
.d-ep { display: flex; gap: 14px; align-items: center; height: 82px; margin-bottom: 10px; border-radius: 12px; background: rgba(20,22,26,.92); overflow: hidden; animation: dEp 7s infinite; animation-delay: calc(var(--i) * 1.7s); }
.d-ep i { flex: 0 0 140px; height: 100%; background: linear-gradient(135deg, var(--a), #111827); display: flex; align-items: center; justify-content: center; }
.d-ep u { text-decoration: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.d-ep span { font-weight: 600; font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.d-ep small { color: #7d8794; font-size: 12px; font-weight: 400; }
@keyframes dEp { 0%, 22% { background: rgba(16,185,129,.16); box-shadow: inset 0 0 0 1px rgba(16,185,129,.5); } 26%, 100% { background: rgba(20,22,26,.92); box-shadow: none; } }

/* ---- 6. BUSCADOR ---- */
.ss-s-search { background: linear-gradient(135deg, #0a0a0a, #14142a 50%, #0a0a0a); }
.q-left { position: absolute; left: 0; top: 0; bottom: 0; width: 320px; padding: 26px 20px; border-right: 1px solid #222; }
.q-back { display: block; padding: 14px 18px; border-radius: 12px; background: #151515; font-weight: 600; font-size: 15px; }
.q-box { margin-top: 20px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(39,187,245,.55); background: rgba(10,20,40,.7); font-size: 18px; color: #27bbf5; display: flex; align-items: center; gap: 10px; }
.q-txt { color: #fff; display: inline-flex; }
.q-txt i { font-style: normal; opacity: 0; animation: qT 7s infinite; }
.q-txt i:nth-child(1) { animation-delay: .8s; } .q-txt i:nth-child(2) { animation-delay: 1.6s; } .q-txt i:nth-child(3) { animation-delay: 2.4s; } .q-txt i:nth-child(4) { animation-delay: 3.2s; }
@keyframes qT { 0% { opacity: 0; } 2%, 94% { opacity: 1; } 100% { opacity: 0; } }
.q-box em { width: 2px; height: 20px; background: #27bbf5; margin-left: -6px; animation: blink 1s infinite; }
.q-kb { margin-top: 18px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.q-kb span { height: 40px; border-radius: 9px; background: #1a1a1a; border: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.q-kb .q-k, .q-kb .q-i, .q-kb .q-w, .q-kb .q-o { animation: qKey 7s infinite; }
.q-kb .q-k { animation-delay: .6s; } .q-kb .q-i { animation-delay: 1.4s; } .q-kb .q-w { animation-delay: 2.2s; } .q-kb .q-o { animation-delay: 3s; }
@keyframes qKey { 0%, 5% { background: rgba(39,187,245,.35); border-color: rgba(39,187,245,.6); } 9%, 100% { background: #1a1a1a; border-color: #2a2a2a; } }
.q-right { position: absolute; left: 345px; right: 22px; top: 24px; }
.q-h { display: block; font-size: 22px; margin-bottom: 16px; }
.q-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.q-r { position: relative; height: 270px; border-radius: 12px; background: linear-gradient(160deg, var(--a), var(--b)); display: flex; align-items: flex-end; padding: 12px; opacity: 0; transform: translateY(18px); animation: qR 7s infinite; animation-delay: calc(3.4s + var(--i) * .25s); }
.q-r u { position: absolute; left: 8px; top: 8px; text-decoration: none; background: #7c3aed; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 800; }
.q-r u.s { background: #059669; }
.q-r b { font-size: 14px; font-weight: 600; }
@keyframes qR { 0% { opacity: 0; transform: translateY(18px); } 6%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---- 7. CONFIGURACIÓN ---- */
.g-head { position: absolute; left: 24px; right: 24px; top: 0; height: 74px; display: flex; align-items: center; gap: 14px; background: rgba(4,10,20,.55); border-bottom: 1px solid rgba(213,220,230,.14); margin: 0 -24px; padding: 0 24px; z-index: 2; font-size: 21px; }
.g-body { position: absolute; left: 24px; right: 24px; top: 92px; bottom: 20px; display: flex; gap: 22px; z-index: 2; }
.g-left { width: 250px; display: flex; flex-direction: column; gap: 14px; }
.g-user, .g-qr { border-radius: 18px; background: rgba(6,12,22,.72); border: 1px solid rgba(213,220,230,.18); padding: 14px; }
.g-user b, .g-qr b { display: block; font-size: 14px; margin-bottom: 10px; }
.g-user p { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 11px; color: #8fa0b3; }
.g-user em { font-style: normal; color: #27bbf5; font-weight: 700; font-size: 13px; }
.g-user em.ok { color: #34d399; }
.g-qr { text-align: center; }
.ss-qr { display: block; width: 104px; height: 104px; margin: 0 auto 10px; border-radius: 8px; background: #fff; background-image: linear-gradient(90deg, #000 50%, transparent 50%), linear-gradient(#000 50%, transparent 50%); background-size: 12px 12px; background-blend-mode: normal; box-shadow: inset 0 0 0 8px #fff; }
.g-qr span { display: inline-block; padding: 3px 12px; border-radius: 8px; background: rgba(39,187,245,.85); font-size: 11px; font-weight: 700; }
.g-right { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.g-right small { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: #8fa0b3; }
.g-themes { display: flex; gap: 12px; margin-bottom: 8px; }
.g-themes span { flex: 1; height: 80px; border-radius: 16px; background: rgba(6,12,22,.72); border: 1px solid rgba(213,220,230,.16); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.g-themes .sel { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.45); color: #34d399; }
.g-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.g-acts span { height: 96px; border-radius: 16px; background: rgba(6,12,22,.72); border: 1px solid rgba(213,220,230,.16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; animation: gFocus 7s infinite; animation-delay: calc(var(--i) * 1.1s); }
.g-acts i { width: 36px; height: 36px; border-radius: 50%; background: rgba(39,187,245,.12); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 16px; }
.g-acts .d { color: #f87171; }
@keyframes gFocus { 0%, 13% { background: rgba(39,187,245,.20); border-color: rgba(39,187,245,.55); } 17%, 100% { background: rgba(6,12,22,.72); border-color: rgba(213,220,230,.16); } }

/* ---- Leyenda y pestañas ---- */
.ss-caption { text-align: center; margin: 26px auto 16px; max-width: 720px; min-height: 96px; }
.ss-caption h2 { font-size: 26px; font-weight: 900; margin: 0 0 8px; }
.ss-caption p { margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.6; }
.ss-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ss-tabs button { cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-weight: 700; padding: 9px 18px; border-radius: 999px; }
.ss-tabs button:hover { border-color: var(--sky); color: var(--text); }
.ss-tabs button.is-on { background: var(--sky); border-color: var(--sky); color: #06202e; }
.ss-note { text-align: center; color: var(--text-3); font-size: 13px; margin: 22px 0 0; }

@media (max-width: 760px) {
    .ss-page { padding-top: 40px; }
    .ss-bezel { padding: 6px; border-radius: 14px; }
    .ss-caption { min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .scr *, .scr *::before, .scr *::after { animation: none !important; }
    .scr.on { animation: none; }
    .h-card:first-child { transform: scale(1.04); }
    .q-txt i, .q-r { opacity: 1 !important; transform: none !important; }
}

/* ---- Paleta plateada: las tarjetas simuladas van en tonos silver; el celeste de Kiwo queda solo para la selección ---- */
.scr .h-card, .scr .m-card, .scr .q-r, .scr .d-ep i, .scr .l-row i { --a: #9aa5b3 !important; --b: #141a22 !important; --c: #4a5563 !important; }
.scr .h-card:nth-child(2n), .scr .m-card:nth-child(2n), .scr .q-r:nth-child(2n) { --a: #b4bdc9 !important; --b: #1b222c !important; }
.scr .h-card:nth-child(3n), .scr .m-card:nth-child(3n), .scr .q-r:nth-child(3n) { --a: #7d8998 !important; --b: #10151c !important; }
.scr .h-card:nth-child(5n), .scr .m-card:nth-child(5n) { --a: #c9d1db !important; --b: #202833 !important; }
.scr .h-art-live, .scr .h-art-a, .scr .h-art-b, .scr .h-art-c, .scr .h-art-d { background-image: radial-gradient(circle at 60% 30%, rgba(226,232,240,.75), transparent 48%), linear-gradient(135deg, #3b4350, #12171e); }
.scr .h-art-a { background-image: radial-gradient(circle at 35% 30%, rgba(214,221,230,.7), transparent 50%), linear-gradient(135deg, #454e5c, #141a22); }
.scr .h-art-b { background-image: radial-gradient(circle at 65% 35%, rgba(203,211,221,.7), transparent 50%), linear-gradient(135deg, #38404c, #10151c); }
.scr .h-art-c { background-image: radial-gradient(circle at 45% 28%, rgba(232,237,243,.72), transparent 50%), linear-gradient(135deg, #4c5563, #171c24); }
.scr .h-art-d { background-image: radial-gradient(circle at 55% 35%, rgba(196,205,216,.7), transparent 50%), linear-gradient(135deg, #3f4754, #11161d); }
.scr .d-poster { background: linear-gradient(160deg, #c3ccd7, #4a5361 55%, #12171e); }
.scr .l-v0 { background-image: radial-gradient(circle at 30% 40%, rgba(226,232,240,.55) 0, transparent 38%), radial-gradient(circle at 75% 60%, rgba(160,172,188,.5) 0, transparent 40%), linear-gradient(135deg, #1b212b, #2a323e); }
.scr .l-v1 { background-image: radial-gradient(circle at 65% 40%, rgba(214,221,230,.55) 0, transparent 38%), radial-gradient(circle at 25% 70%, rgba(150,162,178,.5) 0, transparent 40%), linear-gradient(135deg, #12171e, #262d38); }
.scr .l-v2 { background-image: radial-gradient(circle at 40% 35%, rgba(235,239,245,.55) 0, transparent 38%), radial-gradient(circle at 70% 70%, rgba(138,150,166,.5) 0, transparent 40%), linear-gradient(135deg, #1e242e, #2c3440); }
.scr .l-glogo { background: #4a5563; }
.scr .m-card em { color: #e5e9ef; }
.scr .q-r u, .scr .q-r u.s { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); }
.scr .d-seasons .on { color: #e5e9ef; border-color: rgba(213,220,230,.45); background: rgba(213,220,230,.12); }
.scr .g-themes .sel { color: #e5e9ef; border-color: rgba(213,220,230,.45); background: rgba(213,220,230,.12); }
.scr .g-user em.ok { color: #cfd6df; }
.scr .d-ep { --sel: rgba(213,220,230,.14); }
@keyframes dEp { 0%, 22% { background: rgba(213,220,230,.16); box-shadow: inset 0 0 0 1px rgba(213,220,230,.45); } 26%, 100% { background: rgba(20,22,26,.92); box-shadow: none; } }