/* ==========================================================================
  YARÉ - LUXURY BOUTIQUE & HIGH CONVERSION STYLES
  Paleta: Primario #C38575 | Secundario #CEB79B | Neutros #1E1B18 / #FAF8F5
  ========================================================================== */

:root {
 --yare-primary: #C38575;
 --yare-primary-hover: #b07060;
 --yare-primary-light: #fbf3f1;
 --yare-primary-dark: #915a4c;
 --yare-secondary: #CEB79B;
 --yare-secondary-light: #fbf8f4;
 --yare-secondary-dark: #9c8366;
 --yare-dark: #1e1b18;
 --yare-dark-muted: #57524a;
 --yare-bg-warm: #FAF8F5;
 --yare-card-bg: #FFFFFF;
 --yare-border: #EFE7DE;
 --yare-whatsapp: #25D366;
 --yare-whatsapp-hover: #1ebc59;
}

body {
 font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 background-color: var(--yare-bg-warm);
 color: var(--yare-dark);
 scroll-behavior: smooth;
 overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, .font-heading {
 font-family: 'Outfit', sans-serif;
 letter-spacing: -0.02em;
}

/* Custom Palette Utility Classes */
.bg-yare-primary { background-color: var(--yare-primary); }
.bg-yare-primary:hover { background-color: var(--yare-primary-hover); }
.text-yare-primary { color: var(--yare-primary); }
.border-yare-primary { border-color: var(--yare-primary); }

.bg-yare-secondary { background-color: var(--yare-secondary); }
.text-yare-secondary { color: var(--yare-secondary); }
.border-yare-secondary { border-color: var(--yare-secondary); }

.bg-yare-warm { background-color: var(--yare-bg-warm); }
.bg-yare-light { background-color: var(--yare-primary-light); }
.text-yare-dark { color: var(--yare-dark); }
.border-yare { border-color: var(--yare-border); }

/* Glassmorphism */
.glass-nav {
 background: rgba(255, 255, 255, 0.94);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom: 1px solid rgba(206, 183, 155, 0.3);
}

.glass-card {
 background: rgba(255, 255, 255, 0.96);
 backdrop-filter: blur(8px);
 border: 1px solid var(--yare-border);
}

/* Hero Badge Glow */
.hero-badge {
 background: linear-gradient(135deg, rgba(195, 133, 117, 0.12) 0%, rgba(206, 183, 155, 0.22) 100%);
 border: 1px solid rgba(195, 133, 117, 0.3);
}

/* Product Card Effects */
.product-card {
 transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 border: 1px solid var(--yare-border);
}

.product-card:hover {
 transform: translateY(-6px);
 box-shadow: 0 20px 35px -10px rgba(195, 133, 117, 0.18);
 border-color: var(--yare-primary);
}

.product-image-container {
 overflow: hidden;
 position: relative;
}

.product-image-container img {
 transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-image-container img {
 transform: scale(1.05);
}

/* Quick Action Overlay */
.quick-action-overlay {
 opacity: 0;
 transform: translateY(10px);
 transition: all 0.3s ease;
}

.product-card:hover .quick-action-overlay {
 opacity: 1;
 transform: translateY(0);
}

/* WhatsApp Pulse Animation */
@keyframes pulse-ring {
 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
 70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-float-btn {
 animation: pulse-ring 2.5s infinite;
}

/* Shimmer Highlight */
.shimmer {
 background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
 background-size: 200% 100%;
 animation: shimmer 3s infinite;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}
::-webkit-scrollbar-track {
 background: var(--yare-bg-warm);
}
::-webkit-scrollbar-thumb {
 background: #d6c6b3;
 border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
 background: var(--yare-primary);
}

/* Drawer & Modal Transitions */
.slide-drawer {
 transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop {
 transition: opacity 0.3s ease;
}

/* Radio / Variant Pill Active State */
.variant-pill {
 transition: all 0.2s ease;
}
.variant-pill.active {
 background-color: var(--yare-primary) !important;
 color: #ffffff !important;
 border-color: var(--yare-primary) !important;
 box-shadow: 0 4px 10px rgba(195, 133, 117, 0.35);
}

.color-pill {
 transition: all 0.2s ease;
}
.color-pill.active {
 border-color: var(--yare-primary) !important;
 background-color: var(--yare-primary-light) !important;
 font-weight: 700;
 color: var(--yare-primary-dark) !important;
}

/* Floating Cart Badge */
.cart-badge-bounce {
 animation: badge-bounce 0.3s ease;
}

@keyframes badge-bounce {
 0%, 100% { transform: scale(1); }
 50% { transform: scale(1.35); }
}

/* Toast Notification */
#toast-container {
 position: fixed;
 bottom: 24px;
 right: 24px;
 z-index: 99999;
 display: flex;
 flex-direction: column;
 gap: 10px;
 pointer-events: none;
}

.toast {
 pointer-events: auto;
 animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 transition: all 0.3s ease;
}

@keyframes slideInUp {
 from { transform: translateY(100%); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
}


/* Mobile Safe Area & Touch Enhancements */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .whatsapp-float-btn {
    bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem)) !important;
    right: max(1.25rem, env(safe-area-inset-right, 1.25rem)) !important;
  }
}

@media (max-width: 640px) {
  .product-card {
    border-radius: 1rem;
  }
}


/* Brand Header Logo - No frames, no borders, clean PNG */
.brand-header-logo {
  height: 50px;
  max-height: 56px;
  width: auto;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
}

@media (max-width: 640px) {
  .brand-header-logo {
    height: 40px;
    max-height: 44px;
  }
}