/*
Table of contents
    1. Styles
        1.1. Variables
        1.2. General
    2. Layouts
    3. Typography
    4. Components
        4.1. Buttons
        4.2. Inputs
        4.3. Cards
        4.4. Accordion
        4.5. Tabs
        4.6. Articles
    5. Banners
    6. Utility classes
*/


/* ===========
Global styles
============ */


/* Variables */

:root {
    /*Colors*/
    --grey-100: #fafafa;
    --grey-200: #dedede;
    --grey-300: #9e9e9e;
    --grey-400: #4f4f4f;
    --grey-500: #242424;
    --bs-primary: #043873;
    --bs-primary-rgb: rgb(4, 56, 115);
    --bs-primary-light: #1D64B0;
    --bs-primary-dark: #042E5B;
    --bs-transition-color: #524087;
    --bs-secondary: #c82a42;
    --bs-secondary-dark: #9e2739;
    --color-principal: #043873;
    /*Backgrounds*/
    --bs-body-bg: var(--grey-100);
    --bs-body-bg: var(--bs-body-bg);
    --gradient-1: var(--bs-primary) 0%, var(--bs-primary-light) 100%;
    --gradient-2: var(--bs-primary) 0%, var(--bs-transition-color) 100%;
    --gradient-3: var(--bs-primary-dark) 0%, rgba(82, 64, 135, 0.6) 50%, transparent 100%;
    /*Typography*/
    --bs-body-font-family: 'Open Sans', sans-serif;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--grey-500);
    --bs-link-color: var(--bs-primary-light);
    --bs-link-hover-color: var(--bs-primary-dark);
    /*Components*/
    --header-height: 80px;
}


/* General */

* {
    margin: 0;
    padding: 0;
}

body {
    padding-top: var(--header-height);
}

.text-right {
    text-align: right;
}


/* ===========
Layouts
============ */

.navbar {
    --bs-navbar-active-color: white;
    --bs-navbar-color: white;
    background-color: var(--bs-primary-dark);
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.navbar-brand {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: 0;
    max-width: 200px;
}

.navbar-toggler {
    margin-right: 1rem;
}

.navbar-nav {
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-font-weight: 600;
    --bs-nav-link-color: var(--grey-200);
    --bs-nav-link-hover-color: white;
    --bs-nav-link-disabled-color: rgba(255, 255, 255, 0.4);
    padding: 1rem;
}

.navbar-nav.social {
    flex-direction: row;
    gap: 32px;
}

.navbar-collapse {
    background-color: var(--bs-primary-dark);
}

.nav-link {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.nav-link:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--bs-secondary);
    transform: scaleX(0);
    transition: transform .4s ease;
}

.nav-link:hover:before {
    transform: scaleX(1);
}

footer {
    background-color: var(--bs-primary);
    font-size: 0.875rem;
}

.icon-list>li {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
}

.icon-list>li img {
    margin-right: 8px;
    width: 32px;
}

article {
    margin: 3rem 0;
}

article :is(section) {
    padding: 1rem 0;
}

.sticky {
    position: sticky;
    top: var(--header-height);
}


/* ===========
Typography
============ */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Merriweather', serif;
    font-weight: 700;
}

h6,
.h6 {
    font-size: 0.9rem;
}

a {
    text-decoration: none;
}

.highlight-text {
    font-size: 1.25rem;
    font-family: 'Merriweather', serif;
    padding: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
}

.highlight-text .vr {
    margin-right: 1rem;
}


/* ===========
Components
============ */


/*Buttons*/

.btn {
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 0.9rem;
    --bs-btn-font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.btn-primary {
    background-color: var(--bs-primary-light);
    border-color: var(--bs-primary-light);
    transition: background-color .4s ease;
}

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    transition: background-color .4s ease;
}

.btn-link {
    text-decoration: none;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--bs-secondary-dark);
    border-color: var(--bs-secondary-dark);
}

.btn-icon img {
    width: 24px;
    margin-right: 0.5rem;
}


/*Inputs*/

fieldset {
    margin: 3rem 0;
}

legend {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--grey-400);
}

.form-group {
    padding: 1.5rem 0;
}

.form-control,
.form-select {
    padding: 0.5rem 0.75rem;
    border-radius: 0;
}

.form-label {
    font-weight: 600;
    font-size: 0.895rem;
    width: 100%;
}

.form-control:focus {
    border-color: var(--bs-primary-light);
    box-shadow: 0 0 0 0.25rem rgba(4, 56, 115, 25%);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(200, 42, 66, 25%);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: rgb(0, 167, 119);
    box-shadow: 0 0 0 0.25rem rgba(0, 167, 119, 25%);
}

.card-input-element {
    opacity: 0;
    position: absolute;
}

.card-input {
    padding: 0;
    margin-right: 8px;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.card-input:hover {
    cursor: pointer;
}

.card-input-element:focus+label {
    border-color: var(--bs-primary-light);
    box-shadow: 0 0 0 0.25rem rgba(4, 56, 115, 25%);
}

.card-input-element:checked+.card-input {
    box-shadow: 0 0 0px 1px var(--bs-primary-light);
}

.form-check-input.is-invalid~.card-input,
.was-validated .form-check-input:invalid~.card-input {
    border-color: var(--bs-secondary);
}

.highlight-input {
    margin-bottom: 2rem;
}

.highlight-input input[type=number] {
    border-width: 0;
    padding: 0;
    font-size: 1.75rem;
    text-align: center;
}

.highlight-input .info {
    display: flex;
    justify-content: space-between;
}

.highlight-input label {
    margin-bottom: 0;
    width: auto;
}

.form-step {
    display: none;
}

#success {
    display: none;
}

.progress {
    --bs-progress-bar-bg: var(--bs-primary);
}

.step-marker {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--grey-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--grey-500);
    padding: 0;
}

.step-marker.active {
    background-color: var(--bs-primary);
    color: white;
}

.step-marker.finish {
    background-color: var(--bs-primary-light);
    color: white;
}


/*Cards*/

.card p {
    font-size: 0.85rem;
}

.card-header,
.card-footer {
    background-color: transparent;
    border-width: 0;
}

.card-header {
    color: var(--grey-400);
}

.card-title {
    font-size: 1.25rem;
}

.card-link {
    color: var(--bs-secondary);
}

.img-card {
    border-width: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.img-card,
.img-card img {
    border-radius: var(--bs-border-radius);
}

.img-card.right {
    flex-direction: column-reverse;
}

.text-card {
    border-color: transparent;
    padding: 1.25rem 0;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 5%);
}

.max-900-container {
    max-width: 900px;
    margin: auto;
    padding: 3rem 1rem;
}

.icon-card {
    font-size: 14px;
    color: var(--grey-400);
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 8px;
    height: 100%;
    padding: 1.25rem;
    border-width: 0;
    border-radius: 4px;
    box-shadow: 0px 10px 20px -10px rgb(0 0 0 / 10%);
}

.icon-card.vertical {
    flex-direction: column;
}

.icon-card> :is(img, i) {
    width: 40px;
    font-size: 2rem;
    color: var(--bs-primary-light);
}

.location-card {
    margin: 1.5rem 0;
}

.location-card :is(h3, i) {
    color: var(--bs-primary);
}

.location-card a {
    display: inline-block;
}

.location-card :is(h3, .h3, p, a, i) {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.location-card :is(img, i) {
    max-width: 20px;
    margin-right: 8px;
}


/*Accordion*/

.accordion {
    --bs-accordion-active-color: var(--bs-primary-light);
    --bs-accordion-active-bg: var(--grey-100);
    --bs-accordion-btn-focus-border-color: var(--grey-300);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(4, 56, 115, 25%);
    margin: 2rem 0;
}

.accordion-button {
    color: var(--bs-primary-dark);
}


/*Tabs*/

.tab-content {
    padding: 1.5rem 0;
}


/*Articles*/

.terms-conditions h2 {
    font-size: 1.25rem;
    margin-top: 3rem;
}

.finances-container,
.news-container {
    max-width: 700px;
}


/* ===========
Banners
============ */

img {
    max-width: 100%;
}

iframe {
    aspect-ratio: 4/3;
}

.dark-bg.gradient-1 {
    background: var(--bs-primary-dark);
    background: linear-gradient(225deg, var(--gradient-2));
}

#hero-carousel {
    background-image: url('../_Images/banners/index/vectors.png');
    background-color: var(--bs-primary-dark);
    background-position: center;
    background-repeat: no-repeat;
}

#hero-carousel img {
    display: block;
    width: 100%;
    max-width: 600px;
    margin-right: 10%;
    margin-left: auto;
}

#hero-carousel .carousel-item:nth-child(3) img {
    margin-right: 0;
}

#hero-carousel .carousel-caption {
    max-width: 500px;
    left: 10%;
    right: unset;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

.carousel-caption {
    padding: 0 2rem;
}

.carousel-control-next,
.carousel-control-prev {
    width: 5%;
}

.hero-banner {
    min-height: 400px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(225deg, var(--gradient-2));
}

.hero-banner :is(.text-container) {
    color: white;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

    .hero-banner.credit {
        color: white;
        background-image: linear-gradient(0deg, var(--gradient-3)), url('../_Images/banners/credit/papers.jpg');
    }

    .hero-banner.socio {
        color: white;
        background-image: url('../_Images/banners/atencion-socio/hero-banner-mobile.png');
        background-position: center bottom;
    }

.hero-banner.socio :is(.text-container) {
    left: 2rem;
    transform: translateX(0);
    top: 10%;
}


/* ===========
Utility classes
============ */

.primary-light-bg {
    background-color: var(--bs-primary-light);
}

.primary-dark-bg {
    background-color: var(--bs-primary-dark);
}

.light-bg {
    background-color: rgba(29, 100, 176, 10%);
}

.light-neutral-bg {
    background-color: rgba(0, 0, 30, 4%);
}

.dark-bg :is(h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span) {
    color: var(--grey-200);
}