/* ========================================================
   RESET & BASE
======================================================== */

body {
  margin: 0;
  padding-top: 00px; /* Ajusta según la altura real de tu header */
  font-family: 'Roboto Mono', monospace;
  background-color: #f7f2e9;
  color: #444;
  overflow-x: hidden;
}
/* --- HEADER: El Techo de la Página --- */
/* --- HEADER: Estilo Isla Flotante (Apple Style) --- */
#main-header {
  position: fixed !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 95% !important;        /* Cambiamos ancho fijo por porcentaje */
  max-width: 900px !important;  /* Limite para que no se vea gigante en PC */
  z-index: 10000 !important;
  
  /* Efecto Glass */
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 20px !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  transition: transform 0.5s ease, opacity 0.5.s ease;
  transform: translateY(0); /* Estado visible */
}
.header-hidden {
  transform: translateY(-150%); /* Lo saca de la pantalla hacia arriba */
  opacity: 0;
}

/* Asegurar que el contenido interno sea una fila horizontal */
#main-header .menu {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Ajuste para que el menú interno se vea bien dentro de la isla */
#main-header .menu {
  width: 100% !important;
  padding: 5px 10px !important;
}

/* --- CARRITO: El Panel Lateral --- */
#cart-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 350px;
  height: 100vh;
  z-index: 10000; /* ¡Más alto que el header! */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px);
  padding: 100px 20px 20px 20px; /* Padding top grande para librar el header */
  transition: right 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
  display: block;
}

#cart-panel.open {
  right: 0;
}

/* Cambia las letras automáticamente a blanco al bajar */
header.scrolled .nav-links a,
header.scrolled .logo strong {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); /* Sutil sombra para que se lea perfecto */
}

/* Transición para el botón catálogo dentro del header */
header .catalog-btn {
  background: #2c5a40;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease, color 0.3s ease;
}

header.scrolled .catalog-btn {
  background: #ffffff;
  color: #2c5a40;
}
.menu {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 25px;
  padding: 0;
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-links a {
  color: #5a5a5a;
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #2c5a40;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  width: 32px;
  height: 32px;
}

.online-dot {
  width: 10px;
  height: 10px;
  background-color: #2c5a40;
  border-radius: 50%;
  animation: pulse 2s infinite;
  box-shadow: 0 0 6px #2c5a40;
}

@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}

.catalog-btn {
  background-color: #2c5a40;
  color: white;
  border: none;
  padding: 11px 24px;
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  transition: 0.3s;
}

.catalog-btn:hover {
  background-color: #23482e;
}

/* ========================================================
   HERO (SPLIT HERO - PREMIUM)
======================================================== */
.hero-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 160px 20px 100px 20px;
  max-width: 1200px;
  margin: auto;
}

.hero-text {
  flex: 1;
  max-width: 550px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e8e4db;
  border: 1px solid #dcd7cd;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  color: #2c5a40;
  padding: 8px 20px;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: default;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tag:hover {
  background: #2c5a40;
  color: #f7f2e9;
  border-color: #1e3d2d;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 10px rgba(44, 90, 64, 0.15);
}

.hero-title {
  margin: 10px 0 20px 0;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.hero-title .focus-word {
  font-size: 56px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -1px;
}

.hero-title .focus-word:nth-child(1) { color: #1e3d2d; }
.hero-title .focus-word:nth-child(2) { color: #2c5a40; }
.hero-title .focus-word:nth-child(3) { color: #8ba88b; }

.hero-subtitle {
  font-size: 20px;
  color: #222;
  margin-bottom: 10px;
  font-weight: 700;
}

.hero-description {
  font-size: 15px;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 25px;
}

.price {
  font-size: 28px;
  color: #2c5a40;
  font-weight: bold;
  margin: 15px 0;
}

.cta {
  background: linear-gradient(135deg, #2c5a40 0%, #1e3d2d 100%);
  color: white;
  padding: 16px 36px;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(44, 90, 64, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta:hover {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, #356d4d 0%, #224634 100%);
  box-shadow: 0 8px 25px rgba(44, 90, 64, 0.4);
}

.promo-btn-link {
  background: transparent;
  border: none;
  color: #9b9f1f;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  padding: 10px 0;
  position: relative;
  font-family: inherit;
  transition: color 0.3s ease;
}

.promo-btn-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 5px;
  left: 0;
  background-color: #7a7c18;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.promo-btn-link:hover { color: #7a7c18; }
.promo-btn-link:hover::after { transform: scaleX(1); transform-origin: bottom left; }

.hero-image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.image-bg-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(44, 90, 64, 0.08) 0%, rgba(247, 242, 233, 0) 70%);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.5s ease;
}

.hero-main-img {
  width: 100%;
  max-width: 420px;
  z-index: 2;
  transform: rotate(-1deg);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.image-frame {
  border: 6px solid white;
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hero-image-wrapper:hover .hero-main-img {
  transform: scale(1.04) rotate(1deg);
  box-shadow: 0 15px 35px rgba(44, 90, 64, 0.15);
}

/* ========================================================
   PRODUCTOS DESTACADOS GENERALES
======================================================== */
.product-showcase {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 60px auto;
  position: relative;
}

.product-visual img {
  width: 100%;
  max-width: 800px;
  animation: float 6s ease-in-out infinite;
}

.product-details { max-width: 420px; }

.overline {
  font-size: 12px;
  letter-spacing: 2px;
  color: #7a776d;
  text-transform: uppercase;
}

.product-details h2 { font-size: 32px; color: #111; }
.subtext { color: #666; }

@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ========================================================
   CATEGORÍAS INTERACTIVAS & CATÁLOGO
======================================================== */
.categories {
  display: flex;
  flex-wrap: wrap;          /* Permite que los botones bajen con elegancia en móviles */
  gap: 12px;
  justify-content: center;  /* Centrado matemático horizontal de los botones */
  align-items: center;
  margin: 30px auto 40px auto; /* El 'auto' a los lados fuerza el centrado del contenedor */
  padding: 0 15px;          /* Espacio de amortiguación para pantallas chicas */
  max-width: 100%;
  box-sizing: border-box;
}

.categories button {
  padding: 12px 22px;
  border: 1px solid rgba(44, 90, 64, 0.15);
  background: #e8e4db;
  color: #5a5a5a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.categories button.active-filter {
  background: #2c5a40 !important;
  color: #ffffff !important;
  border-color: #1e3d2d !important;
  box-shadow: 0 4px 12px rgba(44, 90, 64, 0.2);
  transform: scale(1.05);
}

.product-list {
  max-width: 1200px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  padding: 0 20px;
}

.card {
  background: #ffffff;
  padding: 24px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(228, 223, 212, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.card img {
  width: 100%;       /* Asegura que la imagen llene el ancho de la tarjeta */
  height: 250px;     /* Define una altura fija para el contenedor 1:1 */
  object-fit: cover; /* ESTA ES LA CLAVE: Recorta la imagen para llenar el espacio sin deformarla */
  object-position: center; /* Centra la imagen en caso de recorte */
  border-radius: 12px;
  margin-bottom: 15px;
}

.card h3 { font-size: 18px; color: #111; margin: 10px 0 5px 0; }
.card p { font-size: 16px; color: #2c5a40; font-weight: bold; margin-bottom: 20px; }

.card button {
  background: #e8e4db;
  color: #2c5a40;
  border: none;
  padding: 12px 28px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 30px;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}

.card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(44, 90, 64, 0.08); }
.card button:hover { background: #2c5a40; color: #ffffff; }

/* ========================================================
   SECCIÓN PREMIUM: LICOR DE MACADAMIA
======================================================== */
.product-showcase.gourmet-licor {
  background: radial-gradient(circle at 80% 20%, #1e3d2d 0%, #0d1f16 100%) !important;
  padding: 80px 40px !important;
  border-radius: 32px;
  max-width: 1200px;
  margin: 60px auto !important;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.gourmet-licor h2 { font-size: 36px !important; color: #ffffff !important; font-weight: 900; }
.gourmet-licor .subtext { color: #d1ded4 !important; line-height: 1.6; }

.gourmet-badge {
  background: rgba(232, 228, 219, 0.1);
  border: 1px solid rgba(232, 228, 219, 0.2);
  color: #e8e4db;
  padding: 6px 14px;
  font-size: 11px;
  text-transform: uppercase;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 20px;
}

.gourmet-notes { display: flex; gap: 15px; margin-bottom: 30px; }
.note-item { background: rgba(255, 255, 255, 0.05); padding: 8px 16px; border-radius: 10px; font-size: 12px; color: #e8e4db; }
.note-item span { color: #a3b899; font-weight: bold; }

.price-container { display: flex; align-items: baseline; gap: 15px; margin-bottom: 30px; }
.gourmet-licor .old-price { color: rgba(255, 255, 255, 0.4); text-decoration: line-through; }
.gourmet-licor .price { font-size: 32px !important; color: #e8e4db !important; }

.cta-gourmet {
  background: #e8e4db !important;
  color: #0d1f16 !important;
  border: none;
  padding: 16px 35px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: 0.3s ease;
}
.cta-gourmet:hover { background: #ffffff !important; transform: translateY(-3px); }

/* ========================================================\
   CARRITO LATERAL (ESTILO CRISTAL ESMERILADO DE iOS)
======================================================== */
.cart-panel {
  position: fixed;
  right: -420px; /* Escondido perfectamente al inicio */
  top: 0;
  width: 400px;
  height: 100%;
  
  /* El secreto: Fondo blanco con muy baja opacidad + Blur potente */
  background-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  
  /* Borde izquierdo brillante simulando el relieve del cristal */
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding: 40px 30px;
  box-sizing: border-box;
  z-index: 2000;
  
  /* Sombra profunda pero muy suave para dar sensación de flotado */
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.05);
  
  /* Curva de aceleración nativa de Apple para una apertura orgánica */
  transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cuando el carrito se activa con .open */
.cart-panel.open {
  right: 0;
}

.cart-header {
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(44, 90, 64, 0.1);
  padding-bottom: 15px;
}

.cart-panel h3 {
  font-size: 22px;
  color: #1e3d2d;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-subtitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8da494;
  margin: 0;
  font-weight: bold;
}

.close-cart-btn {
  position: absolute;
  top: 35px;
  right: 28px;
  background: rgba(44, 90, 64, 0.06);
  border: 1px solid rgba(44, 90, 64, 0.1);
  font-size: 18px;
  color: #1e3d2d;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-cart-btn:hover {
  background: #1e3d2d;
  color: #f7f2e9;
  transform: rotate(90deg);
}

.cart-items-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
  margin-bottom: 20px;
}

.cart-items-list::-webkit-scrollbar {
  width: 4px;
}
.cart-items-list::-webkit-scrollbar-thumb {
  background: rgba(44, 90, 64, 0.2);
  border-radius: 10px;
}

.cart-item {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: 18px;
  border-radius: 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cart-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 20px rgba(44, 90, 64, 0.04);
}

.cart-item-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cart-item-name {
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.4;
  max-width: 70%;
}

.cart-item-price {
  color: #2c5a40;
  font-weight: 900;
  font-size: 14px;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(44, 90, 64, 0.05);
  padding-top: 10px;
}

.qty-controls-wrapper {
  display: flex;
  align-items: center;
  background: rgba(44, 90, 64, 0.06);
  padding: 3px;
  border-radius: 30px;
  border: 1px solid rgba(44, 90, 64, 0.03);
}

.qty-btn {
  background: #ffffff;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 900;
  color: #2c5a40;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.qty-btn:hover {
  background: #2c5a40;
  color: white;
  transform: scale(1.05);
}

.qty-number {
  font-weight: 700;
  font-size: 13px;
  min-width: 32px;
  text-align: center;
  color: #1a1a1a;
}

.delete-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.delete-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.cart-footer {
  border-top: 1px solid rgba(44, 90, 64, 0.1);
  padding-top: 18px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 900;
  font-size: 18px;
  color: #1e3d2d;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.cart-total span:first-child {
  font-size: 12px;
  letter-spacing: 1px;
  color: #7a776d;
}
/* --- Glassmorphism Global --- */
:root {
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: 1px solid rgba(255, 255, 255, 0.3);
  --glass-blur: blur(20px);
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Aplicando el estilo al panel del carrito */
#cart-panel {
  position: fixed;
  top: 0;
  right: -400px; /* Oculto por defecto */
  width: 380px;
  height: 100vh;
  z-index: 1000;
  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 24px;
  /* Aplicamos el Glass */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: -10px 0 30px rgba(0,0,0,0.05);
}

#cart-panel.open {
  right: 0;
}

/* Tarjetas de productos */
.product-card, .product-showcase {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: var(--glass-border);
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

/* ========================================================
   MÉTODOS DE PAGO (OPCIONES INTEGRADAS MULTI-BOTÓN)
======================================================== */
.payment-methods-title {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #7a776d;
  margin-bottom: 12px;
}

.payment-buttons-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.pay-btn {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid rgba(44, 90, 64, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-family: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pay-icon {
  font-size: 20px;
}

.pay-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pay-text strong {
  font-size: 13px;
  color: #1a1a1a;
}

.pay-text span {
  font-size: 10px;
  color: #666;
}

.pay-arrow {
  font-size: 14px;
  color: #8da494;
  transition: transform 0.3s ease;
}

/* Estados Hover por tipo de botón */
.pay-btn:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(44, 90, 64, 0.05);
  border-color: #2c5a40;
}

.pay-btn:hover .pay-arrow {
  transform: translateX(3px);
}

.btn-whatsapp:hover {
  border-color: #25D366;
  background: rgba(37, 211, 102, 0.05);
}

.btn-mercadopago:hover {
  border-color: #009ee3;
  background: rgba(0, 158, 227, 0.05);
}

/* Contenedor Oculto de Datos SPEI con Glassmorphism */
.spei-details-box {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(44, 90, 64, 0.15);
  padding: 16px;
  border-radius: 14px;
  margin-top: 10px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.spei-details-box.spei-hidden {
  display: none;
}

.spei-details-box h5 {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: #1e3d2d;
  text-transform: uppercase;
}

.spei-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}

.spei-row span {
  color: #666;
}

.spei-row strong {
  color: #1a1a1a;
}

.clabe-text {
  letter-spacing: 0.5px;
  color: #2c5a40 !important;
}

.spei-instruction {
  font-size: 10px;
  color: #888;
  margin: 10px 0 0 0;
  line-height: 1.4;
  border-top: 1px solid rgba(44, 90, 64, 0.05);
  padding-top: 8px;
}

/* Botón Flotante para Abrir Carrito */
.cart-toggle {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #2c5a40;
  color: white;
  border: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(44, 90, 64, 0.3);
  z-index: 2100;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-toggle:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 25px rgba(44, 90, 64, 0.4);
}

.cart-panel.open ~ .cart-toggle {
  right: 405px;
  background: #cc4b4b;
  transform: rotate(180deg);
  box-shadow: 0 6px 20px rgba(204, 75, 75, 0.3);
}

/* ========================================================
   ISLA FLOTANTE DE AVISOS (APPLE STYLE)
======================================================== */
.promo-island-hidden { display: none; }
.promo-island-visible {
  position: fixed;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 61, 45, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f7f2e9;
  padding: 16px 24px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  width: 90%;
  max-width: 500px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: islandDrop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.island-content { display: flex; align-items: center; gap: 15px; }
.island-icon { font-size: 28px; }
.island-text h4 { margin: 0 0 4px 0; color: #9b9f1f; }
.island-text p { margin: 0; font-size: 13px; color: #e4dfd4; }
.code-highlight { background: rgba(155, 159, 31, 0.2); padding: 2px 6px; border-radius: 6px; }
.island-close-btn { background: transparent; border: none; color: rgba(247, 242, 233, 0.5); font-size: 22px; cursor: pointer; }

@keyframes islandDrop { 0% { top: -100px; opacity: 0; transform: translateX(-50%) scale(0.8); } 100% { top: 25px; opacity: 1; transform: translateX(-50%) scale(1); } }

/* ========================================================
   BARRA DE REDES SOCIALES FLOTANTES (IZQUIERDA FIJA)
======================================================== */
.social-floating-bar {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1500;
}

.social-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #444;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.social-icon svg {
  display: block;
  transition: transform 0.3s ease;
}

.social-icon.inst:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; color: white; border-color: transparent; }
.social-icon.fb:hover { background: #1877F2 !important; color: white; border-color: transparent; }
.social-icon.tk:hover { background: #000000 !important; color: white; border-color: #000; text-shadow: 1px 1px #ff0050, -1px -1px #00f2fe; }
.social-icon:hover svg { transform: scale(1.1); }

/* ========================================================
   FOOTER PREMIUM CON GLASSMORPHISM
======================================================== */
.main-footer-glass {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(228, 223, 212, 0.7);
  padding: 60px 20px 20px 20px;
  margin-top: 100px;
  position: relative;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(44, 90, 64, 0.1);
}

.footer-brand .logo { font-size: 24px; margin-bottom: 15px; }
.footer-tagline { font-size: 14px; color: #666; line-height: 1.5; max-width: 320px; }
.main-footer-glass h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; color: #1e3d2d; margin-bottom: 20px; font-weight: 900; }

.footer-links-group { display: flex; flex-direction: column; gap: 12px; }
.footer-links-group a { color: #5a5a5a; text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-links-group a:hover { color: #2c5a40; }

.footer-social-text p { font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 20px; }
.footer-social-icons { display: flex; gap: 15px; }
.footer-social-icons a { font-size: 13px; font-weight: bold; color: #2c5a40; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; }
.footer-social-icons a:hover { color: #1e3d2d; }

.footer-bottom { max-width: 1200px; margin: 20px auto 0 auto; text-align: center; font-size: 12px; color: #888; }

/* ========================================================
   RESPONSIVE MEDIA QUERIES (SOPORTE MÓVIL)
======================================================== */
@media (max-width: 900px) {
  .hero-product, .product-showcase { flex-direction: column; text-align: center; padding-top: 140px; }
  .hero-title { align-items: center; }
  .hero-title .focus-word { font-size: 42px; }
  .hero-actions { justify-content: center; }
}

@media (max-width: 768px) {
  .product-showcase.gourmet-licor { flex-direction: column !important; padding: 40px 20px !important; text-align: center; }
  .gourmet-notes, .price-container { justify-content: center; }
  .cta-gourmet { margin: 0 auto; width: 100%; }
  .social-floating-bar { display: none; }
  .footer-container { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .footer-brand .logo, .footer-social-icons { justify-content: center; }
  .footer-tagline { margin: 0 auto; }
  .cart-panel { width: 100%; right: -100%; } /* El carrito se adapta a pantalla completa en móviles */
  .cart-panel.open ~ .cart-toggle { right: 25px; bottom: 25px; }
}
/* Botón de eliminación Premium */
.delete-btn-premium {
  background: transparent;
  border: none;
  color: #a4a4a4;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.delete-btn-premium:hover {
  color: #cc4b4b;
  background: rgba(204, 75, 75, 0.08);
  transform: scale(1.08);
}

/* Etiquetas y alertas de descuento dentro del producto */
.cart-item-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 70%;
}

.badge-discount-inline {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #2c5a40;
  background: rgba(44, 90, 64, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
  width: fit-content;
  letter-spacing: 0.5px;
  animation: pulseBadge 2s infinite;
}

.price-discounted {
  color: #2c5a40 !important;
  font-weight: 900;
}

.item-with-promo {
  border-left: 3px solid #2c5a40 !important;
  padding-left: 15px !important;
}

@keyframes pulseBadge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}
/* ========================================================
   APARTADO DE PAGO EXCLUSIVO (ACORDEÓN DE LUJO)
======================================================== */
.payment-methods-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #7a776d;
  margin: 20px 0 12px 0;
  font-weight: bold;
  text-align: center;
}

.payment-buttons-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tarjeta Base Estilo Apple Wallet */
.pay-card-premium {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(44, 90, 64, 0.1);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.pay-card-premium:hover {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(44, 90, 64, 0.25);
  transform: translateY(-2px);
}

/* Encabezado de la Tarjeta */
.pay-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.pay-card-icon-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pay-card-icon {
  font-size: 18px;
}

.pay-card-title-text strong {
  display: block;
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 700;
}

.pay-card-title-text span {
  font-size: 10px;
  color: #7a776d;
}

.pay-card-arrow {
  font-size: 12px;
  color: #2c5a40;
  transition: transform 0.3s ease;
}

/* Cuerpo Expandible Oculto */
.pay-card-body {
  max-height: 0;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 11px;
  line-height: 1.5;
  color: #444;
}

.pay-card-body-content {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed rgba(44, 90, 64, 0.1);
}

/* Estado de Tarjeta Seleccionada / Activa */
.pay-card-premium.card-active {
  background: rgba(255, 255, 255, 0.85);
  border-color: #2c5a40;
  box-shadow: 0 8px 20px rgba(44, 90, 64, 0.08);
}

.pay-card-premium.card-active .pay-card-arrow {
  transform: rotate(180deg);
}

.pay-card-premium.card-active .pay-card-body {
  max-height: 200px; /* Suficiente espacio para el texto */
  opacity: 1;
}

/* Botón de acción refinado dentro de la tarjeta */
.btn-premium-checkout {
  background: #2c5a40;
  color: #f7f2e9;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
  transition: background 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-premium-checkout:hover {
  background: #1e3d2d;
}

/* Ajustes para la caja informativa SPEI interna */
.spei-details-premium {
  background: rgba(44, 90, 64, 0.04);
  border-radius: 8px;
  padding: 10px;
  margin-top: 8px;
}
.spei-details-premium div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.clabe-premium {
  letter-spacing: 0.5px;
  color: #1a1a1a;
}
/* ========================================================
   ESTILOS PREMIUM: BOTÓN MAESTRO Y TRANSICIONES ORGÁNICAS
======================================================== */

/* Control de despliegue suave del acordeón */
.checkout-accordion-hidden {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.checkout-accordion-visible {
  max-height: 500px; /* Espacio suficiente */
  opacity: 1;
  pointer-events: auto;
  margin-bottom: 15px;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Botón Maestro de Lujo */
.btn-master-lux {
  background: #2c5a40;
  color: #f7f2e9;
  border: none;
  border-radius: 30px; /* Bordes totalmente redondeados e integrados */
  padding: 16px 24px;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(44, 90, 64, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-master-lux:hover {
  background: #1e3d2d;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(44, 90, 64, 0.25);
}

.btn-master-lux:active {
  transform: translateY(0);
}

/* Ajuste fino para el scroll del carrito en móvil */
@media (max-width: 480px) {
  .cart-panel {
    width: 100vw;
  }
}


.btn-master-lux:hover {
  background: #1e3d2d;
  box-shadow: 0 6px 20px rgba(44, 90, 64, 0.25);
  transform: translateY(-1px);
}

/* Indicadores de marca minimalistas dentro de las tarjetas */
.pay-card-brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin-top: 4px;
}
.dot-wa { background-color: #25D366; }
.dot-mp { background-color: #009EE3; }
.dot-spei { background-color: #cca44b; } /* Tono dorado lujoso */

/* Modificación de la tarjeta premium para el texto largo */
.pay-card-premium .pay-card-title-text span {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 4px;
  color: #666;
  font-weight: normal;
}

/* Tarjeta Premium Seleccionada activa */
.pay-card-premium.card-active {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #2c5a40 !important;
  box-shadow: 0 6px 15px rgba(44, 90, 64, 0.08);
}

/* Animación de alerta refinada si no seleccionan método */
@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
/* ========================================================
   REESTRUCTURACIÓN DE RITUAL DE CARRITO MINIMALISTA LUXURY
======================================================== */

/* Configuración del contenedor principal para scroll inteligente */
#cart-panel {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Ocupa el alto total de la pantalla */
  overflow: hidden; /* Evita que el panel entero se rompa */
}

/* Área central de productos deslizable */
.cart-items-list {
  flex: 1; /* Absorbe el espacio disponible entre cabecera y pie */
  overflow-y: auto; /* Activa el scroll solo aquí */
  padding-right: 5px;
}

/* Estilo de barra de scroll sutil y elegante */
.cart-items-list::-webkit-scrollbar {
  width: 4px;
}
.cart-items-list::-webkit-scrollbar-thumb {
  background: rgba(44, 90, 64, 0.15);
  border-radius: 4px;
}

/* Pie de página fijo en la base del carrito */
.cart-footer {
  border-top: 1px solid rgba(44, 90, 64, 0.08);
  padding-top: 15px;
  background: transparent;
  margin-top: auto;
}

/* --- Reducción de Ruido Visual en los Productos --- */
.cart-item-premium-clean {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: transparent !important; /* Adiós a los bloques blancos pesados */
  box-shadow: none !important;
  border-radius: 0 !important;
}

.cart-item-left-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 60%;
}

.cart-item-clean-name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Badge de descuento minimalista tipo pasarela */
.badge-clean-discount {
  font-size: 10px;
  color: #2c5a40;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.cart-item-right-side {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Controles de cantidad simplificados y esbeltos */
.qty-wrapper-clean {
  display: flex;
  align-items: center;
  background: rgba(44, 90, 64, 0.05);
  border-radius: 20px;
  padding: 2px 6px;
}

.qty-btn-clean {
  background: transparent;
  border: none;
  font-size: 14px;
  color: #2c5a40;
  cursor: pointer;
  padding: 2px 8px;
  font-weight: bold;
}

.qty-number-clean {
  font-size: 12px;
  font-family: 'Roboto Mono', monospace;
  font-weight: bold;
  min-width: 16px;
  text-align: center;
}

.price-clean {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: bold;
  color: #1a1a1a;
  min-width: 80px;
  text-align: right;
}

/* Ocultar descripciones de los métodos de pago inicialmente para reducir altura */
.pay-card-premium .pay-card-title-text span {
  display: none; /* Se oculta el texto largo por defecto */
}

/* Mostrar la descripción refinada SOLO cuando la tarjeta se active */
.pay-card-premium.card-active .pay-card-title-text span {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 6px;
  color: #666;
  animation: fadeInClean 0.3s ease;
}

@keyframes fadeInClean {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
/* --- Botón Basurero Estilo Minimalista Lux --- */
.delete-btn-lux {
  background: transparent;
  border: none;
  color: #c2beb4; /* Tono tenue para que no compita visualmente */
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
  margin-left: 4px;
}

.delete-btn-lux:hover {
  color: #8b2c2c; /* Cambia a un rojo quemado muy sutil y elegante al pasar el cursor */
  transform: scale(1.08);
}

/* Ajuste móvil para asegurar alineación perfecta de la línea de producto */
@media (max-width: 480px) {
  .cart-item-right-side {
    gap: 10px !important; /* Espaciado más compacto en pantallas pequeñas */
  }
  .price-clean {
    min-width: 65px !important;
  }
}
/* ========================================================
   REDISEÑO DE BARRA SUPERIOR ULTRA-MINIMALISTA (1, 2 y 3)
======================================================== */
#main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(44, 90, 64, 0.05);
  transition: all 0.3s ease;
}

.menu {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 1. Enlaces Curados */
.nav-links {
  display: flex !important;       /* Pone los <li> en horizontal */
  list-style: none;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
  font-family: system-ui, -apple-system, sans-serif;
}

.nav-links a:hover {
  color: #2c5a40;
}

/* Grupo de acciones derecha */
.nav-actions-group {
  display: flex !important;       /* Asegura que el botón y la lista sean fila */
  align-items: center;            /* Alineación vertical */
  gap: 20px;                      /* Espacio entre botones y links */
}

/* 2. Botón Destacado Refinado */
.catalog-btn-nav {
  background: #2c5a40;
  color: #f7f2e9;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Roboto Mono', monospace;
}

.catalog-btn-nav:hover {
  background: #1e3d2d;
  transform: translateY(-1px);
}

/* 3. Botón de Carrito con Contador Flotante */
.cart-btn-nav {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.cart-icon-nav {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.cart-btn-nav:hover .cart-icon-nav {
  transform: scale(1.1);
}

/* Burbuja del Contador Silencioso */
.cart-counter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #2c5a40;
  color: #f7f2e9;
  font-size: 9px;
  font-weight: bold;
  font-family: 'Roboto Mono', monospace;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  box-shadow: 0 2px 5px rgba(44, 90, 64, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Responsivo óptimo para celulares */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Esconde los enlaces en móvil para evitar colapsos toscos */
  }
  .catalog-btn-nav {
    padding: 6px 12px;
    font-size: 10px;
  }
}
/* ========================================================
   REPARACIÓN FORZADA DEL CARRITO EN MÓVILES
======================================================== */
@media (max-width: 768px) {
  #cart-panel {
    width: 100% !important;
    right: -100% !important;
    box-sizing: border-box !important;
  }
  #cart-panel.open {
    right: 0 !important;
  }
}
/* ========================================================
   REPARACIÓN DE EMERGENCIA - CARRITO EN CELULARES (100%)
======================================================== */
@media (max-width: 768px) {
  /* Forzamos al contenedor principal a ocupar todo el ancho en móvil */
  div#cart-panel.cart-panel {
    width: 100% !important;
    max-width: 100vw !important;
    right: -100% !important; /* Escondido a la derecha */
    box-sizing: border-box !important;
    transition: right 0.3s ease-in-out !important;
    position: fixed !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 99999 !important;
  }

  /* Cuando JS activa la clase .open, obligamos a que aparezca */
  div#cart-panel.cart-panel.open {
    right: 0 !important;
  }
  
  /* Ajuste opcional para que los elementos internos respiren bien en pantallas chicas */
  .cart-items-list {
    padding: 10px !important;
  }
}
/* ========================================================
   REPARACIÓN DE LA BARRA DE NAVEGACIÓN Y LA ISLA DE PROMO
======================================================== */

/* 1. Corrección de la Barra Superior: para que no se amontone ni se desborde */
#main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important; /* Asegura que la barra siempre esté al frente de la página */
  box-sizing: border-box !important;
}

#main-header .menu {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  max-width: 1200px !important; /* Limita el ancho para que no se pegue a las orillas en pantallas enormes */
  margin: 0 auto !important;
  padding: 10px 24px !important;
  flex-wrap: nowrap !important; /* Evita que los elementos se brinquen de renglón */
}

/* 2. Ajuste de la Isla Flotante: Le bajamos el nivel de capa (z-index) y la centramos */
#promo-island {
  z-index: 999 !important; /* Un nivel abajo del header para que NUNCA tape el menú */
  position: fixed !important;
  top: 85px !important; /* La bajamos un poco más para que flote limpiamente abajo de la barra */
  left: 50% !important;
  transform: translateX(-50%) !important; /* Centrado perfecto en la pantalla */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important; /* Sombra premium para que flote con estilo */
}

/* Evitamos colisiones si la pantalla es más chica */
@media (max-width: 900px) {
  #promo-island {
    width: 90% !important;
    max-width: 450px !important;
    top: 80px !important;
  }
}
/* ========================================================
   REESTRUCTURACIÓN COMPLETA Y REPARACIÓN DEL HEADER
======================================================== */

#main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.95) !important; /* Fondo blanco sutil traslúcido */
  backdrop-filter: blur(10px) !important; /* Efecto premium de vidrio esmerilado */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; /* Línea ultra-fina minimalista abajo */
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.02) !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  border-radius: 0 !important; /* ELIMINA cualquier borde redondeado viejo que la corte */
  margin: 0 !important;
  padding: 0 !important;
}

#main-header .menu {
  display: flex !important;
  justify-content: space-between !important; /* Separa Logo a la izq, Enlaces al centro, Botones a la der */
  align-items: center !important;
  width: 100% !important;
  max-width: 1300px !important; /* Zona de contenido elegante */
  margin: 0 auto !important; /* Centra el contenedor del menú perfectamente */
  padding: 14px 24px !important; /* Espaciado interno lujoso */
  box-sizing: border-box !important;
}

/* Forzamos a que los tres bloques internos se organicen bien */
#main-header .logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#main-header .nav-links {
  display: flex !important;
  gap: 30px !important; /* Espacio premium entre enlaces */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main-header .nav-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important; /* Separa el botón de 'Ver Catálogo' del carrito */
}

/* Ajuste de la Isla de Promociones para que flote limpia abajo de la nueva barra */
#promo-island {
  z-index: 999 !important;
  position: fixed !important;
  top: 90px !important; /* Separación perfecta del nuevo header estilizado */
  left: 50% !important;
  transform: translateX(-50%) !important;
}/* ========================================================
   UNIFICACIÓN DEFINITIVA Y SOLUCIÓN DEL HEADER
======================================================== */

header, #main-header, header.scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important; /* Quita el desvío del 50% que la partía a medias */
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important; /* Borra las esquinas de iPhone que recortaban la barra */
  margin: 0 !important;
  box-sizing: border-box !important;
  background-color: rgba(255, 255, 255, 0.95) !important; /* Fondo cristalino uniforme */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: none !important;
  border-bottom: 1px solid rgba(44, 90, 64, 0.08) !important; /* Línea inferior sutil */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  z-index: 10000 !important; /* Máxima prioridad de capa */
}

/* Alineamos el menú interno perfectamente centrado de extremo a extremo */
header .menu, #main-header .menu {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1200px !important; /* Contenedor elegante */
  margin: 0 auto !important; /* Centrado matemático del contenido */
  padding: 12px 24px !important;
  box-sizing: border-box !important;
}

/* Reajustamos la Isla de Promoción para que no choque con la barra estirada */
#promo-island {
  position: fixed !important;
  top: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 550px !important;
  z-index: 99999 !important;
  
  /* Efecto Glass Laminado (Vidrio Esmerilado) */
  background: rgba(255, 255, 255, 0.6) !important; 
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  
  /* Estilo Apple: bordes suaves y sombra tenue */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 24px !important; /* Más redondeado estilo iOS */
  padding: 12px 20px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
  
  /* Tipografía y color */
  color: #1d1d1f !important;
  display: block; /* Aseguramos que sea visible */
}

/* Ajuste del botón de cierre para que se vea refinado */
.island-close-btn {
  background: rgba(0,0,0,0.05) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #555 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.island-close-btn:hover {
  background: rgba(0,0,0,0.1) !important;
}

/* --- CORRECCIÓN FINAL: CAPAS Y POSICIONAMIENTO --- */

/* 1. Header: Siempre encima, pero sin crear conflicto con el carrito */
#main-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  /* Efecto Glass Laminado */
  background: rgba(255, 255, 255, 0.6) !important; /* Base translúcida */
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  
  /* Estilo Apple */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 10px 5% !important;
  transition: all 0.3s ease !important;
}

/* Para que los enlaces se vean elegantes */
.nav-links a {
  color: #1d1d1f !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 8px 15px !important;
  border-radius: 8px !important;
  transition: background 0.3s ease !important;
}

.nav-links a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* 2. Carrito: Prioridad máxima y espacio para no quedar debajo */
#cart-panel {
  position: fixed !important;
  top: 0 !important;
  right: -400px !important; /* Escondido */
  width: 350px !important;
  height: 100vh !important;
  z-index: 10000 !important; /* ¡Más alto que el header! */
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(30px) !important;
  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  padding-top: 120px !important; /* Empuja el contenido para que empiece abajo del header */
  box-shadow: -10px 0 30px rgba(0,0,0,0.15) !important;
}

#cart-panel.open {
  right: 0 !important;
}
/* --- ESTILO PREMIUM PARA EL CARRITO --- */
.cart-item-premium-clean {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.cart-item-clean-name {
  font-weight: 600;
  color: #2c5a40;
}

.qty-wrapper-clean {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0f0f0;
  padding: 5px 10px;
  border-radius: 12px;
}

.qty-btn-clean {
  border: none;
  background: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #2c5a40;
}

.delete-btn-lux {
  background: none;
  border: none;
  color: #ff4d4d;
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: 10px;
}

/* Animación de entrada para el icono */
.pop {
  animation: pop-animation 0.3s ease;
}

@keyframes pop-animation {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Corrección para que el contador no se pierda dentro del botón */
.cart-btn-nav {
position: fixed !important; /* Ahora el botón flota en la pantalla */
  top: 20px;                  /* Ajusta a la altura que quieras */
  right: 20px;                /* Ajusta la distancia del borde derecho */
  z-index: 9999 !important;   /* Para que siempre esté por encima de todo */

 background: white;
  padding: 10px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Sombra para efecto flotante */
  border: 1px solid #e0e0e0;
  cursor: pointer;
  
  /* Mantén tus estilos previos del badge */
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.cart-counter-badge {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  background: #2c5a40 !important;
  color: white !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: none;
}
#promo-island {
  position: fixed !important;
  top: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 500px !important;
  z-index: 99999 !important;
  background: rgba(44, 90, 64, 0.95) !important;
  color: white !important;
  border-radius: 20px !important;
  padding: 15px 20px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
  display: none; /* Asegura que se vea al inicio */
}

.island-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.island-close-btn {
  background: none !important;
  border: none !important;
  color: white !important;
  font-size: 24px !important;
  cursor: pointer !important;
  margin-left: auto; /* Empuja el botón a la derecha */
}
/* --- ISLA FLOTANTE DEFINITIVA --- */
#main-header {
  position: fixed !important;
  top: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  
  /* Esto obliga a que sea una cápsula, no una barra estirada */
  width: auto !important; 
  min-width: 85% !important; /* Adaptable a móviles */
  max-width: 1000px !important;
  
  z-index: 10000 !important;
  
  /* Efecto Glassmorphism refinado */
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  
  /* Borde Apple-like */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 60px !important; 
  
  /* Sombra elegante y sutil */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
  
  padding: 10px 30px !important;
  box-sizing: border-box !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Forzar que el menú sea siempre una línea horizontal */
#main-header .menu {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}
/* --- ESTILO CRISTAL PARA EL CARRITO --- */
#cart-panel {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* --- BOTÓN DE PAGAR ELEGANTE --- */
.checkout-btn {
  width: 100%;
  padding: 16px;
  margin-top: 25px;
  background: linear-gradient(135deg, #2c5a40 0%, #3d7a58 100%);
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(44, 90, 64, 0.3);
  transition: all 0.3s ease;
  text-align: center;
}

.checkout-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(44, 90, 64, 0.4);
}

/* Tarjetas de pago estilo Glass */
.pay-card-premium {
  padding: 15px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pay-card-premium:hover {
  background: rgba(44, 90, 64, 0.05);
  border-color: #2c5a40;
}

/* Estado activo (cuando el cliente selecciona una opción) */
.pay-card-premium.active {
  border: 2px solid #2c5a40;
  background: rgba(255, 255, 255, 0.8);
}

.pay-card-title-text strong { display: block; margin-bottom: 4px; color: #1a1a1a; }
.pay-card-title-text span { font-size: 0.8rem; color: #444; line-height: 1.4; }

/* Mensaje de carrito vacío */
.empty-cart-message {
  text-align: center; 
  padding: 60px 20px; 
  color: #2c5a40;
}
.empty-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 10px; }

/* Transición suave del acordeón */
.checkout-accordion-hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.checkout-accordion-visible {
  max-height: 500px; /* Suficiente para tus 3 opciones */
  opacity: 1;
}

/* Efecto Hover en métodos de pago */
.pay-card-premium {
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(44, 90, 64, 0.2);
  margin-bottom: 10px;
  transition: transform 0.2s, background 0.3s;
}
.pay-card-premium:hover {
  background: rgba(44, 90, 64, 0.05);
  transform: translateY(-2px);
}
.back-to-cart-btn {
  background: none;
  border: none;
  color: #2c5a40;
  cursor: pointer;
  font-size: 0.9rem;
  margin-bottom: 10px;
  padding: 5px 0;
  text-decoration: underline;
  opacity: 0.7;
}

.back-to-cart-btn:hover {
  opacity: 1;
}
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.product-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-10px);
}

.card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 15px;
}

.add-btn {
  background: #2c5a40;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  margin-top: 10px;
}

/* ========================================================
   SECCIÓN PREMIUM GLASS: NUEVO PRODUCTO
======================================================== */
.new-product-glass-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  max-width: 1300px;
  margin: 100px auto;
  padding: 80px 60px;
  border-radius: 40px;
  overflow: hidden;
  
  /* --- Fondo Base y Efecto Glass --- */
  background: radial-gradient(circle at 10% 20%, rgba(228, 223, 212, 0.45) 0%, rgba(247, 242, 233, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
  
  /* --- Vidrio Esmerilado (iOS style) --- */
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
}

/* --- TEXTO DE IZQUIERDA --- */
.glass-text-content {
  flex: 1.1;
  max-width: 600px;
  display: flex;
  flex-direction: column;
}

.gourmet-tag {
  display: inline-block;
  background: rgba(44, 90, 64, 0.1);
  color: #2c5a40;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  border: 1px solid rgba(44, 90, 64, 0.15);
}

.glass-hero-title {
  margin: 0 0 15px 0;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* Sofisticación Serif */
.serif-word {
  font-family: 'Playfair Display', serif; /* Añade esta font a tu HTML si no la tienes */
  font-size: 60px;
  color: #1e3d2d;
  font-style: italic;
  font-weight: 400;
}

/* Tono Mono Kambena */
.mono-word {
  font-family: 'Roboto Mono', monospace;
  font-size: 38px;
  color: #2c5a40;
  font-weight: 700;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-top: -5px;
}

.glass-hero-subtitle {
  font-size: 22px;
  color: #1a1a1a;
  font-weight: 600;
  margin-bottom: 25px;
}

.glass-product-details p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* --- Botón Maestro y Precio Glass --- */
.glass-action-container {
  display: flex;
  align-items: center;
  gap: 30px;
  border-top: 1px solid rgba(44, 90, 64, 0.1);
  padding-top: 25px;
}

.glass-price {
  font-size: 28px;
  color: #1e3d2d;
  font-weight: bold;
}
.glass-price span {
  font-size: 12px;
  color: #666;
  font-weight: normal;
}

.cta-master-glass {
  background: #1e3d2d;
  color: #f7f2e9;
  border: none;
  border-radius: 30px;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(30, 61, 45, 0.2);
}

.cta-master-glass:hover {
  background: #2c5a40;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(30, 61, 45, 0.3);
}

/* --- VISUAL DE DERECHA --- */
.glass-visual-content {
  flex: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.macadamia-bottle-glass {
  width: 100%;
  max-width: 450px;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease;
}

.macadamia-bottle-glass:hover {
  transform: scale(1.03);
}

.glass-annotation {
  position: absolute;
  bottom: 0;
  right: -30px;
  font-size: 11px;
  color: #7a776d;
  font-style: italic;
  text-transform: lowercase;
  opacity: 0.7;
}
.catalog-island {
  position: relative;
  margin: 40px auto;
  padding: 20px 40px;
  width: fit-content;
  border-radius: 50px;
  /* --- NUEVO: Centrado con Flexbox --- */
  display: flex;
  flex-direction: column; /* Apila el texto y los filtros verticalmente */
  align-items: center;    /* Centra horizontalmente */
  text-align: center;
  /* Efecto Vidrio (Apple Style) */
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* Sombra para que "flote" */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  
  overflow: hidden; /* Necesario para el borde animado */
  z-index: 10;
}
.filter-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  color: #2c5a40;
  margin: 5px;
  transition: all 0.3s;
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
/* Clase que aplicaremos al desvanecer */
.fade-out {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none; /* Para que no se pueda clickear mientras desaparece */
}

#promo-island {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}
/* Esto ajustará cualquier imagen que esté dentro de una tarjeta de producto */
.product-card img {
  width: 100%;          /* Ocupa el ancho completo de la tarjeta */
  height: 250px;        /* Define la altura fija para que sea un cuadrado */
  object-fit: contain;  /* Muestra toda la imagen sin recortar nada */
  background-color: #f7f2e9; /* Color de fondo para rellenar si la imagen no es cuadrada */
  border-radius: 12px;  /* Bordes redondeados */
  display: block;       /* Evita espacios extraños abajo */
  margin-bottom: 15px;
}

/* Asegúrate de que el contenedor de la tarjeta tenga un ancho definido si es necesario */
.product-card {
  /* Aquí puedes poner tus estilos actuales de la tarjeta */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 15px;
  /* ... otros estilos que ya tengas ... */
}
@media (max-width: 768px) {
  #main-header {
    width: 95% !important;
    min-width: unset !important;
    padding: 15px !important;
    border-radius: 20px !important;
  }

  /* Contenedor principal del header */
  #main-header .menu {
    display: flex;
    flex-direction: column; /* Apila todo en columna */
    gap: 15px;
    align-items: center;
  }

  /* Nivel 1: Logo e Inicio/Contacto en una línea */
  .nav-links {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* Nivel 2: Botones de acción abajo */
  .header-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 10px;
  }
}
/* Catálogo Minimalista y Compacto */
#product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Tarjetas pequeñas */
  gap: 15px;
  padding: 15px;
  max-width: 900px;
  margin: 0 auto;
}

.product-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.9);
}

.product-card img {
  width: 100%;
  height: 100px; /* Imagen más pequeña para que quepan más */
  object-fit: contain;
  margin-bottom: 8px;
}

.product-card h3 {
  font-size: 0.85rem;
  margin: 5px 0;
  color: #2c5a40;
}

.product-card button {
  background: #2c5a40;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
}
/* Estilo estándar para PC (fuera de bloques @media) */
#product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Tarjetas grandes en PC */
  gap: 30px;
  padding: 20px;
}

.product-card img {
  width: 100%;
  height: 250px; /* Tamaño grande original */
  object-fit: contain;
}
@media (max-width: 768px) {
  /* Header compacto en móvil */
  #main-header {
    width: 95% !important;
    min-width: unset !important;
  }

/* 1. ESTILO PARA PC (Reglas generales que afectan a todos) */
#product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 20px;
}

.product-card img {
  width: 100%;
  height: 250px; 
  object-fit: contain;
}

}
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  color: #25d366;
  padding: 12px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: popIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.whatsapp-float:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(37, 211, 102, 0.3);
  background: #25d366;
  color: white;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* 2. Media query para móviles (Ajustes de catálogo y botón juntos) */
@media (max-width: 768px) {
  #product-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .product-card {
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .product-card img {
    height: 100px !important;
    object-fit: contain;
  }

  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    font-size: 0.8rem;
  }
}
@media (max-width: 768px) {
  /* Asegura que el contenedor del nuevo producto sea vertical */
  #new-product-hero {
    display: flex !important;
    flex-direction: column !important; /* Texto arriba, imagen abajo */
    padding: 20px !important;
    height: auto !important; /* Importante: que crezca según el contenido */
  }

  .glass-visual-content {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 20px !important;
    position: relative !important;
  }

  .macadamia-bottle-glass {
    width: 80% !important; /* Ajusta este % a tu gusto */
    max-width: 300px !important;
    height: auto !important; /* Mantiene la proporción */
    display: block !important;
  }
}
/* Eliminar márgenes excesivos entre secciones principales */
main section, 
.hero-product, 
.product-showcase, 
.new-product-glass-hero, 
.catalog-section {
  margin-bottom: 20px !important; /* Reduce de 40px/60px a 20px */
  margin-top: 20px !important;
}

/* Ajuste específico para la "Isla" que suele tener márgenes grandes */
.catalog-island {
  margin: 20px auto !important; /* Ajuste del margen superior e inferior */
}

/* COTIZADOR HORECA */
.horeca-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.horeca-header {
  text-align: center;
  margin-bottom: 25px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
}

.form-grid input, .form-grid select {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
}

.horeca-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.price-hint {
  font-size: 0.8rem;
  color: #666;
}

.item-qty input {
  width: 90px;
  padding: 8px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.horeca-summary {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
}

.btn-horeca-submit {
  background-color: #2c5a40;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-horeca-submit:hover {
  background-color: #1e3d2b;
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .horeca-summary {
    flex-direction: column;
    gap: 15px;
  }
}
html {
  scroll-behavior: smooth;
}

/* Opcional: añade espacio arriba para que el header fijo no tape el título */
#cotizador-horeca {
  scroll-margin-top: 100px;
}
.tier-badge-info {
  display: none;
  margin-top: 5px;
  font-size: 0.8rem;
  color: #2e7d32;
  background-color: #e8f5e9;
  border: 1px solid #c8e6c9;
  padding: 4px 8px;
  border-radius: 6px;
  width: fit-content;
}
.btn-horeca-pdf {
  background-color: #2e7d32;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-horeca-pdf:hover {
  background-color: #1b5e20;
}
/* Selector de cantidad con botones + y - */
.item-qty {
  display: flex;
  align-items: center;
  gap: 5px;
}

.item-qty input {
  width: 50px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px 0;
  font-weight: bold;
  font-size: 1rem;
}

/* Quitar flechas por defecto de los inputs number */
.item-qty input::-webkit-outer-spin-button,
.item-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-btn {
  width: 32px;
  height: 32px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.qty-btn:hover {
  background-color: #2e7d32;
  color: white;
  border-color: #2e7d32;
}

/* Grid de Tarjetas HORECA */
.horeca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.horeca-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.horeca-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.horeca-card-img {
  width: 100%;
  height: 180px;
  background-color: #f9f9f9;
  overflow: hidden;
}

.horeca-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.horeca-card-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.horeca-card-body h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: #333;
}

.price-hint-card {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.3;
}

.item-qty-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
}
/* Animación Pop al activar badge de descuento */
@keyframes popDiscount {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.tier-badge-info {
  animation: popDiscount 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.15);
}
/* Transición suave en las fotos e interacción 3D en tarjetas */
.horeca-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.horeca-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: #a5d6a7;
}

.horeca-card-img img {
  transition: transform 0.4s ease;
}

.horeca-card:hover .horeca-card-img img {
  transform: scale(1.06); /* Zoom sutil a la foto */
}
@media (max-width: 768px) {
  .horeca-summary {
    position: sticky;
    bottom: 15px;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    border: 1px solid rgba(46, 125, 50, 0.2);
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.95);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.qty-btn:active {
  transform: scale(0.9);
  background-color: #1b5e20;
  color: #fff;
}
/* Fondo Gradiente Animado Sutil */
body {
  background: linear-gradient(-45deg, #f4f7f4, #e8f5e9, #f9fbf9, #edf7ed);
  background-size: 400% 400%;
  animation: organicGradient 18s ease infinite;
}

@keyframes organicGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Esferas de luz suave al fondo */
.horeca-container::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 5%;
  width: 300px;
  height: 300px;
  background: rgba(46, 125, 50, 0.08);
  filter: blur(90px);
  border-radius: 50%;
  z-index: -1;
}

.horeca-container::after {
  content: "";
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 350px;
  height: 350px;
  background: rgba(129, 199, 132, 0.12);
  filter: blur(100px);
  border-radius: 50%;
  z-index: -1;
}
/* Fondo relajado con aguacatitos reales (forma de pera + semilla) */
body {
  background-color: #f8faf8;
  /* SVG con silueta real de aguacate cortado a la mitad */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%232e7d32' stroke-width='1.2' stroke-opacity='0.11'%3E%3C!-- Cáscara exterior (Forma de pera) --%3E%3Cpath d='M45 15 C38 15 34 22 32 30 C28 38 24 46 24 54 C24 67 33 74 45 74 C57 74 66 67 66 54 C66 46 62 38 58 30 C56 22 52 15 45 15 Z'/%3E%3C!-- Pulpa interior --%3E%3Cpath d='M45 19 C40 19 37 25 35 32 C32 39 28 46 28 53 C28 63 35 69 45 69 C55 69 62 63 62 53 C62 46 58 39 55 32 C53 25 50 19 45 19 Z' stroke-dasharray='2 2'/%3E%3C!-- Semilla / Hueso prominente --%3E%3Ccircle cx='45' cy='54' r='9' fill='%232e7d32' fill-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
  
  /* Movimiento ultra lento para no marear */
  animation: avoFloat 50s linear infinite;
}

@keyframes avoFloat {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 200px;
  }
}

/* ========================================================
   SECCIÓN HORECA RESPONSIVA (MÓVILES Y TABLETS)
======================================================== */

/* Estilos Base para HORECA */
.horeca-container {
  max-width: 1000px;
  margin: 60px auto;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.form-grid input, 
.form-grid select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(44, 90, 64, 0.2);
  background: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

.horeca-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(44, 90, 64, 0.08);
}

.horeca-item .item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-hint {
  font-size: 12px;
  color: #2c5a40;
  font-weight: 700;
}

.item-qty input {
  width: 90px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #2c5a40;
  text-align: center;
  font-family: 'Roboto Mono', monospace;
  font-weight: bold;
}

.horeca-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(44, 90, 64, 0.15);
}

.btn-horeca-submit {
  background: #25D366;
  color: white;
  border: none;
  padding: 16px 28px;
  border-radius: 30px;
  font-family: inherit;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-horeca-submit:hover {
  background: #20ba5a;
  transform: translateY(-2px);
}

/* --- REGLAS RESPONSIVAS PARA PANTALLAS CHICAS (< 768px) --- */
@media (max-width: 768px) {
  
  .horeca-container {
    padding: 25px 15px;
    margin: 30px 10px;
    border-radius: 18px;
  }

  /* 1. Formulario a 1 sola columna */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 2. Items de producto pasan a layout vertical tipo Tarjeta */
  .horeca-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .horeca-item .item-qty {
    width: 100%;
  }

  .item-qty input {
    width: 100%; /* El input abarca todo el ancho para facilitar el toque táctil */
    padding: 12px;
    font-size: 16px; /* Evita zoom automático molesto en iOS/Android */
    box-sizing: border-box;
  }

  /* 3. Resumen y botón apilados */
  .horeca-summary {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .total-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 18px;
  }

  .btn-horeca-submit {
    width: 100%; /* Botón grande y fácil de presionar en celulares */
    padding: 18px;
  }
}
/* ========================================================
   ESTILOS UNIFICADOS PARA BOTONES DE COTIZACIÓN HORECA
======================================================== */

/* Reglas base compartidas (Misma forma, tamaño y tipografía) */
.btn-horeca-submit,
.btn-horeca-pdf {
  flex: 1 1 100% !important;        /* Ocupan el 100% del ancho disponible */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 24px !important;     /* Mismo tamaño de relleno */
  border-radius: 50px !important;    /* Misma curvatura tipo cápsula */
  font-family: inherit !important;   /* Misma tipografía */
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Color Verde Claro (WhatsApp) */
.btn-horeca-submit {
  background-color: #25D366 !important;
  color: #ffffff !important;
}

/* Color Verde Oscuro (Descargar PDF) */
.btn-horeca-pdf {
  background-color: #2c5a40 !important;
  color: #ffffff !important;
}

/* Efecto hover idéntico para ambos */
.btn-horeca-submit:hover,
.btn-horeca-pdf:hover {
  transform: translateY(-2px) !important;
  opacity: 0.92 !important;
}
/* ========================================================
   2. PRODUCTOS EN FILAS DE 2 (2 COLUMNAS)
======================================================== */

/* Contenedor que envuelve la lista de productos */
.horeca-products-grid,
.products-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Fuerza 2 columnas */
  gap: 15px;
  margin-bottom: 25px;
}

/* Ajuste interno para las tarjetas/items de producto */
.horeca-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  border: 1px solid rgba(44, 90, 64, 0.12);
  margin-bottom: 0; /* Desactiva margen inferior porque la cuadrícula maneja el espacio */
}

.horeca-item .item-qty input {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #2c5a40;
  text-align: center;
  font-weight: bold;
}

/* En pantallas muy pequeñas (móviles muy angostos) si prefieres mantener 2 por fila */
@media (max-width: 480px) {
  .horeca-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Reducimos el espacio para aprovechar la pantalla */
  }

  .horeca-item {
    padding: 12px;
  }
}
/* ========================================================
   BOTONES COMPACTOS Y ELEGANTES
======================================================== */

.btn-horeca-submit,
.btn-horeca-pdf {
  flex: 1 1 50% !important;        /* Cada botón ocupa el 50% del ancho */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;    /* Menos relleno interno (más delgados) */
  border-radius: 30px !important;    /* Bordes redondeados más finos */
  font-family: inherit !important;
  font-size: 13px !important;        /* Tamaño de texto más estilizado */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Verde WhatsApp */
.btn-horeca-submit {
  background-color: #25D366 !important;
  color: #ffffff !important;
}

/* Verde Oscuro Cotización */
.btn-horeca-pdf {
  background-color: #2c5a40 !important;
  color: #ffffff !important;
}

/* Efecto hover */
.btn-horeca-submit:hover,
.btn-horeca-pdf:hover {
  transform: translateY(-1px) !important;
  opacity: 0.92 !important;
}

/* Ajuste sutil para pantallas pequeñas (móviles muy angostos) */
@media (max-width: 400px) {
  .btn-horeca-submit,
  .btn-horeca-pdf {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
}
/* ========================================================
   CUADRÍCULA MAYOREO/HORECA: 2 POR FILA Y TARJETAS COMPACTAS
======================================================== */

/* Contenedor principal de los productos HORECA */
.horeca-products-grid,
.horeca-items-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* 2 productos por fila */
  gap: 12px !important;                              /* Espacio entre tarjetas */
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

/* Tarjeta individual de Mayoreo */
.horeca-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 12px !important;
  border: 1px solid rgba(44, 90, 64, 0.12) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

/* Ajuste de la Imagen del Producto (Cuadrada y Compacta) */
.horeca-item img {
  width: 100% !important;
  height: 130px !important;           /* Altura fija para que todas se vean iguales */
  object-fit: cover !important;        /* Adapta la imagen sin deformarla */
  border-radius: 12px !important;
  margin-bottom: 10px !important;
}

/* Título del producto */
.horeca-item h3,
.horeca-item .item-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2c5a40 !important;
  margin: 4px 0 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Precios de mayoreo por escala */
.horeca-item .price-hint,
.horeca-item .item-prices {
  font-size: 11px !important;
  color: #666666 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

/* Contenedor de Selectores / Botones +/- */
.horeca-item .item-qty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-top: auto !important;
  width: 100% !important;
}

/* Ajuste del input de cantidad */
.horeca-item .item-qty input {
  width: 40px !important;
  padding: 4px !important;
  text-align: center !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(44, 90, 64, 0.3) !important;
}

/* Ajuste sutil para pantallas muy angostas */
@media (max-width: 360px) {
  .horeca-products-grid {
    gap: 8px !important;
  }
  
  .horeca-item {
    padding: 8px !important;
  }
  
  .horeca-item img {
    height: 110px !important;
  }
}
/* ========================================================
   DISEÑO HORECA: 2 PRODUCTOS POR FILA Y BOTONES COMPACTOS
======================================================== */

#horeca-grid-container.horeca-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

.horeca-item, .product-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 12px !important;
  border: 1px solid rgba(44, 90, 64, 0.12) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}

.horeca-item img, .product-card img {
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
}

.btn-horeca-submit,
.btn-horeca-pdf {
  flex: 1 1 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  border-radius: 30px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.btn-horeca-submit {
  background-color: #25D366 !important;
  color: #ffffff !important;
}

.btn-horeca-pdf {
  background-color: #2c5a40 !important;
  color: #ffffff !important;
}
/* ========================================================
   AJUSTE DE CONTROLES DE CANTIDAD (+ / -) COMPACTOS
======================================================== */

/* Contenedor principal de la cantidad dentro de la tarjeta */
.horeca-item .qty-control,
.horeca-item .item-qty,
.horeca-grid div[class*="qty"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Estilo para los botones + y - */
.horeca-item button,
.horeca-grid button:not(.btn-horeca-submit):not(.btn-horeca-pdf) {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f0f4f1 !important;
  color: #2c5a40 !important;
  border: 1px solid rgba(44, 90, 64, 0.2) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: background-color 0.2s ease !important;
}

.horeca-item button:hover {
  background-color: #e0eae2 !important;
}

/* Estilo para el campo de número/cantidad */
.horeca-item input[type="number"],
.horeca-item input[type="text"],
.horeca-grid input {
  width: 38px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #333333 !important;
  border: 1px solid rgba(44, 90, 64, 0.2) !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
}

/* Quita las flechas por defecto del input number en navegadores */
.horeca-item input::-webkit-outer-spin-button,
.horeca-item input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* ========================================================
   HEADER LUJOSO Y MINIMALISTA
======================================================== */

#main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px); /* Efecto de cristal esmerilado (Glassmorphism) */
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(44, 90, 64, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.nav-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Botón de flecha circular estilo boutique */
.back-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(44, 90, 64, 0.05);
  color: #2c5a40;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(44, 90, 64, 0.1);
}

.back-arrow-btn:hover {
  background-color: #2c5a40;
  color: #ffffff;
  transform: translateX(-3px); /* Desplazamiento suave al pasar el mouse */
  box-shadow: 0 4px 12px rgba(44, 90, 64, 0.2);
}

/* Identidad Tipográfica Kambena */
.nav-brand {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #1a3324;
}

.nav-brand small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #25D366;
  background: rgba(37, 211, 102, 0.1);
  padding: 3px 8px;
  border-radius: 12px;
  margin-left: 6px;
}
/* ========================================================
   SOLUCIÓN PARA CARRITO EN PANTALLAS PEQUEÑAS (MÓVILES)
======================================================== */

/* 1. Asegurar que el botón del carrito reciba el clic en móvil */
.cart-icon, 
#cart-button, 
.floating-cart-btn {
  z-index: 1001 !important; /* Por encima del header y menús */
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* 2. Ajuste del Modal / Desplegable del Carrito */
.cart-modal,
.cart-drawer,
#cart-container,
#shopping-cart {
  z-index: 2000 !important;              /* Asegura que aparezca al frente de todo */
  max-width: 100vw !important;            /* Evita que se salga del ancho de la pantalla */
  box-sizing: border-box !important;
}

/* Reglas específicas para pantallas de 600px o menos */
@media (max-width: 600px) {
  /* Si el carrito es un panel lateral (Drawer) */
  .cart-drawer,
  #cart-sidebar {
    width: 100% !important;              /* En móvil ocupa todo el ancho */
    right: 0 !important;
    top: 0 !important;
    height: 100vh !important;
  }

  /* Si el carrito es un modal flotante emergente */
  .cart-modal-content,
  .cart-popup {
    width: 92% !important;               /* Margen cómodo a los lados */
    margin: 15px auto !important;
    max-height: 85vh !important;
    overflow-y: auto !important;         /* Permite scroll si hay muchos productos */
  }

  /* Asegura que el fondo oscuro (overlay) cubra toda la pantalla */
  .cart-overlay,
  .modal-backdrop {
    z-index: 1999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
  }
}
/* ========================================================
   EVITAR ZOOM AUTOMÁTICO EN MÓVILES AL INTERACTUAR
======================================================== */

/* Prevent zoom on input elements and buttons in mobile */
input, select, textarea, button {
  font-size: 16px !important; /* Los navegadores no hacen zoom si el texto es >= 16px */
  touch-action: manipulation; /* Desactiva el doble toque para zoom (evita el efecto lupa) */
}

/* Mantener el tamaño compacto visual de los botones de cantidad (+ / -) */
.qty-btn, 
.qty-btn-clean, 
.horeca-item button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; /* Quita el recuadro gris al presionar en móvil */
}
/* ========================================================
   ESTILOS PREMIUM MÓVIL PARA KAMBENA (HEADER LUX)
======================================================== */
@media (max-width: 768px) {

  /* 1. Header ultra delgado con efecto cristal (Glassmorphism) */
  #main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px); /* Efecto desfoque de lujo tipo iOS */
    border-bottom: 1px solid rgba(212, 175, 55, 0.2); /* Sutil filo dorado */
    padding: 10px 16px;
  }

  .menu {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribuye Logo, Links y Carrito */
    gap: 10px;
  }

  /* 2. Logo limpio y centrado visualmente */
  .logo {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .logo img {
    height: 28px; /* Tamaño refinado para móvil */
  }

  .logo strong {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: #1a3323; /* Verde bosque profundo */
  }

  /* 3. Simplificación de enlaces y ocultar botón estorboso */
  .nav-actions-group {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-links a {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: #4a5d4e;
    text-decoration: none;
  }

  /* Ocultamos el botón verde pesado solo en móviles */
  .catalog-btn-nav {
    display: none; 
  }

  /* 4. Carrito Minimalista */
  .cart-btn-nav {
    position: relative;
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
  }

  .cart-icon-nav {
    font-size: 1.3rem;
  }

  .cart-counter-badge {
    position: absolute;
    top: 0px;
    right: -2px;
    background: #d4af37; /* Tono Dorado Premium */
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  }
}
@media (max-width: 768px) {
  /* Alineación limpia en 3 puntos: Izquierda - Centro - Derecha */
  .menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Botón Hamburguesa elegante */
  .mobile-menu-btn {
    display: block;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #1a3323;
    cursor: pointer;
    padding: 4px 8px;
  }

  /* Ocultamos la lista de enlaces tradicional en móvil para no saturar */
  .nav-actions-group {
    display: none;
  }

  /* Menú desplegable oculto por defecto */
  .mobile-dropdown {
    display: none;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding: 15px 0;
  }

  .mobile-dropdown.open {
    display: flex;
  }

  .mobile-dropdown a {
    padding: 12px 24px;
    color: #1a3323;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid #f0f0f0;
  }
}

/* En pantallas grandes (PC) ocultamos el botón de hamburguesa */
@media (min-width: 769px) {
  .mobile-menu-btn, .mobile-dropdown {
    display: none !important;
  }
}
/* ========================================================
   HEADER ULTRA LUX PARA PANTALLAS MÓVILES (KAMBENA)
======================================================== */
@media (max-width: 768px) {
  /* Contenedor principal sticky con efecto cristal */
  #main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25); /* Filo dorado sutil */
    padding: 8px 16px !important;
  }

  /* Forzar estricta alineación horizontal en 1 sola fila */
  #main-header .menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ocultar enlaces de texto estorbosos de la barra principal */
  #main-header .nav-actions-group,
  #main-header .nav-links {
    display: none !important;
  }

  /* 1. Botón Hamburguesa elegante */
  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    font-size: 1.3rem !important;
    color: #1a3323 !important;
    cursor: pointer;
    padding: 4px !important;
    line-height: 1;
  }

  /* 2. Logo Centrado e Impecable */
  #main-header .logo {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  #main-header .logo img {
    height: 24px !important; /* Tamaño compacto premium */
    width: auto !important;
  }

  #main-header .logo strong {
    font-family: 'Roboto Mono', monospace !important;
    font-size: 1rem !important;
    letter-spacing: 2px !important;
    color: #1a3323 !important;
  }

  /* 3. Carrito integrado y fino */
  .cart-btn-nav {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .cart-icon-nav {
    font-size: 1.2rem !important;
  }

  .cart-counter-badge {
    position: absolute !important;
    top: -2px !important;
    right: -4px !important;
    background: #1a3323 !important; /* Verde profundo gourmet */
    border: 1px solid #d4af37 !important; /* Borde dorado */
    color: #ffffff !important;
    font-size: 0.6rem !important;
    font-weight: bold !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Desplegable de la Hamburguesa al presionar */
  .mobile-dropdown {
    display: none;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(15px);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 15px 25px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding: 10px 0;
  }

  .mobile-dropdown.open {
    display: flex !important;
  }

  .mobile-dropdown a {
    padding: 14px 20px;
    color: #1a3323;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid #f5f5f5;
  }
}

/* Ocultar elementos móviles en computadoras */
@media (min-width: 769px) {
  .mobile-menu-btn, 
  .mobile-dropdown {
    display: none !important;
  }
}
  @media (max-width: 768px) {
  
  /* Asegura que la barra contenga todo sin desbordes */
  #main-header {
    overflow: visible; /* Permite que la insignia se asome suavemente si es necesario */
  }

  /* 🛒 BOTÓN DEL CARRITO (Alineado y limpio) */
  .cart-btn-nav {
    position: relative !important;
    background: transparent !important; /* Elimina cualquier círculo o fondo blanco extra */
    border: none !important;
    box-shadow: none !important; /* Quita sombras pesadas que lo desencajan */
    padding: 6px 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    top: 0 !important; /* Evita que se caiga de la barra */
  }

  /* Ícono del Carrito */
  .cart-icon-nav {
    font-size: 1.25rem !important;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.1));
  }

  /* 🏷️ BADGE DEL CONTADOR (Delicado y sofisticado) */
  .cart-counter-badge {
    position: absolute !important;
    top: 1px !important;
    right: 0px !important;
    background: #1a3323 !important; /* Verde profundo Kambena */
    color: #ffffff !important;
    border: 1px solid #d4af37 !important; /* Detalle en hilo de oro */
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
  }
}
/* Estilo Píldora de Lujo */
  .cart-btn-nav {
    background: rgba(26, 51, 35, 0.05) !important; /* Fondo verde ultra suave */
    border: 1px solid rgba(212, 175, 55, 0.3) !important; /* Borde dorado translúcido */
    border-radius: 20px !important;
    padding: 4px 10px !important;
  }
  /* ========================================================
   TIPOGRAFÍA GOURMET PARA EL MENÚ DESPLEGABLE Y HEADER
======================================================== */

/* Importar la fuente en tu CSS si no la tienes */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

.mobile-dropdown a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.8rem !important;          /* Tamaño pequeño y delicado */
  font-weight: 500 !important;          /* Grosor medio, ni muy delgado ni tosco */
  letter-spacing: 2.5px !important;     /* El secreto del lujo: letras muy separadas */
  text-transform: uppercase !important; /* Siempre en mayúsculas */
  color: #1a3323 !important;            /* Verde bosque profundo */
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important; /* Filo dorado tenue */
  transition: all 0.3s ease;
}

/* Efecto al pasar el dedo o tocar */
.mobile-dropdown a:active,
.mobile-dropdown a:hover {
  background: rgba(212, 175, 55, 0.08) !important; /* Destello dorado suave */
  color: #d4af37 !important;                       /* Texto cambia a dorado */
  padding-left: 28px !important;                   /* Desplazamiento elegante */
}
@media (max-width: 768px) {
  .hero-actions {
    display: flex;
    flex-direction: column; /* Apila los botones en móvil */
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .cta, .promo-btn-link {
    width: 100%; /* Hacen match en ancho */
    text-align: center;
  }

  .promo-btn-link {
    padding: 10px;
    font-size: 0.85rem;
  }
}
@media (max-width: 768px) {

  /* Espaciado perfecto para liberar la cápsula beige */
  main {
    padding-top: 68px !important; /* Punto dulce entre 55px y 80px */
  }

  .hero-product {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .hero-text .tag {
    margin-top: 6px !important;
    margin-bottom: 20px !important;
    display: inline-block !important;
  }
}