/* Importación de Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Ajuste de íconos de Google */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Prevenir scroll cuando el menú móvil está abierto */
.no-scroll { 
    overflow: hidden; 
}

/* ========================================== */
/* BENTO GRID INTERACTIVO - ECOSISTEMA        */
/* ========================================== */
.bento-image {
    opacity: 0.35; /* Opacidad inicial solicitada (35%) */
    transform: scale(1.05); 
    transition: opacity 0.5s ease, transform 0.7s ease;
}
.group:hover .bento-image {
    opacity: 0.75; /* Opacidad al pasar el mouse (75%) para que se vea mejor */
    transform: scale(1.1); 
}

/* ========================================== */
/* NEXT GEN SOLUTIONS - GLASSMORPHISM         */
/* ========================================== */
.glass-card {
    /* Fondo blanco al 5% de opacidad */
    background: rgba(255, 255, 255, 0.05); 
    /* Desenfoca lo que hay detrás de la tarjeta (Efecto Cristal) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Borde súper sutil para enmarcar el cristal */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease-in-out;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* ========================================== */
/* CARRUSEL INFINITO - CULTURA DIGITAL        */
/* ========================================== */
.carousel-track {
    display: flex;
    width: max-content;
    /* La animación dura 40s. Si quieres que gire más rápido, baja a 20s */
    animation: scroll-left 40s linear infinite; 
}

/* Detiene el movimiento cuando el usuario pone el mouse encima */
.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Se mueve exactamente a la mitad para reiniciar el bucle invisible */
}

/* Efecto visual de Burbuja/Cápsula */
.bubble-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bubble-card:hover {
    transform: translateY(-15px) scale(1.03); /* La burbuja flota hacia arriba */
    box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.25); /* Sombra azul brillante */
    border-color: #3b82f6; /* El borde se pinta del azul corporativo */
}

/* ========================================== */
/* EFECTO FIZZY BUTTON (Burbujas de Colores)  */
/* ========================================== */
.fizzy-btn {
    position: relative;
    z-index: 1;
}

/* Pseudo-elementos que crearán las burbujas */
.fizzy-btn::before, .fizzy-btn::after {
    position: absolute;
    content: '';
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1;
    background-repeat: no-repeat;
}

/* Burbujas Superiores (Estallan hacia arriba) */
.fizzy-btn:hover::before {
    top: -75%;
    background-image:
        radial-gradient(circle, #3b82f6 20%, transparent 20%), /* Azul */
        radial-gradient(circle, transparent 20%, #10b981 20%, transparent 30%), /* Verde */
        radial-gradient(circle, #eab308 20%, transparent 20%), /* Amarillo */
        radial-gradient(circle, #ec4899 20%, transparent 20%), /* Rosa */
        radial-gradient(circle, transparent 10%, #06b6d4 15%, transparent 20%), /* Cian */
        radial-gradient(circle, #3b82f6 20%, transparent 20%), /* Azul */
        radial-gradient(circle, #10b981 20%, transparent 20%), /* Verde */
        radial-gradient(circle, #eab308 20%, transparent 20%), /* Amarillo */
        radial-gradient(circle, #ec4899 20%, transparent 20%); /* Rosa */
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
    animation: topBubbles 0.75s ease-in-out forwards;
}

/* Burbujas Inferiores (Estallan hacia abajo) */
.fizzy-btn:hover::after {
    bottom: -75%;
    background-image:
        radial-gradient(circle, #3b82f6 20%, transparent 20%),
        radial-gradient(circle, #eab308 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #ec4899 15%, transparent 20%),
        radial-gradient(circle, #10b981 20%, transparent 20%),
        radial-gradient(circle, #3b82f6 20%, transparent 20%),
        radial-gradient(circle, #06b6d4 20%, transparent 20%),
        radial-gradient(circle, #ec4899 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
    animation: bottomBubbles 0.75s ease-in-out forwards;
}

/* Animaciones de expansión y desvanecimiento */
@keyframes topBubbles {
    0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; opacity: 1;}
    50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; opacity: 1;}
    100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; opacity: 0;}
}

@keyframes bottomBubbles {
    0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; opacity: 1;}
    50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; opacity: 1;}
    100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; opacity: 0;}
}