/* FRP XIAOMI v3 — capa unificada: encabezado, menú móvil, banners, redes y descargas. Se carga al final para ganar a estilos antiguos. */
:root{--sx-h:72px;--sx-cyan:#00d9ff;--sx-blue:#087dff;--sx-line:rgba(0,174,255,.28)}
@media(max-width:860px){:root{--sx-h:64px}}
html{scroll-padding-top:calc(var(--sx-h) + 12px);-webkit-text-size-adjust:100%}
/* ---------- Encabezado (idéntico en todas las páginas) ---------- */
.sx-header{position:sticky;top:0;z-index:1000;height:var(--sx-h);background:rgba(5,11,22,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--sx-line);padding-top:env(safe-area-inset-top);box-sizing:content-box}
.sx-bar{max-width:1240px;height:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sx-brand{display:flex;align-items:center;gap:11px;min-width:0;color:#f2f7ff;text-decoration:none}
.sx-brand img{width:44px;height:44px;object-fit:contain;flex:none;border-radius:10px}
.sx-brand span{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.sx-brand b{font-size:18px;letter-spacing:.6px;white-space:nowrap}
.sx-brand small{font-size:10px;letter-spacing:1.4px;color:#6bdfff;white-space:nowrap}
.sx-nav{display:flex;align-items:center;gap:4px}
.sx-nav a{color:#c9d9ec;text-decoration:none;font-size:13.5px;font-weight:600;padding:10px 13px;border-radius:10px;white-space:nowrap;transition:background .15s,color .15s}
.sx-nav a:hover{background:#0a1d33;color:#fff}
.sx-nav a.is-active{color:#fff;box-shadow:inset 0 -2px 0 var(--sx-cyan)}
.sx-nav a.sx-cta{margin-left:8px;background:linear-gradient(135deg,var(--sx-blue),var(--sx-cyan));color:#021018;font-weight:800;box-shadow:0 0 18px #008dff40}
.sx-nav a.sx-cta:hover{filter:brightness(1.08);color:#021018}
.sx-toggle{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--sx-line);background:#07182a;cursor:pointer;padding:0;position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex:none}
.sx-toggle span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:#6bdfff;transition:transform .2s,opacity .2s,top .2s}
.sx-toggle span:nth-child(1){top:15px}.sx-toggle span:nth-child(2){top:22px}.sx-toggle span:nth-child(3){top:29px}
.sx-open .sx-toggle span:nth-child(1){top:22px;transform:rotate(45deg)}
.sx-open .sx-toggle span:nth-child(2){opacity:0}
.sx-open .sx-toggle span:nth-child(3){top:22px;transform:rotate(-45deg)}
.sx-backdrop{position:fixed;inset:0;z-index:998;background:rgba(0,4,10,.55);cursor:pointer;touch-action:none}
.sx-backdrop[hidden]{display:none}
@media(max-width:860px){
 .sx-bar{padding:0 14px}
 .sx-brand img{width:40px;height:40px}.sx-brand b{font-size:16px}
 .sx-toggle{display:block}
 .sx-nav{position:fixed;top:calc(var(--sx-h) + env(safe-area-inset-top));left:10px;right:10px;z-index:999;flex-direction:column;align-items:stretch;gap:4px;padding:12px;background:#081426;border:1px solid #16446e;border-radius:14px;box-shadow:0 18px 40px #000a;max-height:calc(100vh - var(--sx-h) - 24px);max-height:calc(100dvh - var(--sx-h) - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .18s,transform .18s,visibility 0s .18s}
 .sx-open .sx-nav{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s,transform .18s}
 .sx-nav a{padding:14px 14px;font-size:15px;border-radius:10px}
 .sx-nav a.is-active{box-shadow:inset 3px 0 0 var(--sx-cyan);background:#0a1d33}
 .sx-nav a.sx-cta{margin:6px 0 0;text-align:center}
}
@media(prefers-reduced-motion:reduce){.sx-nav,.sx-toggle span{transition:none}}
/* Neutraliza encabezados antiguos si algún archivo aún los trae */
.topbar,.sub-topbar{display:none!important}

/* ---------- Banner / carrusel: MISMO marco en todas las secciones ---------- */
.sx-banner{padding:16px 16px 0;box-sizing:border-box}
.sx-frame{position:relative;width:100%;max-width:var(--sx-bw,1200px);height:var(--sx-bh,280px);margin:0 auto;border-radius:16px;overflow:hidden;background:#030b16;border:1px solid var(--sx-line);box-shadow:0 0 30px #007dff1f;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.sx-slides{position:absolute;inset:0}
.sx-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--sx-fit,cover);object-position:center;opacity:0;transition:opacity .6s ease;pointer-events:none;display:block;max-width:none}
.sx-slide.is-active{opacity:1}
.sx-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid #ffffff30;background:rgba(3,10,20,.62);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .2s;touch-action:manipulation;padding:0}
.sx-prev{left:10px}.sx-next{right:10px}
.sx-frame:hover .sx-arrow,.sx-arrow:focus-visible{opacity:1}
.sx-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:7px}
.sx-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:#ffffff66;cursor:pointer;touch-action:manipulation;transition:width .2s,background .2s}
.sx-dots button.is-active{width:24px;border-radius:6px;background:var(--sx-cyan)}
@media(max-width:860px){.sx-frame{height:var(--sx-bhm,170px);border-radius:12px}.sx-banner{padding:12px 12px 0}.sx-arrow{display:none}}
@media(hover:none){.sx-arrow{display:none}}
@media(prefers-reduced-motion:reduce){.sx-slide{transition:none}}

/* ---------- Botones de redes (Home) ---------- */
.sx-social{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));z-index:900;display:flex;flex-direction:column;gap:12px}
.sx-social.sx-right{right:calc(18px + env(safe-area-inset-right))}.sx-social.sx-left{left:calc(18px + env(safe-area-inset-left))}
.sx-soc{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;color:#fff;text-decoration:none;border:1px solid #ffffff38;box-shadow:0 8px 24px #0009,inset 0 1px 0 #ffffff40;transition:transform .2s,box-shadow .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sx-soc i{display:grid;place-items:center;width:28px;height:28px}.sx-soc svg{width:28px;height:28px;display:block}
.sx-tg{background:linear-gradient(145deg,#38bdf8,#0a7fd6);box-shadow:0 8px 24px #0009,0 0 22px #1da1f255,inset 0 1px 0 #ffffff55}
.sx-wa{background:linear-gradient(145deg,#2ee66f,#0f9d58);box-shadow:0 8px 24px #0009,0 0 22px #25d36655,inset 0 1px 0 #ffffff55}
.sx-soc:hover{transform:translateY(-3px) scale(1.05)}.sx-soc:active{transform:scale(.96)}
.sx-soc::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:sx-ping 3.2s ease-out infinite}
.sx-tg::after{color:#38bdf8}.sx-wa::after{color:#2ee66f;animation-delay:1.6s}
@keyframes sx-ping{0%{transform:scale(.9);opacity:.55}70%,100%{transform:scale(1.35);opacity:0}}
.sx-soc span{position:absolute;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;font-size:12px;font-weight:700;padding:7px 12px;border-radius:9px;background:#07182a;border:1px solid var(--sx-line);color:#d6f5ff;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.sx-right .sx-soc span{right:calc(100% + 12px)}.sx-left .sx-soc span{left:calc(100% + 12px);transform:translateY(-50%) translateX(-6px)}
@media(hover:hover){.sx-soc:hover span{opacity:1;transform:translateY(-50%)}}
@media(max-width:860px){.sx-soc{width:50px;height:50px}.sx-soc i,.sx-soc svg{width:25px;height:25px}.sx-social{gap:10px;bottom:calc(14px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.sx-soc::after{animation:none}}

/* ---------- Página Descarga ---------- */
.sx-dl-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0}
.sx-dl{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #155582;border-radius:14px;background:linear-gradient(145deg,#0a1a2c,#07101d);color:#eaf7ff;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s;min-width:0}
a.sx-dl:hover{transform:translateY(-2px);border-color:var(--sx-cyan);box-shadow:0 0 22px #008dff30}
.sx-dl-ic{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:12px;overflow:hidden}
.sx-dl-ic svg,.sx-dl-ic img{width:100%;height:100%;object-fit:contain;display:block}
.sx-dl-t{min-width:0;flex:1}.sx-dl-t b{display:block;font-size:15px}.sx-dl-t small{display:block;color:#92a5bd;font-size:12px;margin-top:2px;line-height:1.35}
.sx-dl-go{flex:none;font-size:12px;font-weight:800;padding:8px 14px;border-radius:9px;background:linear-gradient(135deg,var(--sx-blue),var(--sx-cyan));color:#021018}
.sx-dl.is-off{opacity:.55;cursor:default}.sx-dl.is-off .sx-dl-go{background:#10253b;color:#8faac8}
@media(max-width:420px){.sx-dl{flex-wrap:wrap}.sx-dl-go{width:100%;text-align:center}}

/* ===== Server Status dinámico ===== */
.sx-st-head{text-align:center;margin-bottom:22px}
.sx-st-summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:820px;margin:0 auto 20px;padding:18px 20px;border-radius:18px;background:#0d1728;border:1px solid #1b2c46}
.sx-st-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;font-weight:800;flex:none;background:#2b1f12;color:#ffb020}
.sx-st-ok .sx-st-ico{background:#0c2a22;color:#00e0a0}.sx-st-down .sx-st-ico{background:#2c1218;color:#ff4e69}.sx-st-none .sx-st-ico{background:#16213a;color:#8faac8}
.sx-st-sum-txt{flex:1;min-width:180px;display:flex;flex-direction:column}.sx-st-sum-txt b{font-size:17px;color:#fff}.sx-st-sum-txt span{font-size:13px;color:#8faac8}
.sx-st-up{min-width:170px}.sx-st-up small{display:flex;justify-content:space-between;color:#8faac8;font-size:12px}.sx-st-up b{color:#ffb020}.sx-st-ok .sx-st-up b{color:#00e0a0}.sx-st-down .sx-st-up b{color:#ff4e69}
.sx-st-bar{height:6px;border-radius:9px;background:#1d2a41;margin-top:6px;overflow:hidden}.sx-st-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffb020,#ffcf5a);border-radius:9px;transition:width .5s}.sx-st-ok .sx-st-bar i{background:#00e0a0}.sx-st-down .sx-st-bar i{background:#ff4e69}
.sx-st-live{display:flex;align-items:center;gap:6px;color:#8faac8;font-size:12px;padding-left:14px;border-left:1px solid #22324d}.sx-st-live i{width:8px;height:8px;border-radius:50%;background:#a06bff;box-shadow:0 0 0 0 #a06bff88;animation:sxping 2s infinite}
@keyframes sxping{70%{box-shadow:0 0 0 8px #a06bff00}100%{box-shadow:0 0 0 0 #a06bff00}}
.sx-st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:820px;margin:0 auto}
.sx-st-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#0d1728;border:1px solid #1b2c46;min-width:0}
.sx-st-card.is-off{border-color:#4a1a26;background:#150f1a}
.sx-st-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;background:#0c2a22;color:#00e0a0}.is-off .sx-st-ic{background:#2c1218;color:#ff4e69}
.sx-st-name{flex:1;min-width:0;display:flex;flex-direction:column}.sx-st-name b{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sx-st-name small{color:#7f93b0;font-size:12px}
.sx-st-pill{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.5px;color:#00e0a0;flex:none}.sx-st-pill i{width:8px;height:8px;border-radius:50%;background:currentColor}.is-off .sx-st-pill{color:#ff4e69}
@media(max-width:640px){.sx-st-grid{grid-template-columns:1fr}.sx-st-live{border:0;padding:0}}

.sx-st-head .page-lead{text-align:center;margin-left:auto;margin-right:auto}

/* ===== Imagen de interfaz del Home: centrada, con límite y sin desbordar ===== */
.hero-visual.hero-visual-real{min-width:0;max-width:100%;overflow:hidden;display:flex;justify-content:center;justify-self:center}
.hero-visual-real .desktop-interface-frame{width:var(--his,100%);max-width:560px;margin:0 auto;transform:none}
.hero-visual-real .desktop-interface-frame img{width:100%;height:auto;max-height:420px;object-fit:contain;margin:0 auto}
@media(max-width:960px){.hero-visual-real .desktop-interface-frame{max-width:min(100%,520px)}.hero-visual-real .desktop-interface-frame img{max-height:340px}}
@media(max-width:640px){.hero-visual-real .desktop-interface-frame{max-width:100%}.hero-visual-real .desktop-interface-frame img{max-height:230px}.hero-visual-real .floating-chip{display:none}.hero-visual-real .interface-frame-bar b,.hero-visual-real figcaption{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* ===== Resellers (tarjetas por rango) ===== */
.sx-main-res{position:relative;display:flex;gap:26px;align-items:center;padding:34px 28px 26px;margin:22px 0;border-radius:20px;background:linear-gradient(135deg,#120b2b,#0a0f22);border:1px solid #3a2a78;box-shadow:0 0 40px #5b34ff1c}
.sx-main-tag{position:absolute;left:0;top:0;padding:7px 14px;border-radius:20px 0 12px 0;background:#6a3df0;color:#fff;font-size:11px;font-weight:800;letter-spacing:1px}
.sx-main-av{width:120px;height:120px;border-radius:22px;background:#fff;border:2px solid #8a63ff;overflow:hidden;flex:none;display:grid;place-items:center}.sx-main-av img{width:100%;height:100%;object-fit:cover}
.sx-main-body{min-width:0;flex:1}.sx-main-body h2{margin:0 0 4px;font-size:26px;color:#fff}.sx-main-body h2 em{font-style:normal;font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--tc);color:var(--tc);vertical-align:middle;margin-left:6px}
.sx-country{color:#8da0bd;margin:0 0 8px;font-size:14px}.sx-tag{color:#c9d6ea;margin:0 0 12px;max-width:640px}
.sx-pay{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.sx-pay small{color:#7f93b0;font-size:10px;letter-spacing:1px;margin-right:4px}.sx-pay span,.sx-pay2 span{padding:4px 10px;border-radius:7px;background:#1a2036;border:1px solid #2b3556;color:#dbe6f7;font-size:11px;font-weight:800}
.sx-links{display:flex;flex-wrap:wrap;gap:10px}.sx-rl{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;border:1px solid #33406a;background:#111a33;color:#e8f0ff!important;font-weight:700;font-size:14px;text-decoration:none}.sx-rl:hover{border-color:#7a5cff;box-shadow:0 0 16px #6a3df030}
.sx-res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.sx-res{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 20px 20px;border-radius:18px;background:#0c1022;border:1px solid #2a2460}
.sx-badge{position:absolute;left:14px;top:14px;padding:4px 10px;border-radius:7px;background:color-mix(in srgb,var(--tc) 18%,#0c1022);color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 45%,transparent);font-size:10px;font-weight:800;letter-spacing:.8px}
.sx-av{width:104px;height:104px;border-radius:50%;background:#fff;border:3px solid var(--tc);overflow:hidden;display:grid;place-items:center;box-shadow:0 0 22px color-mix(in srgb,var(--tc) 35%,transparent)}.sx-av img{width:100%;height:100%;object-fit:cover}
.sx-res h3{margin:14px 0 2px;font-size:19px;color:#fff}.sx-res .sx-country{margin-bottom:12px}
.sx-pay2{width:100%;border-top:1px solid #1d2442;padding-top:12px;margin-bottom:14px}.sx-pay2 small{display:block;color:#7f93b0;font-size:10px;letter-spacing:1px;margin-bottom:8px}.sx-pay2 div{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sx-links-ic{justify-content:center;gap:14px}.sx-links-ic .sx-rl{background:none;border:0;padding:6px;color:#8da0bd!important}.sx-links-ic .sx-rl:hover{color:#fff!important;box-shadow:none}.sx-links-ic svg{width:22px;height:22px}
@media(max-width:700px){.sx-main-res{flex-direction:column;text-align:center;padding-top:50px}.sx-main-body .sx-pay,.sx-main-body .sx-links{justify-content:center}.sx-main-body h2{font-size:22px}}

/* ===== Galería compacta del Home ===== */
.sx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sx-gallery{padding-top:26px;padding-bottom:10px}
.sx-gal-title{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:14px;color:#2ee59d;margin-bottom:12px}.sx-gal-title span{width:4px;height:20px;background:#2ee59d;border-radius:3px}
.sx-gal-subtitle{margin:-6px 0 14px;color:#9fb6d0;font-size:13px;max-width:620px}
.sx-gal{max-width:100%}
.sx-gal .rc-track{gap:14px;padding:6px 2px 14px;max-width:100%}
.sx-gal-card{flex:0 0 var(--galw,var(--gal,170px));width:var(--galw,var(--gal,170px));max-width:var(--galw,var(--gal,170px));height:var(--gal,170px);max-height:var(--gal,170px);scroll-snap-align:start;border-radius:12px;overflow:hidden;background:#030913;border:1px solid #1d4a73;display:grid;grid-template-columns:100%;grid-template-rows:100%;place-items:center;transition:transform .2s,border-color .2s;position:relative}
a.sx-gal-card:hover{transform:translateY(-3px);border-color:var(--cyan,#00d9ff)}
.sx-gal-card img{width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;min-width:0;min-height:0;object-fit:contain;display:block}
.sx-gal-cap{position:absolute;left:0;right:0;bottom:0;padding:4px 8px;font-size:11px;font-weight:700;letter-spacing:.3px;color:#dff3ff;background:linear-gradient(0deg,rgba(2,8,16,.85),transparent);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.sx-gal-card{flex-basis:min(var(--galw,var(--gal,170px)),78vw)!important;width:min(var(--galw,var(--gal,170px)),78vw)!important;max-width:78vw!important;height:min(var(--gal,170px),46vw)!important;max-height:46vw!important}}

/* v3.4 autofill: evita el fondo blanco/celeste que pone Chrome al autocompletar */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:#e6f0fb !important;caret-color:#e6f0fb;-webkit-box-shadow:0 0 0 1000px #030b16 inset !important;box-shadow:0 0 0 1000px #030b16 inset !important;transition:background-color 99999s ease-out 0s}
input:autofill{color:#e6f0fb !important;box-shadow:0 0 0 1000px #030b16 inset !important}
