body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #1e40af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* --- AÑADE ESTA NUEVA CLASE --- */
.logo-gradient-text {
    /* Gradiente basado en los colores de tu vídeo */
    background: linear-gradient(90deg, #0096FF, #BE00C8, #FF8200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
/* --- FIN DE LA NUEVA CLASE --- */

.hero-background {
    position: relative;
    overflow: hidden;
    background-color: #f8fafc;
}

.hero-background::after {
    content: '';
    background-image: url('images/img_portada.png');
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.7;
    z-index: 0;
}

[data-anim] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.card-lift {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.card-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}


/* ====== INICIO: ANIMACIÓN DE FLECHA ====== */
/* Definimos la animación: 
  - 0% y 100%: La flecha está un 20% hacia arriba.
  - 50%: La flecha baja a su posición original.
*/
@keyframes bounce-vertical {
    0%, 100% {
      transform: translateY(-20%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  
  /* Creamos una clase para aplicar la animación.
    Usamos 1.5s para un rebote un poco más suave.
  */
  .animate-bounce-vertical {
    animation: bounce-vertical 1.5s infinite;
  }
  /* ====== FIN: ANIMACIÓN DE FLECHA ====== */