body {
      font-family: 'Inter', sans-serif;
      /* Añadido el desplazamiento suave a toda la página */
      scroll-behavior: smooth;
    }

    /* Estilos para el efecto de "cristal esmerilado" en el header */
    .header-glass {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    /* Contenedor de la portada con gradiente de colores vivos y posición relativa para las ondas */
    .hero-wave-container {
      position: relative;
      /* Cambiado el degradado a tonos morado y cian vibrantes */
      background: linear-gradient(to right, #8b5cf6, #06b6d4);
      /* Ajuste de altura de la portada al 30% del ancho de la ventana */
      height: 25vw;
      min-height: 250px; /* Altura mínima para una buena visualización en dispositivos pequeños */
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      overflow: hidden; /* Evita que las ondas animadas generen un scroll horizontal */
    }

    /* Estilos para las ondas de la portada */
    .hero-wave-svg {
      position: absolute;
      bottom: -1px; /* Ajusta a -1px para evitar un pequeño espacio con el body */
      left: 0;
      width: 100%;
      pointer-events: none;
      /* Ajuste del viewBox para que las ondas sean menos altas */
      height: 100px;
    }

    /* Animación para la primera capa de onda */
    .wave-path-1 {
      animation: move-wave 10s linear infinite;
    }

    /* Animación para la segunda capa de onda (más lenta) */
    .wave-path-2 {
      animation: move-wave 12s linear infinite;
      opacity: 0.5;
    }

    /* Animación para la tercera capa de onda (aún más lenta) */
    .wave-path-3 {
      animation: move-wave 15s linear infinite;
      opacity: 0.25;
    }
    
    /* Keyframes de la animación de movimiento de la onda */
    @keyframes move-wave {
      0% {
        transform: translate3d(-90px, 0, 0);
      }
      100% {
        transform: translate3d(85px, 0, 0);
      }
    }


    /* Código CSS por defecto para pantallas grandes (desktop) */
.logo-grupo-ser {
  margin-top: 12%;
  width: 25vw;
}

/* Media query para pantallas más pequeñas (tablets y móviles) */


/* ===== MÓVILES PEQUEÑOS ===== */
/* iPhone SE, Galaxy S8, etc. */
@media (max-width: 374px) {
  .logo-grupo-ser {
    margin-top: 30%;
    width: 65vw;
  }
}

/* ===== MÓVILES MEDIANOS ===== */
/* iPhone 12/13/14, Galaxy S21, etc. */
@media (min-width: 375px) and (max-width: 480px) {
  .logo-grupo-ser {
    margin-top: 25%;
    width: 260px;
  }
}

/* ===== MÓVILES GRANDES ===== */
/* iPhone Plus, Galaxy Note, etc. */
@media (min-width: 481px) and (max-width: 600px) {
  .logo-grupo-ser {
    margin-top: 20%;
    width: 270px;
  }
}

/* ===== TABLETS PEQUEÑAS (PORTRAIT) ===== */
/* iPad Mini, Galaxy Tab A, etc. */
@media (min-width: 601px) and (max-width: 768px) {
  .logo-grupo-ser {
    margin-top: 18%;
    width: 280px;
     
  }
}

/* ===== TABLETS MEDIANAS (PORTRAIT/LANDSCAPE) ===== */
/* iPad, Galaxy Tab S, etc. */
@media (min-width: 769px) and (max-width: 1024px) {
  .logo-grupo-ser {
    margin-top: 15%;
    width: 300px;
  }
}

.loader {
    width: 18px;
    height: 18px;
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }