/**********************************************************************************************************/
/*                                               NEWS                                                         
/**********************************************************************************************************/
.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% 0% 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 {
    position: relative;
    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,
.index-imgContainer video{  /* 1,506 relacion aspecto */
    width: 100%;/**/
    object-fit: fill;/**/
}
.index-imgContainer {
    position: relative;
}
.video-controls {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: flex;
    gap: 7px;
}
.control-btn {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s ease;
}
.ver-mas {
  color: #000000; /* azul agradable */
  text-decoration: underline; /* subrayado */
  font-style: italic; /* mantiene el estilo similar al <em> */
  cursor: pointer; /* muestra el puntero de enlace */
  transition: color 0.3s ease;
  white-space: nowrap; /* evita que se rompa la línea */
}
.load-more { /* Botón cargar más para expandir la cantidad de noticias*/
    display: block;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
    padding-bottom: 20px;
}

/**********************************************************************************************************/
/*                                           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: 25px; /* 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 a,
.index-banner-text p,
.index-banner-text h3 {
    font-size: 2rem;
}
.index-banner-text.visible {
    opacity: 1; /* Hace el texto completamente visible */
    transform: translateY(0); /* Lo mueve a su posición final */
}
.fade { /* --- Animación de desvanecimiento (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: 0 10px; 
    height: 60px;               /* 🔹 Altura fija */
    line-height: 60px;          /* 🔹 Centra verticalmente el texto */
    text-decoration: none; /* Quita el subrayado del enlace */
    border-radius: 14px; /* 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);
    white-space: nowrap; /*Evita el salto de línea */
}
.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: 2%;  /* Espaciado interno. */  
    margin-top: -100px; /* Mueve las flechas 22px hacia arriba para centrarlas visualmente. */  
    color: white; /* Color de las flechas. */     
    font-size: 6rem; /* 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. */   
}
/**********************************************************************************************************/
/*                                           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;
}

/* /////////////////////////////////////////////////////////////////////////*/
/************************ RESPONSIVE ****************************************/
/* /////////////////////////////////////////////////////////////////////////*/

/*VA SOBRE ESCRIBIENDO DE ARRIBA HACIA ABAJO*/
@media screen and (max-width: 2000px) {
    .index-container-multi-news{
        padding: 3rem 19rem; /* y - x*/     
    }
    .index-news {
        width: 28%; /* Define el ancho de cada div para que sean iguales */  
        margin: 3% 0; 
    }
}

@media screen and (max-width: 1500px) {
    .index-container-multi-news{
        padding: 3rem 14rem; /* y - x*/
    }
    .banner-btn {
        height: 50px;           
        line-height: 50px;        
    }
    /***************** NEWS ***********************/
    .video-controls {
        gap: 5px;
    }
    .control-btn {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
}
/***********************************************************************************************/
@media screen and (max-width: 1000px) {
    .index-container-multi-news{
        padding: 2rem 10rem; /* y - x*/ 
    }
    .index-news {
        width: 45%; /* Define el ancho de cada div para que sean iguales */   
    }
    .index-banner-text {
        bottom: 0;
    }
    .index-banner-text a,
    .index-banner-text p,
    .index-banner-text h3 {  
        font-size: 1rem;
    }
    .banner-btn {
        height: 30px;           
        line-height: 30px;        
    }
    .index-collage {
        width: 24%;
    }
    /***************** NEWS ***********************/
    .control-btn {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}
/************************************ TABLET ***************************************************/
@media screen and (max-width: 768px) {
    .index-container-multi-news{
        padding: 2rem 5rem; /* y - x*/ 
    }
    .banner-btn {
        height: 20px;           
        line-height: 20px;        
    }
}
/************************************ CELULARES ***************************************************/
@media screen and (max-width: 480px) {
    .one-article-section {
        padding: 3% 5% 3% 5%; /* up-right-down-left */ 
        margin: 5% 3%;
    }
    .index-banner-text {  
        font-size: 0.9em;
    }
    .index-container-multi-news{
        padding: 2rem 1rem; /* y - x*/ 
    }
    .index-news {
        width: 48.5%;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    .index-news p {
        font-size: 10px;
        line-height: 1.3rem; /* interlineado */
    }
    .prev, .next {   
        margin-top: -35px; /* Mueve las flechas 22px hacia arriba para centrarlas visualmente. */  
        font-size: 1.7em; /* Tamaño de la fuente. */     
    }
}
/*VA SOBRE ESCRIBIENDO DE ARRIBA HACIA ABAJO*/