/* ============================================
   spa.css — estilos nuevos, no toca tu style.css
   ============================================ */

/* Barra fina de carga arriba de todo, mientras se trae una página por AJAX */
#spa-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: #e30613; /* si tu color primario es otro, cambialo acá */
    z-index: 9999;
    opacity: 0;
    transition: width 0.4s ease, opacity 0.2s ease;
}

#spa-loading-bar.activa {
    width: 70%;
    opacity: 1;
}

/* Un poco de aire para que el cambio de contenido no salte feo */
#page-content {
    min-height: 200px;
}

/* ============ Cards de evento (Novedades) ============ */
.evento-card {
    cursor: default;
}

.evento-card-img {
    position: relative;
    overflow: hidden;
}

.evento-card-img img {
    width: 100%;
    display: block;
}

.evento-foto-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 20px;
}

.evento-foto-count i {
    margin-right: 4px;
}

/* ============ Galería del evento (masonry con CSS columns) ============
   Esto acomoda solo las fotos verticales y horizontales, sin JS extra:
   cada foto ocupa el ancho de la columna y su alto natural. */
.evento-galeria {
    column-count: 3;
    column-gap: 14px;
    margin-top: 10px;
}

.evento-galeria a.evento-foto-link {
    display: block;
    break-inside: avoid;
    margin-bottom: 14px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.evento-galeria a.evento-foto-link img {
    width: 100%;
    display: block;
    transition: transform 0.35s ease;
}

.evento-galeria a.evento-foto-link:hover img {
    transform: scale(1.04);
}

.evento-foto-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.evento-galeria-section .gacetilla-btn {
    display: inline-block;
    margin-bottom: 20px;
}

/* Responsive: menos columnas en pantallas chicas */
@media (max-width: 991px) {
    .evento-galeria {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .evento-galeria {
        column-count: 1;
    }
}