/* ===== Estilos base + componentes compartidos de la tienda Panda ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: #1C1917;
  background-color: #FAF8F4;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: 'Playfair Display', serif; letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Header (announcement + navbar, fijo) */
#site-header { transition: box-shadow .25s ease; }
#site-header.scrolled { box-shadow: 0 6px 24px rgba(20,48,42,.07); }
.navbar {
  background: rgba(250, 248, 244, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #E8E2D7;
  transition: background .25s ease;
}
#site-header.scrolled .navbar { background: rgba(250, 248, 244, 0.97); }

/* Botón "+" rápido sobre la imagen del producto */
.quick-add {
  position: absolute; bottom: 12px; right: 12px;
  width: 42px; height: 42px; border-radius: 999px;
  background: #14302A; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(20,48,42,.25);
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity .22s ease, transform .22s ease, background .2s ease;
}
.group:hover .quick-add { opacity: 1; transform: translateY(0) scale(1); }
.quick-add:hover { background: #0E7A57; }
@media (hover: none) { .quick-add { opacity: 1; transform: none; } }

/* Toasts */
#panda-toasts { position: fixed; left: 0; right: 0; bottom: 22px; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.panda-toast {
  display: flex; align-items: center; gap: 10px;
  background: #14302A; color: #fff; font-size: 14px; font-weight: 500;
  padding: 11px 18px; border-radius: 999px; box-shadow: 0 12px 30px rgba(20,48,42,.3);
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease;
  max-width: 90vw;
}
.panda-toast.show { opacity: 1; transform: translateY(0); }

/* Hero oscuro premium (cabeceras de tienda/legales) */
.hero-gradient {
  background-color: #14302A;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(185, 137, 0, 0.18), transparent 42%),
    radial-gradient(circle at 12% 95%, rgba(52, 166, 132, 0.20), transparent 40%),
    linear-gradient(135deg, #102A22 0%, #14302A 50%, #0E5C43 100%);
}

/* Hero claro y editorial (portada) */
.hero-home {
  background-color: #FAF8F4;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(14, 122, 87, 0.10), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(185, 137, 0, 0.08), transparent 38%);
}

/* Tarjetas */
.card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(20, 48, 42, 0.12); }

/* Animación al hacer scroll */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* WhatsApp flotante */
.whatsapp-float { position: fixed; bottom: 28px; right: 28px; z-index: 100; }

/* Foco de formularios */
.form-input { transition: border-color .2s ease, box-shadow .2s ease; }
.form-input:focus { outline: none; border-color: #0E7A57; box-shadow: 0 0 0 3px rgba(14, 122, 87, 0.18); }

/* Imagen de producto: marco cuadrado uniforme, producto completo (sin recorte feo) */
.product-img-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(160deg, #FBFAF7 0%, #F2EEE7 100%); }
.product-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 7%; transition: transform .4s ease; }
.card-hover:hover .product-img-wrap img { transform: scale(1.04); }
/* La imagen principal del producto respira un poco más */
.product-main-img { aspect-ratio: 4 / 5; }
.product-main-img img { padding: 8%; }

/* Drawer del carrito */
.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 100%; max-width: 420px;
  background: #fff; z-index: 120; box-shadow: -10px 0 40px rgba(20,48,42,.18);
  transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-overlay {
  position: fixed; inset: 0; background: rgba(20,48,42,.45); z-index: 110;
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

/* Badge contador del carrito */
.cart-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  background: #B98900; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cart-badge.hidden { display: none; }

/* Tablas legales */
.legal-content h2 { font-size: 1.3rem; font-weight: 700; color: #14302A; margin: 2rem 0 .75rem; }
.legal-content h3 { font-size: 1.05rem; font-weight: 600; color: #0B5C44; margin: 1.25rem 0 .5rem; }
.legal-content p, .legal-content li { color: #44403C; line-height: 1.75; }
.legal-content ul { list-style: disc; padding-left: 1.4rem; margin: .5rem 0; }
.legal-content ol { list-style: decimal; padding-left: 1.4rem; margin: .5rem 0; }
.legal-content a { color: #0E7A57; text-decoration: underline; }

/* Detalle decorativo: línea dorada bajo títulos de sección */
.eyebrow { letter-spacing: .14em; text-transform: uppercase; font-weight: 600; font-size: .72rem; }