/* ─────────────────────────────────────────────
   Totalwhite.cl — Custom CSS
   (Complementa a Tailwind con animaciones y utilidades custom)
───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;700&display=swap');

/* ── Reset / Base ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #111827;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scroll animations ───────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}
[data-animate][data-delay="100"] { transition-delay: 0.1s; }
[data-animate][data-delay="200"] { transition-delay: 0.2s; }
[data-animate][data-delay="300"] { transition-delay: 0.3s; }
[data-animate][data-delay="400"] { transition-delay: 0.4s; }
[data-animate][data-delay="500"] { transition-delay: 0.5s; }

/* ── Gradient text ───────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #1a6b3c 0%, #2d9e5e 50%, #4dc88b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Carrito Drawer ──────────────────────── */
#cart-drawer {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#cart-overlay {
  transition: opacity 0.35s ease;
}

/* ── Product card hover ──────────────────── */
.product-card {
  will-change: transform, box-shadow;
}

/* ── Hero gradient bg ─────────────────────  */
.hero-bg-gradient {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 40%, #f0f9ff 100%);
}

/* ── Trust badge pulse ───────────────────── */
@keyframes badge-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-4px); }
}
.trust-badge { animation: badge-float 3s ease-in-out infinite; }
.trust-badge:nth-child(2) { animation-delay: 0.5s; }
.trust-badge:nth-child(3) { animation-delay: 1s; }

/* ── Button ripple effect ────────────────── */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-ripple:active::after { opacity: 1; }

/* ── Scrollbar custom ────────────────────── */
#cart-items-list::-webkit-scrollbar { width: 4px; }
#cart-items-list::-webkit-scrollbar-track { background: #f9fafb; }
#cart-items-list::-webkit-scrollbar-thumb { background: #d1fae5; border-radius: 2px; }

/* ── Line clamp 2 ────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Responsive Hero ─────────────────────── */
@media (max-width: 768px) {
  .hero-split-right { border-radius: 0; height: auto; }
}

/* ── Floating product badge ──────────────── */
@keyframes product-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-12px) rotate(-3deg); }
}
.product-float-card {
  animation: product-float 4s ease-in-out infinite;
}

/* ── Section divider wave ───────────────── */
.wave-divider {
  overflow: hidden;
  line-height: 0;
}
.wave-divider svg { display: block; }