/* ==========================================================
   TEMA: APARTAMENTOS BOGOTÁ
   Main CSS
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --primary:#0F4C3A;
    --blue:#0B1F5B;
    --secondary:#F39C12;
    --text:#222222;
    --white:#FFFFFF;
    --light:#F7F7F7;
    --border:#E5E7EB;
    --success:#25D366;

    --container:1320px;

}


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:Arial, Helvetica, sans-serif;

    font-size:16px;

    line-height:1.6;

    color:var(--text);

    background:var(--white);

}


img{

    display:block;

    max-width:100%;

    height:auto;

}


a{

    color:inherit;

    text-decoration:none;

}


ul{

    list-style:none;

}


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

.container{

    width:100%;

    max-width:var(--container);

    margin:0 auto;

    padding:0 15px;

}


/* ==========================================================
   LÍNEAS CORPORATIVAS
========================================================== */

.top-green-line{

    width:100%;

    height:10px;

    background:var(--primary);

}


.top-blue-line{

    width:100%;

    height:10px;

    background:var(--blue);

}


.bottom-blue-line{

    width:100%;

    height:5px;

    background:var(--blue);

}


/* ==========================================================
   HEADER
========================================================== */

.site-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    background:var(--white);

    padding:10px 0;

    z-index:9999;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

}


.header-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


/* ==========================================================
   LOGO
========================================================== */

.site-logo{

    flex:0 0 auto;

}


.custom-logo{

    display:block;

    width:280px;

    max-width:100%;

    height:auto;

}


/* ==========================================================
   MENÚ
========================================================== */

.main-navigation{

    flex:1;

    min-width:0;

    display:flex;

    justify-content:center;

}


.main-navigation .menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

}


.main-navigation .menu li{

    position:relative;

}


.main-navigation .menu a{

    position:relative;

    display:block;

    padding:10px 0;

    color:var(--blue);

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    transition:color .30s ease;

}


.main-navigation .menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--primary);

    transition:width .30s ease;

}


.main-navigation .menu a:hover{

    color:var(--primary);

}


.main-navigation .menu a:hover::after{

    width:100%;

}


/* ==========================================================
   WHATSAPP HEADER
========================================================== */

.header-contact{

    flex:0 0 auto;

    display:flex;

    justify-content:flex-end;

}


.btn-whatsapp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:150px;

    min-height:46px;

    padding:12px 24px;

    border-radius:30px;

    background:var(--success);

    color:#fff;

    font-size:14px;

    font-weight:700;

    text-align:center;

    transition:
        background .30s ease,
        transform .30s ease,
        box-shadow .30s ease;

}


.btn-whatsapp:hover{

    background:#1ebe57;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(37,211,102,.35);

}


/* ==========================================================
   MENÚ MÓVIL
========================================================== */

.menu-toggle,
.mobile-menu-button{

    display:none;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    padding:0;

    background:none;

    border:none;

    color:var(--blue);

    cursor:pointer;

    font-size:30px;

    line-height:1;

}


/* ==========================================================
   TÍTULOS
========================================================== */

h1,
h2,
h3{

    line-height:1.2;

    font-weight:700;

}


h1{

    font-size:52px;

    color:var(--blue);

    margin-bottom:25px;

}


h2{

    font-size:34px;

    color:var(--blue);

    margin-bottom:20px;

}


h3{

    font-size:24px;

    color:var(--blue);

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:48px;

    padding:14px 28px;

    border-radius:30px;

    font-weight:700;

    line-height:1.2;

    text-align:center;

    cursor:pointer;

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

}


.btn-primary{

    background:var(--primary);

    color:#fff;

    border:2px solid var(--primary);

}


.btn-primary:hover{

    background:var(--secondary);

    border-color:var(--secondary);

    color:#fff;

}


.btn-secondary{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}


.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   FORMULARIO DE BÚSQUEDA DE PROPIEDADES
========================================================== */

.property-search-form{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:16px;

    width:100%;

    padding:22px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:14px;

    box-shadow:0 4px 18px rgba(0,0,0,.05);

}


/* ==========================================================
   CAMPOS DEL BUSCADOR
========================================================== */

.property-search-form .search-field{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:6px;

}


.property-search-form label{

    font-size:14px;

    font-weight:600;

    color:var(--text);

    line-height:1.2;

}


.property-search-form input,
.property-search-form select{

    width:100%;

    min-width:0;

    height:44px;

    padding:0 12px;

    border:1px solid var(--border);

    border-radius:8px;

    background:#fff;

    color:var(--text);

    font-family:Arial, Helvetica, sans-serif;

    font-size:14px;

    box-sizing:border-box;

}


.property-search-form input:focus,
.property-search-form select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 2px rgba(15,76,58,.08);

}


/* ==========================================================
   BOTÓN DEL BUSCADOR
========================================================== */

.property-search-form .search-button{

    min-width:0;

    display:flex;

    align-items:flex-end;

}


.property-search-form .search-button .btn{

    width:100%;

    height:44px;

    min-height:44px;

    padding:0 18px;

    white-space:nowrap;

}


/* ==========================================================
   FORMULARIO EN HOME
========================================================== */

.property-search-form-home{

    margin-top:25px;

    margin-bottom:35px;

}


/* ==========================================================
   FORMULARIO EN ARCHIVO
========================================================== */

.property-search-form-archive{

    margin-top:25px;

    margin-bottom:45px;

}


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

.hero{

    padding:15px 0 30px;

    background:#ffffff;

}


.hero-grid{

    display:grid;

    grid-template-columns:minmax(0,2fr) minmax(280px,1fr);

    align-items:start;

    gap:50px;

    width:100%;

}


.hero-content{

    min-width:0;

    max-width:100%;

}


.hero-subtitle{

    display:inline-block;

    padding:8px 18px;

    background:#eef8f4;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    border-radius:30px;

    margin-bottom:10px;

}


.hero h1{

    font-size:38px;

    line-height:1.15;

    color:var(--blue);

    margin-bottom:15px;

    font-weight:700;

}


.hero p{

    font-size:17px;

    color:#555;

    margin-bottom:20px;

}


/* ==========================================================
   HERO DESCRIPCIÓN
========================================================== */

.hero-intro{

    font-size:15px;

    line-height:1.7;

    color:#555;

    margin-bottom:14px;

}


.hero-description{

    margin-bottom:30px;

}


.hero-description p{

    font-size:15px;

    line-height:1.7;

    color:#555;

    margin-bottom:14px;

}


.hero-description strong{

    color:var(--blue);

    font-weight:700;

}


.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:35px;

}


.hero-features{

    display:grid;

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

    gap:15px;

}


.hero-features li{

    font-size:16px;

    color:#444;

    font-weight:600;

}


.hero-image{

    position:relative;

    min-width:0;

    margin-top:60px;

}


.hero-image img{

    display:block;

    width:100%;

    max-width:340px;

    height:auto;

    margin-left:auto;

    border-radius:22px;

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}


/* ==========================================================
   SUBTÍTULO DEL HERO DE BARRIO
========================================================== */

.barrio-seo-hero-subtitle{

    display:block;

    margin:0 0 25px;

    color:#555;

    font-size:20px;

    line-height:1.5;

    font-weight:600;

}


/* ==========================================================
   MIGAS DE PAN
========================================================== */

.breadcrumb{

    margin-bottom:24px;

}


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

.property-card{

    display:flex;

    flex-direction:column;

    height:100%;

    min-width:0;

    background:#fff;

    border:1px solid var(--border);

    border-radius:16px;

    overflow:hidden;

    transition:
        transform .30s ease,
        box-shadow .30s ease;

    box-shadow:0 6px 20px rgba(0,0,0,.06);

}


.property-card:hover{

    transform:translateY(-6px);

    box-shadow:0 14px 35px rgba(0,0,0,.12);

}


/* ==========================================================
   IMAGEN DE PROPIEDAD
========================================================== */

.property-card-image{

    display:block;

    width:100%;

    overflow:hidden;

    background:#f5f5f5;

}


.property-card-image img{

    display:block;

    width:100%;

    height:240px;

    object-fit:cover;

    transition:transform .40s ease;

}


.property-card:hover .property-card-image img{

    transform:scale(1.03);

}


/* ==========================================================
   CONTENIDO DE PROPIEDAD
========================================================== */

.property-card-content{

    display:flex;

    flex-direction:column;

    flex:1;

    min-width:0;

    padding:22px;

}


/* ==========================================================
   UBICACIÓN
========================================================== */

.property-card-location{

    display:flex;

    align-items:center;

    gap:6px;

    margin-bottom:9px;

    color:#666;

    font-size:14px;

    font-weight:600;

}


.property-card-location span:first-child{

    font-size:15px;

}


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

.property-card-title{

    margin:0 0 12px;

    font-size:21px;

    line-height:1.3;

    color:var(--blue);

}


.property-card-title a{

    color:var(--blue);

    text-decoration:none;

    transition:color .25s ease;

}


.property-card-title a:hover{

    color:var(--primary);

}


/* ==========================================================
   PRECIO
========================================================== */

.property-card-price{

    margin-bottom:18px;

    color:var(--primary);

    font-size:24px;

    line-height:1.2;

    font-weight:700;

}


/* ==========================================================
   CARACTERÍSTICAS
========================================================== */

.property-card-features{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:0;

    margin-bottom:22px;

    padding:14px 0;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}


.property-card-feature{

    display:flex;

    align-items:baseline;

    gap:4px;

    padding:0 12px;

    color:#555;

    font-size:14px;

    line-height:1.4;

    border-right:1px solid var(--border);

}


.property-card-feature:first-child{

    padding-left:0;

}


.property-card-feature:last-child{

    padding-right:0;

    border-right:none;

}


.property-card-feature strong{

    color:#333;

    font-size:15px;

    font-weight:700;

}


.property-card-feature span{

    color:#666;

    font-size:13px;

}


/* ==========================================================
   BOTÓN DE PROPIEDAD
========================================================== */

.property-card-action{

    margin-top:auto;

}


.property-card-action .btn{

    width:100%;

    min-height:48px;

    text-align:center;

}


/* ==========================================================
   GRID DE PROPIEDADES
========================================================== */

.properties-grid{

    display:grid;

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

    gap:30px;

    width:100%;

}


/* ==========================================================
   ARCHIVO DE PROPIEDADES
========================================================== */

.archive-propiedades{

    padding:60px 0;

}


.archive-header{

    text-align:center;

    margin-bottom:45px;

}


.archive-header h1{

    color:var(--blue);

    margin-bottom:15px;

}


.archive-header p{

    max-width:760px;

    margin:0 auto;

    color:#666;

    font-size:17px;

}


/* ==========================================================
   HERO DE ZONA
========================================================== */

.zona-hero{

    padding:60px 0 70px;

    background:#ffffff;

}


.zona-hero-content{

    width:100%;

    max-width:1200px;

    margin:0 auto;

}


/* ==========================================================
   BADGE DE ZONA
========================================================== */

.zona-badge{

    display:inline-block;

    margin-bottom:15px;

    padding:8px 18px;

    border-radius:30px;

    background:#eef8f4;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

}


/* ==========================================================
   TÍTULO DE ZONA
========================================================== */

.zona-title{

    max-width:1000px;

    margin-bottom:20px;

    color:var(--blue);

    font-size:clamp(34px,5vw,52px);

    line-height:1.15;

}


/* ==========================================================
   DESCRIPCIÓN DE ZONA
========================================================== */

.zona-description{

    max-width:1000px;

    margin-bottom:35px;

    color:#555;

    font-size:18px;

    line-height:1.8;

}


.zona-description p{

    margin-bottom:15px;

}


.zona-description strong{

    color:var(--blue);

    font-weight:700;

}


/* ==========================================================
   COLUMNAS DEL HERO DE ZONA

   Imagen izquierda
   Información derecha
========================================================== */

.zona-hero-columns{

    display:grid;

    grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);

    align-items:center;

    gap:40px;

    width:100%;

}


.zona-hero-columns > *{

    min-width:0;

}


/* ==========================================================
   IMAGEN DEL HERO DE ZONA
========================================================== */

.zona-hero-image-wrapper{

    width:100%;

    margin:0;

    overflow:hidden;

    border-radius:18px;

}


.zona-hero-image{

    display:block;

    width:100%;

    height:390px;

    margin:0;

    border-radius:18px;

    object-fit:cover;

    box-shadow:0 15px 40px rgba(0,0,0,.10);

}


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

.zona-hero-info{

    width:100%;

    min-width:0;

}


/* ==========================================================
   ESTADÍSTICAS DE ZONA
========================================================== */

.zona-hero-info .zona-stats{

    display:grid;

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

    gap:18px;

    margin:0 0 28px;

}


.zona-hero-info .zona-stat{

    min-width:0;

    width:100%;

    min-height:120px;

    padding:20px 15px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid #eee;

    border-radius:12px;

    text-align:center;

    box-shadow:0 5px 18px rgba(0,0,0,.04);

}


.zona-hero-info .zona-stat strong{

    display:block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:28px;

    line-height:1.2;

    font-weight:700;

}


.zona-hero-info .zona-stat span{

    display:block;

    color:#666;

    font-size:14px;

    font-weight:600;

}


/* ==========================================================
   BOTONES DE ZONA
========================================================== */

.zona-hero-info .zona-actions{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:0;

}


.zona-hero-info .zona-actions .btn{

    min-height:50px;

}


.zona-hero-info .zona-actions .btn-whatsapp{

    min-width:150px;

}


/* ==========================================================
   BARRIOS
========================================================== */

.barrios{

    padding:80px 0;

    background:#f8f9fb;

}


.zona-barrios{

    padding:70px 0;

    background:#f8f9fb;

}


.barrios-grid{

    display:grid;

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

    gap:30px;

}


.barrio-card{

    min-width:0;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}


.barrio-card:hover{

    transform:translateY(-6px);

    box-shadow:0 16px 35px rgba(0,0,0,.10);

}


.barrio-card-image{

    width:100%;

    overflow:hidden;

}


.barrio-card-image img{

    display:block;

    width:100%;

    height:240px;

    object-fit:cover;

}


.barrio-card-content{

    padding:25px;

}


.barrio-title{

    margin-bottom:12px;

    color:var(--blue);

}


.barrio-description{

    color:#666;

    line-height:1.7;

}


.barrio-meta{

    margin:20px 0;

}


.barrio-total{

    color:#555;

    font-size:14px;

    font-weight:600;

}


/* ==========================================================
   FAQ
========================================================== */

.faq-list{

    margin-top:40px;

}


.faq-item,
.faq-list details{

    border:1px solid #e5e5e5;

    border-radius:12px;

    margin-bottom:18px;

    overflow:hidden;

}


.faq-item summary,
.faq-list summary{

    cursor:pointer;

    padding:20px;

    background:#fafafa;

    font-weight:700;

    transition:background .30s ease;

}


.faq-item summary:hover,
.faq-list summary:hover{

    background:#f1f1f1;

}


.faq-item p,
.faq-list p{

    padding:20px;

    margin:0;

    line-height:1.8;

}


/* ==========================================================
   SEO
========================================================== */

.zona-seo,
.barrio-seo{

    padding:70px 0;

}


.zona-seo p,
.barrio-seo p{

    margin-bottom:22px;

    color:#555;

    line-height:1.9;

}


.zona-seo-barrios{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:30px 0;

    padding:0;

}


.zona-seo-barrios li{

    list-style:none;

}


.zona-seo-barrios a{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background:#f5f5f5;

    color:var(--blue);

    transition:
        background .30s ease,
        color .30s ease;

}


.zona-seo-barrios a:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   ESTADÍSTICAS
========================================================== */

.zona-stats-grid,
.stats-grid{

    display:grid;

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

    gap:25px;

    margin-top:40px;

}


.zona-stat-card,
.stat-card{

    background:#fff;

    border-radius:16px;

    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    text-align:center;

}


.zona-stat-icon{

    font-size:34px;

    margin-bottom:15px;

}


.zona-stat-content strong,
.stat-card h3{

    display:block;

    font-size:28px;

    color:var(--primary);

    margin-bottom:10px;

}


.zona-stat-content span,
.stat-card p{

    color:#666;

}


/* ==========================================================
   PÁGINA INDIVIDUAL DE PROPIEDAD
========================================================== */

.property-grid{

    display:grid;

    grid-template-columns:minmax(0,2fr) minmax(280px,1fr);

    gap:40px;

    align-items:start;

    margin-bottom:50px;

}


.property-grid > *{

    min-width:0;

}


.property-main-media{

    width:100%;

    min-width:0;

}


.property-main-summary{

    width:100%;

    min-width:0;

}


.property-sidebar{

    width:100%;

    min-width:0;

}


.property-description{

    width:100%;

    max-width:1000px;

    margin:50px 0;

}


.property-details{

    width:100%;

    margin-top:50px;

}


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

.site-footer{

    background:var(--primary);

    color:#fff;

    padding:50px 0;

    margin-top:80px;

}


.site-footer a{

    color:#fff;

}


.site-footer a:hover{

    color:#f5f5f5;

}


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

@media (max-width:991px){

    .custom-logo{

        width:230px;

    }


    .main-navigation .menu{

        gap:14px;

    }


    .main-navigation .menu a{

        font-size:12px;

    }


    .property-grid{

        grid-template-columns:1fr;

        gap:30px;

    }


    .property-main-media,
    .property-main-summary{

        width:100%;

    }


    /* ======================================================
       HERO DE ZONA TABLET
    ====================================================== */

    .zona-hero{

        padding:50px 0 60px;

    }


    .zona-hero-content{

        max-width:100%;

    }


    .zona-title{

        font-size:42px;

    }


    .zona-description{

        font-size:17px;

    }


    .zona-hero-columns{

        grid-template-columns:minmax(0,1.1fr) minmax(280px,1fr);

        gap:25px;

    }


    .zona-hero-image{

        height:340px;

    }


    .zona-hero-info .zona-stats{

        gap:12px;

    }


    .zona-hero-info .zona-stat{

        min-height:110px;

        padding:16px 10px;

    }


    .zona-hero-info .zona-stat strong{

        font-size:24px;

    }

}


/* ==========================================================
   TABLET DEL FORMULARIO DE BÚSQUEDA
========================================================== */

@media (max-width:1000px){

    .property-search-form{

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

    }

}


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width:768px){

    .container{

        padding-left:15px;

        padding-right:15px;

    }


    /* ======================================================
       HEADER MÓVIL
    ====================================================== */

    .site-header{

        padding:8px 0;

    }


    .header-container{

        flex-wrap:wrap;

        gap:10px;

    }


    .site-logo{

        width:auto;

        max-width:calc(100% - 55px);

    }


    .custom-logo{

        width:210px;

        max-width:100%;

    }


    .menu-toggle,
    .mobile-menu-button{

        display:inline-flex;

        margin-left:auto;

        flex:0 0 44px;

    }


    /*
       Compatible con:
       .main-navigation.active
       .main-menu.active
    */

    .main-navigation{

        width:100%;

        flex:0 0 100%;

        display:none;

        order:3;

    }


    .main-navigation.active,
    .main-navigation.is-active{

        display:block;

    }


    .main-navigation .menu,
    .main-navigation .main-menu{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        gap:8px;

        width:100%;

        padding-top:15px;

    }


    .main-navigation .menu li{

        width:100%;

    }


    .main-navigation .menu a{

        width:100%;

        padding:9px 0;

        font-size:14px;

        white-space:normal;

    }


    .main-navigation .menu a::after{

        display:none;

    }


    .header-contact{

        width:100%;

        flex:0 0 100%;

        justify-content:center;

        order:4;

    }


    .header-contact .btn-whatsapp{

        width:auto;

        min-width:190px;

        max-width:100%;

    }


    /* ======================================================
       TÍTULOS MÓVILES
    ====================================================== */

    h1{

        font-size:32px;

    }


    h2{

        font-size:26px;

    }


    h3{

        font-size:22px;

    }


    /* ======================================================
       HERO PRINCIPAL MÓVIL
    ====================================================== */

    .hero{

        padding:10px 0 20px;

    }


    .hero-grid{

        grid-template-columns:1fr;

        gap:35px;

    }


    .hero-content{

        order:2;

        text-align:center;

    }


    .hero-image{

        order:1;

        display:flex;

        justify-content:center;

        margin-top:0;

    }


    .hero-image img{

        margin:0 auto;

        max-width:340px;

    }


    .hero h1{

        font-size:34px;

    }


    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:12px;

    }


    .hero-buttons .btn,
    .hero-buttons .btn-secondary{

        width:100%;

        max-width:320px;

    }


    .hero-features{

        grid-template-columns:1fr;

        text-align:left;

    }


    /* ======================================================
       SUBTÍTULO DEL HERO DE BARRIO
    ====================================================== */

    .barrio-seo-hero-subtitle{

        font-size:18px;

        line-height:1.5;

        font-weight:600;

        margin-bottom:22px;

    }


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

    .properties-grid{

        grid-template-columns:1fr;

        gap:25px;

    }


    /* ======================================================
       HERO DE ZONA MÓVIL
    ====================================================== */

    .zona-hero{

        padding:35px 0 45px;

    }


    .zona-badge{

        margin-bottom:12px;

        font-size:13px;

    }


    .zona-title{

        font-size:34px;

        line-height:1.15;

        margin-bottom:18px;

    }


    .zona-description{

        font-size:16px;

        line-height:1.7;

        margin-bottom:25px;

    }


    /* ======================================================
       COLUMNAS EN MÓVIL

       Imagen arriba
       Información abajo
    ====================================================== */

    .zona-hero-columns{

        display:flex;

        flex-direction:column;

        gap:25px;

        align-items:stretch;

    }


    /* ======================================================
       IMAGEN DEL HERO DE ZONA
    ====================================================== */

    .zona-hero-image-wrapper{

        width:100%;

        margin:0;

        border-radius:14px;

    }


    .zona-hero-image{

        width:100%;

        height:260px;

        border-radius:14px;

        object-fit:cover;

    }


    /* ======================================================
       INFORMACIÓN DEL HERO
    ====================================================== */

    .zona-hero-info{

        width:100%;

    }


    /* ======================================================
       ESTADÍSTICAS MÓVILES
    ====================================================== */

    .zona-hero-info .zona-stats{

        display:grid;

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

        gap:12px;

        margin:0 0 22px;

    }


    .zona-hero-info .zona-stat{

        width:100%;

        min-width:0;

        min-height:105px;

        padding:16px 10px;

    }


    .zona-hero-info .zona-stat strong{

        font-size:22px;

    }


    .zona-hero-info .zona-stat span{

        font-size:13px;

    }


    /* ======================================================
       BOTONES MÓVILES DE ZONA
    ====================================================== */

    .zona-hero-info .zona-actions{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:12px;

        margin-top:0;

    }


    .zona-hero-info .zona-actions .btn{

        width:100%;

        min-width:0;

        text-align:center;

    }


    /* ======================================================
       BARRIOS MÓVIL
    ====================================================== */

    .barrios{

        padding:50px 0;

    }


    .zona-barrios{

        padding:50px 0;

    }


    .barrios-grid{

        grid-template-columns:1fr;

    }


    .barrio-card{

        width:100%;

        max-width:420px;

        margin:0 auto;

    }


    .barrio-card-image img{

        height:220px;

    }


    /* ======================================================
       ESTADÍSTICAS MÓVIL
    ====================================================== */

    .zona-stats-grid,
    .stats-grid{

        grid-template-columns:1fr;

    }


    /* ======================================================
       PROPIEDAD MÓVIL
    ====================================================== */

    .property-grid{

        grid-template-columns:1fr;

        gap:25px;

        margin-bottom:35px;

    }


    .property-description{

        margin:35px 0;

    }


    .property-details{

        margin-top:35px;

    }

}


/* ==========================================================
   MÓVIL DEL FORMULARIO DE BÚSQUEDA
========================================================== */

@media (max-width:700px){

    .property-search-form{

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

        gap:12px;

        padding:16px;

    }


    .property-search-form .search-button{

        grid-column:1 / -1;

    }


    .property-search-form .search-button .btn{

        width:100%;

    }

}


/* ==========================================================
   MÓVIL PEQUEÑO
========================================================== */

@media (max-width:480px){

    .container{

        padding-left:12px;

        padding-right:12px;

    }


    .custom-logo{

        width:190px;

    }


    .header-contact .btn-whatsapp{

        width:100%;

        min-width:0;

    }


    .hero h1{

        font-size:30px;

    }


    .zona-title{

        font-size:30px;

    }


    .zona-hero-image{

        height:230px;

    }


    .zona-hero-info .zona-stats{

        gap:10px;

    }


    .zona-hero-info .zona-stat{

        min-height:100px;

        padding:14px 8px;

    }


    .zona-hero-info .zona-stat strong{

        font-size:20px;

    }


    .zona-hero-info .zona-stat span{

        font-size:12px;

    }


    .property-search-form{

        grid-template-columns:1fr;

    }


    .property-search-form .search-button{

        grid-column:auto;

    }


    .property-search-form .search-button .btn{

        width:100%;

    }


    .contact-form-wrapper{

        padding:22px 16px;

    }


    .contact-header h1{

        font-size:28px;

    }


    .contact-property{

        padding:18px;

    }

}


/* ==========================================================
   FORMULARIO DE CONTACTO
========================================================== */

.contact-page{

    padding:60px 0 80px;

}


.contact-page .container{

    max-width:900px;

}


.contact-wrapper{

    width:100%;

}


.contact-header{

    text-align:center;

    margin-bottom:35px;

}


.contact-header h1{

    margin-bottom:15px;

    color:var(--blue);

}


.contact-header p{

    max-width:700px;

    margin:0 auto;

    color:#666;

    font-size:17px;

    line-height:1.7;

}


/* ==========================================================
   PROPIEDAD SELECCIONADA
========================================================== */

.contact-property{

    max-width:760px;

    margin:0 auto 25px;

    padding:22px 25px;

    background:#f8f9fb;

    border:1px solid var(--border);

    border-left:4px solid var(--primary);

    border-radius:12px;

}


.contact-property-label{

    display:block;

    margin-bottom:8px;

    color:#666;

    font-size:14px;

    font-weight:600;

}


.contact-property h2{

    margin-bottom:10px;

    font-size:24px;

    color:var(--blue);

}


.contact-property p{

    margin-bottom:10px;

    color:#555;

}


.contact-property-link{

    display:inline-block;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

}


.contact-property-link:hover{

    color:var(--secondary);

}


/* ==========================================================
   CONTENEDOR DEL FORMULARIO
========================================================== */

.contact-form-wrapper{

    max-width:760px;

    margin:0 auto;

    padding:40px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    box-shadow:0 10px 35px rgba(0,0,0,.07);

}


/* ==========================================================
   FORMULARIO
========================================================== */

.contact-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* ==========================================================
   CAMPOS
========================================================== */

.contact-field{

    display:flex;

    flex-direction:column;

    gap:7px;

}


.contact-field label{

    color:var(--blue);

    font-size:15px;

    font-weight:700;

}


.contact-field input,
.contact-field textarea{

    width:100%;

    padding:13px 15px;

    border:1px solid var(--border);

    border-radius:9px;

    background:#fff;

    color:var(--text);

    font-family:Arial, Helvetica, sans-serif;

    font-size:16px;

    line-height:1.5;

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

}


.contact-field input{

    height:48px;

}


.contact-field textarea{

    min-height:150px;

    resize:vertical;

}


.contact-field input:focus,
.contact-field textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(15,76,58,.10);

}


/* ==========================================================
   BOTÓN ENVIAR
========================================================== */

.contact-actions{

    display:flex;

    margin-top:5px;

}


.contact-actions .btn{

    min-height:50px;

    padding:14px 28px;

}


.contact-actions .btn-primary{

    width:100%;

    border:none;

    cursor:pointer;

}


/* ==========================================================
   HONEYPOT ANTI-SPAM

   Campo invisible para usuarios
========================================================== */

.contact-honeypot{

    display:none !important;

}


/* ==========================================================
   MÓVIL FORMULARIO DE CONTACTO
========================================================== */

@media (max-width:768px){

    .contact-page{

        padding:35px 0 50px;

    }


    .contact-header h1{

        font-size:32px;

    }


    .contact-header p{

        font-size:16px;

    }


    .contact-form-wrapper{

        padding:25px 20px;

        border-radius:14px;

    }


    .contact-actions{

        flex-direction:column;

    }


    .contact-actions .btn{

        width:100%;

    }


    .contact-property{

        padding:20px;

    }


    .contact-property h2{

        font-size:22px;

    }

}