/* Fuentes (Roboto - textos) (Lato - Titulos) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

/* Navbar */
.navbar__font,
.aviso-privacidad {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.logo {
    width: 70px;
}

.bg__portada {
    background-image: linear-gradient(
    35deg,
    hsl(0deg 100% 49%) 0%,
    hsl(8deg 100% 55%) 10%,
    hsl(17deg 100% 62%) 12%,
    hsl(25deg 100% 68%) 14%,
    hsl(33deg 100% 75%) 15%,
    hsl(42deg 100% 81%) 16%,
    hsl(50deg 100% 88%) 17%,
    hsl(51deg 100% 86%) 18%,
    hsl(47deg 100% 79%) 19%,
    hsl(43deg 100% 73%) 20%,
    hsl(40deg 100% 67%) 21%,
    hsl(36deg 100% 61%) 22%,
    hsl(33deg 100% 54%) 24%,
    hsl(27deg 98% 48%) 26%,
    hsl(17deg 92% 44%) 29%,
    hsl(7deg 86% 39%) 33%,
    hsl(357deg 79% 34%) 37%,
    hsl(347deg 73% 29%) 44%,
    hsl(337deg 67% 25%) 53%,
    hsl(327deg 61% 20%) 74%
    );
    height: 90vh;
    line-height: 90vh;
}

.logo__content {
    width: 350px;
    filter: drop-shadow(0px 2px 18px #000);
}

.portada__font {
    font-family: 'Roboto', sans-serif;
}

.somos__font {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
}

.somos__div {
    width: 400px;
    border: solid 2px red;
    margin: 16px auto;
}

#quienes__somos ul {
    list-style: none;
    text-align: center;
    padding: 0;
    font-weight: 500;
    font-family: 'Roboto';
    margin-top: 20px;
}

#quienes__somos p {
    font-family: 'Roboto', sans-serif;
    text-align: justify;
    line-height: 30px;
    font-size: 18px;
}

/* Como funciona */
.font__como-funciona {
    font-family: 'Roboto', sans-serif;
}

.subtitle__como-funciona {
    font-family: 'Lato', sans-serif;
}

picture {
    background: #b30000;
    border-radius: 50%;
    border: 3px solid #7d0000;
    padding: 22px;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.75);
}

picture svg {
    color: whitesmoke;
}

.div__card {
    border: 2px solid red;
    width: 200px;
}

.paragraph__card {
    font-family: 'Roboto', sans-serif;
}

.title__card-docs {
    font-family: 'Roboto', sans-serif;
}

.list__docs {
    font-family: 'Roboto', sans-serif;
    list-style-type: none;
    padding: 0;
    text-align: center;
}

/* Tipos de créditos */
.font__tipos-credito {
    font-family: 'Roboto', sans-serif;
}

.div__tipos-credito {
    width: 200px;
    border: 2px solid red;
    margin: 20px auto;
}

.card__creditos p {
    font-family: 'Roboto', sans-serif;
}

.title__cards {
    font-family: 'Roboto', sans-serif;
}

.div__creditos {
    width: 150px;
    border: 2px solid red;
    margin: 10px auto;
}

.font__button {
    font-family: 'Roboto', sans-serif !important;
}

.bg__calculadora {
    background-color: #f5f5f5;
    font-family: 'Roboto', sans-serif;
}

.bg__faq {
    background-image: linear-gradient( 89.4deg,  rgba(194,0,39,1) 0.8%, rgba(10,35,104,1) 99.4%);
}

.font__title-faq {
    font-family: 'Roboto', sans-serif;
}

.font__faq {
    font-family: 'Lato', sans-serif;
}

.ul__faq {
    font-family: 'Roboto', sans-serif;
    list-style: circle;
    padding: 0;
    font-weight: 500;
    line-height: 30px;
}

.font__form {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.bg__footer {
    background-color: #343a40;;
}

.font__footer {
    font-family: 'Roboto', sans-serif !important;
    color: #f5f5f5;
}

#footer ul {
    list-style: none;
    text-align: center;
    padding: 0;
    line-height: 30px;
}

#footer a {
    color: whitesmoke;
    text-decoration: none;
}

#footer a:hover {
    color: steelblue;
}

.font__card {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

@media only screen and (max-width: 1188px) {
    .navbar__font {
        font-size: 15px;
    }
}

@media only screen and (max-width: 425px) {
    .somos__div,
    .tipos__div {
        width: 250px;
    }
}

@media only screen and (max-width: 580px) {
    .logo__content {
        width: 200px;
    }
}