/* Estilos generales del social bar */
.social-bar {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0px;
}

.social-icon {
text-decoration: none;
color: white;
padding: 10%;
border-radius: 5px;
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
}

/* Colores para cada red social */
.whatsapp { background-color: #47cf73; }
.facebook { background-color: #3b5998; }
.twitter { background-color: #1da1f2; }
.instagram { background-color: #c32aa3; }
.linkedin { background-color: #0077b5; }
.youtube { background-color: red; }
.pinterest { background-color: #f72c33; }
.tiktok { background-color: black; }

/* Responsive para móvil */
@media (max-width: 768px) {
.social-bar {
background-color: #191C24; 
position: sticky;
display: flex;
flex-direction: row;
justify-content: center;
bottom: 0;
top: unset;
transform: none;
left: unset;
gap: 0;
width: 100%;
}

.social-icon {
width: -webkit-fill-available;
height: 20px;
font-size: 20px;
padding: 3%;
}

.social-bar.fixed-bottom {
position: static;
background-color: #191C24;
}
}