/* ═══════════════════════════════════════════════════════════════════
   CREACIONES VINANTI — animations.css
   Todas las animaciones y transiciones del sitio
   ═══════════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ───────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse-wa {
  0%   { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0   rgba(37, 211, 102, 0); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25%       { transform: scale(1.1); }
  50%       { transform: scale(1); }
  75%       { transform: scale(1.05); }
}

/* ── SCROLL REVEAL ───────────────────────────────────────────────── */
/* Clase inicial: oculto y abajo */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes de reveal */
.reveal-left  { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-right { opacity: 0; transform: translateX(30px);  transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-scale { opacity: 0; transform: scale(0.94);       transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Delay helpers para grupos */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ── BANNER MARQUEE ──────────────────────────────────────────────── */
.banner-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
.banner-track:hover { animation-play-state: paused; }

/* ── NAVBAR SCROLL ───────────────────────────────────────────────── */
.navbar {
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.navbar.scrolled {
  background: rgba(255, 249, 251, 0.97) !important;
  box-shadow: 0 2px 20px rgba(200, 100, 140, 0.14);
  backdrop-filter: blur(10px);
}

/* ── HERO SLIDER ─────────────────────────────────────────────────── */
.slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.slide.activo {
  opacity: 1;
  pointer-events: auto;
}

.slide-content > * {
  animation: fadeInUp 0.8s ease both;
  animation-delay: 0.25s;
}

/* ── CATEGORY CARD ───────────────────────────────────────────────── */
.cat-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(200, 100, 140, 0.22);
}

.cat-card-img {
  overflow: hidden;
  position: relative;
}
.cat-card-img .cat-bg {
  transition: transform 0.5s ease;
}
.cat-card:hover .cat-bg {
  transform: scale(1.08);
}

.cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(248, 200, 212, 0.75), rgba(212, 120, 154, 0.6));
  opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.35s ease;
}
.cat-card:hover .cat-overlay { opacity: 1; }

/* ── PRODUCT CARD ────────────────────────────────────────────────── */
.producto-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.producto-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(200, 100, 140, 0.2);
}
.producto-card:hover .product-image img { transform: scale(1.06); }

/* ── WHATSAPP FLOAT ──────────────────────────────────────────────── */
.wa-float {
  animation: pulse-wa 2.2s ease infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wa-float:hover {
  transform: scale(1.12);
  animation: none;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5);
}

/* ── CART DRAWER ─────────────────────────────────────────────────── */
.carrito-drawer {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carrito-drawer.abierto { transform: translateX(0); }

/* ── HAMBURGER ───────────────────────────────────────────────────── */
.hamburger span {
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.hamburger.activo span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.activo span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.activo span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── MOBILE MENU ─────────────────────────────────────────────────── */
.nav-mobile {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.nav-mobile.abierto { max-height: 600px; }

/* ── HERO CONTENT INITIAL (antes de active) ──────────────────────── */
.hero-slide-content {
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

/* ── LOADING SKELETON ────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0e0e8 25%, #f8d0dc 50%, #f0e0e8 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radio-sm);
}

/* ── FLOAT ANIMATION ─────────────────────────────────────────────── */
.animar-flotar { animation: float 4s ease-in-out infinite; }

/* ── FEATURED CAROUSEL ARROWS ────────────────────────────────────── */
.carousel-arrow {
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.carousel-arrow:hover {
  background: var(--rosa-oscuro) !important;
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(200, 100, 140, 0.35);
}

/* ── SLIDER DOTS ─────────────────────────────────────────────────── */
.dot {
  transition: background 0.3s ease, transform 0.3s ease;
}
.dot.activo {
  background: var(--rosa-oscuro) !important;
  transform: scale(1.3);
}

/* ── FILTER PILL ─────────────────────────────────────────────────── */
.filtro-pill {
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.filtro-pill:hover { transform: translateY(-2px); }
.filtro-pill.activo {
  background: linear-gradient(135deg, var(--rosa-medio), var(--rosa-oscuro)) !important;
  color: #fff !important;
}

/* ── SOCIAL CARDS ────────────────────────────────────────────────── */
.social-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.social-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px var(--sombra-rosa-m);
}

/* ── MODAL ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(45, 27, 46, 0.6);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: var(--trans);
  padding: 1rem;
}
.modal-overlay.activo { opacity: 1; visibility: visible; }
.modal-caja {
  background: #fff;
  border-radius: var(--radio-lg);
  padding: 2rem;
  width: 100%; max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.92);
  transition: transform 0.3s ease;
  box-shadow: 0 24px 60px rgba(45,27,46,0.2);
}
.modal-overlay.activo .modal-caja { transform: scale(1); }

/* ── TOAST ───────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 5.5rem; right: 1.5rem;
  background: var(--texto-oscuro);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radio-pill);
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 600;
  transform: translateY(20px);
  opacity: 0;
  transition: var(--trans);
  pointer-events: none;
  max-width: 300px;
}
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.verde   { background: #25D366; }
.toast.rojo    { background: #e05454; }

/* ── HERO ANIMATE (entrada en cascada) ──────────────────────────── */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(var(--slide-distance, 20px));
    filter: blur(var(--blur-start, 0px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

.hero-animate {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
}