/* Productos.css */

/* Estilos generales de la sección de productos */
.productos {
  font-family: GeneralSans, sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 100px 20px; /* Aumentado para dar más aire */
  min-height: 50vh;
  gap: 40px;
  width: 100%;
  box-sizing: border-box;
  background-color: #f8f9fa; /* Restaurado al color anterior */
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.titulo-Productos {
  text-align: left;
  max-width: 350px; /* Ajustado para mayor compacidad */
  margin-bottom: 0;
}

.titulo-Productos h2 {
  margin-top: 0;
  margin-bottom: 10px; /* Reducido */
  font-weight: 700;
  color: #333;
  font-size: 2.5em;
  line-height: 1.1; /* Texto del título más unido */
}

.titulo-Productos .descripcion-productos {
  color: #444;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.4; /* Reducido para mayor cohesión */
}

/* Estilos para la lista de productos en pantallas grandes (sin carrusel) */
.lista-productos {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  width: 100%;
}

.productos-carrusel-mobile {
  display: none; /* Oculto en escritorio */
}

/* Estilos para cada tarjeta de producto (aplican a ambas versiones) */
.producto {
  flex: 0 0 auto;
  width: 280px;
  min-height: 420px; /* Altura mínima aumentada para escritorio */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: white;
  border: 1px solid #e0e0e0;
  padding: 40px 25px; /* Más padding interno */
  border-radius: 20px; /* Bordes un poco más redondeados */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease; /* Transición más suave y elástica */
}

.producto:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.icon-container {
  width: 100px;
  height: 100px;
  background-color: #fdf2f2; /* Fondo muy suave para el icono */
  color: #8b0000; /* Iconos en el color principal */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-bottom: 20px;
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.producto:hover .icon-container {
  transform: rotate(10deg);
  background-color: #8b0000;
  color: white;
}

.icon-container svg {
  width: 40px;
  height: 40px;
}

.producto h3 {
  margin-top: auto; /* Empuja el título hacia abajo si el texto de la descripción es corto */
  margin-bottom: 10px;
  font-size: 1.3em;
  font-weight: 700;
  color: #333;
  white-space: normal;
  line-height: 1.2;
}

.producto p {
  font-weight: 300;
  font-size: 1em;
  color: #555;
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: auto; /* Empuja la descripción hacia arriba si el texto es corto */
}

/* ---------------------------------------------------------------------- */
/* Media query para móviles y tablets */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .productos {
    flex-direction: column;
    padding: 60px 0; /* Aumentado arriba para separar del logo history */
    gap: 0px;
    min-height: auto;
  }

  .lista-productos {
    display: none; /* Oculto en móvil */
  }

  .titulo-Productos {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 20px;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .titulo-Productos h2 {
    font-size: 1.8em;
  }

  .titulo-Productos .descripcion-productos {
    font-size: 1.1em;
  }

  /* Contenedor del carrusel SOLO para pantallas pequeñas */
  .productos-carrusel-mobile {
    display: block; /* Visible en móvil */
    width: 100%;
    /* Eliminamos padding lateral para que el swiper cubra todo y la card se centre */
    padding: 0; 
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Estilos específicos del componente Swiper (<Swiper className="mySwiper">) */
  .mySwiper {
    width: 100%; /* Ocupa el 100% del ancho disponible dentro de .productos-carrusel-mobile */
    height: auto;
    /* *** CLAVE para dar espacio a los puntos de paginación *** */
    /* Este padding crea el espacio "real" debajo de las tarjetas */
    padding-bottom: 90px !important; /* Aumentado de 70px a 90px para más espacio */
  }

  /* Estilos de cada slide individual del Swiper */
  .swiper-slide {
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: auto;
    width: 100%;
  }

  /* Estilos de la tarjeta individual del producto en móvil */
  .producto {
    width: 85%; /* No ocupa todo el ancho */
    max-width: 320px; /* Tamaño máximo controlado */
    /* ... resto de estilos ... */
    min-height: 450px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Estilos para las flechas de navegación de Swiper */
  .swiper-button-prev,
  .swiper-button-next {
    color: #007bff; /* Color visible para las flechas */
    width: 30px;
    height: 30px;
    margin-top: -60px; /* Ajusta la posición vertical de las flechas (sube) */
    /* Distancia de las flechas desde los bordes del carrusel */
    left: 10px;
    right: 10px;
    /* Si las flechas parecen "recortadas", puede que necesites un background-color o un box-shadow */
    /* background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); */
  }

  /* Ajustar la posición de los puntos de paginación */
  .swiper-pagination-bullets {
    /* *** CLAVE para posicionar los puntos de paginación *** */
    /* Mueve los puntos hacia ABAJO dentro del espacio que creaste con padding-bottom en .mySwiper */
    bottom: 15px !important; /* Bajado para separarlo más de la tarjeta */
    /* Si aún no se ven bien, combina con el padding-bottom de .mySwiper */
  }

  /* Si quieres ocultar las flechas en móvil, descomenta esto */
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }
}