/* Fix para distribución de contenido en columnas de paquetes */

/* Asegurar que los divs de contenedor flexbox en columnas se expandan completamente */
.col-lg-4,
.col-md-4,
.col-sm-6,
.col-12 {
    display: flex !important;
    flex-direction: column !important;
}

/* Corregir .single-event para ocupar 100% del ancho */
.single-event {
    width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
}

/* Corregir .event-image para ocupar 100% del ancho en lugar de 50% */
.single-event .event-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
}

/* Corregir .event-description para ocupar 100% del ancho en lugar de 50% */
.single-event .event-description {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
    /*padding-left: 20px !important;*/
    /*padding-right: 0 !important; */
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* En desktop (lg), cada columna debe ocupar el 33.33% del contenedor */
@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

/* En tablet (md), cada columna debe ocupar el 33.33% del contenedor */
@media (min-width: 768px) and (max-width: 991px) {
    .col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

/* En pequeño (sm), cada columna debe ocupar el 50% */
@media (min-width: 576px) and (max-width: 767px) {
    .col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* En móvil (xs), ocupar el 100% */
@media (max-width: 575px) {
    .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Suprimir pseudo-elementos que agregan iconos automáticos a los li */
/* Esto elimina el icono duplicado que aparece en los elementos de lista */
li::before,
li::after {
    content: none !important;
    display: none !important;
}

/* Específicamente para los li dentro de event-description */
.event-description li::before,
.event-description li::after {
    content: none !important;
    display: none !important;
}

/* Estilos para las cards de temáticas */
.tematica-card {
    transition: all 0.3s ease !important;
}

.tematica-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    transform: translateY(-8px) !important;
}

.tematica-card:hover h3 {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Responsive para tablets */
@media (max-width: 991px) {
    .tematica-card {
        margin-bottom: 20px;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .tematica-card {
        padding: 25px !important;
    }
    
    .tematica-card h3 {
        font-size: 1.1rem !important;
    }
    
    .tematica-card p {
        font-size: 0.9rem !important;
    }
    
    .section-header p {
        font-size: 0.95rem !important;
    }
}