:root {
            --neon-gold: #FFD700;
            --neon-gold-glow: rgba(255, 215, 0, 0.6);
            --glass-bg: rgba(20, 20, 25, 0.85);
            --glass-border: rgba(255, 215, 0, 0.3);
            --bg-color: #0a0a0f;
        }
        body {
            margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            background-image: radial-gradient(circle at 50% -20%, #2a2a2a, #0a0a0f);
            color: white; overflow-x: hidden;
        }

        /* HEADER & FOOTER */
        .mock-header {
            background: rgba(0,0,0,0.8); padding: 20px 5%; border-bottom: 1px solid #333;
            display: flex; justify-content: space-between; align-items: center; color: #888;
        }
        footer { text-align: center; padding: 40px; color: #666; border-top: 1px solid #222; margin-top: 40px; }

        /* CONTENEDOR PRINCIPAL: Flexbox responsivo y ajustado arriba */
.hero-container {
    display: flex; flex-wrap: wrap; justify-content: center; 
    align-items: flex-start; /* Centrado arriba en lugar de al medio */
    min-height: auto; /* Quitamos el 85vh que forzaba el hueco */
    padding: 20px 5% 40px; gap: 40px; max-width: 1400px; margin: 0 auto;
    transition: all 0.4s ease;
}
        
        /* BLOQUE DE TEXTO IZQUIERDA (MODO NORMAL) */
        .hero-text { 
            flex: 1 1 400px; max-width: 500px; order: 1;
            transition: all 0.4s ease;
            align-self: center;
        }
        .hero-text-inner { transition: all 0.4s ease; }
        .hero-text h1 { font-size: 2.8em; color: var(--neon-gold); text-shadow: 0 0 15px var(--neon-gold-glow); margin-bottom: 10px; line-height: 1.1; }
        .hero-text p.lead { font-size: 1.1em; color: #ccc; margin-bottom: 20px; line-height: 1.6; }
        .hero-text ul { list-style: none; padding: 0; margin-bottom: 0; }
        .hero-text li { margin-bottom: 10px; font-size: 1em; display: flex; align-items: center; gap: 10px; color: #ccc; }
        .hero-text li::before { content: '👁️‍🗨️'; font-size: 1.1em; }

/* ESCÁNER PRINCIPAL (MODO NORMAL) */
.hero-scanner { 
    flex: 1 1 400px; 
    max-width: 580px; /* Ampliado de 540px a 580px para que respiren los textos */
    display: flex; justify-content: center; order: 2;
    transition: all 0.4s ease; 
    margin-bottom: 20px;
}

        /* CAJA LATERAL DERECHA TIPO CHAT (OCULTA EN MODO NORMAL) */
        .results-sidebar {
            display: none; flex: 0 1 420px; max-width: 420px; width: 100%; order: 3;
            background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); 
            border-radius: 20px; padding: 25px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
            max-height: 70vh; overflow-y: auto; text-align: left;
        }

/* -------------------------------------------------------------
   MODO NORMAL: ESTRUCTURA CLásica (Banners arriba, Texto izq, Escáner der)
   ------------------------------------------------------------- */
/* 1. MODO NORMAL: Espaciado controlado sin huecos excesivos */
.hero-container {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center;
    min-height: auto !important; 
    padding: 16px 5% !important; 
    gap: 16px !important; 
    max-width: 1400px; 
    margin: 0 auto;
}

/* Posición por defecto en modo normal */
.hero-container .banner-wrapper-top {
    order: 1;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
}

.hero-container .hero-text { 
    order: 2;
    flex: 1 1 400px; 
    max-width: 500px; 
}

.hero-container .hero-scanner { 
    order: 3;
    flex: 1 1 400px; 
    max-width: 540px; 
    display: flex; 
    justify-content: center; 
}

.hero-container .banner-wrapper-bottom {
    order: 4;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
}

/* -------------------------------------------------------------
   1. MODO NORMAL: SEPARACIÓN HORIZONTAL Y VERTICAL DE BANNERS
   ------------------------------------------------------------- */
/* Posición y márgenes perfectos para los banners en modo normal */
.hero-container .banner-wrapper-top,
.hero-container .banner-wrapper-bottom {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important; /* Separación horizontal interna entre los banners */
    width: 100% !important;
    margin-top: 0 !important;       /* Arriba a 0 para que el gap del contenedor principal mande sin duplicarse */
    margin-bottom: 16px !important; /* Abajo le damos exactamente 16px de respiro para que no se pegue al siguiente bloque */
}


/* -------------------------------------------------------------
   2. ESTADO FOCUS MODE: AISLADO Y EQUILIBRADO (SIN MARGEN EXCESIVO)
   ------------------------------------------------------------- */
#hero-container.focus-mode { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; /* <--- Cambiado de center a flex-start para que arranque desde arriba */
    min-height: auto !important;
    padding: 10px 5% 20px 5% !important; /* <--- Ponle unos 10px o 15px arriba para que no pegue el hachazo a la barra superior */
    gap: 16px !important; 
}

/* Biometric Audit arriba */
#hero-container.focus-mode > .hero-text { 
    flex: unset !important; 
    max-width: 900px !important;
    width: 100% !important;
    order: 1 !important;
    display: flex !important; 
    justify-content: center !important; 
    margin: 0 !important; 
}

#hero-container.focus-mode > .hero-text > .hero-text-inner { 
    width: 100% !important; 
    max-width: 900px !important; 
    text-align: center;
    padding: 12px 20px !important; 
    background: rgba(0,0,0,0.4); 
    border-radius: 15px; 
    border: 1px solid rgba(255, 215, 0, 0.15);
}

#hero-container.focus-mode > .hero-text > .hero-text-inner h1 { 
    font-size: 1.8em !important; 
    margin-bottom: 5px !important; 
}

#hero-container.focus-mode > .hero-text > .hero-text-inner p.lead { 
    display: block !important; 
    font-size: 0.95em !important; 
    color: #ccc; 
    margin-bottom: 10px !important; 
}

/* Viñetas en una sola línea horizontal */
#hero-container.focus-mode > .hero-text > .hero-text-inner ul { 
    display: flex !important; 
    flex-direction: row !important;
    justify-content: center !important; 
    align-items: center !important; 
    gap: 25px !important; 
    margin: 5px 0 0 0 !important; 
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: nowrap !important; 
}

#hero-container.focus-mode > .hero-text > .hero-text-inner li { 
    font-size: 0.85em !important; 
    margin: 0 !important; 
    white-space: nowrap !important; 
}

/* Banners superiores en el sándwich del focus mode con su gap horizontal */
#hero-container.focus-mode > .banner-wrapper-top {
    order: 2 !important; 
    flex: unset !important;
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important; /* Mantiene la separación horizontal entre el banner grande y el cuadrado */
    width: 100% !important;
    margin: 20px 0 !important; /* Margen vertical limpio y definitivo de 20px */
}

#hero-container.focus-mode > .hero-scanner { 
    flex: unset !important; 
    max-width: 540px !important; 
    width: 100% !important; 
    order: 3 !important;
    margin: 0 auto 16px auto !important; /* El auto a los lados es lo único que necesitas */
    display: flex !important;
    justify-content: center !important;
}

/* Banners inferiores en el sándwich con su gap horizontal */
#hero-container.focus-mode > .banner-wrapper-bottom {
    order: 4 !important; 
    flex: unset !important;
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important; /* Mantiene la separación horizontal perfecta */
    width: 100% !important;
    margin: 5px 0 !important; /* Margen vertical controlado */
}

/* Prohibir el vuelo y choque de las cajas al entrar o estar en focus mode */
#hero-container.focus-mode .hero-text,
#hero-container.focus-mode .hero-scanner,
#hero-container.focus-mode .banner-wrapper-top {
    transition: opacity 0.3s ease !important;
}
        
        /* ------------------------------------------------------------- */

        /* RESULTADOS MODO NORMAL (DENTRO DE LA TARJETA DEL ESCÁNER) */
        #results-normal { 
            margin-top: 20px; display: none; border-top: 1px solid var(--glass-border); padding-top: 15px; 
            max-height: 350px; overflow-y: auto; text-align: left; width: 100%;
        }

        /* SCANNER PANEL BASE */
.glass-panel {
    background: var(--glass-bg); backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: 20px;
    padding: 50px 30px 30px 30px; /* Le damos 50px arriba para que no se pisen los botones con el título */
    width: 100%; position: relative; box-sizing: border-box; /* box-sizing asegura que el padding no desborde el ancho */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), 0 0 20px var(--neon-gold-glow) inset;
    text-align: center;
}
.glass-panel h2 { 
    margin-top: 0; font-weight: 300; letter-spacing: 2px; color: white; margin-bottom: 5px;
}
        
        /* FULLSCREEN TOGGLE BUTTON */
        .btn-fullscreen {
            position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.4);
            border: 1px solid var(--glass-border); color: var(--neon-gold); padding: 6px 12px;
            border-radius: 8px; cursor: pointer; font-size: 0.85em; transition: all 0.3s;
        }
        .btn-fullscreen:hover { background: var(--neon-gold); color: #000; box-shadow: 0 0 10px var(--neon-gold); }

        .upload-options { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .upload-area {
            border: 2px dashed var(--glass-border); border-radius: 15px; padding: 25px 10px;
            cursor: pointer; transition: all 0.3s ease; background: rgba(0,0,0,0.2); 
            flex: 1; min-width: 130px; display: flex; flex-direction: column; justify-content: center; align-items: center;
        }
        .upload-area:hover { border-color: var(--neon-gold); box-shadow: 0 0 15px var(--neon-gold-glow); background: rgba(255, 215, 0, 0.05); }
        #file-input { display: none; }

/* CONTENEDOR DE LA CÁMARA FIJO PARA EVITAR SALTOS */
#camera-container { 
    display: none; 
    margin-bottom: 20px; 
    position: relative; 
    border-radius: 15px; 
    overflow: hidden; 
    border: 2px solid var(--neon-gold); 
    background: #000; 
    width: 100%;
    max-width: 420px;       /* Unos píxeles más ancho como pedías */
    min-height: 320px;      /* Altura fija mínima para que no encoja antes de arrancar */
    margin-left: auto;
    margin-right: auto;
}

#video-feed { 
    width: 100%; 
    height: 320px;          /* Forzamos que el vídeo respete la altura del contenedor */
    object-fit: cover;      /* Evita distorsiones y llena el espacio uniformemente */
    transform: scaleX(-1); 
    display: block; 
}

#face-guide {
    position: absolute; 
    top: 38%; /* Subido unos píxeles para despejar la barra inferior */
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 180px; 
    height: 220px;
    border: 3px dashed var(--neon-gold); 
    border-radius: 50%; 
    transition: border-color 0.3s;
    pointer-events: none;
    z-index: 10;
}

.ui-overlay { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: rgba(0,0,0,0.9); 
    padding: 12px 0; 
    border-top: 2px solid var(--neon-gold);
    z-index: 20;
    text-align: center;
}

/* CENTRADO PERFECTO DENTRO DEL POP-UP */
.modal-content, .scanner-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scanner-header-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 5px;
}

.close-scanner-btn {
    background: transparent;
    border: none;
    color: var(--neon-gold, #ffcc00);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.close-scanner-btn:hover {
    color: #fff;
}

/* AJUSTES EXCLUSIVOS PARA EL CONTENEDOR DEL MODAL */
#camera-container-modal {
    display: none; 
    position: relative; 
    text-align: center; 
    margin-bottom: 15px;
    min-height: 360px; /* Altura independiente para el pop-up */
}

#video-feed-modal {
    width: 100%; 
    height: 360px; 
    object-fit: cover; 
    border-radius: 10px; 
    transform: scaleX(-1);
    display: block;
}

/* Óvalo exclusivo para el modal para que no choque con las instrucciones de abajo */
#scannerModal #face-guide {
    position: absolute; 
    top: 40%; /* Un pelín más arriba para dejar espacio libre a la barra de texto */
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 170px; 
    height: 210px;
    border: 3px dashed var(--neon-gold, #ffcc00); 
    border-radius: 50%; 
    pointer-events: none;
    z-index: 10;
}
        #camera-instructions { color: #fff; font-weight: bold; font-size: 1.05em; margin: 0 0 3px 0; text-shadow: 1px 1px 3px #000; }
        #camera-hint { font-size: 0.8em; color: #aaa; margin: 0 0 8px 0; }
        #progress-bar-container { width: 80%; height: 6px; background: #333; margin: 0 auto; border-radius: 3px; overflow: hidden; }
        #progress-bar { width: 0%; height: 100%; background: #00ff00; transition: width 0.1s linear; }
        
        #flash-effect {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: white; opacity: 0; pointer-events: none; z-index: 9999;
            transition: opacity 0.15s ease-out;
        }

        .slider-container { margin-bottom: 20px; text-align: left; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 10px; border: 1px solid var(--glass-border); }
        .slider-container label { font-size: 0.85em; color: #ccc; display: flex; justify-content: space-between; margin-bottom: 5px;}
        input[type=range] { width: 100%; accent-color: var(--neon-gold); cursor: pointer; }

        .btn-neon {
            background: transparent; color: var(--neon-gold); border: 2px solid var(--neon-gold);
            padding: 12px 40px; font-size: 1.1em; border-radius: 30px; cursor: pointer;
            text-transform: uppercase; letter-spacing: 2px; font-weight: bold; transition: all 0.3s ease;
            box-shadow: 0 0 10px var(--neon-gold-glow), inset 0 0 10px var(--neon-gold-glow); width: 100%;
        }
        .btn-neon:hover { background: var(--neon-gold); color: #000; box-shadow: 0 0 20px var(--neon-gold), 0 0 40px var(--neon-gold); }
        .btn-merge { font-size: 0.8em; padding: 8px 20px; border-color: #00ff00; color: #00ff00; box-shadow: 0 0 10px rgba(0,255,0,0.4); margin-top: 10px; width: 100%;}
        .btn-merge:hover { background: #00ff00; color: #000; box-shadow: 0 0 20px #00ff00; }

        .match-card { background: rgba(0,0,0,0.4); border: 1px solid var(--glass-border); border-radius: 10px; padding: 12px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center;}

        /* PRICING */
        .pricing-section { padding: 80px 5%; text-align: center; background: rgba(0,0,0,0.4); border-top: 1px solid #222;}
        .pricing-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; max-width: 1400px; margin: 40px auto 0; }
        .price-card { background: var(--glass-bg); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; padding: 30px; flex: 1; min-width: 250px; max-width: 300px; text-align: left; display: flex; flex-direction: column; }
        .price-card.popular { border-color: var(--neon-gold); transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 215, 0, 0.15); position: relative; z-index: 10;}
        .price-card h3 { margin-top: 0; font-size: 1.5em; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;}
        .price-card h2 { font-size: 2.5em; margin: 10px 0; }
        .price-card ul { list-style-type: '✔️ '; padding-left: 20px; color: #bbb; line-height: 1.8; flex-grow: 1;}
        .price-card .cross { color: #555; list-style-type: '❌ '; text-decoration: line-through; }

/* Contenedor global que alinea los 3 elementos en línea perfecta */
.moderation-module-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 30px auto;
    max-width: 1100px;
    width: 100%;
}

/* MODERATION MODULE (Ahora es solo la caja central del vídeo) */
.moderation-module {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.mod-wallet {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-gold);
    border-radius: 10px;
    padding: 5px 15px;
    display: inline-block;
    font-size: 14px;
    margin-bottom: 15px;
}

/* Tarjeta con tamaño horizontal fijo y limpio */
.tinder-container {
    width: 580px;
    height: 330px;
    position: relative;
    perspective: 1000px;
    margin: 0 auto;
}

.tinder-card {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
    cursor: grab;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-out; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.tinder-card:active {
    cursor: grabbing;
}

.tinder-card video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: 15px;
}

/* Pantalla de carga */
.video-loader {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #111;
    color: #00ffcc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    z-index: 5;
    transition: opacity 0.3s ease;
}

/* Sellos (Stamps) al deslizar */
.stamp {
    position: absolute;
    top: 30px;
    padding: 5px 10px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 8px;
    text-transform: uppercase;
    opacity: 0;
    z-index: 10;
    pointer-events: none;
}
.stamp-nope {
    right: 30px;
    color: #ff3333;
    border: 3px solid #ff3333;
    transform: rotate(15deg);
}
.stamp-like {
    left: 30px;
    color: #00ffcc;
    border: 3px solid #00ffcc;
    transform: rotate(-15deg);
}

/* BOTONES LATERALES 100% FUERA */
.tinder-side-btn {
    padding: 15px 25px;
    border-radius: 30px; 
    border: none;
    font-size: 15px;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    height: fit-content;
}
.tinder-side-btn:active { transform: scale(0.9); }

.btn-nope {
    background: transparent; color: #ff3333;
    border: 2px solid #ff3333;
}
.btn-nope:hover { background: rgba(255,51,51,0.1); box-shadow: 0 0 15px #ff3333; }

.btn-like {
    background: transparent; color: #00ffcc;
    border: 2px solid #00ffcc;
}
.btn-like:hover { background: rgba(0,255,204,0.1); box-shadow: 0 0 15px #00ffcc; }

/* Pantalla que aparece cuando el vídeo termina */
.video-ended-screen {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 10, 10, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    z-index: 6;
    border-radius: 15px;
}

/* Contenedor maestro: Margen simétrico arriba y abajo, centrado perfecto */
.moderation-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1100px;
    margin: 20px auto; /* Margen superior e inferior idénticos y controlados */
    gap: 20px; /* Distancia exacta y uniforme entre el minijuego y los banners de abajo */
    padding: 0 15px;
}

/* Fila principal del minijuego */
.moderation-module-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    width: 100%;
    margin: 0; /* Eliminamos márgenes internos parásitos */
}

/* Contenedor de los banners inferiores para que respiren igual */
.banner-wrapper.vip-ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-top: 0; /* Evita que sume separación extra por arriba */
    margin-bottom: 10px; /* Margen inferior bien comedido */
}