:root { 
            /* COLOR DE IDENTIDAD GAY DATING: MORADO NEÓN */
            --neon-color: #bc13fe; 
            --accent-color: var(--neon-color, #bc13fe);
            --neon-glow: rgba(188, 19, 254, 0.4);
            
            /* VARIABLES MODO OSCURO (POR DEFECTO) */

            --bg: #000000;
            --bg-gradient: #000000;
            --text-main: #ffffff;
            --text-muted: #cccccc;
            --text-dim: #777777;
            --header-bg: rgba(10, 10, 10, 0.7);
            --hero-overlay-1: rgba(0,0,0,0.85);
            --hero-overlay-2: rgba(0,0,0,0.6);
            --card-bg: rgba(10, 10, 10, 0.5);
            --feature-bg: rgba(0, 0, 0, 0.6);
            --border-color: #222222;
            --border-light: rgba(255,255,255,0.1);
            --faq-bg: rgba(255,255,255,0.02);
            --footer-bg: #000000;
            --input-bg: rgba(0,0,0,0.8);
            --menu-bg: #111111;
            --btn-text-hover: #000000;
            --btn-bg-hover: #ffffff;
            --hero-glass: rgba(0,0,0,0.3);
        }

        body.light-mode,
        body.light-theme {
            --bg: #f4f4f9;
            --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #e0e0e0 100%);
            --text-main: #ffffff;
            --text-muted: #000000;
            --text-dim: #555555;
            --header-bg: rgba(255, 255, 255, 0.7);
            --hero-overlay-1: rgba(255,255,255,0.7);
            --hero-overlay-2: rgba(255,255,255,0.4);
            --card-bg: rgba(0, 0, 0, 0.7);
            --feature-bg: rgba(255, 255, 255, 0.8);
            --border-color: #cccccc;
            --border-light: rgba(0,0,0,0.1);
            --faq-bg: rgba(0,0,0,0.02);
            --footer-bg: #eeeeee;
            --input-bg: rgba(255,255,255,0.9);
            --menu-bg: #ffffff;
            --btn-text-hover: #ffffff;
            --btn-bg-hover: #000000;
            --hero-glass: rgba(255,255,255,0.6);
        }
        
        * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--neon-color) var(--bg); }
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--border-color); }
        ::-webkit-scrollbar-thumb { background: var(--neon-color); border-radius: 5px; }

/* ========================================== */
/* BOMBARDEO CSS PARA FORZAR SCROLL EN MAC    */
/* ========================================== */

/* 1. Atacar a la raíz y a TODOS los elementos */
*, html, body {
    scrollbar-width: auto !important;
    scrollbar-color: var(--accent, #00e5ff) #111111 !important;
}

/* 2. Destruir la apariencia nativa de Apple */
::-webkit-scrollbar {
    -webkit-appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    background-color: #111111 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Forzar el fondo del carril en todas sus capas */
::-webkit-scrollbar-track, 
::-webkit-scrollbar-track-piece {
    background-color: #111111 !important;
    background-clip: padding-box !important;
    border: 1px solid #111111 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Forzar el tirador (la barra que se mueve) */
::-webkit-scrollbar-thumb {
    background-color: var(--accent, #00e5ff) !important;
    border-radius: 8px !important;
    border: 3px solid #111111 !important; /* Borde oscuro para afinarla */
    background-clip: padding-box !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 40px !important;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background-color: #bc13fe !important;
}

/* 5. Esquinas por si hay scroll horizontal y vertical a la vez */
::-webkit-scrollbar-corner {
    background-color: #111111 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

        html {
            margin: 0;
            padding: 0;
}

        body { 
    margin: 0; 
    padding: 0;  
    color: var(--text-main); 
    font-family: 'Segoe UI', sans-serif; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-height: 100vh; 
    overflow-x: hidden;
}
        .theme-btn { background: none; border: 1px solid var(--border-color); color: var(--text-main); cursor: pointer; font-size: 14px; padding: 5px 10px; border-radius: 20px; }
        .login-link { color: var(--text-main); font-family: 'Orbitron'; font-size: 11px; text-decoration: none; font-weight: bold; background: var(--border-light); padding: 8px 15px; border-radius: 20px; }

.hero-wrap {
    width: 100%;
    height: auto !important;
    min-height: 933px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-top: -265px !important;
    padding-top: 290px !important;
    padding-bottom: 45px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.slider-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

/* AÑADIDO: .slider-container video */
.slider-container img,
.slider-container video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    opacity: 0; 
    transition: opacity 1.5s ease-in-out; 
}

/* AÑADIDO: .slider-container video.active */
.slider-container img.active,
.slider-container video.active { 
    opacity: 1; 
}

.hero-wrap::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(var(--hero-overlay-1), var(--hero-overlay-2)); z-index: 1;
}

/* =========================================================================
   BLOQUE MAESTRO HERO COMPLETO (dating.css)
   ========================================================================= */

/* 1. CAJA CENTRAL HERO: MANTIENE 800px BASE Y SE ABRE A LOS LADOS SI EL IDIOMA ES LARGO */
.hero {
    max-width: 800px;
    width: 92% !important;
    height: auto !important;
    min-height: 310px !important;
    max-height: none !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    padding: 36px 40px !important;
    border-radius: 30px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background: var(--hero-glass) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    border: 1px solid var(--accent, var(--neon-color, #bc13fe)) !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease, max-width 0.25s ease !important;
}

.hero:hover {
    box-shadow: none !important;
}

/* Modo Día: Rampa suave y larga de abajo hacia arriba */
body.light-mode .hero,
body.light-theme .hero {
    background: 
        linear-gradient(0deg, 
            rgba(0, 0, 0, 0.40) 0%, 
            rgba(0, 0, 0, 0.22) 50%, 
            rgba(0, 0, 0, 0.08) 100%
        ),
        linear-gradient(0deg, 
            rgba(18, 20, 24, 0.98) 0%,
            rgba(25, 28, 35, 0.96) 20%,
            rgba(50, 56, 68, 0.92) 42%,
            rgba(160, 170, 185, 0.90) 70%,
            rgba(245, 248, 252, 0.97) 100%
        ) !important;
    border: 1.5px solid var(--accent, var(--neon-color, #bc13fe)) !important;
    box-shadow: none !important;
}

/* 2. TÍTULO H1: REPARTO EQUILIBRADO EN DOS LÍNEAS */
.hero h1 {
    font-size: 2.8rem;
    line-height: 1.2 !important;
    margin: 0 auto 20px auto !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    width: 100% !important;
    max-width: 620px;
    text-wrap: balance !important;
    overflow-wrap: break-word !important;
    text-shadow: 0 0 25px var(--accent, var(--neon-color, #bc13fe)),
                 0 0 50px var(--accent, var(--neon-color, #bc13fe)) !important;
    transition: text-shadow 0.3s ease !important;
}

/* Modo Día: Degradado metálico oscuro + halo dinámico detrás */
body.light-mode .hero h1,
body.light-theme .hero h1 {
    background: linear-gradient(180deg, #111317 0%, #1f232b 50%, #4b5563 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 -4px 3px var(--accent, var(--neon-color, #bc13fe))) 
            drop-shadow(0 -10px 0 rgba(0, 0, 0, 0.3)) !important;
    transition: filter 0.3s ease !important;
}

/* Modo Día con tema gris */
body.light-mode.theme-gray .hero h1,
body.light-theme.theme-gray .hero h1 {
    background: linear-gradient(180deg, #050608 0%, #181a1f 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)) !important;
}

/* 3. PÁRRAFO: FINO Y SIN NEGRITA (font-weight: 400) */
.hero p {
    font-size: 1.12rem !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
    font-weight: 400 !important;
    color: var(--accent, var(--neon-color, #bc13fe)) !important;
    text-shadow: 0 0 10px var(--accent, var(--neon-color, rgba(188, 19, 254, 0.3))) !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
}

/* Modo Día: Fino, limpio y con el color activo */
body.light-mode .hero p,
body.light-theme .hero p {
    font-size: 1.12rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: var(--accent, var(--neon-color, #bc13fe)) !important;
    text-shadow: 0 0 10px #000 !important;
}

/* Modo Día con tema gris */
body.light-mode.theme-gray .hero p,
body.light-theme.theme-gray .hero p {
    color: #e2e8f0 !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

/* 4. WIDGET GHOST MODE: SE ESTIRA A LO ANCHO AL TRADUCIR SIN DEFORMAR LOS TOGGLES */
#ghostModeWidget {
    width: max-content !important;
    min-width: max-content !important;
    padding: 3px 10px !important;
    flex-shrink: 0 !important;
}

#ghostModeWidget span:not(#ghostDotGrid):not(#ghostDotKm) {
    width: auto !important;
    min-width: 26px !important;
    white-space: nowrap !important;
    text-align: right !important;
    padding-right: 4px !important;
}

#ghostSwitchGrid,
#ghostSwitchKm {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
}

#ghostDotGrid,
#ghostDotKm {
    width: 7px !important;
    min-width: 7px !important;
    max-width: 7px !important;
    height: 7px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* ========================================================================= */
/* BOTÓN DE SCROLL DENTRO DEL HERO (PRIORIDAD DE CLIC Y CAPAS)               */
/* ========================================================================= */

.scroll-down-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    width: 100%;
    position: relative;
    z-index: 1000 !important;
}

#scrollDownBtn {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--accent, #ffd700);
    color: var(--accent, #ffd700);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent, #ffd700) 45%, transparent);
    transition: transform 0.2s ease, background 0.2s ease;
    animation: bounceDown 1.8s infinite ease-in-out;
    position: relative;
    z-index: 1001 !important;
}

#scrollDownBtn:hover {
    transform: scale(1.15);
    background: color-mix(in srgb, var(--accent, #ffd700) 25%, transparent);
    box-shadow: 0 0 22px var(--accent, #ffd700);
}

@keyframes bounceDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(7px);
    }
}

#profilesGridContainer {
    min-height: clamp(350px, 45vh, 440px);
}

        .btn-hero { display: inline-block; padding: 18px 40px; background: var(--neon-color); color: #fff; font-family: 'Orbitron'; font-size: 14px; font-weight: bold; text-decoration: none; border-radius: 8px; box-shadow: 0 0 20px var(--neon-glow); }

        .goog-te-banner-frame, .skiptranslate { display: none !important; }

        .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: 1100px; margin-bottom: 16px; padding: 0 20px; }
        .feature-card { background: var(--feature-bg); border: 1px solid var(--border-color); padding: 40px 30px; border-radius: 15px; text-align: center; backdrop-filter: blur(10px); transition: 0.3s; }
        .feature-card h3 { font-family: 'Orbitron'; color: var(--neon-color); margin-bottom: 15px; font-size: 16px; }
        .discount-badge { display: inline-block; background: var(--neon-color); color: #fff; font-family: 'Orbitron'; font-size: 10px; padding: 5px 12px; border-radius: 20px; margin-bottom: 20px; }
        .cost { font-size: 36px; font-family: 'Orbitron'; color: var(--text-main); margin-bottom: 30px; }
        .old-price { font-size: 18px; text-decoration: line-through; color: #ff4444; margin-left: 10px; font-weight: normal; }
        .price-card ul { list-style: none; padding: 0; text-align: left; font-size: 13px; flex-grow: 1; margin-bottom: 30px; }
        .price-card ul li { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; color: var(--text-main); }
        .btn-main { display: block; padding: 18px; border: 1px solid var(--neon-color); color: #fff; text-decoration: none; font-family: 'Orbitron'; font-size: 12px; border-radius: 5px; transition: 0.3s; font-weight: bold; }
        .btn-main:hover { background: #fff; color: #000; }

        .bottom-bar { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-color), transparent); box-shadow: 0 0 15px var(--neon-glow); margin: 0 auto 50px; }
        .footer-col h5 { color: var(--text-main); margin-bottom: 25px; font-size: 12px; justify-content: center; display: flex;}
        .footer-col ul { list-style: none; padding: 0; flex-direction: column; justify-content: center; display: flex; align-items: center;}
        .footer-col ul li { margin-bottom: 15px; }
        .footer-col ul li a { color: var(--text-dim); text-decoration: none; font-size: 12px; transition: 0.3s; }
        .footer-col ul li a:hover { color: var(--neon-color); }
        .leader-text { text-align: center; color: var(--text-dim); font-size: 11px; margin-top: 50px; letter-spacing: 2px; }

/* --- CORRECCIÓN DEFINITIVA DEL FOOTER --- */
footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--footer-bg);
    margin-top: auto;
    position: relative;
    clear: both;
}

footer .bottom-bar {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--neon-color), transparent);
    box-shadow: 0 0 15px var(--neon-glow);
    margin: 0 auto 30px auto;
}

.footer-container {
    max-width: 1100px;
    width: 92%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

footer .leader-text {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    clear: both !important;
    color: var(--text-dim, #777);
    font-size: 11px;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    letter-spacing: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
}

@media (max-width: 850px) { 
    .footer-container { grid-template-columns: 1fr; } 
}

/* --- CLASE DE BLUR PARA VISITANTES Y CENTRADO DEL MODAL MEMBERS ONLY --- */
#profilesGridContainer {
    position: relative !important;
    align-content: center !important;
}

.dating-guest-blur {
    position: relative !important;
    min-height: 340px !important;
}

.dating-guest-blur > div:not(.guest-members-only-banner) {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.guest-members-only-banner {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 50 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
}

.guest-members-only-banner > .guest-members-only-box {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    pointer-events: auto !important;
    margin: auto !important;
}

/* =========================================================================
   ESTRUCTURA MAESTRA DE 3 COLUMNAS (ANCHO IDÉNTICO A LA RULETA)
   ========================================================================= */

/* Contenedor principal que abarca toda la pantalla sin restricciones excesivas */
.page-layout { 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    width: 100%; 
    max-width: 100%; 
    margin: 0 auto 0 auto; 
    position: relative; 
    z-index: 10; 
    box-sizing: border-box; 
}

/* Columna central fluida adaptada a tu sistema de variables */
.center-column { 
    display: flex; 
    flex-direction: column; 
    gap: 0; 
    flex-grow: 1; 
    max-width: 1400px; 
    min-width: 0; 
}

/* Columnas laterales de los banners (Ajustadas al ancho estrecho original) */
.side-col-stack { 
    width: 90px; 
    min-width: 90px; 
    display: flex; 
    flex-direction: column; 
    gap: var(--gap, 16px); 
    margin: 0 var(--out-margin, 16px); 
    flex-shrink: 0; 
    padding-top: 16px;
}

/* Caja individual del banner vertical con la proporción de la ruleta */
.side-col-banner { 
    width: 90px; 
    height: 728px; 
    position: relative; 
    background: #000; 
    border: 1px solid #333; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 15px; 
    flex-shrink: 0; 
}

/* ========================================================================= */
/* SECCIÓN DE PRECIOS: CÓDIGO ÚNICO Y DEFINITIVO                             */
/* ========================================================================= */

/* Contenedores generales */
.pricing-wrap,
.pricing-section {
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.pricing-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

/* Base de la tarjeta (Tus estilos originales con blur) */
.price-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 20px !important;
    padding: 40px 25px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    backdrop-filter: blur(15px) !important;
    transition: 0.3s !important;
    box-sizing: border-box !important;
    flex: 1 1 300px !important;
    max-width: 340px !important;
}

.price-card.featured {
    border-color: var(--neon-color, #ffcc00) !important;
}

.price-card .btn-main {
    margin-top: auto !important;
    transition: all 0.3s ease !important;
}

/* Hover base del botón (Modo Noche): Fondo accent, letra negra */
body:not(.day-mode) .price-card .btn-main:hover {
    background-color: var(--accent, #c837f3) !important;
    border-color: var(--accent, #c837f3) !important;
    color: #000000 !important;
}

/* ========================================================================= */
/* MODO DÍA: TARJETAS NEGRAS, BOTONES NEGROS Y TEXTOS BLANCOS (FORZADO)      */
/* ========================================================================= */

/* 1. Fondo de la tarjeta en NEGRO PURO (Atacando todas las clases posibles del modo día) */
body.day-mode .price-card,
body.light-mode .price-card,
[data-theme="light"] .price-card {
    background-color: #000000 !important; 
    background: #000000 !important;
    border: 1px solid #333333 !important;
}

/* 2. Mantener el borde del Featured (GOLD) */
body.day-mode .price-card.featured,
body.light-mode .price-card.featured,
[data-theme="light"] .price-card.featured {
    border-color: var(--neon-color, #ffcc00) !important;
}

/* 3. Textos, Precios y Listas interiores en BLANCO para que se lean sobre el fondo negro */
body.day-mode .price-card h3,
body.day-mode .price-card .cost,
body.day-mode .price-card ul li,
body.day-mode .price-card ul li span,
body.light-mode .price-card h3,
body.light-mode .price-card .cost,
body.light-mode .price-card ul li,
body.light-mode .price-card ul li span,
[data-theme="light"] .price-card h3,
[data-theme="light"] .price-card .cost,
[data-theme="light"] .price-card ul li,
[data-theme="light"] .price-card ul li span {
    color: #ffffff !important;
}

/* 4. Botones Normales (VIP y MIP) forzados a NEGRO en modo día */
body.day-mode .price-card .btn-main,
body.light-mode .price-card .btn-main,
[data-theme="light"] .price-card .btn-main {
    background-color: #000000 !important;
    border: 1px solid #555555 !important;
    color: #ffffff !important;
}

/* 5. Hover de los Botones (Ambos modos): Fondo Accent y letra negra al pasar el ratón */
.price-card .btn-main:hover {
    background-color: var(--accent, #c837f3) !important;
    border-color: var(--accent, #c837f3) !important;
    color: #000000 !important;
}

/* ========================================================================= */
/* MODO NOCHE: FORZAR BLANCOS                                                */
/* ========================================================================= */

body:not(.day-mode) .price-card h3,
body:not(.day-mode) .price-card .cost {
    color: #ffffff !important;
}

body:not(.day-mode) .price-card ul li {
    color: #cccccc !important;
}

body:not(.day-mode) .price-card ul li span {
    color: #ffffff !important;
}

/* =========================================================================
   FONDO ESPECÍFICO PARA EL CONTENEDOR DE EMOJIS EN MODO DÍA
   ========================================================================= */
body.light-mode #personalEmojisContainer,
body.light-theme #personalEmojisContainer,
body.day-mode #personalEmojisContainer,
[data-theme="light"] #personalEmojisContainer {
    background-color: rgb(116, 115, 115) !important;
}

/* Galería desplegable suave al pasar el cursor sin abrir otro modal */
.social-media-item-wrap {
    position: relative;
    width: 86px;
    height: 86px;
    border-radius: 8px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    background: #000;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, z-index 0s;
    z-index: 1;
}
.social-media-item-wrap img,
.social-media-item-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    display: block;
}
.social-media-item-wrap:hover {
    transform: scale(2.65);
    z-index: 500 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.95), 0 0 15px rgba(0, 229, 255, 0.6);
    border-color: var(--accent, #00e5ff);
}

/* =========================================================================
   1. OCULTAR HERO Y TARJETAS DE CARACTERÍSTICAS SIN DESTELLO AL INICIAR SESIÓN
   ========================================================================= */
html.logged-in .hero-wrap,
body.logged-in .hero-wrap,
html.logged-in .features-grid,
body.logged-in .features-grid {
    display: none !important;
}

/* Ocultar los emojis personales de la barra cuando la sesión está cerrada */
html:not(.logged-in) body:not(.logged-in) #personalEmojisContainer {
    display: none !important;
}

html.logged-in #personalEmojisContainer,
body.logged-in #personalEmojisContainer {
    display: flex !important;
}

/* =========================================================================
   2. DOS MEDIDAS SEPARADAS PARA RADIO Y TRADUCTOR (INVITADO VS LOGUEADO)
   ========================================================================= */
#radioTranslateBar {
    margin: 34px auto -7px auto !important;
}

html.logged-in #radioTranslateBar,
body.logged-in #radioTranslateBar {
    margin: -11px auto -8px auto !important;
}

/* =========================================================================
   3. ALINEACIÓN EXACTA DE TABLAS DE PRECIOS (VIP ARRIBA + 3 DEBAJO A 980px)
   ========================================================================= */
.pricing-wrap {
    padding: 32px 20px 30px 20px !important;
    box-sizing: border-box !important;
}

.pricing-section > h2 {
    margin-top: 6px !important;
    margin-bottom: 28px !important;
}

#freeVipDatingTable {
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto 20px auto !important;
    box-sizing: border-box !important;
}

.pricing-section .plans-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.pricing-section .plans-container > .plan-table {
    flex: 0 1 313px !important;
    width: 313px !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.pricing-section .plans-container > .plan-table th,
.pricing-section .plans-container > .plan-table td {
    padding: 11px 12px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
}

@media (max-width: 960px) {
    .pricing-section .plans-container {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .pricing-section .plans-container > .plan-table {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 960px) {
    .pricing-section .plans-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .pricing-section .plans-container > .plan-table {
        flex: 1 1 280px !important;
        max-width: 320px !important;
    }
}

/* =========================================================================
   4. UNIFICAR DISEÑO CENTRADO ENTRE DATING (PÁG 1 Y 2) Y SOCIAL EN EL MODAL
   ========================================================================= */
#datingProfileModal #gridSectionDating,
#datingProfileModal #gridSectionSocial {
    width: 100% !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
}

#datingProfileModal #datingPage1,
#datingProfileModal #datingPage2,
#datingProfileModal #socialPage1,
#datingProfileModal #socialPage2 {
    width: 100% !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* =========================================================================
   5. SCROLL INTERNO FUNCIONAL EN TODOS LOS MODALES (INCLUIDO HISTORIAL E INBOX)
   ========================================================================= */
.ventana-movible-content,
.vip-content-pro,
.standard-modal-box,
.profile-modal-wide,
.dmca-modal-box,
.video-settings-box,
#juegos-ventana {
    max-height: 88vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
}

/* Scroll dedicado y siempre accesible para la tabla de Historial de Transacciones */
#transactionsModal .vip-content-pro,
#transactionsModal .ventana-movible-content {
    max-height: 86vh !important;
    overflow-y: auto !important;
}

#transactionsModal table {
    width: 100% !important;
    border-collapse: collapse !important;
}

#transactionsModal div:has(> table),
#transactionsTableBody {
    overscroll-behavior: contain !important;
}

/* Estructura Flex del Inbox */
#inboxModal .ventana-movible-content.inbox-modal-wide {
    width: 850px !important;
    height: 600px !important;
    min-width: 680px !important;
    min-height: 500px !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#inboxModal .inbox-container {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    overflow: hidden !important;
}

#inboxModal .inbox-sidebar,
#inboxList {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
}

#inboxModal .inbox-chat-area {
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#inboxChatHistory {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
}

/* Tirador de esquina inferior derecha para agrandar modales en PC */
.modal-resize-corner {
    position: absolute !important;
    right: 3px !important;
    bottom: 3px !important;
    width: 18px !important;
    height: 18px !important;
    cursor: nwse-resize !important;
    z-index: 999999 !important;
    background: linear-gradient(135deg, transparent 50%, var(--accent, #00e5ff) 50%, var(--accent, #00e5ff) 65%, transparent 65%, transparent 80%, var(--accent, #00e5ff) 80%) !important;
    opacity: 0.85 !important;
    border-bottom-right-radius: 6px !important;
    pointer-events: auto !important;
}

.modal-resize-corner:hover {
    opacity: 1 !important;
    transform: scale(1.15);
}

@media (max-width: 768px) {
    .modal-resize-corner {
        display: none !important;
    }
}