.img-carrusel {
    width: 100%;
    aspect-ratio: 2187 / 521; 
    object-fit: cover; 
    /* Quitamos el border-radius de aquí para ponérselo al contenedor principal */
}


.carrusel-link {
    cursor: pointer;
    text-decoration: none;
}

.carrusel-link .img-carrusel {
    transition: transform 0.25s ease, filter 0.25s ease;
}

.carrusel-link:hover .img-carrusel {
    filter: brightness(0.96);
}

/* Restauramos el margen para separar el carrusel del header */
.carrusel-separado {
    margin-top: 60px !important;
}

/* --- ESTILOS DEL CONTENEDOR (SOMBRA Y BORDES) --- */
.carousel-inner {
    border-radius: 15px;
    /* Mágia de la sombra: valores horizontales, verticales, difuminado y color semi-transparente */
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden; /* Asegura que la sombra y las imágenes respeten el borde curvo */
}

/* --- BOTONES LATERALES --- */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Fondo morado institucional semitransparente para los controles */
    background-color: rgba(102, 36, 69, 0.7); 
    background-size: 1.5rem;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: rgba(102, 36, 69, 1);
}

/* --- PUNTITOS INFERIORES --- */
.custom-indicators {
    margin-bottom: 15px;
}

.custom-indicators button {
    background-color: #cccccc !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important; 
    margin: 0 6px !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Sombra para que se vean bien sobre imágenes claras */
}

.custom-indicators button.active {
    /* Color de la municipalidad cuando el punto está activo */
    background-color: #662445 !important; 
    transform: scale(1.2); /* Se hace un poquito más grande */
}

/* --- AJUSTE RESPONSIVO (CELULARES) --- */
@media (max-width: 768px) {
    .img-carrusel {
        /* En celular, 2187x521 quedaría una tira delgadísima invisible. 
           Forzamos una proporción más cuadrada para que se pueda leer. */
        aspect-ratio: 16 / 9; 
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        display: none; /* Ocultamos flechas en celular para no tapar la imagen, se desliza con el dedo */
    }
}
/* Ajuste para evitar el salto del primer elemento (carrusel) */
.main-content-wrapper { /* O la clase de tu contenedor del carrusel */
    padding-top: 0; /* O ajusta según tu layout */
}

/* --- BANNERS CLICKEABLES HACIA NOTICIAS --- */
.carrusel-link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.carrusel-link .img-carrusel {
    transition: transform 0.25s ease, filter 0.25s ease;
}

.carrusel-link:hover .img-carrusel {
    filter: brightness(0.92);
}

.carrusel-cta {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: rgba(102, 36, 69, 0.92);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.carrusel-link:hover .carrusel-cta,
.carrusel-link:focus .carrusel-cta {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .carrusel-cta {
        right: 12px;
        bottom: 12px;
        padding: 7px 12px;
        font-size: 0.82rem;
        opacity: 1;
        transform: none;
    }
}