/* ============================================================
   ANIMACIONES GLOBALES v3 — Bendita Tiendita
   · Fix doble scrollbar
   · Navbar siempre fijo (sin containing block)
   · Bidireccional, sin barra de progreso
   ============================================================ */

*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* ---------- FIX 1: DOBLE SCROLLBAR ----------
   Solo html controla el scroll. body NO crea contenedor. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}
body {
  overflow: visible !important;
  max-width: 100% !important;
}

/* ---------- FIX 2: BODY SIN FILTER ----------
   La animación de entrada NO usa filter (rompía position:fixed). */
body {
  animation: pageFadeIn .7s ease-out;
}
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- KEYFRAMES ---------- */
@keyframes fadeInUp      { from{opacity:0;transform:translateY(60px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown    { from{opacity:0;transform:translateY(-60px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft    { from{opacity:0;transform:translateX(-70px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight   { from{opacity:0;transform:translateX(70px)} to{opacity:1;transform:translateX(0)} }
@keyframes zoomIn        { from{opacity:0;transform:scale(.75)} to{opacity:1;transform:scale(1)} }
@keyframes fadeInScale   { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes blurIn        { from{opacity:0;filter:blur(14px);transform:scale(.96)} to{opacity:1;filter:blur(0);transform:scale(1)} }
@keyframes bounceIn      { 0%{opacity:0;transform:scale(.3)} 50%{opacity:1;transform:scale(1.08)} 70%{transform:scale(.94)} 100%{transform:scale(1)} }
@keyframes rotateIn      { from{opacity:0;transform:rotate(-14deg) scale(.85)} to{opacity:1;transform:rotate(0) scale(1)} }
@keyframes flipIn        { from{opacity:0;transform:perspective(1000px) rotateX(-60deg)} to{opacity:1;transform:perspective(1000px) rotateX(0)} }
@keyframes slideInBounce {
  0%   { opacity: 0; transform: translateY(80px) scale(.9); }
  60%  { opacity: 1; transform: translateY(-10px) scale(1.02); }
  80%  { opacity: 1; transform: translateY(4px) scale(.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulseSoft     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
@keyframes heartbeat     { 0%,100%{transform:scale(1)} 25%{transform:scale(1.12)} 40%{transform:scale(.98)} 60%{transform:scale(1.09)} }
@keyframes float         { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes shine         { 0%{left:-100%} 60%{left:130%} 100%{left:130%} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes wiggle        { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }
@keyframes glow          { 0%,100%{box-shadow:0 0 0 0 rgba(0,167,199,.55)} 50%{box-shadow:0 0 30px 10px rgba(0,167,199,.18)} }
@keyframes rippleEffect  { from{transform:scale(0);opacity:.65} to{transform:scale(3.2);opacity:0} }
@keyframes slideDownMenu { from{opacity:0;transform:translateY(-14px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes navbarIn      { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroFallback  { to{opacity:1 !important; transform:none !important;} }

/* ---------- REVEAL BIDIRECCIONAL ---------- */
[data-anim] {
  opacity: 0;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    filter .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform, filter;
}
[data-anim="up"]     { transform: translateY(65px) scale(.98); filter: blur(4px); }
[data-anim="down"]   { transform: translateY(-65px) scale(.98); filter: blur(4px); }
[data-anim="left"]   { transform: translateX(-80px) scale(.98); filter: blur(4px); }
[data-anim="right"]  { transform: translateX(80px) scale(.98); filter: blur(4px); }
[data-anim="zoom"]   { transform: scale(.78); filter: blur(6px); }
[data-anim="rotate"] { transform: rotate(-12deg) scale(.85); filter: blur(4px); }
[data-anim="flip"]   { transform: perspective(1000px) rotateX(-55deg); filter: blur(4px); }
[data-anim="bounce"] { transform: translateY(80px) scale(.9); filter: blur(4px); }

[data-anim].in-view {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Stagger (cascada) */
.stagger > * {
  opacity: 0;
  transform: translateY(45px) scale(.96);
  filter: blur(3px);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1),
    transform .85s cubic-bezier(.22,1,.36,1),
    filter .85s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform, filter;
}
.stagger.in-view > * { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.stagger.in-view > *:nth-child(1) { transition-delay: .06s; }
.stagger.in-view > *:nth-child(2) { transition-delay: .14s; }
.stagger.in-view > *:nth-child(3) { transition-delay: .22s; }
.stagger.in-view > *:nth-child(4) { transition-delay: .30s; }
.stagger.in-view > *:nth-child(5) { transition-delay: .38s; }
.stagger.in-view > *:nth-child(6) { transition-delay: .46s; }
.stagger.in-view > *:nth-child(7) { transition-delay: .54s; }
.stagger.in-view > *:nth-child(8) { transition-delay: .62s; }
.stagger.in-view > *:nth-child(9) { transition-delay: .70s; }
.stagger.in-view > *:nth-child(10){ transition-delay: .78s; }

/* ---------- HERO ---------- */
.hero-section .hero-content > * {
  opacity: 0;
  animation:
    slideInBounce 1s cubic-bezier(.22,1,.36,1) both,
    heroFallback .01s 3s forwards;
}
.hero-section .hero-content > *:nth-child(1) { animation-delay: .15s, 3s; }
.hero-section .hero-content > *:nth-child(2) { animation-delay: .35s, 3s; }
.hero-section .hero-content > *:nth-child(3) { animation-delay: .55s, 3s; }
.hero-section {
  background-size: 300% 300% !important;
  animation: gradientShift 18s ease infinite;
}

/* ---------- NAVBAR (SIN fill-mode residual, SIN filter) ---------- */
.navbar {
  animation: navbarIn .8s cubic-bezier(.22,1,.36,1);
  transition: box-shadow .4s ease, padding .4s ease;
}
.navbar.scrolled {
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  padding-top: 8px;
  padding-bottom: 8px;
}
.nav-logo-img { transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.logo-link:hover .nav-logo-img { transform: scale(1.1) rotate(-4deg); }

.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 4px;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #00a7c7, #e11383);
  transition: width .4s cubic-bezier(.22,1,.36,1);
  border-radius: 2px;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-toggle { transition: transform .3s ease; }
.nav-toggle:hover { transform: scale(1.15) rotate(5deg); }
.nav-toggle:active { transform: scale(.9); }
.nav-links.open { animation: slideDownMenu .4s cubic-bezier(.22,1,.36,1); }

/* ---------- BOTONES ---------- */
.btn-primary, .btn-secondary, .btn-categoria, .btn-submit, .card-app, .app-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease,
    background-color .35s ease,
    color .35s ease;
}
.btn-primary::before, .btn-categoria::before, .btn-submit::before {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn-primary:hover::before,
.btn-categoria:hover::before,
.btn-submit:hover::before { animation: shine 1s ease; }

.btn-primary:hover   { transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 36px rgba(233,30,99,.35); }
.btn-secondary:hover { transform: translateY(-4px) scale(1.03); }
.btn-submit:hover    { transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 36px rgba(0,167,199,.35); }
.btn-submit:active, .btn-primary:active, .btn-secondary:active { transform: translateY(-1px) scale(.98); }
.btn-primary i { transition: transform .35s ease; }
.btn-primary:hover i { transform: translateX(6px); }

/* ---------- CARDS ---------- */
.card-mv, .card-app, .category-card, .producto-card, .detalle-producto,
.benefit-card, .card, .categoria-seccion {
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease,
    border-color .35s ease;
}
.card-mv:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 34px 70px rgba(15,23,42,.18);
}
.card-mv:hover .icon-mv { animation: pulseSoft .9s ease; background: rgba(0,167,199,.20); }
.icon-mv, .card-icon, .detalle-producto__icon, .gift-icon, .icon-circle {
  transition: transform .5s ease, background .4s ease;
}
.card-app:hover { transform: translateY(-8px) scale(1.06); }
.card-app:hover i { animation: wiggle .6s ease; }

/* ---------- WHATSAPP FLOTANTE ---------- */
.btn-float-wa {
  animation: glow 2.4s ease-in-out infinite;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.btn-float-wa:hover { animation: heartbeat 1s ease infinite; transform: scale(1.14); }

/* ---------- CARRUSEL ---------- */
#carouselNormal .carousel-slide { transition: box-shadow .45s ease, transform .45s ease !important; }
#carouselNormal .carousel-slide:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,.4) !important;
  transform: translateY(-6px) scale(1.02);
}
#carouselNormal .carousel-btn {
  transition: background .3s ease, transform .3s ease !important;
}
#carouselNormal .carousel-btn:hover  { transform: translateY(-50%) scale(1.15) !important; }
#carouselNormal .carousel-btn:active { transform: translateY(-50%) scale(.92) !important; }

/* ---------- CATÁLOGO ---------- */
.categoria-seccion.open { animation: fadeInScale .5s cubic-bezier(.22,1,.36,1); }
.toggle-section {
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.toggle-section:hover  { transform: translateY(-3px); }
.toggle-section:active { transform: scale(.95); }

/* ---------- RIPPLE ---------- */
.ripple-host { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  pointer-events: none;
  transform: scale(0);
  animation: rippleEffect .85s ease-out forwards;
  z-index: 5;
}

/* ---------- ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}