/* Override para Agentes IA - Galaxy Background */

/* Fondo base y reset */
body {
    background-color: #050510 !important;
    color: #ffffff !important;
}

/* Force text color for all main elements */
h1, h2, h3, h4, h5, h6, p, li, strong, i {
    color: #ffffff !important;
}

.hero-title, .hero-subtitle, .section-title, .section-description {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.agent-role-card h3, .agent-role-card p, .agent-role-card li, .agent-role-card span {
    color: #ffffff !important;
}

.quick-stat-content strong, .quick-stat-content span {
    color: #ffffff !important;
}

.explanation-card h3, .explanation-card p {
    color: #ffffff !important;
}

.gradient-text {
    background: linear-gradient(to right, #c084fc, #e879f9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important; /* Fallback override */
    text-shadow: none !important;
}

/* Hacer transparentes las secciones para ver el fondo */
.hero,
.what-is-agent-section,
.team-agents-section,
.how-agent-thinks-section,
.real-cases-agents-section,
.agent-vs-human-section,
.cta-section {
    background: transparent !important;
    position: relative;
    z-index: 5;
}

.hero-background .hero-image {
    display: none !important; /* Ocultar imagen anterior del hero */
}

.hero-overlay {
    background: transparent !important;
}

/* Container del Fondo Galáctico */
.galaxy-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    z-index: -1;
    overflow: hidden;
}

/* Nebulosas y efectos de color */
.galaxy-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(76, 29, 149, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
    z-index: 0;
}

/* Capas de Estrellas */
.stars-layer-1 {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 
        10vw 10vh #fff, 24vw 82vh #fff, 32vw 42vh #fff, 45vw 25vh #fff, 51vw 95vh #fff, 63vw 15vh #fff, 78vw 5vh #fff, 86vw 60vh #fff, 95vw 80vh #fff,
        5vw 65vh #fff, 15vw 12vh #fff, 25vw 95vh #fff, 35vw 35vh #fff, 65vw 85vh #fff, 75vw 25vh #fff, 85vw 45vh #fff, 92vw 10vh #fff,
        2vw 20vh #fff, 12vw 80vh #fff, 42vw 50vh #fff, 62vw 10vh #fff, 82vw 80vh #fff, 98vw 50vh #fff;
    opacity: 0.8;
    animation: twinkle 5s infinite alternate;
}

.stars-layer-2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        15vw 15vh #fff, 35vw 45vh #fff, 55vw 75vh #fff, 75vw 25vh #fff, 95vw 55vh #fff,
        25vw 85vh #fff, 45vw 15vh #fff, 65vw 45vh #fff, 85vw 85vh #fff, 5vw 35vh #fff,
        50vw 50vh #fff, 10vw 90vh #fff, 90vw 10vh #fff;
    opacity: 0.6;
    animation: twinkle 7s infinite alternate-reverse;
}

/* Constelaciones (Líneas sutiles conectando puntos específicos) */
.constellation {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.constellation-group-1 {
    position: absolute;
    top: 20%;
    left: 15%;
    width: 200px;
    height: 200px;
    opacity: 0.4;
    transform: rotate(15deg);
}

.constellation-group-2 {
    position: absolute;
    bottom: 30%;
    right: 15%;
    width: 250px;
    height: 250px;
    opacity: 0.3;
    transform: rotate(-10deg);
}

.star-node {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px #fff;
}

.star-node.big { width: 4px; height: 4px; }
.star-node.med { width: 3px; height: 3px; }
.star-node.small { width: 2px; height: 2px; }

.star-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    height: 1px;
    transform-origin: left center;
}

/* Animaciones */
@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 0.9; }
}

@keyframes drift {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Asegurar legibilidad del texto */
.hero-title, .section-title {
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

h1, h2, h3, h4, p, span, li, i {
    z-index: 10;
}

/* Cards semitransparentes en lugar de blancas solidas si es necesario */
.simple-explanation .explanation-card,
.agent-role-card,
.thinking-example,
.case-story,
.comparison-table {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.agent-role-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.2);
}

.comparison-header {
    background: rgba(255, 255, 255, 0.05);
}

.comparison-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-row:last-child {
    border-bottom: none;
}