footer {
    background-color: #0A0A0A;
    color: #f2f2f2;
    position: fixed; /* ¡La clave para que sea fijo! */
    bottom: 0; /* Lo fija en la parte inferior */
    left: 0; /* Lo alinea a la izquierda */
    width: 100%; /* Ocupa todo el ancho */
    z-index: 1000; /* Asegura que esté por encima de otros elementos si hay conflicto */
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho/alto */
    margin: 0;
}

/* El resto de tus estilos del footer (social, social-item, etc.) se mantienen igual */
.social{
    display: flex;
    justify-content: center;
}
.social-item{
    margin: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.social-logo-item{
    width: 30px;
    height: 30px;
    padding: 12px;
}
.social-title{
    font-family: "Kanit", serif;
    font-weight: 400;
    color: #999999;
    font-size: 18px;
    transition: all 0.5s ease 0s;
}
.social-title:hover{
    color: #f2f2f2;
}

@media (max-width: 768px) {

    .social-item{
        margin: 6px;
    }
    .social-logo-item{
        width: 20px;
        height: 20px;
        padding: 8px;
    }
    .social-title{
        font-size: 16px;
    }
}