/* --- EFECTO DE DESENFOQUE DETRÁS DEL MODAL --- */
/* .modal-backdrop es la capa oscura que pone Bootstrap */

.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Menos opacidad de color */
    backdrop-filter: blur(5px) !important; /* El desenfoque */
    -webkit-backdrop-filter: blur(5px) !important; /* Obligatorio para Chrome/Safari */
    opacity: 1 !important; /* Evita que la opacidad general de Bootstrap rompa el filtro */
}

/* --- ESTILO DEL MODAL (VENTANA) --- */
.modal-content {
    background: rgba(15, 17, 20, 0.95) !important; /* Fondo oscuro Andromeda */
    border: 1px solid rgba(212, 175, 55, 0.3) !important; /* Borde dorado tenue */
    box-shadow: 0 0 30px rgba(0, 0, 0, 1);
    border-radius: 12px;
}

/* --- ANIMACIÓN MÁS SUAVE --- */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}



/* --- ESTILO DE VENTANA ANDROMEDA (MODAL) --- */

#modalLogin .modal-content {
    background: rgba(10, 10, 10, 0.75) !important; 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    
    /* Borde sólido fino */
    border: 1px solid rgba(212, 175, 55, 0.6) !important; 
    border-radius: 12px !important;
    
    /* Efecto de Luz: Brillo exterior dorado + Brillo interno (inset) */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 
                0 0 15px rgba(212, 175, 55, 0.2), 
                inset 0 0 20px rgba(212, 175, 55, 0.1) !important;
    
    position: relative;
    overflow: hidden;
}

/* Línea decorativa superior (Opcional, imita el borde de luz de la imagen) */
#modalLogin .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 10;
    background: linear-gradient(90deg, transparent, var(--andro-gold), transparent);
}


#modalLogin .modal-header {
    border-bottom: 1px solid rgba(229, 192, 91, 0.3);

    /* 2. TÍTULO MÁS GRANDE Y ESPACIADO */
    padding: 25px 30px; /* Aumentamos el espacio interno */
    background: rgba(229, 192, 91, 0.03); /* Un toque casi imperceptible de luz */    
}

#modalLogin .modal-title {
    font-family: 'Cinzel', serif;
    color: var(--andro-gold) !important;
    text-transform: uppercase;
    letter-spacing: 3px; /* Un poco más de tracking para elegancia */
    font-size: 1.5rem; /* Aumentamos el tamaño de la fuente */
    margin: 0;
}

/* Ajuste para el botón de cerrar (X) para que quede centrado con el nuevo tamaño */
#modalLogin .btn-close {
    filter: invert(1) grayscale(1) brightness(1.5); /* Hace la X blanca y brillante */
}

/* Inputs con estilo Andromeda */
#modalLogin .form-control {
    border-radius: 0 !important;
    border: 1px solid #333;
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    transition: border-color 0.3s;
}

#modalLogin .form-control:focus {
    border-color: var(--andro-gold);
    box-shadow: 0 0 8px rgba(229, 192, 91, 0.2);
}

/* --- EL BOTÓN DENTRO DEL LOGIN --- */
#boton_login {
    /* Aplicamos tu nuevo estilo de botón */
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    border: none !important;
    padding: 12px !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    
    /* El corte diagonal que pediste */
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    
    /* Color Dorado Andromeda */
    background: linear-gradient(135deg, var(--andro-gold-dark), var(--andro-gold)) !important;
    color: #000 !important;
    border-radius: 0 !important; /* Forzamos que no tenga redondeo de Bootstrap */
}

/* Efecto de brillo animado pasando de fondo en el botón */
#boton_login::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    animation: androShineLogin 4s infinite;
}

@keyframes androShineLogin {
    0% { left: -100%; }
    20% { left: 150%; }
    100% { left: 150%; }
}

#boton_login:hover {
    transform: scale(1.03);
    filter: brightness(1.2);
}

/* Ajuste del hCaptcha para que no rompa el diseño */
#captcha-container-login {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}


/* --- ESTILO DE VENTANA REGISTRO ANDROMEDA --- */

#modalRegister .modal-content {
    background: rgba(5, 10, 20, 0.75) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* Borde sólido fino */
    border: 1px solid rgba(30, 144, 255, 0.6) !important; 
    border-radius: 12px !important;
    
    /* Efecto de Luz: Brillo exterior azul + Brillo interno (inset) */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 
                0 0 15px rgba(30, 144, 255, 0.3), 
                inset 0 0 20px rgba(30, 144, 255, 0.15) !important;
    
    position: relative;
    overflow: hidden; 
}

/* Línea decorativa superior (Opcional, imita el borde de luz de la imagen) */
#modalRegister .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 10;
    background: linear-gradient(90deg, transparent, var(--andro-blue), transparent);
}

#modalRegister .modal-header {
    border-bottom: 1px solid rgba(229, 192, 91, 0.3);
    
    /* 2. TÍTULO MÁS GRANDE Y ESPACIADO */
    padding: 25px 30px; /* Aumentamos el espacio interno */
    background: rgba(229, 192, 91, 0.03); /* Un toque casi imperceptible de luz */
}

#modalRegister .modal-title {
    font-family: 'Cinzel', serif;
    color: var(--andro-gold) !important;
    text-transform: uppercase;
    letter-spacing: 3px; /* Un poco más de tracking para elegancia */
    font-size: 1.5rem; /* Aumentamos el tamaño de la fuente */
    margin: 0;
}

#modalRegister .btn-close {
    filter: invert(1) grayscale(1) brightness(1.5); /* Hace la X blanca y brillante */
}

/* EFECTO DE BRILLO RÁPIDO CON ESPERA DE 25 SEG */
#modalRegister .modal-content::after {
    content: "";
    position: absolute;
    top: -150%; 
    left: -150%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        80deg, 
        transparent 0%, 
        transparent 45%, 
        rgba(105, 102, 190, 0.6) 50%, 
        transparent 55%, 
        transparent 100%
    );
    /* Ciclo total: 1s de movimiento + 25s de espera = 26s */
    animation: androWindowShine 26s infinite; 
    pointer-events: none;
    z-index: 1;
}

/* Animación: El barrido ocurre al puro principio y luego espera */
@keyframes androWindowShine {
    0% {
        top: -150%;
        left: -150%;
    }
    /* El brillo cruza toda la ventana en el primer 4% del tiempo (~1 segundo) */
    4% { 
        top: 100%;
        left: 100%;
    }
    /* Del 4% al 100% (los siguientes 25s), se queda quieto fuera de la vista */
    100% {
        top: 100%;
        left: 100%;
    }
}




#modalRegister .modal-body {
    position: relative;
    z-index: 2; /* Asegura que los campos estén sobre el brillo */
}

/* Inputs de Registro */
#modalRegister .form-control {
    border: 1px solid rgba(30, 144, 255, 0.3); /* Borde azul tenue de base */
    background-color: rgba(0, 0, 0, 0.8) !important;
}

#modalRegister .form-control:hover {
    border-color: var(--andro-blue);
    /* Brillo lateral azul al pasar el cursor */
    box-shadow: -5px 0 10px rgba(30, 144, 255, 0.2), 
                 5px 0 10px rgba(30, 144, 255, 0.2);
}

#modalRegister .form-control:focus {
    border-color: #fff !important; /* El borde se vuelve blanco al escribir para contraste */
    box-shadow: -8px 0 20px rgba(30, 144, 255, 0.6), 
                 8px 0 20px rgba(30, 144, 255, 0.6) !important;
    transform: translateX(8px);
}

/* --- BOTÓN DE REGISTRO (Azul con brillo) --- */
#boton_registro {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    border: none !important;
    padding: 12px !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 7px;
    margin-bottom: 20px;
    
    /* Corte diagonal Andromeda */
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    
    /* Degradado Azul Andromeda */
    background: linear-gradient(135deg, var(--andro-blue-dark), var(--andro-blue)) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

/* Brillo animado para el botón azul */
#boton_registro::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    animation: androShineRegister 5s infinite;
}

@keyframes androShineRegister {
    0% { left: -100%; }
    15% { left: 150%; }
    100% { left: 150%; }
}

#boton_registro:hover {
    transform: scale(1.03);
    filter: brightness(1.2);
    box-shadow: 0 0 20px rgba(30, 144, 255, 0.4);
}

/* Etiquetas de ayuda en azul */
.text-info-andro {
    color: var(--andro-blue) !important;
    font-size: 0.75rem;
    font-weight: bold;
}

/* Estilo base del placeholder */
#modalRegister .form-control::placeholder,
#modalLogin .form-control::placeholder {
    color: rgba(255, 255, 255, 0.173) !important; /* Más visible que el gris por defecto */
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Estado normal del input */
#modalRegister .form-control,
#modalLogin .form-control {
    border-radius: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #fff !important;
    transition: all 0.3s ease; /* Transición suave para todos los efectos */
}

/* EFECTO DE BRILLO AL PASAR EL CURSOR (Hover) */
#modalRegister .form-control:hover,
#modalLogin .form-control:hover {
    border-color: rgba(229, 192, 91, 0.5); /* Brillo dorado tenue al pasar el mouse */
    background-color: rgba(20, 20, 20, 0.8) !important;
    box-shadow: inset 0 0 10px rgba(229, 192, 91, 0.1);
    cursor: pointer;
}

/* EFECTO CUANDO ESTÁS ESCRIBIENDO (Focus) */
#modalRegister .form-control:focus {
    border-color: var(--andro-blue) !important;
    box-shadow: 0 0 15px rgba(30, 144, 255, 0.4) !important;
    background-color: #000 !important;
    transform: translateX(5px); /* Pequeño desplazamiento hacia la derecha al activar */
}

#modalLogin .form-control:focus {
    border-color: var(--andro-gold) !important;
    box-shadow: 0 0 15px rgba(229, 192, 91, 0.4) !important;
    background-color: #000 !important;
    transform: translateX(5px);
}

/* Ajuste del hCaptcha para que no rompa el diseño */
#captcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}


/* --- ESTILO DE VENTANA RECUPERAR CUENTA --- */

#modalForgotPass .modal-content {
    background: rgba(10, 10, 10, 0.75) !important; /* Más transparencia para lucir el blur */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    
    /* Borde sólido fino dorado */
    border: 1px solid rgba(212, 175, 55, 0.6) !important; 
    border-radius: 12px !important; /* Ajustado para coincidir con Login/Register */
    
    /* Triple capa de luz: Sombra profunda + Aura Dorada + Brillo Interno */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 
                0 0 15px rgba(212, 175, 55, 0.3), 
                inset 0 0 20px rgba(212, 175, 55, 0.15) !important;
    
    position: relative;
    overflow: hidden; 
}

/* Línea de resplandor superior dorada */
#modalForgotPass .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--andro-gold), transparent);
    z-index: 10;
}

/* Brillo animado pasando por la ventana (Cada 25s) */
#modalForgotPass .modal-content::after {
    content: "";
    position: absolute;
    top: -150%; 
    left: -150%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        80deg, 
        transparent 0%, 
        transparent 45%, 
        rgba(229, 192, 91, 0.4) 50%, /* Brillo dorado sutil */
        transparent 55%, 
        transparent 100%
    );
    animation: androWindowShine 26s infinite; 
    pointer-events: none;
    z-index: 1;
}

#modalForgotPass .modal-header {
    border-bottom: 2px solid rgba(229, 192, 91, 0.4); 
    border-radius: 0;
    position: relative;
    z-index: 2;
}

#modalForgotPass .modal-title {
    font-family: 'Cinzel', serif;
    color: var(--andro-gold) !important;
    text-shadow: 0 0 10px rgba(229, 192, 91, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Estilo del Botón de Enviar (Dorado Andromeda) */
#btnSendReset {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    border: none !important;
    padding: 12px !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 10px;
    
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    background: linear-gradient(135deg, var(--andro-gold-dark), var(--andro-gold)) !important;
    color: #000 !important;
    border-radius: 0 !important;
}

#btnSendReset:hover {
    transform: scale(1.03);
    filter: brightness(1.2);
    box-shadow: 0 0 15px var(--andro-gold-dark);
}

/* Brillo animado propio del botón */
#btnSendReset::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    animation: androShine 4s infinite;
}


/* --- ESTILO DE VENTANA PERFIL DE USUARIO --- */

#modalUserInfo .modal-content {
    background: rgba(5, 10, 20, 0.8) !important; /* Equilibrio entre opacidad y transparencia */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* Borde sólido fino azul */
    border: 1px solid rgba(30, 144, 255, 0.6) !important; 
    border-radius: 12px !important; /* Coherente con Registro */
    
    /* Triple capa de luz: Sombra profunda + Aura Azul + Brillo Interno (Efecto Registro) */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 
                0 0 15px rgba(30, 144, 255, 0.3), 
                inset 0 0 20px rgba(30, 144, 255, 0.15) !important;
    
    position: relative;
    overflow: hidden; 
}

/* Línea de resplandor superior azul (Efecto Registro) */
#modalUserInfo .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--andro-blue), transparent);
    z-index: 10;
}

/* Brillo animado cada 25s */
#modalUserInfo .modal-content::after {
    content: "";
    position: absolute;
    top: -150%; 
    left: -150%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        80deg, 
        transparent 0%, 
        transparent 45%, 
        rgba(105, 102, 190, 0.4) 50%, 
        transparent 55%, 
        transparent 100%
    );
    animation: androWindowShine 26s infinite; 
    pointer-events: none;
    z-index: 1;
}

#modalUserInfo .modal-header {
    border-bottom: 2px solid var(--andro-blue);
    border-radius: 0;
    position: relative;
    z-index: 2;
}

#modalUserInfo .modal-title {
    font-family: 'Cinzel', serif;
    color: var(--andro-blue) !important;
    text-shadow: 0 0 10px rgba(30, 144, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- ESTILO DE LA LISTA DE DATOS --- */

#modalUserInfo .list-group-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(30, 144, 255, 0.1) !important;
    padding: 12px 15px;
    transition: background 0.3s ease;
    z-index: 2;
    position: relative;
}

#modalUserInfo .list-group-item:hover {
    background: rgba(30, 144, 255, 0.08) !important; /* Brillo azul tenue al pasar por cada fila */
}

#modalUserInfo strong {
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

/* Badge de la IP */
#info_ip {
    background: var(--andro-blue-dark) !important;
    border: 1px solid var(--andro-blue);
    border-radius: 0;
    padding: 5px 10px;
}

/* Botón de Cerrar estilo Andromeda */
#modalUserInfo .btn-outline-info {
    font-family: 'Cinzel', serif;
    border-radius: 0;
    border: 1px solid var(--andro-blue);
    color: var(--andro-blue);
    text-transform: uppercase;
    font-weight: bold;
    transition: all 0.3s;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    background: transparent;
}

#modalUserInfo .btn-outline-info:hover {
    background: var(--andro-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(30, 144, 255, 0.5);
    transform: scale(1.02);
}


/* --- ESTILO DE VENTANA CAMBIO DE CONTRASEÑA --- */

#modalChangePass .modal-content {
    background: rgba(10, 10, 10, 0.75) !important; 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    
    /* Borde sólido fino */
    border: 1px solid rgba(212, 175, 55, 0.6) !important; 
    border-radius: 12px !important;
    
    /* Efecto de Luz: Brillo exterior dorado + Brillo interno (inset) */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 
                0 0 15px rgba(212, 175, 55, 0.2), 
                inset 0 0 20px rgba(212, 175, 55, 0.1) !important;
    
    position: relative;
    overflow: hidden;
}

/* Línea decorativa superior (Opcional, imita el borde de luz de la imagen) */
#modalChangePass .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    z-index: 10;
    background: linear-gradient(90deg, transparent, var(--andro-gold), transparent);
}

/* Brillo animado de la ventana (Ciclo de 26s para coherencia) */
#modalChangePass .modal-content::after {
    content: "";
    position: absolute;
    top: -150%; 
    left: -150%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        80deg, 
        transparent 0%, 
        transparent 45%, 
        rgba(229, 192, 91, 0.4) 50%, 
        transparent 55%, 
        transparent 100%
    );
    animation: androWindowShine 26s infinite; 
    pointer-events: none;
    z-index: 1;
}

#modalChangePass .modal-header {
    border-bottom: 2px solid rgba(229, 192, 91, 0.4); 
    border-radius: 0;
    position: relative;
    z-index: 2;
}

#modalChangePass .modal-title {
    font-family: 'Cinzel', serif;
    color: var(--andro-gold) !important;
    text-shadow: 0 0 10px rgba(229, 192, 91, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- BOTÓN DE ACTUALIZAR (Estilo Andromeda) --- */
#btn_change_password {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    border: none !important;
    padding: 12px !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 15px;
    
    /* Corte diagonal */
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    background: linear-gradient(135deg, var(--andro-gold-dark), var(--andro-gold)) !important;
    color: #000 !important;
    border-radius: 0 !important;
}

#btn_change_password:hover {
    transform: scale(1.03);
    filter: brightness(1.2);
    box-shadow: 0 0 15px var(--andro-gold-dark);
}

/* Brillo propio del botón */
#btn_change_password::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    animation: androShine 4s infinite;
}

/* Asegurar que el cuerpo del modal esté sobre el brillo de fondo */
#modalChangePass .modal-body {
    position: relative;
    z-index: 2;
}

/* --- ESTILO DE INPUTS PARA CAMBIO DE PASS --- */

/* Estado base y Placeholder */
#modalChangePass .form-control {
    border-radius: 0 !important;
    border: 1px solid rgba(30, 144, 255, 0.2); /* Borde azul tenue de base */
    background-color: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

#modalChangePass .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    font-style: italic;
}

/* Efecto Hover: Brillo azul lateral al pasar el mouse */
#modalChangePass .form-control:hover {
    border-color: var(--andro-blue);
    box-shadow: -5px 0 10px rgba(30, 144, 255, 0.2), 
                 5px 0 10px rgba(30, 144, 255, 0.2);
    background-color: rgba(10, 20, 40, 0.9) !important;
    cursor: pointer;
}

/* Efecto Focus: Brillo intenso y desplazamiento al escribir */
#modalChangePass .form-control:focus {
    border-color: #fff !important; /* Borde blanco para resaltar el foco */
    box-shadow: -8px 0 20px rgba(30, 144, 255, 0.6), 
                 8px 0 20px rgba(30, 144, 255, 0.6) !important;
    background-color: #000 !important;
    transform: translateX(8px);
    outline: none;
}

/* Labels de los campos */
#modalChangePass .form-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #a0a0a0 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}




/* --- ESTILO DE VENTANA DONACIONES --- */

#modalDonar .modal-content {
    background: rgba(5, 15, 10, 0.8) !important; /* Un poco más de transparencia para el blur */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* Borde sólido fino Esmeralda */
    border: 1px solid rgba(46, 204, 113, 0.6) !important; 
    border-radius: 12px !important; /* Redondeado igual que Login */
    
    /* Triple capa de luz: Sombra profunda + Aura Esmeralda + Brillo Interno (Efecto Login) */
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), 
                0 0 20px rgba(46, 204, 113, 0.35), 
                inset 0 0 20px rgba(46, 204, 113, 0.15) !important;
    
    position: relative;
    overflow: hidden; 
}

/* Línea de resplandor superior (Igual a Login pero en Verde) */
#modalDonar .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, transparent, #2ecc71, transparent);
    z-index: 10;
}

/* Brillo animado de la ventana (Ciclo de 26s) */
#modalDonar .modal-content::after {
    content: "";
    position: absolute;
    top: -150%; 
    left: -150%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        80deg, 
        transparent 0%, 
        transparent 45%, 
        rgba(46, 204, 113, 0.4) 50%, 
        transparent 55%, 
        transparent 100%
    );
    animation: androWindowShine 26s infinite; 
    pointer-events: none;
    z-index: 1;
}

/* Brillo animado (Tu ciclo de 26s mantenido) */
#modalDonar .modal-content::after {
    content: "";
    position: absolute;
    top: -150%; 
    left: -150%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        80deg, 
        transparent 0%, 
        transparent 45%, 
        rgba(46, 204, 113, 0.25) 50%, 
        transparent 55%, 
        transparent 100%
    );
    animation: androWindowShine 26s infinite; 
    pointer-events: none;
    z-index: 1;
}

/* --- TÍTULO MÁS ALTO Y POTENTE --- */
#modalDonar .modal-title {
    font-family: 'Cinzel', serif;
    color: #39c53b !important;
    font-size: 1.2rem !important; /* Más alto y dominante */
    font-weight: 400;
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px; /* Espaciado épico */
    margin: 10px 0;
}

/* --- TEXTO DEL PIE (Más claro para lectura) --- */
#modalDonar .modal-footer, 
#modalDonar .text-muted, 
#modalDonar p {
    color: rgba(255, 255, 255, 0.75) !important; /* Texto aclarado significativamente */
    font-size: 0.95rem;
}

/* --- CAMPOS Y SELECT (Estilo Blue-Focus como Password) --- */

#modalDonar .form-select, 
#modalDonar .alert {
    border-radius: 0 !important;
    border: 1px solid rgba(30, 144, 255, 0.2); /* Borde azul de base */
    background-color: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Efecto Hover en el Select */
#modalDonar .form-select:hover {
    border-color: var(--andro-blue);
    box-shadow: -5px 0 10px rgba(30, 144, 255, 0.2), 
                 5px 0 10px rgba(30, 144, 255, 0.2);
    background-color: rgba(10, 20, 40, 0.9) !important;
}

/* Efecto Focus en el Select (Igual que Password) */
#modalDonar .form-select:focus {
    border-color: #fff !important;
    box-shadow: -8px 0 20px rgba(30, 144, 255, 0.6), 
                 8px 0 20px rgba(30, 144, 255, 0.6) !important;
    transform: translateX(8px);
    outline: none;
}

/* --- BOTÓN DE PAGO (Estilo Andromeda) --- */
#checkout-btn {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    border: none !important;
    padding: 15px !important;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    background: linear-gradient(135deg, #1e8449, #2ecc71) !important;
    color: #fff !important;
    border-radius: 0 !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

#checkout-btn:hover {
    transform: scale(1.03);
    filter: brightness(1.2);
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
}

/* Brillo del botón */
#checkout-btn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    animation: androShine 4s infinite;
}








/* --- ESTILO DE VENTANA CAMBIAR CORREO --- */
#modalChangeEmail .modal-content {
    background: rgba(10, 10, 10, 0.75) !important; 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    
    /* Borde sólido fino */
    border: 1px solid rgba(212, 175, 55, 0.6) !important; 
    border-radius: 12px !important;
    
    /* Efecto de Luz: Brillo exterior dorado + Brillo interno (inset) */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 
                0 0 15px rgba(212, 175, 55, 0.2), 
                inset 0 0 20px rgba(212, 175, 55, 0.1) !important;
    
    position: relative;
    overflow: hidden;
}

/* Línea decorativa superior (Opcional, imita el borde de luz de la imagen) */
#modalChangeEmail .modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 10;
    background: linear-gradient(90deg, transparent, var(--andro-gold), transparent);
}

/* Brillo animado de la ventana (Ciclo de 26s) */
#modalChangeEmail .modal-content::after {
    content: "";
    position: absolute;
    top: -150%; 
    left: -150%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        80deg, 
        transparent 0%, 
        transparent 45%, 
        rgba(229, 192, 91, 0.4) 50%, 
        transparent 55%, 
        transparent 100%
    );
    animation: androWindowShine 26s infinite; 
    pointer-events: none;
    z-index: 1;
}

#modalChangeEmail .modal-header {
    border-bottom: 2px solid rgba(229, 192, 91, 0.4); 
    border-radius: 0;
    position: relative;
    z-index: 2;
}

#modalChangeEmail .modal-title {
    font-family: 'Cinzel', serif;
    color: var(--andro-gold) !important;
    text-shadow: 0 0 10px rgba(229, 192, 91, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- ESTILO DE INPUTS (Como el Login) --- */

#modalChangeEmail .form-control {
    border-radius: 0 !important;
    border: 1px solid rgba(229, 192, 91, 0.2); /* Borde dorado tenue */
    background-color: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
    transition: all 0.3s ease;
}

#modalChangeEmail .form-control:hover {
    border-color: var(--andro-gold);
    box-shadow: -5px 0 10px rgba(229, 192, 91, 0.2), 
                 5px 0 10px rgba(229, 192, 91, 0.2);
}

#modalChangeEmail .form-control:focus {
    border-color: #fff !important;
    box-shadow: -8px 0 20px rgba(229, 192, 91, 0.5), 
                 8px 0 20px rgba(229, 192, 91, 0.5) !important;
    background-color: #000 !important;
    transform: translateX(8px);
    outline: none;
}

/* --- BOTÓN DE ACTUALIZAR CORREO --- */

#btn_change_correo {
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    border: none !important;
    padding: 12px !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 15px;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
    background: linear-gradient(135deg, var(--andro-gold-dark), var(--andro-gold)) !important;
    color: #000 !important;
    border-radius: 0 !important;
    z-index: 2;
}

#btn_change_correo:hover {
    transform: scale(1.03);
    filter: brightness(1.2);
    box-shadow: 0 0 15px var(--andro-gold-dark);
}

/* Brillo propio del botón */
#btn_change_correo::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    animation: androShine 4s infinite;
}


/* --- ESTILO DE INPUTS PARA CAMBIO DE CORREO (Estilo Blue-Focus) --- */

/* Estado base y Placeholder */
#modalChangeEmail .form-control {
    border-radius: 0 !important;
    border: 1px solid rgba(30, 144, 255, 0.2); /* Borde azul tenue de base */
    background-color: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

#modalChangeEmail .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    font-style: italic;
}

/* Efecto Hover: Brillo azul lateral al pasar el mouse */
#modalChangeEmail .form-control:hover {
    border-color: var(--andro-blue);
    box-shadow: -5px 0 10px rgba(30, 144, 255, 0.2), 
                 5px 0 10px rgba(30, 144, 255, 0.2);
    background-color: rgba(10, 20, 40, 0.9) !important;
    cursor: pointer;
}

/* Efecto Focus: Brillo intenso azul y desplazamiento (Igual que Password) */
#modalChangeEmail .form-control:focus {
    border-color: #fff !important; /* Borde blanco para resaltar el foco */
    box-shadow: -8px 0 20px rgba(30, 144, 255, 0.6), 
                 8px 0 20px rgba(30, 144, 255, 0.6) !important;
    background-color: #000 !important;
    transform: translateX(8px); /* Desplazamiento característico */
    outline: none;
}

/* Ajuste de los Labels para coherencia */
#modalChangeEmail .form-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #a0a0a0 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
}





/* --- SECCIÓN NOTICIAS (FONDO FIJO) --- */

/* Espaciador para las flechas laterales */
.swiper-container-wrapper {
    position: relative;
    padding: 0 50px; /* Crea espacio a los lados para las flechas */
}

/* --- SWIPER AJUSTES --- */
.swiper-main-wrapper {
    position: relative;
    padding: 0 60px; /* Espacio exacto para que las flechas no toquen las cards */
}

.androSwiper {
    width: 100%;
    overflow: hidden !important; /* IMPORTANTE: Esto corta las cards que sobran y deja solo 3 */
    padding: 20px 0 40px 0 !important;
}

/* --- CARDS ESTILO ANDROMEDA --- */
.andro-card {
    position: relative;
    /* Fondo transparente con blur estilo modal login */
    background: rgba(15, 17, 21, 0.75) !important; 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Esquinas más redondeadas sutiles */
    border-radius: 15px; 
    
    /* Borde tenue inicial */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    /* Aumento de tamaño visual */
    padding: 10px; 
    min-height: 480px; /* Un poco más alta */
    
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, box-shadow;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Efecto al hacer Hover en la Card */
.andro-card:hover {
    transform: translateY(-15px) scale(1.02);
    /* Borde azul brillante o dorado según prefieras (aquí azul Andromeda) */
    border-color: var(--andro-blue) !important; 
    box-shadow: 0 0 25px rgba(30, 144, 255, 0.3), 0 20px 40px rgba(0, 0, 0, 0.7);
}

.andro-card-img {
    width: 100%;
    height: 240px; /* Más alta para que luzca el arte */
    border-radius: 8px; /* Imagen redondeada dentro del contenedor */
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
    transition: transform 0.6s ease;
}

.andro-card-body { 
    padding: 10px 10px 20px 10px;
}

.andro-card:hover .andro-card-img {
    transform: scale(1.1);
    background-size: 110%; /* Zoom suave a la foto de fondo */
    transition: background-size 0.6s ease;    
}

.andro-card:hover .andro-card-badge {
    transform: rotate(-10deg) scale(1.1);
    box-shadow: 0 0 15px var(--andro-gold);
}

.andro-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.5); /* Borde dorado como tu imagen */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    z-index: 5;
    
    /* Importante: El icono hereda la suavidad si no le pones una transición propia que choque */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.andro-card-body { padding: 25px; }

.andro-date {
    color: #666;
    font-size: 0.8rem;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.andro-card-title {
    font-family: 'Cinzel', serif;
    color: #fff;
    font-size: 1.5rem; /* Título más grande */
    margin-bottom: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.andro-card-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.andro-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
}

.andro-tag {
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--andro-blue);
}

.andro-btn-read {
    color: #fff;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
    transition: 0.3s;
}

.andro-btn-read:hover {
    background: var(--andro-blue);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 20px rgba(30, 144, 255, 0.6);
}

/* --- SWIPER AJUSTES --- */
.androSwiper {
    width: 100%;
    overflow: visible !important; 
    padding: 50px 20px 80px 20px !important;
}

.swiper-wrapper {
    display: flex !important; /* Asegura que las slides se pongan en fila */
}

/* Ajuste de puntos de paginación */
.swiper-pagination {
    bottom: -40px !important;
}
.swiper-pagination-bullet {
    background: #555 !important;
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background: var(--andro-blue) !important;
    width: 25px;
    border-radius: 5px;
}

.swiper-button-next, .swiper-button-prev { color: var(--andro-blue) !important; transform: scale(0.6); }

/* --- MODAL DETALLE --- */
.andro-modal-news {
    background: rgba(10, 15, 25, 0.98) !important;
    border: 1px solid var(--andro-blue) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 1);
}

.news-detail-header {
    height: 350px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 2px solid var(--andro-blue);
}

.news-header-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 40px;
    background: linear-gradient(transparent, rgba(10, 15, 25, 1));
}

.news-detail-content { max-height: 450px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--andro-blue) transparent; }

/* --- FLECHAS POSICIONADAS AFUERA --- */
.andro-nav-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.andro-nav-wrapper.prev { left: -10px; } /* Ajusta según qué tan afuera las quieras */
.andro-nav-wrapper.next { right: -10px; }


/* Flechas de navegación */
.andro-nav-btn {
    position: static !important;
    /* Aumentamos el tamaño del círculo */
    width: 60px !important; 
    height: 60px !important;
    
    background: rgba(10, 10, 10, 0.5) !important; /* Fondo oscuro más profundo */
    border: 2px solid rgba(255, 255, 255, 0.15) !important; /* Borde un poco más grueso */
    border-radius: 50% !important; /* Círculo perfecto */
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto elástico */
    backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 20;
}

.andro-nav-btn::after {
    font-family: swiper-icons;
    font-size: 20px !important; /* Flecha más visible */
    font-weight: 900;
    color: rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s ease;
}

/* HOVER: Brillo y escalado */
.andro-nav-btn:hover {
    background: rgba(30, 144, 255, 0.2) !important;
    border-color: var(--andro-blue) !important; 
    box-shadow: 0 0 20px rgba(30, 144, 255, 0.4);
    transform: scale(1.1); /* Crece un poco al pasar el mouse */
}

.andro-nav-btn:hover::after {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Ajuste específico para la dirección de la flecha */
.swiper-button-prev::after { content: 'prev' !important; margin-right: 2px; }
.swiper-button-next::after { content: 'next' !important; margin-left: 2px; }





/* --- BOTONES FLOTANTES DERECHA --- */
.andro-social-sticky {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.sticky-icon {
    width: 45px;
    height: 45px;
    background: rgba(25, 25, 35, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.sticky-icon:hover {
    background: var(--andro-blue);
    color: white;
    transform: translateX(-5px);
    box-shadow: 0 0 15px var(--andro-blue);
}

/* --- FOOTER ESTILO ANDROMEDA --- */
.andro-footer {
    background: #05070a; /* Negro profundo como la imagen */
    padding-top: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-description {
    color: #888;
    max-width: 600px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Botones circulares del footer */
.social-btn {
    width: 50px;
    height: 50px;
    background: #1a1c23;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.3rem;
    transition: 0.3s;
}

.social-btn:hover {
    background: var(--andro-blue);
    transform: translateY(-5px);
    color: #fff;
    box-shadow: 0 5px 15px rgba(30, 144, 255, 0.4);
}

/* Barra de créditos inferior */
.footer-bottom {
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    color: #555;
}

.footer-bottom strong {
    color: #aaa;
}

.footer-bottom .copyright, .footer-bottom .designer {
    padding: 5px 0;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .andro-social-sticky {
        right: 10px;
    }
    .sticky-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    .footer-bottom .container {
        justify-content: center !important;
        text-align: center;
    }
}


/* --- SECCIÓN GENERAL --- */
.andro-info-section .container { position: relative; z-index: 2; }

/* --- MENÚ LATERAL --- */
.andro-side-menu {
    display: flex !important;
    flex-direction: column !important; /* Mantiene el orden de arriba hacia abajo */
    background: rgba(15, 17, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px;
    gap: 8px; /* Espacio entre botones */
}

.andro-side-menu .nav-link {
    width: 100% !important; /* Que ocupen todo el ancho de su columna */
    display: flex !important;
    flex-direction: row !important; /* Icono a la izquierda, texto a la derecha */
    align-items: center;
    gap: 12px;
    padding: 12px !important;
    white-space: normal; /* Permite que el texto baje si no cabe */
}

/* Ajuste para pantallas muy pequeñas */
@media (max-width: 576px) {
    .andro-side-menu {
        padding: 5px;
    }
    .andro-side-menu .nav-link {
        padding: 8px !important;
        /*justify-content: center; /* Centra el icono si el texto desaparece */
    }
    .tab-title {
        font-size: 0.8rem; /* Texto más chico en móvil */
    }
}

.tab-content-text {
    line-height: 1.2;
}


.andro-side-menu .nav-link:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
}

.andro-side-menu .nav-link.active {
    background: rgba(30, 144, 255, 0.1) !important;
    color: #fff !important;
    border-left: 3px solid var(--andro-blue);
}

.tab-icon {
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-title { display: block; font-weight: 600; font-size: 1rem; }
.tab-subtitle { display: block; font-size: 0.75rem; color: #666; }

/* --- CONTENIDO DERECHA --- */
.andro-info-content {
    background: rgba(18, 20, 25, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    height: 100%; /* Para que se iguale al menú */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.content-title { font-family: 'Cinzel', serif; color: #fff; margin-bottom: 20px; }
.content-intro { color: #aaa; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 20px; margin-bottom: 30px; }

.dark-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.sub-block-title { color: #fff; font-weight: bold; margin-bottom: 15px; }

/* --- TABLAS --- */
.andro-table {
    background: transparent !important;
    margin-top: 20px;
}

.andro-table thead th {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #666;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.andro-table td {
    vertical-align: middle;
    color: #ddd;
    font-size: 0.9rem;
    padding: 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.skill-img { width: 32px; height: 32px; border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,0.5); }



/* --- DESCARGAS --- */
/* --- SECCIÓN DE DESCARGAS ACTUALIZADA --- */
.andro-step-card {
    background: rgba(15, 17, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* Transición suave para todos los elementos */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

/* EFECTO HOVER: Movimiento y Brillo Exterior */
.andro-step-card:hover {
    transform: translateY(-15px) scale(1.02); /* Movimiento hacia arriba y leve aumento */
    background: rgba(20, 22, 28, 0.85);
    
    /* Brillo exterior (Glow) azul por defecto */
    border-color: rgba(30, 144, 255, 0.6);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 
                0 0 25px rgba(30, 144, 255, 0.2); 
}

/* Personalización para la card de Registro (Dorado) */
.andro-step-card:last-child:hover {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 
                0 0 25px rgba(212, 175, 55, 0.2);
}

/* Animación interna del icono al pasar el mouse */
.andro-step-card:hover .step-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(30, 144, 255, 0.8));
    transition: all 0.4s ease;
}

/* --- ELEMENTOS INTERNOS (Sin cambios pero incluidos para tu copia) --- */

.step-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--andro-blue);
    color: #fff;
    font-size: 0.7rem;
    padding: 4px 15px;
    border-radius: 0 0 10px 10px;
    letter-spacing: 1px;
    font-weight: bold;
}

.step-icon {
    font-size: 3rem;
    color: var(--andro-blue);
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(30, 144, 255, 0.4));
    transition: 0.4s;
}

.step-title {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 15px;
}

.step-desc {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Botones y el resto del código que ya tenías... */
.download-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.andro-dl-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.andro-dl-btn:hover {
    background: var(--andro-blue);
    color: white;
    border-color: var(--andro-blue);
    box-shadow: 0 5px 15px rgba(30, 144, 255, 0.3);
}

.register-btn {
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    border: none;
    color: #000 !important;
}


.andro-video-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
}

.andro-audio-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(30, 144, 255, 0.5);
    color: white;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.andro-audio-btn:hover {
    background: var(--andro-blue);
    box-shadow: 0 0 15px var(--andro-blue);
    transform: scale(1.1);
}

/* Animación cuando el sonido está activo */
.andro-audio-btn.active {
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}



/* --- KEYFRAMES (ANIMACIONES) --- */

@keyframes pulse {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.05); filter: brightness(1.2); }
}

@keyframes text-glow {
    0% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.4), 0 0 10px rgba(30, 144, 255, 0.2); }
    100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(30, 144, 255, 0.6); }
}

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Responsive */
@media (max-width: 768px) {
    .preloader-logo { max-width: 120px; }
    .preloader-text { font-size: 1.8rem; letter-spacing: 2px; }
    .dot { width: 10px; height: 10px; }
}




/* --- SECCIÓN DONACIONES --- */
.andro-donations-card {
    max-width: 950px;
    width: 90%;
    margin: 0 auto;
    
    /* EFECTO VENTANA (Glassmorphism como en las cards) */
    background: rgba(15, 17, 21, 0.75) !important; 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    /* BORDE DE LUZ (Estilo imagen Royal Weapons) */
    border: 1px solid var(--andro-blue) !important;
    border-radius: 20px;
    
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
    
    /* SOMBRA Y BRILLO EXTERIOR */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 
                0 0 30px rgba(30, 144, 255, 0.15);
}

/* Decoración de esquina (opcional, para dar toque RPG) */
.andro-donations-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--andro-blue), transparent);
}

/* AJUSTE DEL TÍTULO */
.section-title-andro {
    font-size: 2.8rem;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
    letter-spacing: 5px;
}

.subtitle-andro {
    color: var(--andro-gold);
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.email-andro {
    color: var(--andro-gold);
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 1.0rem;
    margin-bottom: 30px;
}


.andro-hr {
    border-color: rgba(229, 192, 91, 0.3);
    margin: 30px 0;
}

.donations-content p {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: center;
}

/* Alerta de Correo */
.andro-alert {
    background: rgba(212, 175, 55, 0.1);
    border-left: 4px solid var(--andro-gold);
    padding: 20px;
    margin: 30px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.andro-alert p {
    margin: 0;
    text-align: left;
    font-size: 0.95rem;
    color: #eee;
}

/* Caja del Comando .retirar */
.andro-command-box {
    margin-top: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    /* Resalta sobre el fondo blureado */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.l2-command {
    font-family: 'Consolas', monospace;
    font-size: 1.5rem;
    color: #fff;
    text-shadow: 0 0 20px var(--andro-blue);
    background: transparent;
    padding: 10px 20px;
}

/* Botón de Acción */
.btn-andro-action {
    background: linear-gradient(135deg, var(--andro-blue) 0%, #004e92 100%);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-family: 'Cinzel', serif;
    border-radius: 5px;
    transition: 0.3s;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-andro-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px var(--andro-blue);
    filter: brightness(1.2);
}

.payment-methods img {
    margin-top: 30px;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.1));
}







/* --- ESTILO BASE PARA SECCIONES CON PARALLAX --- */
.andro-news-section, 
.andro-info-section, 
.andro-download-section, 
.andro-donations-section {
    position: relative;
    overflow: hidden;
    z-index: 1;
    
    /* Forzamos el alto de la pantalla completa */
    width: 100%;
    min-height: 100vh; /* 100% del Viewport Height */
    
    /* Centrado de contenido interno */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center;     /* Centra el contenido horizontalmente */
    
    padding: 60px 0; /* Espacio de seguridad para no pegar el texto a los bordes */
}

/* Pseudo-elemento para el fondo Parallax (Optimizado) */
.andro-news-section::before, 
.andro-info-section::before, 
.andro-download-section::before, 
.andro-donations-section::before {
    content: "";
    position: absolute;
    /* Margen extra para que al moverse no se vea el fondo blanco */
    top: -20%; 
    left: 0;
    width: 100%;
    height: 140%; 
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    will-change: transform;
    /* Usamos la variable de JS */
    transform: translateY(calc(var(--parallax-y, 0) * 1px)); 
    transition: transform 0.1s ease-out;
}

/* Tus imágenes con su respectiva oscuridad */
.andro-news-section::before { background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('/assets/img/news1.png'); }
.andro-info-section::before { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/img/tabs.jpg'); }
.andro-download-section::before { background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/assets/img/descargas.jpg'); }
.andro-donations-section::before { background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/assets/img/donaciones.jpg'); }







/* --- PRELOADER ANDROMEDA CENTRAL --- */
.andro-preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000; /* Fondo negro profundo */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.andro-preloader.hidden { opacity: 0; visibility: hidden; }

.preloader-content {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Animación del Logo */
.preloader-logo {
    max-width: 180px;
    margin-bottom: 25px;
    filter: drop-shadow(0 0 10px var(--andro-blue));
    animation: preloaderPulse 2s infinite alternate;
}

@keyframes preloaderPulse {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(1.05); opacity: 1; }
}

/* Texto Superior */
.preloader-text {
    font-family: 'Cinzel', serif;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* PORCENTAJE NUMÉRICO */
.percentage-display {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: var(--andro-blue, #1e90ff);
    font-weight: 900;
    text-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
    line-height: 1;
}

/* ESTRUCTURA DE LA BARRA */
.progress-outer {
    width: 320px;
    height: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(30, 144, 255, 0.4);
    border-radius: 50px;
    padding: 3px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    margin-top: 10px;
}

.progress-inner {
    width: 0%; /* Se controla con JS */
    height: 100%;
    background: linear-gradient(90deg, #1e90ff, #00bfff, #fff);
    background-size: 200% 100%;
    border-radius: 50px;
    position: relative;
    transition: width 0.4s ease-out;
}

/* Rayo de luz animado dentro de la barra */
.progress-beam {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: beamSweep 1.5s infinite;
}

@keyframes beamSweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* Puntos de carga */
.preloader-dots { display: flex; gap: 8px; margin-top: 25px; }
.dot {
    width: 10px; height: 10px;
    background: var(--andro-blue, #1e90ff);
    border-radius: 50%;
    animation: dotBounce 1.4s infinite ease-in-out;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}