/* ==========================================
   LANDING HERO
========================================== */


/* ==========================================
   1. LANDING HERO
========================================== */

.landingHero{

    position:relative;

    width:100%;

    min-height:calc(100vh - var(--header-height));

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#081228;

}


/* ==========================================
   2. BACKGROUND
========================================== */

.landingBackground{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:0;

}


/* ==========================================
   3. OVERLAY
========================================== */

.landingOverlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(8,18,40,.82) 0%,
            rgba(8,18,40,.55) 45%,
            rgba(8,18,40,.20) 100%
        );

    z-index:1;

}


/* ==========================================
   4. CONTAINER
========================================== */

.landingContainer{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:60px;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:80px;

}


/* ==========================================
   5. CONTENT
========================================== */

.landingContent{

    max-width:620px;

    animation:fadeUp .8s ease;

}

.landingContent .heroTag{

    margin-bottom:28px;

}

.landingContent h1{

    margin-bottom:28px;

    font-size:clamp(56px,6vw,88px);

    line-height:.92;

    font-weight:700;

    color:#FFFFFF;

}

.landingContent p{

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,.88);

}

/* ==========================================
   6. ACTIONS
========================================== */

.landingActions{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:45px;

}

.landingActions .cta,
.landingActions .ghost{

    min-width:220px;

    height:58px;

}

.landingActions .ghost{

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.25);

    color:#FFFFFF;

    backdrop-filter:blur(12px);

}

.landingActions .ghost:hover{

    background:#FFFFFF;

    color:var(--blue);

}


/* ==========================================
   7. VEHÍCULO
========================================== */

.landingVehicle{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    min-height:550px;

    z-index:2;

    animation:fadeRight .9s ease;

}

.landingVehicle img{

    display:block;

    width:100%;

    max-width:850px;

    height:auto;

    object-fit:contain;

    position:relative;

    z-index:2;

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

    transition:
        transform .4s ease;

}

.landingVehicle img:hover{

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

}

/* ==========================================
   HERO
========================================== */


/* ==========================================
   1. HERO
========================================== */

.hero{

    position:relative;

    padding:100px 0 140px;

    overflow:hidden;

}


/* ==========================================
   2. HERO BANNER
========================================== */

.heroBanner{

    position:relative;

    background:linear-gradient(
        135deg,
        #FFFFFF 0%,
        #F7F9FD 100%
    );

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

    overflow:hidden;

    box-shadow:var(--shadow);

}

/* ==========================================
   3. HERO CONTAINER
========================================== */

.heroContainer{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:80px;

    max-width:1400px;

    margin:0 auto;

    padding:90px 60px;

}


/* ==========================================
   4. HERO OVERLAY
========================================== */

.heroOverlay{

    display:grid;

    grid-template-columns:1fr 560px;

    align-items:center;

    gap:70px;

}

/* ==========================================
   5. HERO CONTENT
========================================== */

.heroContent{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    max-width:620px;

}


/* HERO TAG */

.heroContent .heroTag{

    margin-bottom:28px;

}


/* TÍTULO */

.heroContent h1{

    margin-bottom:30px;

    font-size:clamp(54px,6vw,86px);

    font-weight:700;

    line-height:.92;

    color:var(--blue);

}

.heroContent h1 span{

    color:var(--red);

}


/* DESCRIPCIÓN */

.heroContent p{

    margin-bottom:40px;

    font-size:20px;

    line-height:1.9;

    color:var(--text-light);

}

/* ==========================================
   6. BRANDS
========================================== */

.brandRow{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:24px;

    margin-bottom:40px;

}

.brandRow img{

    width:auto;

    height:42px;

    object-fit:contain;

    opacity:.75;

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

}

.brandRow img:hover{

    opacity:1;

    transform:translateY(-3px);

}


/* ==========================================
   7. FINANCE
========================================== */

.financeRow{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:45px;

}

.financeCard{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 24px;

    background:var(--surface);

    border:1px solid rgba(32,67,145,.08);

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

    box-shadow:var(--shadow-soft);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.financeCard:hover{

    transform:translateY(-5px);

    border-color:rgba(32,67,145,.18);

    box-shadow:var(--shadow);

}

.financeCard i{

    color:var(--red);

    font-size:22px;

}

.financeCard span{

    font-size:16px;

    font-weight:600;

    color:var(--blue);

}

/* ==========================================
   8. VEHÍCULOS
========================================== */

.heroVehicles{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

}


.vehicleSlider{

    position:relative;

    width:100%;

    overflow:hidden;

}


.vehicleTrack{

    position:relative;

    width:100%;

    min-height:620px;

}


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

.vehicleSlide{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transform:translateX(60px);

    transition:

        opacity .6s ease,

        transform .6s ease,

        visibility .6s;

}


.vehicleSlide.active{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}


/* ==========================================
   IMAGEN
========================================== */

.vehicleImage{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    margin-bottom:35px;

}


.vehicleImage img{

    width:100%;

    max-width:760px;

    height:auto;

    object-fit:contain;

    filter:drop-shadow(
        0 35px 60px rgba(0,0,0,.25)
    );

    transition:transform .4s ease;

}


.vehicleImage img:hover{

    transform:translateY(-8px);

}


/* ==========================================
   INFORMACIÓN
========================================== */

.vehicleSlide h3{

    margin-bottom:10px;

    font-size:34px;

    font-weight:700;

    letter-spacing:.08em;

    color:var(--blue);

}


.vehicleSlide span{

    font-size:17px;

    font-weight:600;

    letter-spacing:.12em;

    color:var(--red);

}

/* ==========================================
   9. SLIDER DOTS
========================================== */

.sliderDots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin-top:40px;

}

.dot{

    width:14px;

    height:14px;

    border:none;

    border-radius:50%;

    background:#D5DCE8;

    cursor:pointer;

    transition:
        transform .35s ease,
        background .35s ease;

}

.dot:hover{

    transform:scale(1.2);

}

.dot.active{

    background:var(--red);

    transform:scale(1.35);

}


/* ==========================================
   10. HERO RESPONSIVE
========================================== */

@media (max-width:1100px){

    .heroContainer{

        padding:70px 40px;

    }

    .heroOverlay{

        grid-template-columns:1fr;

        gap:60px;

    }

    .heroContent{

        max-width:100%;

        text-align:center;

        align-items:center;

    }

    .brandRow,
    .financeRow{

        justify-content:center;

    }

    .vehicleTrack{

        min-height:520px;

    }

}


@media (max-width:768px){

    .hero{

        padding:70px 0 100px;

    }

    .heroContainer{

        padding:50px 25px;

    }

    .heroContent h1{

        font-size:52px;

    }

    .heroContent p{

        font-size:18px;

    }

    .vehicleImage img{

        max-width:500px;

    }

    .vehicleTrack{

        min-height:430px;

    }

}


@media (max-width:480px){

    .heroContainer{

        padding:40px 20px;

    }

    .heroContent h1{

        font-size:38px;

    }

    .heroContent p{

        font-size:16px;

    }

    .brandRow{

        gap:16px;

    }

    .brandRow img{

        height:32px;

    }

    .financeRow{

        flex-direction:column;

        width:100%;

    }

    .financeCard{

        justify-content:center;

    }

    .vehicleImage img{

        max-width:320px;

    }

    .vehicleTrack{

        min-height:330px;

    }

}


/* ==========================================
   EXPERIENCE
========================================== */


/* ==========================================
   1. SECTION
========================================== */

.experience{

    padding:120px 0;

}


/* ==========================================
   2. VIDEO SLIDER
========================================== */

.videoSlider{

    display:grid;

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

    gap:32px;

    margin-top:70px;

}

/* ==========================================
   3. VIDEO CARD
========================================== */

.videoCard{

    overflow:hidden;

    background:var(--surface);

    border:1px solid rgba(32,67,145,.08);

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

    box-shadow:var(--shadow-soft);

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.videoCard:hover{

    transform:translateY(-8px);

    border-color:rgba(32,67,145,.18);

    box-shadow:var(--shadow);

}


.videoCard iframe{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    border:0;

}


.videoInfo{

    padding:28px;

}


.videoInfo h3{

    margin-bottom:16px;

    font-size:24px;

    color:var(--blue);

}


.videoInfo p{

    font-size:16px;

    line-height:1.8;

    color:var(--text-light);

}

/* ==========================================
   4. EXPERIENCE RESPONSIVE
========================================== */

@media (max-width:1100px){

    .videoSlider{

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

    }

}


@media (max-width:768px){

    .experience{

        padding:90px 0;

    }

    .videoSlider{

        grid-template-columns:1fr;

        gap:24px;

        margin-top:50px;

    }

}


@media (max-width:480px){

    .videoInfo{

        padding:22px;

    }

    .videoInfo h3{

        font-size:22px;

    }

    .videoInfo p{

        font-size:15px;

    }

}