/* =========================================================================
   MEGAFIRE — GAME LAUNCHER  (rediseno total, child de appyn)
   SIN NINGUN recurso externo (ni fuentes, ni CDNs) — el host/LiteSpeed/CF
   cuelga con externos. Iconos = SVG data-uri + dot CSS. Fuente = system stack.
   Storefront oscuro estilo Steam/Epic + acento neon. Cambia la paleta en :root.
   Escrito para ganarle al <style> dinamico del padre (html + !important).
   Cards: markup propio .gl-card (override en template-parts/loop/app*.php).
   ========================================================================= */

:root {
    --ap-bg:        #08090e;
    --ap-bg-2:      #0c0e15;
    --ap-surface:   #12141d;
    --ap-surface-2: #1a1d29;
    --ap-border:    #212533;
    --ap-border-2:  #2d3346;
    --ap-text:      #f2f4f9;
    --ap-muted:     #8b93a7;
    --ap-faint:     #5c6479;
    --ap-accent:    #7c5cff;
    --ap-accent-2:  #22d3ee;
    --ap-pink:      #ff4d8d;
    --ap-green:     #2fe08a;
    --ap-star:      #ffc53d;
    --ap-grad:      linear-gradient(115deg,#7c5cff 0%,#22d3ee 100%);
    --ap-grad-soft: linear-gradient(115deg,rgba(124,92,255,.16),rgba(34,211,238,.16));
    --ap-radius:    14px;
    --ap-radius-lg: 20px;
    --ap-glow:      0 0 0 1px rgba(124,92,255,.5), 0 22px 44px -16px rgba(124,92,255,.5);
    --ap-font:      system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ---------------- CANVAS ---------------- */
html body, html .wrapper-page, html .wrapper-inside { background: var(--ap-bg) !important; color: var(--ap-text) !important; }
html .wrapper-inside {
    background:
        radial-gradient(1100px 500px at 82% -10%, rgba(34,211,238,.09), transparent 60%),
        radial-gradient(1100px 520px at 10% -8%, rgba(124,92,255,.13), transparent 60%),
        var(--ap-bg) !important;
    background-attachment: fixed !important;
}
body,p { color: var(--ap-text); font-family: var(--ap-font); }
a { color: var(--ap-text); text-decoration: none; }
a:hover { color: var(--ap-accent-2); }
::selection { background: rgba(124,92,255,.4); color:#fff; }
html { scrollbar-color: var(--ap-accent) transparent !important; }
h1,h2,h3,h4,h5,.title,.title-section { font-family: var(--ap-font) !important; color: var(--ap-text) !important; letter-spacing:-.01em; }
html .container { max-width: 1320px !important; }

/* ---------------- HEADER (slim sticky) ---------------- */
html #header, html body.fixed #header {
    background: rgba(8,9,14,.72) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: none !important;
    box-shadow: 0 8px 26px rgba(0,0,0,.5);
}
/* toggle dia/noche del tema (#button_light_dark): float:right cae tras el menu,
   con icono FA roto + track sin estilar = el "rayado" feo del header.
   El child es dark-only -> se oculta (un modo claro rompe todo el diseno). */
html #button_light_dark { display:none !important; }
html #header nav a { color: var(--ap-muted) !important; font-weight:500; }
html #header nav a:hover { color: var(--ap-text) !important; }
html #header nav .menu>li>a::before { background: var(--ap-grad) !important; height:2px !important; border-radius:2px; }
html #header nav ul li.current-menu-item a {
    background: var(--ap-grad) !important; color:#07080c !important; border-radius:999px; padding:6px 18px; font-weight:700;
}
/* caret ▾ de submenus dibujado con CSS (el FA del padre esta roto -> era ▢).
   position:static + right:auto para que quede INLINE tras el texto, no absoluto. */
html #header nav .menu>li.menu-item-has-children>a::after {
    content:"" !important; position:static !important; right:auto !important; top:auto !important;
    display:inline-block !important; width:0 !important; height:0 !important; margin-left:7px; vertical-align:middle;
    border-left:4px solid transparent !important; border-right:4px solid transparent !important; border-top:5px solid currentColor !important;
    font:inherit !important; transform:none !important;
}
html #header nav .menu .sub-menu li.menu-item-has-children>a::after {
    border-top:none !important; border-left:5px solid currentColor !important; border-top:4px solid transparent !important; border-bottom:4px solid transparent !important;
}
/* MENU: centrar verticalmente los items (estaban pegados ARRIBA del header por el
   layout float del padre) -> flexbox centrado. Y matar el ::before que dejaba
   lineas raras bajo los items (el estado activo ya lo marca el pill 'Inicio').
   SOLO DESKTOP (min-width:901px): el padre oculta "#header nav ul" por completo
   en movil (<=900px) y usa un panel off-canvas separado (#menu-mobile) que se
   desliza con body.toggle-nav. Poner estos display:flex !important SIN media
   query pisaba ese "display:none" del padre y forzaba el menu de escritorio
   -entero, sin wrap- visible en el celular: como no cabe, quedaba
   desbordado fuera de la pantalla (el header se veia "cortado" justo
   despues del logo, sin nada mas visible). */
@media (min-width:901px) {
    html #header .container { align-items:center !important; }
    html #header nav { display:flex !important; align-items:center !important; height:100% !important; float:none !important; }
    html #header nav .menu { display:flex !important; align-items:center !important; float:none !important; margin:0 !important; height:auto !important; }
    html #header nav ul.menu > li { float:none !important; display:flex !important; align-items:center !important; margin-right:2px !important; }
    html #header nav .menu > li > a { line-height:1.2 !important; height:auto !important; display:inline-flex !important; align-items:center !important; }
    html #header nav .menu > li > a::before { display:none !important; }
}
/* LINEA por el MEDIO de los items (menu + sociales): es text-decoration propagado
   desde un ancestro (un text-decoration:none en el <a> NO lo quita = gotcha CSS).
   Lo mato en TODOS los niveles + los <a> a inline-flex (crea contexto que corta
   la propagacion). */
html #header, html #header nav, html #header nav ul, html #header nav li, html #header nav a,
html #subheader, html #subheader .subcontainer, html #subheader .social, html #subheader .social li, html #subheader .social li a {
    text-decoration: none !important;
}
html #subheader .social li a { display:inline-flex !important; align-items:center !important; justify-content:center !important; }
html #header nav .menu>li>.sub-menu {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important;
    border-radius:14px !important; box-shadow:0 20px 50px rgba(0,0,0,.6) !important; overflow:hidden;
}
html #header nav .menu .sub-menu li a { color: var(--ap-muted) !important; }
html #header nav .menu .sub-menu li a:hover { background: var(--ap-surface-2) !important; color: var(--ap-text) !important; }
html #menu-mobile { background: var(--ap-surface) !important; border-right:1px solid var(--ap-border); }
html #menu-mobile ul li a { color: var(--ap-muted) !important; }

/* --- boton hamburguesa (abre el menu movil) ---
   usa <i class="fa fa-bars"> -> con FA caido el boton existe (42x48px,
   clickeable) pero no dibuja nada, por eso el header se veia "cortado"
   justo despues del logo en celular. Se dibujan las 3 barras con CSS puro. */
html #header nav .menu-open { position:relative !important; }
html #header nav .menu-open i { font-size:0 !important; }
html #header nav .menu-open i::before {
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:22px; height:2px; background:#fff; border-radius:2px;
    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
}
/* cinturon de seguridad: garantiza el comportamiento movil del padre (menu de
   escritorio oculto, hamburguesa visible) por si algun otro plugin/tema
   vuelve a forzar el display del <ul class="menu"> mas adelante. */
@media (max-width:900px) {
    html #header nav .menu { display:none !important; }
    html #header nav .menu-open { display:flex !important; align-items:center !important; justify-content:center !important; }
}
/* flechita de los submenus dentro del panel movil (#menu-mobile), tambien
   con <i class="fa fa-chevron-down/up"> roto sin FA -> se dibuja con CSS. */
html #menu-mobile .menu-item-has-children > i { font-size:0 !important; position:relative !important; width:14px; display:inline-block; }
html #menu-mobile .menu-item-has-children > i::before {
    content:""; position:absolute; left:2px; top:50%; width:7px; height:7px;
    border-right:2px solid var(--ap-muted); border-bottom:2px solid var(--ap-muted);
    transform:translateY(-65%) rotate(45deg); transition:transform .2s;
}
html #menu-mobile .menu-item-has-children > i.fa-chevron-up::before { transform:translateY(-35%) rotate(-135deg); }

/* ---------------- HERO (home = #subheader + .imgbg + .subcontainer) ---------------- */
html #subheader:not(.np) {
    position: relative; overflow: hidden;
    min-height: 460px; display:flex; align-items:center;
    border-bottom: 1px solid var(--ap-border) !important;
    background: var(--ap-bg-2) !important;
}
html #subheader .imgbg { position:absolute !important; inset:0 !important; z-index:0; }
/* NO tocar el sizing del padre: el hero tiene ANIMACION de paneo (@keyframes
   subheaderimg) con width:auto;height:100%;translateX. Si lo piso con object-fit
   se mata el movimiento Y aparece el gap negro. Solo subo la opacidad (padre=.3). */
html #subheader .imgbg img, html #subheader .imgbg .bi_ll {
    opacity: .5 !important; filter: saturate(1.08);
}
/* scrim cinematografico (liviano para que se lea la imagen completa) */
html #subheader:not(.np)::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        linear-gradient(180deg, rgba(8,9,14,.18) 0%, rgba(8,9,14,.30) 45%, rgba(8,9,14,.72) 82%, var(--ap-bg) 100%),
        radial-gradient(120% 90% at 50% 125%, rgba(124,92,255,.22), transparent 60%);
}
html #subheader .subcontainer {
    position: relative; z-index:2; max-width: 860px; width:100%; min-width:0; margin:0 auto; text-align:center; padding: 40px 20px; box-sizing:border-box;
}
/* el min-width:0 de arriba es la parte critica: #subheader es flex (regla
   de mas arriba) y por defecto un hijo de flex no se encoge mas alla del
   ancho de su contenido sin partir -> en celular el h1 se negaba a hacer
   wrap y se desbordaba del viewport (texto cortado en el borde). */
html #subheader .subcontainer h1, html #subheader .subcontainer h2 {
    white-space: normal !important; overflow-wrap: break-word; word-break: break-word; max-width: 100%;
}
html #subheader .subcontainer h1 {
    font-weight:800 !important; font-size: clamp(30px,4.4vw,52px) !important; line-height:1.03 !important; margin:0 0 10px;
    background: linear-gradient(120deg,#fff 28%, #d5ccff 60%, #92ecf8);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    text-shadow: 0 2px 40px rgba(124,92,255,.25);
}
html #subheader .subcontainer h2 {
    font-weight:400 !important; font-size: clamp(14px,1.5vw,17px) !important; color:#c4c9d6 !important;
    max-width:640px; margin:0 auto 26px; line-height:1.5;
}
/* buscador hero = pill glass grande */
html #searchBox { max-width:660px; margin:0 auto; }
html #searchBox form {
    display:flex; align-items:center; gap:6px; background: rgba(18,20,29,.9) !important;
    border:1px solid var(--ap-border-2) !important; border-radius:999px !important;
    box-shadow: 0 14px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(124,92,255,.06) !important;
    padding:6px 6px 6px 20px !important; overflow:hidden;
}
html #searchBox form input[type=text], html #searchBox form .sb_search {
    flex:1; background:transparent !important; color:var(--ap-text) !important; border:none !important; font-size:15px !important; height:44px !important;
}
html #searchBox form input::placeholder { color: var(--ap-muted) !important; }
html #searchBox form button, html #searchBox form .sb_submit {
    flex:none; width:46px; height:46px; border-radius:999px !important; border:none !important;
    background: var(--ap-grad) !important; color:#07080c !important;
    box-shadow:0 6px 18px rgba(124,92,255,.45) !important; font-size:0;
    display:flex !important; align-items:center; justify-content:center;
}
/* lupa SVG embebida (sin FA) */
html #searchBox form button i, html #searchBox form .sb_submit i { display:none !important; }
html #searchBox form button::after, html #searchBox form .sb_submit::after {
    content:""; width:19px; height:19px; display:block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307080c' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
}
html #searchBox form button:hover { filter:brightness(1.1); }
html #searchBox ul { background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; border-radius:14px !important; margin-top:6px; }
html #searchBox ul:empty { display:none !important; border:none !important; background:none !important; } /* la raya = ul vacio del autocomplete */
html #searchBox ul li a { color: var(--ap-muted) !important; }
html #searchBox ul li a:hover { background: var(--ap-surface-2) !important; color:var(--ap-text) !important; }
/* input limpio, sin bordes/lineas por defecto del browser */
html #searchBox form input[type=text], html #searchBox form .sb_search {
    box-shadow:none !important; outline:none !important; -webkit-appearance:none !important; appearance:none !important;
    border-bottom:none !important; text-decoration:none !important;
}
/* social del hero -> chips glass */
html #subheader .social { margin-top:22px !important; }
html #subheader .social li a {
    background: rgba(255,255,255,.06) !important; border:1px solid var(--ap-border-2) !important; color:var(--ap-text) !important;
}
html #subheader .social li a:hover { background: var(--ap-grad) !important; color:#07080c !important; }
/* logos sociales en SVG embebido (FA roto -> eran cajitas). El <i> se oculta. */
html #subheader .social li a { position:relative !important; }
html #subheader .social li a i { display:none !important; }
html #subheader .social li a::after {
    content:""; position:absolute; inset:0; margin:auto; width:17px; height:17px;
    background-position:center; background-repeat:no-repeat; background-size:contain;
}
html #subheader .social li a.facebook::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E"); }
html #subheader .social li a.twitter::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
html #subheader .social li a.instagram::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.332.014 7.052.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/%3E%3C/svg%3E"); }
html #subheader .social li a.youtube::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12z'/%3E%3C/svg%3E"); }
html #subheader .social li a.pinterest::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345c-.091.378-.293 1.194-.333 1.361-.052.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z'/%3E%3C/svg%3E"); }
html #subheader .social li a.telegram::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E"); }
html #subheader .social li a:hover::after { filter: brightness(0) invert(0.08); }

/* ---------------- FEATURED (#featured_posts .fp_box) — art tiles ---------------- */
html #featured_posts {
    display:grid !important; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)) !important;
    gap:16px !important; margin: 22px auto !important; max-width:1320px; padding:0 12px;
}
html #featured_posts .fp_box { margin:0 !important; }
html #featured_posts .fp_box a {
    display:block; position:relative; height:150px; border-radius: var(--ap-radius) !important;
    background-size:cover !important; background-position:center !important; overflow:hidden;
    border:1px solid var(--ap-border) !important; box-shadow:none !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
html #featured_posts .fp_box a:hover { transform: translateY(-4px); border-color:var(--ap-border-2) !important; box-shadow: var(--ap-glow) !important; }
html #featured_posts .fpb_a { position:absolute; inset:0; display:flex; align-items:flex-end; padding:12px;
    background: linear-gradient(180deg, transparent 40%, rgba(8,9,14,.9)); }
html #featured_posts .fpb_a img { width:44px !important; height:44px; border-radius:10px; margin-right:10px; }
html #featured_posts .fpb_title { color:#fff !important; font-weight:700 !important; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.8); }

/* ---------------- CATBAR (pills) ---------------- */
html .catbar { margin: 20px auto !important; max-width:1320px; padding:0 12px; }
html .catbar ul { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:0; }
html .catbar li a {
    display:inline-flex; align-items:center; gap:8px; background: var(--ap-surface) !important;
    border:1px solid var(--ap-border) !important; border-radius:999px; padding:9px 18px; color:var(--ap-muted) !important;
    font-weight:600; transition: all .18s;
}
html .catbar li a:hover { border-color: transparent !important; background: var(--ap-grad) !important; color:#07080c !important; transform: translateY(-2px); }
html .catbar li a .icop { color: inherit; }

/* ---------------- SECTIONS ---------------- */
html .section { margin: 42px auto !important; max-width:1320px; padding:0 12px; }
/* titulo de seccion: el tema fuerza center con inline !important (no se puede vencer)
   -> centro TODO y pongo el subrayado centrado (nada de barra huerfana a la izq) */
html .section .title-section {
    position:relative; text-align:center !important; width:100% !important; display:block !important;
    color:var(--ap-text) !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.05em;
    font-size: clamp(16px,2vw,22px) !important; padding:0 0 18px !important; margin:0 0 24px !important;
    border-bottom:1px solid var(--ap-border) !important;
}
html .section .title-section::before { content:none !important; display:none !important; }
html .section .title-section::after {
    content:"" !important; position:absolute; left:50% !important; transform:translateX(-50%);
    bottom:-1px; width:120px; height:3px; background:var(--ap-grad); border-radius:2px; top:auto !important; right:auto !important;
}

/* ---------------- GRID (.baps) -> poster grid responsive ---------------- */
/* el .baps del padre es FLEX -> lo fuerzo a GRID de columnas IGUALES y neutralizo
   cualquier tamano heredado en los hijos (por eso la 1a columna salia 2x de ancha) */
html .section .baps {
    display:grid !important; grid-template-columns: repeat(auto-fill,minmax(158px,1fr)) !important;
    gap:18px !important; padding:0 !important; align-items:start !important;
}
html .section .baps > * {
    min-width:0 !important; max-width:none !important; width:auto !important;
    margin:0 !important; float:none !important; flex:none !important;
}
@media (min-width:1100px){ html .section .baps[data-cols="6"]{ grid-template-columns: repeat(6,1fr) !important; } }

/* ---------------- CARD POSTER (.gl-card) ---------------- */
html .gl-card { position:relative; }
html .gl-card__link {
    display:flex; flex-direction:column; height:100%;
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important; overflow:hidden; color:var(--ap-text) !important;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s;
}
html .gl-card__link:hover { transform: translateY(-6px); border-color: var(--ap-border-2) !important; box-shadow: var(--ap-glow) !important; }
/* barra de acento arriba en hover */
html .gl-card__link::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-grad); transform:scaleX(0); transform-origin:left; transition:transform .25s; z-index:3; }
html .gl-card__link:hover::before { transform:scaleX(1); }

/* caja de arte: MISMO tamano (3/4) para poster e icono -> grid parejo */
html .gl-card__art { position:relative; margin:0 !important; aspect-ratio: 3/4; overflow:hidden; background: var(--ap-bg-2); }
/* neutralizamos el wrapper .bloque-imagen.w75 del padre (float + 75x75 fijo) */
html .gl-card__art .bloque-imagen {
    position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
    float:none !important; margin:0 !important; display:block !important;
}

/* POSTER (PC/MAC): box-art llena la caja */
html .gl-card--poster .gl-card__art .bloque-imagen img {
    width:100% !important; height:100% !important; object-fit:cover !important; display:block;
    border-radius:0 !important; transition: transform .35s ease;
}
html .gl-card--poster .gl-card__link:hover .gl-card__art img { transform: scale(1.06); }

/* ICON (APK/MOD): caja 1/1 (menos vacio que 3/4) con el icono GRANDE + spotlight */
html .gl-card--icon .gl-card__art {
    aspect-ratio: 1/1;
    background:
        radial-gradient(70% 60% at 50% 44%, rgba(124,92,255,.16), transparent 72%),
        radial-gradient(130% 110% at 50% 30%, var(--ap-surface-2), var(--ap-bg-2) 80%);
    display:flex; align-items:center; justify-content:center;
}
html .gl-card--icon .gl-card__art .bloque-imagen {
    position:static !important; inset:auto !important; width:auto !important; height:auto !important;
    display:flex !important; align-items:center; justify-content:center;
}
html .gl-card--icon .gl-card__art .bloque-imagen img {
    width:66% !important; height:auto !important; max-height:66% !important; object-fit:contain !important;
    border-radius:23% !important; box-shadow: 0 18px 40px rgba(0,0,0,.6); transition: transform .3s ease;
}
html .gl-card--icon .gl-card__link:hover .gl-card__art img { transform: translateY(-3px) scale(1.04); }

/* ribbon de estado (new/update) dentro del arte -> badge esquina */
html .gl-card__art .bloque-status {
    position:absolute !important; top:8px !important; left:8px !important; right:auto !important;
    width:auto !important; margin:0 !important; transform:none !important; z-index:4;
    border-radius:8px !important; font-size:9px !important; padding:3px 8px !important;
}
html .gl-card__scrim { position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(8,9,14,.55)); pointer-events:none; }
html .gl-card__cta {
    position:absolute; left:50%; bottom:14px; transform: translate(-50%,12px);
    display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px;
    background: var(--ap-grad); color:#07080c; font-weight:700; font-size:12px; white-space:nowrap;
    box-shadow:0 8px 20px rgba(124,92,255,.5); opacity:0; transition: opacity .22s, transform .22s; pointer-events:none;
}
html .gl-card__link:hover .gl-card__cta { opacity:1; transform: translate(-50%,0); }
/* icono descarga SVG embebido (sin FA) */
html .gl-card__cta i { display:none !important; }
html .gl-card__cta::before {
    content:""; width:13px; height:13px; display:inline-block; flex:none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307080c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat;
}

html .gl-card__body { padding:12px 13px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
html .gl-card__title { font-size:14px !important; font-weight:700 !important; line-height:1.25; margin:0 !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ap-text) !important; }
html .gl-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:12px; color:var(--ap-muted) !important; margin-top:auto; }
html .gl-card__meta .version { display:inline-flex; align-items:center; gap:4px; color:var(--ap-muted) !important; }
html .gl-card__meta .developer { color:var(--ap-faint) !important; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html .gl-card__rating .box-rating { padding:0 !important; }

/* chip PC/APK/MOD (px_post_mod, inline styles del padre -> !important) */
html .b-type { background:transparent !important; padding:0 !important; margin:0 !important; border-radius:6px !important; display:inline-flex !important; }
html .b-type > span { background: var(--ap-surface-2) !important; color:var(--ap-text) !important; border:1px solid var(--ap-border-2) !important;
    border-radius:6px !important; padding:1px 7px !important; font-weight:700 !important; font-size:10px !important; letter-spacing:.05em; }
/* puntito del chip dibujado con CSS (sin depender de Font Awesome).
   currentColor = el color inline del padre (verde APK / azul PC / MOD). */
html .b-type .fa-circle {
    display:inline-block !important; width:8px; height:8px; border-radius:50%;
    background: currentColor !important; font-size:0 !important; line-height:0;
    box-shadow: 0 0 5px currentColor;
}

/* rating stars */
html .box-rating .rating, html .rating .fa-star, html .box-rating .fas { color: var(--ap-star) !important; }

/* ---------------- CARRUSEL (mq / #slidehome .px-carousel) ---------------- */
/* carrusel: mostrar el card COMPLETO (el padre lo recorta con height:100%) */
/* carrusel: SOLO destrabo la altura para que se vea el body del card.
   NO toco el ancho/margin del item (el padre ya lo hace bien: 33.333% = 3 cards;
   pisarlo lo volvia gigante al pelear con el JS del carrusel). */
html #slidehome .px-carousel-wrapper { height:auto !important; overflow:hidden !important; -webkit-mask-image:none !important; mask-image:none !important; }
html #slidehome .px-carousel-container { height:auto !important; }
html #slidehome .px-carousel-item { vertical-align:top !important; }
html #slidehome .px-carousel-item .gl-card__link { width:100% !important; }
/* cap de altura del arte en el carrusel: el item es ~33% del ancho TOTAL = card
   enorme; sin cap el arte se hace gigante. Lo dejo en tamano razonable. */
html #slidehome .gl-card__art { aspect-ratio:auto !important; height:220px !important; }
html #slidehome .gl-card--icon .gl-card__art .bloque-imagen img { max-height:58% !important; width:auto !important; max-width:56% !important; }
html #slidehome .gl-card--poster .gl-card__art .bloque-imagen img { width:100% !important; height:100% !important; }

/* menu: catch-all para matar cualquier borde/linea (defensivo, ademas del border
   del header ya removido y el toggle oculto) */
html #header nav ul, html #header nav .menu, html #header nav ul li, html #header .container { border:none !important; box-shadow:none !important; }
/* flechas prev/next: el padre las hace height:100% (caja alta = los "slivers").
   Las forzo a circulo 40px chico centrado vertical + chevron SVG (FA roto). */
html #slidehome .px-carousel-nav .px-prev, html #slidehome .px-carousel-nav .px-next {
    position:absolute !important; top:50% !important; transform:translateY(-50%) !important;
    width:40px !important; height:40px !important; padding:0 !important;
    background: rgba(20,22,31,.9) !important; border:1px solid var(--ap-border-2) !important;
    border-radius:999px !important; z-index:9 !important; box-shadow:0 6px 16px rgba(0,0,0,.5) !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
}
html #slidehome .px-carousel-nav .px-prev { left:-4px !important; right:auto !important; }
html #slidehome .px-carousel-nav .px-next { right:-4px !important; left:auto !important; }
html #slidehome .px-carousel-nav .px-prev:hover, html #slidehome .px-carousel-nav .px-next:hover { background: var(--ap-grad) !important; }
html #slidehome .px-carousel-nav .px-prev i, html #slidehome .px-carousel-nav .px-next i { display:none !important; }
html #slidehome .px-carousel-nav .px-prev::after, html #slidehome .px-carousel-nav .px-next::after {
    content:""; width:11px; height:11px; background-position:center; background-repeat:no-repeat; background-size:contain;
}
html #slidehome .px-carousel-nav .px-prev::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
html #slidehome .px-carousel-nav .px-next::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }

/* ---------------- SIDEBAR (rank list) ---------------- */
html #sidebar .widget, html .widget {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; border-radius: var(--ap-radius) !important;
    box-shadow:none !important; overflow:hidden;
}
html .widget .widget-title, html .widget_block h2 {
    color:var(--ap-text) !important; background:transparent !important; border-bottom:1px solid var(--ap-border) !important;
    font-weight:800 !important; text-transform:uppercase; letter-spacing:.05em;
}
html #sidebar .widget ul li { border-color: var(--ap-border) !important; }
html #sidebar .widget ul li:hover { background: var(--ap-surface-2) !important; }
html #sidebar .bghover { background: linear-gradient(180deg,transparent,rgba(124,92,255,.22)) !important; }
html #sidebar .bav.wb .title, html #sidebar .widget a { color:var(--ap-text) !important; }
html #sidebar .widget a:hover { color:var(--ap-accent-2) !important; }
html #sidebar .version, html #sidebar .developer, html #sidebar .app-date { color:var(--ap-muted) !important; }

/* ---------------- BLOG CARDS ---------------- */
html .bloque-blog {
    background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; border-radius: var(--ap-radius) !important;
    box-shadow:none !important; overflow:hidden; position:relative; transition: transform .2s, border-color .2s, box-shadow .2s;
}
html .bloque-blog::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-grad); transform:scaleX(0); transform-origin:left; transition:transform .25s; z-index:2; }
html .bloque-blog:hover { transform: translateY(-6px); border-color:var(--ap-border-2) !important; box-shadow: var(--ap-glow) !important; }
html .bloque-blog:hover::before { transform:scaleX(1); }
html .bloque-blog a.title { color:var(--ap-text) !important; font-weight:700 !important; }
html .bloque-blog .excerpt, html .bloque-blog .date { color:var(--ap-muted) !important; }

/* ---------------- CTA "VER MAS" ---------------- */
html .section a.more, html p a.more {
    display:inline-block; background: var(--ap-grad) !important; color:#07080c !important; border:none !important;
    border-radius:999px !important; padding:13px 40px !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 12px 30px -8px rgba(124,92,255,.55) !important; transition: filter .18s, transform .18s !important;
}
html .section a.more:hover, html p a.more:hover { filter:brightness(1.08); transform: translateY(-2px); opacity:1 !important; }
html .buttond:not(.danv) { background: var(--ap-grad) !important; color:#07080c !important; border:none !important; border-radius:10px !important; font-weight:700 !important; }

/* paginador */
html .pagination a, html .pagination .page-numbers { background: var(--ap-surface) !important; border:1px solid var(--ap-border) !important; color:var(--ap-muted) !important; border-radius:8px !important; }
html .pagination .page-numbers.current, html .pagination a:hover { background: var(--ap-grad) !important; color:#07080c !important; }

/* ---------------- FOOTER ---------------- */
html #footer { background: var(--ap-bg-2) !important; border-top:1px solid var(--ap-border) !important; color:var(--ap-muted) !important; position:relative; }
html #footer::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ap-grad); opacity:.85; }
html #footer a { color:var(--ap-muted) !important; }
html #footer a:hover { color:var(--ap-accent-2) !important; }
html #footer .widget-title, html #footer .widget .widget-title { color:var(--ap-text) !important; }

/* ---------------- SUBHEADER single (barra .np) ---------------- */
/* El buscador se veia descentrado en los posts (single.php, NO home) porque
   el padre pinta #subheader.np como flex-row: [#searchBox][.social], y
   "#subheader.np #searchBox{width:100%}" (2 IDs, specificity 0,2,0) le gana
   al "html #searchBox{max-width:660px;margin:0 auto}" del child (0,1,1) ->
   el buscador se estira para "compartir fila" con los iconos sociales, que
   quedan pegados a la derecha, empujando el buscador visualmente a la izq.
   Fix: apilar en columna y centrar cada bloque por separado (mismo patron
   visual que el hero de home). */
html #subheader.np {
    background: var(--ap-surface) !important; border-bottom:1px solid var(--ap-border) !important; box-shadow:none !important;
    display:flex !important; flex-direction:column !important; align-items:center !important;
}
html #subheader.np #searchBox {
    display:block !important; width:100% !important; max-width:660px !important; margin:0 auto !important;
}
html #subheader.np .social { margin:18px 0 0 !important; }
html #subheader.np .social li:first-child { margin-left:0 !important; }

/* ---------------- SINGLE APP (vista de un post: box de datos, descripcion,
   versiones, comentarios, etc). El padre las pinta con background:#fff fijo
   (style.css linea ~1531 ".app-p .box,.app-s .box{background:#fff}") y el
   child nunca cubria esta plantilla -> quedaba blanca sobre el resto oscuro. */
html .app-s .box {
    background: var(--ap-surface) !important;
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    box-shadow: none !important;
}
html .box .box-title { color: var(--ap-text) !important; }
html .box .box-title::before { border-bottom-color: var(--ap-border) !important; }
html .box .box-title::after { background: var(--ap-grad) !important; }
html .app-p .box h1.box-title { color: var(--ap-text) !important; }

/* cabecera del app: breadcrumbs, version, categorias, descripcion corta */
html #breadcrumbs, html #breadcrumbs a { color: var(--ap-muted) !important; }
html #breadcrumbs a:hover { color: var(--ap-text) !important; }
html .app-spe .version { color: var(--ap-muted) !important; }
html .app-s .s2 .descripcion { color: var(--ap-muted) !important; }
html .app-s .s2 .meta-cats a {
    background: var(--ap-grad-soft) !important; color: var(--ap-accent-2) !important;
}

/* ficha de datos: Desarrollador / Lanzamiento / Version / Tamaño / etc */
html .app-s .da-s { color: var(--ap-text) !important; }
html .app-s .da-s b { color: var(--ap-muted) !important; font-weight:600; }
html .app-s .da-s a { color: var(--ap-accent-2) !important; }

/* botones Descargar / Telegram / Youtube / Ultima version */
html .buttond {
    background: var(--ap-grad) !important; color:#07080c !important; font-weight:700 !important;
}
html .buttond i { background: rgba(0,0,0,.15) !important; }
html .buttond.danv { background:#f94040 !important; color:#fff !important; }
html .buttond.t { background: var(--ap-surface-2) !important; color: var(--ap-text) !important; border:1px solid var(--ap-border) !important; }
html .buttond.yt { background:#ff3b3b !important; color:#fff !important; }
html .buttond:hover { filter:brightness(1.08); }

/* reportar + texto del cuerpo de la descripcion larga */
html .link-report { color: var(--ap-muted) !important; }
html .link-report:hover { color: var(--ap-accent-2) !important; }
html .app-s .entry, html .app-s .entry p, html .app-s .entry li { color: var(--ap-muted) !important; }
html .app-s .entry a { color: var(--ap-accent-2) !important; }
html .app-s .entry strong, html .app-s .entry b { color: var(--ap-text) !important; }

/* tabla de "Versiones" dentro del box */
html #versiones table, html #versiones table th, html #versiones table td {
    color: var(--ap-muted) !important; border-color: var(--ap-border) !important;
}
html #versiones table th { color: var(--ap-text) !important; }

/* difuminado blanco al final de la descripcion truncada ("Leer mas") ---
   el padre usa linear-gradient(to bottom, transparent 0, #fff 100%) para
   tapar el texto cortado, pensado para fondo blanco -> por eso se veia una
   franja blanca encima del texto oscuro. Se cambia el color final del
   degradado a la superficie oscura de la caja (var(--ap-surface): #12141d). */
html .app-s .entry.limit::before {
    background: linear-gradient(to bottom, rgba(18,20,29,0) 0, var(--ap-surface) 100%) !important;
}
html .app-s .readmore { color: var(--ap-accent-2) !important; }

/* ---------------- ICONOS SIN FONT AWESOME ----------------
   El padre carga fa-6.4.2 via loadFont() (XHR asincronico). Cuando esa
   peticion no llega a tiempo o se bloquea, TODOS los <i class="fa ..."> del
   sitio quedan vacios (tofu invisible) -> por eso Descargar/Telegram/
   Youtube/compartir/flechas de carrusel/lightbox se ven sin icono.
   Se dibujan de forma self-contained (SVG data-uri o CSS), igual que ya
   hacia el header con los iconos sociales, para no depender de FA. */

/* --- botones .buttond (Descargar, Telegram, Youtube, Ultima version, Regresar) ---
   IMPORTANTE: la regla de respaldo de abajo usa varios :not() -> su
   especificidad (0,6,1) es MAYOR que la de ".buttond.downloadAPK i" (0,2,1),
   asi que sin !important le ganaba y tapaba el icono de Descargar/Enlaces.
   Por eso cada background-image aqui lleva !important.
   OJO 2: el padre posiciona el icono con "position:absolute; left:0; top:0;
   height:100%; width:33px; display:flex" (un pozo a todo lo alto, pegado a
   la izquierda del boton). Forzar antes width:16px/height:16px/
   display:inline-block rompia ese layout -> el icono quedaba flotando en la
   esquina superior (el "descuadre" de las capturas). Ahora solo se
   reemplaza el glifo por la imagen, sin tocar tamaño/posicion del padre. */
html .buttond i { font-size:0 !important; background-repeat:no-repeat !important; background-position:center !important; background-size:17px 17px !important; }
html .buttond i::before { content:none !important; }
html .buttond.downloadAPK i, html .dapk_b i, html #list-downloadlinks li a.dapk_b i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M7 10l5 5 5-5'/><path d='M4 20h16'/></svg>") !important;
}
html .buttond.danv i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 1 0-2.3 5.6'/><path d='M20 5v6h-6'/></svg>") !important;
}
html .buttond.t i, html #dl-telegram i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><path fill='%23ffffff' d='M107 175l-4 55c6 0 8-2 12-5l28-27 58 43c11 6 18 3 21-10l38-178c4-16-6-22-17-18L14 100c-16 6-15 15-3 19l50 15 116-73c5-4 10-2 6 2z'/></svg>") !important;
}
html .buttond.yt i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M23 12s0-3.6-.5-5.3c-.3-1-1-1.8-2-2C18.9 4.2 12 4.2 12 4.2s-6.9 0-8.5.5c-1 .2-1.7 1-2 2C1 8.4 1 12 1 12s0 3.6.5 5.3c.3 1 1 1.7 2 2 1.6.5 8.5.5 8.5.5s6.9 0 8.5-.5c1-.3 1.7-1 2-2 .5-1.7.5-5.3.5-5.3zM9.8 15.5v-7l6 3.5-6 3.5z'/></svg>") !important;
}
html .buttond:not(.downloadAPK):not(.danv):not(.t):not(.yt):not(.dapk_b) i {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>") !important;
}

/* --- iconito de "Reportar" --- */
html .link-report i, html .link-report::before { font-size:0 !important; }
html .link-report { display:inline-flex !important; align-items:center; gap:5px; }
html .link-report::after {
    content:""; width:13px; height:13px; display:inline-block; background-repeat:no-repeat; background-size:contain;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b0c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='13'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
}

/* --- compartir (Facebook / Twitter / Pinterest / Telegram / Whatsapp) ---
   ahora con su color de marca fijo (no solo en hover) y su icono real. */
html .botones_sociales a { background: var(--ap-surface-2) !important; color:#fff !important; border:1px solid var(--ap-border); }
html .botones_sociales li i { font-size:0 !important; width:18px; height:18px; display:inline-block; background-repeat:no-repeat; background-position:center; background-size:contain; }
html .botones_sociales .facebook { background:#1877f2 !important; }
html .botones_sociales .facebook i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z'/></svg>"); }
html .botones_sociales .twitter { background:#000000 !important; }
html .botones_sociales .twitter i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M18.9 2H22l-7.6 8.7L23 22h-6.9l-5.4-6.8L4.4 22H1.3l8.2-9.3L1 2h7l4.9 6.3L18.9 2zM17.6 20h1.9L6.5 4H4.5l13.1 16z'/></svg>"); }
html .botones_sociales .pinterest { background:#e60023 !important; }
html .botones_sociales .pinterest i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 2a10 10 0 0 0-3.6 19.3c0-.8 0-1.8.2-2.7l1.4-6s-.3-.7-.3-1.7c0-1.6.9-2.8 2.1-2.8 1 0 1.5.7 1.5 1.6 0 1-.6 2.4-1 3.8-.2 1 .5 1.8 1.5 1.8 1.8 0 3.1-2.3 3.1-5 0-2.1-1.5-3.7-4.2-3.7-3 0-4.9 2.2-4.9 4.7 0 .9.3 1.5.7 2 .2.2.2.3.1.5l-.3 1c0 .2-.2.3-.4.2-1.2-.5-1.8-1.9-1.8-3.4 0-2.6 2.2-5.6 6.5-5.6 3.5 0 5.8 2.5 5.8 5.2 0 3.6-2 6.3-4.9 6.3-1 0-1.9-.5-2.2-1.2l-.6 2.4c-.2.9-.7 1.8-1.1 2.5A10 10 0 1 0 12 2z'/></svg>"); }
html .botones_sociales .telegram { background:#229ed9 !important; }
html .botones_sociales .telegram i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><path fill='%23ffffff' d='M107 175l-4 55c6 0 8-2 12-5l28-27 58 43c11 6 18 3 21-10l38-178c4-16-6-22-17-18L14 100c-16 6-15 15-3 19l50 15 116-73c5-4 10-2 6 2z'/></svg>"); }
html .botones_sociales .whatsapp { background:#25d366 !important; }
html .botones_sociales .whatsapp i { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2zm5.8 14.2c-.2.7-1.4 1.3-2 1.4-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.7-.6-3-1.3-4.9-4.3-5-4.5-.2-.2-1.2-1.6-1.2-3s.8-2.1 1-2.4c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.9 2c.1.2.1.4 0 .6l-.4.6c-.1.2-.3.4-.1.7.2.4.9 1.5 1.9 2.4 1.3 1.1 2.3 1.5 2.7 1.7.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.7-.1l1.9.9c.2.1.4.2.5.3.1.2.1.9-.1 1.5z'/></svg>"); }

/* --- flechas del carrusel de screenshots (#slideimages) y de apps (#slidehome) --- */
html .px-carousel-nav .px-prev, html .px-carousel-nav .px-next {
    background: var(--ap-surface-2) !important; border-radius:50%; width:32px; height:32px !important; top:50% !important; transform:translateY(-50%);
    display:flex !important; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.4);
}
html #slideimages .px-prev, html #slideimages .px-next {
    background: var(--ap-grad) !important; border:none !important; width:45px !important; height:45px !important;
}
html .px-carousel-nav .px-prev i, html .px-carousel-nav .px-next i { font-size:0 !important; width:11px; height:11px; background:none !important; border:none !important; }
html .px-carousel-nav .px-prev i::before, html .px-carousel-nav .px-next i::before {
    content:""; display:block; width:9px; height:9px; border-right:2.5px solid #fff; border-bottom:2.5px solid #fff;
}
html .px-carousel-nav .px-prev i::before { transform:rotate(135deg); margin-left:2px; }
html .px-carousel-nav .px-next i::before { transform:rotate(-45deg); margin-right:2px; }

/* --- lightbox de imagenes (#imageBox): flechas antes/despues y boton cerrar --- */
html .imageBox .bn { font-size:0 !important; width:40px; height:40px; background:rgba(0,0,0,.55); border-radius:50%; display:flex; align-items:center; justify-content:center; text-shadow:none; }
html .imageBox .bn::before { content:""; display:block; width:11px; height:11px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(-45deg); margin-left:-3px; }
html .imageBox .bn.before::before { transform:rotate(135deg); margin-left:3px; }
html .imageBox .bn.disabled::before { border-color:rgba(255,255,255,.3); }
html .imageBox .close { font-size:0 !important; }
html .imageBox .close::before { content:"\2715"; font-size:20px; font-family:Arial,Helvetica,sans-serif; color:#fff; display:block; }

/* ---------------- CAJA "ENLACES DE DESCARGA" / instrucciones ----------------
   La caja de pasos ("Seleccione un servidor...", contraseña, etc.) viene del
   campo de opciones apps_info_download_apk/zip (px_info_install -> clase
   .bx-info-install.entry) con markup/estilos propios del admin, por eso
   quedaba blanca aunque el resto de .box ya estaba oscuro. */
html .bx-info-install { background: var(--ap-surface-2) !important; border:1px solid var(--ap-border) !important; border-radius: var(--ap-radius) !important; padding:16px 20px !important; }
html .bx-info-install, html .bx-info-install p, html .bx-info-install li, html .bx-info-install span { color: var(--ap-muted) !important; background:transparent !important; }
html .bx-info-install a { color: var(--ap-accent-2) !important; }
html .bx-info-install b, html .bx-info-install strong { color: var(--ap-text) !important; }
/* por si el admin metio un bloque de Gutenberg con fondo propio dentro */
html .bx-info-install [style*="background"] { background:transparent !important; }

/* ---------------- SCROLLBAR ---------------- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background: var(--ap-bg); }
::-webkit-scrollbar-thumb { background: var(--ap-surface-2); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ap-accent); }