:root {

    --verde: #0f5a43;
    --verde-oscuro: #073f31;
    --verde-profundo: #052f25;
    --dorado: #c8a64b;
    --crema: #f7f5ee;
    --texto: #26322d;
    --gris: #6b746f;

}

* {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: Poppins, sans-serif;
    background: var(--crema);
    color: var(--texto);

}

html,
body{

    width:100%;
    overflow-x:hidden;

}

img{

    max-width:100%;
    height:auto;

}

/*====================================
            NAVBAR
====================================*/

.navbar {

    background: var(--verde-oscuro);
    min-height: 88px;

}

.navbar-brand img {

    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--dorado);
    background: #fff;

}

.navbar .nav-link {

    color: #ffffffdd;

}

.navbar .nav-link:hover,
.navbar .nav-link.active {

    color: var(--dorado);

}

@media (max-width:576px){

    .header-fixed{

        position:static;

    }

    .navbar{

        position:sticky;
        top:0;
        z-index:1030;

    }

    .navbar .container{

        align-items:center;

    }

    .navbar-brand{

        min-width:0;
        max-width:calc(100% - 64px);
        margin-right:8px;
        gap:12px !important;
        white-space:normal;

    }

    .navbar-brand img{

        width:56px;
        height:56px;
        flex:0 0 56px;

    }

    .navbar-brand > div{

        min-width:0;
        line-height:1.15;

    }

    .navbar-brand small{

        display:block;
        margin-top:4px;
        font-size:.68rem;
        line-height:1.25;
        white-space:normal;

    }

    .navbar-toggler{

        flex:0 0 auto;

    }

}

/*====================================
            BOTONES
====================================*/

.btn-gold {

    background: var(--dorado);
    color: var(--verde-profundo);
    font-weight: 700;
    border: none;
    border-radius: 12px;

}

.btn-gold:hover {

    background: #fff;
    color: var(--verde-oscuro);

}

.btn-green {

    background: var(--verde);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 600;

}

.btn-green:hover {

    background: var(--dorado);
    color: var(--verde-profundo);

}

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

.hero {

    min-height: 78vh;
    display: flex;
    align-items: center;
    color: #fff;

    background:
        linear-gradient(
            90deg,
            #052f25e8,
            #073f3188
        ),
        url("../img/propiedad1.jpg")
        center / cover;

}

.hero h1 {

    font-size: clamp(2.5rem, 5vw, 4.7rem);
    font-weight: 800;
    line-height: 1.05;

}

.hero h1 span {

    color: var(--dorado);

}

.hero-logo {

    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid var(--dorado);
    object-fit: cover;
    background: #fff;

}

/*====================================
          BUSCADOR
====================================*/

.search-box {

    margin-top: -65px;
    position: relative;
    z-index: 5;

}

.search-card {

    background: #fff;
    border-radius: 22px;
    padding: 25px;
    box-shadow: 0 18px 45px #073f312e;

}

/*====================================
            SECCIONES
====================================*/

.section {

    padding: 85px 0;

}

.section-title {

    font-weight: 800;
    color: var(--verde-oscuro);

}

/*====================================
      TARJETAS PROPIEDADES
====================================*/

.property-card {

    border: none;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    background: #fff;

    box-shadow: 0 10px 30px #073f311a;

    transition: .3s;

}

.property-card:hover {

    transform: translateY(-7px);

}

.property-card img {

    height: 235px;
    object-fit: cover;

}

.property-card .card-body {

    display: flex;
    flex-direction: column;

}

.property-card .card-title {

    min-height: 56px;
    font-weight: 700;
    color: var(--verde-oscuro);

}

.property-price {

    font-size: 1.35rem;
    font-weight: 800;
    color: var(--verde);

}

.badge-sale {

    background: var(--verde);

}

.badge-rent {

    background: var(--dorado);
    color: var(--verde-profundo);

}

/*====================================
           SERVICIOS
====================================*/

.services {

    background:
        linear-gradient(
            135deg,
            var(--verde-profundo),
            var(--verde)
        );

}

.service-card {

    height: 100%;
    background: #ffffff17;
    border: 1px solid #ffffff26;
    border-radius: 20px;
    padding: 30px;

}

.service-icon {

    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background: var(--dorado);

    color: var(--verde-profundo);

    font-size: 1.7rem;

}

/*====================================
             FOOTER
====================================*/

footer {

    background: var(--verde-profundo);
    color: #ddd;

}

footer a {

    color: var(--dorado);
    text-decoration: none;

}

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

.gallery-main {

    height: 500px;
    border-radius: 24px;
    overflow: hidden;

}

.gallery-main img,
.thumb img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;

}

.thumb {

    height: 150px;
    border-radius: 16px;
    overflow: hidden;

}

/*====================================
          TARJETAS INFO
====================================*/

.info-card {

    background: #fff;
    border-radius: 22px;
    padding: 28px;

    box-shadow:
        0 10px 28px #073f311a;

}

.contact-card {

    position: sticky;
    top: 105px;

    border: none;
    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 12px 35px #073f3126;

}

.contact-header {

    background: var(--verde-oscuro);
    color: #fff;

    padding: 24px;

    text-align: center;

}

/*====================================
            FEATURES
====================================*/

.feature {

    background: #fff;

    border-radius: 16px;

    padding: 18px;

    text-align: center;

    height: 100%;

    box-shadow:
        0 6px 18px #073f3117;

}

.feature i {

    font-size: 1.8rem;
    color: var(--dorado);

}

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

@media (max-width: 991px) {

    .contact-card {

        position: static;

    }

    .gallery-main {

        height: 360px;

    }

}

/* Gallery improvements: spacing, vertical thumbs, overlay counter, modal thumbs and animations */
.gallery-row { display:grid; grid-template-columns: 1fr 320px; gap:18px; align-items:start; }
.gallery-main { min-height:500px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; padding:12px; }
.thumbnails-vertical { width:320px; display:flex; flex-direction:column; gap:12px; }
.thumbnails-vertical .thumb { height: calc((500px - 24px) / 3); overflow:hidden; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:center; background:#ffffff; }
/* show entire images inside boxes */
.thumb img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.gallery-main img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.thumb-overlay { position:relative; }
.thumb-overlay .overlay-count { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,90,67,0.62); color:#fff; font-weight:700; font-size:1rem; border-radius:12px; }

/* modal thumbnails */
.modal-thumbs { display:flex; gap:8px; padding:12px 18px; justify-content:center; overflow-x:auto; }
.modal-thumbs .thumb-small { width:88px; height:66px; flex:0 0 auto; border-radius:8px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,0.12); cursor:pointer; opacity:0.85; border:2px solid transparent; }
.modal-thumbs .thumb-small.active { opacity:1; border-color:#0f5a43; }

/* subtle animations */
.modal.fade .modal-dialog { transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; transform: translateY(10px) scale(.995); }
.modal.show .modal-dialog { transform: translateY(0) scale(1); }
.carousel-item { transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; }

@media (max-width:991px) {
    .gallery-row { grid-template-columns: 1fr; }
    .thumbnails-vertical { flex-direction:row; gap:8px; overflow-x:auto; width:100%; }
    .thumbnails-vertical .thumb { height:100px; width:30%; flex:0 0 auto; }
}