/* Estilos generales */
body {
  font-family: "Montserrat", sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.container {
  padding: 20px; /* Espaciado interno del contenedor */
}

/* Estilos para las imágenes de equipo */
.img-equipo {
  margin: 20px 0; /* Espaciado superior e inferior para separar los productos */
  position: relative;
  overflow: hidden; /* Evita que el contenido sobrepase el contenedor */
}

.img-equipo img {
  width: 100%; /* Asegura que la imagen sea responsiva */
  height: auto; /* Mantiene la relación de aspecto */
}

/* Estilo de la fila */
.row {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan */
  justify-content: center; /* Centra los elementos horizontalmente */
}

/* Estilos para los productos */
.img-large {
  display: flex;
  flex-direction: column; /* Coloca los elementos en columna */
  align-items: center; /* Centra horizontalmente */
  text-align: center; /* Centra el texto dentro del contenedor */
  margin-bottom: 30px; /* Espacio entre productos */
  border: 1px solid #ddd; /* Añade un borde opcional */
  border-radius: 5px; /* Esquinas redondeadas opcionales */
  background-color: #f9f9f9; /* Fondo opcional */
  padding: 15px; /* Espacio interno */
  overflow: hidden; /* Asegura que los efectos no salgan del contenedor */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

/* Estilo de la imagen dentro del producto */
.img-large img {
  max-width: 100%; /* Asegúrate de que la imagen no se desborde */
  height: auto; /* Ajusta la altura de forma automática */
  object-fit: cover; /* Asegura que la imagen se recorte adecuadamente */
  transition: transform 0.3s ease; /* Transición suave en la imagen */
}

/* Estilo para los títulos y párrafos */
.titulo-equipo {
  font-size: 1.5rem; /* Tamaño del texto del título */
  font-weight: bold; /* Negrita */
  margin: 10px 0; /* Espaciado arriba y abajo del título */
  color: #333; /* Color del texto */
}

.img-large {
  display: flex; /* Habilita el uso de flexbox */
  flex-direction: column; /* Coloca los elementos en columna */
  align-items: center; /* Centra horizontalmente */
  text-align: center; /* Centra el texto dentro del contenedor */
  margin-bottom: 20px; /* Espacio entre productos */
  border: 1px solid #ddd; /* Borde opcional */
  border-radius: 5px; /* Esquinas redondeadas opcionales */
  background-color: #f9f9f9; /* Fondo opcional */
  padding: 15px; /* Espacio interno */
  overflow: hidden; /* Asegura que los efectos no salgan del contenedor */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
  height: auto; /* Asegúrate de que la altura se ajuste al contenido */
}

.product-info {
  display: flex;
  flex-direction: column; /* Coloca el párrafo y el botón en columna */
  justify-content: space-between; /* Espacio uniforme entre ellos */
  height: 100%; /* Permite que ocupe toda la altura disponible */
  margin-top: 10px; /* Espacio superior del contenedor */
}

.p-equipo {
  flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible */
  margin: 10px 0; /* Espaciado arriba y abajo del párrafo */
  text-align: justify; /* Justifica el texto */
  line-height: 1.6; /* Mejora la legibilidad */
}

/* Estilos responsivos */
@media (max-width: 768px) {
  .titulo-equipo {
    font-size: 1.3em; /* Tamaño de texto más pequeño en pantallas pequeñas */
  }

  .p-equipo {
    font-size: 0.9em; /* Tamaño de texto de párrafo más pequeño */
  }
}
.mainText {
  text-align: center;
}

/* Estilo para los botones */