/* ========================================================= */
/* CARRUSEL DE OBRAS (carrusel-obras.css) - VERSIÓN FINAL CON FADE */
/* ========================================================= */

.carrousel-obras {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* MÁXIMA ALTURA: 90% de la ventana visible. */
    height: 90vh;
}

.slides-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

/* ------------------------------------ */
/* REGLAS CRÍTICAS DE VISIBILIDAD Y FADE (¡CORREGIDAS!) */
/* ------------------------------------ */

/* 1. OCULTAR TODOS LOS SLIDES */
.carrousel-obras .slides-wrapper .slide-item {
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    /* Opacidad inicial cero */
    visibility: hidden;
    /* Ocultar el elemento del todo */

    /* EFECTO FADE: Transición para la opacidad y visibilidad (1.5s de duración) */
    transition: opacity 1.5s ease-in-out, visibility 1.5s;
}

/* 2. MOSTRAR EL SLIDE ACTIVO */
/* Esta regla activa el fade al pasar de 0 a 1 y de hidden a visible */
.carrousel-obras .slides-wrapper .slide-item.active {
    opacity: 1;
    visibility: visible;
}

/* Regla para la imagen dentro del slide */
.carrousel-obras .slides-wrapper .slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------ */
/* ESTILOS DE TÍTULOS Y CAPTION (TAMAÑOS GRANDES) */
/* ------------------------------------ */

.caption-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    color: white;
    z-index: 10;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
}

.caption-text h1,
.caption-text h2,
.caption-text h3 {
    margin: 0;
    padding: 5px 0;
    line-height: 1.1;
    text-decoration: none !important;
    /* Cambia 'NombreDeTuFuentePrincipal' por la fuente que uses: */
    font-family: 'NombreDeTuFuentePrincipal', sans-serif;
}

/* H1 más grande (Torso Masculino) */
.caption-text h1 {
    font-size: 4em; /* <--- AQUÍ debes reducir el valor */
    font-weight: bold;
}

/* H2 más grande (Parque Carlos Thays) */
.caption-text h2 {
    font-size: 3em;
    font-weight: normal;
}

/* H3 más grande (Recoleta) */
.caption-text h3 {
    font-size: 2em;
    font-weight: lighter;
}


/* ------------------------------------ */
/* ESTILOS DE PUNTOS INDICADORES */
/* ------------------------------------ */

.dots-container-obras {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 15;
}

.dot-indicator {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot-indicator.active {
    background-color: white;
}