#cards {
    width: 90%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.card {
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 3%;
    display: flex;
    height: auto;
    flex-direction: row; /* Las tarjetas se muestran en fila */
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra para las tarjetas */
    border-radius: 16px;
    background-color: #fff;
    width:  100%;
}

.galeria2 {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.contcate {
    /* Mantenemos el contcate como un contenedor para cada item */
    /* Lo esencial es su ancho para el diseño de columnas */
    width: calc(25% - 16px); /* 4 columnas, ajusta el 16px según el gap */
    /* Eliminar display: block; y text-align: center; de aquí si están */
    /* Altura automática para que se ajuste al contenido */
    height: auto;
    border-radius: 10px;
    margin-bottom: 1%; /* Mantenemos el margen inferior */
    /* Puedes añadir box-shadow o border aquí si quieres que cada .contcate sea la "card" visual */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    /* background-color: #fff; */
    overflow: hidden; /* Asegura que el contenido no se salga del radio del borde */
}
.cateenlace {
    text-decoration: none;
    color: black;
    font-size: 1.5vw;
    font-weight: bold; /* Mueve el font-weight aquí ya que el span ahora está dentro */

    /* ¡CLAVE!: Convertir el enlace en un contenedor flex para centrar su contenido */
    display: flex;
    flex-direction: column; /* Apila la imagen y el texto verticalmente */
    align-items: center; /* Centra la imagen y el texto horizontalmente */
    justify-content: center; /* Centra verticalmente si hay espacio */
    width: 100%; /* Ocupa todo el ancho de su padre (.contcate) */
    height: 100%; /* Ocupa toda la altura de su padre (.contcate) */
    padding: 10px; /* Añade padding interno para que el contenido no toque los bordes */
    box-sizing: border-box; /* Incluye el padding en el tamaño */
}

.imgcateg {
    /* La altura debe ser para la imagen dentro, no para este div */
    width: 80%; /* Ancho relativo al .cateenlace */
    /* border: solid 12px;  No es ideal para la imagen, quizá para el contcate */
    /* height: 15vw;  Esto lo manejará la imagen directamente */
    margin-bottom: 10px; /* Espacio entre la imagen y el texto */
    display: flex; /* Flexbox para centrar la imagen dentro de imgcateg */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Oculta cualquier parte de la imagen que se desborde */
    /* Podrías darle un border-radius o un aspecto de contenedor a la imagen aquí */
    border-radius: 8px; /* Pequeño radio a la caja de la imagen */
    aspect-ratio: 1 / 1; /* Mantiene la proporción 1:1 */
}
.imgcateg img {
    width: 100%;
    height: 100%; /* La imagen ocupará todo el espacio de imgcateg */
    object-fit: contain; /* Recorta la imagen para que cubra el espacio sin distorsionarse */
    border-radius: 8px; /* Redondea la imagen dentro de la caja */
}

/* El span no necesita estilos especiales de alineación si el padre (.cateenlace) ya es flex column y align-items: center */
.cateenlace span {
    text-align: center; /* Asegura que el texto dentro del span esté centrado */
    display: block; /* Para que text-align funcione correctamente en algunos navegadores */
    margin-top: auto; /* Empuja el span hacia abajo si hay espacio extra */
}

#cards {
    width: 90%;
    /*justify-content: center;*/
    display: flex;
    flex-wrap: wrap;
}

.card-perso {
    margin-top: 1%;
    margin-bottom: 1%;
    display: flex;
    height: auto;
    flex-direction: column; /* Las tarjetas se muestran en fila */
    justify-content: start;
    width:  100%;
}
.familiaDetalles{
  height: auto;
    text-align: justify;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;  
    color: #000000;    
    display: flex;
    flex-direction: row;

}
.familiaImagen{
    width:  30%;
    height: 40vh;
    object-fit: contain; /* La imagen se ajusta dentro del contenedor sin distorsionarse */
    margin-right: 20px;
}

.carousel-item {
    width: 100%;
    height: 40vh; /* Altura del item para el carrusel principal */
}

.carousel-imgc2 {
    width: 100%;
    height: 100%; /* La imagen ocupará el 100% de la altura de su contenedor (.carousel-item) */
    object-fit: contain; /* ¡Clave! La imagen se ajustará al contenedor sin cortarse ni distorsionarse */
    display: block; /* Asegura que la imagen se comporte como un bloque */
    margin: 0 auto; /* Centra la imagen horizontalmente si hay espacio extra */
}

.familiaInfo{
    width:  70%;
    height: auto;
    text-align: justify;
    font-size: 18px;    
}
.familiaInfo p {
    margin-bottom: 10px;
    line-height: 1.6; /* Espaciado entre líneas para mejorar la legibilidad */
}

.card-item {
    margin: 1%;
    padding: 1%;
    width:  calc(25% - 2%); /* Cada tarjeta ocupa el 25% del contenedor menos los márgenes */
    min-width: 200px; /* Ancho mínimo para que las tarjetas no se hagan demasiado pequeñas */
    max-width: 300px; /* Ancho máximo para las tarjetas */
    height: 45vh;
    display: flex;
    flex-direction: column; /* Los elementos dentro de la tarjeta se muestran en columna */
    align-items: center;
    text-align: center;
    background-color: #f9f9f9; /* Color de fondo para las tarjetas */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra para las tarjetas */
    border-radius: 16px;
}
.card-item img {
    width:  100%;
    height: auto;
    max-height: 150px; /* Altura máxima para las imágenes */
    object-fit: contain; /* La imagen se ajusta dentro del contenedor sin distorsionarse */
    margin-bottom: 10px;
}
.store-products {
  min-height: 600px; /* Mantiene altura consistente */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 2rem;
  /*padding: 1.5rem 0;*/
  justify-items: center;
}
@media (max-width: 1200px) {
  .store-products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .store-products {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .store-products {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .familiaDetalles{
    flex-direction: column;
    align-items: center;
  }
  .familiaImagen{
    width:  100%;
    height: 40vh;
    object-fit: contain; /* La imagen se ajusta dentro del contenedor sin distorsionarse */
    margin-right: 0px;
    margin-bottom: 3.8%;
    
  }
}

/* Sección de filtros de categorías mejorada */
.category-row {
    width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: #f0f4f8;
  border: 1px solid #c8d0d8;
  border-radius: 0.5rem;
  align-items: center; /* Centra la imagen y el texto horizontalmente */
  justify-content: center; /* Centra verticalmente si hay espacio */
}

.category-row label {
  width: 25%;
  color: black;
  font-size: 1.5vw;
  font-weight: bold;
  display: inline-flex;
  align-items: center; /* Centra la imagen y el texto horizontalmente */
  justify-content: center; /* Centra verticalmente si hay espacio */
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 1rem;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s, border 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.category-row label:hover {
  background: #e9f0f7;
  transform: translateY(-2px);
  border: 2px solid #007bff;
}

.category-row input[type="checkbox"] {
  display: none;
}

.category-row input[type="checkbox"]:checked + span {
  background-color: #007bff;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s;
}
@media (max-width: 600px) {
  .familia-descripcion .descripcion-corta {
    display: inline;
    /* El JS se encargará de truncar el texto */
  }
  .familiaInfo{
    width:  95%;
    height: auto;
    text-align: justify;
    font-size: 18px;
  }
  .familia-descripcion .ver-mas-btn,
  .familia-descripcion .ver-menos-btn {
    font-size: 0.95rem;
    padding: 0.25rem 0.7rem;
    margin-top: 0.5rem;
  }
  .category-row label span {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.4em 0.7em;
    display: inline-block;
  }
  .category-row label {
    margin-bottom: 0.5em;
  }
}

/* Estilos para los botones Ver más y Ver menos */
.familia-descripcion .ver-mas-btn,
.familia-descripcion .ver-menos-btn {
  background-color: #E6E8E5;
  color: #000;
  border: none;
  outline: none;
  border-radius: 0.5rem;
  padding: 0.3rem 0.9rem;
  font-size: 1rem;
  font-weight: 500;
  margin-left: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: inline-block;
}

.familia-descripcion .ver-mas-btn:hover,
.familia-descripcion .ver-menos-btn:hover {
  background-color: #0056b3;
  color: #fff;
}