/* --- 1. VARIABLES & BRANDING (MODO OSCURO / CLARO) --- */
:root {
    /* --- MODO OSCURO (POR DEFECTO) --- */
    --brand-primary: #2e0fd7;
    --live-red: #ff3b3b;

    /* Variables de Color Dinámicas */
    --bg-body: #151617;
    --bg-nav: rgba(21, 22, 23, 0.98);
    --bg-card: #0f1012;
    --bg-footer-bar: #0d0e10;
    --bg-footer-slim: #000000;

    --text-main: #ffffff;
    --text-muted: #a0aab5;
    --text-inverse: #000000;

    --border-color: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-hover: rgba(255, 255, 255, 0.1);

    /* --- TIPOGRAFÍAS & CONFIG --- */
    --font-headings: 'obviously', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --header-height: 100px;
    --container-width: 1400px;
}

/* --- MODO CLARO (LIGHT MODE) --- */
[data-theme="light"] {
    --bg-body: #f0f2f5;
    --bg-nav: rgba(255, 255, 255, 0.98);
    --bg-card: #ffffff;
    --bg-footer-bar: #e0e0e0;
    --bg-footer-slim: #d6d6d6;

    --text-main: #1a1a1a;
    --text-muted: #555555;
    --text-inverse: #ffffff;

    --border-color: rgba(0, 0, 0, 0.1);
    --glass-bg: rgba(0, 0, 0, 0.05);
    --glass-hover: rgba(0, 0, 0, 0.08);
}

/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- BODY (TU ESTRUCTURA ORIGINAL) --- */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;

    /* BLOQUEO TOTAL DE SCROLL EN ESCRITORIO */
    height: 100vh;
    width: 100vw;
    overflow: hidden;

    /* ORGANIZACIÓN FLEXIBLE */
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .logo {
    font-family: var(--font-headings);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 2. HEADER (TU ESTRUCTURA ORIGINAL) --- */
.main-header {
    background-color: var(--bg-nav);
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(46, 15, 215, 0.3);
    /* RESTAURADO: Tu padding asimétrico original */
    padding: 0 10% 0 15%;
    display: flex;
    align-items: center;
    backdrop-filter: blur(15px);
    transition: background-color 0.3s ease;
}

/* LOGO */
.logo {
    flex-shrink: 0;
	margin-left: -5%;
    margin-right: 5%; /* Restaurado tu margen original */
    display: flex;
    align-items: center;
    height: 100%;
}
.logo a { display: block; line-height: 0; }
.logo img {
    height: 55px; width: auto; object-fit: contain; transition: var(--transition);
}
.logo a:hover img { opacity: 0.8; transform: scale(1.05); }

/* NAVEGACIÓN */
nav {
    flex: 1;
    height: 100%;
}

.nav-menu {
    display: flex; height: 100%; align-items: center;
    list-style: none; width: 100%;
    /* RESTAURADO: Space-between para que ocupe todo el ancho */
    justify-content: space-between;
}

.nav-menu > li { height: 100%; display: flex; align-items: center; }

.nav-link {
    font-family: var(--font-headings);
    font-weight: 800; font-size: 1.1rem; color: var(--text-main);
    text-decoration: none; text-transform: uppercase;
    transition: var(--transition); position: relative; letter-spacing: 0.5px; white-space: nowrap;
}
.nav-link:hover { color: var(--brand-primary); text-shadow: 0 0 15px rgba(46, 15, 215, 0.8); }

/* --- SUBMENUS --- */
.has-submenu { position: relative; }

.submenu {
    position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    background-color: var(--bg-card);
    display: flex; flex-direction: row; gap: 0; padding: 0;
    min-width: max-content; list-style: none;
    opacity: 0; visibility: hidden; transition: var(--transition);
    border: 1px solid rgba(46, 15, 215, 0.2); border-top: 2px solid var(--brand-primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 2000;
}

.has-submenu:hover .submenu { opacity: 1; visibility: visible; }

.submenu li a {
    display: block; padding: 15px 20px; color: var(--text-muted); text-decoration: none;
    font-family: var(--font-headings); font-size: 0.9rem; font-weight: 600;
    text-transform: uppercase; transition: var(--transition); white-space: nowrap; line-height: 1.2;
}
.submenu li a:hover { color: var(--brand-primary); background-color: var(--glass-bg); }

/* SUBMENU TEAMS */
.submenu-teams { padding: 10px; gap: 10px; }

.submenu-teams li a.team-box {
    width: 50px; height: 50px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--glass-bg); border: 1px solid var(--border-color);
    transition: var(--transition);
}

/* AQUÍ ESTÁ EL CAMBIO: */
.submenu-teams li a.team-box img {
    max-width: 70%; max-height: 70%;
    filter: grayscale(0%) !important; /* SIEMPRE A COLOR */
    transition: var(--transition);
}

.submenu-teams li a.team-box:hover {
    border-color: var(--brand-primary);
    background-color: rgba(46, 15, 215, 0.2);
}

.submenu-teams li a.team-box:hover img {
    /* Ya no necesitamos quitar el gris porque no lo tienen */
    transform: scale(1.1); /* Solo hacemos zoom */
}
/* LIVE & SHARE */
.special-live .nav-link { color: var(--live-red); display: flex; align-items: center; gap: 8px; }
.live-dot { width: 8px; height: 8px; background-color: var(--live-red); border-radius: 50%; box-shadow: 0 0 15px var(--live-red); animation: pulse 1.5s infinite; }

.share-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--glass-bg); border: 1px solid var(--border-color);
    font-size: 1.1rem; border-radius: 4px; transition: var(--transition); color: var(--text-main);
    margin: 0;
}
.share-btn:hover, .has-submenu:hover .share-btn { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #fff; box-shadow: 0 0 20px rgba(46, 15, 215, 0.6); }

/* =========================================
   SWITCH TEMA (DARK / LIGHT)
   ========================================= */

/* El contenedor del switch */
.theme-switch-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 140px; /* Ancho total del switch */
    height: 36px;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro semitransparente */
    border: 1px solid var(--border-color);
    border-radius: 30px; /* Forma redondeada */
    cursor: pointer;
    padding: 0 5px;
    overflow: hidden;
    transition: border-color 0.3s;
}

.theme-switch-wrapper:hover {
    border-color: var(--brand-primary);
}

/* Los textos (LIGHT y DARK) */
.switch-label {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    z-index: 2; /* Para que queden por encima de la pastilla */
    color: #888; /* Color apagado por defecto */
    transition: color 0.3s ease;
    user-select: none; /* Evita que se seleccione el texto al hacer clic */
}

/* La pastilla móvil (El fondo activo) */
.switch-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px); /* Ocupa la mitad menos el margen */
    height: calc(100% - 6px);
    background-color: var(--brand-primary); /* Color Azul DimoniX */
    border-radius: 25px;
    z-index: 1; /* Detrás del texto */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Movimiento suave */

    /* POR DEFECTO (DARK MODE): La pastilla está a la derecha */
    transform: translateX(100%);
}

/* --- ESTADOS ACTIVOS --- */

/* 1. MODO OSCURO (Default): Resaltamos el texto DARK */
html:not([data-theme="light"]) .label-dark {
    color: #fff;
}

/* 2. MODO CLARO (Cuando data-theme="light"): Movemos la pastilla a la izquierda */
html[data-theme="light"] .switch-slider {
    transform: translateX(0%); /* Se va al inicio (Izquierda) */
}

/* Y resaltamos el texto LIGHT */
html[data-theme="light"] .label-light {
    color: #fff; /* O negro si prefieres contraste sobre el azul */
}

/* Ajuste Responsive para móvil (opcional, si lo ves muy grande) */
@media (max-width: 1200px) {
    .theme-switch-wrapper {
        width: 120px;
        height: 40px; /* Un poco más alto para dedos */
        margin-top: 10px; /* Separación en el menú móvil */
    }
}

/* Submenu Redes */
.social-menu-item .submenu {
    flex-direction: column; width: 40px; min-width: 40px;
    left: 50%; transform: translateX(-50%); right: auto; top: 100%;
    padding: 5px 0; gap: 0; border-radius: 0 0 4px 4px;
}
.social-menu-item:hover .submenu { transform: translateX(-50%); }
.social-menu-item .submenu li { width: 100%; text-align: center; }
.social-menu-item .submenu li a { padding: 10px 0; font-size: 1rem; display: flex; justify-content: center; width: 100%; }
.social-menu-item .submenu li a:hover { background: transparent; color: var(--brand-primary); transform: scale(1.2); }

/* HAMBURGER */
.hamburger { display: none; cursor: pointer; font-size: 2rem; color: var(--text-main); margin-left: 20px; }

/* --- 3. HERO SECTION (TU ESTRUCTURA ORIGINAL) --- */
.hero-section {
    position: relative; width: 100%; flex: 1; margin-top: var(--header-height);
    display: flex; align-items: center; overflow: hidden;
    background: url('../img/fondo.webp');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    z-index: 1;
}

.hero-split-container {
    position: relative; z-index: 2; width: 100%; max-width: 1800px;
    display: flex; align-items: center; justify-content: space-between; gap: 60px;
    padding-left: 10%; padding-right: 5%;
}

.hero-split-left { flex: 1; max-width: 650px; text-align: left; }
.hero-title {
    font-size: clamp(3.5rem, 7vw, 7rem);
    line-height: 0.95;
    margin-bottom: 25px;
    color: #fff;
    text-shadow: 0 0 50px rgba(46, 15, 215, 0.3);

    /* --- NUEVO: KERNING APRETADO --- */
    letter-spacing: -14px; /* Esto junta las letras */
}
.hero-title span { color: var(--brand-primary); display: block; }
.hero-subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 40px; font-family: var(--font-body); max-width: 90%; line-height: 1.5; }
.hero-buttons { display: flex; gap: 20px; justify-content: flex-start; }

.hero-split-right { flex: 1.2; display: flex; justify-content: flex-end; }
.video-wrapper {
    position: relative; width: 100%; max-width: 900px; border-radius: 12px; overflow: hidden;
    border: 1px solid rgba(46, 15, 215, 0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: perspective(1000px) rotateY(-5deg); transition: var(--transition);
}
.video-wrapper:hover { transform: perspective(1000px) rotateY(0deg) scale(1.02); border-color: var(--brand-primary); }
.video-wrapper video { width: 100%; height: auto; display: block; object-fit: cover; }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(46, 15, 215, 0.2), transparent); pointer-events: none; }

/* Controles Vídeo */
.video-controls { position: absolute; bottom: 20px; right: 20px; z-index: 10; display: flex; gap: 10px; }
.video-btn {
    width: 32px; height: 32px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.6); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; transition: var(--transition);
}
.video-btn:hover { background-color: var(--brand-primary); border-color: var(--brand-primary); transform: scale(1.1); }

/* Botones Hero */
.btn { display: inline-block; padding: 18px 40px; font-family: var(--font-headings); font-weight: 800; text-transform: uppercase; text-decoration: none; font-size: 1rem; clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%); transition: var(--transition); }
.btn-primary { background-color: var(--brand-primary); color: #fff; border: 1px solid var(--brand-primary); }
.btn-primary:hover { background-color: #fff; color: var(--brand-primary); transform: translateY(-5px); box-shadow: 0 0 40px rgba(46, 15, 215, 0.7); }
.btn-secondary { background-color: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn-secondary:hover { border-color: #fff; background-color: rgba(255,255,255,0.05); }

/* --- 4. FOOTER --- */
.main-footer-wrapper { flex-shrink: 0; width: 100%; z-index: 10; }
.sponsors-bar { background-color: var(--bg-footer-bar); padding: 25px 0; text-align: center; border-top: 1px solid var(--border-color); overflow: hidden; transition: background-color 0.3s; }
.sponsors-bar:hover .carousel-track { animation-play-state: paused; }
.carousel-window { width: 100%; overflow: hidden; position: relative; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.carousel-track { display: flex; align-items: center; gap: 80px; width: max-content; animation: scroll-left 40s linear infinite; }
.carousel-track a { display: block; line-height: 0; }
.carousel-track img { height: 40px; width: auto; opacity: 0.5; filter: grayscale(100%); transition: all 0.3s; cursor: pointer; }
.sponsors-bar:hover .carousel-track img { opacity: 0.8; }
.carousel-track img:hover { opacity: 1 !important; filter: grayscale(0%) !important; transform: scale(1.1); }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.slim-footer { background-color: var(--bg-footer-slim); border-top: 1px solid var(--border-color); padding: 15px 0; font-size: 0.85rem; width: 100%; transition: background-color 0.3s; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
.container-fluid { width: 100%; padding: 0 20px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; }
.footer-left { display: flex; align-items: center; gap: 15px; color: var(--text-muted); }
.footer-left a { color: var(--text-muted); text-decoration: none; transition: var(--transition); }
.footer-left a:hover { color: var(--brand-primary); }
.footer-right { display: flex; gap: 15px; }
.footer-right a { color: var(--text-muted); font-size: 1rem; transition: var(--transition); }
.footer-right a:hover { color: var(--text-main); transform: translateY(-2px); }

/* --- 5. ULTRA WIDE / 4K OPTIMIZATION --- */
@media (min-width: 1921px) {
    :root { --header-height: 140px; --container-width: 1800px; }
    .nav-link { font-size: 1.5rem; }
    .logo img { height: 80px; }
    .share-btn { width: 60px; height: 60px; font-size: 1.5rem; }
    .hero-split-container { max-width: 2600px; gap: 100px; padding-left: 12%; }
    .hero-title { font-size: 8rem; }
    .hero-subtitle { font-size: 1.8rem; max-width: 800px; }
    .btn { padding: 25px 60px; font-size: 1.3rem; }
    .video-wrapper { max-width: 1600px; }
    .video-btn { width: 50px; height: 50px; font-size: 1.2rem; }
    .slim-footer { font-size: 1.1rem; padding: 25px 0; }
    .carousel-track img { height: 60px; }
}

/* --- 6. SUBMENU IN LIVE (CORREGIDO) --- */
.submenu-live {
    flex-direction: column;
    width: 120px;
    min-width: auto;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 0;
    gap: 15px;
    align-items: center;
}
.submenu-live li { width: 100%; display: flex; justify-content: center; }

/* 1. CAJA STREAMER (ESTADO BASE: OFFLINE) */
/* ¡AQUÍ ESTABA EL ERROR! TIENE QUE SER 60px, NO 100% */
.live-box {
    width: 60px !important;   /* Ancho fijo circular */
    height: 60px !important;  /* Alto fijo circular */

    position: relative;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.3s ease;
    overflow: visible;
}

/* 2. IMAGEN (SIEMPRE 60px + RECORTE FÍSICO) */
.live-box img {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px; min-height: 60px;

    object-fit: cover;

    /* Tijeretazo para que sea circular sí o sí */
    clip-path: circle(50% at 50% 50%);
    -webkit-clip-path: circle(50% at 50% 50%);

    border-radius: 50%;

    filter: grayscale(100%);
    transition: var(--transition);
    z-index: 2; display: block;
}
/* Punto Offline (CORREGIDO Y FORZADO ENCIMA) */
.live-status-dot {
    position: absolute;
    /* Ajustamos a 3px para que quede justo en el borde visual del círculo */
    bottom: 3px;
    right: 3px;

    width: 13px;
    height: 13px;
    background-color: #666;
    border: 2px solid #0f1012;
    border-radius: 50%;

    /* Z-INDEX ALTO */
    z-index: 100;

    /* TRUCO NUCLEAR: Esto obliga al navegador a crear una capa 3D nueva
       para el punto, asegurando que se pinte ENCIMA de la imagen recortada */
    transform: translateZ(10px);
    will-change: transform;
    pointer-events: none; /* Para que no moleste al hacer clic */
}
/* Punto Offline
.live-status-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 13px; height: 13px;
    background-color: #666;
    border: 2px solid #0f1012; border-radius: 50%;
    z-index: 30;
}*/

/* Hover en Offline */
.live-box:not(.is-live):hover { border-color: var(--text-main); transform: scale(1.05); }
.live-box:not(.is-live):hover img { filter: grayscale(0%); }


/* 3. ESTADO ONLINE (AQUÍ SÍ CRECE AL 100%) */
.live-box.is-live {
    width: 100% !important; /* SOLO cuando está live ocupa todo el ancho */
    height: auto !important;

    border: none; background-color: transparent; border-radius: 0;
    display: flex; flex-direction: column; align-items: center;
    margin-bottom: 5px;
}

.live-box.is-live img {
    filter: grayscale(0%);
    border: 2px solid var(--live-red);
    box-shadow: 0 0 15px rgba(255, 59, 59, 0.3);
}

.live-box.is-live .live-status-dot { display: none; }

.live-box.is-live::after {
    content: "EN DIRECTO";
    display: block; width: 100%;
    background-color: var(--live-red);
    color: #fff;
    font-family: var(--font-headings);
    font-weight: 800; font-size: 0.65rem;
    letter-spacing: 1.5px; text-align: center;
    padding: 10px 0 5px 0; margin-top: -15px;
    border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    z-index: 1; animation: pulse 2s infinite;
}
/* CORRECCIÓN: Solo quitamos el ::before (que suele ser subrayados del menú)
   pero RESPETAMOS el ::after si tiene la clase .is-live */

.submenu-live .live-box:not(.is-live)::after,
.submenu-live .live-box::before {
  content: none !important;
  display: none !important;
}
/* Quita overlays/efectos globales de los links del menú dentro del live
.submenu-live .live-box::before,
.submenu-live .live-box::after {
  content: none !important;
  display: none !important;
}*/

/* --- 7. RESPONSIVE MOVIL / TABLET (MENOR A 1200PX) --- */
@media (max-width: 1200px) {
    /* ... (MANTÉN TU CÓDIGO DEL BODY Y HERO AQUÍ) ... */
	/* AJUSTE DE TÍTULO PARA MÓVIL (Más legible) */
    .hero-title {
        letter-spacing: -7px !important; /* Separamos las letras un poco */
        line-height: 1.1; /* Damos un poco más de aire vertical también */
    }

    /* Si usaste la animación, aseguramos que los spans respeten esto */
    .hero-title span {
        letter-spacing: -7px !important;
    }

    body { height: auto; overflow-x: hidden; overflow-y: auto; }
    .hero-section { min-height: 80vh; flex: none; margin-top: 100px; }
    .hero-split-container { flex-direction: column; padding: 40px 20px; text-align: center; }
    .hero-split-left { max-width: 100%; text-align: center; order: 2; }
    .hero-buttons { justify-content: center; }
    .hero-split-right { width: 100%; order: 1; }
    .video-wrapper { transform: none; }

    .main-header { padding: 0 5%; justify-content: space-between; }
    .logo { margin-right: 0; }
    .hamburger { display: block; }

    /* MENÚ MÓVIL PRINCIPAL */
    .nav-menu {
        display: none; flex-direction: column;
        position: fixed; top: 100px; left: 0;
        width: 100%; height: calc(100vh - 100px);
        background: var(--bg-body);
        justify-content: flex-start; padding: 50px 20px; gap: 20px;
        overflow-y: auto; border-top: 1px solid var(--border-color);
    }

    .nav-menu.active { display: flex; z-index: 3000; }

    /* ELEMENTOS DE LISTA */
    .nav-menu > li {
        height: auto; width: 100%;
        justify-content: center; flex-direction: column;
        /* Importante: Evitamos alineaciones raras */
        align-items: center;
    }

    .nav-link { font-size: 1.5rem; margin-bottom: 10px; width: 100%; text-align: center; }

    /* --- CORRECCIÓN 1: OCULTAR REDES SOCIALES EN MÓVIL --- */
    .social-menu-item {
        display: none !important;
    }

    /* --- CORRECCIÓN 2: TEAMS (FILA CENTRADA Y ESTABLE) --- */
    .has-submenu:hover .submenu, .submenu {
        position: static; opacity: 1; visibility: visible;
        transform: none; background: transparent; box-shadow: none; border: none;
        flex-direction: column; padding: 10px 0; width: 100%;
        text-align: center; min-width: auto;
    }
/* --- CORRECCIÓN 3: LIVE MENU (CENTRADO OBLIGATORIO) --- */
    .submenu-live {
        /* Aseguramos que la columna de streamers esté centrada */
        align-items: center !important;
        width: 100% !important;
    }

    /* Forzamos que los LI del live también se centren */
    .submenu-live li {
        justify-content: center !important;
    }
    /* Ajuste específico para TEAMS */
    .submenu-teams {
        flex-direction: row !important; /* Forzamos fila */
        flex-wrap: wrap; /* Si no caben, bajan */
        justify-content: center !important; /* Centrado absoluto */
        gap: 15px;
        padding-bottom: 20px;
    }

    /* Importante: Los LI de teams no deben medir el 100% */
    .submenu-teams li {
        width: auto !important;
        display: flex;
        justify-content: center;
        margin: 0 !important;
    }

    /* Quitamos efectos raros al tocar */
    .submenu-teams li a.team-box:hover {
        transform: none; /* Evita saltos */
        background-color: var(--glass-bg); /* Mantiene color suave */
    }

    .footer-row { flex-direction: column; gap: 15px; text-align: center; }
}
/* =========================================
   AJUSTES FINALES MODO CLARO (LOGO + SPONSORS)
   ========================================= */

/* 1. LOGO PRINCIPAL */
[data-theme="light"] .logo img {
    content: url('../img/logo-negro-web.png');
}

/* 2. PATROCINADORES */
[data-theme="light"] .sponsors-bar {
    background-color: #e0e0e0;
    border-top: 1px solid #ccc;
}
[data-theme="light"] .carousel-track img {
    filter: grayscale(100%) invert(1) !important;
    opacity: 0.8;
}
[data-theme="light"] .carousel-track img:hover {
    filter: grayscale(0%) invert(0) !important;
    opacity: 1;
}
/* OFFLINE: círculo que recorta sí o sí */
.submenu-live .live-box{
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 !important;
  overflow: hidden !important;     /* 🔥 CLAVE: recorta */
}

/* La imagen se adapta al círculo */
.submenu-live .live-box img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 50% !important;

  /* fuera clip-path, no hace falta */
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* El puntito offline puede quedar fuera un pelín sin romper el recorte */
.submenu-live .live-status-dot{
  bottom: 2px;
  right: 2px;
  z-index: 9;
}

/* ONLINE: el contenedor deja de ser circular, pero la foto sigue siendo 60x60 circular */
.submenu-live .live-box.is-live{
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.submenu-live .live-box.is-live img{
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
}
/* --- FIX BADGE "EN DIRECTO" cuando está live --- */
.submenu-live .live-box.is-live{
  position: relative;
  overflow: visible !important; /* que el badge se vea */
}

.submenu-live .live-box.is-live img{
  position: relative;
  z-index: 2; /* la foto arriba del fondo */
}

/* Badge */
.submenu-live .live-box.is-live::after{
  content: "EN DIRECTO";
  display: block;
  width: 100%;

  position: relative;  /* importante para z-index */
  z-index: 3;          /* por encima de todo */

  background-color: var(--live-red);
  color: #fff;
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  text-align: center;

  padding: 10px 0 5px 0;
  margin-top: -15px;

  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  animation: pulse 2s infinite;
}
.submenu-live a.live-box.is-live::after{ content:"EN DIRECTO" !important; }

/* PRUEBAS HERO CON OTRO FONDO */
.nav-link.active {
    color: var(--brand-primary);
    text-shadow: 0 0 15px rgba(46, 15, 215, 0.6);
}

/* Opcional: una barrita debajo para que se note más */
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--brand-primary);
    box-shadow: 0 0 10px var(--brand-primary);
}
/* =========================================
   ANIMACIONES DE ENTRADA (HERO TITLE)
   ========================================= */

/* Configuración base para las palabras */
.hero-title span {
    display: inline-block; /* Necesario para que el transform funcione */
    opacity: 0; /* Invisibles al principio */
    /* "forwards" asegura que se queden visibles al terminar la animación */
    animation-fill-mode: forwards;
    /* Curva de velocidad "cubic-bezier" para un efecto de frenada suave y deportivo */
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* --- 1. PALABRA "WE" (Desde Arriba) --- */
.anim-text-top {
    animation-name: slideInDown;
    animation-duration: 0.8s;
    animation-delay: 0.2s; /* Empieza un poquito después de cargar */
}

/* --- 2. PALABRA "ARE" (Desde la Izquierda) --- */
.anim-text-left {
    animation-name: slideInLeft;
    animation-duration: 0.8s;
    animation-delay: 0.4s; /* Espera a que salga "WE" */
    margin-left: 15px; /* Un pequeño ajuste para separarlo de WE */
}

/* --- 3. PALABRA "DIMONIX" (Desde la Derecha) --- */
.anim-text-right {
    animation-name: slideInRight;
    animation-duration: 1s; /* Un poco más lenta para dar dramatismo */
    animation-delay: 0.6s; /* La última en salir */
    color: var(--brand-primary); /* Mantenemos el color azul */
    display: block !important; /* Aseguramos que rompa la línea */
}


/* --- DEFINICIÓN DE LOS MOVIMIENTOS DE LAS LETRAS DE TITULO (KEYFRAMES) --- */

/* Mover desde Arriba */
@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-50px); /* Empieza 50px arriba */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Termina en su sitio */
    }
}

/* Mover desde Izquierda */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px); /* Empieza 50px a la izquierda */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mover desde Derecha */
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(50px) scale(0.9); /* Empieza a la derecha y un pelín más pequeño */
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1); /* Termina en su sitio y tamaño normal */
    }
}
/* --- 1. PALABRA "WE" (Blanco) --- */
.anim-text-top {
    animation-name: slideInDown;
    animation-duration: 0.8s;
    animation-delay: 0.2s;
    color: #fff !important; /* FORZAMOS BLANCO */
}

/* --- 2. PALABRA "ARE" (Blanco) --- */
.anim-text-left {
    animation-name: slideInLeft;
    animation-duration: 0.8s;
    animation-delay: 0.4s;
    margin-left: 15px;
    color: #fff !important; /* FORZAMOS BLANCO */
}

/* --- 3. PALABRA "DIMONIX" (Azul) --- */
.anim-text-right {
    animation-name: slideInRight;
    animation-duration: 1s;
    animation-delay: 0.6s;
    color: var(--brand-primary); /* ESTE SÍ SE QUEDA AZUL */
    display: block !important;
}
/* =========================================
   LAYOUT V3: TEXTO IZQUIERDA - FOTOS DERECHA (AJUSTADO PARA 3 EQUIPOS)
   ========================================= */

.teams-layout-v3 {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* CAMBIO 1: Reducimos padding lateral para ganar espacio */
    padding: 80px 2% 0 2%;
    gap: 2%;
}

/* --- 1. ÁREA DE TEXTO (Izquierda) --- */
.text-area {
    flex: 0 0 auto;
    /* CAMBIO 2: Reducimos el ancho del texto del 35% al 25% */
    width: 25%;
    text-align: left;
    z-index: 10;
    padding-left: 20px;
}

.text-area .hero-title {
    /* Ajuste de fuente para que no ocupe tanto */
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 0.9;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.text-area .hero-subtitle {
    font-size: 1rem;
    opacity: 0.8;
    max-width: 100%;
    line-height: 1.4;
}

/* --- 2. ÁREA DE POSTERS (Derecha) --- */
.posters-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* CAMBIO 3: Menos espacio entre tarjetas (antes 30px) */
    gap: 15px;
    height: 100%;
}

/* --- LA TARJETA (POSTER) --- */
.poster-card {
    display: block;
    position: relative;

    /* CAMBIO 4 (EL MÁS IMPORTANTE):
       Bajamos la altura de 65vh a 50vh.
       Al ser menos altas, las imágenes se vuelven automáticamente menos anchas y caben las 3. */
    height: 50vh;
    width: auto;

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* IMAGEN (Sin cortes) */
.poster-card img {
    height: 100%;
    width: auto;
    border-radius: 12px;
    display: block;
    object-fit: contain;
}

/* ETIQUETA (Nombre del juego) */
.poster-label {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: var(--font-headings);
    font-weight: 800;
    font-size: 1.2rem; /* Un pelín más pequeño */
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    pointer-events: none;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* --- EFECTOS HOVER --- */
.poster-card:hover {
    /* Al pasar el ratón crece un poco */
    transform: translateY(-10px) scale(1.05);
    border-color: var(--brand-primary);
    box-shadow: 0 0 50px rgba(46, 15, 215, 0.3);
    z-index: 5;
}

.poster-card:hover .poster-label {
    opacity: 1;
    transform: translateY(0);
}


/* --- RESPONSIVE TABLET/PORTÁTIL PEQUEÑO (Nuevo) --- */
/* Entre 1024px y 1400px (pantallas de portátiles normales) */
@media (max-width: 1400px) and (min-width: 1025px) {
    .text-area { width: 20%; } /* Texto aún más estrecho */
    .poster-card { height: 40vh; } /* Cartas más pequeñas */
    .hero-title { font-size: 3rem; }
}


/* --- RESPONSIVE MÓVIL (Mantenemos tu lógica original) --- */
@media (max-width: 1024px) {
    .teams-layout-v3 {
        flex-direction: column;
        height: auto;
        padding: 120px 20px 50px 20px;
        gap: 40px;
        text-align: center;
    }

    .text-area {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        padding-left: 0;
    }

    .text-area .hero-subtitle {
        margin: 0 auto;
    }

    .posters-area {
        flex-direction: column; /* Una debajo de otra */
        width: 100%;
        gap: 40px;
    }

    .poster-card {
        height: auto;
        width: 85%;
        max-width: 350px;
    }

    .poster-card img {
        width: 100%;
        height: auto;
    }

    .poster-label {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 1200px) {
    .teams-layout-v3 {
        flex-direction: column;
        height: auto;
        padding: 120px 20px 50px 20px;
        gap: 40px;
        text-align: center;
    }

    .text-area {
        width: 100%;
        text-align: center; /* En móvil centrado queda mejor */
        margin-bottom: 20px;
    }

    .text-area .hero-subtitle {
        margin: 0 auto; /* Centrar subtítulo */
    }

    .posters-area {
        flex-direction: column; /* Fotos una debajo de otra en móvil */
        width: 100%;
        justify-content: center;
        gap: 40px;
    }

    .poster-card {
        height: auto; /* Altura libre en móvil */
        width: 85%;   /* Ancho controlado */
        max-width: 350px;
    }

    .poster-card img {
        width: 100%;
        height: auto;
    }

    .poster-label {
        opacity: 1; /* En móvil siempre visible */
        transform: translateY(0);
    }
}
/* =========================================
   ROSTER OVERLAY INTERACTIVO (CORREGIDO)
   ========================================= */

/* El contenedor usa tu clase existente .video-wrapper para el tamaño y efecto 3D.
   Añadimos position: relative para que lo de dentro flote respecto a él. */
.video-wrapper.roster-overlay-container {
    position: relative;
    /* Eliminamos cualquier restricción de altura fija si la hubiera */
    height: auto !important;
    /* Aseguramos que el fondo no se salga */
    overflow: hidden;
}

/* LA IMAGEN BASE: Manda sobre el tamaño */
.base-roster-img {
    width: 100%;
    height: auto !important; /* CLAVE: Mantiene la proporción original de la imagen */
    display: block;
    object-fit: cover; /* Por si acaso, pero con height auto no debería hacer falta */
}

/* CAPA DEGRADADA (FLOTANTE) */
.gradient-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado de negro a transparente para leer el texto a la izquierda */
    background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    z-index: 2;
    pointer-events: none; /* Deja pasar los clicks */
}

/* LISTA DE NOMBRES (FLOTANTE) */
.roster-floating-list {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
    padding-left: 8%; /* Margen relativo al ancho */
    gap: 5px; /* Espacio vertical relativo a la altura (aprox 10-15px) */
}

/* --- ITEMS INDIVIDUALES (Animación de entrada) --- */
.roster-item {
    display: flex; flex-direction: column;
    opacity: 0; transform: translateX(-30px);
    animation: rosterEnter 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    animation-delay: calc(var(--delay) * 0.1s + 0.3s);
}
@keyframes rosterEnter { to { opacity: 1; transform: translateX(0); } }

/* --- ESTILOS DE TEXTO --- */
.roster-item .role {
    font-size: 0.6rem; color: var(--brand-primary);
    font-weight: 800; letter-spacing: 2px; margin-bottom: 3px; opacity: 0.8;
}
.roster-item.is-staff .role { color: #aaa; }

.roster-item .content { display: flex; align-items: center; gap: 15px; }

.roster-item .handle {
    font-family: var(--font-headings); font-size: clamp(0.8rem, 2vw, 1rem); /* Tamaño dinámico */
    color: #fff; text-transform: uppercase; font-style: italic;
    transition: 0.3s ease; cursor: default; line-height: 1;
}

/* --- REDES SOCIALES (OCULTAS) --- */
.roster-item .socials {
    display: flex; align-items: center;
    opacity: 0; transform: translateX(-10px); transition: all 0.3s ease;
}

.roster-item .socials a {
    color: #fff; font-size: 0.9rem; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,0.1); transition: 0.2s;
}
.roster-item .socials a:hover { background: var(--brand-primary); transform: scale(1.1); }

/* --- INTERACCIÓN HOVER --- */
.roster-item:hover .handle {
    color: var(--brand-primary);
    transform: translateX(10px);
    text-shadow: 0 0 15px rgba(46, 15, 215, 0.8);
}
.roster-item:hover .socials { opacity: 1; transform: translateX(0); }

/* Ajuste para móviles */
@media (max-width: 768px) {
    .roster-floating-list { padding-left: 20px; align-items: center; /* Centrado en móvil */ }
    .gradient-overlay { background: rgba(0,0,0,0.7); /* Más oscuro uniforme en móvil */ }
    .roster-item { align-items: center; }
    .roster-item .handle { font-size: 1.3rem; }
    .roster-item:hover .handle { transform: translateX(0) scale(1.1); } /* En móvil hacemos zoom en vez de desplazar */
}
/* =========================================
   ESCALADO PARA PANTALLAS 2K Y 4K
   ========================================= */

/* --- PANTALLAS 2K (Más de 1920px de ancho) --- */
@media (min-width: 1921px) {

    /* 1. Título principal más grande */
    .hero-title {
        font-size: 6rem;
    }

    /* 2. El Roster dentro de la imagen */
    .roster-floating-list {
        padding-left: 10%; /* Empujamos un poco más a la derecha */
        gap: 10px; /* Recuperamos el espacio vertical que quitamos antes */
    }

    .roster-item .role {
        font-size: 0.8rem; /* El "PLAYER" se hace legible */
        margin-bottom: 4px !important;
    }

    .roster-item .handle {
        font-size: 1.8rem; /* El nombre crece bastante */
    }

    /* Los iconos de redes sociales también crecen */
    .roster-item .socials a {
        width: 40px; height: 40px; font-size: 1.2rem;
    }
}

/* --- PANTALLAS 4K (Más de 2560px de ancho) --- */
@media (min-width: 2561px) {

    /* 1. Título principal GIGANTE */
    .hero-title {
        font-size: 9rem;
    }
    .hero-subtitle {
        font-size: 2rem;
    }

    /* 2. El Roster tamaño cine */
    .roster-floating-list {
        padding-left: 12%;
        gap: 20px; /* Mucho más aire entre jugadores */
    }

    .roster-item .role {
        font-size: 1.2rem;
        margin-bottom: 5px !important;
    }

    .roster-item .handle {
        font-size: 3rem; /* Nombres enormes */
    }

    .roster-item .socials a {
        width: 60px; height: 60px; font-size: 1.8rem;
    }

    /* Separador más grande */
    .roster-separator { height: 40px !important; }
}
/* =========================================
   CORRECCIÓN MÓVIL (ROSTER PEQUEÑO Y A LA IZQUIERDA)
   ========================================= */

@media (max-width: 768px) {

    /* 1. Contenedor: Forzamos alineación izquierda */
    .roster-floating-list {
        padding-left: 15px !important; /* Pegado al borde izquierdo (pero no tocando) */
        align-items: flex-start !important; /* Alinea todo a la izquierda */
        justify-content: center; /* Centrado verticalmente */
        gap: 8px !important; /* Espacio justo entre jugadores */
    }

    /* 2. Texto del Rol (PLAYER) diminuto */
    .roster-item .role {
        font-size: 0.55rem !important; /* Muy pequeñito */
        margin-bottom: 0 !important;
        letter-spacing: 1px;
    }

    /* 3. Nombre del Jugador (HANDLE) reducido */
    .roster-item .handle {
        font-size: 1.1rem !important; /* Tamaño legible pero no gigante */
        line-height: 1 !important;
        transform: none !important; /* Quitamos desplazamientos raros */
    }

    /* 4. Iconos de Redes Sociales (Mini) */
    .roster-item .socials a {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
    }

    /* 5. Separador de Staff más pequeño */
    .roster-separator {
        height: 10px !important;
    }

    /* 6. Efecto Hover en móvil (Sutil) */
    .roster-item:hover .handle {
        transform: translateX(5px) !important; /* Desplazamiento pequeño */
    }

    /* TRUCO: Si la imagen se queda muy bajita en móvil, forzamos altura mínima */
    .video-wrapper.roster-overlay-container {
        min-height: 400px; /* Asegura que quepan los nombres */
    }

    .base-roster-img {
        height: 100% !important;
        min-height: 400px;
        object-fit: cover; /* Para que rellene si forzamos altura */
    }
}
/* CREADORES DE CONTENIDO */
/* TÍTULO */
.creadores-title {
    text-align: center;
    color: white;
    font-family: "obviously", sans-serif;
    font-weight: 900;
    font-size: 45px;
    letter-spacing: -1px;
    margin-bottom: 40px;
    transform: scaleY(0.85);
}

/* GRID DE TARJETAS */
.creadores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    justify-items: center;
}

/* TARJETA */
.creator-card {
    width: 340px;
    height: 480px;
    position: relative;
    overflow: hidden;

    border-radius: 24px;
    border: 3px solid #0a6fdc;

    background: rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
}

/* LEVANTAR TARJETA */
.creator-card:hover {
    transform: translateY(-10px);
}

/* CONTENEDOR DE IMÁGENES */
.creator-img {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Imagen principal (visible por defecto) */
.creator-img .img-normal {
    width: 100%;
    height: 100%;
    object-fit: cover;

    position: absolute;
    top: 0;
    left: 0;

    opacity: 1;
    transition: opacity 0.25s ease;
}

/* Imagen hover (invisible por defecto) */
.creator-img .img-hover {
    width: 100%;
    height: 100%;
    object-fit: cover;

    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Cuando pasamos el ratón:
   🔥 maii1 DESAPARECE
   🔥 maii2 APARECE */
.creator-card:hover .img-normal {
    opacity: 0;
}

.creator-card:hover .img-hover {
    opacity: 1;
}


/* BARRA INFERIOR DE REDES (ESCONDIDA) */
.creator-social {
    position: absolute;
    bottom: -60px;   /* escondida fuera del cuadro */
    left: 0;
    width: 100%;
    height: 60px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;

    background: rgba(0, 0, 0, 0.75);
    border-top: 3px solid #0a6fdc;

    transition: bottom 0.3s ease-out;
}

/* ICONOS DE REDES */
.creator-social img {
    width: 28px;
    filter: brightness(1.15);
    transition: transform 0.2s ease;
}

/* Efecto al pasar por encima del icono */
.creator-social img:hover {
    transform: scale(1.2);
}

/* Redes sociales suben al pasar el ratón */
.creator-card:hover .creator-social {
    bottom: 0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .creadores-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .creadores-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}
.creadores-btn {
    text-align: center;
    margin-top: 40px;
}

.creadores-btn img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.25s ease;
    box-shadow: 0 0 25px rgba(0,0,0,0.35);
}

.creadores-btn img:hover {
    transform: scale(1.07);
    box-shadow: 0 0 40px rgba(255,255,255,0.45);
}

.creadores-text {
    margin-top: 12px;
    font-size: 22px;
    color: #ffffff;
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(0,0,0,0.5);
}
/* FLASH GIGANTE DE ERROR */
#error-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,0,0,0.85) 0%, rgba(0,0,0,0.9) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.15s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Obviously', sans-serif;
    font-size: 90px;
    font-weight: 900;
    color: white;
    text-shadow: 0 0 25px rgba(0,0,0,0.8);
}
/* FLASH GENERAL */
#error-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,0,0,0.85), rgba(0,0,0,0.95));
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.15s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* TEXTO DEL ERROR */
#error-text {
    font-family: "Obviously", sans-serif;
    font-weight: 900;
    font-size: 110px;
    color: white;
    text-shadow: 0 0 25px rgba(0,0,0,0.8);
    transition: transform 0.15s ease-out;
}
@media (max-width: 600px) {
    .logo-top {
        width: 80% !important;
    }

    .login-box {
        width: 90% !important;
    }

    .login-box input {
        font-size: 16px !important; /* Quita zoom del móvil */
    }
}
/* ============================================================
   🔥 FIX COMPLETO PARA MÓVILES — SIN CAMBIAR DISEÑO ORIGINAL
============================================================= */
@media (max-width: 600px) {

    /* El fondo ya no se deforma al hacer scroll */
    body {
        background-attachment: scroll;
        padding-bottom: 120px; /* espacio para que el footer no pise nada */
    }

    /* Logo adaptado, misma estética pero sin desbordar */
    .logo-top {
        width: 75% !important;
        max-width: 260px;
        margin-top: 40px;
        margin-bottom: 25px;
    }

    /* Login adaptado sin romper diseño */
    .login-box {
        width: 90% !important;
        max-width: 400px;
        padding: 20px 25px 32px 25px;
    }

    /* Inputs obligatoriamente a 16px para evitar zoom de iPhone */
    .login-box input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px;
    }

    /* Botón adaptado */
    .login-box button {
        width: 80%;
        padding: 14px;
        font-size: 26px;
        border-radius: 24px;
    }

    /* Footer YA NO usa absolute en móvil -> baja solo */
    footer {
        position: relative !important;
        bottom: auto !important;
        margin-top: 40px;
        padding-bottom: 30px;
    }

    .logo-footer { height: 34px !important; }
    .logo-ofi { height: 44px !important; }

}
@media (max-width: 600px) {

    /* Centrado PERFECTO de inputs */
    .login-box input {
        width: 100% !important;    /* antes 90% → causaba desplazamiento */
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block;
        box-sizing: border-box;    /* evita que padding desplace */
        text-align: center;        /* aseguras el centrado del texto */
    }

    /* Por si el contenedor arrastra padding interno */
    .login-box {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
/* ============================================================
   🔥 FIX ERROR FLASH EN MÓVIL — MISMO DISEÑO, PERO ESCALADO CORRECTO
============================================================= */
@media (max-width: 600px) {

    /* El texto del error se escala para caber en pantalla */
    #error-text {
        font-size: 48px !important; /* visible sin romper nada */
        line-height: 1.1;
        padding: 0 20px;            /* evita que se corte en los lados */
        text-align: center;
        max-width: 90%;
        word-break: break-word;
    }

    /* El flash ocupa igual, pero mantiene proporciones */
    #error-flash {
        padding: 20px;
    }
}
/* Iconos visibles en version movil */
@media (max-width: 900px) {
  body {
    background-attachment: scroll !important;
    background-position: center center;
    background-size: cover;
  }
}
/* =========================================
   FIX CREADORES (SIN TOCAR EL HERO GLOBAL)
   ========================================= */

/* 1. El contenedor interno se encarga de centrar todo */
.content-wrapper {
    width: 100%;
    max-width: 1400px; /* Ancho máximo para que no se desparrame */
    margin: 0 auto;    /* Centrado horizontal automático */

    display: flex;
    flex-direction: column; /* Apila Título arriba, Grid abajo */
    align-items: center;    /* Centra los elementos horizontalmente */
    justify-content: center;

    position: relative;
    z-index: 2;
}

/* 2. El Grid de tarjetas */
.creadores-grid {
    display: grid;
    /* USAMOS ANCHO FIJO PARA LAS COLUMNAS */
    /* Esto es clave: 3 columnas de 340px exactos */
    grid-template-columns: repeat(3, 340px);

    gap: 35px; /* Espacio entre ellas */

    /* ESTO ES LO QUE LAS CENTRA EN PANTALLA: */
    justify-content: center;

    width: 100%;
    margin-top: 20px;
}

/* 3. RESPONSIVE ESPECÍFICO PARA ESTE GRID */

/* Tablet / Portátil pequeño: Bajamos a 2 columnas */
@media (max-width: 1200px) {
    .creadores-grid {
        grid-template-columns: repeat(2, 340px);
    }
}

/* Móvil: Bajamos a 1 columna */
@media (max-width: 800px) {
    .creadores-grid {
        grid-template-columns: repeat(1, 340px);
    }

    /* Ajuste para móviles muy pequeños */
    .creator-card {
        width: 100%;
        max-width: 340px;
    }
}
/* =========================================
   PÁGINAS LEGALES (LAYOUT DEFINITIVO + ESTILO SERIO)
   ========================================= */

/* 1. ESTRUCTURA PRINCIPAL (SANDWICH) */
.legal-flex-layout {
    display: flex;
    flex-direction: column; /* Apila verticalmente */
    height: 100vh; /* Ocupa toda la pantalla */
    width: 100%;
    padding-top: var(--header-height); /* Hueco para el Header */
    overflow: hidden; /* Evita scroll doble en el body */

    /* FONDO SERIO: Color base casi negro */
    background-color: #050505;
    position: relative;
}

/* 2. AJUSTE DEL FONDO (Muted / Apagado) */
/* Esto hace que la rejilla se vea pero muy sutil y gris */
.legal-flex-layout .hero-bg-grid {
    opacity: 0.25; /* Muy transparente */
    filter: grayscale(100%); /* Sin color, solo gris */
    z-index: 0;
}

/* 3. ZONA CENTRAL (SCROLLABLE) */
.legal-scroll-area {
    flex: 1; /* Ocupa todo el hueco central */
    overflow-y: auto; /* Scroll activado SOLO aquí */
    padding: 40px 20px;
    position: relative;
    z-index: 1;
    scroll-behavior: smooth;
}

/* Barra de scroll personalizada */
.legal-scroll-area::-webkit-scrollbar { width: 8px; }
.legal-scroll-area::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
.legal-scroll-area::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 4px; }

/* 4. CONTENEDOR Y CAJA DE TEXTO */
.legal-content-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.legal-header { margin-bottom: 50px; }

.legal-text-box {
    /* Fondo oscuro y sólido para leer bien */
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 50px;
    text-align: left;
    backdrop-filter: blur(5px);
    margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

/* Tipografía Legal */
.legal-text-box h3 {
    font-family: var(--font-headings);
    color: var(--brand-primary);
    font-size: 1.3rem;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.legal-text-box h3:first-child { margin-top: 0; }

.legal-text-box p, .legal-text-box ul {
    color: #ccc; /* Gris claro para no cansar la vista */
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}
.legal-text-box strong { color: #fff; }
.legal-text-box ul { padding-left: 20px; list-style: disc inside; }
.legal-text-box a { text-decoration: underline; }

/* 5. FOOTER FIJO (WRAPPER) */
.fixed-footer-wrapper {
    flex-shrink: 0;
    width: 100%;
    z-index: 10;
    background: var(--bg-body); /* Fondo sólido para tapar el texto que pasa por debajo */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
    border-top: 1px solid var(--border-color);
}

/* AJUSTE MÓVIL */
@media (max-width: 768px) {
    .legal-text-box { padding: 30px 20px; }
    .legal-scroll-area { padding-bottom: 80px; } /* Espacio extra para no chocar con footer móvil */
}
/* =========================================
   FIX FONDO LEGAL (Recuperar imagen)
   ========================================= */

/* Damos posición absoluta al div del fondo para que cubra la pantalla */
.legal-flex-layout .hero-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* AQUÍ PONEMOS LA IMAGEN DE TU WEB */
    background-image: url('../img/fondo.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* EFECTO SERIO (Gris y oscuro) */
    opacity: 0.2;       /* Muy bajito para que no moleste al leer */
    filter: grayscale(100%); /* Blanco y negro */

    z-index: 0; /* Al fondo del todo */
    pointer-events: none;
}

/* Aseguramos que el contenido esté por encima del fondo */
.legal-scroll-area, .fixed-footer-wrapper {
    position: relative;
    z-index: 2;
}
/* =========================================
   WIDGET COOKIE (VERSIÓN ANCHA Y SEGURA)
   ========================================= */

.cookie-widget {
    position: fixed;
    bottom: 160px;
    left: 30px;
    z-index: 9999;

    display: flex;
    align-items: center;

    /* TAMAÑO CERRADO (SOLO ICONO) */
    width: 60px;
    height: 60px;

    background: rgba(15, 16, 18, 0.95);
    backdrop-filter: blur(10px);
    border: 2px solid var(--brand-primary);
    border-radius: 50px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

    /* Animación de apertura */
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-radius 0.4s ease,
                background-color 0.4s ease;

    opacity: 0;
    transform: translateY(50px);

    /* IMPORTANTE: Corta lo que no quepa, pero ahora daremos más sitio */
    overflow: hidden;
    cursor: pointer;
}

.cookie-widget.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ICONO GALLETA --- */
.cookie-icon {
    width: 60px;
    height: 60px;
    min-width: 60px; /* IMPORTANTE: Fijo */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: transparent;
}

.cookie-img {
    width: 32px; height: 32px;
    filter: drop-shadow(0 0 5px orange);
    transition: transform 0.4s ease;
}

@keyframes cookiePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.cookie-widget:not(:hover) .cookie-img {
    animation: cookiePulse 2s infinite;
}

/* --- CONTENIDO (TEXTO + BOTON) --- */
.cookie-content-box {
    display: flex;
    align-items: center;
    gap: 20px; /* Espacio entre texto y botón */
    white-space: nowrap;

    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;

    /* Aseguramos que haya espacio a la derecha */
    padding-right: 25px;
    box-sizing: border-box;
}

.cookie-content-box p {
    color: #ddd;
    font-size: 0.95rem;
    margin: 0;
}
.cookie-content-box a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 800;
}

/* --- INTERACCIÓN HOVER (ABRIR) --- */

.cookie-widget:hover {
    /* CAMBIO CLAVE: AUMENTADO A 650PX PARA QUE QUEPA TODO SOBRADO */
    width: 700px;

    border-radius: 30px;
    background: #000;
    border-color: #fff;
}

.cookie-widget:hover .cookie-img {
    animation: none;
    transform: rotate(-360deg);
}

.cookie-widget:hover .cookie-content-box {
    opacity: 1;
    transform: translateX(0);
}

/* --- BOTÓN ACEPTAR --- */
.cookie-btn {
    background: var(--brand-primary);
    color: #fff;
    border: none;
    padding: 12px 25px; /* Botón grande y clicable */
    border-radius: 25px;
    font-family: var(--font-headings);
    font-weight: 800;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;

    /* ESTO EVITA QUE EL BOTÓN SE APLASTE SI FALTA SITIO */
    flex-shrink: 0;
}

.cookie-btn:hover {
    background: #fff;
    color: var(--brand-primary);
    transform: scale(1.05);
}

/* MÓVIL */
@media (max-width: 768px) {
    .cookie-widget { left: 20px; bottom: 100px; }
    .cookie-widget:hover { width: 60px; }
}
/* =========================================
   PÁGINA DE CREADORES (EFECTO ACORDEÓN - FINAL)
   ========================================= */

/* 1. SECCIÓN PRINCIPAL */
.creators-section {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa toda la pantalla */
    overflow: hidden;
    background: #000;
    padding-top: var(--header-height); /* Respeta el header */
}

/* 2. TÍTULO FLOTANTE (Encima de todo) */
.creators-title-overlay {
    position: absolute;
    top: 120px;
    width: 100%;
    text-align: center;
    z-index: 10;
    pointer-events: none; /* Click a través */
    text-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.creators-title-overlay h2 {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 5px;
}
.creators-title-overlay .text-blue { color: var(--brand-primary); }
.creators-title-overlay p { color: #ccc; letter-spacing: 2px; text-transform: uppercase; font-size: 0.8rem; }


/* 3. EL CONTENEDOR ACORDEÓN */
.creators-accordion {
    display: flex;
    width: 100%;
    height: 100%;
}

/* 4. CADA TIRA DE CREADOR */
.creator-strip {
    position: relative;
    flex: 1; /* Todos iguales al principio */
    height: 100%;
    overflow: hidden;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
    border-right: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;

    /* ESTADO INICIAL: B/N Y OSCURO */
    filter: grayscale(100%) brightness(0.6);
}
.creator-strip:last-child { border-right: none; }

/* 5. LA FOTO DE FONDO */
.creator-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Prioriza las caras */
    transition: transform 0.6s ease;
}

/* 6. INFORMACIÓN (MODIFICADO) */
.creator-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    /* CAMBIO: Solo 10px abajo para pegar los iconos al footer */
    padding: 40px 20px 10px 20px;

    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 30%, transparent 100%);

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease 0.1s;
}

.creator-info h3 {
    font-size: 2.5rem;
    color: #fff;
    line-height: 1;
    margin-bottom: 5px;
    font-style: italic;
    text-transform: uppercase;
}

.creator-info .role {
    color: var(--brand-primary);
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.creator-info .socials {
    display: flex; gap: 15px;
}
.creator-info .socials a {
    color: #fff; font-size: 1.2rem; transition: 0.2s;
}
.creator-info .socials a:hover { color: var(--brand-primary); transform: scale(1.2); }


/* =========================================
   INTERACCIÓN
   ========================================= */

.creator-strip:hover {
    flex: 3; /* Se ensancha */
    filter: grayscale(0%) brightness(1); /* Color normal */
}

/* CAMBIO: Zoom mucho más suave (1.02) */
.creator-strip:hover .creator-bg {
    transform: scale(1.02);
}

.creator-strip:hover .creator-info {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   RESPONSIVE (MÓVIL)
   ========================================= */
@media (max-width: 768px) {
    .creators-section {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    .creators-accordion {
        flex-direction: column;
        height: auto;
    }

    .creator-strip {
        width: 100%;
        height: 400px;
        flex: none !important;
        filter: grayscale(0%) brightness(0.8);
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .creator-info {
        opacity: 1;
        transform: translateY(0);
        padding-bottom: 20px; /* En móvil dejamos un poco más de aire */
    }

    .creators-title-overlay {
        position: relative;
        top: 0;
        padding: 20px;
        background: #000;
    }
}
/* =========================================
   CARRUSEL INFINITO (FIX DE 3 GRUPOS)
   ========================================= */

.marquee-container {
    width: 100%;
    overflow: hidden;
    background: #000;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 15px 0;
    position: relative;
    z-index: 5;
    white-space: nowrap;
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 0; /* IMPORTANTE: Gap 0 */

    /* ANIMACIÓN: Mueve 1/3 del total (porque hay 3 grupos) */
    animation: marquee-scroll 40s linear infinite;
}

.marquee-group {
    display: flex;
    align-items: center;
    /* Espacio entre logos */
    gap: 80px;
    /* Espacio final (colchón) */
    padding-right: 80px;
}

.marquee-group img {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.7);
    transition: filter 0.3s ease;
    opacity: 0.7;
    user-select: none;
}
.marquee-group img:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% {
        /* AL HABER 3 GRUPOS, NOS MOVEMOS -33.333%
           (Que es exactamente el ancho del primer grupo) */
        transform: translateX(-33.33333%);
    }
}
/* =========================================
   EFECTO NIEVE (HEADER)
   ========================================= */

/* Contenedor de la nieve (invisible, solo para limitar el área) */
.snow-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* CLAVE: Para que puedas hacer clic en el menú a través de la nieve */
    z-index: 1; /* Detrás del logo y menú (que suelen tener z-index alto) o justo encima del fondo */
}

/* El copo de nieve individual */
.snowflake {
    position: absolute;
    top: -20px;
    color: #00d2ff; /* AZUL HIELO (Cámbialo si quieres el azul corporativo var(--brand-primary)) */
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.6); /* Un poco de brillo */
    animation-name: fall, sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

/* Animación de Caída */
@keyframes fall {
    0% { top: -20px; }
    100% { top: 110%; } /* Cae hasta salir del header */
}

/* Animación de Balanceo (para que no caigan rectos) */
@keyframes sway {
    0% { transform: translateX(0px) rotate(0deg); }
    50% { transform: translateX(15px) rotate(180deg); }
    100% { transform: translateX(0px) rotate(360deg); }
}
/* =========================================
   TECH ROSTER (ACORDEÓN HORIZONTAL - SIN SCROLL)
   ========================================= */

/* 1. SECCIÓN PRINCIPAL (Pantalla completa fija) */
.tech-roster-section {
    width: 100%;
    height: 100vh; /* Fijo al alto de la pantalla */
    padding-top: var(--header-height);
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Adiós scroll */
}

.roster-header {
    text-align: center;
    padding: 20px 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}
.roster-header h2 { font-size: 2.5rem; color: #fff; margin: 0; }
.roster-header .text-blue { color: var(--brand-primary); }
.game-logo { height: 40px; width: auto; opacity: 0.8; display: block; margin: 0 auto 5px auto; }


/* 2. CONTENEDOR ACORDEÓN */
.tech-accordion {
    display: flex;
    width: 100%;
    flex: 1; /* Ocupa todo el espacio restante */
    overflow: hidden;
}


/* 3. PANEL INDIVIDUAL (CERRADO) */
.tech-panel {
    position: relative;
    flex: 1; /* Estrechos al principio */
    height: 100%;
    overflow: hidden;
    transition: flex 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* Animación suave */
    border-right: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    background: #050505;
}

/* IMAGEN DE FONDO (MODELO) */
.tech-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* TRUCO: Centramos arriba para ver caras y cuerpos de modelos */
    object-position: center 20%;

    filter: grayscale(100%) brightness(0.5); /* B/N Apagado */
    transition: all 0.8s ease;
    opacity: 0.6;
}

/* DEGRADADO */
.tech-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
    pointer-events: none;
}

/* NOMBRE VERTICAL (CENTRADOS PERFECTOS) */
.vertical-name {
    position: absolute;

    /* CENTRADO TOTAL: Así nunca se cortan ni tocan el borde */
    top: 50%;
    left: 50%;
    bottom: auto; /* Anulamos el bottom anterior */

    /* El truco: Centrar y rotar */
    transform: translate(-50%, -50%) rotate(-90deg);

    white-space: nowrap;
    color: rgba(255,255,255,0.6);
    font-family: var(--font-headings);
    font-size: 2rem; /* Tamaño grande y legible */
    font-weight: 800;
    letter-spacing: 4px;
    pointer-events: none;
    transition: opacity 0.3s;
    text-transform: uppercase;

    /* Sombra suave para que se lea bien sobre cualquier fondo */
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}


/* 4. ESTADO ACTIVO (ABIERTO) */
.tech-panel.active {
    flex: 5; /* Se ensancha mucho */
    cursor: default;
}

.tech-panel.active .tech-bg {
    filter: grayscale(0%) brightness(1.1); /* Color vivo */
    opacity: 1;
    /* Movemos la foto a la izquierda para dejar sitio al texto */
    object-position: 20% 20%;
    transform: scale(1.05); /* Un poco de zoom */
}

.tech-panel.active .vertical-name {
    opacity: 0;
}


/* 5. VISOR HUD (EFECTO CRISTAL PREMIUM) */
.scouter-hud {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) translateX(100px);
    width: 450px;
    max-width: 90%;

    /* --- EFECTO CRISTAL --- */
    /* Fondo muy transparente con un ligero degradado */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.01) 100%
    );

    /* El desenfoque es la clave: difumina la foto del jugador detrás */
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%); /* Para Safari */

    /* Bordes brillantes simulando cristal */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Luz arriba */
    border-left: 4px solid var(--brand-primary); /* Acento de marca */

    /* Sombra profunda para que flote */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    /* ---------------------- */

    padding: 40px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
    border-radius: 16px; /* Bordes un poco redondeados para el cristal */
}

.tech-panel.active .scouter-hud {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

/* Tipografía HUD */
.hud-role {
    color: var(--brand-primary);
    font-size: 0.9rem;
    letter-spacing: 3px;
    font-weight: 800;
    display: block;
    margin-bottom: 5px;
}
.hud-name {
    font-size: 4rem;
    line-height: 0.9;
    color: #fff;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-style: italic;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 20px;
}

/* Stats */
.hud-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px;
}
.stat-box { display: flex; flex-direction: column; }
.stat-box .label { font-size: 0.7rem; color: #888; margin-bottom: 5px; letter-spacing: 1px; }
.stat-box .value { font-size: 1.4rem; color: #fff; font-family: var(--font-headings); font-weight: 800; }
/* Bio Typewriter (Contenedor) */
.hud-bio {
    margin-bottom: 20px;
    min-height: 60px; /* Espacio reservado para que no salte al escribir */
}

/* EL EFECTO DE ESCRITURA COMPLETO ----------------------------------- TYPEWRITER EN PRUEBAS
.typewriter {
    /* 1. ESTILO VISUAL (Lo que tenías tú) */
    font-family: 'Courier New', Courier, monospace;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.5;

    /* 2. LÓGICA DE ANIMACIÓN (Lo que faltaba) */
    display: inline-block;
    overflow: hidden; /* Oculta las letras hasta que "salgan" */
    white-space: nowrap; /* Obliga a que sea una sola línea */
    width: 0; /* Empieza invisible (ancho 0) */

    /* El cursor: Usamos border-right en vez de left para que parezca que escribe */
    border-right: 3px solid var(--brand-primary, #00ccff);
    padding-right: 5px; /* Un poco de aire para el cursor */

    /* La orden de moverse */
    animation:
        typing 3s steps(40, end) forwards,
        blink .75s step-end infinite;
}

/* Las instrucciones de movimiento */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: var(--brand-primary, #00ccff); }
}

/* AJUSTE PARA MÓVIL (Importante para que no se rompa en pantallas pequeñas) */
@media (max-width: 768px) {
    .typewriter {
        white-space: normal; /* Permitir salto de línea */
        border-right: none;  /* Quitar cursor */
        width: auto;         /* Ancho automático */

        /* En móvil hacemos un fade-in simple en vez de escribir */
        animation: fadeIn 1s ease forwards;
        opacity: 0;
    }

    @keyframes fadeIn {
        to { opacity: 1; }
    }
}*/
/* Bio Typewriter */
.hud-bio { margin-bottom: 20px; min-height: 60px; }
.typewriter {
    font-family: 'Courier New', Courier, monospace;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.5;
    border-left: 2px solid var(--brand-primary);
    padding-left: 15px;
}

.hud-socials a { color: #fff; font-size: 1.1rem; text-decoration: none; transition: 0.3s; }
.hud-socials a:hover { color: var(--brand-primary); }


/* 6. RESPONSIVE MÓVIL (CORREGIDO PARA VER STATS) */
@media (max-width: 1024px) {
    /* Permitir scroll vertical en el móvil */
    .tech-roster-section {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        display: block; /* Importante para el scroll */
    }

    .tech-accordion {
        display: block; /* Quitamos flex para que sea una lista */
        height: auto;
    }

    /* ESTADO CERRADO */
    .tech-panel {
        width: 100%;
        height: 100px; /* Tira estrecha */
        border-bottom: 1px solid rgba(255,255,255,0.1);
        border-right: none;
        overflow: hidden; /* Ocultar lo que sobre */
    }

    /* ESTADO ABIERTO (ACTIVO) */
    .tech-panel.active {
        /* Altura fija grande para que quepa FOTO + STATS */
        height: 850px;
        transition: height 0.5s ease;
    }

    /* La foto en móvil se centra arriba */
    .tech-panel.active .tech-bg {
        object-position: center top;
        height: 60%; /* La foto ocupa el 60% de arriba */
        opacity: 1;
    }

    /* Nombre vertical se convierte en horizontal */
    .vertical-name {
        transform: translate(-50%, -50%);
        top: 50%; bottom: auto; left: 50%;
        rotate: 0deg;
        font-size: 1.5rem;
        width: 100%;
        text-align: center;
    }

    /* --- EL ARREGLO DE LAS STATS (HUD) --- */
    .scouter-hud {
        /* Reseteamos posiciones de PC */
        position: absolute;
        top: auto;
        bottom: 0; /* Pegado abajo */
        left: 0;
        right: 0;
        transform: none !important; /* Quitamos transformaciones raras */

        width: 100%;
        max-width: 100%;
        height: auto;

        /* Fondo degradado negro sólido para leer bien */
        background: linear-gradient(to top, #000 85%, transparent);

        border: none;
        border-top: 4px solid var(--brand-primary); /* Línea azul arriba */
        padding: 30px 20px 80px 20px; /* Padding extra abajo para el footer */

        opacity: 0; /* Invisible si no está activo */
        z-index: 5;
    }

    /* Cuando activas el panel, aparecen las stats */
    .tech-panel.active .scouter-hud {
        opacity: 1;
        transition: opacity 0.5s ease 0.3s; /* Pequeño retardo */
    }

    /* Ajuste de textos para móvil */
    .hud-name { font-size: 2.5rem; }
    .hud-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .stat-box .value { font-size: 1rem; }
}
/* =========================================
   FIX LIGHT MODE: CORREGIDO (DATA-THEME)
   ========================================= */

/* 1. CAMBIO DE FONDO Y TEXTO GLOBAL DEL FOOTER */
/* Apuntamos al atributo data-theme="light" del HTML */
[data-theme="light"] .main-footer-wrapper,
[data-theme="light"] .marquee-container,
[data-theme="light"] .slim-footer {
    background-color: #f2f2f2 !important; /* Gris claro */
    color: #000000 !important; /* Texto negro */
    border-top: 1px solid #ccc;
}

/* 2. INVERTIR LOS LOGOS DE LAS MARCAS */
/* Como son blancos, los invertimos para que sean negros */
[data-theme="light"] .marquee-container img {
    filter: invert(1) brightness(0) !important;
    opacity: 0.85;
}

/* 3. ARREGLAR ENLACES Y TEXTOS DEL COPYRIGHT */
[data-theme="light"] .footer-left span,
[data-theme="light"] .footer-left a,
[data-theme="light"] .footer-right a {
    color: #111111 !important; /* Negro casi puro */
}

/* 4. HOVER DE ICONOS (MANTENER AZUL) */
[data-theme="light"] .footer-right a:hover i,
[data-theme="light"] .footer-left a:hover {
    color: var(--brand-primary) !important;
}
/* =========================================
   EFECTOS VISUALES SCOUTER (KI RISING - FULL)
   ========================================= */

/* Animación de Parpadeo Holográfico (Efecto inestable) */
@keyframes hologram-flicker {
    0% { opacity: 0.8; text-shadow: 0 0 5px var(--brand-primary); }
    5% { opacity: 1; text-shadow: 0 0 15px var(--brand-primary), 0 0 5px #fff; }
    10% { opacity: 0.8; text-shadow: 0 0 5px var(--brand-primary); }
    50% { opacity: 0.9; text-shadow: 0 0 8px var(--brand-primary); }
    55% { opacity: 1; text-shadow: 0 0 20px var(--brand-primary); }
    100% { opacity: 0.9; text-shadow: 0 0 8px var(--brand-primary); }
}

/* Aplicar estilo a los valores cuando el panel está activo */
.tech-panel.active .stat-box .value {
    color: #fff;
    font-family: 'Courier New', monospace; /* Fuente estilo terminal */
    font-weight: 800;
    font-size: 1.4rem;

    /* El efecto visual potente */
    animation: hologram-flicker 2s infinite;
}

/* Color especial (Azul Neón) para el texto mientras se muestra */
.tech-panel.active .stat-box .value {
    color: var(--brand-primary);
    text-shadow: 0 0 10px rgba(46, 15, 215, 0.8);
}
/* EFECTO ARCOÍRIS PARA EL ENLACE */
.texto-arcoiris {
    background-image: linear-gradient(to right, #ff00cc, #3333ff, #00ccff, #00ff00, #ffff00, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900; /* Importante que sea grueso para que se vea bien */
    animation: moverArcoiris 3s linear infinite;
}

@keyframes moverArcoiris {
    to { background-position: 200% center; }
}
/* POSICIÓN Y ESTILO BASE */
.lang-selector {
    position: fixed;
    bottom: 30px;
    right: 30px; /* A la derecha */
    z-index: 9998;
    display: flex;
    flex-direction: column-reverse; /* Para que se abra hacia arriba */
    align-items: center;
    gap: 10px;
}

/* BOTÓN PRINCIPAL */
.lang-trigger {
    width: 50px;
    height: 50px;
    background: rgba(15, 16, 18, 0.8);
    backdrop-filter: blur(10px);
    border: 2px solid var(--brand-primary, #00ccff); /* Usa tu color corporativo */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lang-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px var(--brand-primary, #00ccff);
}

.lang-trigger img {
    width: 24px;
    height: auto;
    border-radius: 2px;
}

/* LISTA DE BANDERAS (OCULTA POR DEFECTO) */
.lang-options {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #333;
    padding: 10px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* Animación de entrada */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all 0.3s ease;
}

/* MOSTRAR AL HACER HOVER EN TODO EL WIDGET */
.lang-selector:hover .lang-options {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lang-options a img {
    width: 28px;
    transition: transform 0.2s;
    filter: grayscale(0.6); /* Un poco apagadas si no se seleccionan */
}

.lang-options a:hover img {
    transform: scale(1.2);
    filter: grayscale(0);
}

/* OCULTAR LA BARRA SUPERIOR DE GOOGLE (IMPORTANTE) */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}
/* Ocultar tooltips de google */
.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* --- BLOQUEAR BARRA DE GOOGLE (CSS DEFINITIVO) --- */

/* 1. Ocultar el marco superior de Google */
iframe.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

/* 2. Ocultar la clase contenedora que a veces usa Google */
.skiptranslate {
    display: none !important;
}

/* PERO... necesitamos que el widget de banderas SÍ se vea.
   Como las banderas están dentro de un div, aseguramos que NO se oculten */
.lang-selector .skiptranslate {
    display: block !important;
}
body {
    top: 0px !important;
}

/* 3. Forzar al cuerpo de la página a no bajar */
body {
    top: 0px !important;
    position: static !important;
}

/* 4. Ocultar tooltips y resaltados al pasar el mouse */
.goog-tooltip {
    display: none !important;
}
.goog-tooltip:hover {
    display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* =========================================
   MÓVIL: OCULTAR WIDGET COOKIES
   ========================================= */
@media (max-width: 768px) {
    /* Desaparece por completo en pantallas menores de 768px (móviles y tablets verticales) */
    .cookie-widget {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none; /* Asegura que no se pueda clicar aunque esté invisible */
    }
}
/* =========================================
   AJUSTE DE CARAS PARA 1080p (PC)
   ========================================= */
@media (min-width: 1024px) {
    /* Cuando el panel se activa (se abre) */
    .tech-panel.active .tech-bg {
        /* 1. scale(1.1): Aumentamos un 10% la imagen para tener margen.
           2. translateX(-60px): Movemos la imagen 60px a la IZQUIERDA.
        */
        transform: scale(1.1) translateX(-120px) !important;

        /* Aseguramos que la transición sea suave */
        transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Estado normal (cerrado): Centrado */
    .tech-panel .tech-bg {
        transform: scale(1) translateX(0);
        transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
        object-position: center top; /* Opcional: enfocar parte superior */
    }
}
/* =========================================
   ESTILOS NOTICIA CS2 (VERSION FINAL CORREGIDA)
   ========================================= */

/* Layout Principal */
.news-layout-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: #f8f9fa;
}

.news-scroll-area {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.fixed-footer-wrapper {
    flex-shrink: 0;
    z-index: 100;
    background: #fff;
}

/* Hero / Banner */
.news-hero {
    position: relative;
    height: 60vh;
    width: 100%;
    overflow: hidden;
    background-color: #333; /* Fondo por si tarda en cargar la imagen */
}

.news-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.news-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    /* CAMBIO AQUÍ: Más padding abajo (80px) para que el texto respire si ocupa varias líneas */
    padding: 40px 10% 80px 10%;
    color: #fff;
    z-index: 1;
}

.news-tag {
    background-color: #e63946;
    color: white;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 1px;
}

.news-title {
    font-size: 3.5rem;
    margin: 15px 0;
    line-height: 1.1;
    font-family: 'Oswald', sans-serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.news-meta {
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 300;
}

/* Contenido */
.news-content-container {
    max-width: 960px;
    /* CAMBIO AQUÍ: Reducido el margen negativo de -60px a -40px para que no suba tanto */
    margin: -40px auto 60px auto;
    background: white;
    padding: 60px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border-radius: 8px;
    z-index: 10; /* Asegura que está por encima del overlay */
}

.news-lead {
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 35px;
    color: #222;
    border-left: 5px solid #e63946;
    padding-left: 25px;
}

.news-body p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 25px;
}

.news-body h3 {
    font-size: 1.8rem;
    margin-top: 45px;
    margin-bottom: 20px;
    color: #111;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* Galería */
.news-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 40px 0;
}

.gallery-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: #eee; /* Fondo mientra carga */
}

.gallery-item figcaption {
    font-size: 0.9rem;
    color: #777;
    margin-top: 10px;
    text-align: center;
    font-style: italic;
}

/* --- SECCIÓN DESPLIEGUE MEDIOS (CCs) --- */
.news-divider {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 50px 0;
}

.media-coverage-section {
    background-color: #f4f6f8;
    padding: 40px;
    border-radius: 10px;
    border-left: 5px solid #333;
}

/* ESTILO LISTA HORIZONTAL */
.creators-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
}

.creators-list li {
    background: #fff;
    padding: 20px 10px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #e1e4e8;
    flex: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.creators-list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: #ccc;
}

.cc-name {
    display: block;
    font-weight: 800;
    font-size: 1.1rem;
    color: #000;
    margin-bottom: 5px;
}

.cc-role {
    display: block;
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Candal Project Manager */
.pm-box {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px dashed #c0c0c0;
    font-style: italic;
    color: #555;
    text-align: center;
    font-size: 1.05rem;
}

.pm-box strong {
    color: #e63946;
    font-weight: 800;
    font-size: 1.2em;
}

.news-footer-note {
    margin-top: 50px;
    font-size: 0.95rem;
    text-align: center;
    color: #888;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 992px) {
    .news-title { font-size: 2.5rem; }
    .news-content-container {
        padding: 40px;
        margin-top: -20px; /* Menos margen negativo en tablet */
    }
    .news-hero-overlay { padding-bottom: 50px; }

    .creators-list {
        flex-wrap: wrap;
        justify-content: center;
    }
    .creators-list li {
        flex: 0 0 30%;
        margin-bottom: 10px;
    }
}

@media (max-width: 600px) {
    .news-hero { height: 50vh; }
    .news-title { font-size: 1.8rem; }
    .news-hero-overlay { padding: 20px 5% 40px 5%; }

    .news-content-container {
        margin: 0; /* En móvil quitamos el margen negativo */
        width: 100%;
        padding: 25px;
        border-radius: 0;
    }
    .news-gallery { grid-template-columns: 1fr; }
    .gallery-item img { height: 220px; }

    .creators-list li {
        flex: 0 0 45%;
    }
}
/* =========================================================
   MÓVIL Y TABLET (Hasta 1024px): AJUSTES DE MENÚ Y LIVE
   ========================================================= */
@media (max-width: 1024px) {

    /* --- A. OCULTAR STREAMERS OFFLINE --- */
    /* Ocultamos el LI entero si el streamer no está en vivo para ahorrar espacio */
    .submenu-live li:has(.live-box:not(.is-live)) {
        display: none !important;
    }
    /* Fallback para navegadores antiguos */
    .submenu-live .live-box:not(.is-live) {
        display: none !important;
    }

    /* --- B. CENTRAR EL BOTÓN "IN LIVE" --- */
    /* Forzamos que el texto y el punto rojo queden centrados en el menú desplegable */
    .special-live .nav-link {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
        text-align: center;
    }

    /* Separamos un poquito el punto rojo del texto para que no se monten */
    .special-live .live-dot {
        margin-right: 8px;
        margin-bottom: 0;
    }
}
/* =========================================
   ROSTER: AJUSTES PARA TABLET (768px - 1180px)
   ========================================= */
@media (max-width: 1180px) and (min-width: 768px) {

    /* 1. LA IMAGEN: Enfocamos la cara (parte superior) y hacemos zoom out */
    .tech-panel.active .tech-bg {
        object-position: top center !important; /* Forza ver la parte de arriba (la cara) */
        transform: scale(1) !important; /* Evitamos zooms exagerados */
        opacity: 0.6; /* Un poco más oscuro para leer mejor las letras si se solapan */
    }

    /* 2. EL CUADRO DE STATS (HUD): Lo hacemos compacto y abajo */
    .scouter-hud {
        top: auto !important;    /* Ya no centrado verticalmente */
        bottom: 20px !important; /* Pegado abajo */
        left: 50% !important;
        transform: translateX(-50%) !important; /* Centrado horizontal */

        width: 90%; /* Que no toque los bordes */
        padding: 15px; /* Menos relleno */

        /* Fondo un poco más sólido para leer bien */
        background: rgba(15, 16, 18, 0.85);
        backdrop-filter: blur(10px);
    }

    /* 3. TEXTOS MÁS PEQUEÑOS (Para que no ocupe tanto) */
    .hud-header .hud-name {
        font-size: 2rem; /* Nombre más pequeño (antes era gigante) */
        margin: 5px 0;
    }

    .hud-role {
        font-size: 0.8rem;
    }

    /* Rejilla de stats más compacta */
    .hud-grid {
        gap: 10px;
        margin: 10px 0;
    }

    .stat-box .label { font-size: 0.65rem; }
    .stat-box .value { font-size: 1.1rem; }

    /* Bio más pequeña */
    .typewriter {
        font-size: 0.8rem;
        line-height: 1.3;
    }
}
/* =========================================
   PÁGINA DE ERROR - MODO SHOOTER REALISTA
   ========================================= */

/* 1. EL ESCENARIO */
.error-zone {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #050505;
    background-image: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    /* CURSOR DE MIRA (CROSSHAIR) */
    cursor: crosshair;

    /* Para que no seleccionen texto al disparar */
    user-select: none;
}

/* 2. EL CONTENIDO (TEXTO) */
.target-content {
    position: relative;
    z-index: 10; /* Detrás de las balas */
    text-align: center;
    pointer-events: none; /* Dejamos pasar los clics para disparar */
}

.giant-404 {
    font-size: 25vw;
    line-height: 0.8;
    margin: 0;
    color: #222;
    font-weight: 900;
    text-shadow: 0 0 50px rgba(0,0,0,0.8);
}

.info-box {
    margin-top: -50px; /* Superponer un poco */
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--brand-primary);
    padding: 30px 50px;
    display: inline-block;
    backdrop-filter: blur(5px);
    pointer-events: auto; /* El botón sí debe funcionar */
}

.info-box h2 {
    color: var(--brand-primary);
    text-transform: uppercase;
    margin: 0 0 10px 0;
    font-size: 2rem;
}

.info-box p {
    color: #ccc;
    font-family: 'Courier New', monospace;
}

.btn-respawn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    background: var(--brand-primary);
    color: #000;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer; /* Mano normal para el botón */
}

/* 3. CAPA DE BALAS */
#bullet-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 50; /* POR ENCIMA DEL TEXTO */
    pointer-events: none;
}

.bullet-hole {
    position: absolute;
    /* La animación hace que aparezca de golpe */
    animation: impact-appear 0.05s linear;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8));
}

/* 4. ANIMACIONES */
@keyframes impact-appear {
    0% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* CLASE QUE JS AÑADE AL DISPARAR */
.shake-screen {
    animation: shake-hard 0.1s ease-in-out;
}

@keyframes shake-hard {
    0% { transform: translate(0, 0); }
    25% { transform: translate(5px, 5px); }
    50% { transform: translate(-5px, -5px); }
    75% { transform: translate(5px, -5px); }
    100% { transform: translate(0, 0); }
}

/* Footer abajo del todo */
.error-zone ~ .fixed-footer-wrapper, /* Si está fuera */
.error-zone .fixed-footer-wrapper {
    position: absolute; bottom: 0; width: 100%; z-index: 100;
    pointer-events: none;
}
/* Estilo para la etiqueta de resultado (opcional, para diferenciarla) */
.news-tag-result {
    background-color: #e74c3c; /* Rojo suave para indicar resultado/fin */
    color: white;
}

/* --- NAVEGACIÓN ENTRE NOTICIAS --- */
.news-navigation {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.nav-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.nav-link-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05); /* Fondo sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 10px;
}

.nav-link-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px); /* Pequeño movimiento a la derecha */
    border-color: #666; /* O el color de acento de tu club */
}

.nav-thumbnail {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 15px;
}

.nav-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.nav-date {
    font-size: 0.75rem;
    color: #aaa;
    margin-bottom: 4px;
}

.nav-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff; /* O color de texto principal */
    line-height: 1.2;
}

.nav-arrow {
    padding: 0 15px;
    font-size: 1.5rem;
    color: #666;
    font-weight: bold;
}
/* =========================================================
   FIX CALENDARIO: que ocupe el “cuadro amarillo”
   (pegar al FINAL del CSS)
========================================================= */

/* 1) El contenedor principal NO debe estar capado tan pronto */
.hero-split-container{
  max-width: 2400px !important;      /* antes 1800 */
  width: 100% !important;
  padding-left: clamp(20px, 6vw, 110px) !important; /* menos agresivo que 10% */
  padding-right: clamp(20px, 4vw, 90px) !important; /* menos agresivo que 5% */
  gap: clamp(20px, 3vw, 80px) !important;
  align-items: stretch !important;   /* que estire en altura */
}

/* 2) La columna derecha tiene que ESTIRAR */
.hero-split-right{
  flex: 1.6 !important;              /* más espacio al calendario */
  justify-content: stretch !important; /* antes flex-end */
  align-items: stretch !important;
  min-width: 0 !important;           /* importante en flex */
}

/* 3) El calendario debe ocupar TODO el ancho/alto de su columna */
.hero-split-right .calendar-container{
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: clamp(520px, 58vh, 760px) !important;  /* más “bestia” en 1080/2K */
}

/* 4) La rejilla usa el alto disponible sin encogerse */
.calendar-container{
  display: flex !important;
  flex-direction: column !important;
}
.cal-grid{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* =========================
   2K (y más): aún más ancho
========================= */
@media (min-width: 1921px){
  .hero-split-container{
    max-width: 3000px !important;
    padding-left: clamp(40px, 7vw, 140px) !important;
    padding-right: clamp(40px, 5vw, 120px) !important;
  }
  .hero-split-right{
    flex: 1.9 !important;
  }
  .hero-split-right .calendar-container{
    min-height: clamp(620px, 60vh, 920px) !important;
  }
}

/* =========================
   Móvil / tablet: apilado
========================= */
@media (max-width: 1200px){
  .hero-split-container{
    flex-direction: column !important;  /* tú ya lo haces, lo reforzamos */
    padding: 40px 20px !important;
  }
  .hero-split-right{
    width: 100% !important;
  }
  .hero-split-right .calendar-container{
    min-height: 620px !important;
  }
}
/* =========================================================
   ✅ OPTIMIZACIÓN SEGURA (SIN CAMBIAR DISEÑO)
   - Consolida duplicados
   - Mantiene el comportamiento actual (A/A/A/A)
   - Pegar AL FINAL del CSS
========================================================= */

/* -------------------------
   1) ERROR FLASH (duplicado) -> 1 solo bloque
-------------------------- */
#error-flash{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255,0,0,0.85), rgba(0,0,0,0.95));
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.15s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Obviously", sans-serif;
}

/* El texto ya lo controlas aparte (mantiene tu look actual) */
#error-text{
  font-family: "Obviously", sans-serif;
  font-weight: 900;
  font-size: 110px;
  color: #fff;
  text-shadow: 0 0 25px rgba(0,0,0,0.8);
  transition: transform 0.15s ease-out;
}

/* -------------------------
   2) HUD BIO (duplicado) -> 1 sola regla
-------------------------- */
.hud-bio{
  margin-bottom: 20px;
  min-height: 60px;
}

/* -------------------------
   3) GOOGLE TRANSLATE / TOOLTIP (duplicado) -> consolidado
   (Mantiene tu intención: ocultar barra/tooltip, no mover body)
-------------------------- */
iframe.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}

/* Ojo: tú dijiste que todo está bien como se ve ahora (A),
   así que mantenemos el “bloqueo fuerte” */
.skiptranslate{ display: none !important; }

/* Excepción: tu widget de banderas debe verse */
.lang-selector .skiptranslate{ display: block !important; }

body{ top: 0px !important; }

.goog-tooltip,
.goog-tooltip:hover{
  display: none !important;
}

.goog-text-highlight{
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* -------------------------
   4) HERO ANIM (A) -> dejamos forzado WE/ARE blanco, DIMONIX azul
   (consolidado: 1 sola definición final)
-------------------------- */
.hero-title span{
  display: inline-block;
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* WE (blanco forzado) */
.anim-text-top{
  animation-name: slideInDown;
  animation-duration: 0.8s;
  animation-delay: 0.2s;
  color: #fff !important;
}

/* ARE (blanco forzado) */
.anim-text-left{
  animation-name: slideInLeft;
  animation-duration: 0.8s;
  animation-delay: 0.4s;
  margin-left: 15px;
  color: #fff !important;
}

/* DIMONIX (azul) */
.anim-text-right{
  animation-name: slideInRight;
  animation-duration: 1s;
  animation-delay: 0.6s;
  color: var(--brand-primary);
  display: block !important;
}

/* (Keyframes ya existen arriba en tu CSS; no los duplicamos aquí) */

/* -------------------------
   5) LIVE DOT (A) -> dejamos tu FIX final de recorte + badge visible
   (consolidado, sin duplicar clip-path vs overflow)
-------------------------- */

/* OFFLINE: círculo que recorta sí o sí */
.submenu-live .live-box{
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Imagen adaptada al círculo */
.submenu-live .live-box img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 50% !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* Puntito offline */
.submenu-live .live-status-dot{
  bottom: 2px;
  right: 2px;
  z-index: 9;
}

/* ONLINE: contenedor deja de ser circular */
.submenu-live .live-box.is-live{
  position: relative;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Foto live sigue siendo 60x60 circular */
.submenu-live .live-box.is-live img{
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  position: relative;
  z-index: 2;
}

/* Badge EN DIRECTO visible y por encima */
.submenu-live .live-box.is-live::after{
  content: "EN DIRECTO";
  display: block;
  width: 100%;
  position: relative;
  z-index: 3;
  background-color: var(--live-red);
  color: #fff;
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 10px 0 5px 0;
  margin-top: -15px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  animation: pulse 2s infinite;
}

/* Forzamos el content si es <a> (mantiene tu “nuclear fix”) */
.submenu-live a.live-box.is-live::after{
  content:"EN DIRECTO" !important;
}

/* -------------------------
   6) LOGIN MÓVIL (A) -> consolidar @media max-width:600 sin repetir
-------------------------- */
@media (max-width: 600px){

  .logo-top{
    width: 75% !important;
    max-width: 260px;
    margin-top: 40px;
    margin-bottom: 25px;
  }

  .login-box{
    width: 90% !important;
    max-width: 400px;
    padding: 20px 20px 32px 20px; /* integra tus dos variantes */
  }

  .login-box input{
    width: 100% !important;
    font-size: 16px !important; /* evita zoom iPhone */
    padding: 14px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block;
    box-sizing: border-box;
    text-align: center;
  }

  .login-box button{
    width: 80%;
    padding: 14px;
    font-size: 26px;
    border-radius: 24px;
  }

  footer{
    position: relative !important;
    bottom: auto !important;
    margin-top: 40px;
    padding-bottom: 30px;
  }

  .logo-footer{ height: 34px !important; }
  .logo-ofi{ height: 44px !important; }

  /* ERROR TEXT escalado en móvil (lo mantienes como tenías) */
  #error-text{
    font-size: 48px !important;
    line-height: 1.1;
    padding: 0 20px;
    text-align: center;
    max-width: 90%;
    word-break: break-word;
  }

  #error-flash{ padding: 20px; }
}

/* -------------------------
   7) GRID CREADORES (A) -> tamaño fijo 340px centrado
   (consolidado: 1 definición “ganadora”)
-------------------------- */
.creadores-grid{
  display: grid;
  grid-template-columns: repeat(3, 340px);
  gap: 35px;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}

@media (max-width: 1200px){
  .creadores-grid{ grid-template-columns: repeat(2, 340px); }
}

@media (max-width: 800px){
  .creadores-grid{ grid-template-columns: repeat(1, 340px); }
  .creator-card{
    width: 100%;
    max-width: 340px;
  }
}