body {
  font-family: 'Inter', sans-serif;
}

.float-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 45;
  animation: whatsapp-bounce 2s ease-in-out infinite;
  transform-origin: center bottom;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.float-whatsapp:hover {
  transform: scale(1.08);
  animation-play-state: paused;
}

.my-float-whatsapp {
  font-size: 28px;
}

@keyframes whatsapp-bounce {
  0%, 100% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
  15% { transform: translateY(-18px) scale(1.04); animation-timing-function: ease-in; }
  30% { transform: translateY(-6px) scale(1.02); animation-timing-function: ease-out; }
  45% { transform: translateY(-12px) scale(1.03); animation-timing-function: ease-in; }
  60% { transform: translateY(-2px) scale(1.01); animation-timing-function: ease-out; }
  80% { transform: translateY(-6px) scale(1.02); animation-timing-function: ease-in; }
  95% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  .float-whatsapp {
    animation: none;
  }
}

/* Portafolio cards (Plan Premium): reveal on scroll (render.js toggles
   .in-view via IntersectionObserver once each card enters the viewport,
   staggered by the inline transition-delay each card gets), plus a
   hover effect (lift + gold glow; the thumbnail's own zoom is a Tailwind
   group-hover utility set directly on the <img> in render.js). */
.portafolio-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.25s ease;
}

.portafolio-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.portafolio-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(212, 175, 55, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .portafolio-card {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.25s ease;
  }
  .portafolio-card:hover {
    transform: none;
  }
}

/* Loading -> content crossfade on vitrina.html / contratos.html — the DGCP
   API queries main.js waits on can take a moment, so swap the loading
   spinner out and the real page in with a fade instead of an abrupt toggle.
   main.js fades #loading's opacity to 0, removes #app's "hidden" class and
   adds "is-visible" on the next frame (so the opacity:0 -> 1 transition
   below actually runs), then hides #loading once its own fade finishes. */
#app {
  opacity: 0;
  transition: opacity 0.6s ease;
}

#app.is-visible {
  opacity: 1;
}

#loading {
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  #app, #loading {
    transition: none;
  }
}