.index-container-multi-news{
    display: flex; /* Convierte el contenedor en un flexbox */
    flex-wrap: wrap;
    justify-content: space-between; /* Distribuye el espacio entre los divs */
    padding: 4% 8%; /* y - x */
}
.index-news {
    width: 27%; /* Define el ancho de cada div para que sean iguales */
    height: auto; 
    margin-bottom: 3%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    background-color: var(--letter-style);
}
.index-news h6 { /*fecha en news*/
    font-size: 1rem;
    font-style: italic;
    margin: 0%;
    padding: 0% 3%;
}
.index-news p { 
    margin-top: 2%;
    font-size: 1rem; /* Tamaño de la fuente, 1.5 veces el tamaño base de la fuente. */    
    text-align: left; /* Centra el texto. */
    line-height: 1.8rem; /* interlineado */
    padding: 0% 3%;
}
.index-imgContainer {
    display: flex;/**/
    align-items:end; /* Centra verticalmente */
    justify-content: center;
    margin-bottom: 5%;
    width: 100%;/**/
    height: auto;/**/
    overflow: hidden;/*oculta lo que se sale fuera del contenedor*/
}
.index-imgContainer img{  /* 1,506 relacion aspecto */
    width: 100%;/**/
    object-fit: fill;/**/
}

/**********************************************************************************************************/
/*                                           SLIDE                                                         
/**********************************************************************************************************/
/* Este es el contenedor principal del slider. */
.index-slider-container {
    position: relative;
    overflow: hidden; /* Oculta cualquier contenido que se salga de los límites del contenedor. */    
    font-size: 1.5rem;
}

/* Estilos para las imágenes dentro de los index-banners. */
.index-banner img {    
    width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor del index-banner. */ 
    height: 33vw;     
    display: block; /* Muestra la imagen como un elemento de bloque para evitar espacios extra. */
    object-fit: cover;
}

/* --- Estilos para el texto superpuesto en los index-banners --- */
.index-banner-text {  
    color: var(--fontLight);
    padding-left: 10%;  /* Espaciado interno alrededor del texto. */    
    position: absolute; /* Posiciona el elemento de forma absoluta dentro de su contenedor padre (.index-slider-container). */    
    bottom: 1rem; /* Lo fija en la parte inferior del contenedor. */    
    text-align: left; 
    opacity: 0; /* Inicialmente, el texto es invisible */
    transform: translateY(80px); /* Empieza un poco más abajo */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Define la transición suave */
    flex-direction: column; /* Apila el botón y el párrafo */
}

.index-banner-text.visible {
    opacity: 1; /* Hace el texto completamente visible */
    transform: translateY(0); /* Lo mueve a su posición final */
}

/* --- Animación de desvanecimiento (fade) --- */
.fade {  
    animation-name: fade;  /* Nombra la animación que se aplicará. */   
    animation-duration: 0.5s;  /* Duración de la animación. */
}
.banner-btn {
    display: inline-block; /* Permite aplicar padding y margen, y se comporta como un bloque pero en línea */    
    color: var(--fontLight); 
    padding: 2% 5%; 
    text-decoration: none; /* Quita el subrayado del enlace */
    border-radius: 15px; /* Bordes redondeados para un aspecto más suave */
    font-weight: bold;
    text-align: left; 
    transition: background-color 0.3s ease; /* Efecto suave al pasar el ratón */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7); /*desplazamiento-x, desplazamiento-y, desenfoque, (color)*/
    background-color: var(--button-link);
}
.banner-btn:hover {
    background-color: var(--button-link-hover); 
    cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */
}
/* Define la animación llamada 'fade'. */
@keyframes fade {  
    from {opacity: .6}  /* El estado inicial de la animación (opacidad de 0.6). */
    to {opacity: 1}  /* El estado final de la animación (opacidad de 1). */
}

/*||||||||||||||||||||||||||||||||| FLECHAS Y PUNTOS DE DESPLAZAMIENTO SLIDE |||||||||||||||||||||||||||||||||||||||||||||*/
.prev, .next {   
    cursor: pointer; /* Cambia el cursor a un puntero cuando se pasa sobre las flechas. */ 
    position: absolute; /* Posiciona las flechas de forma absoluta. */  
    top: 50%; /* Las centra verticalmente al 50% de la altura del contenedor. */ 
    width: auto;  /* Ajusta el ancho automáticamente según el contenido. */ 
    padding: 1%;  /* Espaciado interno. */  
    margin-top: -70px; /* Mueve las flechas 22px hacia arriba para centrarlas visualmente. */  
    color: white; /* Color de las flechas. */     
    font-size: 2.5em; /* Tamaño de la fuente. */    
    transition: 0.6s ease; /* Crea una transición suave en las propiedades al pasar el mouse. */   
    border-radius: 0 3px 3px 0;  /* Bordes redondeados para la flecha "anterior". */   
    user-select: none; /* Evita que el texto de las flechas se pueda seleccionar. */   
}
.next {   
    right: 0;  /* La coloca en el borde derecho del contenedor. */   
}
.prev:hover, .next:hover {   
    color: black;
}
/**********************************************************************************************************/
/*                                           COLLAGE   
/**********************************************************************************************************/
.index-slide-collage {
    display:flex; /* Usamos Flexbox para el diseño */
    flex-wrap: wrap; /* Permite que los elementos se muevan a la siguiente línea */
    gap: 8%; /* Espacio entre las fotos */   
    background-image: url('../images/padedLadrillo.webp'); /* URL de una textura de ladrillo */  
    padding: 7.3% 4% 7.3% 6%; /*y - x*/
}

.index-collage {
    width: 25%;
    margin: 3% 0%; 
    border: 2px  solid white;/**/
    transition: transform 0.3s ease, box-shadow 0.3s ease;/**/
}
.index-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que las imágenes llenen el espacio sin distorsionarse */
    display: block;
}

.index-collage:hover {
    transform: scale(1.5) rotate(0deg) !important; /* El !important anula el estilo de JavaScript */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 10;
}
/**********************************************************************************************************/
/*                                            
/**********************************************************************************************************/