body {
    padding-top: 40px;
    font-family: 'Funnel Display', sans-serif;
    background-color: rgb(10 10 26 / var(--tw-bg-opacity, 1));
    position: relative; /* Necesario para posicionar el pseudo-elemento */
}

.titulos {
  position: relative; /* Asegurar que esté en el flujo del documento */
  z-index: 10; /* Asegurar que esté por encima de otros elementos */
  color: #ffffff; /* Texto blanco */
  text-align: center; /* Centrar el texto */
  font-size: 3rem; /* Tamaño grande para destacar */
  font-weight: bold; /* Resaltar el texto */
  display: flex; /* Usar flexbox para centrar */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  margin-top: 100px; /* Añadir espacio superior para mover el título más abajo */
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.5); /* Sombra para destacar */
  background: linear-gradient(90deg, #4facfe, #00f2fe); /* Gradiente de color */
  background-clip: text; /* Clip para aplicar gradiente al texto */
  -webkit-background-clip: text; /* Clip para aplicar gradiente al texto en navegadores Webkit */
  -webkit-text-fill-color: transparent; /* Relleno transparente para el gradiente */
  animation: fadeIn 2s ease-in-out; /* Animación de entrada */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer {
    position: relative; /* Cambiado de fixed a relative */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Altura del footer */
    background-color: rgba(10, 10, 26, 0.8); /* Color de fondo con opacidad */
    color: white; /* Color del texto */
    text-align: center; /* Centrar el texto */
    line-height: 60px; /* Centrar verticalmente el texto */
    z-index: 1000; /* Asegurar que esté por encima de otros elementos */
}