.elementor-18 .elementor-element.elementor-element-2c6a5d9{--display:flex;--min-height:60vh;--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:20px 20px;--row-gap:20px;--column-gap:20px;--overlay-opacity:1;}.elementor-18 .elementor-element.elementor-element-2c6a5d9:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-2c6a5d9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://housebrand.global/wp-content/uploads/2026/07/Housebrand-home-page-bkgrnd.jpg");background-position:450px 0px;background-repeat:no-repeat;background-size:cover;}.elementor-18 .elementor-element.elementor-element-2c6a5d9::before, .elementor-18 .elementor-element.elementor-element-2c6a5d9 > .elementor-background-video-container::before, .elementor-18 .elementor-element.elementor-element-2c6a5d9 > .e-con-inner > .elementor-background-video-container::before, .elementor-18 .elementor-element.elementor-element-2c6a5d9 > .elementor-background-slideshow::before, .elementor-18 .elementor-element.elementor-element-2c6a5d9 > .e-con-inner > .elementor-background-slideshow::before, .elementor-18 .elementor-element.elementor-element-2c6a5d9 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(90deg, #122131 58%, #00000000 84%);}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-18 .elementor-element.elementor-element-bd0fe69 .elementor-heading-title{font-family:"Hanken Grotesk", Sans-serif;font-size:64px;font-weight:700;line-height:72px;color:#FFFFFF;}.elementor-18 .elementor-element.elementor-element-3f6564b .elementor-heading-title{font-family:"Hanken Grotesk", Sans-serif;font-size:64px;font-weight:700;line-height:62px;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-18 .elementor-element.elementor-element-b40fa27{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 500px 0px 10px;border-style:none;text-align:start;font-family:"Inter", Sans-serif;font-size:18px;font-weight:400;color:var( --e-global-color-accent );}.elementor-18 .elementor-element.elementor-element-b40fa27 p{margin-block-end:0px;}.elementor-18 .elementor-element.elementor-element-be0912f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-18 .elementor-element.elementor-element-be0912f:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-be0912f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-18 .elementor-element.elementor-element-703f655{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 20px 20px 20px;}@media(max-width:1024px){.elementor-18 .elementor-element.elementor-element-2c6a5d9:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-2c6a5d9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-18 .elementor-element.elementor-element-2c6a5d9{--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-18 .elementor-element.elementor-element-bd0fe69 .elementor-heading-title{font-size:50px;line-height:50px;}.elementor-18 .elementor-element.elementor-element-3f6564b .elementor-heading-title{font-size:50px;line-height:50px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-18 .elementor-element.elementor-element-b40fa27{padding:0px 150px 0px 10px;font-size:15px;}.elementor-18 .elementor-element.elementor-element-be0912f{--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}}@media(max-width:767px){.elementor-18 .elementor-element.elementor-element-2c6a5d9:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-2c6a5d9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:-187px 0px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-18 .elementor-element.elementor-element-bd0fe69 .elementor-heading-title{font-size:40px;}.elementor-18 .elementor-element.elementor-element-3f6564b .elementor-heading-title{font-size:40px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-18 .elementor-element.elementor-element-b40fa27{padding:0px 0px 0px 0px;font-size:15px;}.elementor-18 .elementor-element.elementor-element-be0912f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-703f655 *//* =====================================================
   HOUSEBRAND CALCULATOR
===================================================== */

#hb-calculator {

    --hb-dark: #142638;
    --hb-dark-2: #1c344a;

    --hb-primary: #54c8c8;
    --hb-primary-dark: #32aeb0;

    --hb-border: #e3e6e8;
    --hb-text: #172535;
    --hb-muted: #7d858d;

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

    margin: 0 auto;

    font-family:
        "Inter",
        "Poppins",
        Arial,
        sans-serif;

    color: var(--hb-text);

    box-sizing: border-box;

}

#hb-calculator *,
#hb-calculator *::before,
#hb-calculator *::after {

    box-sizing: border-box;

}


/* =====================================================
   TITULO
===================================================== */

.hb-section-title {

    font-size: 19px;

    font-weight: 700;

    margin-bottom: 20px;

}

.hb-section-title span {

    color: var(--hb-primary);

}


/* =====================================================
   GRID
===================================================== */

.hb-calculator-grid {

    display: grid;

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

    gap: 22px;

}


/* =====================================================
   SIDEBAR
===================================================== */

.hb-sidebar {

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

    border-radius: 8px;

    padding: 22px;

    background: #fff;

    box-shadow:
        0 8px 30px
        rgba(15, 34, 50, .04);

}

.hb-field-group {

    margin-bottom: 25px;

}

.hb-field-group > label,
.hb-control > label {

    display: block;

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 9px;

    color: #263442;

}


/* =====================================================
   PROYECTOS
===================================================== */

.hb-projects {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

}

.hb-project {

    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    text-align: left;

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

    background: #fff;

    padding: 9px;

    border-radius: 5px;

    cursor: pointer;

    transition: .25s;

}

.hb-project:hover {

    border-color: var(--hb-primary);

}

.hb-project.active {

    border-color:
        var(--hb-primary);

    box-shadow:
        0 0 0 1px
        var(--hb-primary);

}

.hb-project-image {

    width: 58px;

    height: 60px;

    flex-shrink: 0;

    border-radius: 4px;

    background:
        linear-gradient(
            145deg,
            #152a3c,
            #456579
        );

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    text-align: center;

}

.hb-project-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.hb-project-info strong {

    font-size: 12px;

}

.hb-project-info small {

    color: var(--hb-primary-dark);

    font-size: 9px;

}

.hb-project:not(.active)
.hb-project-info small {

    color: #999;

}

.hb-check {

    position: absolute;

    top: 5px;

    right: 5px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--hb-primary);

    color: #fff;

    font-size: 10px;

    display: none;

    align-items: center;

    justify-content: center;

}

.hb-project.active .hb-check {

    display: flex;

}


/* =====================================================
   TOGGLE
===================================================== */

.hb-toggle {

    display: flex;

}

.hb-toggle button {

    flex: 1;

    padding: 9px 8px;

    border:
        1px solid
        #d7dbde;

    background: #fff;

    color: #343d45;

    cursor: pointer;

    font-size: 11px;

    transition: .2s;

}

.hb-toggle button:first-child {

    border-radius: 5px 0 0 5px;

}

.hb-toggle button:last-child {

    border-radius: 0 5px 5px 0;

}

.hb-toggle button.active {

    background: var(--hb-primary);

    color: #fff;

    border-color:
        var(--hb-primary);

}


/* =====================================================
   SELECTS
===================================================== */

.hb-sidebar select,
.hb-control select {

    width: 100%;

    height: 38px;

    padding: 0 12px;

    border:
        1px solid
        #d9dddf;

    border-radius: 4px;

    background: #fff;

    color: #37424c;

    font-size: 11px;

    outline: none;

}


/* =====================================================
   UNIDADES
===================================================== */

.hb-units {

    display: grid;

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

    gap: 8px;

}

.hb-unit {

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

    border-radius: 5px;

    padding: 10px 5px;

    text-align: center;

    background: #fff;

    cursor: pointer;

    transition: .2s;

}

.hb-unit:hover {

    border-color:
        var(--hb-primary);

}

.hb-unit.active {

    border-color:
        var(--hb-primary);

    background:
        #f3fbfb;

}

.hb-unit strong {

    display: block;

    font-size: 12px;

    margin-bottom: 3px;

}

.hb-unit span {

    display: block;

    font-size: 9px;

    color: #69737c;

}

.hb-unit small {

    display: block;

    margin-top: 4px;

    font-size: 9px;

    color:
        var(--hb-primary-dark);

}


/* =====================================================
   AYUDA
===================================================== */

.hb-help {

    display: flex;

    gap: 10px;

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

    padding-top: 18px;

}

.hb-help-icon {

    width: 25px;

    height: 25px;

    border:
        1px solid
        #cdd2d5;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

}

.hb-help strong {

    display: block;

    font-size: 10px;

}

.hb-help a {

    display: block;

    margin-top: 4px;

    color:
        var(--hb-primary-dark);

    font-size: 9px;

    text-decoration: none;

}


/* =====================================================
   MAIN
===================================================== */

.hb-main {

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

    border-radius: 8px;

    background: #fff;

    overflow: hidden;

    box-shadow:
        0 8px 30px
        rgba(15, 34, 50, .04);

}


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

.hb-property-header {

    display: grid;

    grid-template-columns:
        1fr
        290px;

    gap: 20px;

    padding: 10px 20px 18px;

}

.hb-property-information h2 {

    margin: 0 0 20px;

    font-size: 19px;

    color: var(--hb-dark);

}

.hb-property-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

}

.hb-property-meta span {

    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 10px;

    color: #65707a;

}

.hb-property-meta b {

    font-size: 13px;

    color: #64717c;

}

.hb-property-image {

    position: relative;

    height: 110px;

    overflow: hidden;

    border-radius: 7px;

}

.hb-image-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 11px;

    background:
        linear-gradient(
            135deg,
            #806f60,
            #352d2a
        );

}

.hb-property-image button {

    position: absolute;

    right: 10px;

    bottom: 10px;

    border: 0;

    border-radius: 15px;

    padding: 6px 10px;

    background:
        rgba(15, 25, 35, .8);

    color: #fff;

    font-size: 9px;

}


/* =====================================================
   COMMERCIAL
===================================================== */

.hb-commercial {

    display: grid;

    grid-template-columns:
        1.1fr
        1fr
        1fr;

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

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

}

.hb-commercial > div {

    padding: 17px 20px;

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

}

.hb-commercial > div:last-child {

    border-right: 0;

}

.hb-commercial label {

    display: block;

    font-size: 10px;

    font-weight: 700;

    margin-bottom: 10px;

}

.hb-price strong {

    display: block;

    font-size: 20px;

    color:
        var(--hb-primary-dark);

}

.hb-price small {

    font-size: 8px;

    color: #858d93;

}

.hb-includes ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.hb-includes li {

    font-size: 9px;

    color: #59636b;

    margin-bottom: 7px;

}

.hb-profitability div {

    margin-bottom: 10px;

}

.hb-profitability strong {

    display: block;

    font-size: 9px;

}

.hb-profitability span {

    font-size: 9px;

    color: #69747c;

}

.hb-profitability small {

    display: block;

    font-size: 8px;

    color: #888;

    line-height: 1.4;

}


/* =====================================================
   AVAILABILITY
===================================================== */

.hb-availability {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 15px 20px;

    padding: 10px;

    border-radius: 6px;

    background:
        #eaf8f4;

}

.hb-status {

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        #48a981;

    border-radius: 50%;

    color: #48a981;

    font-size: 12px;

}

.hb-availability strong {

    display: block;

    font-size: 10px;

}

.hb-availability small {

    display: block;

    font-size: 9px;

    color: #6c787f;

}


/* =====================================================
   PAYMENT
===================================================== */

.hb-payment {

    padding: 5px 20px 18px;

}

.hb-payment h3 {

    font-size: 13px;

    margin: 8px 0 15px;

}

.hb-payment-grid {

    display: grid;

    grid-template-columns:
        1.2fr
        1fr
        1fr
        1.3fr;

    gap: 10px;

    align-items: start;

}

.hb-input-wrapper {

    height: 38px;

    display: flex;

    align-items: center;

    border:
        1px solid
        #d9dddf;

    border-radius: 4px;

    overflow: hidden;

}

.hb-input-wrapper span {

    padding-left: 10px;

    color: #777;

    font-size: 11px;

}

.hb-input-wrapper input {

    width: 100%;

    border: 0;

    outline: 0;

    height: 100%;

    padding: 0 7px;

    font-size: 11px;

}

.hb-control small {

    display: block;

    margin-top: 7px;

    font-size: 8px;

    color: #858d93;

}

.hb-financing {

    padding: 13px;

    border-radius: 6px;

    background:
        #edf8f8;

}

.hb-financing span {

    display: block;

    font-size: 9px;

}

.hb-financing strong {

    display: block;

    margin: 6px 0;

    color:
        var(--hb-primary-dark);

    font-size: 14px;

}

.hb-financing small {

    font-size: 8px;

    color: #6d777e;

}


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

.hb-actions {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;

    padding:
        0 20px 12px;

}

.hb-primary-button,
.hb-secondary-button {

    height: 40px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

}

.hb-primary-button {

    background:
        var(--hb-dark);

    color: #fff;

    border: 0;

}

.hb-secondary-button {

    border:
        1px solid
        #65717b;

    color:
        var(--hb-dark);

    background: #fff;

}

.hb-secondary-button span {

    margin-right: 7px;

    color:
        #20b96d;

}


/* =====================================================
   SEGURIDAD
===================================================== */

.hb-security {

    padding:
        0 20px 17px;

    font-size: 8px;

    color: #858d93;

}


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

@media(max-width:900px) {

    .hb-calculator-grid {

        grid-template-columns: 1fr;

    }

    .hb-sidebar {

        order: 2;

    }

    .hb-main {

        order: 1;

    }

}


@media(max-width:700px) {

    .hb-property-header {

        grid-template-columns: 1fr;

    }

    .hb-property-image {

        height: 180px;

    }

    .hb-commercial {

        grid-template-columns: 1fr;

    }

    .hb-commercial > div {

        border-right: 0;

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

    }

    .hb-payment-grid {

        grid-template-columns: 1fr 1fr;

    }

}


@media(max-width:500px) {

    .hb-sidebar,
    .hb-payment,
    .hb-property-header {

        padding-left: 15px;
        padding-right: 15px;

    }

    .hb-projects {

        grid-template-columns: 1fr;

    }

    .hb-payment-grid {

        grid-template-columns: 1fr;

    }

    .hb-actions {

        grid-template-columns: 1fr;

        padding-left: 15px;
        padding-right: 15px;

    }

    .hb-property-meta {

        gap: 10px;

    }

    .hb-units {

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

    }

}/* End custom CSS */