@font-face {
    font-family: 'Airbeat';
    src: url('../fonts/Airbeat.otf') format('opentype'),
         url('../fonts/Airbeat.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Estilos personalizados */
body {
    font-family: 'Ubuntu', sans-serif;
    background-color: #070b0c;
    color: #f1f1e9;
    cursor: none; /* Oculta el cursor por defecto */
}
h1, .h1-font {
    font-family: 'Airbeat', sans-serif;
}
/* El lienzo para la animación de partículas */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
/* Contenedor del contenido para que esté sobre el lienzo */
.hero-content {
    position: relative;
    z-index: 3; /* Asegura que el contenido esté sobre el cursor y las partículas */
}
/* Estilo para los botones de llamada a la acción */
.cta-button {
    display: inline-block;
    border: 2px solid #2beeee;
    color: #22babb;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 9999px; /* Forma de píldora */
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: transparent;
}
.cta-button:hover {
    background-color: #22babb;
    color: #0a0a0a;
    box-shadow: 0 0 20px #22babb;
    transform: translateY(-2px);
}

/* Animación de parpadeo del cursor de texto */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #22babb; }
}

/* Estilos para el contenido que aparece después */
#content-after-headline {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
#content-after-headline.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Cursor Personalizado */
#custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background-color: #00ffff;
    border-radius: 50%;
    pointer-events: none; /* Para que no interfiera con los clics */
    left: -50px; /* Posición inicial fuera de la pantalla */
    top: -50px;
    transform: translate(-50%, -50%);
    z-index: 2; /* Entre las partículas y el contenido */
    box-shadow: 0 0 15px 5px rgba(36, 151, 155, 0.4);
    transition: transform 0.2s ease-out, background-color 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 768px) {
    body {
        cursor: auto; /* Muestra el cursor por defecto en móviles */
    }
    #custom-cursor {
        display: none; /* Oculta el cursor personalizado en móviles */
    }

    /* Evita que el footer se solape con el contenido en móviles */
    .hero-content {
        padding-bottom: 5rem;
    }
}