/* =====================================
   ANIMATIONS.CSS - RB Contabilidades
   ===================================== */

/* Transición general */
*{
  transition: all .3s ease;
}

/* ---------------------------
   Fade Up
---------------------------- */

.fade-up{
  opacity:0;
  transform:translateY(40px);
  transition:
      opacity .8s ease,
      transform .8s ease;
}

.fade-up.show{
  opacity:1;
  transform:translateY(0);
}

/* ---------------------------
   Fade In
---------------------------- */

.fade-in{
  opacity:0;
  transition:opacity .8s ease;
}

.fade-in.show{
  opacity:1;
}

/* ---------------------------
   Zoom In
---------------------------- */

.zoom-in{
  opacity:0;
  transform:scale(.92);
  transition:
      opacity .8s ease,
      transform .8s ease;
}

.zoom-in.show{
  opacity:1;
  transform:scale(1);
}

/* ---------------------------
   Hover tarjetas
---------------------------- */

.card{
  transition:
      transform .35s ease,
      box-shadow .35s ease;
}

.card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 45px rgba(15,23,42,.18);
}

/* ---------------------------
   Hover botones
---------------------------- */

.btn{
  transition:
      transform .3s ease,
      box-shadow .3s ease,
      background .3s ease;
}

.btn:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}

/* ---------------------------
   Navbar Scroll
---------------------------- */

.navbar.scrolled{
  background:#0F172A;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* ---------------------------
   Hero animación
---------------------------- */

.hero h1{
  animation:heroTitle .9s ease forwards;
}

.hero p{
  animation:heroText 1.1s ease forwards;
}

.hero .btn{
  animation:heroButton 1.3s ease forwards;
}

@keyframes heroTitle{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes heroText{
  from{
    opacity:0;
    transform:translateY(35px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes heroButton{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* ---------------------------
   Scroll Reveal
---------------------------- */

.reveal{
  opacity:0;
  transform:translateY(50px);
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
  transition:
      opacity .9s ease,
      transform .9s ease;
}

/* ---------------------------
   Contadores
---------------------------- */

.counter{
  font-size:2.7rem;
  font-weight:800;
  color:#C8A24D;
}

.counter-label{
  margin-top:8px;
  color:#64748B;
  font-weight:600;
}

/* ---------------------------
   Iconos
---------------------------- */

.icon{
  transition:transform .3s ease;
}

.icon:hover{
  transform:scale(1.15) rotate(5deg);
}

/* ---------------------------
   Botón flotante WhatsApp
---------------------------- */

.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:9999;
  animation:pulse 2.2s infinite;
}

@keyframes pulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }

}