/* Estilos generales */
* {
  box-sizing: border-box; /* Asegura que el padding y el border se incluyan en el ancho y alto total */
}

html, body {
  width: 100%;
  overflow-x: hidden; /* Evita el desplazamiento horizontal */
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  text-align: center;
}

.header {
  display: flex;
  flex-direction: column; /* Alinear los elementos en columna en pantallas pequeñas */
  align-items: center;
  background-color: #f5410a;
  padding: 20px;
  color: white;
}

.logo {
  max-width: 100%; /* Tamaño máximo para ocupar todo el ancho disponible */
  height: auto; /* Mantiene la proporción */
}

/* Media query para pantallas más pequeñas */
@media (max-width: 600px) {
  .logo {
    max-width: 300%; /* Permite que el logo ocupe el 100% del ancho disponible */
    width: auto; /* Mantiene la proporción del logo */
    height: auto; /* Mantiene la proporción */
  }
}

.social-media {
  display: flex;
  justify-content: center;
  margin: 0;
}

.social-icon {
  width: 30px;
  margin: 0 10px;
}

.search-container {
  margin-top: 20px;
  text-align: center;
}

#search-input {
  padding: 10px;
  width: 80%;
  max-width: 300px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#resultados {
  margin-top: 10px;
}

.informacion {
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 5px;
  margin-bottom: 20px;
}

.informacion h2 {
  color: #003d34;
  margin-bottom: 10px;
}

.informacion p {
  line-height: 1.6;
  color: #333;
}

.imagen-local {
  width: 100%; /* La imagen ocupará todo el ancho de su contenedor */
  height: auto; /* Ajustará la altura automáticamente manteniendo la proporción */
  object-fit: cover; /* Asegura que la imagen cubra completamente su contenedor */
  display: block; /* Evita el espacio extra alrededor de la imagen */
}

.productos {
  padding: 20px;
  background-color: #f9f9f9;
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Dos columnas por defecto */
  gap: 20px; /* Espacio entre tarjetas */
}

.tarjeta {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.imagen-producto {
  max-width: 100%; /* Asegura que las imágenes no excedan el ancho */
  height: auto; /* Mantiene la proporción */
  border-radius: 5px;
}

.ver-mas {
  text-align: center;
  margin-top: 20px;
}

.boton-ver-mas {
  background-color: #f5410a;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.boton-ver-mas:hover {
  background-color: #d92d00; /* Cambiar el color de fondo al pasar el ratón */
}

/* Estilo para el botón de WhatsApp */
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366; /* Color de WhatsApp */
  color: white;
  border: none;
  border-radius: 5px; /* Bordes redondeados */
  padding: 10px 15px; /* Espaciado interno */
  font-size: 16px; /* Tamaño de fuente */
  cursor: pointer;
  z-index: 1000;
  animation: bounce 1s infinite; /* Agregar animación de rebote */
  width: 120px; /* Ancho fijo del botón */
  height: 40px; /* Altura fija del botón */
  display: flex; /* Usar flexbox para centrar el contenido */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
}

/* Estilo para el icono dentro del botón */
.whatsapp-icon {
  width: 20px; /* Tamaño más pequeño del icono */
  margin-right: 5px; /* Espacio entre el icono y el texto */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
  }
  40% {
      transform: translateY(-10px);
  }
  60% {
      transform: translateY(-5px);
  }
}

/* Estilos responsivos */
@media (max-width: 768px) {
  .header {
    flex-direction: column; /* Mantiene los elementos en columna */
  }

  .tarjetas {
    grid-template-columns: 1fr; /* Cambia a una columna en pantallas pequeñas */
  }
}

@media (max-width: 480px) {
  .whatsapp-button {
    padding: 8px 15px;
    font-size: 14px;
  }

  .boton-ver-mas {
    font-size: 14px;
  }
}

/* Estilos para la ventana emergente */
.modal {
  display: none; /* Oculta el modal por defecto */
  position: fixed; /* Mantiene el modal en la misma posición */
  z-index: 1000; /* Asegura que el modal esté por encima de otros elementos */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  overflow: auto; /* Permite el desplazamiento si es necesario */
}

/* Contenedor del contenido del modal */
.modal-content {
  background-color: #f5410a; /* Color tomate */
  margin: 15% auto; /* Centra el modal en la pantalla */
  padding: 20px;
  border: 1px solid #888; /* Borde gris */
  width: 80%; /* Ancho del modal */
  max-width: 600px; /* Ancho máximo */
  border-radius: 10px; /* Esquinas redondeadas */
}

/* Estilo para el encabezado del modal */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Estilo para el texto dentro del modal */
.modal-body {
  color: white; /* Texto blanco */
}

/* Botón de cerrar */
.close {
  color: white; /* Color del botón de cerrar */
  float: right; /* Alinear a la derecha */
  font-size: 28px; /* Tamaño de fuente */
  font-weight: bold; /* Negrita */
  cursor: pointer; /* Cambia el cursor al pasar el ratón */
}

.close:hover,
.close:focus {
  color: #ddd; /* Color en hover */
  text-decoration: none; /* Sin subrayado */
  cursor: pointer; /* Cambia el cursor al pasar el ratón */
}

/* Lista de productos */
#productList {
  list-style-type: none; /* Sin viñetas */
  padding: 0; /* Sin relleno */
}

#productList li {
  padding: 10px;
  background-color: #f5410a; /* Color tomate más claro */
  color: white; /* Texto blanco */
  cursor: pointer; /* Cambia el cursor al pasar el ratón */
  border-radius: 5px; /* Esquinas redondeadas */
  margin: 5px 0; /* Margen entre elementos */
}

#productList li.selected {
  background-color: #0d0d0d; /* Color cuando está seleccionado */
}

/* nav-header.css */

/* Estilos generales */
.nav-header {
  display: flex;
  justify-content: center; /* Centra los elementos horizontalmente */
  background-color: #d3d3d3; /* Fondo plomo claro */
  padding: 1rem;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas más pequeñas */
  text-align: center; /* Centra el texto dentro de los elementos */
}

.nav-header a {
  color: #000000; /* Color del texto en negro */
  font-weight: bold; /* Texto en negrita */
  text-decoration: none; /* Opcional: elimina el subrayado de los enlaces */
  margin: 0 1rem; /* Espacio entre enlaces */
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
  .nav-header {
    flex-direction: column; /* Cambia la dirección de los elementos a columna */
  }

  .nav-header a {
    margin: 0.5rem 0; /* Espacio vertical en lugar de horizontal */
  }
}
/* Contenedor de video y galería */
.video-importaciones,
.galeria {
  margin-bottom: 20px;
}

/* Títulos */
h2, h3 {
  color: #003d34; /* Color verde */
  text-align: center;
}

/* Video responsivo */
video {
  width: 100%; /* Hacer que el video sea responsivo */
  max-width: 200px; /* Limitar el ancho máximo */
}

/* Contenedor de imágenes de la galería */
.imagenes-galeria {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Permitir que las imágenes se ajusten en varias filas */
}

/* Imágenes de la galería */
.imagen-galeria {
  width: 100%; /* Ancho responsivo */
  max-width: 400px; /* Limitar el ancho máximo */
  height: auto; /* Mantener la proporción */
  margin: 10px;
  border-radius: 4px; /* Bordes redondeados */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave */
}

/* Media queries para diferentes tamaños de pantalla */
@media (min-width: 768px) {
  .imagen-galeria {
    width: 500px; /* Ancho fijo para pantallas de escritorio */
  }
}

@media (max-width: 767px) {
  .imagen-galeria {
    width: 100%; /* Ancho responsivo para dispositivos móviles */
    max-width: 100%; /* Limitar el ancho máximo al 100% del contenedor */
  }
}
.footer {
  background-color: #ff3d00; /* Color de fondo fosforescente (tomate) */
  color: rgb(12, 12, 12); /* Color del texto */
  padding: 20px;
  text-align: center; /* Centra todo el texto */
  font-weight: bold; /* Texto en negrita */
}


.footer-container {
  display: flex;
  flex-wrap: wrap; /* Permite que las columnas se ajusten a la pantalla */
  justify-content: space-between;
}

.footer-col {
  flex: 1; /* Cada columna ocupa el mismo espacio */
  padding: 5px;
  min-width: 200px; /* Establece un ancho mínimo para las columnas */
  max-width: 300px; /* Opcional: establece un ancho máximo para las columnas */
}

.separator {
  border: none;
  border-top: 1px solid white; /* Línea blanca separadora */
  margin: 20px 0; /* Espaciado vertical */
}

.rights {
  text-align: center; /* Centra el texto de derechos reservados */
  margin-top: 10px; /* Margen superior para separación */
}

/* Media query para pantallas más pequeñas */
@media (max-width: 600px) {
  .footer-container {
    flex-direction: column; /* Cambia la dirección de las columnas a vertical en pantallas pequeñas */
    align-items: center; /* Centra las columnas */
  }

  .footer-col {
    text-align: center; /* Centra el texto en columnas en pantallas pequeñas */
    padding: 10px 0; /* Ajusta el padding para mayor separación */
    min-width: 100%; /* Asegura que las columnas ocupen el 100% en pantallas pequeñas */
  }
}

.whatsapp-float {
  position: fixed;
  bottom: 20px; /* Ajusta la distancia del fondo */
  right: 20px; /* Ajusta la distancia del lado derecho */
  background-color: #25D366; /* Color de fondo de WhatsApp */
  color: white; /* Color del texto */
  padding: 10px 20px; /* Espaciado alrededor del texto */
  border-radius: 30px; /* Bordes redondeados */
  display: flex;
  align-items: center; /* Centra verticalmente el texto */
  text-decoration: none; /* Sin subrayado en el texto */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombra para dar efecto de profundidad */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.whatsapp-icon {
  width: 24px; /* Ajusta el tamaño del icono */
  height: auto;
  margin-right: 10px; /* Espacio entre el icono y el texto */
}

.facebook-icon {
  width: 150px; /* Cambia este valor según tus necesidades */
  height: auto; /* Mantiene la proporción */
}

.logo-container {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* Ajusta según sea necesario */
}

.logofooter {
  max-width: 250%; /* Asegura que el logo no se desborde */
}


.whatsapp-link {
  color: black; /* Cambia el color del texto a negro */
  text-decoration: none; /* Elimina el subrayado */
}

.whatsapp-link:hover {
  text-decoration: underline; /* Opcional: subrayado al pasar el mouse */
}