/* ===== HERO ENTRANCE ===== */
.hero__badge   { animation: fadeSlideUp 0.7s 0.1s both; }
.hero__title   { animation: fadeSlideUp 0.7s 0.25s both; }
.hero__subtitle { animation: fadeSlideUp 0.7s 0.35s both; }
.hero__desc    { animation: fadeSlideUp 0.7s 0.45s both; }
.hero__actions { animation: fadeSlideUp 0.7s 0.58s both; }

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

/* ===== NAVBAR ENTRANCE ===== */
.navbar { animation: fadeDown 0.5s 0.05s both; }
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== PULSE WHATSAPP ===== */
@keyframes pulse-whatsapp {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.45); }
  50%       { box-shadow: 0 4px 32px rgba(37,211,102,0.72), 0 0 0 8px rgba(37,211,102,0.12); }
}

/* ===== PULSE TELEGRAM ===== */
@keyframes pulse-telegram {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,136,204,0.45); }
  50%       { box-shadow: 0 4px 32px rgba(0,136,204,0.72), 0 0 0 8px rgba(0,136,204,0.12); }
}

/* ===== SHIMMER ON CARDS (hover) ===== */
.servicio-card { position: relative; overflow: hidden; }
.servicio-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.servicio-card:hover::before { left: 125%; }

/* ===== SCROLL PROGRESS BAR ===== */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #D4A843, #8A5A3B);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ===== ACTIVE NAV LINK ===== */
.navbar__menu a.active {
  color: var(--brown);
}
.navbar__menu a.active::after { width: 100%; }

/* ===== HERO DECO CIRCLES ===== */
.hero__deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero__deco-1 {
  width: 320px; height: 320px;
  top: -80px; right: -80px;
  background: radial-gradient(circle, rgba(212,168,67,0.14) 0%, transparent 70%);
  animation: floatDeco 7s ease-in-out infinite;
}
.hero__deco-2 {
  width: 200px; height: 200px;
  bottom: 40px; left: -60px;
  background: radial-gradient(circle, rgba(90,46,19,0.08) 0%, transparent 70%);
  animation: floatDeco 9s ease-in-out infinite reverse;
}
@keyframes floatDeco {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(12px, -16px) scale(1.05); }
}