@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* Contenedor para alinear el botón de Discord a la izquierda */
.discord-container {
    text-align: left;
    padding: 4px;
    margin-left: 20px; /* Ajuste para separarlo más de los otros iconos */
    display: inline-block;
}

/* Estilos específicos para el botón de Discord */
.custom-discord-button {
    background-color: #7289DA;  /* Color de fondo de Discord */
    border: none;
    color: white;  /* Texto en color blanco */
    padding: 10px 25px;  /* Espaciado interno */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;  /* Tamaño del texto */
    font-family: 'Roboto Medium', sans-serif;  /* Fuente de texto */
    border-radius: 15px;  /* Bordes redondeados */
    transition: background-color 0.3s ease, transform 0.3s ease;  /* Animación suave en hover */
    cursor: pointer;
    margin-right: 20px; /* Agrega un margen a la derecha para separar del botón de Facebook */
}

.custom-discord-button:hover {
    background-color: #5b6eae;  /* Color más oscuro al hacer hover */
    transform: scale(1.05);  /* Ligera ampliación en hover */
}

/* Estilo específico del icono de Discord dentro del botón */
.custom-discord-button i {
    margin-right: 8px;  /* Espaciado entre el icono y el texto */
}

/* Nueva clase social-panel-bottom */
@media screen and (max-width: 600px) {
    /* Ocultar barra de iconos sociales en pantallas móviles */
    .social-panel-bottom {
        display: none;
    }
}

@media screen and (min-width: 601px) {
    /* Mostrar barra de iconos sociales en pantallas más grandes */
    .social-panel-bottom {
        display: block;
    }
}

.social-panel-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo más oscuro */
    z-index: 100;
    padding: 15px 0;
    text-align: center;
}

/* Contenedor de los iconos */
.social-icons-container {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.social-icon-buttons {
    display: flex;
    justify-content: space-between;
}

.social-icon {
    font-size: 24px;  /* Aumentar el tamaño del icono */
    width: 50px;      /* Ajustar el tamaño del contenedor del icono */
    height: 50px;     /* Ajustar el tamaño del contenedor del icono */
    border-radius: 50%;
    color: white;
    background-color: #333; /* Fondo de los iconos para mejor visibilidad */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-right: 20px; /* Espacio entre los iconos ajustado */
}

/* Definir clases específicas de Font Awesome dentro de los iconos sociales */
.social-icon i {
    font-size: 20px;  /* Tamaño del icono dentro del círculo */
    color: white;  /* Asegurarse de que el color del icono sea blanco */
    line-height: 1;
    display: block;  /* Mostrar el ícono como un bloque para asegurar su visibilidad */
}

.social-icon:hover {
    transform: scale(1.2) rotate(360deg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.facebook {
    background-color: #3b5998;
}
.twitter {
    background-color: #55acee;
}
.linkedin {
    background-color: #0976b4;
}
.youtube {
    background-color: #bb0000;
}
.instagram {
    background-color: #C13584;
}
.twitch {
    background-color: #C13584;
}

/* Asegúrate de que los enlaces no estén bloqueados */
a.social-icon {
    position: relative;
    text-decoration: none;
    cursor: pointer;
    z-index: 101;
}

.social-icon:hover {
    transform: scale(1.2) rotate(360deg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}