/* Contenedor del carrusel */
.contenedor-carrusel {
  height: 40vh;
  max-width: 100%; /* El contenedor del carrusel ocupa el 100% del ancho disponible */
  position: relative; /* Necesario para posicionar los botones de control dentro del carrusel */
  margin-top: auto; /* Centra el carrusel automáticamente en la página */
  margin-bottom: 100px;
}

/* Oculta las imágenes por defecto para que solo se muestre una a la vez */
.slide {
  display: none; /* Oculta todas las imágenes cuando no están activas */
}

/* Estilos para las imágenes dentro del carrusel */
.slide img {
  margin-top: 100px;
  width: 100%; /* La imagen ocupa el 100% del contenedor del carrusel */
  height: 40vh; /* Altura de la imagen ajustada al 40% del alto de la ventana */
  border-radius: 0px; /* No se aplica redondeo a las esquinas */
  object-fit: cover; /* Ajusta la imagen para que cubra el área del contenedor sin deformarse */
  object-position: center; /* Centra la imagen dentro del contenedor */
}

/* Botones de navegación para las imágenes del carrusel (anterior y siguiente) */
.anterior, .siguiente {
  cursor: pointer; /* Cambia el cursor a una mano al pasar sobre los botones */
  position: absolute; /* Posiciona los botones dentro del contenedor del carrusel */
  top: 50%; /* Los botones están centrados verticalmente */
  margin-top: 50px;
  width: auto; /* El ancho del botón se ajusta automáticamente al contenido */
  padding: 16px; /* Espaciado interno de los botones */
  color: white; /* Color del texto de los botones */
  font-weight: bold; /* Hace que el texto de los botones sea más grueso */
  font-size: 18px; /* Tamaño de la fuente del texto de los botones */
  transition: 0.6s ease; /* Transición suave al pasar el mouse sobre el botón */
  border-radius: 0 3px 3px 0; /* Bordes redondeados en los botones */
  user-select: none; /* Previene que el texto de los botones sea seleccionable */
}

/* Botón "siguiente" a la derecha */
.siguiente {
  right: 0; /* Posiciona el botón a la derecha del carrusel */
  border-radius: 3px 0 0 3px; /* Bordes redondeados en el lado izquierdo */
}

/* Efecto hover para los botones de navegación */
.anterior:hover, .siguiente:hover {
  background-color: rgba(0,0,0,0.8); /* Cambia el color de fondo al pasar el mouse */
}

/* Texto descriptivo que aparece sobre las imágenes del carrusel */
.texto {
  color: #f2f2f2; /* Color del texto */
  font-size: 15px; /* Tamaño de la fuente del texto */
  padding: 8px 12px; /* Espaciado interno del texto */
  position: absolute; /* Posiciona el texto dentro del contenedor */
  bottom: 8px; /* Coloca el texto en la parte inferior de la imagen */
  width: 100%; /* El texto ocupa el 100% del ancho de la imagen */
  text-align: center; /* Centra el texto horizontalmente */
}

/* Contenedor para los puntos indicadores del carrusel */
.contenedor-puntos {
  text-align: center; /* Centra horizontalmente los puntos indicadores */
  margin-top: -15px; /* Ajusta el margen superior para alinear los puntos */
}

/* Estilos para los puntos indicadores del carrusel */
.punto {
  cursor: pointer; /* Cambia el cursor a una mano al pasar sobre los puntos */
  height: 15px; /* Altura del punto */
  width: 15px; /* Ancho del punto */
  margin: 0 2px; /* Espaciado entre los puntos */
  background-color: #bbb; /* Color predeterminado de los puntos */
  border-radius: 50%; /* Hace que los puntos sean circulares */
  display: inline-block; /* Los puntos se muestran en línea */
  transition: background-color 0.6s ease; /* Transición suave al cambiar de color */
}

/* Punto activo o cuando el mouse está sobre un punto */
.activo, .punto:hover {
  background-color: #717171; /* Color del punto activo o cuando se pasa el mouse */
}

/* Animación de deslizamiento entre imágenes */
.deslizar {
  animation-name: deslizar; /* Aplica la animación "deslizar" */
  animation-duration: 1.5s; /* Duración de la animación de deslizamiento */
}

/* Definición de la animación de deslizamiento */
@keyframes deslizar {
  from { opacity: 0.4; } /* Comienza con una opacidad baja */
  to { opacity: 1; } /* Termina con opacidad completa */
}