/* ============================================================
   Animaciones — Transiciones y efectos
   ============================================================ */

/* ---------- Fade up ---------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Fade in ---------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.fade-in {
    opacity: 0;
    transition: opacity 0.9s ease;
}
.fade-in.visible { opacity: 1; }

/* ---------- Scale in ---------- */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.scale-in {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* ---------- Slide right ---------- */
.slide-right {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Slide left ---------- */
.slide-left {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- Stagger delays ---------- */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ---------- Hero entrance ---------- */
.hero-content > * {
    opacity: 0;
    animation: fadeUp 1s ease forwards;
}
.hero-content .hero-subtitle { animation-delay: 0.2s; }
.hero-content .hero-title    { animation-delay: 0.4s; }
.hero-content .hero-text     { animation-delay: 0.6s; }
.hero-content .hero-cta      { animation-delay: 0.8s; }

/* ---------- Floating animation (scroll indicator) ---------- */
@keyframes floatY {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-12px); }
}
.hero-scroll-indicator { animation: floatY 2s ease-in-out infinite; }

/* ---------- Pulse (WhatsApp) ---------- */
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.whatsapp-float { animation: pulseRing 2.4s infinite; }

/* ---------- Page transition ---------- */
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageEnter 0.6s ease forwards; }

/* ---------- Hover lift utility ---------- */
.hover-lift { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.hover-lift:hover { transform: translateY(-6px); }

/* ---------- Underline grow ---------- */
.underline-grow {
    position: relative;
    display: inline-block;
}
.underline-grow::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 3px;
    background-color: var(--color-gold);
    transition: width 0.5s ease;
}
.underline-grow.visible::after { width: 100%; }