/* ==========================================================================
   Estilos principales para HubChile
   ========================================================================== */

/* Configuración de fuentes */
body {
    font-family: 'Roboto', sans-serif; 
}

/* ==========================================================================
   Estilos para la sección Hero con video de fondo
   ========================================================================== */
.hero-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 Aspect Ratio */
    min-height: 100vh;
    min-width: 177.77vh; /* 16:9 Aspect Ratio */
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-video-bg iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(140, 9, 176, 0.4); /* Fucsia/Morado basado en primary-dark */
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

/* ==========================================================================
   Estilos para tarjetas con efecto hover
   ========================================================================== */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   Estilos para botones con gradiente animado
   ========================================================================== */
.button-gradient-bg {
    background-image: linear-gradient(to right, #af0bdc 0%, #f633f6 51%, #af0bdc 100%);
    background-size: 200% auto;
    transition: background-position 0.5s ease;
}

.button-gradient-bg:hover {
    background-position: right center;
}

/* ==========================================================================
   Estilos para tarjetas de aliados
   ========================================================================== */
.ally-card-colored {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem; /* p-6 px-4 */
    background-color: #f5e6fd; /* primary-light */
    color: #4a045e; /* primary-darkest */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    height: 100%; /* Asegura altura uniforme en la misma fila */
    min-height: 140px; /* Altura mínima para consistencia */
}

.ally-card-colored:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
}

.ally-card-colored span {
    /* Asegura que el texto se corte si es muy largo */
    word-break: break-word;
    line-height: 1.4;
}

/* ==========================================================================
   Estilos para navegación activa
   ========================================================================== */
#desktop-nav .nav-active {
    background-color: #f5e6fd; /* primary-light */
    color: #af0bdc; /* primary */
    font-weight: 700; /* bold */
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    border-radius: 9999px; /* rounded-full */
}

#mobile-menu .nav-active {
    background-color: #f5e6fd; /* primary-light */
    color: #af0bdc; /* primary */
    font-weight: 700; /* bold */
}