/* Override para Hero de Integraciones - Texto más visible */
.hero-integrations {
    min-height: 750px !important;
    padding: 180px 0 120px !important;
}

.hero-integrations .container {
    position: relative;
    z-index: 10;
}

.hero-integrations .hero-text-integrations {
    position: relative;
    z-index: 15;
    padding-top: 40px;
}

.hero-integrations .hero-title {
    color: #ffffff !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 1), 0 2px 15px rgba(0, 0, 0, 0.9) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 2.2rem !important;
}

.hero-integrations .hero-subtitle {
    color: #ffffff !important;
    font-weight: 500 !important;
    text-shadow: 0 3px 25px rgba(0, 0, 0, 1), 0 1px 12px rgba(0, 0, 0, 0.9) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.95rem !important;
}

.hero-integrations .hero-badge {
    color: #ffffff !important;
    background: rgba(139, 92, 246, 0.3) !important;
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(139, 92, 246, 0.5);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    font-size: 0.85rem !important;
}

.hero-integrations .gradient-text {
    color: #d8b4fe !important;
    font-weight: 900 !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 1), 0 2px 15px rgba(139, 92, 246, 0.5) !important;
}

.hero-integrations .stat-inline span {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 1), 0 1px 10px rgba(0, 0, 0, 0.9) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 0.8rem !important;
}

.hero-integrations .stat-inline strong {
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.9), 0 1px 10px rgba(0, 0, 0, 0.7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 2rem !important;
}

.hero-integrations .hero-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* --- Galaxy & Stars System --- */

/* Make all sections transparent to show the stars */
body {
    background-color: #050510 !important;
}

.hero-integrations,
.categories-section,
.how-works-section,
.benefits-integrations-section,
.cta-section {
    background: transparent !important;
    position: relative;
    z-index: 5;
}

/* Hide original hero image but keep overlay for contrast */
.hero-background .hero-image {
    display: none !important;
}

.galaxy-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #020014 0%, #0d0029 50%, #1a0b3c 100%);
    z-index: -1;
    overflow: hidden;
}

/* Star Layers using box-shadow for performance */
.stars-layer-1 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        10vw 10vh #fff, 20vw 80vh #fff, 30vw 30vh #fff, 40vw 50vh #fff, 50vw 10vh #fff, 60vw 90vh #fff, 70vw 40vh #fff, 80vw 20vh #fff, 90vw 60vh #fff,
        15vw 65vh #fff, 25vw 15vh #fff, 35vw 85vh #fff, 45vw 45vh #fff, 55vw 25vh #fff, 65vw 75vh #fff, 75vw 35vh #fff, 85vw 55vh #fff, 95vw 5vh #fff,
        5vw 95vh #fff, 8vw 42vh #fff, 92vw 28vh #fff, 48vw 82vh #fff, 22vw 38vh #fff, 78vw 68vh #fff, 32vw 12vh #fff, 62vw 52vh #fff, 12vw 72vh #fff,
        38vw 92vh #fff, 52vw 18vh #fff, 82vw 88vh #fff, 18vw 32vh #fff, 68vw 8vh #fff, 88vw 48vh #fff, 28vw 62vh #fff, 58vw 22vh #fff, 98vw 78vh #fff,
        42vw 8vh #fff, 72vw 98vh #fff, 2vw 58vh #fff, 94vw 14vh #fff, 24vw 84vh #fff, 54vw 34vh #fff, 84vw 64vh #fff, 14vw 24vh #fff, 44vw 94vh #fff,
        64vw 44vh #fff, 34vw 54vh #fff, 6vw 16vh #fff, 76vw 86vh #fff, 26vw 74vh #fff, 96vw 36vh #fff, 16vw 96vh rgba(255,255,255,0.8), 46vw 6vh #fff;
    opacity: 0.6;
    animation: twinkle 4s infinite alternate;
}

.stars-layer-2 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 
        12vw 18vh #fff, 32vw 48vh #fff, 52vw 78vh #fff, 72vw 28vh #fff, 92vw 58vh #fff,
        22vw 82vh #fff, 42vw 12vh #fff, 62vw 42vh #fff, 82vw 92vh #fff, 8vw 32vh #fff,
        18vw 68vh #fff, 38vw 22vh #fff, 58vw 52vh #fff, 78vw 82vh #fff, 98vw 12vh #fff,
        28vw 42vh #fff, 48vw 72vh #fff, 68vw 2vh #fff, 88vw 32vh #fff, 6vw 62vh #fff,
        99vw 99vh #FFF, 50vw 50vh #FFF, 10vw 90vh #FFF;
    opacity: 0.8;
    animation: twinkle 3s infinite alternate-reverse;
}

.stars-layer-3 { /* Brighter, bigger stars (Constellation nodes) */
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow: 
        20vw 20vh #fff, 25vw 22vh #fff, 22vw 26vh #fff, /* Mini cluster */
        60vw 60vh #fff, 65vw 55vh #fff, 70vw 65vh #fff, 58vw 68vh #fff, /* Cluster */
        80vw 10vh #fff, 85vw 12vh #fff, 90vw 10vh #fff,
        10vw 80vh #fff, 15vw 85vh #fff;
    opacity: 1;
    filter: blur(1px);
    animation: pulse 5s infinite;
}

/* Animations */
@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes pulse {
    0% { opacity: 0.5; box-shadow: 20vw 20vh 0px 0px rgba(255,255,255,0.5), 25vw 22vh 0px 0px rgba(255,255,255,0.5), 22vw 26vh 0px 0px rgba(255,255,255,0.5), 60vw 60vh 0px 0px rgba(255,255,255,0.5), 65vw 55vh 0px 0px rgba(255,255,255,0.5), 70vw 65vh 0px 0px rgba(255,255,255,0.5), 58vw 68vh 0px 0px rgba(255,255,255,0.5), 80vw 10vh 0px 0px rgba(255,255,255,0.5), 85vw 12vh 0px 0px rgba(255,255,255,0.5), 90vw 10vh 0px 0px rgba(255,255,255,0.5), 10vw 80vh 0px 0px rgba(255,255,255,0.5), 15vw 85vh 0px 0px rgba(255,255,255,0.5); }
    50% { opacity: 1; box-shadow: 20vw 20vh 0px 4px rgba(255,255,255,0.8), 25vw 22vh 0px 4px rgba(255,255,255,0.8), 22vw 26vh 0px 4px rgba(255,255,255,0.8), 60vw 60vh 0px 4px rgba(255,255,255,0.8), 65vw 55vh 0px 4px rgba(255,255,255,0.8), 70vw 65vh 0px 4px rgba(255,255,255,0.8), 58vw 68vh 0px 4px rgba(255,255,255,0.8), 80vw 10vh 0px 4px rgba(255,255,255,0.8), 85vw 12vh 0px 4px rgba(255,255,255,0.8), 90vw 10vh 0px 4px rgba(255,255,255,0.8), 10vw 80vh 0px 4px rgba(255,255,255,0.8), 15vw 85vh 0px 4px rgba(255,255,255,0.8); }
    100% { opacity: 0.5; box-shadow: 20vw 20vh 0px 0px rgba(255,255,255,0.5), 25vw 22vh 0px 0px rgba(255,255,255,0.5), 22vw 26vh 0px 0px rgba(255,255,255,0.5), 60vw 60vh 0px 0px rgba(255,255,255,0.5), 65vw 55vh 0px 0px rgba(255,255,255,0.5), 70vw 65vh 0px 0px rgba(255,255,255,0.5), 58vw 68vh 0px 0px rgba(255,255,255,0.5), 80vw 10vh 0px 0px rgba(255,255,255,0.5), 85vw 12vh 0px 0px rgba(255,255,255,0.5), 90vw 10vh 0px 0px rgba(255,255,255,0.5), 10vw 80vh 0px 0px rgba(255,255,255,0.5), 15vw 85vh 0px 0px rgba(255,255,255,0.5); }
}

/* Shooting Stars */
.shooting-star {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 2px;
    background: linear-gradient(-45deg, rgba(255,255,255,1), rgba(0,0,255,0));
    filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
    animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}

.shooting-star::before, .shooting-star::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(255, 255, 255, 1), rgba(0, 0, 255, 0));
    transform: translateX(50%) rotateZ(45deg);
    border-radius: 100%;
    animation: shining 3000ms ease-in-out infinite;
}

.shooting-star::after {
    transform: translateX(50%) rotateZ(-45deg);
}

.shooting-star:nth-child(4) {
    top: calc(10% - -100px);
    left: calc(10% - 250px);
    width: 150px; /* Short trail */
    animation-delay: 2000ms;
}
.shooting-star:nth-child(5) {
    top: calc(50% - -50px);
    left: calc(70% - 200px);
    width: 250px;
    animation-delay: 5000ms;
}
.shooting-star:nth-child(6) {
    top: calc(0% - 50px);
    left: calc(90% - 300px);
    width: 200px;
    animation-delay: 8000ms;
}
.shooting-star:nth-child(7) {
    top: calc(80% - 100px);
    left: calc(20% - 100px);
    width: 300px;
    animation-delay: 11000ms;
}

@keyframes tail {
    0% { width: 0; }
    30% { width: 100px; }
    100% { width: 0; }
}
@keyframes shooting {
    0% { transform: translateX(0) translateY(0) rotate(35deg); }
    100% { transform: translateX(300px) translateY(300px) rotate(35deg); }
}
@keyframes shining {
    0% { width: 0; }
    50% { width: 30px; }
    100% { width: 0; }
}