/* Importa la fuente Inter de Google Fonts */
body {
    font-family: 'Fira Sans', sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Oculta barras de desplazamiento si la animación es más grande */
    background-color: #0a0a0a; /* Fondo negro profundo */
    color: #ffffff; /* Color de texto principal (blanco puro) */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
}

/* Contenedor de partículas para el fondo */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; /* Asegura que esté detrás del contenido principal */
}

/* Contenido principal (centrado sobre las partículas) */
.content {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté por encima de las partículas */
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

h1 {
    font-size: 4rem; /* Tamaño grande para desktop */
    font-weight: 300; /* Peso ligero */
    margin-bottom: 40px; /* Espacio debajo del título */
    letter-spacing: -1px; /* Ajuste para mejor lectura */
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espacio entre los iconos */
}

.social-links a {
    display: block;
    width: 60px; /* Tamaño de los botones circulares */
    height: 60px;
    border: 2px solid #3a86ff; /* Contorno sutil azul tecnológico */
    border-radius: 50%; /* Circular */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease; /* Transición suave para el hover */
    text-decoration: none; /* Quita el subrayado del enlace */
}

.social-links a:hover {
    background-color: #3a86ff; /* Fondo azul en hover */
    transform: scale(1.05); /* Efecto de escala sutil */
    border-color: #3a86ff; /* Asegura el color del borde en hover */
}

.social-links img {
    width: 30px; /* Tamaño de los iconos SVG */
    height: 30px;
    filter: invert(100%); /* Hace que los iconos SVG sean blancos por defecto */
    transition: filter 0.3s ease; /* Transición para el color del icono */
}

.social-links a:hover img {
    filter: invert(0%); /* Vuelve el icono negro en hover si el fondo es azul */
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
    h1 {
        font-size: 3rem; /* Tamaño de texto para tabletas */
    }

    .social-links a {
        width: 50px; /* Tamaño de los botones en tabletas */
        height: 50px;
    }

    .social-links img {
        width: 25px; /* Tamaño de los iconos en tabletas */
        height: 25px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.5rem; /* Tamaño de texto para móviles */
        margin-bottom: 30px;
    }

    .social-links {
        gap: 20px; /* Menor espacio entre iconos en móviles */
    }

    .social-links a {
        width: 48px; /* Mínimo 48x48px para táctiles en móviles */
        height: 48px;
    }

    .social-links img {
        width: 24px; /* Tamaño de los iconos en móviles */
        height: 24px;
    }
}