/* Colores personalizados */
:root {
    --primary-color: #0092e1;
    --secondary-color: #003340;
    --lighten-1: #7fd2ff;
    --lighten-2: #8dd7ff;
    --lighten-3: #9bdcff;
    --lighten-4: #a9e1ff;
    --lighten-5: #b8e6ff;
    --darken-1: #0092e1;
    --darken-2: #54c3ff;
    --darken-3: #46beff;
    --darken-4: #37b9ff;
    --text-color: #ffffff;
    --text-secondary-color: #1A1A1A;
    --icon-color: #0092e1;

    --nav-bg: #2b5561;
    --footer-bg: #191a19;
    /* --invercar-nav-color: #40BCE4; */
}

@font-face {
    font-family: 'Barlow';
    src: url('/clientes/invercar/headerfooter/font/Barlow/Barlow-Regular.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'Barlow Bold';
    src: url('/clientes/invercar/headerfooter/font/Barlow/Barlow-Bold.ttf') format('truetype');
    font-weight: bold;
}

/* Estilos de .invercar */

.white.darken-1 {
    background-color: var(--nav-bg) !important;
}

.navbar-fixed nav.invercar.darken-1 {
    background-color: var(--nav-bg) !important;
    color: var(--secondary-color);
}

.invercar {
    background-color: var(--primary-color) !important;
}

.dtp-header,
.dtp-actual-month,
.dtp-actual-num {
    color: var(--text-color) !important;
}

.navbar-fixed nav.invercar.darken-1,
.nav-wrapper ul li a {
    color: var(--text-color) !important;
}

.invercar-text,
.material-icons.prefix.invercar-text {
    color: var(--primary-color);
}

.invercar.lighten-1,
.invercar-text.text-lighten-1 {
    background-color: var(--lighten-1) !important;
    color: var(--lighten-1) !important;
}

.invercar.lighten-2,
.invercar-text.text-lighten-2 {
    background-color: var(--lighten-2) !important;
    color: var(--lighten-2) !important;
}

.invercar.lighten-3,
.invercar-text.text-lighten-3 {
    background-color: var(--lighten-3) !important;
    color: var(--lighten-3) !important;
}

.invercar.lighten-4,
.invercar-text.text-lighten-4 {
    background-color: var(--lighten-4) !important;
    color: var(--lighten-4) !important;
}

.invercar.footer-copyright>.container {
    color: var(--text-color) !important;
}

.invercar.lighten-5,
.invercar-text.text-lighten-5 {
    background-color: var(--lighten-5) !important;
    color: var(--lighten-5) !important;
}

.invercar.darken-1,
.invercar-text.text-darken-1 {
    background-color: var(--darken-1) !important;
}

.invercar.darken-2,
.invercar-text.text-darken-2 {
    background-color: var(--darken-2) !important;
    /* color: var(--darken-2) !important; */
}

.invercar.darken-3,
.invercar-text.text-darken-3 {
    background-color: var(--darken-3) !important;
    color: white !important;
}

.invercar.darken-4,
.invercar-text.text-darken-4 {
    background-color: var(--darken-4) !important;
    /* color: var(--darken-4) !important; */
}

.button-collapse i {
    color: var(--icon-color) !important;
}

.mispasos .done .step,
.mispasos .done .step:before,
.mispasos .done .step:after,
.mispasos .active .step,
.mispasos .active .step:before {
    background-color: var(--secondary-color) !important;
}

.mispasos .done .step,
.mispasos .active .step {
    border: 3px solid var(--secondary-color) !important;
}

.nombregrupo.invercar-text {
    color: var(--secondary-color) !important;
}

#btnLogin {
    color: var(--text-color) !important;
}

/* Estilos adicionales */
#btnBuscar {
    font-size: 12px;
    color: var(--text-color) !important;
}

#btnBuscar i {
    font-size: 14px;
    margin-left: 0px;
}

/* Custom invercar */
.barrasombra {
    display: none !important;
}

/* FOOTER CUSTOM */
footer.invercar {
    background-color: var(--footer-bg) !important;
    min-height: 60vh;
    display: flex;
    color: white !important;
    overflow: hidden;
    font-family: Barlow !important;
}

footer.invercar .main__wrapper {
    flex: 1;
    padding: 3.5rem 4rem;
    display: flex;
}

footer.invercar .main {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* border: 1px solid white; */
}

footer.invercar .main .invercar__row {
    display: flex;
}

footer.invercar .aside {
    width: calc(95px + 1rem);
    position: relative;
    overflow: visible;
}

footer.invercar .whatsapp {
    /* background-color: #009e46; */
    background-color: #00c788;
    position: absolute;
    top: 50%;
    transform: translate(15%, -50%);
    height: 60%;
    width: 200%;
    border-top-left-radius: 75px;
    border-bottom-left-radius: 75px;
    display: flex;
    padding: 1.5rem;
    align-items: center;
}

footer.invercar .whatsapp:hover {
    cursor: pointer;
    animation: invercarCallToActionBounce 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

/* cubic-bezier(0.075, 0.82, 0.165, 1) */

@keyframes invercarCallToActionBounce {
    0% {
        transform: translate(15%, -50%);
    }

    50% {
        transform: translate(8%, -50%);
    }

    100% {
        transform: translate(15%, -50%);
    }
}

footer.invercar .whatsapp img {
    width: 35px;
}

footer.invercar .main .label {
    align-items: center;
    justify-content: space-between;
    transform: translate(-25px, -30px);
}

footer.invercar .logo__wrapper {
    width: 250px;
}

footer.invercar .logo__wrapper img {
    width: 100%;
}

footer.invercar .socials ul {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 0.5rem;
}

footer.invercar .socials .social__item svg {
    width: 25px;
    aspect-ratio: 1/1;
    max-height: 25px;
}

footer.invercar .legal {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

footer.invercar .legal .goberment {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

footer.invercar .legal .goberment img {
    max-width: 600px;
    object-fit: contain;
}

footer.invercar .extra {
    display: flex;
    justify-content: space-between;
}

footer.invercar .legal .links {
    flex: 1;
    display: flex;
    gap: 2.5rem;
}

footer.invercar .legal .links a,
footer.invercar .info .info__list .list__item a {
    color: inherit;
    text-decoration: none;
    font-weight: 300;
}

footer.invercar .legal .links a,
footer.invercar .legal {
    font-size: 16px;
    margin: 0;
}

footer.invercar .info {
    flex: 1;
    display: flex;
    gap: 15%;
}

footer.invercar .info .info__item {
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
}

footer.invercar .info .info__item .item__title {
    font-weight: 400;
    color: #0092E1;
    font-size: 1.3rem;
    letter-spacing: 0.2px;
    margin: 0;
}

footer.invercar .info .info__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 1.6rem;
    padding: 0;
    margin: 0;
}

footer.invercar .info .info__list .list__item a:hover, footer.invercar .legal .links a:hover {
    color: #0092E1;
}

.copyright span {
    font-size: 14px;
    font-weight: 300;
}

footer.invercar .social__item {
    overflow: hidden;
}

footer.invercar .social__item a {
    padding: 1rem;
}

footer.invercar .social__item a:hover > svg {
    animation: socialLogoAnimation 500ms ease-in-out forwards;
}

footer.invercar .social__item a:hover > svg > path {
    animation: socialLogoFillAnimation 500ms ease-in-out forwards;
}

@keyframes socialLogoAnimation {
    0% {
        transform: translateY(0);
    }        
    49.99% {
        transform: translateY(-150%);
    }
    50% {
        transform: translateY(150%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes socialLogoFillAnimation {
    0% {
        fill: #ffffff;
    }        
    49% {
        fill: #ffffff;
    }
    50% {
        fill: #0092E1;
    }
    100% {
        fill: #0092E1;
    }
}


@media only screen and (max-width: 750px) {
    footer.invercar .main__wrapper {
        width: 100%;
        padding: 2rem 2rem 3.5rem 2rem;
        display: flex;
    }

    footer.invercar .main {
        width: 100%;
        gap: 2.5rem;
    }

    footer.invercar .main .label {
        width: 100%;
        transform: translateX(-20px);
    }

    footer.invercar .extra {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    footer.invercar .aside {
        display: none;
    }

    footer.invercar .info {
        justify-content: space-between;
    }

    footer.invercar .goberment img {
        max-width: 250px;
        width: 100%;
    }

    footer.invercar .extra .links {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}