/* ============================================================
   lux.css — Capa de refinamiento "Lujo / Elegante" · Menamora
   Se carga DESPUÉS de epic.css. Solo refina; es 100% reversible
   (basta con quitar el <link> de esta hoja).
   ============================================================ */

:root{
  --lux-ink:#2a1c24;          /* casi negro ciruela: contraste elegante */
  --lux-wine:#8c3a52;         /* vino/bordeaux refinado (reemplaza rosa chicle) */
  --lux-wine-deep:#6f2c40;
  --lux-gold:#b89255;         /* oro champagne, menos amarillo */
  --lux-gold-deep:#9c7a3e;
  --lux-gold-soft:#d8c08a;
  --lux-cream:#fcf8f4;
  --lux-hair:rgba(184,146,85,.30);   /* filo dorado fino (hairline) */
}

/* ── Titulares más finos y elegantes ──────────────────────── */
.hero-left h1{ letter-spacing:.2px; }
.hero-left h1 span{
  font-family:'Cormorant Garamond',serif !important;
  font-style:italic; font-weight:500;
  background:linear-gradient(100deg,var(--lux-gold-deep) 0%, var(--lux-gold) 45%, var(--lux-gold-soft) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Eyebrows y etiquetas: oro champagne, más aire, más finos */
.hero-eyebrow{ color:var(--lux-gold) !important; letter-spacing:5px !important; font-weight:600 !important; font-size:.72rem !important; }
.pc-cat{ color:var(--lux-gold) !important; letter-spacing:2.5px !important; }

/* ── Botón principal: vino profundo con filo dorado ───────── */
.btn-gold,
.btn-add{
  background:linear-gradient(135deg,var(--lux-wine) 0%, var(--lux-wine-deep) 100%) !important;
  color:#fdf3ee !important;
  border:1px solid var(--lux-hair) !important;
  letter-spacing:.6px;
  box-shadow:0 6px 20px rgba(111,44,64,.26) !important;
}
.btn-gold:hover,
.btn-add:hover{
  background:linear-gradient(135deg,#9a4159 0%, var(--lux-wine) 100%) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(111,44,64,.34) !important;
}

/* Premium = tier oro (jerarquía de lujo): oro champagne + texto ink */
.hero-pack-featured .hero-pack-actions .btn-gold{
  background:linear-gradient(135deg,var(--lux-gold) 0%, var(--lux-gold-deep) 100%) !important;
  color:#3a2a16 !important;
  border-color:rgba(255,255,255,.35) !important;
  box-shadow:0 6px 20px rgba(156,122,62,.32) !important;
}

/* Botón outline más fino */
.btn-outline{ border:1px solid var(--lux-hair) !important; color:var(--lux-wine) !important; }
.btn-outline:hover{ background:var(--lux-cream) !important; border-color:var(--lux-gold) !important; }

/* ── Tarjetas de producto: filo dorado, sombra fina, zoom ─── */
.prod-card{
  border:1px solid var(--lux-hair) !important;
  border-radius:12px;
  box-shadow:0 2px 14px rgba(42,28,36,.06) !important;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease !important;
}
.prod-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 18px 44px rgba(42,28,36,.14) !important;
}
.pc-img img{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.prod-card:hover .pc-img img{ transform:scale(1.06); }

/* Precio en ink elegante */
.pc-price,.pc-precio{ color:var(--lux-ink) !important; }

/* Badges más finos y elegantes */
.pc-badge{
  background:var(--lux-ink) !important; color:#f3e3c9 !important;
  border-radius:2px !important; font-size:.6rem !important; letter-spacing:2px !important;
}
.pc-acabado-badge{ border-radius:2px !important; font-size:.6rem !important; letter-spacing:2px !important; font-weight:700 !important; }
.pc-acabado-badge.dorado{ background:linear-gradient(135deg,var(--lux-gold),var(--lux-gold-deep)) !important; }
.pc-acabado-badge.plateado{ background:linear-gradient(135deg,#9aa0a6,#7c828a) !important; }

/* ── Hairline dorado decorativo bajo títulos de sección ───── */
.packs-title::after,
.section-title::after,
.collection-title::after{
  content:''; display:block; width:54px; height:1px; margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--lux-gold),transparent);
}

/* ── Pack hero cards: filo dorado y sombra refinada ───────── */
.pack-hero-card,
.hero-pack-card{ border:1px solid var(--lux-hair) !important; }
.pack-hero-card:hover{ box-shadow:0 16px 44px rgba(42,28,36,.15) !important; }

/* ── Navbar con hairline dorada al hacer scroll ───────────── */
.navbar.scrolled{ box-shadow:0 1px 0 var(--lux-hair), 0 6px 24px rgba(42,28,36,.06) !important; }

/* ── MÓVIL: declutter — quitar el flotante Yape (morado) que ─
   choca con la paleta y tapa productos; dejar solo WhatsApp ── */
@media (max-width:760px){
  .yape-float{ display:none !important; }
  .wa-float{ bottom:84px !important; width:52px !important; height:52px !important; font-size:1.4rem !important; }
  .mobile-cta{ border-top:1px solid var(--lux-hair) !important; box-shadow:0 -6px 24px rgba(42,28,36,.10) !important; }
}

/* ════════════════════════════════════════════════════════════
   FIX: drawers (carrito / favoritos) asomaban solos
   En pantallas de 440–760px de ancho, el carrito/favoritos se
   ocultaban con `right:-440px` (valor FIJO) pero su ancho es 100%,
   así que parte del panel quedaba visible (parecía abierto solo).
   Solución: ocultarlos con transform, que escala con su ancho real.
   ════════════════════════════════════════════════════════════ */
.cart-drawer,
.wish-drawer{
  right:0 !important; left:auto !important;
  transform:translateX(calc(100% + 60px));
  transition:transform .35s ease !important;
}
.cart-drawer.open,
.wish-drawer.open{ transform:translateX(0) !important; }

/* ════════════════════════════════════════════════════════════
   FOOTER MÓVIL — rediseño elegante "súper chévere"
   ════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .footer{
    position:relative;
    background:linear-gradient(180deg,#3a2832 0%, #271a22 100%) !important;
    padding:0 0 96px !important;            /* espacio para la barra CTA fija */
  }
  /* filo dorado superior */
  .footer::before{
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--lux-gold),transparent);
  }

  /* Grid: marca full → Tienda | Ayuda → Contacto full */
  .footer-inner{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:30px 16px !important;
    align-items:start !important;
    text-align:left !important;
    padding:42px 22px 30px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
  .footer-inner > *:nth-child(1),          /* marca */
  .footer-inner > *:nth-child(4){          /* contáctanos */
    grid-column:1 / -1 !important;
  }

  /* Marca centrada con redes en círculos dorados */
  .footer-brand{ text-align:center !important; }
  .footer-brand h3{ font-size:2rem !important; margin-bottom:12px !important; }
  .footer-brand p{ max-width:320px; margin:0 auto 18px !important; color:rgba(255,255,255,.6) !important; }
  .footer-social-label{ color:var(--lux-gold) !important; letter-spacing:3px !important; margin-bottom:12px !important; }
  .footer-brand .socials{ justify-content:center !important; gap:14px !important; }
  .footer-brand .socials a{
    width:46px !important; height:46px !important; border-radius:50% !important;
    display:inline-flex !important; align-items:center; justify-content:center;
    border:1px solid var(--lux-hair) !important;
    background:rgba(255,255,255,.04) !important;
    color:var(--lux-gold-soft) !important; font-size:1.1rem !important;
    transition:.3s ease !important;
  }
  .footer-brand .socials a:hover{
    border-color:var(--lux-gold) !important;
    background:rgba(184,146,85,.16) !important;
    color:#fff !important; transform:translateY(-3px) !important;
  }

  /* Columnas Tienda | Ayuda: alineadas a la izquierda, heading dorado */
  .footer-inner > *:nth-child(2),
  .footer-inner > *:nth-child(3){ text-align:left !important; }
  .footer-inner > *:nth-child(2) h4,
  .footer-inner > *:nth-child(3) h4{
    color:var(--lux-gold) !important; margin-bottom:14px !important;
    padding-bottom:8px !important; border-bottom:1px solid rgba(184,146,85,.22) !important;
  }
  .footer-inner > *:nth-child(2) ul,
  .footer-inner > *:nth-child(3) ul{ align-items:flex-start !important; gap:12px !important; }
  .footer-inner > *:nth-child(2) a,
  .footer-inner > *:nth-child(3) a{ justify-content:flex-start !important; color:rgba(255,255,255,.66) !important; }

  /* Contáctanos: bloque centrado con píldoras elegantes */
  .footer-inner > *:nth-child(4){ text-align:center !important; margin-top:4px; }
  .footer-inner > *:nth-child(4) h4{ color:var(--lux-gold) !important; margin-bottom:14px !important; }
  .footer-inner > *:nth-child(4) ul{ align-items:center !important; gap:10px !important; }
  .footer-inner > *:nth-child(4) a{
    display:inline-flex !important; align-items:center; justify-content:center; gap:10px !important;
    min-width:230px; padding:11px 20px !important;
    border:1px solid var(--lux-hair) !important; border-radius:50px !important;
    background:rgba(255,255,255,.04) !important; color:#f3e3c9 !important;
    font-weight:600 !important; transition:.3s ease !important;
  }
  .footer-inner > *:nth-child(4) a i{ color:var(--lux-gold) !important; }
  .footer-inner > *:nth-child(4) a:hover{
    border-color:var(--lux-gold) !important; background:rgba(184,146,85,.14) !important;
    transform:translateY(-2px) !important;
  }

  /* Pie: apilado, centrado, fino */
  .footer-bottom{
    flex-direction:column !important; gap:6px !important; text-align:center !important;
    padding:22px !important; color:rgba(255,255,255,.4) !important;
  }
}