/* ==========================================================================
   QUÉ HUEVONES: Para con los cuentos, prueba los verdaderos huevos.
   Estilos personalizados, micro-interacciones, Carrito y Dashboard Admin
   Paleta oficial:
   - Azul Oscuro Principal: #1E293B
   - Marrón Huevo de Campo: #C1844D
   - Blanco Hueso:          #F3F4F6
   ========================================================================== */

:root {
  --qh-navy: #0B2826;
  --qh-navy-dark: #071D1B;
  --qh-navy-light: #123834;
  --qh-brown: #C89B48;
  --qh-brown-hover: #B08332;
  --qh-brown-light: #F9E8B2;
  --qh-bone: #F7F5EE;
  --qh-bone-pure: #FCFBF7;
  --qh-yolk: #E8C170;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--qh-bone);
  color: var(--qh-navy);
  overflow-x: hidden;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--qh-navy-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--qh-brown);
  border-radius: 9999px;
  border: 2px solid var(--qh-navy-dark);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--qh-brown-light);
}

/* Background Patterns & Subtle Textures */
.bg-grid-pattern {
  background-image: radial-gradient(rgba(249, 232, 178, 0.10) 1px, transparent 1px);
  background-size: 28px 28px;
}

.bg-light-dots {
  background-image: radial-gradient(rgba(11, 40, 38, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Floating & Boxing Microanimations */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1.5deg);
  }
}

@keyframes floatReverse {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(9px) rotate(-1.5deg);
  }
}

@keyframes boxerBounceLeft {
  0%, 100% {
    transform: translateY(0) rotate(-3deg);
  }
  40% {
    transform: translateY(-8px) translateX(4px) rotate(2deg);
  }
  70% {
    transform: translateY(-3px) translateX(-2px) rotate(-2deg);
  }
}

@keyframes boxerBounceRight {
  0%, 100% {
    transform: translateY(0) rotate(3deg);
  }
  45% {
    transform: translateY(-9px) translateX(-4px) rotate(-2deg);
  }
  75% {
    transform: translateY(-2px) translateX(2px) rotate(2deg);
  }
}

@keyframes gloveJab {
  0%, 100% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(7px) scale(1.06);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(193, 132, 77, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(193, 132, 77, 0);
  }
}

@keyframes pulseWhatsapp {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);
  }
}

@keyframes yolkBounce {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  60% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-float-slow {
  animation: floatSlow 4.5s ease-in-out infinite;
}

.animate-float-reverse {
  animation: floatReverse 5s ease-in-out infinite;
}

.animate-boxer-left {
  animation: boxerBounceLeft 2.8s ease-in-out infinite;
  transform-origin: bottom center;
}

.animate-boxer-right {
  animation: boxerBounceRight 3.1s ease-in-out infinite;
  transform-origin: bottom center;
}

.animate-glove-jab {
  animation: gloveJab 1.6s ease-in-out infinite;
}

.pulse-brown {
  animation: pulseGlow 2.4s infinite;
}

.pulse-whatsapp {
  animation: pulseWhatsapp 2.2s infinite;
}

.animate-yolk-pop {
  animation: yolkBounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Interactive Card Hover Transitions */
.product-card {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease;
}

.product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 40px -14px rgba(30, 41, 59, 0.16),
              0 8px 16px -8px rgba(193, 132, 77, 0.22);
}

.benefit-card {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.benefit-card:hover {
  transform: translateY(-6px);
}

/* Navigation active link indicator */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 1.5px;
  background-color: #E8C170;
  border-radius: 999px;
  transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Egg visual 3D shading */
.egg-shape-campo {
  background: radial-gradient(circle at 32% 28%, #E3A873 0%, #C1844D 52%, #8F5A2B 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  box-shadow: inset -6px -8px 16px rgba(62, 34, 11, 0.35),
              inset 4px 6px 12px rgba(255, 232, 209, 0.45),
              0 12px 24px -6px rgba(193, 132, 77, 0.45);
}

.egg-shape-blanco {
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #F3F4F6 58%, #CBD5E1 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  box-shadow: inset -6px -8px 16px rgba(100, 116, 139, 0.25),
              inset 4px 6px 12px rgba(255, 255, 255, 0.9),
              0 12px 24px -6px rgba(30, 41, 59, 0.2);
}

/* Slide-over Cart Drawer */
#cart-drawer-panel {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Progress bar smooth fill */
.analytics-bar-fill {
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}