/* ======================================
   1. RESET BÁSICO
   ====================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ======================================
   2. ESTILOS GLOBALES
   ====================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333333;            /* Texto principal */
  background-color: #FFFFFF; /* Fondo blanco */
  line-height: 1.5;
}

/* ======================================
   3. ENCABEZADO Y MENÚ
   ====================================== */
/* 3.1. Header a ancho completo */

header {
  width: 100%;
  background-color: #4A90E2; /* Azul barra */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 3.2. Contenedor flex para título + menú */
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* 3.3. Título en blanco */
header h1 {
  font-size: 1.8rem;
  color: #FFFFFF;
  margin-bottom: 10px;
  /* Agrega esta línea: */
  text-align: center;
}
/* Centrar texto de todos los elementos <h2> */
h2 {
  text-align: center;
}

/* 3.4. Lista de navegación en fila */
nav .menu {
  list-style: none;
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
}

/* 3.5. Cada ítem ocupa igual espacio */
nav .menu li {
  flex: 1;
  text-align: center;
}

/* 3.6. Enlaces como botones */
nav .menu li a {
  display: inline-block;
  width: 100%;
  padding: 12px 0;
  text-decoration: none;
  background-color: #4A90E2; /* Mismo azul */
  color: #FFFFFF;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
}

/* 3.7. Hover */
nav .menu li a:hover {
  background-color: #357ABD;
}

/* 3.8. Activo */
nav .menu li a.activo {
  background-color: #E0E0E0;
  color: #333333;
}

/* ======================================
   4. CONTENIDO PRINCIPAL
   ====================================== */
main {
  padding: 20px 0;
}

/* ======================================
   5. ESTILOS FORMULARIO (Contactos)
   ====================================== */
/* ================================
   CSS PARA ESTILIZAR Y CENTRAR EL FORMULARIO
   ================================ */

/* 1. Centrar el formulario en la página */
form {
  margin: 0 auto;            /* Centra el formulario horizontalmente */
  max-width: 400px;          /* Ancho máximo para que no se extienda demasiado */
  width: 100%;               /* Ocupa el ancho máximo disponible hasta 400px */
  padding: 20px;             /* Espacio interno alrededor del formulario */
  background-color: #f9f9f9; /* Fondo suave para distinguir el formulario */
  border: 1px solid #e0e0e0; /* Borde ligero */
  border-radius: 6px;        /* Bordes redondeados */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra tenue */
  text-align: left;          /* Alinea texto e inputs a la izquierda dentro del formulario */
}

/* 2. Etiquetas del formulario */
form label {
  display: block;            /* Cada label ocupa su propia línea */
  font-weight: 500;          /* Texto seminegrita */
  margin-bottom: 6px;        /* Espacio debajo de la etiqueta */
  color: #333333;            /* Gris oscuro para legibilidad */
}

/* 3. Campos de entrada (input y textarea) */
form input,
form textarea {
  width: 100%;               /* Cada campo ocupa todo el ancho del formulario */
  padding: 8px;              /* Espacio interno para que el texto no quede pegado */
  border: 1px solid #cccccc; /* Borde gris claro */
  border-radius: 4px;        /* Bordes ligeramente redondeados */
  margin-bottom: 14px;       /* Espacio debajo de cada campo */
  font-size: 1rem;           /* Tamaño de fuente legible */
  color: #333333;            /* Texto gris oscuro */
  background-color: #ffffff; /* Fondo blanco para los campos */
}

/* 4. Área de texto multilinea */
form textarea {
  resize: vertical;          /* Permitir redimensionar solo en sentido vertical */
  min-height: 100px;         /* Altura mínima para que sea visible */
}

/* 5. Botón de envío */
form button {
  display: block;            /* Ocupa todo el ancho disponible dentro de form (hasta max-width) */
  width: 100%;
  padding: 12px 0;           /* Alto del botón */
  background-color: #4A90E2; /* Azul de los botones */
  color: #FFFFFF;            /* Texto blanco */
  border: none;              /* Sin borde adicional */
  border-radius: 4px;        /* Bordes redondeados */
  font-size: 1rem;           /* Tamaño de fuente uniforme */
  font-weight: 500;          /* Texto seminegrita */
  cursor: pointer;           /* Manito al pasar el cursor */
  transition: background-color 0.2s ease-in-out;
}

/* 6. Efecto hover en el botón */
form button:hover {
  background-color: #357ABD; /* Azul más oscuro al pasar el ratón */
}

/* 7. Mensaje de éxito/error (opcional) */
form .mensaje {
  margin-top: 10px;          /* Espacio encima del mensaje */
  font-size: 0.9rem;         /* Texto un poco más pequeño */
  color: #d9534f;            /* Rojo suave para errores */
}

/* 8. Responsive: Ajustes para pantallas pequeñas */
@media (max-width: 400px) {
  form {
    padding: 15px;           /* Reduce el padding */
  }

  form button {
    padding: 10px 0;         /* Ajusta el alto del botón */
  }
}

/* ======================================
   6. MEDIA QUERY: MÓVILES (≤600px)
   ====================================== */
@media (max-width: 600px) {
  header .container {
    flex-direction: column;
    align-items: flex-start;
  }

  nav .menu {
    flex-direction: column;
    width: 100%;
  }

  nav .menu li {
    width: 100%;
    margin-bottom: 5px;
  }

  nav .menu li a {
    padding: 10px 0;
  }

  header h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #FFFFFF;
  }

  main {
    padding: 15px 0;
  }
}

/* ======================================
   7. MEDIA QUERY: TABLETS (601px–900px)
   ====================================== */
@media (min-width: 601px) and (max-width: 900px) {
  header h1 {
    font-size: 1.6rem;
  }

  nav .menu li a {
    padding: 11px 0;
  }

  main {
    padding: 18px 0;
  }
}

/* ======================================
   8. MEDIA QUERY: PANTALLAS GRANDES (≥901px)
   ====================================== */
@media (min-width: 901px) {
  header h1 {
    font-size: 1.8rem;
  }

  nav .menu li a {
    padding: 12px 0;
  }

  main {
    padding: 20px 0;
  }
}
/* ================================
   AJUSTE DE ALTURA PARA CARRUSEL
   ================================ */

/* 1. Limitar la altura del contenedor del carrusel */
.carousel {
  width: 100vw;          /* Sigue ocupando todo el ancho */
  height: 300px;         /* Altura fija para que no sea muy alto */
  overflow: hidden;      /* Oculta lo que sobresalga */
  position: relative;
  margin: 20px 0;
}

/* 2. Asegurar que el contenedor de slides use la misma altura */
.carousel .slides {
  display: flex;
  width: calc(100vw * 3);  /* Ajusta según # de imágenes */
  height: 100%;            /* Hereda los 300px del .carousel */
  animation: slide 15s infinite;
}

/* 3. Cada imagen ocupa todo el contenedor y se escala con object-fit */
.carousel .slides img {
  width: 100vw;            /* Ocupa todo el ancho de ventana */
  height: 300px;           /* Misma altura que el .carousel */
  object-fit: cover;       /* Recorta/escala para cubrir el área sin deformar */
}

/* 4. (Opcional) Si quieres que pase a 250px en móviles */
@media (max-width: 600px) {
  .carousel {
    height: 200px;         /* Altura menor en móvil */
  }
  .carousel .slides img {
    height: 200px;
  }
}

/* 5. La animación no cambia */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  33.333% {
    transform: translateX(-100vw);
  }
  66.666% {
    transform: translateX(-200vw);
  }
  100% {
    transform: translateX(0);
  }
}

/* Si tienes 4 imágenes, ajusta: */
/*
.carousel .slides {
  width: calc(100vw * 4);
}
@keyframes slide {
  0% { transform: translateX(0); }
  25% { transform: translateX(-100vw); }
  50% { transform: translateX(-200vw); }
  75% { transform: translateX(-300vw); }
  100% { transform: translateX(0); }
}
*/
/* ================================
   1. REGLAS GENERALES Y RESET
   ================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333333;
  background-color: #FFFFFF;
  line-height: 1.5;
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================================
   2. ENCABEZADO Y MENÚ
   ================================ */
header {
  width: 100%;
  background-color: #4A90E2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}
/* Aplica al elemento que contiene tu menú: header o nav */
header {
  /* Ruta a tu imagen de patrón */
  background-image: url("img/pattern.png");
  /* Repite en X e Y (o solo X con repeat-x) */
  background-repeat: repeat;     /* ó repeat-x para solo horizontal */
  /* Opcional: ajusta el tamaño del patrón */
  background-size: 25%;         /* o un valor como 50px 50px */
  background-position: center;
  
}

header h1 {
  font-size: 1.8rem;
  color: #FFFFFF;
  margin-bottom: 10px;
}

nav .menu {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin: 0;
}

nav .menu li a {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  background-color: #4A90E2;
  color: #FFFFFF;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
}

nav .menu li a:hover {
  background-color: #357ABD;
}

nav .menu li a.activo {
  background-color: #E0E0E0;
  color: #333333;
}

/* ================================
   3. TÍTULOS Y SUBTÍTULOS
   ================================ */
h2 {
  text-align: center;
  margin-bottom: 24px;
  color: #021bff;
}

.segment h3 {
  font-size: 1.4rem;
  margin-bottom: 16px;
  text-align: center;
  color: #333333;
}

/* ================================
   4. CUADRÍCULA DE PRODUCTOS (3 columnas)
   ================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Siempre 3 columnas en escritorio */
  grid-auto-rows: auto;
  gap: 20px;
  margin: 0 auto;
}

/* Tablets (≤800px): 2 columnas */
@media (max-width: 800px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móviles (≤500px): 1 columna */
@media (max-width: 500px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
   5. TARJETA DE PRODUCTO
   ================================ */
.product-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

/* Imagen del producto: 180×180 px y centrada */
.product-card .product-img {
  width: 180px;
  height: 180px;            /* Altura fija para uniformidad */
  object-fit: cover;        /* Recorta/escala sin deformar */
  border-radius: 4px 4px 0 0;
  margin-bottom: 12px;      /* Separación debajo */
  align-self: center;       /* Centra la imagen dentro del contenedor flex */
  display: block;
}

/* Nombre del producto (h4) */
.product-card h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #2c3e50;
}

/* Precio en quetzales */
.product-card .price {
  font-size: 1.05rem;
  font-weight: 600;
  color: #4A90E2;
  margin-bottom: 8px;
}

/* Descripción breve */
.product-card .description {
  font-size: 0.95rem;
  color: #555555;
  margin-bottom: 12px;
}

/* Lista de beneficios */
.product-card .benefits {
  list-style: disc;
  padding-left: 20px;
  text-align: left;
  margin-bottom: 12px;
  color: #444444;
  font-size: 0.9rem;
}

/* Botón “Agregar al carrito” */
.product-card .add-cart {
  background-color: #4A90E2;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 10px 0;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.product-card .add-cart:hover {
  background-color: #357ABD;
}
/* ================================
   ESTILOS PARA LA PÁGINA "Carrito de Compras"
   ================================ */

/* Botones del carrito */
.cart-btn {
  margin: 10px 5px;
  padding: 10px 20px;
  background-color: #4A90E2;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.cart-btn:hover {
  background-color: #357ABD;
}

/* Tabla del carrito */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.cart-table th,
.cart-table td {
  border: 1px solid #e0e0e0;
  padding: 8px;
  text-align: center;
}
.cart-table th {
  background-color: #f5f5f5;
  color: #333333;
}

/* Imagen en la tabla */
.cart-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

/* Input de cantidad */
.qty-input {
  width: 50px;
  padding: 4px;
  text-align: center;
  font-size: 1rem;
}

/* Botón de eliminar (X) */
.remove-btn {
  padding: 4px 8px;
  background-color: #d9534f;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.remove-btn:hover {
  background-color: #c9302c;
}

/* Texto total */
#cart-total {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Mensaje cuando el carrito está vacío */
#cart-container p {
  font-size: 1rem;
  color: #555555;
  margin: 20px 0;
}

/* Responsive para la tabla en pantallas pequeñas */
@media (max-width: 600px) {
  .cart-table th,
  .cart-table td {
    font-size: 0.9rem;
    padding: 6px;
  }
  .qty-input {
    width: 40px;
    font-size: 0.9rem;
  }
  .cart-img {
    width: 50px;
    height: 50px;
  }
  .cart-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}
/* ================================
   Botón flotante redondo de carrito
   ================================ */

.floating-cart {
  position: fixed;             /* Fijo en pantalla */
  bottom: 20px;                /* 20px desde el fondo */
  right: 20px;                 /* 20px desde la derecha */
  width: 60px;                 /* Diámetro */
  height: 60px;
  background-color: #4A90E2;   /* Azul similar a los botones */
  border-radius: 50%;          /* Forma circular */
  display: flex;               /* Centrar contenido (icono) */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Sombra sutil */
  z-index: 1000;               /* Por encima de todo */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  
}

.floating-cart:hover {
  background-color: #357ABD;   /* Azul más oscuro al pasar el cursor */
}

/* Si usas una imagen dentro, ajústala para que quepa */
.floating-cart img {
  width: 30px;
  height: 30px;
}
/* Contorno al botón flotante de carrito */
.floating-cart {
  /* tus estilos existentes… */
  border: 3px solid #fa03ee;   /* contorno blanco */
}

/* Opcional: cambia el color del contorno al pasar el cursor */
.floating-cart:hover {
  border-color: #ebfc04;
}

/* Si prefieres outline en vez de border */
.floating-cart {
  outline: 2px dashed #03ff24;  /* contorno dorado discontinuo */
  outline-offset: 4px;          /* espacio entre el botón y el outline */
}
/* ————————————————————————————————
   Botones flotantes de Contacto (WhatsApp / Telegram)
   ———————————————————————————————— */
.floating-group {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5000; /* bien por encima de todo */
}

/* Ubicaciones */
.floating-group.floating-whatsapp {
  bottom: 20px;
  left: 20px;
}
.floating-group.floating-telegram {
  bottom: 20px;
  right: 20px;
}

/* Etiqueta de texto sobre el botón */
.floating-label {
  background: rgb(255, 230, 2);
  color: #000000;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-bottom: 6px;
  text-align: center;
  white-space: nowrap;
}

/* Botón redondo */
.floating-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

/* Icono dentro del botón */
.floating-btn img {
  width: 50px;
  height: 50px;
}

/* Colores */
.floating-whatsapp .floating-btn {
  background-color: #25D366;
}
.floating-whatsapp .floating-btn:hover {
  background-color: #00ff66;
}
.floating-telegram .floating-btn {
  background-color: #0088cc;
}
.floating-telegram .floating-btn:hover {
  background-color: #00aeff;
}

/* ================================
   Modal de Instrucciones de Pago
   ================================ */
#paymentModal {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.7);
  align-items: center; justify-content: center;
  z-index: 3000;
}
#paymentModal .modal-inner {
  background: #fff;
  padding: 20px;
  max-width: 500px; width: 90%;
  border-radius: 6px;
  text-align: center;
  position: relative;
}
#paymentModal .modal-close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}
#paymentModal h2 {
  margin-bottom: 12px;
}
#paymentModal p {
  margin-bottom: 16px;
  font-weight: 600;
}
#paymentModal .payment-images {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
#paymentModal .payment-images img {
  width: 145px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/* Botón confirmar dentro del modal */
#paymentModal .confirm-btn {
  padding: 10px 20px;
  background-color: #4A90E2;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: larger;
}
#paymentModal .confirm-btn:hover {
  background-color: #357ABD;
}
/* ================================
   Modal de Formulario de Pedido
   ================================ */
#orderModal {
  display: none;
  position: fixed;
  top:0; left:0; width:100vw; height:100vh;
  background: rgba(0,0,0,0.7);
  align-items: center; justify-content: center;
  z-index: 4000;
}
#orderModal .modal-inner {
  background: #fff;
  padding:20px;
  max-width:500px; width:90%;
  border-radius:6px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
#orderModal .modal-close {
  position:absolute;
  top:10px; right:15px;
  font-size:1.5rem;
  cursor:pointer;
}
#orderModal form label {
  display:block;
  margin-top:12px;
  font-weight:500;
}
#orderModal form input,
#orderModal form textarea {
  width:100%;
  padding:8px;
  margin-top:4px;
  border:1px solid #ccc;
  border-radius:4px;
}
#orderModal .order-summary {
  margin:20px 0;
  text-align:left;
}
#orderModal .order-summary ul {
  list-style: none;
  padding:0;
}
#orderModal .order-summary li {
  margin-bottom:6px;
}
#orderModal .continue-btn {
  display:block;
  width:100%;
  padding:12px;
  background-color:#25D366;
  color:#fff;
  border:none;
  border-radius:4px;
  font-size:1rem;
  cursor:pointer;
  margin-top:auto;
}
#orderModal .continue-btn:hover {
  background-color:#08ee64;
}
/* Banner de contacto con relación 1600×400 y sin recortes */
.contact-banner {
  width: 100%;
  position: relative;
  /* padding-top = (alto/origen–alto ÷ ancho–origen) × 100% = (400/1600)*100 = 25% */
   aspect-ratio: 4 / 1;          /* relación ancho:alto = 4:1 */
  background-image: url("img/banner.jpg"); /* Ajusta ruta si es necesario */
  background-size: cover;     /* Muestra toda la imagen sin recortar */
  background-repeat: no-repeat; /* No repite */
  background-position: center;  /* Centra la imagen */
}
@media (max-width: 600px) {
  .contact-banner {
    aspect-ratio: 2 / 1;       /* más alto en móvil (relación 2:1) */
  }
}

  /* Estilos inline para los modales */

    /* Contenedor común para ambos modales */
    #paymentModal, #orderModal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(0,0,0,0.7);
      align-items: center; justify-content: center;
      z-index: 3000;
    }
    .modal-inner {
      background: #fff;
      padding: 20px;
      max-width: 500px; width: 90%;
      border-radius: 6px;
      position: relative;
      max-height: 90vh;
      overflow-y: auto;
      text-align: center;
    }
    .modal-close {
      position: absolute;
      top: 10px; right: 15px;
      font-size: 1.5rem; cursor: pointer;
    }

    /* Instrucciones de pago */
    #paymentModal .payment-images {
      display: flex; justify-content: space-around;
      margin: 20px 0;
    }
    #paymentModal .payment-images img {
      width: 100px; height: auto;
      border: 1px solid #ccc; border-radius: 4px;
    }
    #paymentModal .confirm-btn {
      padding: 10px 20px;
      background: #4A90E2; color: #fff;
      border: none; border-radius: 4px;
      cursor: pointer; margin-top: 10px;
    }
    #paymentModal .confirm-btn:hover {
      background: #357ABD;
    }

    /* Formulario de pedido */
    #orderModal form label {
      display: block; margin-top: 12px;
      font-weight: 500; text-align: left;
    }
    #orderModal form input,
    #orderModal form textarea {
      width: 100%; padding: 8px; margin-top: 4px;
      border: 1px solid #ccc; border-radius: 4px;
    }
    .order-summary { text-align: left; margin: 15px 0; }
    .order-summary ul { list-style: none; padding: 0; }
    .order-summary li { margin-bottom: 6px; }
    #orderModal .continue-btn {
      display: block; width: 100%; padding:10px;
      background: #25D366; color: #fff;
      border: none; border-radius: 4px;
      cursor: pointer; margin-bottom: 10px;
    }
    #orderModal .continue-btn:hover {
      background: #1ebe5d;
    }
    .price-q {
  font-size: 1.05rem;
  font-weight: 600;
  color: #4A90E2;
}

.price-usd {
  font-size: 1rem;
  color: #0212ff;
  margin-left: 8px;
}
.price-usd {
  display: block;
  font-size: 1rem;
  color: #0212ff;
  margin-top: 4px;
}
.site-footer {
  text-align: center;
  padding: 16px 0;
  background-color: #f8f8f8;
  font-size: 0.9rem;
  color: #555;
  margin-top: 40px;
}
.site-footer a {
  color: #4A90E2;
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}
/* Suscripción */
.subscribe-section {
  text-align: center;
  margin: 40px 0;
}
.subscribe-section .btn {
  padding: 12px 24px;
  background: #02ffdd;
  color: #000000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.subscribe-section .btn:hover {
  background: #ff01dd;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: #fff;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  border-radius: 6px;
  position: relative;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 1.5rem; cursor: pointer;
}
.modal-content form {
  margin-top: 20px;
}
.modal-content label {
  display: block;
  margin-bottom: 8px;
  text-align: left;
}
.modal-content input {
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.modal-content .btn {
  width: 100%;
}
/* scroll suave */
html { scroll-behavior: smooth; }

/* Sub-menú flotante */
.floating-submenu {
  position: fixed;
  top: 50%;
  right: 5px;
  transform: translateY(-30%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
}
.floating-submenu button {
  padding: 6px 10px;
  font-size: 15px;
  border: none;
  border-radius: 5px;
  background: #fdec028f;
  color: #21236d;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 3px solid #fa03ee; 
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.floating-submenu button:hover {
  background: #a1e0ff;
}
/* aspecto modo de pago */
.payment-modes {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.mode-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background: #4A90E2;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.mode-btn:hover {
  background: #357ABD;
}
.mode-content {
  margin-bottom: 20px;
}
/* Asegura espacio antes del botón y que quede dentro del modal */
.mode-content {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.confirm-btn {
  margin-top: auto;
  align-self: center;
}
/* Alinea todo el contenido bancario a la izquierda */
.bank-col {
  text-align: left;
}
.bank-col h4 {
  margin-bottom: 8px;
  font-size: 1rem;
  border-bottom: 2px solid #4A90E2;
  padding-bottom: 4px;
  }

/* 1) Modal en columna y con scroll interno si hace falta */
#paymentModal .modal-inner,
#orderModal .modal-inner {
  display: flex;
  flex-direction: column;
  max-height: 90vh;      /* ajusta según quieras */
  overflow-y: auto;
}

/* 3) Un poco de espacio extra si acaso */
.mode-content,
.payment-images,
.order-summary {
  margin-bottom: 1rem;
}
/* subir archivos */
#orderForm input[type="file"] {
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}
/* Asegúrate de que product-grid use CSS Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Estilo común para banners */
.ad-banner {
  overflow: hidden;
  border-radius: 6px;
}
.ad-banner img {
  width: 100%;
  aspect-ratio: 4 / 3;     /* “semi-cuadrado” */
  object-fit: cover;
  display: block;
}
/* ——— Animación de entrada fade-up ——— */
@keyframes bannerFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ——— Efecto de pulso suave (hover) ——— */
@keyframes bannerPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Aplica la animación de entrada a cada banner */
.ad-banner {
  overflow: hidden;
  border-radius: 6px;
  animation: bannerFadeIn 0.8s ease-out both;
}

/* Transición para imagen */
.ad-banner img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.5s ease;
}

/* Hover: zoom ligero + brillo */
.ad-banner:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Hover en todo el banner: pulso continuo */
.ad-banner:hover {
  animation: bannerPulse 2s ease-in-out infinite;
}
.ad-banner {
  overflow: hidden;
  border-radius: 6px;
  animation:
    bannerFadeIn 0.8s ease-out both,       /* entrada */
    bannerPulse 4s ease-in-out infinite;   /* pulso continuo */
}
.ad-banner {
  overflow: hidden;
  border-radius: 6px;
  animation:
    bannerFadeIn 0.8s ease-out both,       /* entrada */
    bannerPulse 4s ease-in-out infinite;   /* pulso continuo */
}


/* ————— RESPONSIVE PARA MÓVIL ————— */
@media (max-width: 768px) {
  /* Hace que cualquier grid de productos sea 1 columna */
  .product-grid {
    grid-template-columns: 1fr !important;
  }

  /* Banners ocupen toda la columna */
  .ad-banner {
    grid-column: span 1 !important;
  }

  /* Asegura que las imágenes llenen el ancho */
  .ad-banner img,
  .product-card .product-img {
    width: 100%;
    height: auto;
  }

  /* Oculta el sub-menú flotante en móvil */
  .floating-submenu {
    display: none !important;
  }

  /* Ajusta márgenes/paddings para mejor uso del espacio */
  main {
    padding: 0 10px;
  }
  .product-card,
  .ad-banner {
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .ad-banner {
    animation:
      bannerFadeIn 1.s ease-out both,
      bannerPulse 10s ease-in-out infinite; /* más lento en móvil */
  }
}