﻿.section-cotizador {
    --titulo-font-size: 12px;
    --titulo-padding-top: 0px;
    --titulo-padding-bottom: 0px;
    --cotizador-padding: 0px;
    --cotizador-heigth: 250px;
    --mediopago-font-size: 0px;
    width: 100%;
    padding-bottom: calc(var(--mediopago-font-size) * 2);
    background-image: url(/image/landing/tsv/section-cotizador.fondo.1286.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}

    .section-cotizador .titulo {
        font-family: 'Montserrat-Bold';
        font-size: var(--titulo-font-size);
        margin-left: calc(var(--lupa-width) * .8);
        color: #324360;
        display: flex;
        padding-top: var(--titulo-padding-top);
        padding-bottom: var(--titulo-padding-bottom);
        padding-right: var(--cotizador-padding);
        justify-content: flex-start;
    }

    .section-cotizador .cotizador {
        padding-left: var(--cotizador-padding);
        padding-right: var(--cotizador-padding);
    }
        .section-cotizador .cotizador iframe {
            height: var(--cotizador-heigth);
        }

    .section-cotizador .mediopagos {
        display: flex;
        justify-content: center;
        align-content: center;
        width: 50%;
        gap: 24px;
        border-radius: 12px;
        padding: calc(var(--mediopago-font-size)*.5) var(--mediopago-font-size);
        background-color: #fff;
    }
    .section-cotizador .mediopagos .title {
        font-family: Montserrat-SemiBold;
        font-size: var(--mediopago-font-size);
        flex-shrink: 0;
        font-weight: bold;
        width: max-content;
    }


    .section-cotizador .carrousel {
        display: flex;
        margin-top: calc(var(--mediopago-font-size)*.2);
		--carousel-duration: 30s;
		--carousel-width: min(80vw,1200px); /* CALCULAR */
		--carousel-item-width: 100px;
		--carousel-item-height: var(--mediopago-font-size);
		--carousel-item-gap: 2rem;
		--clr-cta: rgb(0, 132, 209);

		position: relative;
		width: 100%;
		height: var(--carousel-item-height);
		overflow: clip;
    }


            .section-cotizador .carrousel > img {
		        position: absolute;
		        top: 0;
		        left: calc(100% + var(--carousel-item-gap));
		        height: var(--carousel-item-height);
		        display: grid;
		        grid-template-rows: 200px auto 1fr auto;
		        gap: 0.25rem;

		        /* animation */
		        will-change: transform;
		        animation-name: marquee;
		        animation-duration: var(--carousel-duration);
		        animation-timing-function: linear;
		        animation-iteration-count: infinite;
		        animation-delay: calc( var(--carousel-duration) / var(--items) * 1 * var(--i) * -1 );
		        &:nth-child(1) {
			        --i: 0;
		        }
		        &:nth-child(2) {
			        --i: 1;
		        }
		        &:nth-child(3) {
			        --i: 2;
		        }
		        &:nth-child(4) {
			        --i: 3;
		        }
		        &:nth-child(5) {
			        --i: 4;
		        }
		        &:nth-child(6) {
			        --i: 5;
		        }
		        &:nth-child(7) {
			        --i: 6;
		        }
		        &:nth-child(8) {
			        --i: 7;
		        }
            }


    .section-cotizador .logo-principal {
        display: flex;
        justify-content: center;
        margin-top: calc(var(--mediopago-font-size) * 1);
    }
        .section-cotizador .logo-principal img {
            height: calc(var(--mediopago-font-size) * 8);
        }



@keyframes marquee {
    100% {
        transform: translateX( calc( (var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) * -1 ) );
    }
}


/* modo mobile 360px */
@media (min-width: 0px) and (max-width: 480px) {
    .section-cotizador {
        background-image: url(/image/landing/tsv/section-cotizador.fondo.360.png);
        --titulo-font-size: 11px;
        --titulo-padding-top: 24px;
        --titulo-padding-bottom: 16px;
        --cotizador-padding: 32px;
        --mediopago-font-size: 8px;
    }

        .section-cotizador .titulo {
            color: #FFFFFF;
        }

        .section-cotizador .carrousel {
            --carousel-item-width: 10px;
        }
}

/* modo tablet 800px */
@media (min-width: 481px) and (max-width: 1000px) {
    .section-cotizador {
        --titulo-font-size: 21px;
        --titulo-padding-top: 50px;
        --titulo-padding-bottom: 40px;
        --cotizador-padding: 78px;
        --mediopago-font-size: 14px;
    }

        .section-cotizador .carrousel {
            --carousel-item-width: 10px;
        }
}

/* modo laptop 1280px */
@media (min-width: 1001px) and (max-width: 1500px) {
    .section-cotizador {
        --titulo-font-size: 35px;
        --titulo-padding-top: 100px;
        --titulo-padding-bottom: 80px;
        --cotizador-padding: 125px;
        --mediopago-font-size: 24px;
    }
}

/* modo pc 1920px */
@media (min-width: 1501px) and (max-width: 2100px) {
    .section-cotizador {
        --titulo-font-size: 35px;
        --titulo-padding-top: 100px;
        --titulo-padding-bottom: 80px;
        --cotizador-padding: 133px;
        --mediopago-font-size: 24px;
    }
}

/* modo 4k */
@media (min-width: 2101px) {
    .section-cotizador {
        --titulo-font-size: 46px;
        --titulo-padding-top: 100px;
        --titulo-padding-bottom: 80px;
        --cotizador-padding: 321px;
        --mediopago-font-size: 24px;
    }
}

@media (min-width: 930px) and (max-width: 1540px) {
    .section-cotizador {
        --cotizador-heigth: 310px;
    }
}
@media (min-width: 0px) and (max-width: 929px) {
    .section-cotizador {
        --cotizador-heigth: 550px;
    }
}