body,
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: 'Inter', sans-serif;
        background-color: #424250;
        color: #424250;
        overflow: hidden;
        /* Evita scroll con partículas */
    }

    #particles-js {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    /* Efecto de apagado inicial (pantalla negra) */
    #light-effect {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 9999;
        animation: fadeOut 2s ease-in-out forwards;
        animation-delay: 0.1s;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @keyframes fadeOut {
        to {
            opacity: 0.6;
            visibility: hidden;
        }
    }

    /* Bombilla de carga */
    .bulb {
        font-size: 5rem;
        color: #424250;
        animation: bulbFlicker 1.5s ease-in-out infinite;
    }

    @keyframes bulbFlicker {

        0%,
        100% {
            opacity: 0.3;
            transform: scale(0.95);
        }

        50% {
            opacity: 0.8;
            transform: scale(1.05);
            color: #ffeb3b;
        }
    }

    .content {
        position: relative;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 20px;
    }

    /* Logo dentro del contenedor .content */
    .logo {
        max-width: 300px;
        /* Ajusta este valor */
        height: auto;
        margin-bottom: 10px;
        /* Espacio entre logo y texto */
        transition: all 0.3s ease;
    }

    .logo:hover {
        transform: scale(1.05);
        filter: drop-shadow(0 0 8px rgba(0, 102, 255, 0.3));
    }

    h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #D5DD4D;
        text-transform: uppercase;
    }

    h2 {
        font-weight: 500;
        font-size: 1.5rem;
        max-width: 800px;
        margin: 0 auto 2rem;
        color: rgba(255, 255, 255, 0.8);
    }

    .cta-button {
        background: rgba(197, 210, 0, 1);
        color: #424250;
        padding: 15px 30px;
        font-size: 1.2rem;
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.3s;
        margin-top: 2rem;
    }

    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(197, 210, 0, 0.6);;
    }

    small {
        display: block;
        margin-top: 3rem;
        color: rgba(255, 255, 255, 0.5);
    }

    /* Estilos para los botones flotantes */
    .float-social {
        position: fixed;
        bottom: 30px;
        right: 30px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        z-index: 100;
    }

    .float-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        color: white;
        font-size: 1.8rem;
        text-decoration: none;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }

    .float-social a:hover {
        transform: scale(1.1) translateY(-5px);
    }

    .whatsapp {
        background: #25D366;
    }

    .facebook {
        background: #1877F2;
    }

    @media (max-width: 768px) {
        h1 {
            font-size: 2rem;
        }

        h2 {
            font-size: 1.2rem;
        }

        .float-social {
            bottom: 20px;
            right: 20px;
        }

        .float-social a {
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
        }
    }