﻿.section-cotizador {
    --cotizador-titulo-font-size: 66px;
    --cotizador-padding: 0 5%;
    --cotizador-heigth: 250px;
    --mediopago-font-size: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #F2F2F2;
    height: calc(var(--cotizador-heigth) + var(--cotizador-titulo-font-size) * 5);
    padding-bottom: 20px;
}

    .section-cotizador .imagen-fondo {
        position: relative;
        background-image: url(/image/landing/assisto/cotizador-imagen-fondo.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: calc(var(--cotizador-titulo-font-size) * 5.5);
    }

        .section-cotizador .imagen-fondo .imagen-fondo-contenedor {
            width: 100%;
            position: absolute;
        }

            .section-cotizador .imagen-fondo .imagen-fondo-contenedor .titulo {
                font-family: OpenSans_Condensed-SemiBold;
                font-size: var(--cotizador-titulo-font-size);
                color: #2C90CF;
                text-align: center;
                margin: calc(var(--cotizador-titulo-font-size) * 1) 0;
            }

            .section-cotizador .imagen-fondo .imagen-fondo-contenedor .cotizador {
                padding: 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: NeutrafaceText-Book;
            font-size: var(--mediopago-font-size);
            flex-shrink: 0;
            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: var(--carousel-width);
		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;
		        }
            }

@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 {
        --cotizador-padding: 0 0;
        --cotizador-titulo-font-size: 17px;
        --mediopago-font-size: 7px;
    }

        .section-cotizador .carrousel {
            --carousel-item-width: 10px;
        }
}

/* modo tablet 800px */
@media (min-width: 481px) and (max-width: 1000px) {
    .section-cotizador {
        --cotizador-padding: 0 5%;
        --cotizador-titulo-font-size: 29px;
        --mediopago-font-size: 18px;
    }

        .section-cotizador .carrousel {
            --carousel-item-width: 10px;
        }
}

/* modo laptop 1280px */
@media (min-width: 1001px) and (max-width: 1500px) {
    .section-cotizador {
        --cotizador-padding: 0 5%;
        --cotizador-titulo-font-size: 39px;
        --mediopago-font-size: 24px;
    }
}

/* modo pc 1920px */
@media (min-width: 1501px) and (max-width: 2100px) {
    .section-cotizador {
        --cotizador-padding: 0 5%;
        --cotizador-titulo-font-size: 49px;
        --mediopago-font-size: 28px;
    }
}

/* modo 4k */
@media (min-width: 2101px) {
    .section-cotizador {
        --cotizador-padding: 0 5%;
        --cotizador-titulo-font-size: 90px;
        --mediopago-font-size: 39px;
    }
}





@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;
    }
}

