*{margin: 0; padding: 0}

@font-face {
    font-family: 'Fira Sans';
    src: url('../assets/fonts/FiraSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../assets/fonts/FiraSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../assets/fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../assets/fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.Titillium_Web{
    font-family: 'Titillium Web'!important;
    font-style: normal;
    line-height: normal;
}

/*la liena horizontal de colores*/
.linea-colores {
    display: flex;
    width: 100%; /* Puedes ajustar el ancho de la línea */
    height: 5px; /* Alto de la línea, puedes ajustarlo */
}
.linea-colores > div {
    flex: 1; /* Esto asegura que cada sección ocupe el mismo espacio */
}
/*/la liena horizontal de colores*/

/* Estilos base del botón */
.btn-google {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none; 
    font-family: Fira-Sans, sans-serif;
    font-size: 16px;
    color: #000; 
    background-color: #fff; 
    border: 1px solid #dadce0; 
    border-radius: 24px; 
    padding: 10px 20px; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 100%;
    margin-bottom: 10px;
}

/* Estilo de hover */
.btn-google:hover {
    background-color: #f8f9fa; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 
}

/* Logo de Google */
.google-logo {
    width: 20px;
    height: 20px;
    margin-right: 10px; 
}



@media (max-width: 575px) {    
    .rowFormImg{
        height: auto;
        display: flex;
        flex-direction: column;
    }

    #imgResponsivo{
        height: 300px;
    }
    
    .rowLineColor{
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;    
        position: relative;
        top: 7.5em;    
    }

    .rowSpace{
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;    
        position: relative;
        top: 7.5em;    
    }

    .rowPie{
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end;    
        position: relative;
        top: 7.5em;    
    }
}