/* =========================================
LOTES PAGE
========================================= */

#lotes-page{

    width:100%;
    background:#f7f7f7;
}

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

.hero-lotes-premium{

    position:relative;
    width:100%;
    min-height:82vh;

    display:flex;
    align-items:center;

    padding:120px 8%;

    background:url("../img/recorrido-bg.jpg")
    center/cover no-repeat;

    overflow:hidden;
}

.hero-lotes-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.15) 100%
    );

    z-index:1;
}

.hero-lotes-content{

    position:relative;
    z-index:2;

    max-width:700px;

    color:#fff;

    margin-top:80px;
}

.hero-lotes-content h1{

    font-size:62px;
    line-height:1.05;

    font-weight:800;

    margin-bottom:30px;
}

.hero-lotes-content p{

    font-size:18px;
    line-height:1.8;

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

    margin-bottom:40px;

    max-width:620px;
}

/* BOTONES */

.hero-lotes-buttons{

    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.hero-lotes-buttons a{

    padding:18px 34px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.3s ease;
}

.hero-lotes-buttons a:first-child{

    background:#ff5b1f;
    color:#fff;
}

.hero-lotes-buttons a:first-child:hover{

    transform:translateY(-4px);
}

.btn-outline{

    border:2px solid #fff;
    color:#fff;
}

.btn-outline:hover{

    background:#fff;
    color:#111;
}

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

.beneficios-lotes{

    width:100%;
    max-width:1400px;

    margin:auto;
    padding:90px 5%;

    display:grid;

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

    gap:30px;

    justify-content:center;
}

.beneficio-card{

    background:#fff;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    transition:.3s ease;

    box-shadow:
    0 8px 24px rgba(0,0,0,.05);
}

.beneficio-card:hover{

    transform:translateY(-8px);
}

.beneficio-card img{

    width:70px;
    height:70px;

    object-fit:contain;

    margin:auto auto 25px;
}

.beneficio-card h3{

    font-size:20px;
    line-height:1.5;

    color:#111;
}

/* =========================================
PROPERTY MANAGEMENT
========================================= */

.property-management{

    width:100%;
    max-width:1400px;

    margin:auto;
    padding:60px 5% 120px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;
    align-items:center;
}

.property-text span{

    display:inline-block;

    color:#ff5b1f;

    font-weight:700;

    margin-bottom:20px;

    letter-spacing:2px;
}

.property-text h2{

    font-size:52px;
    line-height:1.1;

    margin-bottom:30px;

    color:#111;
}

.property-text p{

    font-size:17px;
    line-height:1.9;

    color:#555;
}

.property-image{

    position:relative;
}

.property-image img{

    width:100%;

    border-radius:28px;

    object-fit:cover;
}

/* =========================================
SECURITY BENEFITS
========================================= */

.security-benefits{

    width:100%;
    max-width:1400px;

    margin:auto;
    padding:0 5% 120px;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:30px;
}

.security-card{

    background:#fff;

    padding:50px 35px;

    border-radius:28px;

    text-align:center;

    transition:.3s ease;

    box-shadow:
    0 8px 24px rgba(0,0,0,.05);
}

.security-card.active{

    background:#0c5132;
    color:#fff;
}

.security-card:hover{

    transform:translateY(-8px);
}

.security-icon{

    width:72px;
    height:72px;

    margin:auto auto 25px;

    border-radius:50%;

    background:#ff5b1f;

    display:flex;
    align-items:center;
    justify-content:center;
}

.security-icon i{

    font-size:36px;
    color:#fff;
}

.security-card h3{

    font-size:22px;
    line-height:1.6;
}

/* =========================================
FINANCE BANNER
========================================= */

.financiamiento-banner{

    position:relative;

    width:100%;
    min-height:360px;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:40px;
}

.finance-bg{

    position:absolute;
    inset:0;

    background:url("../img/finance-banner.jpg")
    center/cover no-repeat;
}

.finance-overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.55);
}

.finance-content{

    position:relative;
    z-index:2;

    width:100%;
    max-width:1400px;

    padding:0 5%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;
}

.finance-text span{

    color:#ff5b1f;

    font-weight:700;

    letter-spacing:2px;
}

.finance-text h2{

    font-size:52px;
    line-height:1.1;

    color:#fff;

    margin:20px 0;
}

.finance-text p{

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

    line-height:1.8;

    max-width:520px;
}

.finance-btn{

    display:flex;
    align-items:center;
    gap:15px;

    background:#ff5b1f;

    color:#fff;

    text-decoration:none;

    padding:20px 34px;

    border-radius:16px;

    font-weight:700;

    transition:.3s ease;
}

.finance-btn:hover{

    transform:translateY(-5px);
}

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

@media(max-width:992px){

    .hero-lotes-content h1{

        font-size:56px;
    }

    .property-management{

        grid-template-columns:1fr;
    }

    .finance-content{

        flex-direction:column;
        align-items:flex-start;
    }
}

@media(max-width:768px){

    .hero-lotes-premium{

        min-height:auto;

        padding:140px 7% 100px;
    }

    .hero-lotes-content h1{

        font-size:42px;
    }

    .hero-lotes-content p{

        font-size:16px;
    }

    .property-text h2,
    .finance-text h2{

        font-size:42px;
    }

    .finance-btn{

        width:100%;
        justify-content:center;
    }
    .beneficios-lotes{

        grid-template-columns:1fr;
    }
}

@media(max-width:480px){

    .hero-lotes-content h1{

        font-size:36px;
    }

    .beneficio-card,
    .security-card{

        padding:35px 25px;
    }

    .property-text h2,
    .finance-text h2{

        font-size:34px;
    }
}

/* =========================================
LARGE DESKTOP
========================================= */

@media(max-width:1600px){

.hero-lotes-content h1{

    font-size:62px;
}

.property-text h2,
.finance-text h2{

    font-size:54px;
}

}

/* =========================================
LAPTOP
========================================= */

@media(max-width:1400px){

.hero-lotes-content{

    max-width:620px;
}

.hero-lotes-content h1{

    font-size:56px;
}

.hero-lotes-content p{

    font-size:17px;
}

.beneficios-lotes{

    gap:24px;
}

.property-management{

    gap:60px;
}

.property-text h2,
.finance-text h2{

    font-size:48px;
}

}

/* =========================================
TABLET
========================================= */

@media(max-width:992px){

.hero-lotes-premium{

    min-height:75vh;

    padding:
    150px
    7%
    90px;
}

.hero-lotes-content{

    margin-top:40px;
}

.hero-lotes-content h1{

    font-size:50px;

    line-height:1;
}

.hero-lotes-content p{

    font-size:16px;

    max-width:100%;
}

.hero-lotes-buttons{

    gap:14px;
}

.beneficios-lotes{

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

.property-management{

    grid-template-columns:1fr;

    gap:50px;
}

.finance-content{

    flex-direction:column;

    align-items:flex-start;
}

}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

.hero-lotes-premium{

    min-height:auto;

    padding:
    130px
    24px
    80px;
}

.hero-lotes-content{

    max-width:100%;

    margin-top:20px;
}

.hero-lotes-content h1{

    font-size:40px;

    line-height:1.02;

    margin-bottom:22px;
}

.hero-lotes-content p{

    font-size:15px;

    line-height:1.7;

    margin-bottom:30px;
}

.hero-lotes-buttons{

    width:100%;

    flex-direction:column;
}

.hero-lotes-buttons a{

    width:100%;

    text-align:center;

    padding:
    16px
    24px;
}

.beneficios-lotes{

    grid-template-columns:1fr;

    padding:
    70px
    24px;

    gap:20px;
}

.beneficio-card{

    padding:
    35px
    24px;
}

.beneficio-card img{

    width:60px;
    height:60px;
}

.beneficio-card h3{

    font-size:20px;
}

.property-management{

    padding:
    40px
    24px
    80px;
}

.property-text h2,
.finance-text h2{

    font-size:36px;

    line-height:1.05;
}

.property-text p,
.finance-text p{

    font-size:15px;

    line-height:1.7;
}

.security-benefits{

    padding:
    0
    24px
    80px;
}

.security-card{

    padding:
    35px
    24px;
}

.security-icon{

    width:68px;
    height:68px;
}

.security-icon i{

    font-size:28px;
}

.financiamiento-banner{

    min-height:auto;

    padding:
    80px
    0;
}

.finance-content{

    padding:
    0
    24px;
}

.finance-btn{

    width:100%;

    justify-content:center;

    padding:
    16px
    24px;
}

}

/* =========================================
SMALL MOBILE
========================================= */

@media(max-width:480px){

.hero-lotes-content h1{

    font-size:34px;
}

.property-text h2,
.finance-text h2{

    font-size:30px;
}

}