/* COLORES BASE */

:root{

--negro:#0A0A0A;
--gris:#F4F4F4;
--gris-oscuro:#1A1A1A;
--dorado:#C9A96A;

}


/* FIX SCROLL HORIZONTAL
   Las animaciones AOS (fade-left/fade-right) dejan los elementos con
   translateX(±100px) antes de entrar al viewport, lo que sobresale del
   ancho de pantalla y genera barra horizontal. Se recorta el desborde X. */

html,
body{
    overflow-x:hidden;
    max-width:100%;
}

/* FIX SCROLL HORIZONTAL EN MOVIL
   Las filas con gutter g-5 (3rem) cuelgan directo de .container. En movil el
   container es fluido y su padding (12px) es menor que el medio-gutter de g-5
   (24px), asi que la fila/columna queda mas ancha que el viewport (~524px en
   pantallas <768) y genera scroll horizontal. Se baja el gutter a 1.5rem en
   movil para que el margen negativo de la fila empate con el padding del
   container y deje de desbordar. */
@media (max-width:767.98px){
    .row.g-5{
        --bs-gutter-x:1.5rem;
    }
}


/* BOTONES */

.btn-gold{

background:var(--dorado);
border:none;
color:white;

}

.btn-gold:hover{

background:#b28e55;

}



/* RESPONSIVE */

@media(max-width:768px){

.hero-title{

font-size:2.5rem;

}

}





/* HERO */
.hero-elegant{
    background:
    linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)),
    url('/img/2.jpeg') center/cover;
    min-height:100vh;
    padding-top:120px;
}

/* TITULO */
.hero-title{
    font-size:4rem;
    font-weight:800;
    letter-spacing:-1px;
    line-height:1.1;
    text-align:center;
}

/* TEXTO */
.hero-text{
    font-size:1.08rem;
    line-height:1.8;
    color:#eaeaea;
    word-break:normal;
    overflow-wrap:break-word;
}

/* JUSTIFICADO SOLO EN ESCRITORIO */
.text-justify{
    text-align:justify;
    text-justify:inter-word;
}

/* BADGE */
.badge-elegant{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
}

/* LISTA */
.hero-list{
    padding-left:1.2rem;
}

.hero-list li{
    margin-bottom:10px;
}

/* FORM CARD */
.hero-form-card{
    background:rgba(255,255,255,.96);
    border-radius:22px;
    padding:32px 28px;
    box-shadow:0 25px 70px rgba(0,0,0,.35);
    backdrop-filter:blur(6px);
}

.hero-form-card h3{
    font-size:2rem;
    font-weight:800;
    color:#1f242b;
}

.hero-form-card p{
    color:#666;
    line-height:1.7;
}

.hero-form-card .form-control,
.hero-form-card .form-select{
    border-radius:14px;
    min-height:52px;
    border:1px solid #dcdcdc;
    box-shadow:none;
    padding:12px 16px;
}

.hero-form-card textarea.form-control{
    min-height:auto;
    resize:none;
}

.hero-form-card .form-control:focus,
.hero-form-card .form-select:focus{
    border-color:#1f242b;
    box-shadow:0 0 0 0.15rem rgba(31,36,43,.12);
}

.btn-hero-submit{
    border:none;
    border-radius:16px;
    background:#1f242b;
    color:#fff;
    font-weight:700;
    letter-spacing:.3px;
    transition:all .25s ease;
}

.btn-hero-submit:hover{
    background:#000;
    color:#fff;
}

.hero-note{
    font-size:.95rem;
    color:#666;
}

.hero-wa-btn{
    border-radius:14px;
    font-weight:600;
}

/* TABLET */
@media(max-width:991px){
    .hero-elegant{
        min-height:auto;
        padding-top:120px;
        padding-bottom:60px;
    }
}

/* MOVIL */
@media(max-width:768px){
    .hero-title{
        font-size:2.5rem;
        line-height:1.15;
    }

    .hero-text{
        font-size:1rem;
        line-height:1.65;
    }

    .text-justify{
        text-align:left;
    }

    .hero-list{
        padding-left:1rem;
    }

    .hero-list li{
        margin-bottom:12px;
    }

    .hero-form-card{
        padding:24px 18px;
    }

    .hero-form-card h3{
        font-size:1.7rem;
    }
}
@media(max-width:768px){

    .hero-text.text-justify{
        text-align: justify;
        text-align-last: left; 
        word-spacing: -0.5px;
        hyphens: auto;
    }

}



.oportunidades-section{
    background:#ffffff;
}

.badge-light{
    background:#f1f1f1;
    color:#000;
    padding:6px 14px;
    border-radius:20px;
    font-weight:500;
}

/* CONTENEDOR GENERAL */
.inversion-wrap{
    max-width:980px;
    margin:0 auto;
}

/* LAYOUT PRINCIPAL */
.inversion-layout{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap:22px;
    align-items:stretch;
}

/* COLUMNA DERECHA */
.inversion-side{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:22px;
    height:100%;
}

/* CARDS */
.inversion-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:all .30s ease;
}

.inversion-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,.14);
}

.inversion-card img{
    width:100%;
    display:block;
}

/* CARD GRANDE */
.inversion-card.main-card{
    height:100%;
    display:flex;
    flex-direction:column;
}

.inversion-card.main-card img{
    width:100%;
    height:auto;
    object-fit:contain;
    background:#f8f8f8;
}

.inversion-card.main-card .card-body{
    padding:18px 22px 20px;
    text-align:center;
}

/* CARDS PEQUEÑAS */
.inversion-card.small-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.inversion-card.small-card img{
    height:150px;
    object-fit:cover;
}

.inversion-card.small-card .card-body{
    padding:16px 18px 18px;
    text-align:center;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* TEXTOS */
.inversion-card h5{
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
    color:#2b2b2b;
}

.inversion-card p{
    color:#666;
    font-size:13px;
    line-height:1.65;
    margin-bottom:12px;
}

.inversion-features{
    color:#777;
    font-size:13px;
    line-height:1.7;
    margin-bottom:14px;
}

/* BOTONES */
.inversion-card .btn{
    border-radius:999px;
    padding:8px 18px;
    font-size:12px;
    border:none;
    background:#1f242b;
    color:#fff;
    display:inline-block;
    text-decoration:none;
    transition:all .25s ease;
    min-width:170px;
    margin:4px;
}

.inversion-card .btn:hover{
    background:#000;
    color:#fff;
}

.card-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
}

/* MODAL */
.pdf-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.88);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
    padding:20px;
}

.pdf-content{
    width:90%;
    max-width:1100px;
    height:90%;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.pdf-body{
    width:100%;
    height:100%;
    background:#fff;
}

.modal-frame{
    width:100%;
    height:100%;
    border:none;
    display:none;
}

.modal-image-wrap{
    width:100%;
    height:100%;
    display:none;
    align-items:center;
    justify-content:center;
    background:#111;
}

.modal-image{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
}

.pdf-close{
    position:absolute;
    top:12px;
    right:14px;
    background:#111;
    color:#fff;
    border:none;
    font-size:22px;
    line-height:1;
    width:42px;
    height:42px;
    border-radius:50%;
    cursor:pointer;
    z-index:5;
}

/* RESPONSIVE */
@media (max-width: 991.98px){
    .inversion-layout{
        grid-template-columns:1fr;
    }

    .inversion-side{
        grid-template-rows:auto;
    }

    .inversion-card.small-card img{
        height:210px;
    }
}

@media (max-width: 575.98px){
    .inversion-card.main-card .card-body,
    .inversion-card.small-card .card-body{
        padding:16px 14px 18px;
    }

    .inversion-card h5{
        font-size:15px;
    }

    .inversion-card p,
    .inversion-features{
        font-size:12px;
    }

    .inversion-card .btn{
        min-width:auto;
        width:100%;
    }

    .inversion-card.small-card img{
        height:180px;
    }

    .card-actions{
        flex-direction:column;
    }
}




/* PROPIEDADES */
.prop-card{
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
    transition:.35s;
    border:1px solid rgba(0,0,0,.08);
}

.prop-card img{
    height:240px;
    object-fit:cover;
    width:100%;
}

.prop-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.prop-info{
    padding:18px;
}

/* CTA DESPUÉS DE CARDS */
.prop-cta-box{
    margin-top:38px;
    background:#f8f8f8;
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    padding:32px 24px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.prop-cta-box h4{
    font-weight:800;
    margin-bottom:10px;
    color:#1f242b;
}

.prop-cta-box p{
    color:#666;
    max-width:760px;
    margin:0 auto 20px;
    line-height:1.7;
}

.prop-cta-actions{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.prop-btn-main{
    background:#1f242b;
    color:#fff;
    border:none;
    border-radius:999px;
    padding:12px 24px;
    text-decoration:none;
    font-weight:600;
    transition:.25s ease;
    display:inline-block;
}

.prop-btn-main:hover{
    background:#000;
    color:#fff;
}

.prop-btn-wa{
    background:#25D366;
    color:#fff;
    border:none;
    border-radius:999px;
    padding:12px 24px;
    text-decoration:none;
    font-weight:600;
    transition:.25s ease;
    display:inline-block;
}

.prop-btn-wa:hover{
    color:#fff;
    filter:brightness(.95);
}

/* MODAL */
.prop-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.85);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:20px;
}

.prop-content{
    width:92%;
    max-width:900px;
    background:white;
    border-radius:14px;
    overflow:hidden;
    position:relative;
}

.prop-img{
    width:100%;
    height:420px;
    object-fit:cover;
}

.prop-body{
    padding:25px;
}

.prop-close{
    position:absolute;
    top:15px;
    right:15px;
    background:#000;
    color:white;
    border:none;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
}

.prop-gallery img{
    width:90px;
    height:70px;
    object-fit:cover;
    margin-right:6px;
    cursor:pointer;
    border-radius:6px;
}

@media(max-width:768px){
    .prop-card img{
        height:220px;
    }

    .prop-cta-box{
        padding:24px 18px;
    }

    .prop-cta-box h4{
        font-size:1.35rem;
    }

    .prop-cta-actions{
        flex-direction:column;
    }

    .prop-btn-main,
    .prop-btn-wa{
        width:100%;
    }

    .prop-img{
        height:260px;
    }
}







    /* BENEFICIOS */

.beneficios-section{

background:#ffffff;

}

/* BADGE */

.badge-beneficios{

background:#f1f1f1;
color:#000;
padding:6px 16px;
border-radius:20px;
font-weight:500;

}

/* CARD */

.beneficio-card{

background:#ffffff;
border-radius:16px;
border:1px solid #f0f0f0;
transition:all .35s ease;

}

/* HOVER */

.beneficio-card:hover{

transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,.1);

}

/* ICONO */

.beneficio-icon{

font-size:32px;
color:#000;

}





    /* SOBRE NANCY */
    .sobre-nancy{
        background:#f7f7f7;
    }

    /* FOTO */
    .nancy-img{
        border-radius:12px;
        overflow:hidden;
        box-shadow:0 20px 50px rgba(0,0,0,.1);
    }

    .nancy-img img{
        width:100%;
        display:block;
    }

    /* BADGE */
    .badge-nancy{
        background:#000;
        color:#fff;
        padding:6px 16px;
        border-radius:20px;
    }

    /* ITEMS */
    .nancy-item{
        display:flex;
        align-items:flex-start;
        gap:10px;
        font-size:15px;
        color:#333;
        margin-bottom:14px;
    }

    .nancy-item i{
        font-size:20px;
        color:#000;
        margin-top:2px;
    }





    /* DESARROLLO */

.desarrollo-section{

background:#ffffff;

}

/* BADGE */

.badge-desarrollo{

background:#f1f1f1;
color:#000;
padding:6px 16px;
border-radius:20px;

}

/* ITEMS */

.desarrollo-item{

display:flex;
gap:15px;
margin-bottom:25px;

}

.desarrollo-item i{

font-size:24px;
color:#000;

}

.desarrollo-item h6{

font-weight:600;
margin-bottom:3px;

}

.desarrollo-item p{

font-size:14px;
color:#666;
margin:0;

}

/* IMAGEN */

.desarrollo-img{

border-radius:12px;
overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,.1);

}

.desarrollo-img img{

width:100%;

}






/* =========================
   GALERÍA PROYECTOS
========================= */

#galeria {
padding:120px 0;
background:#f7f7f7;
}

/* TITULOS */

#galeria .section-subtitle{
color:#777;
font-weight:600;
letter-spacing:2px;
font-size:13px;
}

#galeria .section-title{
font-weight:800;
color:#000;
}

#galeria .section-title span{
color:#666;
}

/* GRID */

.gallery-masonry{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.gallery-masonry .item{
position:relative;
overflow:hidden;
height:250px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.gallery-masonry .item.tall{
grid-row:span 2;
height:520px;
}

.gallery-masonry img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .7s ease;
cursor:pointer;
}

.gallery-masonry .item:hover img{
transform:scale(1.08);
}

/* OVERLAY */

.gallery-masonry .caption{
position:absolute;
bottom:0;
left:0;
right:0;
padding:20px;
font-size:15px;
font-weight:600;
color:#fff;
background:linear-gradient(
to top,
rgba(0,0,0,0.85),
rgba(0,0,0,0.35),
transparent
);
}

/* =========================
   MODAL GALERÍA
========================= */

.gallery-modal{
display:none;
position:fixed;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.95);
justify-content:center;
align-items:center;
}

.gallery-modal img{
max-width:90%;
max-height:85%;
border-radius:10px;
box-shadow:0 20px 60px rgba(0,0,0,0.5);
animation:zoom .3s ease;
}

@keyframes zoom{
from{transform:scale(.8); opacity:0;}
to{transform:scale(1); opacity:1;}
}

/* BOTÓN CERRAR */

.close-modal{
position:absolute;
top:25px;
right:40px;
color:#fff;
font-size:40px;
font-weight:bold;
cursor:pointer;
transition:.3s;
}

.close-modal:hover{
color:#ccc;
}

/* RESPONSIVE */

@media (max-width:991px){

.gallery-masonry{
grid-template-columns:repeat(2,1fr);
}

.gallery-masonry .item.tall{
grid-row:span 1;
height:250px;
}

}