/* Estilo del botón de Google */
.google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #ffffff;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    color: #333333;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.google-btn img {
    width: 30px;
    margin-right: 10px;
}

.google-btn:hover {
    background-color: #f1f1f1;
    color: #333333;
}

/* Línea debajo del icono y texto al pasar el cursor en el botón de Google */
.google-btn span {
    position: relative;
}

.google-btn span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #333333;  /* Línea de color gris oscuro */
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.google-btn:hover span::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Estilo del botón de Facebook */
.btn-facebook {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #3b5998;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease; /* Añadido 'color' para la transición */
}

.btn-facebook img {
    width: 30px;
    margin-right: 10px;
}

.btn-facebook:hover {
    background-color: #2d4373;
    color: #ffffff; /* Cambiar el color del texto a morado cuando el cursor está encima */
}

/* Línea debajo del icono y texto al pasar el cursor */
.btn-facebook span {
    position: relative;
}

.btn-facebook span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.btn-facebook:hover span::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}