/* ============================================ */
/* EVENTOS HOME - CSS MODERNO */
/* ============================================ */

/* ========== TARJETAS DE EVENTOS ========== */
.single_feature {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.single_feature:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.25) !important;
    border-color: rgba(102, 126, 234, 0.2) !important;
}

/* Wrapper de imagen con badges */
.feature_image_wrapper {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
}

.feature_image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 0 !important;
}

.single_feature:hover .feature_image {
    transform: scale(1.08) !important;
}

/* Placeholder de imagen */
.feature_image_placeholder {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 64px !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.single_feature:hover .feature_image_placeholder {
    transform: scale(1.08) !important;
}

/* Badge destacado */
.feature_badge_destacado {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%) !important;
    color: #856404 !important;
    padding: 8px 16px !important;
    border-radius: 25px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    z-index: 2 !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4) !important;
    letter-spacing: 0.5px !important;
    animation: pulse 2s infinite !important;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
    }
}

/* 🎨 MEJORAS ELEGANTES PARA SECCIÓN DE EVENTOS */

/* Tarjetas de eventos - más elegantes */
.single_blog,
.single_event_card {
    border-radius: 15px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08) !important;
    background: white !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.single_blog:hover,
.single_event_card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(230, 120, 22, 0.15) !important;
}

/* Badge de fecha - marrón elegante */
.feature_fecha_badge {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: linear-gradient(135deg, #83432A 0%, #6d3723 100%) !important;
    color: white !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(131, 67, 42, 0.4) !important;
    z-index: 2 !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    font-weight: 700 !important;
}

/* Badge "DESTACADO" - naranja suave */
.feature_destacado_badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: linear-gradient(135deg, #E67816 0%, #d96d12 100%) !important;
    color: white !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(230, 120, 22, 0.35) !important;
    z-index: 2 !important;
}

/* Badges de categoría - colores variados pero elegantes */
.feature_categoria_badge {
    display: inline-block !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 15px !important;
    color: white !important;
}

/* Imagen del evento */
.blog_thumb img,
.event_image img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.single_blog:hover .blog_thumb img,
.single_event_card:hover .event_image img {
    transform: scale(1.08) !important;
}

/* Contenido del evento */
.blog_content,
.event_content {
    padding: 25px !important;
}

.blog_content h3,
.event_content h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    transition: color 0.3s ease !important;
}

.blog_content h3:hover,
.event_content h3:hover {
    color: #E67816 !important;
}

.blog_content p,
.event_content p {
    color: #666 !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
    font-size: 15px !important;
}

/* Meta información (hora y lugar) */
.event_meta,
.blog_meta {
    display: flex !important;
    gap: 20px !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    font-size: 14px !important;
    color: #666 !important;
}

.event_meta i,
.blog_meta i {
    color: #E67816 !important;
    margin-right: 6px !important;
}

/* Botón "Ver Detalles" - elegante con gradiente */
.feature_button a,
.btn-ver-detalles {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    background: linear-gradient(135deg, #E67816 0%, #BF6F32 100%) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(230, 120, 22, 0.3) !important;
    border: none !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.feature_button a::before,
.btn-ver-detalles::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #BF6F32 0%, #83432A 100%) !important;
    transition: all 0.4s ease !important;
    z-index: -1 !important;
}

.feature_button a:hover::before,
.btn-ver-detalles:hover::before {
    left: 0 !important;
}

.feature_button a:hover,
.btn-ver-detalles:hover {
    transform: translateX(4px) !important;
    box-shadow: 0 6px 20px rgba(230, 120, 22, 0.5) !important;
    text-decoration: none !important;
    color: white !important;
}

/* Botón "Ver Todos los Eventos" - centrado y destacado */
.view-all-events-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 40px !important;
    background: linear-gradient(135deg, #E67816 0%, #BF6F32 100%) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 6px 25px rgba(230, 120, 22, 0.35) !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    margin-top: 20px !important;
}

.view-all-events-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #BF6F32 0%, #83432A 100%) !important;
    transition: all 0.4s ease !important;
    z-index: -1 !important;
}

.view-all-events-btn:hover::before {
    left: 0 !important;
}

.view-all-events-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 35px rgba(230, 120, 22, 0.5) !important;
    text-decoration: none !important;
    color: white !important;
}

/* Espaciado de la sección */
.blog_area,
.events_section {
    padding: 80px 0 !important;
}

/* Títulos de la sección */
.section_title h1 {
    color: #2c3e50 !important;
    font-weight: 700 !important;
}

.section_title h1 span {
    background: linear-gradient(135deg, #E67816 0%, #BF6F32 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Barra decorativa */
.em_bar .em_bar_bg {
    background: linear-gradient(90deg, #E67816 0%, #BF6F32 100%) !important;
    height: 3px !important;
    border-radius: 2px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .blog_thumb img,
    .event_image img {
        height: 220px !important;
    }
    
    .blog_content,
    .event_content {
        padding: 20px !important;
    }
    
    .feature_fecha_badge {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .view-all-events-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}
.fecha_dia {
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: block !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.fecha_mes {
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin-top: 4px !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
    display: block !important;
}

/* Contenido de la tarjeta */
.feature_content {
    padding: 24px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: white !important;
}

/* Badge de categoría */
.feature_meta {
    margin-bottom: 12px !important;
}

.feature_category_badge {
    color: white !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

.feature_category_badge:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    text-decoration: none !important;
    filter: brightness(1.1) !important;
}

/* Título del evento */
.feature_title {
    margin-bottom: 12px !important;
}

.feature_title h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: #2c3e50 !important;
}

.feature_title h3 a {
    color: #2c3e50 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: block !important;
}

.feature_title h3 a:hover {
    color: #667eea !important;
    text-decoration: none !important;
}

/* Descripción */
.feature_desc {
    margin-bottom: 16px !important;
    flex: 1 !important;
}

.feature_desc p {
    color: #6c757d !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* Meta información del evento */
.feature_meta_info {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    padding: 16px 0 !important;
    border-top: 1px solid #e9ecef !important;
    margin-top: auto !important;
}

.feature_meta_item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #6c757d !important;
    font-weight: 500 !important;
}

.feature_meta_item i {
    color: #667eea !important;
    font-size: 14px !important;
}

/* Botón Ver Detalles */
.feature_button {
    margin-top: 8px !important;
}

.feature_button a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    background: linear-gradient(135deg, #E67816 0%, #BF6F32 100%) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(230, 120, 22, 0.3) !important;
    border: none !important;
    letter-spacing: 0.3px !important;
}

.feature_button a:hover {
    transform: translateX(4px) !important;
    box-shadow: 0 6px 20px rgba(230, 120, 22, 0.4) !important;
    text-decoration: none !important;
    filter: brightness(1.1) !important;
}

.feature_button a i {
    transition: transform 0.3s ease !important;
    font-size: 14px !important;
}

.feature_button a:hover i {
    transform: translateX(4px) !important;
}

/* Estado vacío */
.eventos_empty_state {
    text-align: center !important;
    padding: 80px 20px !important;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%) !important;
    border-radius: 12px !important;
    border: 2px dashed #667eea !important;
}

.empty_icon {
    font-size: 80px !important;
    margin-bottom: 20px !important;
    opacity: 0.4 !important;
}

.eventos_empty_state h3 {
    color: #2c3e50 !important;
    margin-bottom: 10px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}

.eventos_empty_state p {
    color: #6c757d !important;
    font-size: 16px !important;
}

/* Botón Ver Todos */
.btn_ver_todos_eventos {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 35px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
    letter-spacing: 0.5px !important;
    border: none !important;
}

.btn_ver_todos_eventos:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
    text-decoration: none !important;
    filter: brightness(1.1) !important;
    color: white !important;
}

.btn_ver_todos_eventos i {
    transition: transform 0.3s ease !important;
}

.btn_ver_todos_eventos:hover i {
    transform: translateX(5px) !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 991px) {
    .single_feature {
        margin-bottom: 30px !important;
    }
}

@media (max-width: 768px) {
    .feature_image_wrapper {
        height: 220px !important;
    }
    
    .feature_fecha_badge {
        padding: 10px 12px !important;
    }
    
    .fecha_dia {
        font-size: 22px !important;
    }
    
    .fecha_mes {
        font-size: 10px !important;
    }
    
    .feature_title h3 {
        font-size: 18px !important;
    }
    
    .feature_desc p {
        font-size: 13px !important;
    }
    
    .btn_ver_todos_eventos {
        padding: 12px 30px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 576px) {
    .feature_content {
        padding: 20px !important;
    }
    
    .feature_image_wrapper {
        height: 200px !important;
    }
    
    .feature_meta_item {
        font-size: 12px !important;
    }
    
    .feature_button a {
        padding: 10px 24px !important;
        font-size: 13px !important;
    }
    
    .btn_ver_todos_eventos {
        padding: 12px 25px !important;
        font-size: 14px !important;
    }
    
    .empty_icon {
        font-size: 64px !important;
    }
    
    .eventos_empty_state h3 {
        font-size: 20px !important;
    }
    
    .eventos_empty_state p {
        font-size: 14px !important;
    }
}