/* -------------------- */
/* BODY Y LAYOUT GLOBAL */
/* -------------------- */
body {
  margin: 0;                  /* Elimina el margen por defecto del navegador */
  padding: 0;                 /* Elimina el padding por defecto */
  font-family: sans-serif;    /* Tipografía base */
  background: #f1efef;        /* Color de fondo gris claro */
  overflow-x: hidden;         /* Evita scroll horizontal si algún elemento sobresale */
}

/* Contenedor principal tipo grid */
.parent {
  display: grid;                               /* Define un grid */
  grid-template-columns: repeat(4, 1fr);      /* 4 columnas iguales */
  grid-template-rows: 30px 150px 0px 0px;     /* Filas: barra superior, logo/buscador/menu, divisorias */
  gap: 10px;                                   /* Espacio entre columnas y filas */
}

/* -------------------- */
/* BARRA SUPERIOR (.div1) */
/* -------------------- */
.div1 {
  grid-column: 1 / -1;                        /* Ocupa todas las columnas del grid */
  width: 100vw;                                /* Ancho total de la ventana */
  background-color: black;                     /* Fondo negro */
  height: 30px;                                /* Altura fija */
  display: flex;                               /* Flex para centrar contenido */
  justify-content: center;                     /* Centrado horizontal */
  align-items: center;                         /* Centrado vertical */
  gap: 20px;                                   /* Espacio entre íconos */
  margin-left: calc(50% - 50vw);              /* Truco para centrar barra y evitar scroll */
}

/* Íconos de contacto */
.telegram-icon, .whatsapp-icon {
  font-size: 24px;                             /* Tamaño de los íconos */
  text-decoration: none;                       /* Sin subrayado */
  transition: transform 0.2s ease;            /* Transición suave al hacer hover */
}
.telegram-icon { color: #00bfff; }            /* Azul telegram */
.whatsapp-icon { color: #25D366; }           /* Verde whatsapp */
.telegram-icon:hover, .whatsapp-icon:hover {
  transform: scale(1.3);                       /* Efecto zoom al pasar el mouse */
}

/* -------------------- */
/* LOGO (.div2) */
/* -------------------- */
.div2 {
  grid-row-start: 2;                           /* Fila 2 del grid */
  display: flex;                               /* Flexbox para centrar */
  justify-content: right;                     /* Centrado horizontal */
}
.logo {
  width: 210px;                                /* Ancho del logo */
  height: 210px;                               /* Altura del logo */
  object-fit: contain;                         /* Mantiene proporción de la imagen */
}

/* -------------------- */
/* BUSCADOR (.div3) */
/* -------------------- */
.div3 {
  grid-column: span 2;                         /* Ocupa 2 columnas */
  grid-row-start: 2;                            /* Fila 2 del grid */
  display: flex;                               /* Flex para centrar */
  justify-content: center;                     /* Centrado horizontal */
  align-items: center;                         /* Centrado vertical */
}
.search-container {
  position: relative;                          /* Para colocar icono dentro del input */
  width: 100%;                                 /* Ocupa todo el ancho disponible */
  max-width: 450px;                            
  /* Máximo 450px */
  margin: 0 auto
  
}
.search-input {
  width: 100%;                                 /* Input ocupa todo el contenedor */
  height: 40px;                                /* Altura del input */
  /* padding: 0.5rem 2.5rem 0.5rem 1rem;          */
  /* Espacio interno, dejando margen para icono */
  font-size: 1rem;                             /* Tamaño de letra */
  border: 1px solid #ccc;                      /* Borde gris */
  border-radius: 10px;                          /* Bordes redondeados */
}
.search-icon {
  position: absolute;                          /* Posición dentro del input */
  right: 10px;                                 /* A la derecha */
  top: 50%;                                    /* Centrado vertical */
  transform: translateY(-50%);                /* Ajusta exactamente al medio */
  pointer-events: none;                        /* No interfiere con clics */
  font-size: 1.2rem;                           /* Tamaño del icono */
  color: #888;                                 /* Gris medio */
}

/* -------------------- */
/* MENÚ DESPLEGABLE (.div4) */
/* -------------------- */
.div4 {
  grid-column-start: 4;                         /* Columna 4 del grid */
  grid-row-start: 2;                            /* Fila 2 del grid */
  display: flex;                                /* Flexbox para centrar */
  justify-content: left;
  align-items: center;                      /* Centrado horizontal */
}
.dropdown {
  position: relative;                           /* Para colocar el contenido desplegable */
}
.dropbtn {
  background-color: #000;                       /* Fondo negro */
  color: white;                                 /* Texto blanco */
  width: 250px;                                 /* Ancho fijo */
  padding: 0.5rem 1rem;                         /* Espacio interno */
  font-size: 1rem;                              /* Tamaño de letra */
  border: none;                                 /* Sin borde */
  border-radius: 4px;                           /* Bordes redondeados */
  cursor: pointer;                              /* Mano al pasar el mouse */
  display: flex;                                /* Flex para separar texto y flecha */
  justify-content: space-between;               /* Texto a la izquierda, flecha a la derecha */
  align-items: center;                           /* Centrado vertical */
}
.arrow {
  margin-left: 10px;                             /* Separación del texto */
  width: 0; height: 0;                          /* Flecha triangular */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
}
.dropdown-content {
  display: none;                                 /* Oculto por defecto */
  position: absolute;                            /* Absoluto respecto al dropdown */
  top: 20%;                                      /* Debajo del botón */
  left: 0;
  background-color: #333;                        /* Fondo gris oscuro */
  min-width: 250px;
  border-radius: 4px;
  z-index: 1;                                    /* Se superpone sobre otros elementos */
}
.dropdown-content a {
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover { background-color: #555; } /* Efecto hover */
.dropdown:hover .dropdown-content { display: block; } /* Mostrar menú al pasar mouse */

/* -------------------- */
/* LÍNEAS DIVISORIAS */
/* -------------------- */
.linea-divisoria,
.linea-divisoria1 {
  border-bottom: 2px solid #ccc;                /* Línea gris */
  margin: 0 10px;                               /* Margen lateral */
}
.linea-divisoria { grid-row-start: 3; grid-column: span 4; }
.linea-divisoria1 { grid-row-start: 4; grid-column: span 4; }

/* -------------------- */
/* PRODUCTOS GRID ADAPTATIVO */
/* -------------------- */
.productos-grid {
  display: grid;                                 /* Grid para tarjetas */
  grid-template-columns: repeat(3, 1fr);        /* 3 columnas iguales */
  gap: 80px;                                     /* Espacio entre tarjetas */
  width: 100%;
  padding: 40px 100px 100px 100px;
  box-sizing: border-box;                        /* Padding incluido en ancho */
}

/* -------------------- */
/* TARJETAS DE PRODUCTO */
/* -------------------- */
.link-div { text-decoration: none; color: inherit; } /* Enlace sin subrayado */
.producto {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 30px -20px rgba(0, 0, 0, 0.35);
  text-align: center;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  
  width: 250px;     /* ancho fijo */
  min-width: 250px; /* no se achica más */
  height: 350px;    /* altura fija */
  margin: 0 auto;
}
/* .producto {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 30px -20px rgba(0, 0, 0, 0.35);
  text-align: center;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;  Igual altura en fila 
  width: 100%;
} */
.producto:hover { transform: translateY(-5px); } /* Efecto hover */

/* .imagen-contenedor {
  width: 100%;
  height: 500px;
  overflow: hidden;
  flex-shrink: 0;
}
.producto1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.producto1:hover { transform: scale(1.2); } */

/* Contenedor de la imagen */
.imagen-contenedor {
  width: 100%;
  aspect-ratio: 1 / 1; /* cuadrado, puedes cambiar a 4/3, 16/9 según prefieras */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #ffffff; /* fondo neutro para las imágenes más pequeñas */
  border-radius: 12px 12px 0 0;
}

/* Imagen dentro del contenedor */
.producto1 {
  width: 100%;
  height: 100%;
  object-fit: contain; /* la imagen completa, sin recortar */
  transition: transform 0.4s ease;
}

/* Hover suave */
.producto1:hover {
  transform: scale(1.05); /* leve zoom */
}

.nombre-producto {
  margin: 8px 0 4px 0;
  font-size: 1rem;
  font-weight: bold;
}
.precio-producto {
  color: #4db5cb;
  margin: 10px 0;
  margin-top: auto; /* Empuja hacia abajo si hay espacio */
}

/* -------------------- */
/* RESPONSIVE (BREAKPOINTS) */
/* -------------------- */
@media (max-width: 1100px) {
  .div1 { grid-column: span 6; width: 100vw; margin-left: calc(50% - 50vw); }
  .parent { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 30px 75px 75px 0px 0px; gap: 10px; }
  .div2 { grid-column-start: span 2; grid-row-start: span 2; justify-content: center; }
  .div3 { grid-column-start: 3; grid-column-end: span 2; grid-row-start: 2; height: fit-content; justify-content: left; margin:5px; padding: 5px; }
  .div4 { grid-column-start: 3; grid-column-end: span 2; grid-row-start: 3; justify-content: center; }
  .dropdown-content { top: 30%; }
  .linea-divisoria { grid-row-start: 4; grid-column: span 6; }
  .linea-divisoria1 { grid-row-start: 5; grid-column: span 6; }
  .productos-grid { grid-template-columns: repeat(2, 1fr);padding: 70px 150px 150px 150px;
  margin: 0 auto;
  }
}

@media (max-width: 790px) {
  .parent {
    display: flex; flex-direction: column; gap: 8px; align-items: center;
  }
  .parent > * { width: 100%; max-width: 790px; }
  .div1 { width: 100vw; margin-left: calc(50% - 50vw); }
  .div2 { height: 150px; }
  .div3 { margin-left: -30px;
  margin: 0 auto;
   }
  .productos-grid { grid-template-columns: repeat(1, 1fr);padding: 40px 100px 100px 100px;
  margin: 0 auto;
  }
}

@media (max-width: 500px) {
  .search-container { max-width: 300px; }
  .dropbtn { width: 260px; }
  .dropdown-content { min-width: 260px; }
  .productos-grid { grid-template-columns: repeat(1, 1fr);padding: 20px 50px 50px 50px;
  margin: 0 auto;
  }
}
@media (max-width: 350px) {
  .search-container { max-width: 250px; }
  .dropbtn { width: 150px; font-size: 0.9rem; }
  .dropdown-content { min-width: 150px; }
  .productos-grid { grid-template-columns: repeat(1, 1fr);padding: 10px 30px 30px 30px;
  margin: 0 auto;
  }
}