        /* Contenedor principal del slider */
        .swiper.eventsSwiper {
            width: 100%; /* Ocupa todo el ancho disponible */
            padding: 10px 0; /* Espaciado vertical */
        }

        /* Contenedor de los slides */
        .swiper-wrapper {
            display: flex; /* Usa flexbox para alinear los slides */
            align-items: stretch; /* Hace que todos los slides tengan la misma altura */
        }

        /* Cada slide individual */
        .swiper-slide {
            display: flex; /* Usa flexbox para el contenido interno */
            height: auto; /* Altura automática según contenido */
        }

        /* Tarjeta de evento */
        .card {
            flex: 1; /* Ocupa todo el espacio disponible en el slide */
            display: flex; /* Flexbox para el layout interno */
            flex-direction: column; /* Organiza el contenido en columna */
            justify-content: space-between; /* Distribuye el espacio entre elementos */
            width: auto; /* Ancho automático */
            height: 100%; /* Ocupa toda la altura del slide */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra suave */
            border-radius: 5px; /* Bordes redondeados */
            padding: 5px; /* Espaciado interno */
            background-color: #550000 !important; /* Color de fondo principal */
            text-align: center; /* Alineación del texto al centro */
            color: #7B8793; /* Color de texto principal */
            border: 2px solid #250000; /* Borde sutil */
        }

        /* Variante de tarjeta para eventos activos */
        .card.secondary {
            background-color: #005566; /* Color de fondo diferente para eventos activos */
        }

        /* Imagen del evento */
        .card img {
            width: 100%; /* Ancho completo del contenedor */
            height: auto; /* Altura automática manteniendo proporción */
            border-radius: 1px; /* Bordes ligeramente redondeados */
            margin-bottom: 5px; /* Espacio inferior */
            aspect-ratio: 1 / 1; /* Relación de aspecto cuadrada */
            object-fit: cover; /* La imagen cubre todo el espacio recortando si es necesario */
            object-position: top; /* Enfoca la parte superior de la imagen */
        }

        /* Título del evento */
        .card h6 {
            margin: 2px 0; /* Margen reducido */
            color: white; /* Color de texto blanco */
            font-size: 1rem; /* Tamaño de fuente */
        }

        /* Subtítulo del evento */
        .card .subtitulo {
            margin: 2px 0; /* Margen reducido */
            color: #cccccc; /* Color de texto gris claro */
            overflow: hidden; /* Oculta el texto que sobresale */
             font-size: 1rem; /* Tamaño de fuente */

        }

        /* Fechas del evento */
        .card .fechas {
            font-size: 0.85rem; /* Tamaño de fuente más pequeño */
            color: #bbb; /* Color de texto gris */
            margin-bottom: 2px; /* Margen inferior pequeño */
        }

        /* Botones de navegación (siguiente/anterior) */
        .swiper-button-next, .swiper-button-prev {
            color: #000; /* Color del icono */
            background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
            border-radius: 50%; /* Forma circular */
            width: 40px; /* Ancho fijo */
            height: 40px; /* Altura fija */
            display: flex; /* Flexbox para centrar el icono */
            align-items: center; /* Centrado vertical */
            justify-content: center; /* Centrado horizontal */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
        }

        /* Iconos de los botones de navegación */
        .swiper-button-next::after, .swiper-button-prev::after {
            font-size: 20px; /* Tamaño del icono */
        }

        /* Asegura que título y subtítulo no desborden */
        .card h6 {
            overflow: hidden; /* Oculta el texto que sobresale */
            display: -webkit-box; /* Modelo de caja flexible */
            -webkit-line-clamp: 1; /* Limita a 1 línea */
            -webkit-box-orient: vertical; /* Orientación vertical */
        }
        .card .subtitulo {
            overflow: hidden; /* Oculta el texto que sobresale */
            display: -webkit-box; /* Modelo de caja flexible */
            -webkit-line-clamp: 2; /* Limita a 1 línea */
            -webkit-box-orient: vertical; /* Orientación vertical */
        }

        /* Enlace "Leer más" */
        .card .leer-mas {
            display: inline-block; /* Permite márgenes y padding */
            margin: 10px auto; /* Margen superior e inferior, centrado horizontal */
            padding: 5px 10px; /* Espaciado interno */
            background-color: #ffffff; /* Fondo blanco */
            color: #002027; /* Color de texto oscuro */
            text-decoration: none; /* Sin subrayado */
            border-radius: 5px; /* Bordes redondeados */
            font-weight: bold; /* Texto en negrita */
            font-size: 0.85rem; /* Tamaño de fuente pequeño */
            transition: background 0.3s ease; /* Transición suave al hacer hover */
        }

        /* Efecto hover para el enlace "Leer más" */
        .card .leer-mas:hover {
            background-color: #dddddd; /* Color de fondo más claro al pasar el ratón */
        }
