/* =========================================================
   cPOSFarma — Animaciones e interacciones
   ---------------------------------------------------------
   Se carga DESPUES de custom.css / style.css para poder
   ajustar algunos hovers ya existentes.
   El JS que la acompaña es js/animations.js
   ========================================================= */

:root {
  --anim-primary: #079ee3;
  --anim-accent: #4caf50;
  --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Evita barras horizontales por los desplazamientos laterales del revelado */
body {
  overflow-x: hidden;
}

/* Scroll suave para los enlaces del menu (#hero, #about, #services) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

/* =========================================================
   1. REVELADO AL HACER SCROLL
   El estado oculto (opacity:0) lo inyecta js/animations.js
   antes del primer pintado para que no haya parpadeo.
   ========================================================= */
[data-anim] {
  transition: opacity 0.55s var(--anim-ease), transform 0.55s var(--anim-ease);
  transition-delay: var(--anim-delay, 0ms);
}

[data-anim="up"]:not(.anim-in) {
  transform: translate3d(0, 18px, 0);
}

[data-anim="down"]:not(.anim-in) {
  transform: translate3d(0, -16px, 0);
}

[data-anim="left"]:not(.anim-in) {
  transform: translate3d(-22px, 0, 0);
}

[data-anim="right"]:not(.anim-in) {
  transform: translate3d(22px, 0, 0);
}

[data-anim="zoom"]:not(.anim-in) {
  transform: scale(0.97);
}

[data-anim="fade"]:not(.anim-in) {
  transform: none;
}

[data-anim].anim-in {
  opacity: 1;
  transform: none;
}

/* En pantallas chicas todo entra en vertical: evita rebotes laterales */
@media (max-width: 991.98px) {
  [data-anim="left"]:not(.anim-in),
  [data-anim="right"]:not(.anim-in) {
    transform: translate3d(0, 16px, 0);
  }
}

/* =========================================================
   2. NAVBAR
   ========================================================= */
.navbar {
  transition: background-color 0.35s ease, padding 0.35s ease,
    box-shadow 0.35s ease, transform 0.4s var(--anim-ease);
}

/* Se esconde al bajar y reaparece al subir (lo controla animations.js) */
.navbar.nav-hidden {
  transform: translateY(-115%);
}

.navbar-brand img {
  transition: transform 0.35s var(--anim-ease);
  transform-origin: left center;
}

.navbar.active .navbar-brand img {
  transform: scale(0.92);
}

@media (min-width: 992px) {
  .navbar-nav .nav-link {
    position: relative;
    transition: color 0.25s ease;
  }

  .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--anim-primary);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s var(--anim-ease);
  }

  .navbar-nav .nav-link:hover::after,
  .navbar-nav .nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .navbar-nav .nav-link:hover {
    color: var(--anim-primary);
  }
}

/* =========================================================
   3. BOTONES
   ========================================================= */
.btn-primary,
.btn-card-service,
.btn-contact-prorroga {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--anim-bounce), box-shadow 0.25s ease,
    background-color 0.25s ease, border-color 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.35rem 0.8rem rgba(7, 158, 227, 0.22);
}

/* Botones mamey: mismo efecto pero con su propio color de sombra */
.btn-card-service:hover,
.btn-contact-prorroga:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.35rem 0.8rem rgba(253, 179, 20, 0.28);
}

.btn-primary:active,
.btn-card-service:active,
.btn-contact-prorroga:active {
  transform: translateY(-1px);
}

/* Destello que cruza el boton al pasar el mouse */
.btn-primary::after,
.btn-card-service::after,
.btn-contact-prorroga::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.btn-primary:hover::after,
.btn-card-service:hover::after,
.btn-contact-prorroga:hover::after {
  left: 150%;
}

.btn i {
  transition: transform 0.25s var(--anim-bounce);
}

.btn:hover i {
  transform: scale(1.08);
}

/* Latido suave para el CTA de urgencia (solo sombra, no mueve el boton) */
@keyframes ctaPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(7, 158, 227, 0.22);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(7, 158, 227, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(7, 158, 227, 0);
  }
}

.btn-pulse {
  animation: ctaPulse 2.6s ease-out infinite;
}

.btn-pulse:hover {
  animation-play-state: paused;
}

/* =========================================================
   4. TARJETAS
   ========================================================= */
.card.shadow {
  transition: transform 0.35s var(--anim-ease), box-shadow 0.35s ease;
}

.card.shadow:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.6rem 1.2rem rgba(7, 158, 227, 0.1) !important;
}

/* Tarjetas de servicios (#about): sombra mamey, a juego con sus botones */
#about .row.pb-5 .card.shadow:hover {
  box-shadow: 0 0.6rem 1.2rem rgba(253, 179, 20, 0.18) !important;
}

/* Zoom muy leve de la imagen de cabecera */
#about .row.pb-5 .card {
  overflow: hidden;
}

#about .row.pb-5 .card > img {
  transition: transform 0.55s var(--anim-ease);
}

#about .row.pb-5 .card:hover > img {
  transform: scale(1.025);
}

/* Tarjetas de caracteristicas (#services): rebote del icono */
#services .card-body > img {
  transition: transform 0.4s var(--anim-bounce);
}

#services .card:hover .card-body > img {
  transform: translateY(-3px) scale(1.07);
}

#services .card h3 {
  transition: color 0.3s ease;
}

#services .card:hover h3 {
  color: var(--anim-primary);
}

/* =========================================================
   5. HERO — flotacion suave de las capturas
   ========================================================= */
@keyframes floatSoft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.hero .screen img {
  animation: floatSoft 7s ease-in-out infinite;
}

.hero .screen img:hover {
  animation-play-state: paused;
}

/* Logos de partners (Microsoft / AWS) */
.horizontal-flex-container img {
  transition: transform 0.35s var(--anim-ease), filter 0.35s ease;
  filter: grayscale(35%);
}

.horizontal-flex-container img:hover {
  transform: translateY(-3px) scale(1.02);
  filter: grayscale(0%);
}

/* =========================================================
   6. CONTADOR DE e-CF
   ========================================================= */
#ecf-stats .col-lg-10 > div {
  transition: transform 0.4s var(--anim-ease), box-shadow 0.4s ease;
}

#ecf-stats .col-lg-10 > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
}

#ecf-stats img {
  transition: transform 0.5s var(--anim-ease);
}

#ecf-stats .col-lg-10 > div:hover img {
  transform: scale(1.015);
}

#contador-ecf {
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   7. CUENTA REGRESIVA
   ========================================================= */
#contador-regresivo .flip-card {
  transition: transform 0.3s var(--anim-bounce);
}

#contador-regresivo .flip-card:hover {
  transform: translateY(-3px);
}

.flip-label {
  transition: color 0.3s ease;
}

.flip-card:hover .flip-label {
  color: var(--anim-primary);
}

/* =========================================================
   8. TESTIMONIOS
   ========================================================= */
#testimonials .card {
  transition: transform 0.4s var(--anim-ease), box-shadow 0.4s ease;
}

#testimonials .swiper-slide .card {
  transform: scale(0.985);
  opacity: 0.88;
  transition: transform 0.5s var(--anim-ease), opacity 0.5s ease;
}

#testimonials .swiper-slide-active .card {
  transform: scale(1);
  opacity: 1;
}

.testimonial-img img {
  transition: transform 0.45s var(--anim-bounce);
}

.swiper-slide-active .testimonial-img img {
  transform: scale(1.03);
}

#testimonials .swiper-pagination-bullet {
  transition: transform 0.3s var(--anim-bounce), opacity 0.3s ease;
}

#testimonials .swiper-pagination-bullet-active {
  transform: scale(1.25);
}

/* =========================================================
   9. LOGOS DE CLIENTES (slick)
   Sin cambios: el carrusel y su hover quedan como estaban,
   definidos en custom.css
   ========================================================= */

/* =========================================================
   10. LISTAS CON CHECK
   ========================================================= */
.list-check li::before {
  transition: transform 0.3s var(--anim-bounce), color 0.3s ease;
}

.list-check li:hover::before {
  transform: translateY(-50%) scale(1.2);
  color: var(--anim-accent);
}

/* =========================================================
   11. PIE DE PAGINA
   ========================================================= */
.footer-link {
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s var(--anim-ease);
}

.footer-link:hover {
  transform: translateX(4px);
  color: var(--anim-primary);
}

.social-link {
  transition: transform 0.3s var(--anim-bounce), background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.3rem 0.65rem rgba(7, 158, 227, 0.22);
}

/* =========================================================
   12. BOTON "VOLVER ARRIBA"
   ========================================================= */
.scroll-top-btn {
  transition: bottom 0.4s var(--anim-ease), transform 0.3s var(--anim-bounce),
    background-color 0.3s ease, box-shadow 0.3s ease;
}

.scroll-top-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0.35rem 0.75rem rgba(7, 158, 227, 0.25);
}

.scroll-top-btn i {
  transition: transform 0.3s var(--anim-bounce);
}

.scroll-top-btn:hover i {
  transform: translateY(-3px);
}

/* =========================================================
   13. ACCESIBILIDAD — respeta "reducir movimiento"
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}