/* Estilo básico para el Slider*/
#gallery {
    width: 80%;
    margin: auto;
    overflow: hidden;
    margin-top: 50px;
    border: 1px;
    border-color:#bebdbd81;
    border-style: solid;
    height: auto;
    position: relative;
 }
 
 .gallery-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: calc(100% * (totalImages / 2)); 
 }
 
 .gallery-item {
    flex: 0 0 50%; /* Dos imágenes por cuadro */
    box-sizing: border-box;
    padding: 10px;
    margin: 0;
    position: relative;
 }
 
 .gallery-item img {
    width: 100%;
    display: block;
 }
 
 /* Navegación del Slider */
 .gallery-navigation {
   position: relative; /* Necesario para posicionar los botones dentro del contenedor */
   width: 100%; /* Asegúrate de que ocupe todo el ancho del slider */
   height: 100%; /* Se adapta al alto del slider */
   
 }
 
 .nav-button {
   position: absolute;
   top: 50%; /* Centra verticalmente */
   transform: translateY(-50%); /* Ajuste fino para centrar exactamente */
   width: 40px; /* Ajusta el tamaño del botón */
   height: 40px;
   background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
   border-radius: 50%; /* Hace los botones redondos */
   display: flex;
   justify-content: center;
   align-items: center;
   color: white; /* Color del ícono o texto */
   text-decoration: none; /* Elimina el subrayado */
   z-index: 10; /* Asegura que los botones estén encima */
   cursor: pointer; /* Cambia el cursor a una mano */
 }
 
 #botonsiguiente{
    right: 10px;
    background: url(https://www.imss.gob.mx/sites/all/statics/salud/yosimecuido/js/images/controls.png) no-repeat -43px -32px;
 }

 #botonanterior{
    left: 10px;
    background: url(https://www.imss.gob.mx/sites/all/statics/salud/yosimecuido/js/images/controls.png) no-repeat 0 -32px;
 }
 
 .nav-button:hover {
 background-color: #005f5f;
 }

 .Img-Slide{
    width: 30px;
    margin-top: 20px;
 }
 .Titulo-Slide{
    margin-bottom: 30px;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 25px;
    color: #545454;
 }




 /* SLIDER DE INFORMACION DEL IMSS EN NUMEROS*/

 #Info-Importante{
    position: relative; 
    width: 360px;
    height: 90px; 
    overflow: hidden;
   
 }

 .IMSS-Numeros {
    position: relative;
    width: 30%; /* Ajusta el ancho según tus necesidades */
    
}
.text-IMSS-num {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.datos-importantes {
    position: absolute; /* Superposición de los elementos */
    width: 100%; /* Ocupa todo el ancho */
    height: 100%; /* Ocupa todo el alto */
    opacity: 0; /* Comienza invisible */
    transition: opacity 1s ease; /* Transición suave al cambiar la opacidad */
    display: flex; /* Para centrar el texto */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    font-size: 10px;
}

.datos-importantes.active {
    opacity: 1;
}

.Cuadro-Imss {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* SEGUNDO SLIDER*/