html {
      scroll-behavior: smooth;
    }

    body {
      overflow-x: hidden;
    }

    /* ==============================
       REVEAL ANIMATIONS
    ============================== */

    [data-reveal] {
      opacity: 0;
      transform: translateY(35px);
      transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.16, 1, .3, 1);
    }

    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    [data-reveal-left] {
      opacity: 0;
      transform: translateX(-45px);
      transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.16, 1, .3, 1);
    }

    [data-reveal-left].is-visible {
      opacity: 1;
      transform: translateX(0);
    }

    [data-reveal-right] {
      opacity: 0;
      transform: translateX(45px);
      transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(.16, 1, .3, 1);
    }

    [data-reveal-right].is-visible {
      opacity: 1;
      transform: translateX(0);
    }

    .delay-1 {
      transition-delay: .1s;
    }

    .delay-2 {
      transition-delay: .2s;
    }

    .delay-3 {
      transition-delay: .3s;
    }

    .delay-4 {
      transition-delay: .4s;
    }

    /* ==============================
       FLOAT BADGES
    ============================== */

    @keyframes badgeFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    .badge-float {
      animation: badgeFloat 4s ease-in-out infinite;
    }

    .badge-float.delay-a {
      animation-delay: .8s;
    }

    .badge-float.delay-b {
      animation-delay: 1.6s;
    }

    /* ==============================
       NAV ACTIVE
    ============================== */

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      bottom: -7px;
      left: 0;
      width: 0;
      height: 2px;
      border-radius: 999px;
      background: #2563EB;
      transition: width .3s ease;
    }

    .nav-link:hover::after {
      width: 100%;
    }
    /* =========================================
   REAL TIME BADGES
========================================= */

.realtime-badge {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* MARÍA */
.realtime-badge-1 {
  animation: realtimeFloat1 5s ease-in-out infinite;
}


/* PAPÁ */
.realtime-badge-2 {
  animation: realtimeFloat2 6s ease-in-out infinite;
  animation-delay: -2s;
}


/* DIEGO */
.realtime-badge-3 {
  animation: realtimeFloat3 5.5s ease-in-out infinite;
  animation-delay: -1s;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes realtimeFloat1 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(4px, -8px);
  }

}


@keyframes realtimeFloat2 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-5px, -6px);
  }

}


@keyframes realtimeFloat3 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(4px, -7px);
  }

}


/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {

  .realtime-badge {
    animation: none !important;
  }

}
/* =========================================
   HERO MAGNIFIER
========================================= */

#heroMagnifierImage {
  cursor: crosshair;
}

#heroLens {
  opacity: 0;
  transition:
    opacity 0.15s ease,
    box-shadow 0.2s ease;

  will-change: left, top;
}

#heroMagnifier:hover #heroLens {
  box-shadow:
    0 15px 35px rgba(37, 99, 235, 0.22),
    0 0 0 6px rgba(37, 99, 235, 0.05);
}


/* No mostrar lupa en dispositivos táctiles */
@media (hover: none), (pointer: coarse) {

  #heroLens {
    display: none !important;
  }

  #heroMagnifierImage {
    cursor: default;
  }

}