/* ==========================================
   CATÁLOGO
========================================== */


/* ==========================================
   CONTENEDOR
========================================== */

.comingCatalog{

    padding:80px 20px 120px;

}

.comingContainer{

    display:flex;

    flex-direction:column;

    align-items:center;

    max-width:1200px;

    margin:0 auto;

    text-align:center;

}


/* ==========================================
   ETIQUETA
========================================== */

.comingTag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:35px;

    padding:12px 24px;

    background:#EEF3FF;

    border-radius:var(--radius-full);

    color:var(--blue);

    font-size:15px;

    font-weight:700;

    letter-spacing:.05em;

}


/* ==========================================
   TÍTULO
========================================== */

.comingCatalog h1{

    max-width:850px;

    margin-bottom:25px;

    color:var(--blue);

    font-size:76px;

    line-height:.95;

}


/* ==========================================
   TEXTO
========================================== */

.comingCatalog p{

    max-width:760px;

    color:var(--text-light);

    font-size:21px;

    line-height:1.9;

}


/* ==========================================
   VEHÍCULO DESTACADO
========================================== */

.comingPreview{

    position:relative;

    isolation:isolate;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:520px;

    margin-top:70px;

    overflow:hidden;

}


/* DECORACIÓN */

.comingPreview::before,
.comingPreview::after{

    content:"";

    position:absolute;

    border-radius:50%;

    z-index:0;

}

.comingPreview::before{

    width:560px;

    height:560px;

    background:rgba(32,67,145,.06);

}

.comingPreview::after{

    width:280px;

    height:280px;

    background:rgba(205,32,39,.05);

    transform:translate(180px,120px);

}


/* IMAGEN */

.comingPreview img{

    position:relative;

    z-index:1;

    display:block;

    width:100%;

    max-width:720px;

    height:auto;

    object-fit:contain;

    filter:drop-shadow(0 35px 45px rgba(0,0,0,.22));

    transition:transform .4s ease;

}

.comingPreview img:hover{

    transform:translateY(-8px) scale(1.02);

}


/* INFORMACIÓN */

.comingPreview h3,
.comingPreview span{

    position:relative;

    z-index:1;

}

.comingPreview h3{

    margin-top:30px;

    color:var(--blue);

    font-size:38px;

    letter-spacing:.04em;

    transition:color .35s ease;

}

.comingPreview span{

    margin-top:6px;

    color:var(--red);

    font-size:17px;

    font-weight:700;

    letter-spacing:.08em;

}

/* ==========================================
   BENEFICIOS
========================================== */

.comingFeatures{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    width:100%;

    margin-top:90px;

}

.featureCard{

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:42px 32px;

    text-align:center;

}

.featureCard i{

    margin-bottom:24px;

}

.featureCard h3{

    margin-bottom:18px;

    font-size:24px;

}

.featureCard p{

    font-size:16px;

    line-height:1.8;

}

/* ==========================================
   MARCAS
========================================== */

.comingBrands{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:center;

    gap:36px;

    margin-top:90px;

}

.comingBrands img{

    width:auto;

    height:40px;

    object-fit:contain;

    opacity:.65;

    filter:grayscale(100%);

    transition:
        opacity .35s ease,
        transform .35s ease,
        filter .35s ease;

}

.comingBrands img:hover{

    opacity:1;

    transform:translateY(-5px) scale(1.06);

    filter:grayscale(0);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1100px){

    .comingCatalog{

        padding:70px 20px 100px;

    }

    .comingCatalog h1{

        font-size:60px;

    }

    .comingCatalog p{

        font-size:19px;

    }

    .comingPreview{

        min-height:460px;

    }

    .comingPreview::before{

        width:420px;

        height:420px;

    }

    .comingPreview::after{

        width:220px;

        height:220px;

        transform:translate(160px,90px);

    }

    .comingPreview img{

        max-width:620px;

    }

    .comingFeatures{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

    .comingBrands{

        gap:30px;

    }

}


@media (max-width:768px){

    .comingCatalog{

        padding:60px 20px 90px;

    }

    .comingCatalog h1{

        font-size:42px;

        line-height:1;

    }

    .comingCatalog p{

        font-size:17px;

        line-height:1.8;

    }

    .comingPreview{

        min-height:340px;

        margin-top:50px;

    }

    .comingPreview::before{

        width:300px;

        height:300px;

    }

    .comingPreview::after{

        display:none;

    }

    .comingPreview img{

        max-width:340px;

    }

    .comingPreview h3{

        font-size:30px;

    }

    .comingPreview span{

        font-size:15px;

    }

    .comingFeatures{

        grid-template-columns:1fr;

        gap:20px;

    }

    .featureCard{

        padding:34px 26px;

    }

    .uiCardIcon{

        width:64px;

        height:64px;

        font-size:26px;

    }

    .comingBrands{

        margin-top:70px;

        gap:24px;

    }

    .comingBrands img{

        height:34px;

    }

}


@media (max-width:480px){

    .comingCatalog{

        padding:50px 15px 80px;

    }

    .comingCatalog h1{

        font-size:34px;

    }

    .comingCatalog p{

        font-size:16px;

    }

    .comingPreview{

        min-height:280px;

    }

    .comingPreview::before{

        width:240px;

        height:240px;

    }

    .comingPreview img{

        max-width:260px;

    }

    .comingPreview h3{

        font-size:24px;

    }

    .comingPreview span{

        font-size:14px;

    }

    .featureCard{

        padding:30px 22px;

    }

    .featureCard h3{

        font-size:21px;

    }

    .featureCard p{

        font-size:15px;

    }

    .comingBrands{

        gap:18px;

    }

    .comingBrands img{

        height:28px;

    }

}