/* ============================================================
   EMPIRE REAL ESTATE NI
   PREMIUM HEADER
   CSS START
============================================================ */


/* ============================================================
   01. VARIABLES
============================================================ */

:root {
    --ere-black: #0b0c0d;
    --ere-dark: #111315;
    --ere-dark-soft: #181a1d;

    --ere-gold: #b99a5d;
    --ere-gold-light: #d8bc7d;
    --ere-gold-soft: #eee3cc;

    --ere-white: #ffffff;
    --ere-cream: #f7f5f0;
    --ere-gray: #777a7f;
    --ere-border: rgba(15, 15, 15, 0.10);

    --ere-font-main: 'Manrope', sans-serif;
    --ere-font-title: 'Playfair Display', serif;

    --ere-header-width: 1420px;

    --ere-transition: 0.35s cubic-bezier(.2, .75, .25, 1);
}


/* ============================================================
   02. RESET LOCAL
============================================================ */

.ere-site-header-shell *,
.ere-mobile-drawer *,
.ere-filter-drawer *,
.ere-mobile-bottom-nav * {
    box-sizing: border-box;
}

.ere-site-header-shell a,
.ere-mobile-drawer a,
.ere-filter-drawer a,
.ere-mobile-bottom-nav a {
    text-decoration: none;
}


/* ============================================================
   03. CONTAINER
============================================================ */

.ere-container {
    width: min(calc(100% - 48px), var(--ere-header-width));
    margin-inline: auto;
}


/* ============================================================
   04. TOP BAR
============================================================ */

.ere-topbar {
    position: relative;
    z-index: 1003;
    background: var(--ere-black);
    color: rgba(255,255,255,.8);
    font-family: var(--ere-font-main);
    min-height: 39px;
}

.ere-topbar-inner {
    min-height: 39px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.ere-topbar-left,
.ere-topbar-right {
    display: flex;
    align-items: center;
}

.ere-topbar-left {
    gap: 25px;
}

.ere-topbar-right {
    gap: 20px;
}

.ere-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;

    transition: var(--ere-transition);
}

.ere-topbar-item i {
    color: var(--ere-gold);
    font-size: 11px;
}

.ere-topbar-item:hover {
    color: #fff;
}

.ere-topbar-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-weight: 700;
}

.ere-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #64c783;

    box-shadow:
        0 0 0 4px rgba(100,199,131,.10),
        0 0 10px rgba(100,199,131,.4);
}

.ere-topbar-social {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: white;
    background: rgba(255,255,255,.07);

    transition: var(--ere-transition);
}

.ere-topbar-social:hover {
    background: var(--ere-gold);
    color: var(--ere-black);
    transform: translateY(-1px);
}

.ere-topbar-phone {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 0 17px;

    color: var(--ere-black);

    background:
        linear-gradient(
            135deg,
            var(--ere-gold-light),
            var(--ere-gold)
        );

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
}

.ere-topbar-phone:hover {
    color: var(--ere-black);
}


/* ============================================================
   05. MAIN HEADER
============================================================ */

.ere-main-header {
    position: relative;
    z-index: 1002;

    width: 100%;

    background: rgba(255,255,255,.98);

    border-bottom: 1px solid rgba(20,20,20,.07);

    transition:
        box-shadow var(--ere-transition),
        transform var(--ere-transition),
        background var(--ere-transition);
}

.ere-main-header.ere-is-sticky {
    position: fixed;
    top: 0;
    left: 0;

    background: rgba(255,255,255,.96);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

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

.ere-main-header.ere-header-small .ere-header-inner {
    min-height: 74px;
}

.ere-header-inner {
    min-height: 92px;

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

    gap: 28px;

    transition: min-height var(--ere-transition);
}


/* ============================================================
   06. BRAND
============================================================ */

.ere-brand {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: var(--ere-black);
}

.ere-brand-mark {
    width: 49px;
    height: 49px;

    display: grid;
    place-items: center;

    color: var(--ere-gold);

    border: 1px solid rgba(185,154,93,.4);

    background:
        linear-gradient(
            145deg,
            rgba(185,154,93,.07),
            rgba(255,255,255,1)
        );

    transform: rotate(45deg);

    transition: var(--ere-transition);
}

.ere-brand-mark svg {
    width: 37px;
    height: 37px;

    transform: rotate(-45deg);
}

.ere-brand:hover .ere-brand-mark {
    background: var(--ere-black);
    color: var(--ere-gold-light);

    border-color: var(--ere-black);

    transform: rotate(45deg) scale(1.03);
}

.ere-brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}

.ere-brand-text strong {
    font-family: var(--ere-font-title);
    font-size: 23px;
    line-height: .95;
    letter-spacing: .055em;

    color: var(--ere-black);
}

.ere-brand-text > span {
    margin-top: 4px;

    font-family: var(--ere-font-main);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .24em;

    color: #444;
}

.ere-brand-text small {
    margin-top: 4px;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .38em;

    color: var(--ere-gold);
}


/* ============================================================
   07. DESKTOP NAVIGATION
============================================================ */

.ere-desktop-nav {
    display: flex;
    align-items: center;

    gap: 29px;

    margin-left: auto;
}

.ere-nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 92px;

    color: #26282b;

    font-family: var(--ere-font-main);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: .02em;

    transition: var(--ere-transition);
}

.ere-nav-link::after {
    content: '';

    position: absolute;
    left: 50%;
    bottom: 25px;

    width: 0;
    height: 2px;

    background: var(--ere-gold);

    transform: translateX(-50%);

    transition: width var(--ere-transition);
}

.ere-nav-link:hover,
.ere-nav-link.ere-active {
    color: var(--ere-gold);
}

.ere-nav-link:hover::after,
.ere-nav-link.ere-active::after {
    width: 20px;
}


/* ============================================================
   08. HEADER ACTIONS
============================================================ */

.ere-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ============================================================
   FILTER BUTTON
============================================================ */

.ere-filter-trigger {
    position: relative;

    min-height: 52px;

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

    padding: 6px 15px 6px 8px;

    border: 1px solid var(--ere-border);
    border-radius: 3px;

    background: #fff;

    cursor: pointer;

    font-family: var(--ere-font-main);

    transition: var(--ere-transition);
}

.ere-filter-trigger:hover {
    border-color: rgba(185,154,93,.5);

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

    transform: translateY(-1px);
}

.ere-filter-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background: var(--ere-cream);

    color: var(--ere-gold);

    font-size: 13px;
}

.ere-filter-trigger-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    color: var(--ere-black);

    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;
}

.ere-filter-trigger-text small {
    color: #8a8c90;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .08em;
}

.ere-filter-counter {
    position: absolute;
    top: -6px;
    right: -6px;

    width: 20px;
    height: 20px;

    display: none;
    place-items: center;

    border: 2px solid white;
    border-radius: 50%;

    background: var(--ere-gold);
    color: white;

    font-size: 8px;
    font-weight: 800;
}

.ere-filter-counter.ere-visible {
    display: grid;
}


/* ============================================================
   CALL BUTTON
============================================================ */

.ere-call-button {
    position: relative;

    min-height: 54px;

    overflow: hidden;

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

    padding: 7px 17px 7px 8px;

    background: var(--ere-black);
    color: white;

    border-radius: 3px;

    transition: var(--ere-transition);
}

.ere-call-button::before {
    content: '';

    position: absolute;
    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .6s ease;
}

.ere-call-button:hover::before {
    left: 140%;
}

.ere-call-button:hover {
    background: #161719;
    color: white;

    transform: translateY(-1px);

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

.ere-call-button-icon {
    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            var(--ere-gold-light),
            var(--ere-gold)
        );

    color: var(--ere-black);

    border-radius: 2px;
}

.ere-call-button-text {
    display: flex;
    flex-direction: column;

    line-height: 1.25;
}

.ere-call-button-text small {
    color: rgba(255,255,255,.55);

    font-size: 8px;
    font-weight: 600;

    letter-spacing: .04em;
}

.ere-call-button-text strong {
    color: white;

    font-size: 11px;
    font-weight: 800;
}


/* ============================================================
   09. MOBILE MENU BUTTON
============================================================ */

.ere-mobile-menu-trigger {
    display: none;

    width: 49px;
    height: 49px;

    padding: 0;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 5px;

    background: var(--ere-black);

    border: 0;

    cursor: pointer;
}

.ere-mobile-menu-trigger span {
    display: block;

    height: 1.5px;

    background: white;

    transition: var(--ere-transition);
}

.ere-mobile-menu-trigger span:nth-child(1) {
    width: 20px;
}

.ere-mobile-menu-trigger span:nth-child(2) {
    width: 15px;
    margin-left: 5px;
}

.ere-mobile-menu-trigger span:nth-child(3) {
    width: 20px;
}


/* ============================================================
   10. OVERLAY
============================================================ */

.ere-overlay {
    position: fixed;
    inset: 0;

    z-index: 99990;

    visibility: hidden;
    opacity: 0;

    background: rgba(4,5,6,.68);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.ere-overlay.ere-active {
    visibility: visible;
    opacity: 1;
}


/* ============================================================
   11. MOBILE DRAWER
============================================================ */

.ere-mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;

    z-index: 99999;

    width: min(92vw, 430px);
    height: 100dvh;

    overflow-y: auto;

    background: var(--ere-dark);

    transform: translateX(105%);

    transition:
        transform .45s cubic-bezier(.7,0,.2,1);

    font-family: var(--ere-font-main);
}

.ere-mobile-drawer.ere-open {
    transform: translateX(0);
}

.ere-drawer-header {
    min-height: 88px;

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

    padding: 0 24px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.ere-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    color: white;
}

.ere-drawer-brand-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(185,154,93,.45);

    color: var(--ere-gold);
}

.ere-drawer-brand > span:last-child {
    display: flex;
    flex-direction: column;
}

.ere-drawer-brand strong {
    font-family: var(--ere-font-title);
    font-size: 18px;
    letter-spacing: .08em;
}

.ere-drawer-brand small {
    margin-top: 3px;

    color: var(--ere-gold);

    font-size: 7px;
    letter-spacing: .30em;
}

.ere-drawer-close,
.ere-filter-close {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);

    background: transparent;
    color: white;

    cursor: pointer;

    font-size: 15px;

    transition: var(--ere-transition);
}

.ere-drawer-close:hover {
    color: var(--ere-black);
    background: var(--ere-gold);

    border-color: var(--ere-gold);

    transform: rotate(90deg);
}

.ere-mobile-drawer-content {
    padding: 30px 24px 35px;
}

.ere-mobile-menu-intro {
    padding-bottom: 25px;
}

.ere-mobile-menu-intro > span {
    color: var(--ere-gold);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.ere-mobile-menu-intro h3 {
    max-width: 320px;

    margin: 10px 0;

    color: white;

    font-family: var(--ere-font-title);
    font-size: clamp(27px, 7vw, 35px);
    font-weight: 500;
    line-height: 1.05;
}

.ere-mobile-menu-intro p {
    margin: 0;

    max-width: 335px;

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

    font-size: 11px;
    line-height: 1.7;
}


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

.ere-mobile-navigation {
    border-top:
        1px solid rgba(255,255,255,.07);
}

.ere-mobile-nav-link {
    min-height: 68px;

    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    color: white;

    transition: var(--ere-transition);
}

.ere-mobile-nav-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.05);

    color: var(--ere-gold);

    font-size: 11px;
}

.ere-mobile-nav-link > span:nth-child(2) {
    display: flex;
    flex-direction: column;

    font-family: var(--ere-font-main);
    font-size: 13px;
    font-weight: 700;
}

.ere-mobile-nav-link small {
    margin-bottom: 2px;

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

    font-size: 7px;
    letter-spacing: .12em;
}

.ere-mobile-nav-link > i {
    color: rgba(255,255,255,.25);

    font-size: 10px;

    transition: var(--ere-transition);
}

.ere-mobile-nav-link:hover {
    padding-left: 5px;
    color: var(--ere-gold-light);
}

.ere-mobile-nav-link:hover > i {
    color: var(--ere-gold);
    transform: translateX(4px);
}


/* ============================================================
   MOBILE PROPERTY SEARCH BUTTON
============================================================ */

.ere-mobile-search-property {
    width: 100%;

    margin-top: 25px;
    padding: 14px;

    display: grid;
    grid-template-columns: 45px 1fr auto;
    align-items: center;
    gap: 12px;

    border: 0;

    background:
        linear-gradient(
            135deg,
            var(--ere-gold-light),
            var(--ere-gold)
        );

    color: var(--ere-black);

    cursor: pointer;

    text-align: left;

    font-family: var(--ere-font-main);
}

.ere-mobile-search-property > span {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

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

.ere-mobile-search-property div {
    display: flex;
    flex-direction: column;
}

.ere-mobile-search-property small {
    font-size: 8px;
    font-weight: 700;

    opacity: .65;
}

.ere-mobile-search-property strong {
    margin-top: 2px;

    font-size: 12px;
}


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

.ere-mobile-contact-card {
    margin-top: 25px;
    padding: 20px;

    border: 1px solid rgba(255,255,255,.08);

    background: rgba(255,255,255,.025);
}

.ere-mobile-contact-label {
    display: block;

    margin-bottom: 12px;

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

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .13em;
    text-transform: uppercase;
}

.ere-mobile-contact-card a {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 6px 0;

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

    font-size: 10px;

    word-break: break-word;

    transition: var(--ere-transition);
}

.ere-mobile-contact-card a i {
    width: 18px;

    color: var(--ere-gold);
}

.ere-mobile-contact-card a:hover {
    color: white;
}

.ere-mobile-social {
    margin-top: 22px;

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

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

    font-size: 9px;

    text-transform: uppercase;
    letter-spacing: .12em;
}

.ere-mobile-social a {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.06);

    color: white;

    transition: var(--ere-transition);
}

.ere-mobile-social a:hover {
    background: var(--ere-gold);
    color: var(--ere-black);
}


/* ============================================================
   12. PROPERTY FILTER DRAWER
============================================================ */

.ere-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;

    z-index: 100000;

    width: min(100%, 510px);
    height: 100dvh;

    overflow-y: auto;

    background: var(--ere-cream);

    transform: translateX(105%);

    box-shadow:
        -20px 0 60px rgba(0,0,0,.12);

    transition:
        transform .48s cubic-bezier(.7,0,.2,1);

    font-family: var(--ere-font-main);
}

.ere-filter-drawer.ere-open {
    transform: translateX(0);
}


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

.ere-filter-header {
    position: relative;

    padding: 37px 70px 27px 32px;

    background: var(--ere-black);
    color: white;
}

.ere-filter-eyebrow {
    color: var(--ere-gold);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .20em;
}

.ere-filter-header h2 {
    margin: 8px 0;

    color: white;

    font-family: var(--ere-font-title);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
}

.ere-filter-header p {
    max-width: 355px;

    margin: 0;

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

    font-size: 10px;
    line-height: 1.7;
}

.ere-filter-close {
    position: absolute;
    top: 25px;
    right: 25px;
}

.ere-filter-close:hover {
    background: var(--ere-gold);
    border-color: var(--ere-gold);
    color: var(--ere-black);

    transform: rotate(90deg);
}


/* ============================================================
   FILTER FORM
============================================================ */

.ere-property-filter-form {
    padding: 27px 32px;
}

.ere-filter-field {
    margin-bottom: 19px;
}

.ere-filter-field label {
    display: block;

    margin-bottom: 8px;

    color: #36383b;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .02em;
}

.ere-filter-field label > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ere-filter-field label i {
    color: var(--ere-gold);
}


/* ============================================================
   SELECT
============================================================ */

.ere-select-wrapper {
    position: relative;
}

.ere-select-wrapper select {
    width: 100%;
    height: 50px;

    padding: 0 42px 0 15px;

    appearance: none;
    -webkit-appearance: none;

    border:
        1px solid rgba(0,0,0,.10);

    border-radius: 2px;

    background: white;
    color: #444;

    outline: none;

    font-family: var(--ere-font-main);
    font-size: 10px;
    font-weight: 600;

    transition: var(--ere-transition);
}

.ere-select-wrapper select:focus {
    border-color: var(--ere-gold);

    box-shadow:
        0 0 0 3px rgba(185,154,93,.08);
}

.ere-select-wrapper > i {
    position: absolute;
    top: 50%;
    right: 15px;

    transform: translateY(-50%);

    pointer-events: none;

    color: var(--ere-gold);

    font-size: 9px;
}


/* ============================================================
   INPUT
============================================================ */

.ere-input-wrapper input {
    width: 100%;
    height: 50px;

    padding: 0 15px;

    border:
        1px solid rgba(0,0,0,.10);

    border-radius: 2px;

    background: white;

    outline: none;

    font-family: var(--ere-font-main);
    font-size: 10px;

    transition: var(--ere-transition);
}

.ere-input-wrapper input:focus {
    border-color: var(--ere-gold);

    box-shadow:
        0 0 0 3px rgba(185,154,93,.08);
}


/* ============================================================
   OPERATION SELECTOR
============================================================ */

.ere-operation-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    padding: 4px;

    background: #eae6dd;

    border-radius: 3px;
}

.ere-operation-selector label {
    margin: 0;

    cursor: pointer;
}

.ere-operation-selector input {
    display: none;
}

.ere-operation-selector span {
    min-height: 40px;

    display: grid !important;
    place-items: center;

    border-radius: 2px;

    color: #696a6d;

    font-size: 9px;
    font-weight: 800;

    transition: var(--ere-transition);
}

.ere-operation-selector input:checked + span {
    background: white;

    color: var(--ere-black);

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


/* ============================================================
   QUICK FILTERS
============================================================ */

.ere-quick-filter-section {
    padding-top: 4px;
}

.ere-quick-filter-title {
    display: block;

    margin-bottom: 10px;

    color: #707276;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .10em;
    text-transform: uppercase;
}

.ere-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ere-filter-chips button {
    min-height: 34px;

    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    border:
        1px solid rgba(0,0,0,.09);

    border-radius: 40px;

    background: white;
    color: #555;

    cursor: pointer;

    font-family: var(--ere-font-main);
    font-size: 8px;
    font-weight: 700;

    transition: var(--ere-transition);
}

.ere-filter-chips button i {
    color: var(--ere-gold);
}

.ere-filter-chips button:hover {
    background: var(--ere-black);
    color: white;

    border-color: var(--ere-black);
}


/* ============================================================
   FILTER ACTIONS
============================================================ */

.ere-filter-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;

    margin-top: 27px;
}

.ere-reset-filter {
    min-height: 53px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border:
        1px solid rgba(0,0,0,.10);

    background: transparent;
    color: #6b6d70;

    cursor: pointer;

    font-family: var(--ere-font-main);
    font-size: 9px;
    font-weight: 700;

    transition: var(--ere-transition);
}

.ere-reset-filter:hover {
    background: white;
    color: var(--ere-black);
}

.ere-submit-filter {
    position: relative;

    min-height: 53px;

    padding: 0 18px;

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

    overflow: hidden;

    border: 0;

    background: var(--ere-black);
    color: white;

    cursor: pointer;

    font-family: var(--ere-font-main);
    font-size: 10px;
    font-weight: 800;

    transition: var(--ere-transition);
}

.ere-submit-filter::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    background: var(--ere-gold);

    transition: width var(--ere-transition);
}

.ere-submit-filter span,
.ere-submit-filter i {
    position: relative;
    z-index: 2;
}

.ere-submit-filter:hover::before {
    width: 100%;
}

.ere-submit-filter:hover {
    color: var(--ere-black);
}


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

.ere-filter-footer {
    margin: 0 32px 30px;
    padding: 15px;

    display: grid;
    grid-template-columns: 42px 1fr 36px;
    align-items: center;
    gap: 10px;

    border:
        1px solid rgba(185,154,93,.20);

    background: rgba(185,154,93,.08);
}

.ere-filter-footer-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    background: white;
    color: var(--ere-gold);
}

.ere-filter-footer > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.ere-filter-footer small {
    color: #777;

    font-size: 8px;
}

.ere-filter-footer strong {
    margin-top: 2px;

    color: var(--ere-black);

    font-size: 9px;
}

.ere-filter-footer > a {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--ere-black);
    color: white;

    font-size: 10px;

    transition: var(--ere-transition);
}

.ere-filter-footer > a:hover {
    background: var(--ere-gold);
    color: var(--ere-black);
}


/* ============================================================
   13. MOBILE BOTTOM NAV
============================================================ */

.ere-mobile-bottom-nav {
    display: none;
}


/* ============================================================
   14. BODY LOCK
============================================================ */

body.ere-no-scroll {
    overflow: hidden !important;
}


/* ============================================================
   15. RESPONSIVE TABLET
============================================================ */

@media (max-width: 1180px) {

    .ere-desktop-nav {
        gap: 18px;
    }

    .ere-nav-link {
        font-size: 10px;
    }

    .ere-call-button-text {
        display: none;
    }

    .ere-call-button {
        padding: 7px;
    }

    .ere-filter-trigger-text {
        display: none;
    }

    .ere-filter-trigger {
        padding: 6px;
    }

}


/* ============================================================
   16. RESPONSIVE MOBILE
============================================================ */

@media (max-width: 900px) {

    .ere-container {
        width: min(calc(100% - 28px), var(--ere-header-width));
    }


    /* TOP BAR */

    .ere-topbar {
        min-height: 34px;
    }

    .ere-topbar-inner {
        min-height: 34px;
    }

    .ere-topbar-email,
    .ere-topbar-status,
    .ere-topbar-social {
        display: none;
    }

    .ere-topbar-left {
        flex: 1;
    }

    .ere-topbar-right {
        margin-left: auto;
    }

    .ere-topbar-phone {
        min-height: 34px;

        padding: 0 11px;

        font-size: 9px;
    }

    .ere-topbar-item {
        font-size: 9px;
    }


    /* HEADER */

    .ere-header-inner,
    .ere-main-header.ere-header-small .ere-header-inner {
        min-height: 74px;
    }

    .ere-desktop-nav {
        display: none;
    }

    .ere-filter-trigger {
        display: none;
    }

    .ere-call-button {
        display: none;
    }

    .ere-mobile-menu-trigger {
        display: flex;
    }


    /* BRAND */

    .ere-brand {
        gap: 9px;
    }

    .ere-brand-mark {
        width: 41px;
        height: 41px;
    }

    .ere-brand-mark svg {
        width: 31px;
        height: 31px;
    }

    .ere-brand-text strong {
        font-size: 19px;
    }

    .ere-brand-text > span {
        font-size: 8px;
    }

    .ere-brand-text small {
        font-size: 6px;
    }


    /* MOBILE BOTTOM NAV */

    .ere-mobile-bottom-nav {
        position: fixed;
        z-index: 9990;

        left: 50%;
        bottom:
            max(11px, env(safe-area-inset-bottom));

        transform: translateX(-50%);

        width: min(calc(100% - 20px), 510px);
        min-height: 67px;

        padding: 6px 8px;

        display: grid;
        grid-template-columns:
            1fr 1fr 64px 1fr 1fr;

        align-items: center;

        border:
            1px solid rgba(255,255,255,.10);

        border-radius: 18px;

        background: rgba(14,15,16,.96);

        box-shadow:
            0 13px 40px rgba(0,0,0,.28);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        font-family: var(--ere-font-main);
    }

    .ere-mobile-bottom-item {
        height: 52px;

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

        gap: 5px;

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

        font-size: 7px;
        font-weight: 700;

        transition: var(--ere-transition);
    }

    .ere-mobile-bottom-item i {
        font-size: 15px;
    }

    .ere-mobile-bottom-item:hover,
    .ere-mobile-bottom-item.ere-active {
        color: var(--ere-gold-light);
    }

    .ere-mobile-bottom-search {
        position: relative;

        width: 57px;
        height: 57px;

        margin: -23px auto 0;

        display: grid;
        place-items: center;

        border: 5px solid var(--ere-cream);
        border-radius: 50%;

        background:
            linear-gradient(
                135deg,
                var(--ere-gold-light),
                var(--ere-gold)
            );

        color: var(--ere-black);

        cursor: pointer;

        box-shadow:
            0 10px 25px rgba(185,154,93,.30);

        transition: var(--ere-transition);
    }

    .ere-mobile-bottom-search:hover {
        transform: translateY(-3px);
    }

    .ere-mobile-bottom-search span {
        width: 100%;
        height: 100%;

        display: grid;
        place-items: center;
    }

}


/* ============================================================
   17. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .ere-container {
        width: calc(100% - 22px);
    }

    .ere-topbar-item span {
        font-size: 8px;
    }

    .ere-topbar-phone span {
        font-size: 8px;
    }

    .ere-header-inner {
        gap: 10px;
    }

    .ere-brand-text strong {
        font-size: 17px;
    }

    .ere-brand-text > span {
        letter-spacing: .18em;
    }

    .ere-brand-text small {
        display: none;
    }

    .ere-mobile-menu-trigger {
        width: 45px;
        height: 45px;
    }

    .ere-filter-header {
        padding:
            31px 63px 25px 22px;
    }

    .ere-filter-header h2 {
        font-size: 28px;
    }

    .ere-property-filter-form {
        padding: 24px 22px;
    }

    .ere-filter-footer {
        margin:
            0 22px 25px;
    }

    .ere-mobile-bottom-nav {
        width: calc(100% - 14px);

        border-radius: 16px;
    }

    .ere-mobile-bottom-item span {
        font-size: 6.5px;
    }

}


/* ============================================================
   18. ACCESSIBILITY / REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ere-site-header-shell *,
    .ere-mobile-drawer *,
    .ere-filter-drawer *,
    .ere-mobile-bottom-nav * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   PREMIUM HEADER
   CSS END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   PREMIUM HERO SLIDER
   CSS START
============================================================ */


/* ============================================================
   01. SLIDER PRINCIPAL
============================================================ */

.ere-hero-slider {
    position: relative;

    width: 100%;
    height: clamp(620px, 72vw, 760px);

    overflow: hidden;

    background: #0b0c0d;

    font-family: 'Manrope', sans-serif;
}


/* ============================================================
   02. TRACK
============================================================ */

.ere-hero-track {
    position: relative;

    width: 100%;
    height: 100%;
}


/* ============================================================
   03. SLIDES
============================================================ */

.ere-hero-slide {
    position: absolute;
    inset: 0;

    z-index: 1;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.ere-hero-slide-active {
    z-index: 2;

    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


/* ============================================================
   04. IMAGEN
============================================================ */

.ere-hero-media {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.ere-hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.07);

    transition:
        transform 8s cubic-bezier(.2,.7,.2,1);
}

.ere-hero-slide-active .ere-hero-media img {
    transform: scale(1);
}


/* ============================================================
   05. OVERLAY
============================================================ */

.ere-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(8,9,10,.93) 0%,
            rgba(8,9,10,.78) 37%,
            rgba(8,9,10,.35) 68%,
            rgba(8,9,10,.15) 100%
        ),
        linear-gradient(
            0deg,
            rgba(8,9,10,.60) 0%,
            transparent 45%
        );
}


/* ============================================================
   06. CONTAINER
============================================================ */

.ere-hero-container {
    position: relative;
    z-index: 5;

    width: min(calc(100% - 48px), 1420px);
    height: 100%;

    margin-inline: auto;

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

    gap: 80px;

    padding-bottom: 65px;
}


/* ============================================================
   07. CONTENT
============================================================ */

.ere-hero-content {
    width: min(720px, 70%);

    color: #ffffff;
}


/* ============================================================
   08. EYEBROW
============================================================ */

.ere-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 21px;

    color: #d8bc7d;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .65s ease .15s,
        transform .65s ease .15s;
}

.ere-hero-eyebrow > span {
    width: 38px;
    height: 1px;

    display: block;

    background: #b99a5d;
}

.ere-hero-slide-active .ere-hero-eyebrow {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   09. TITULO
============================================================ */

.ere-hero-content h1,
.ere-hero-content h2 {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-family: 'Playfair Display', serif;
    font-size: clamp(48px, 5.2vw, 79px);
    font-weight: 500;

    line-height: .99;

    letter-spacing: -.035em;

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease .25s,
        transform .8s ease .25s;
}

.ere-hero-content h1 span,
.ere-hero-content h2 span {
    display: block;

    color: #d8bc7d;

    font-style: italic;
    font-weight: 500;
}

.ere-hero-slide-active .ere-hero-content h1,
.ere-hero-slide-active .ere-hero-content h2 {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   10. DESCRIPCION
============================================================ */

.ere-hero-content > p {
    max-width: 585px;

    margin:
        25px 0 0;

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

    font-size: 15px;
    font-weight: 400;

    line-height: 1.75;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .8s ease .38s,
        transform .8s ease .38s;
}

.ere-hero-slide-active .ere-hero-content > p {
    opacity: 1;

    transform: translateY(0);
}


/* ============================================================
   11. BOTONES
============================================================ */

.ere-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity .8s ease .52s,
        transform .8s ease .52s;
}

.ere-hero-slide-active .ere-hero-actions {
    opacity: 1;

    transform: translateY(0);
}

.ere-hero-btn {
    position: relative;

    min-height: 58px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    overflow: hidden;

    border-radius: 2px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: .015em;

    text-decoration: none;

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


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.ere-hero-btn-primary {
    border: 1px solid #c8a967;

    background:
        linear-gradient(
            135deg,
            #d8bc7d,
            #b99a5d
        );

    color: #0b0c0d;
}

.ere-hero-btn-primary::before {
    content: '';

    position: absolute;
    inset: 0;

    background: #ffffff;

    transform: translateX(-102%);

    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}

.ere-hero-btn-primary span,
.ere-hero-btn-primary i {
    position: relative;
    z-index: 2;
}

.ere-hero-btn-primary:hover::before {
    transform: translateX(0);
}

.ere-hero-btn-primary:hover {
    color: #0b0c0d;

    transform: translateY(-2px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.20);
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

.ere-hero-btn-secondary {
    border:
        1px solid rgba(255,255,255,.25);

    background:
        rgba(255,255,255,.07);

    color: #ffffff;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.ere-hero-btn-secondary:hover {
    border-color:
        rgba(255,255,255,.55);

    background: #ffffff;

    color: #0b0c0d;

    transform: translateY(-2px);
}


/* ============================================================
   12. TARJETA LATERAL
============================================================ */

.ere-hero-side-card {
    align-self: flex-end;

    width: 210px;

    margin-bottom: 90px;

    padding:
        22px 22px 24px;

    border:
        1px solid rgba(255,255,255,.14);

    background:
        rgba(9,10,11,.48);

    color: #ffffff;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;

    transform: translateX(30px);

    transition:
        opacity .8s ease .65s,
        transform .8s ease .65s;
}

.ere-hero-slide-active .ere-hero-side-card {
    opacity: 1;

    transform: translateX(0);
}

.ere-hero-side-number {
    display: block;

    color: #d8bc7d;

    font-family:
        'Playfair Display',
        serif;

    font-size: 35px;
    line-height: 1;
}

.ere-hero-side-line {
    width: 100%;
    height: 1px;

    margin: 17px 0;

    background:
        rgba(255,255,255,.12);
}

.ere-hero-side-label {
    display: block;

    margin-bottom: 7px;

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

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .16em;
}

.ere-hero-side-card strong {
    display: block;

    color: #ffffff;

    font-family:
        'Playfair Display',
        serif;

    font-size: 20px;
    font-weight: 500;

    line-height: 1.12;
}

.ere-hero-side-card small {
    display: block;

    margin-top: 12px;

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

    font-size: 11px;
}


/* ============================================================
   13. CONTROLES
============================================================ */

.ere-hero-controls {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 20;

    height: 76px;

    border-top:
        1px solid rgba(255,255,255,.12);

    background:
        rgba(7,8,9,.45);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ere-hero-controls-inner {
    width:
        min(calc(100% - 48px), 1420px);
    height: 100%;

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 30px;
}


/* ============================================================
   14. COUNTER
============================================================ */

.ere-hero-counter {
    display: flex;
    align-items: center;

    gap: 10px;

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

    font-size: 11px;
    font-weight: 700;
}

#ereHeroCurrent {
    color: #d8bc7d;

    font-size: 17px;
}

.ere-counter-divider {
    width: 34px;
    height: 1px;

    background:
        rgba(255,255,255,.22);
}


/* ============================================================
   15. DOTS
============================================================ */

.ere-hero-dots {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;
}

.ere-hero-dot {
    position: relative;

    width: 26px;
    height: 28px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.ere-hero-dot::before {
    content: '';

    position: absolute;

    top: 50%;
    left: 50%;

    width: 20px;
    height: 2px;

    background:
        rgba(255,255,255,.25);

    transform:
        translate(-50%, -50%);

    transition:
        width .35s ease,
        background .35s ease;
}

.ere-hero-dot.ere-dot-active::before {
    width: 33px;

    background: #d8bc7d;
}


/* ============================================================
   16. ARROWS
============================================================ */

.ere-hero-arrows {
    display: flex;

    gap: 7px;
}

.ere-hero-arrow {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.04);

    color: #ffffff;

    cursor: pointer;

    font-size: 11px;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.ere-hero-arrow:hover {
    border-color: #b99a5d;

    background: #b99a5d;

    color: #0b0c0d;
}

.ere-hero-arrow:first-child:hover {
    transform: translateX(-2px);
}

.ere-hero-arrow-next:hover {
    transform: translateX(2px);
}


/* ============================================================
   17. PROGRESS BAR
============================================================ */

.ere-hero-progress {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 25;

    width: 100%;
    height: 2px;

    background:
        rgba(255,255,255,.04);
}

#ereHeroProgressBar {
    display: block;

    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #9e8047,
            #e0c789
        );
}


/* ============================================================
   18. TABLET
============================================================ */

@media (max-width: 1000px) {

    .ere-hero-slider {
        height: 680px;
    }

    .ere-hero-container {
        width: calc(100% - 40px);

        gap: 35px;
    }

    .ere-hero-content {
        width: 75%;
    }

    .ere-hero-side-card {
        width: 190px;
    }

}


/* ============================================================
   19. MOBILE
============================================================ */

@media (max-width: 767px) {

    .ere-hero-slider {
        height: 650px;
    }


    /* IMAGE */

    .ere-hero-media img {
        object-position: center;
    }


    /* OVERLAY */

    .ere-hero-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(8,9,10,.96) 0%,
                rgba(8,9,10,.80) 45%,
                rgba(8,9,10,.30) 100%
            );
    }


    /* CONTAINER */

    .ere-hero-container {
        width: calc(100% - 32px);

        display: flex;
        align-items: flex-end;

        padding-bottom: 115px;
    }


    /* CONTENT */

    .ere-hero-content {
        width: 100%;
    }


    /* EYEBROW */

    .ere-hero-eyebrow {
        margin-bottom: 16px;

        font-size: 10px;
    }


    /* TITLE */

    .ere-hero-content h1,
    .ere-hero-content h2 {
        max-width: 520px;

        font-size:
            clamp(41px, 12vw, 57px);

        line-height: 1.01;
    }


    /* DESCRIPTION */

    .ere-hero-content > p {
        max-width: 500px;

        margin-top: 18px;

        font-size: 14px;
        line-height: 1.65;
    }


    /* BUTTONS */

    .ere-hero-actions {
        margin-top: 24px;

        gap: 8px;
    }

    .ere-hero-btn {
        min-height: 50px;

        padding: 0 16px;

        font-size: 11px;
    }


    /* SIDE CARD */

    .ere-hero-side-card {
        display: none;
    }


    /* CONTROLS */

    .ere-hero-controls {
        height: 69px;
    }

    .ere-hero-controls-inner {
        width: calc(100% - 30px);

        grid-template-columns:
            auto 1fr auto;

        gap: 12px;
    }

    .ere-counter-divider {
        width: 15px;
    }

    #ereHeroCurrent {
        font-size: 14px;
    }

    .ere-hero-counter {
        gap: 6px;

        font-size: 9px;
    }

    .ere-hero-arrow {
        width: 38px;
        height: 38px;
    }

}


/* ============================================================
   20. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .ere-hero-slider {
        height: 630px;
    }

    .ere-hero-container {
        width: calc(100% - 26px);
    }

    .ere-hero-content h1,
    .ere-hero-content h2 {
        font-size:
            clamp(36px, 11.5vw, 50px);
    }

    .ere-hero-content > p {
        font-size: 14px;
    }

    .ere-hero-actions {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;
    }

    .ere-hero-btn {
        width: 100%;
    }

    .ere-hero-btn-secondary {
        display: none;
    }

    .ere-hero-dots {
        display: none;
    }

    .ere-hero-controls-inner {
        grid-template-columns:
            1fr auto;
    }

}


/* ============================================================
   21. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ere-hero-slide,
    .ere-hero-media img,
    .ere-hero-content h1,
    .ere-hero-content h2,
    .ere-hero-content p,
    .ere-hero-eyebrow,
    .ere-hero-actions,
    .ere-hero-side-card {
        transition: none !important;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   PREMIUM HERO SLIDER
   CSS END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   ABOUT SECTION
   CSS START
============================================================ */


/* ============================================================
   01. SECCION
============================================================ */

.ere-about-section {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 110px 0 0;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf9f6 55%,
            #f5f2eb 100%
        );

    font-family: 'Manrope', sans-serif;
}


/* DECORACION DE FONDO */

.ere-about-section::before {
    content: '';

    position: absolute;

    width: 440px;
    height: 440px;

    top: -180px;
    right: -180px;

    border-radius: 50%;

    border:
        1px solid rgba(185,154,93,.13);

    pointer-events: none;
}

.ere-about-section::after {
    content: '';

    position: absolute;

    width: 260px;
    height: 260px;

    top: -90px;
    right: -90px;

    border-radius: 50%;

    border:
        1px solid rgba(185,154,93,.12);

    pointer-events: none;
}


/* ============================================================
   02. CONTAINER
============================================================ */

.ere-about-container {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 48px), 1320px);

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(65px, 8vw, 120px);
}


/* ============================================================
   03. VISUAL
============================================================ */

.ere-about-visual {
    position: relative;

    min-height: 630px;
}


/* ============================================================
   IMAGEN PRINCIPAL
============================================================ */

.ere-about-image-main {
    position: relative;

    width: 82%;
    height: 540px;

    overflow: hidden;

    background: #ddd;
}

.ere-about-image-main::before {
    content: '';

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            0deg,
            rgba(8,9,10,.28),
            transparent 45%
        );

    pointer-events: none;
}

.ere-about-image-main img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1.1s
        cubic-bezier(.2,.7,.2,1);
}

.ere-about-image-main:hover img {
    transform: scale(1.035);
}


/* ============================================================
   IMAGEN SECUNDARIA
============================================================ */

.ere-about-image-secondary {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 4;

    width: 47%;
    height: 285px;

    overflow: hidden;

    border:
        10px solid #faf9f6;

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.12);
}

.ere-about-image-secondary img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s ease;
}

.ere-about-image-secondary:hover img {
    transform: scale(1.04);
}


/* ============================================================
   FLOATING LOCATION CARD
============================================================ */

.ere-about-floating-label {
    position: absolute;

    left: 0;
    bottom: 25px;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        13px 17px;

    background:
        rgba(10,11,12,.88);

    color: #fff;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ere-about-floating-icon {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #d8bc7d,
            #b99a5d
        );

    color: #0b0c0d;

    font-size: 13px;
}

.ere-about-floating-label > div {
    display: flex;
    flex-direction: column;
}

.ere-about-floating-label small {
    color:
        rgba(255,255,255,.47);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .10em;
}

.ere-about-floating-label strong {
    margin-top: 2px;

    color: white;

    font-size: 11px;
}


/* ============================================================
   SIGNATURE
============================================================ */

.ere-about-visual-signature {
    position: absolute;

    top: 35px;
    right: 6px;

    z-index: 5;

    width: 104px;
    height: 104px;

    display: flex;
    flex-direction: column;

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

    border:
        1px solid rgba(185,154,93,.30);

    background: #f8f6f1;

    transform: rotate(45deg);
}

.ere-about-visual-signature span,
.ere-about-visual-signature small {
    transform: rotate(-45deg);
}

.ere-about-visual-signature span {
    color: #b99a5d;

    font-family:
        'Playfair Display',
        serif;

    font-size: 29px;

    line-height: 1;
}

.ere-about-visual-signature small {
    margin-top: 4px;

    color: #8f8a80;

    font-size: 6px;

    text-transform: uppercase;

    letter-spacing: .12em;
}


/* ============================================================
   04. CONTENT
============================================================ */

.ere-about-content {
    position: relative;

    padding:
        25px 0 30px;
}


/* ============================================================
   EYEBROW
============================================================ */

.ere-about-eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color: #9e8047;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .18em;
}

.ere-about-eyebrow span {
    width: 38px;
    height: 1px;

    background: #b99a5d;
}


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

.ere-about-content h2 {
    max-width: 650px;

    margin: 0;

    color: #101113;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(42px, 4.5vw, 66px);

    font-weight: 500;

    line-height: 1.03;

    letter-spacing: -.035em;
}

.ere-about-content h2 span {
    display: block;

    color: #b99a5d;

    font-style: italic;

    font-weight: 500;
}


/* ============================================================
   TEXTOS
============================================================ */

.ere-about-lead {
    max-width: 640px;

    margin:
        27px 0 0;

    color: #44474a;

    font-size: 16px;

    line-height: 1.75;
}

.ere-about-lead strong {
    color: #151619;
}

.ere-about-description {
    max-width: 640px;

    margin:
        14px 0 0;

    color: #777a7e;

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   05. FEATURES
============================================================ */

.ere-about-features {
    display: grid;

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

    gap:
        23px 27px;

    margin-top: 34px;

    padding-top: 30px;

    border-top:
        1px solid rgba(0,0,0,.08);
}


/* ============================================================
   FEATURE
============================================================ */

.ere-about-feature {
    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 12px;

    align-items: flex-start;
}

.ere-about-feature-icon {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(185,154,93,.22);

    background:
        rgba(185,154,93,.06);

    color: #b99a5d;

    font-size: 13px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}

.ere-about-feature:hover
.ere-about-feature-icon {
    background: #111315;

    border-color: #111315;

    color: #d8bc7d;

    transform:
        translateY(-3px);
}

.ere-about-feature strong {
    display: block;

    margin-top: 1px;

    color: #1a1b1d;

    font-size: 12px;
    font-weight: 800;
}

.ere-about-feature p {
    margin:
        5px 0 0;

    color: #838589;

    font-size: 11px;

    line-height: 1.65;
}


/* ============================================================
   06. ACTIONS
============================================================ */

.ere-about-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 37px;
}


/* ============================================================
   BOTON PRINCIPAL
============================================================ */

.ere-about-btn-primary {
    position: relative;

    min-height: 57px;

    padding:
        0 21px;

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

    gap: 20px;

    overflow: hidden;

    background: #111315;

    color: #fff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.ere-about-btn-primary::before {
    content: '';

    position: absolute;

    inset: 0;

    width: 0;

    background:
        linear-gradient(
            135deg,
            #d8bc7d,
            #b99a5d
        );

    transition:
        width .4s
        cubic-bezier(.2,.8,.2,1);
}

.ere-about-btn-primary span,
.ere-about-btn-primary i {
    position: relative;

    z-index: 2;
}

.ere-about-btn-primary:hover::before {
    width: 100%;
}

.ere-about-btn-primary:hover {
    color: #111315;

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.13);
}


/* ============================================================
   LINK SECUNDARIO
============================================================ */

.ere-about-btn-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #333538;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

    transition:
        color .3s ease;
}

.ere-about-btn-link > span {
    width: 33px;
    height: 33px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(0,0,0,.12);

    color: #b99a5d;

    font-size: 9px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.ere-about-btn-link:hover {
    color: #b99a5d;
}

.ere-about-btn-link:hover span {
    background: #b99a5d;

    color: #111315;

    transform:
        translateX(3px);
}


/* ============================================================
   07. SERVICES STRIP
============================================================ */

.ere-about-services {
    position: relative;

    z-index: 3;

    margin-top: 105px;

    background: #111315;

    border-top:
        1px solid rgba(255,255,255,.06);
}

.ere-about-services-inner {
    width:
        min(calc(100% - 48px), 1320px);

    min-height: 103px;

    margin-inline: auto;

    display: grid;

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

    align-items: center;
}

.ere-about-service-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;
}

.ere-about-service-item span {
    color: #b99a5d;

    font-family:
        'Playfair Display',
        serif;

    font-size: 13px;
}

.ere-about-service-item strong {
    color: rgba(255,255,255,.85);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .04em;
}

.ere-about-service-separator {
    width: 1px;
    height: 25px;

    background:
        rgba(255,255,255,.11);
}


/* ============================================================
   08. ANIMACIONES
============================================================ */

.ere-about-reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.ere-about-reveal.ere-about-visible {
    opacity: 1;

    transform:
        translateY(0);
}

.ere-about-content.ere-about-reveal {
    transition-delay: .12s;
}


/* ============================================================
   09. TABLET
============================================================ */

@media (max-width: 1024px) {

    .ere-about-section {
        padding-top: 85px;
    }

    .ere-about-container {
        gap: 50px;
    }

    .ere-about-visual {
        min-height: 550px;
    }

    .ere-about-image-main {
        width: 85%;
        height: 470px;
    }

    .ere-about-image-secondary {
        width: 48%;
        height: 235px;
    }

    .ere-about-visual-signature {
        width: 90px;
        height: 90px;
    }

}


/* ============================================================
   10. MOBILE
============================================================ */

@media (max-width: 767px) {

    .ere-about-section {
        padding-top: 70px;
    }


    /* CONTAINER */

    .ere-about-container {
        width: calc(100% - 30px);

        grid-template-columns: 1fr;

        gap: 50px;
    }


    /* VISUAL */

    .ere-about-visual {
        min-height: 505px;
    }

    .ere-about-image-main {
        width: 88%;
        height: 430px;
    }

    .ere-about-image-secondary {
        width: 46%;
        height: 205px;

        border-width: 7px;
    }

    .ere-about-visual-signature {
        top: 25px;

        width: 80px;
        height: 80px;
    }

    .ere-about-visual-signature span {
        font-size: 24px;
    }


    /* CONTENT */

    .ere-about-content {
        padding-top: 0;
    }

    .ere-about-content h2 {
        font-size:
            clamp(39px, 11vw, 53px);
    }

    .ere-about-lead {
        font-size: 15px;
    }

    .ere-about-description {
        font-size: 14px;
    }


    /* FEATURES */

    .ere-about-features {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    /* SERVICES */

    .ere-about-services {
        margin-top: 70px;
    }

    .ere-about-services-inner {
        width: calc(100% - 28px);

        padding:
            20px 0;

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

        gap: 0;
    }

    .ere-about-service-item {
        min-height: 55px;

        justify-content: flex-start;

        padding-left: 18px;
    }

    .ere-about-service-separator {
        display: none;
    }

}


/* ============================================================
   11. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .ere-about-container {
        width: calc(100% - 24px);
    }

    .ere-about-visual {
        min-height: 445px;
    }

    .ere-about-image-main {
        width: 91%;
        height: 375px;
    }

    .ere-about-image-secondary {
        width: 49%;
        height: 180px;
    }

    .ere-about-floating-label {
        padding:
            10px 12px;
    }

    .ere-about-floating-icon {
        width: 35px;
        height: 35px;
    }

    .ere-about-floating-label strong {
        font-size: 9px;
    }

    .ere-about-actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .ere-about-btn-primary {
        width: 100%;
    }

}


/* ============================================================
   12. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ere-about-reveal,
    .ere-about-image-main img,
    .ere-about-image-secondary img,
    .ere-about-feature-icon {
        transition: none !important;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   ABOUT SECTION
   CSS END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   HOME PROPERTIES
   CSS START
============================================================ */


/* ============================================================
   01. VARIABLES / SECCION
============================================================ */

.ere-home-properties {

    --ere-hp-black: #111315;
    --ere-hp-dark: #191b1d;

    --ere-hp-gold: #b99a5d;
    --ere-hp-gold-light: #d8bc7d;

    --ere-hp-gray: #7d7f83;
    --ere-hp-light: #f6f4ef;

    --ere-hp-gap: 22px;

    position: relative;

    width: 100%;

    padding:
        105px 0 110px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf9f6 100%
        );

    font-family:
        'Manrope',
        sans-serif;
}


/* ============================================================
   02. OCUPADO = NO SE MUESTRA
============================================================ */

/*
 * CAMBIA:
 *
 * data-status="disponible"
 *
 * POR:
 *
 * data-status="ocupado"
 *
 * Y LA PROPIEDAD DESAPARECE.
 */

.ere-home-property-card[data-status="ocupado"] {
    display: none !important;
}

.ere-home-property-card[hidden] {
    display: none !important;
}


/* ============================================================
   03. CONTAINER
============================================================ */

.ere-home-properties-container {

    position: relative;

    width:
        min(
            calc(100% - 48px),
            1320px
        );

    margin-inline: auto;
}


/* ============================================================
   04. HEADING
============================================================ */

.ere-home-properties-heading {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .65fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 44px;
}


/* ============================================================
   EYEBROW
============================================================ */

.ere-home-properties-eyebrow {

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 15px;

    color:
        #987b46;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.ere-home-properties-eyebrow > span {

    width: 38px;
    height: 1px;

    background:
        var(--ere-hp-gold);
}


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

.ere-home-properties-title h2 {

    max-width: 730px;

    margin: 0;

    color:
        var(--ere-hp-black);

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            43px,
            4.7vw,
            68px
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -.035em;
}

.ere-home-properties-title h2 span {

    display: block;

    color:
        var(--ere-hp-gold);

    font-style: italic;
}


/* ============================================================
   INTRO
============================================================ */

.ere-home-properties-intro {

    padding-bottom: 4px;
}

.ere-home-properties-intro p {

    max-width: 440px;

    margin:
        0 0 20px;

    color:
        var(--ere-hp-gray);

    font-size: 13px;

    line-height: 1.75;
}


/* ============================================================
   VIEW ALL
============================================================ */

.ere-home-properties-all {

    display: inline-flex;
    align-items: center;

    gap: 11px;

    color:
        var(--ere-hp-black);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.ere-home-properties-all i {

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        var(--ere-hp-black);

    color:
        var(--ere-hp-gold-light);

    font-size: 8px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.ere-home-properties-all:hover i {

    transform:
        translateX(4px);

    background:
        var(--ere-hp-gold);

    color:
        var(--ere-hp-black);
}


/* ============================================================
   05. TOOLBAR
============================================================ */

.ere-home-properties-toolbar {

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

    gap: 20px;

    margin-bottom: 25px;

    padding-bottom: 17px;

    border-bottom:
        1px solid rgba(0,0,0,.08);
}


/* ============================================================
   06. TABS
============================================================ */

.ere-home-property-tabs {

    display: inline-flex;

    padding: 4px;

    background:
        #eeece7;
}

.ere-home-property-tab {

    min-width: 115px;
    min-height: 44px;

    padding:
        0 15px;

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

    gap: 9px;

    border: 0;

    background: transparent;

    color: #85878a;

    cursor: pointer;

    font-family: inherit;

    font-size: 10px;
    font-weight: 800;

    transition:
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.ere-home-property-tab > span {

    min-width: 21px;
    height: 21px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(0,0,0,.07);

    font-size: 7px;
}

.ere-home-property-tab.ere-active {

    background: #fff;

    color:
        var(--ere-hp-black);

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.06);
}

.ere-home-property-tab.ere-active > span {

    background:
        var(--ere-hp-gold);

    color:
        var(--ere-hp-black);
}


/* ============================================================
   07. NAVIGATION
============================================================ */

.ere-home-properties-navigation {

    display: flex;

    gap: 6px;
}

.ere-home-properties-navigation button {

    width: 44px;
    height: 44px;

    padding: 0;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(0,0,0,.11);

    background: #fff;

    color:
        var(--ere-hp-black);

    cursor: pointer;

    font-size: 9px;

    transition:
        background .3s ease,
        color .3s ease,
        opacity .3s ease,
        transform .3s ease;
}

.ere-home-properties-navigation button:hover:not(:disabled) {

    background:
        var(--ere-hp-black);

    color:
        var(--ere-hp-gold-light);
}

.ere-home-properties-navigation button:disabled {

    opacity: .27;

    cursor: not-allowed;
}


/* ============================================================
   08. VIEWPORT
============================================================ */

.ere-home-properties-viewport {

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scroll-snap-type:
        x mandatory;

    overscroll-behavior-inline:
        contain;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
        touch;
}

.ere-home-properties-viewport::-webkit-scrollbar {

    display: none;
}


/* ============================================================
   09. TRACK
============================================================ */

.ere-home-properties-track {

    display: grid;

    grid-auto-flow: column;

    grid-auto-columns:
        calc(
            (
                100% -
                (var(--ere-hp-gap) * 2)
            ) / 3
        );

    gap:
        var(--ere-hp-gap);
}


/* ============================================================
   10. CARD
============================================================ */

.ere-home-property-card {

    min-width: 0;

    scroll-snap-align: start;

    background: #fff;

    border:
        1px solid rgba(0,0,0,.075);

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.ere-home-property-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(185,154,93,.28);

    box-shadow:
        0 24px 50px
        rgba(0,0,0,.085);
}


/* ============================================================
   11. IMAGEN
============================================================ */

.ere-home-property-image {

    position: relative;

    width: 100%;
    height: 275px;

    overflow: hidden;

    background: #e5e5e5;
}

.ere-home-property-image > img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .75s
        cubic-bezier(.2,.7,.2,1);
}

.ere-home-property-card:hover
.ere-home-property-image > img {

    transform:
        scale(1.045);
}


/* OVERLAY */

.ere-home-property-overlay {

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(8,9,10,.30) 0%,
            transparent 40%,
            rgba(8,9,10,.34) 100%
        );
}


/* ============================================================
   12. DISPONIBILIDAD
============================================================ */

.ere-home-property-status {

    position: absolute;

    top: 14px;
    left: 14px;

    min-height: 29px;

    padding:
        0 11px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border-radius: 30px;

    background:
        rgba(11,13,14,.82);

    color: #fff;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .06em;

    text-transform: uppercase;
}

.ere-home-property-status > span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #63d183;

    box-shadow:
        0 0 0 3px
        rgba(99,209,131,.16);
}


/* ============================================================
   13. OPERATION
============================================================ */

.ere-home-property-operation {

    position: absolute;

    left: 14px;
    bottom: 14px;

    padding:
        8px 11px;

    background:
        linear-gradient(
            135deg,
            var(--ere-hp-gold-light),
            var(--ere-hp-gold)
        );

    color:
        var(--ere-hp-black);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ============================================================
   14. CODE
============================================================ */

.ere-home-property-code {

    position: absolute;

    right: 14px;
    bottom: 15px;

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

    font-size: 7px;
    font-weight: 700;

    letter-spacing: .08em;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.5);
}


/* ============================================================
   15. CONTENT
============================================================ */

.ere-home-property-content {

    padding:
        21px 20px 18px;
}


/* ============================================================
   LOCATION
============================================================ */

.ere-home-property-location {

    display: flex;
    align-items: center;

    gap: 7px;

    color: #929498;

    font-size: 9px;
}

.ere-home-property-location i {

    flex-shrink: 0;

    color:
        var(--ere-hp-gold);

    font-size: 9px;
}


/* ============================================================
   TITLE
============================================================ */

.ere-home-property-content h3 {

    min-height: 52px;

    margin:
        9px 0 8px;

    color:
        var(--ere-hp-black);

    font-family:
        'Playfair Display',
        serif;

    font-size: 22px;
    font-weight: 600;

    line-height: 1.12;
}

.ere-home-property-content h3 span {

    display: block;

    color: #66696c;

    font-family:
        'Manrope',
        sans-serif;

    font-size: 9px;
    font-style: normal;
    font-weight: 700;

    letter-spacing: .04em;

    margin-top: 4px;

    text-transform: uppercase;
}


/* ============================================================
   16. PRICE
============================================================ */

.ere-home-property-price {

    display: flex;
    align-items: baseline;

    flex-wrap: wrap;

    gap: 7px;
}

.ere-home-property-price strong {

    color:
        var(--ere-hp-gold);

    font-size: 20px;
    font-weight: 800;
}

.ere-home-property-price small {

    color: #9a9ca0;

    font-size: 8px;
    font-weight: 600;
}


/* ============================================================
   17. SPECS
============================================================ */

.ere-home-property-specs {

    min-height: 62px;

    margin-top: 18px;

    padding:
        14px 0;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap:
        9px 14px;

    border-top:
        1px solid rgba(0,0,0,.07);

    border-bottom:
        1px solid rgba(0,0,0,.07);
}

.ere-home-property-specs > span {

    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: #898b8e;

    font-size: 8px;
}

.ere-home-property-specs i {

    color:
        var(--ere-hp-gold);

    font-size: 10px;
}

.ere-home-property-specs strong {

    color:
        var(--ere-hp-black);

    font-size: 9px;
}


/* ============================================================
   18. FOOTER / LINK
============================================================ */

.ere-home-property-footer {

    margin-top: 13px;
}

.ere-home-property-link {

    min-height: 38px;

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

    color:
        var(--ere-hp-black);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .07em;

    text-decoration: none;

    text-transform: uppercase;
}

.ere-home-property-link i {

    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        var(--ere-hp-light);

    color:
        var(--ere-hp-gold);

    font-size: 8px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.ere-home-property-link:hover i {

    transform:
        translateX(3px);

    background:
        var(--ere-hp-black);

    color:
        var(--ere-hp-gold-light);
}


/* ============================================================
   19. BOTTOM
============================================================ */

.ere-home-properties-bottom {

    min-height: 47px;

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

    gap: 15px;

    padding-top: 15px;
}

.ere-home-properties-result {

    color: #999b9e;

    font-size: 8px;

    letter-spacing: .05em;

    text-transform: uppercase;
}

.ere-home-properties-swipe {

    display: none;

    align-items: center;

    gap: 8px;

    color: #999;

    font-size: 7px;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.ere-home-properties-swipe i {

    color:
        var(--ere-hp-gold);

    font-size: 7px;
}


/* ============================================================
   20. EMPTY STATE
============================================================ */

.ere-home-properties-empty {

    padding:
        58px 20px;

    text-align: center;

    border:
        1px solid rgba(0,0,0,.06);

    background:
        var(--ere-hp-light);
}

.ere-home-properties-empty > div {

    width: 62px;
    height: 62px;

    margin:
        0 auto 17px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #fff;

    color:
        var(--ere-hp-gold);

    font-size: 19px;
}

.ere-home-properties-empty h3 {

    margin: 0;

    color:
        var(--ere-hp-black);

    font-family:
        'Playfair Display',
        serif;

    font-size: 25px;
}

.ere-home-properties-empty p {

    max-width: 400px;

    margin:
        8px auto 0;

    color: #86888b;

    font-size: 11px;

    line-height: 1.7;
}


/* ============================================================
   21. TABLET
============================================================ */

@media (max-width: 1050px) {

    .ere-home-properties-heading {

        gap: 35px;
    }


    .ere-home-properties-track {

        grid-auto-columns:
            calc(
                (
                    100% -
                    var(--ere-hp-gap)
                ) / 2
            );
    }

}


/* ============================================================
   22. MOBILE
============================================================ */

@media (max-width: 720px) {

    .ere-home-properties {

        --ere-hp-gap: 15px;

        padding:
            75px 0 80px;
    }


    .ere-home-properties-container {

        width:
            calc(100% - 28px);
    }


    /* HEADING */

    .ere-home-properties-heading {

        grid-template-columns:
            1fr;

        gap: 19px;

        margin-bottom: 34px;
    }


    .ere-home-properties-title h2 {

        font-size:
            clamp(
                39px,
                11vw,
                52px
            );
    }


    .ere-home-properties-intro p {

        max-width: 100%;

        font-size: 13px;
    }


    /* TABS */

    .ere-home-property-tabs {

        flex: 1;
    }


    .ere-home-property-tab {

        flex: 1;

        min-width: 0;

        min-height: 45px;
    }


    /* TRACK */

    .ere-home-properties-track {

        grid-auto-columns:
            86%;
    }


    .ere-home-property-image {

        height: 275px;
    }


    .ere-home-properties-swipe {

        display: flex;
    }

}


/* ============================================================
   23. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .ere-home-properties-container {

        width:
            calc(100% - 22px);
    }


    .ere-home-properties-track {

        grid-auto-columns:
            93%;
    }


    .ere-home-properties-toolbar {

        display: block;
    }


    .ere-home-property-tabs {

        width: 100%;
    }


    .ere-home-properties-navigation {

        display: none;
    }


    .ere-home-property-image {

        height: 255px;
    }


    .ere-home-property-content {

        padding:
            18px 17px 16px;
    }


    .ere-home-property-content h3 {

        font-size: 21px;
    }

}


/* ============================================================
   24. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ere-home-properties-viewport {

        scroll-behavior: auto;
    }


    .ere-home-property-card,
    .ere-home-property-image img,
    .ere-home-property-link i {

        transition: none !important;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   HOME PROPERTIES
   CSS END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   WHY CHOOSE US
   CSS START
============================================================ */


/* ============================================================
   01. SECCION PRINCIPAL
============================================================ */

.ere-why-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 110px 0;
    font-family: 'Manrope', sans-serif;

    background:
        linear-gradient(
            135deg,
            #0f1113 0%,
            #171a1d 35%,
            #22201c 70%,
            #b99a5d 140%
        );
}


/* DECORACIONES SUTILES */

.ere-why-section::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.06);
    pointer-events: none;
}

.ere-why-section::after {
    content: '';
    position: absolute;
    bottom: -140px;
    right: -140px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.06);
    pointer-events: none;
}


/* ============================================================
   02. CONTAINER
============================================================ */

.ere-why-container {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 48px), 1320px);
    margin-inline: auto;
}


/* ============================================================
   03. ENCABEZADO
============================================================ */

.ere-why-heading {
    max-width: 760px;
    margin-bottom: 50px;
}

.ere-why-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #d8bc7d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ere-why-eyebrow span {
    width: 40px;
    height: 1px;
    background: #d8bc7d;
}

.ere-why-heading h2 {
    margin: 0;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 4.8vw, 68px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.035em;
}

.ere-why-heading h2 span {
    display: block;
    color: #d8bc7d;
    font-style: italic;
}

.ere-why-heading p {
    max-width: 640px;
    margin: 22px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 15px;
    line-height: 1.8;
}


/* ============================================================
   04. GRID PRINCIPAL
============================================================ */

.ere-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 34px;
    align-items: start;
}


/* ============================================================
   05. COLUMNA DE TARJETAS
============================================================ */

.ere-why-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}


/* ============================================================
   06. TARJETA
============================================================ */

.ere-why-card {
    position: relative;
    min-height: 210px;
    padding: 26px 24px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.ere-why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(216,188,125,.30);
    background: rgba(255,255,255,.07);
    box-shadow: 0 22px 40px rgba(0,0,0,.18);
}

.ere-why-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #d8bc7d, #b99a5d);
    color: #111315;
    font-size: 16px;
}

.ere-why-card-content h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.ere-why-card-content p {
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.8;
}


/* ============================================================
   07. COLUMNA LATERAL
============================================================ */

.ere-why-side {
    position: relative;
}

.ere-why-side-box {
    position: sticky;
    top: 115px;
    padding: 34px 30px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.05) 100%
        );
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 45px rgba(0,0,0,.14);
}

.ere-why-side-mini {
    display: inline-block;
    margin-bottom: 12px;
    color: #d8bc7d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ere-why-side-top h3 {
    margin: 0;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.12;
}

.ere-why-side-top p {
    margin: 16px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.8;
}


/* ============================================================
   08. LISTA LATERAL
============================================================ */

.ere-why-side-points {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.10);
}

.ere-why-side-point {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 600;
}

.ere-why-side-point i {
    color: #d8bc7d;
    font-size: 11px;
}


/* ============================================================
   09. CONTACTO
============================================================ */

.ere-why-side-contact {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.10);
}

.ere-why-call,
.ere-why-mail {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    font-size: 12px;
    padding: 8px 0;
    transition: color .3s ease;
    word-break: break-word;
}

.ere-why-call:hover,
.ere-why-mail:hover {
    color: #ffffff;
}

.ere-why-call i,
.ere-why-mail i {
    color: #d8bc7d;
    width: 18px;
    flex-shrink: 0;
}


/* ============================================================
   10. BOTONES
============================================================ */

.ere-why-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.ere-why-btn-primary,
.ere-why-btn-secondary {
    min-height: 54px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.ere-why-btn-primary {
    background: linear-gradient(135deg, #d8bc7d, #b99a5d);
    color: #111315;
    border: 1px solid #d8bc7d;
}

.ere-why-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.ere-why-btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.18);
}

.ere-why-btn-secondary:hover {
    background: #ffffff;
    color: #111315;
}


/* ============================================================
   11. ANIMACION REVEAL
============================================================ */

.ere-why-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.ere-why-reveal.ere-why-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   12. TABLET
============================================================ */

@media (max-width: 1024px) {

    .ere-why-grid {
        grid-template-columns: 1fr;
    }

    .ere-why-side-box {
        position: relative;
        top: 0;
    }

}


/* ============================================================
   13. MOBILE
============================================================ */

@media (max-width: 767px) {

    .ere-why-section {
        padding: 75px 0;
    }

    .ere-why-container {
        width: calc(100% - 30px);
    }

    .ere-why-heading {
        margin-bottom: 35px;
    }

    .ere-why-heading h2 {
        font-size: clamp(38px, 11vw, 52px);
    }

    .ere-why-heading p {
        font-size: 14px;
    }

    .ere-why-features {
        grid-template-columns: 1fr;
    }

    .ere-why-card {
        min-height: auto;
    }

    .ere-why-side-box {
        padding: 28px 22px;
    }

    .ere-why-side-top h3 {
        font-size: 28px;
    }

}


/* ============================================================
   14. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .ere-why-container {
        width: calc(100% - 22px);
    }

    .ere-why-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ere-why-btn-primary,
    .ere-why-btn-secondary {
        width: 100%;
    }

}


/* ============================================================
   15. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ere-why-reveal,
    .ere-why-card,
    .ere-why-btn-primary,
    .ere-why-btn-secondary {
        transition: none !important;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   WHY CHOOSE US
   CSS END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   PROPERTY MAP
   CSS START
============================================================ */


/* ============================================================
   01. SECCION
============================================================ */

.ere-property-map-section {

    --ere-map-black: #111315;
    --ere-map-dark: #191b1d;

    --ere-map-gold: #b99a5d;
    --ere-map-gold-light: #d8bc7d;

    --ere-map-cream: #f6f4ef;

    position: relative;

    width: 100%;

    padding:
        105px 0 110px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8f6f1 0%,
            #ffffff 55%,
            #f1ede5 100%
        );

    font-family:
        'Manrope',
        sans-serif;
}


/* ============================================================
   02. CONTAINER
============================================================ */

.ere-property-map-container {

    width:
        min(
            calc(100% - 48px),
            1320px
        );

    margin-inline: auto;
}


/* ============================================================
   03. HEADING
============================================================ */

.ere-property-map-heading {

    display: grid;

    grid-template-columns:
        1.1fr .7fr;

    align-items: end;

    gap: 60px;

    margin-bottom: 40px;
}


.ere-property-map-eyebrow {

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 14px;

    color:
        #967a48;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .18em;
}


.ere-property-map-eyebrow > span {

    width: 38px;
    height: 1px;

    background:
        var(--ere-map-gold);
}


.ere-property-map-heading h2 {

    margin: 0;

    color:
        var(--ere-map-black);

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            43px,
            4.7vw,
            68px
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing:
        -.035em;
}


.ere-property-map-heading h2 span {

    color:
        var(--ere-map-gold);

    font-style: italic;
}


.ere-property-map-heading-copy p {

    max-width: 440px;

    margin: 0;

    color: #777a7e;

    font-size: 13px;

    line-height: 1.8;
}


/* ============================================================
   04. TOOLBAR
============================================================ */

.ere-property-map-toolbar {

    min-height: 67px;

    margin-bottom: 20px;

    padding:
        10px 0;

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

    gap: 20px;

    border-top:
        1px solid rgba(0,0,0,.08);

    border-bottom:
        1px solid rgba(0,0,0,.08);
}


/* ============================================================
   05. TABS
============================================================ */

.ere-property-map-tabs {

    display: flex;

    padding: 4px;

    background:
        #ebe8e2;
}


.ere-property-map-tab {

    min-height: 42px;
    min-width: 100px;

    padding:
        0 13px;

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

    gap: 8px;

    border: 0;

    background:
        transparent;

    color: #7b7d80;

    cursor: pointer;

    font-family: inherit;

    font-size: 9px;
    font-weight: 800;

    transition:
        background .3s ease,
        color .3s ease;
}


.ere-property-map-tab > span {

    min-width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(0,0,0,.07);

    font-size: 7px;
}


.ere-property-map-tab.ere-active {

    background: #fff;

    color:
        var(--ere-map-black);

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


.ere-property-map-tab.ere-active > span {

    background:
        var(--ere-map-gold);

    color:
        var(--ere-map-black);
}


/* ============================================================
   06. LEGEND
============================================================ */

.ere-property-map-legend {

    display: flex;
    align-items: center;

    gap: 17px;
}


.ere-property-map-legend > span {

    display: flex;
    align-items: center;

    gap: 7px;

    color:
        var(--ere-map-black);

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .06em;
}


.ere-property-map-legend > span i {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #63d183;

    box-shadow:
        0 0 0 3px
        rgba(99,209,131,.14);
}


.ere-property-map-legend small {

    color: #999b9e;

    font-size: 8px;
}


/* ============================================================
   07. MAP LAYOUT
============================================================ */

.ere-property-map-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(300px, .55fr);

    min-height: 610px;

    background: #fff;

    border:
        1px solid rgba(0,0,0,.075);

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.075);
}


/* ============================================================
   08. MAP WRAPPER
============================================================ */

.ere-property-map-wrapper {

    position: relative;

    min-width: 0;

    overflow: hidden;
}


.ere-property-map {

    width: 100%;

    height: 610px;

    background:
        #dedbd4;
}


/* ============================================================
   09. MAP BADGE
============================================================ */

.ere-property-map-badge {

    position: absolute;

    z-index: 500;

    left: 20px;
    bottom: 20px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        11px 15px;

    background:
        rgba(17,19,21,.90);

    color: #fff;

    pointer-events: none;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.ere-property-map-badge > i {

    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    background:
        var(--ere-map-gold);

    color:
        var(--ere-map-black);
}


.ere-property-map-badge div {

    display: flex;
    flex-direction: column;
}


.ere-property-map-badge small {

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

    font-size: 7px;

    text-transform: uppercase;

    letter-spacing: .1em;
}


.ere-property-map-badge strong {

    margin-top: 2px;

    color: white;

    font-size: 10px;
}


/* ============================================================
   10. PANEL
============================================================ */

.ere-map-property-panel {

    min-width: 0;

    background:
        var(--ere-map-black);

    color: #fff;
}


/* ============================================================
   11. PANEL IMAGE
============================================================ */

.ere-map-property-image {

    position: relative;

    height: 245px;

    overflow: hidden;

    background: #292b2e;
}


.ere-map-property-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        opacity .25s ease,
        transform .7s ease;
}


.ere-map-property-panel:hover
.ere-map-property-image img {

    transform:
        scale(1.035);
}


/* ============================================================
   12. OPERATION
============================================================ */

.ere-map-property-operation {

    position: absolute;

    left: 15px;
    bottom: 15px;

    padding:
        8px 11px;

    background:
        linear-gradient(
            135deg,
            var(--ere-map-gold-light),
            var(--ere-map-gold)
        );

    color:
        var(--ere-map-black);

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;
}


/* ============================================================
   13. STATUS
============================================================ */

.ere-map-property-status {

    position: absolute;

    top: 15px;
    left: 15px;

    min-height: 28px;

    padding:
        0 10px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border-radius: 30px;

    background:
        rgba(12,14,15,.82);

    color: white;

    font-size: 7px;
    font-weight: 800;

    text-transform: uppercase;
}


.ere-map-property-status i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #63d183;
}


/* ============================================================
   14. PANEL CONTENT
============================================================ */

.ere-map-property-content {

    padding:
        26px 24px 25px;
}


.ere-map-property-code {

    display: block;

    margin-bottom: 12px;

    color:
        var(--ere-map-gold);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .12em;
}


.ere-map-property-location {

    display: flex;
    align-items: center;

    gap: 7px;

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

    font-size: 9px;
}


.ere-map-property-location i {

    color:
        var(--ere-map-gold);
}


/* ============================================================
   15. TITLE
============================================================ */

.ere-map-property-content h3 {

    margin:
        10px 0 14px;

    color: white;

    font-family:
        'Playfair Display',
        serif;

    font-size: 27px;
    font-weight: 500;

    line-height: 1.08;
}


.ere-map-property-content h3 span {

    display: block;

    margin-top: 4px;

    color:
        var(--ere-map-gold-light);

    font-style: italic;
}


/* ============================================================
   16. PRICE
============================================================ */

.ere-map-property-price {

    display: flex;
    align-items: baseline;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 16px;
}


.ere-map-property-price strong {

    color:
        var(--ere-map-gold-light);

    font-size: 21px;
    font-weight: 800;
}


.ere-map-property-price small {

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

    font-size: 8px;
}


/* ============================================================
   17. DESCRIPTION
============================================================ */

.ere-map-property-content > p {

    margin: 0;

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

    font-size: 11px;

    line-height: 1.75;
}


/* ============================================================
   18. META
============================================================ */

.ere-map-property-meta {

    margin-top: 19px;

    padding:
        15px 0;

    display: grid;

    gap: 8px;

    border-top:
        1px solid rgba(255,255,255,.08);

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.ere-map-property-meta span {

    display: flex;
    align-items: center;

    gap: 8px;

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

    font-size: 8px;
}


.ere-map-property-meta i {

    width: 17px;

    color:
        var(--ere-map-gold);
}


/* ============================================================
   19. BUTTON
============================================================ */

.ere-map-property-button {

    min-height: 53px;

    margin-top: 21px;

    padding:
        0 17px;

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

    background:
        linear-gradient(
            135deg,
            var(--ere-map-gold-light),
            var(--ere-map-gold)
        );

    color:
        var(--ere-map-black);

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.ere-map-property-button:hover {

    transform:
        translateY(-2px);

    color:
        var(--ere-map-black);

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.20);
}


/* ============================================================
   20. CUSTOM LEAFLET MARKER
============================================================ */

.ere-map-marker-wrapper {

    background: transparent !important;

    border: 0 !important;
}


.ere-map-marker {

    position: relative;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        4px solid #fff;

    border-radius:
        50% 50% 50% 8px;

    background:
        var(--ere-map-gold);

    color:
        var(--ere-map-black);

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.28);

    transform:
        rotate(-45deg);

    transition:
        transform .25s ease,
        background .25s ease;
}


.ere-map-marker i {

    font-size: 13px;

    transform:
        rotate(45deg);
}


.ere-map-marker:hover,
.ere-map-marker.ere-selected {

    background:
        var(--ere-map-black);

    color:
        var(--ere-map-gold-light);

    transform:
        rotate(-45deg)
        scale(1.12);
}


/* ============================================================
   21. LEAFLET CONTROLS
============================================================ */

.ere-property-map
.leaflet-control-zoom {

    border: 0;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.12);
}


.ere-property-map
.leaflet-control-zoom a {

    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border: 0;

    background: white;

    color:
        var(--ere-map-black);

    font-family: inherit;

    line-height: 39px;
}


.ere-property-map
.leaflet-control-zoom a:hover {

    background:
        var(--ere-map-black);

    color:
        var(--ere-map-gold);
}


/* ============================================================
   22. POPUP
============================================================ */

.ere-map-popup
.leaflet-popup-content-wrapper {

    border-radius: 2px;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.20);
}


.ere-map-popup
.leaflet-popup-content {

    margin: 0;

    width: 230px !important;
}


.ere-map-popup-card {

    padding: 15px;

    font-family:
        'Manrope',
        sans-serif;
}


.ere-map-popup-card small {

    display: block;

    color:
        #b99a5d;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .08em;
}


.ere-map-popup-card strong {

    display: block;

    margin-top: 5px;

    color: #111315;

    font-size: 12px;

    line-height: 1.35;
}


.ere-map-popup-card span {

    display: block;

    margin-top: 4px;

    color: #777;

    font-size: 9px;
}


.ere-map-popup-card a {

    min-height: 34px;

    margin-top: 11px;

    padding:
        0 11px;

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

    background: #111315;

    color: #fff;

    text-decoration: none;

    font-size: 8px;
    font-weight: 800;
}


/* ============================================================
   23. MOBILE NOTE
============================================================ */

.ere-property-map-mobile-note {

    display: none;

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

    gap: 9px;

    margin-top: 15px;

    color: #898b8e;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .07em;
}


.ere-property-map-mobile-note i {

    color:
        var(--ere-map-gold);
}


/* ============================================================
   24. TABLET
============================================================ */

@media (max-width: 1000px) {

    .ere-property-map-layout {

        grid-template-columns:
            1fr 330px;
    }


    .ere-property-map,
    .ere-property-map-layout {

        min-height: 570px;
    }


    .ere-property-map {

        height: 570px;
    }

}


/* ============================================================
   25. MOBILE
============================================================ */

@media (max-width: 767px) {

    .ere-property-map-section {

        padding:
            75px 0 80px;
    }


    .ere-property-map-container {

        width:
            calc(100% - 28px);
    }


    .ere-property-map-heading {

        grid-template-columns:
            1fr;

        gap: 18px;

        margin-bottom: 30px;
    }


    .ere-property-map-heading h2 {

        font-size:
            clamp(
                40px,
                11vw,
                53px
            );
    }


    .ere-property-map-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .ere-property-map-tabs {

        width: 100%;
    }


    .ere-property-map-tab {

        flex: 1;

        min-width: 0;
    }


    .ere-property-map-legend {

        width: 100%;

        justify-content:
            space-between;
    }


    .ere-property-map-layout {

        grid-template-columns:
            1fr;
    }


    .ere-property-map {

        height: 430px;
    }


    .ere-property-map-layout {

        min-height: 0;
    }


    .ere-map-property-image {

        height: 270px;
    }


    .ere-map-property-content h3 {

        font-size: 27px;
    }


    .ere-property-map-mobile-note {

        display: flex;
    }

}


/* ============================================================
   26. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .ere-property-map-container {

        width:
            calc(100% - 22px);
    }


    .ere-property-map {

        height: 390px;
    }


    .ere-property-map-legend small {

        display: none;
    }


    .ere-map-property-image {

        height: 235px;
    }


    .ere-property-map-badge {

        left: 12px;
        bottom: 12px;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   PROPERTY MAP
   CSS END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   PREMIUM FOOTER
   CSS START
============================================================ */


/* ============================================================
   01. FOOTER PRINCIPAL
============================================================ */

.ere-footer {

    --ere-footer-black: #090a0b;
    --ere-footer-dark: #101214;

    --ere-footer-gold: #b99a5d;
    --ere-footer-gold-light: #d8bc7d;

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        var(--ere-footer-black);

    color: #ffffff;

    font-family:
        'Manrope',
        sans-serif;
}


/* ============================================================
   02. BACKGROUND IMAGE
============================================================ */

.ere-footer-background {

    position: absolute;
    inset: 0;

    z-index: 0;
}


.ere-footer-background img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(.72)
        contrast(1.08);
}


/* ============================================================
   03. GRADIENT OVERLAY
============================================================ */

.ere-footer-overlay {

    position: absolute;
    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(6,7,8,.98) 0%,
            rgba(8,9,10,.95) 35%,
            rgba(11,12,13,.86) 70%,
            rgba(11,12,13,.80) 100%
        ),

        linear-gradient(
            180deg,
            rgba(8,9,10,.66) 0%,
            rgba(5,6,7,.95) 100%
        );
}


/* ============================================================
   04. CONTAINER
============================================================ */

.ere-footer-container {

    position: relative;

    z-index: 3;

    width:
        min(
            calc(100% - 48px),
            1320px
        );

    margin-inline: auto;
}


/* ============================================================
   05. CTA SUPERIOR
============================================================ */

.ere-footer-cta {

    position: relative;

    z-index: 4;

    border-bottom:
        1px solid rgba(255,255,255,.10);
}


.ere-footer-cta-inner {

    min-height: 280px;

    padding:
        54px 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(340px, .65fr);

    align-items: center;

    gap: 80px;
}


/* ============================================================
   06. EYEBROW
============================================================ */

.ere-footer-eyebrow {

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 16px;

    color:
        var(--ere-footer-gold-light);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.ere-footer-eyebrow > span {

    width: 38px;
    height: 1px;

    background:
        var(--ere-footer-gold);
}


/* ============================================================
   07. CTA TITULO
============================================================ */

.ere-footer-cta-copy h2 {

    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            39px,
            4.5vw,
            61px
        );

    font-weight: 500;

    line-height: 1.02;

    letter-spacing:
        -.035em;
}


.ere-footer-cta-copy h2 span {

    display: block;

    color:
        var(--ere-footer-gold-light);

    font-style: italic;
}


.ere-footer-cta-copy p {

    max-width: 630px;

    margin:
        20px 0 0;

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

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   08. CTA ACTIONS
============================================================ */

.ere-footer-cta-actions {

    display: grid;

    gap: 9px;
}


.ere-footer-cta-primary {

    min-height: 68px;

    padding:
        9px 17px 9px 9px;

    display: grid;

    grid-template-columns:
        46px 1fr auto;

    align-items: center;

    gap: 13px;

    background:
        linear-gradient(
            135deg,
            var(--ere-footer-gold-light),
            var(--ere-footer-gold)
        );

    color:
        var(--ere-footer-black);

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.ere-footer-cta-primary:hover {

    color:
        var(--ere-footer-black);

    transform:
        translateY(-2px);

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


.ere-footer-cta-icon {

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    background:
        rgba(0,0,0,.12);

    font-size: 13px;
}


.ere-footer-cta-text {

    display: flex;
    flex-direction: column;
}


.ere-footer-cta-text small {

    font-size: 8px;
    font-weight: 700;

    opacity: .65;
}


.ere-footer-cta-text strong {

    margin-top: 2px;

    font-size: 13px;
    font-weight: 800;
}


.ere-footer-cta-secondary {

    min-height: 53px;

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

    gap: 10px;

    border:
        1px solid rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.04);

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

    backdrop-filter:
        blur(10px);

    transition:
        background .3s ease,
        color .3s ease;
}


.ere-footer-cta-secondary:hover {

    background: #ffffff;

    color:
        var(--ere-footer-black);
}


/* ============================================================
   09. FOOTER GRID
============================================================ */

.ere-footer-main {

    position: relative;

    z-index: 3;
}


.ere-footer-grid {

    padding:
        73px 0 70px;

    display: grid;

    grid-template-columns:
        minmax(270px, 1.35fr)
        .65fr
        .78fr
        1.05fr;

    gap:
        clamp(
            38px,
            5vw,
            75px
        );
}


/* ============================================================
   10. BRAND
============================================================ */

.ere-footer-brand {

    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: #ffffff;

    text-decoration: none;
}


.ere-footer-brand-mark {

    width: 53px;
    height: 53px;

    display: grid;
    place-items: center;

    color:
        var(--ere-footer-gold-light);

    border:
        1px solid rgba(216,188,125,.35);

    transform:
        rotate(45deg);

    transition:
        background .3s ease,
        border-color .3s ease;
}


.ere-footer-brand:hover
.ere-footer-brand-mark {

    background:
        rgba(216,188,125,.09);

    border-color:
        var(--ere-footer-gold);
}


.ere-footer-brand-mark svg {

    width: 39px;
    height: 39px;

    transform:
        rotate(-45deg);
}


.ere-footer-brand-text {

    display: flex;
    flex-direction: column;

    line-height: 1;
}


.ere-footer-brand-text strong {

    color: #ffffff;

    font-family:
        'Playfair Display',
        serif;

    font-size: 25px;

    letter-spacing: .06em;
}


.ere-footer-brand-text > span {

    margin-top: 4px;

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

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .25em;
}


.ere-footer-brand-text small {

    margin-top: 5px;

    color:
        var(--ere-footer-gold);

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .35em;
}


/* ============================================================
   11. BRAND DESCRIPTION
============================================================ */

.ere-footer-brand-description {

    max-width: 350px;

    margin:
        26px 0 0;

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

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   12. SOCIAL
============================================================ */

.ere-footer-social {

    margin-top: 26px;

    display: flex;
    align-items: center;

    gap: 15px;
}


.ere-footer-social-title {

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

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.ere-footer-social-links {

    display: flex;

    gap: 7px;
}


.ere-footer-social-links a {

    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.05);

    color: #ffffff;

    font-size: 12px;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.ere-footer-social-links a:hover {

    border-color:
        var(--ere-footer-gold);

    background:
        var(--ere-footer-gold);

    color:
        var(--ere-footer-black);

    transform:
        translateY(-2px);
}


/* ============================================================
   13. LICENSE
============================================================ */

.ere-footer-license {

    margin-top: 25px;

    padding-top: 19px;

    display: flex;
    align-items: center;

    gap: 9px;

    border-top:
        1px solid rgba(255,255,255,.08);

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

    font-size: 9px;

    line-height: 1.5;
}


.ere-footer-license i {

    color:
        var(--ere-footer-gold);

    font-size: 11px;
}


/* ============================================================
   14. COLUMNS
============================================================ */

.ere-footer-column {

    padding-top: 6px;
}


.ere-footer-column-number {

    display: block;

    margin-bottom: 10px;

    color:
        var(--ere-footer-gold);

    font-family:
        'Playfair Display',
        serif;

    font-size: 12px;
}


.ere-footer-column h3 {

    margin:
        0 0 22px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: .04em;
}


/* ============================================================
   15. FOOTER LINKS
============================================================ */

.ere-footer-links {

    display: grid;
}


.ere-footer-links a {

    min-height: 42px;

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

    gap: 10px;

    border-bottom:
        1px solid rgba(255,255,255,.065);

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

    text-decoration: none;

    font-size: 12px;

    transition:
        color .3s ease,
        padding-left .3s ease;
}


.ere-footer-links a i {

    flex-shrink: 0;

    color:
        rgba(216,188,125,.38);

    font-size: 8px;

    transition:
        transform .3s ease,
        color .3s ease;
}


.ere-footer-links a:hover {

    padding-left: 4px;

    color:
        var(--ere-footer-gold-light);
}


.ere-footer-links a:hover i {

    color:
        var(--ere-footer-gold);

    transform:
        translateX(3px);
}


/* ============================================================
   16. CONTACT
============================================================ */

.ere-footer-contact-list {

    display: grid;

    gap: 10px;
}


.ere-footer-contact-item {

    min-width: 0;

    padding:
        10px 0;

    display: grid;

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

    align-items: center;

    gap: 11px;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid rgba(255,255,255,.065);
}


.ere-footer-contact-icon {

    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(216,188,125,.18);

    background:
        rgba(216,188,125,.07);

    color:
        var(--ere-footer-gold);

    font-size: 11px;

    transition:
        background .3s ease,
        color .3s ease;
}


a.ere-footer-contact-item:hover
.ere-footer-contact-icon {

    background:
        var(--ere-footer-gold);

    color:
        var(--ere-footer-black);
}


.ere-footer-contact-info {

    min-width: 0;

    display: flex;
    flex-direction: column;
}


.ere-footer-contact-info small {

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

    font-size: 8px;

    letter-spacing: .05em;

    text-transform: uppercase;
}


.ere-footer-contact-info strong {

    margin-top: 4px;

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

    font-size: 11px;
    font-weight: 700;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


/* ============================================================
   17. AVAILABILITY
============================================================ */

.ere-footer-availability {

    margin-top: 22px;

    padding:
        15px;

    display: grid;

    grid-template-columns:
        auto 1fr;

    align-items: center;

    gap: 12px;

    border:
        1px solid rgba(216,188,125,.16);

    background:
        rgba(216,188,125,.06);
}


.ere-footer-availability-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #63d183;

    box-shadow:
        0 0 0 4px
        rgba(99,209,131,.10);
}


.ere-footer-availability div {

    display: flex;
    flex-direction: column;
}


.ere-footer-availability small {

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

    font-size: 8px;
}


.ere-footer-availability strong {

    margin-top: 2px;

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

    font-size: 10px;
}


/* ============================================================
   18. CONTACT BUTTON
============================================================ */

.ere-footer-contact-button {

    min-height: 47px;

    margin-top: 14px;

    padding:
        0 14px;

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

    border:
        1px solid rgba(216,188,125,.25);

    background:
        rgba(216,188,125,.06);

    color:
        var(--ere-footer-gold-light);

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    transition:
        background .3s ease,
        color .3s ease;
}


.ere-footer-contact-button:hover {

    background:
        var(--ere-footer-gold);

    color:
        var(--ere-footer-black);
}


/* ============================================================
   19. BOTTOM
============================================================ */

.ere-footer-bottom {

    position: relative;

    z-index: 4;

    border-top:
        1px solid rgba(255,255,255,.09);

    background:
        rgba(4,5,6,.45);
}


.ere-footer-bottom-inner {

    min-height: 76px;

    display: grid;

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

    align-items: center;

    gap: 25px;
}


/* ============================================================
   20. COPYRIGHT
============================================================ */

.ere-footer-copyright {

    display: flex;
    flex-wrap: wrap;

    gap: 4px;

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

    font-size: 9px;

    letter-spacing: .03em;
}


/* ============================================================
   21. BOTTOM LINKS
============================================================ */

.ere-footer-bottom-center {

    display: flex;
    align-items: center;

    gap: 9px;
}


.ere-footer-bottom-center a {

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

    text-decoration: none;

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: .11em;

    transition:
        color .3s ease;
}


.ere-footer-bottom-center a:hover {

    color:
        var(--ere-footer-gold-light);
}


.ere-footer-bottom-center i {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        var(--ere-footer-gold);
}


/* ============================================================
   22. BACK TO TOP
============================================================ */

.ere-footer-back-top {

    justify-self: end;

    min-height: 40px;

    padding:
        0 6px 0 14px;

    display: inline-flex;
    align-items: center;

    gap: 12px;

    border: 0;

    background: transparent;

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

    cursor: pointer;

    font-family: inherit;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .07em;

    transition:
        color .3s ease;
}


.ere-footer-back-top i {

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.14);

    color:
        var(--ere-footer-gold);

    font-size: 9px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.ere-footer-back-top:hover {

    color: #ffffff;
}


.ere-footer-back-top:hover i {

    background:
        var(--ere-footer-gold);

    color:
        var(--ere-footer-black);

    transform:
        translateY(-3px);
}


/* ============================================================
   23. TABLET
============================================================ */

@media (max-width: 1050px) {

    .ere-footer-cta-inner {

        grid-template-columns:
            1fr .65fr;

        gap: 45px;
    }


    .ere-footer-grid {

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


    .ere-footer-contact-column {

        grid-column:
            2 / 4;
    }

}


/* ============================================================
   24. MOBILE
============================================================ */

@media (max-width: 767px) {

    .ere-footer-container {

        width:
            calc(100% - 30px);
    }


    /* CTA */

    .ere-footer-cta-inner {

        min-height: auto;

        padding:
            60px 0;

        grid-template-columns:
            1fr;

        gap: 32px;
    }


    .ere-footer-cta-copy h2 {

        font-size:
            clamp(
                38px,
                10.8vw,
                50px
            );
    }


    .ere-footer-cta-copy p {

        font-size: 14px;
    }


    /* GRID */

    .ere-footer-grid {

        padding:
            58px 0 50px;

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

        gap:
            45px 30px;
    }


    .ere-footer-brand-column {

        grid-column:
            1 / -1;
    }


    .ere-footer-contact-column {

        grid-column:
            1 / -1;
    }


    .ere-footer-brand-description {

        max-width:
            500px;
    }


    /* BOTTOM */

    .ere-footer-bottom-inner {

        padding:
            20px 0 105px;

        min-height: auto;

        grid-template-columns:
            1fr auto;

        gap: 17px;
    }


    /*
     * ESPACIO EXTRA PARA EL MENU
     * FLOTANTE MOBILE DEL HEADER.
     */

    .ere-footer-bottom-center {

        display: none;
    }

}


/* ============================================================
   25. SMALL MOBILE
============================================================ */

@media (max-width: 520px) {

    .ere-footer-container {

        width:
            calc(100% - 22px);
    }


    .ere-footer-grid {

        grid-template-columns:
            1fr;

        gap: 43px;
    }


    .ere-footer-brand-column,
    .ere-footer-contact-column {

        grid-column: auto;
    }


    .ere-footer-cta-actions {

        width: 100%;
    }


    .ere-footer-cta-primary,
    .ere-footer-cta-secondary {

        width: 100%;
    }


    .ere-footer-bottom-inner {

        grid-template-columns:
            1fr;

        align-items:
            flex-start;
    }


    .ere-footer-back-top {

        justify-self:
            start;

        padding-left: 0;
    }

}


/* ============================================================
   26. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ere-footer *,
    .ere-footer *::before,
    .ere-footer *::after {

        transition:
            none !important;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   PREMIUM FOOTER
   CSS END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   ABOUT PREMIUM
   CSS START
============================================================ */


/* ============================================================
   01. SECTION
============================================================ */

.ere-about-pro {

    --ere-ap-black: #101214;
    --ere-ap-dark: #17191b;

    --ere-ap-gold: #b99a5d;
    --ere-ap-gold-light: #d8bc7d;

    --ere-ap-gray: #777b7f;
    --ere-ap-light: #f5f3ee;

    position: relative;

    width: 100%;

    padding:
        115px 0 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f6f1 55%,
            #f0ece4 100%
        );

    font-family:
        'Manrope',
        sans-serif;
}


/* ============================================================
   02. BACKGROUND ARCHITECTURAL LINES
============================================================ */

.ere-about-pro-bg-line {

    position: absolute;

    pointer-events: none;

    border:
        1px solid rgba(185,154,93,.12);

    transform:
        rotate(45deg);
}


.ere-about-pro-bg-line-1 {

    width: 410px;
    height: 410px;

    top: -230px;
    right: -180px;
}


.ere-about-pro-bg-line-2 {

    width: 250px;
    height: 250px;

    left: -170px;
    bottom: 130px;
}


/* ============================================================
   03. CONTAINER
============================================================ */

.ere-about-pro-container {

    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 48px),
            1320px
        );

    margin-inline: auto;
}


/* ============================================================
   04. HEADER
============================================================ */

.ere-about-pro-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, .55fr);

    align-items: end;

    gap: 80px;

    margin-bottom: 53px;
}


/* EYEBROW */

.ere-about-pro-eyebrow {

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 17px;

    color:
        #967a48;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.ere-about-pro-eyebrow > span {

    width: 42px;
    height: 1px;

    background:
        var(--ere-ap-gold);
}


/* TITLE */

.ere-about-pro-header h2 {

    max-width: 790px;

    margin: 0;

    color:
        var(--ere-ap-black);

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    font-weight: 500;

    letter-spacing:
        -.045em;

    line-height: .98;
}


.ere-about-pro-header h2 span {

    display: block;

    color:
        var(--ere-ap-gold);

    font-style: italic;
}


/* RIGHT */

.ere-about-pro-header-right {

    position: relative;

    padding:
        0 0 4px 44px;

    border-left:
        1px solid rgba(0,0,0,.10);
}


.ere-about-pro-number {

    position: absolute;

    top: -24px;
    left: -11px;

    padding:
        5px 7px;

    background:
        var(--ere-ap-light);

    color:
        var(--ere-ap-gold);

    font-family:
        'Playfair Display',
        serif;

    font-size: 11px;
}


.ere-about-pro-header-right p {

    margin: 0;

    color:
        #76797c;

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   05. LAYOUT
============================================================ */

.ere-about-pro-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.07fr)
        minmax(0, .93fr);

    align-items: center;

    gap:
        clamp(
            65px,
            7vw,
            105px
        );

    padding-bottom: 105px;
}


/* ============================================================
   06. VISUAL
============================================================ */

.ere-about-pro-visual {

    position: relative;

    min-height: 660px;

    perspective: 1200px;
}


/* ============================================================
   07. MAIN IMAGE
============================================================ */

.ere-about-pro-image-main {

    position: absolute;

    top: 0;
    left: 0;

    width: 79%;
    height: 535px;

    overflow: hidden;

    background: #ddd9d0;

    box-shadow:
        0 30px 70px
        rgba(18,20,22,.14);
}


.ere-about-pro-image-main img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform:
        scale(1.04);

    transition:
        transform 1.5s
        cubic-bezier(.2,.7,.2,1);
}


.ere-about-pro-image-main:hover img {

    transform:
        scale(1.09);
}


/* IMAGE OVERLAY */

.ere-about-pro-image-overlay {

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(8,9,10,.14) 0%,
            transparent 50%,
            rgba(8,9,10,.42) 100%
        );
}


/* ============================================================
   08. SECONDARY IMAGE
============================================================ */

.ere-about-pro-image-secondary {

    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 4;

    width: 43%;
    height: 310px;

    padding: 8px;

    overflow: hidden;

    background: white;

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


.ere-about-pro-image-secondary img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s ease;
}


.ere-about-pro-image-secondary:hover img {

    transform:
        scale(1.06);
}


/* ============================================================
   09. PHOTO LABEL
============================================================ */

.ere-about-pro-photo-label {

    position: absolute;

    top: 18px;
    left: 18px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        10px 13px;

    background:
        rgba(13,15,16,.82);

    color: white;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.ere-about-pro-photo-label > span {

    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    background:
        var(--ere-ap-gold);

    color:
        var(--ere-ap-black);

    font-size: 11px;
}


.ere-about-pro-photo-label div {

    display: flex;
    flex-direction: column;
}


.ere-about-pro-photo-label small {

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

    font-size: 7px;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.ere-about-pro-photo-label strong {

    margin-top: 2px;

    font-size: 10px;
}


/* ============================================================
   10. SIGNATURE
============================================================ */

.ere-about-pro-signature {

    position: absolute;

    left: 19px;
    bottom: 18px;

    color: white;
}


.ere-about-pro-signature span {

    display: block;

    font-family:
        'Playfair Display',
        serif;

    font-size: 28px;

    font-style: italic;

    line-height: 1;
}


.ere-about-pro-signature small {

    display: block;

    margin-top: 5px;

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

    font-size: 6px;
    font-weight: 700;

    letter-spacing: .19em;
}


/* ============================================================
   11. FLOATING CARD
============================================================ */

.ere-about-pro-floating-card {

    position: absolute;

    z-index: 6;

    left: 4%;
    bottom: 38px;

    min-width: 290px;

    min-height: 82px;

    padding:
        14px 16px;

    display: grid;

    grid-template-columns:
        46px 1fr auto;

    align-items: center;

    gap: 12px;

    background:
        var(--ere-ap-black);

    color: white;

    box-shadow:
        0 22px 50px
        rgba(0,0,0,.20);

    animation:
        ereAboutFloat
        4.5s ease-in-out
        infinite;
}


@keyframes ereAboutFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


.ere-about-pro-floating-icon {

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            var(--ere-ap-gold-light),
            var(--ere-ap-gold)
        );

    color:
        var(--ere-ap-black);
}


.ere-about-pro-floating-card > div:nth-child(2) {

    display: flex;
    flex-direction: column;
}


.ere-about-pro-floating-card small {

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

    font-size: 7px;

    letter-spacing: .07em;

    text-transform: uppercase;
}


.ere-about-pro-floating-card strong {

    margin-top: 4px;

    color: white;

    font-size: 10px;
}


.ere-about-pro-floating-arrow {

    color:
        var(--ere-ap-gold);

    font-size: 8px;
}


/* ============================================================
   12. LICENSE
============================================================ */

.ere-about-pro-license {

    position: absolute;

    z-index: 7;

    top: 493px;
    right: 13%;

    padding:
        11px 14px;

    display: flex;
    align-items: center;

    gap: 9px;

    background: white;

    border:
        1px solid rgba(0,0,0,.07);

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


.ere-about-pro-license > i {

    color:
        var(--ere-ap-gold);

    font-size: 14px;
}


.ere-about-pro-license span {

    display: flex;
    flex-direction: column;
}


.ere-about-pro-license small {

    color: #999;

    font-size: 6px;

    text-transform: uppercase;
}


.ere-about-pro-license strong {

    margin-top: 2px;

    color:
        var(--ere-ap-black);

    font-size: 8px;
}


/* ============================================================
   13. CONTENT
============================================================ */

.ere-about-pro-content {

    min-width: 0;
}


/* SMALL TITLE */

.ere-about-pro-small-title {

    display: inline-block;

    margin-bottom: 15px;

    color:
        var(--ere-ap-gold);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;
}


/* H3 */

.ere-about-pro-copy h3 {

    max-width: 570px;

    margin: 0;

    color:
        var(--ere-ap-black);

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            31px,
            3vw,
            46px
        );

    font-weight: 500;

    line-height: 1.06;

    letter-spacing: -.03em;
}


.ere-about-pro-copy h3 em {

    display: block;

    margin-top: 4px;

    color:
        var(--ere-ap-gold);

    font-weight: 500;
}


/* TEXT */

.ere-about-pro-copy p {

    max-width: 590px;

    margin:
        16px 0 0;

    color: #777a7e;

    font-size: 13px;

    line-height: 1.8;
}


.ere-about-pro-copy
.ere-about-pro-lead {

    margin-top: 24px;

    color: #535659;

    font-size: 14px;
}


.ere-about-pro-lead strong {

    color:
        var(--ere-ap-black);
}


/* ============================================================
   14. FEATURES
============================================================ */

.ere-about-pro-features {

    margin-top: 37px;

    display: grid;

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

    gap:
        1px;

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


.ere-about-pro-feature {

    position: relative;

    min-height: 185px;

    padding:
        23px 20px;

    background:
        #f9f8f5;

    overflow: hidden;

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


.ere-about-pro-feature:hover {

    z-index: 2;

    background:
        white;

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.08);
}


/* NUMBER */

.ere-about-pro-feature-number {

    position: absolute;

    top: 13px;
    right: 14px;

    color:
        rgba(0,0,0,.11);

    font-family:
        'Playfair Display',
        serif;

    font-size: 24px;

    transition:
        color .3s ease;
}


.ere-about-pro-feature:hover
.ere-about-pro-feature-number {

    color:
        rgba(185,154,93,.25);
}


/* ICON */

.ere-about-pro-feature-icon {

    width: 40px;
    height: 40px;

    margin-bottom: 15px;

    display: grid;
    place-items: center;

    background:
        var(--ere-ap-black);

    color:
        var(--ere-ap-gold-light);

    font-size: 12px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.ere-about-pro-feature:hover
.ere-about-pro-feature-icon {

    background:
        var(--ere-ap-gold);

    color:
        var(--ere-ap-black);

    transform:
        rotate(-4deg);
}


.ere-about-pro-feature h4 {

    margin:
        0 0 7px;

    color:
        var(--ere-ap-black);

    font-size: 13px;
    font-weight: 800;
}


.ere-about-pro-feature p {

    margin: 0;

    color:
        #898b8e;

    font-size: 10px;

    line-height: 1.7;
}


/* ============================================================
   15. ACTIONS
============================================================ */

.ere-about-pro-actions {

    margin-top: 31px;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 23px;
}


/* PRIMARY */

.ere-about-pro-primary {

    min-height: 55px;

    padding:
        0 7px 0 20px;

    display: inline-flex;
    align-items: center;

    gap: 20px;

    background:
        var(--ere-ap-black);

    color: white;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

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


.ere-about-pro-primary-icon {

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    background:
        var(--ere-ap-gold);

    color:
        var(--ere-ap-black);

    transition:
        transform .3s ease;
}


.ere-about-pro-primary:hover {

    background: #202225;

    color: white;

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(0,0,0,.15);
}


.ere-about-pro-primary:hover
.ere-about-pro-primary-icon {

    transform:
        translateX(3px);
}


/* SECONDARY */

.ere-about-pro-secondary {

    display: inline-flex;
    align-items: center;

    gap: 11px;

    padding:
        10px 0;

    border-bottom:
        1px solid
        var(--ere-ap-gold);

    color:
        var(--ere-ap-black);

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}


.ere-about-pro-secondary i {

    color:
        var(--ere-ap-gold);

    font-size: 8px;

    transition:
        transform .3s ease;
}


.ere-about-pro-secondary:hover {

    color:
        var(--ere-ap-gold);
}


.ere-about-pro-secondary:hover i {

    transform:
        translateX(4px);
}


/* ============================================================
   16. BOTTOM DASHBOARD
============================================================ */

.ere-about-pro-bottom {

    position: relative;

    z-index: 3;

    background:
        var(--ere-ap-black);
}


.ere-about-pro-bottom-inner {

    width:
        min(
            calc(100% - 48px),
            1320px
        );

    min-height: 120px;

    margin-inline: auto;

    display: grid;

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


/* ITEM */

.ere-about-pro-bottom-item {

    position: relative;

    min-width: 0;

    padding:
        25px 24px;

    display: grid;

    grid-template-columns:
        42px 1fr auto;

    align-items: center;

    gap: 13px;

    border-right:
        1px solid
        rgba(255,255,255,.08);

    color: white;

    text-decoration: none;

    overflow: hidden;

    transition:
        background .35s ease;
}


.ere-about-pro-bottom-item:first-child {

    border-left:
        1px solid
        rgba(255,255,255,.08);
}


.ere-about-pro-bottom-item::before {

    content: '';

    position: absolute;

    inset: auto 0 0 0;

    height: 2px;

    background:
        var(--ere-ap-gold);

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform .35s ease;
}


.ere-about-pro-bottom-item:hover {

    background:
        #181a1d;

    color: white;
}


.ere-about-pro-bottom-item:hover::before {

    transform:
        scaleX(1);
}


/* INDEX */

.ere-about-pro-bottom-index {

    position: absolute;

    top: 10px;
    right: 12px;

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

    font-size: 7px;
}


/* ICON */

.ere-about-pro-bottom-icon {

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(216,188,125,.22);

    color:
        var(--ere-ap-gold);

    font-size: 11px;

    transition:
        background .3s ease,
        color .3s ease;
}


.ere-about-pro-bottom-item:hover
.ere-about-pro-bottom-icon {

    background:
        var(--ere-ap-gold);

    color:
        var(--ere-ap-black);
}


/* COPY */

.ere-about-pro-bottom-item div {

    display: flex;
    flex-direction: column;
}


.ere-about-pro-bottom-item small {

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

    font-size: 7px;
}


.ere-about-pro-bottom-item strong {

    margin-top: 3px;

    color: white;

    font-size: 12px;
}


.ere-about-pro-bottom-item >
i:last-child {

    color:
        rgba(216,188,125,.50);

    font-size: 8px;

    transition:
        transform .3s ease;
}


.ere-about-pro-bottom-item:hover >
i:last-child {

    transform:
        translateX(4px);
}


/* ============================================================
   17. REVEAL ANIMATION
============================================================ */

.ere-about-pro-reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .85s ease,
        transform .85s
        cubic-bezier(.2,.65,.2,1);
}


.ere-about-pro-reveal.ere-about-pro-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* STAGGER */

.ere-about-pro-feature:nth-child(2) {

    transition-delay:
        .08s;
}


.ere-about-pro-feature:nth-child(3) {

    transition-delay:
        .16s;
}


.ere-about-pro-feature:nth-child(4) {

    transition-delay:
        .24s;
}


/* ============================================================
   18. TABLET
============================================================ */

@media (max-width: 1050px) {

    .ere-about-pro-header {

        gap: 40px;
    }


    .ere-about-pro-layout {

        gap: 45px;
    }


    .ere-about-pro-visual {

        min-height: 610px;
    }


    .ere-about-pro-image-main {

        width: 82%;
        height: 490px;
    }


    .ere-about-pro-image-secondary {

        height: 280px;
    }


    .ere-about-pro-license {

        top: 448px;
    }

}


/* ============================================================
   19. TABLET PORTRAIT
============================================================ */

@media (max-width: 900px) {

    .ere-about-pro-header {

        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .ere-about-pro-header-right {

        max-width: 600px;
    }


    .ere-about-pro-layout {

        grid-template-columns:
            1fr;

        gap: 60px;
    }


    .ere-about-pro-visual {

        max-width: 720px;

        width: 100%;

        margin-inline: auto;
    }


    .ere-about-pro-content {

        max-width: 720px;

        width: 100%;

        margin-inline: auto;
    }


    .ere-about-pro-bottom-inner {

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


    .ere-about-pro-bottom-item {

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }

}


/* ============================================================
   20. MOBILE
============================================================ */

@media (max-width: 650px) {

    .ere-about-pro {

        padding-top: 75px;
    }


    .ere-about-pro-container {

        width:
            calc(100% - 28px);
    }


    /* HEADER */

    .ere-about-pro-header {

        margin-bottom: 37px;
    }


    .ere-about-pro-header h2 {

        font-size:
            clamp(
                39px,
                11vw,
                53px
            );
    }


    .ere-about-pro-header-right {

        padding-left: 23px;
    }


    /* VISUAL */

    .ere-about-pro-layout {

        padding-bottom: 75px;
    }


    .ere-about-pro-visual {

        min-height: 520px;
    }


    .ere-about-pro-image-main {

        width: 88%;
        height: 410px;
    }


    .ere-about-pro-image-secondary {

        width: 45%;
        height: 225px;

        padding: 5px;
    }


    .ere-about-pro-floating-card {

        left: 0;
        bottom: 20px;

        min-width: 250px;
    }


    .ere-about-pro-license {

        top: 375px;
        right: 7%;
    }


    /* CONTENT */

    .ere-about-pro-copy h3 {

        font-size:
            clamp(
                31px,
                8vw,
                41px
            );
    }


    .ere-about-pro-copy p {

        font-size: 13px;
    }


    /* FEATURES */

    .ere-about-pro-features {

        grid-template-columns:
            1fr;
    }


    .ere-about-pro-feature {

        min-height: auto;
    }


    /* BOTTOM */

    .ere-about-pro-bottom-inner {

        width:
            calc(100% - 22px);

        grid-template-columns:
            1fr;
    }


    .ere-about-pro-bottom-item {

        min-height: 92px;

        border-left:
            1px solid
            rgba(255,255,255,.08);
    }

}


/* ============================================================
   21. SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

    .ere-about-pro-container {

        width:
            calc(100% - 22px);
    }


    .ere-about-pro-visual {

        min-height: 480px;
    }


    .ere-about-pro-image-main {

        width: 92%;
        height: 370px;
    }


    .ere-about-pro-image-secondary {

        width: 47%;
        height: 200px;
    }


    .ere-about-pro-license {

        top: 338px;
    }


    .ere-about-pro-floating-card {

        width: 245px;

        min-width: 0;

        grid-template-columns:
            40px 1fr;

        padding: 11px;
    }


    .ere-about-pro-floating-arrow {

        display: none;
    }


    .ere-about-pro-floating-icon {

        width: 40px;
        height: 40px;
    }


    .ere-about-pro-actions {

        display: grid;

        gap: 15px;
    }


    .ere-about-pro-primary {

        justify-content:
            space-between;
    }

}


/* ============================================================
   22. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ere-about-pro-reveal {

        opacity: 1;

        transform: none;

        transition: none;
    }


    .ere-about-pro-floating-card {

        animation: none;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   ABOUT PREMIUM
   CSS END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   PROPERTIES APP
   CSS START
============================================================ */


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

.ere-pa-page {

    --pa-black: #101214;
    --pa-dark: #17191c;

    --pa-gold: #b99a5d;
    --pa-gold-light: #d8bc7d;

    --pa-cream: #f6f4ef;
    --pa-white: #ffffff;

    --pa-gray: #777b80;

    width: 100%;

    overflow: hidden;

    font-family:
        'Manrope',
        sans-serif;

    background:
        #f7f6f3;
}


.ere-pa-container {

    width:
        min(
            calc(100% - 48px),
            1380px
        );

    margin-inline: auto;
}


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

.ere-pa-hero {

    position: relative;

    min-height: 445px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background:
        var(--pa-black);

    color: white;
}


.ere-pa-hero-bg {

    position: absolute;
    inset: 0;
}


.ere-pa-hero-bg img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.03);

    animation:
        erePaHeroZoom
        16s ease-in-out
        infinite alternate;
}


@keyframes erePaHeroZoom {

    to {
        transform:
            scale(1.09);
    }

}


.ere-pa-hero-overlay {

    position: absolute;
    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,8,9,.96) 0%,
            rgba(8,9,10,.85) 45%,
            rgba(8,9,10,.52) 100%
        ),

        linear-gradient(
            180deg,
            rgba(7,8,9,.12) 0%,
            rgba(7,8,9,.60) 100%
        );
}


.ere-pa-hero-inner {

    position: relative;

    z-index: 3;

    padding:
        70px 0 90px;
}


/* ============================================================
   BREADCRUMB
============================================================ */

.ere-pa-breadcrumb {

    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 43px;

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

    font-size: 13px;
}


.ere-pa-breadcrumb a {

    display: inline-flex;
    align-items: center;

    gap: 7px;

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

    text-decoration: none;
}


.ere-pa-breadcrumb a:hover {

    color:
        var(--pa-gold-light);
}


.ere-pa-breadcrumb > i {

    color:
        var(--pa-gold);

    font-size: 7px;
}


.ere-pa-breadcrumb span {

    color:
        var(--pa-gold-light);
}


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

.ere-pa-hero-grid {

    display: grid;

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

    align-items: end;

    gap: 50px;
}


.ere-pa-eyebrow {

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 17px;

    color:
        var(--pa-gold-light);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.ere-pa-eyebrow > span {

    width: 42px;
    height: 1px;

    background:
        var(--pa-gold);
}


.ere-pa-hero h1 {

    max-width: 790px;

    margin: 0;

    color: white;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            48px,
            6vw,
            80px
        );

    font-weight: 500;

    line-height: .98;

    letter-spacing:
        -.045em;
}


.ere-pa-hero h1 em {

    display: block;

    color:
        var(--pa-gold-light);

    font-weight: 500;
}


.ere-pa-hero-grid p {

    max-width: 650px;

    margin:
        22px 0 0;

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

    font-size: 15px;

    line-height: 1.8;
}


/* STATUS */

.ere-pa-hero-status {

    min-width: 260px;

    padding:
        16px 18px;

    display: flex;
    align-items: center;

    gap: 12px;

    border:
        1px solid rgba(255,255,255,.13);

    background:
        rgba(255,255,255,.06);

    backdrop-filter:
        blur(12px);
}


.ere-pa-live-dot {

    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #65d382;

    box-shadow:
        0 0 0 5px
        rgba(101,211,130,.11);
}


.ere-pa-hero-status div {

    display: flex;
    flex-direction: column;
}


.ere-pa-hero-status small {

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

    font-size: 10px;
}


.ere-pa-hero-status strong {

    margin-top: 3px;

    color: white;

    font-size: 13px;
}


/* ============================================================
   SEARCH SHELL
============================================================ */

.ere-pa-search-shell {

    position: relative;

    z-index: 10;

    height: 0;
}


.ere-pa-search-bar {

    min-height: 94px;

    transform:
        translateY(-47px);

    display: grid;

    grid-template-columns:
        minmax(260px,1.4fr)
        .65fr
        .75fr
        auto;

    align-items: stretch;

    background: white;

    border:
        1px solid rgba(0,0,0,.07);

    box-shadow:
        0 22px 60px
        rgba(0,0,0,.12);
}


/* ============================================================
   SEARCH FIELDS
============================================================ */

.ere-pa-search-main,
.ere-pa-search-select {

    min-width: 0;

    padding:
        17px 22px;

    display: flex;
    align-items: center;

    gap: 13px;

    border-right:
        1px solid rgba(0,0,0,.07);
}


.ere-pa-search-main > i,
.ere-pa-search-select > i {

    color:
        var(--pa-gold);

    font-size: 16px;
}


.ere-pa-search-main div,
.ere-pa-search-select div {

    min-width: 0;

    width: 100%;

    display: flex;
    flex-direction: column;
}


.ere-pa-search-main small,
.ere-pa-search-select small {

    margin-bottom: 4px;

    color: #999c9f;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .06em;
}


.ere-pa-search-main input,
.ere-pa-search-select select {

    width: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color:
        var(--pa-black);

    font-family: inherit;

    font-size: 14px;
    font-weight: 700;
}


.ere-pa-search-select select {

    cursor: pointer;
}


/* SEARCH BUTTON */

.ere-pa-search-button {

    min-width: 145px;

    padding:
        0 22px;

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

    gap: 15px;

    border: 0;

    background:

        linear-gradient(
            135deg,
            var(--pa-gold-light),
            var(--pa-gold)
        );

    color:
        var(--pa-black);

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;
    font-weight: 800;

    transition:
        background .3s ease,
        gap .3s ease;
}


.ere-pa-search-button:hover {

    gap: 22px;

    background:
        var(--pa-gold-light);
}


/* ============================================================
   APP AREA
============================================================ */

.ere-pa-app {

    padding:
        100px 0 110px;
}


/* ============================================================
   QUICK NAV
============================================================ */

.ere-pa-quick-nav {

    display: grid;

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

    margin-bottom: 27px;

    overflow: hidden;

    background: white;

    border:
        1px solid rgba(0,0,0,.07);
}


.ere-pa-quick {

    min-height: 82px;

    padding:
        10px 14px;

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

    gap: 9px;

    border: 0;

    border-right:
        1px solid rgba(0,0,0,.07);

    background: white;

    color: #707377;

    cursor: pointer;

    font-family: inherit;

    font-size: 12px;

    transition:
        background .3s ease,
        color .3s ease;
}


.ere-pa-quick:last-child {

    border-right: 0;
}


.ere-pa-quick i {

    color:
        var(--pa-gold);

    font-size: 15px;
}


.ere-pa-quick strong {

    min-width: 23px;
    height: 23px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        #f0eee9;

    color:
        var(--pa-black);

    font-size: 9px;
}


.ere-pa-quick:hover {

    background:
        #faf9f6;
}


.ere-pa-quick.active {

    background:
        var(--pa-black);

    color: white;
}


.ere-pa-quick.active i {

    color:
        var(--pa-gold-light);
}


/* ============================================================
   LAYOUT
============================================================ */

.ere-pa-layout {

    display: grid;

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

    align-items: start;

    gap: 30px;
}


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

.ere-pa-filters {

    position: sticky;

    top: 115px;

    padding:
        25px;

    background: white;

    border:
        1px solid rgba(0,0,0,.07);

    box-shadow:
        0 16px 40px
        rgba(0,0,0,.04);
}


.ere-pa-filter-mobile-head {

    display: none;
}


.ere-pa-filter-heading {

    display: flex;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 18px;

    margin-bottom: 21px;

    border-bottom:
        1px solid rgba(0,0,0,.07);
}


.ere-pa-filter-heading div {

    display: flex;
    flex-direction: column;
}


.ere-pa-filter-heading span {

    color:
        var(--pa-black);

    font-size: 16px;
    font-weight: 800;
}


.ere-pa-filter-heading small {

    margin-top: 3px;

    color: #989a9d;

    font-size: 11px;
}


.ere-pa-filter-heading button {

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--pa-gold);

    cursor: pointer;

    font-size: 11px;
    font-weight: 800;
}


/* FILTER GROUP */

.ere-pa-filter-group {

    padding:
        17px 0;

    border-bottom:
        1px solid rgba(0,0,0,.065);
}


.ere-pa-filter-label {

    display: block;

    margin-bottom: 11px;

    color:
        #44474a;

    font-size: 12px;
    font-weight: 800;
}


/* SEGMENTED */

.ere-pa-segmented {

    display: grid;

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

    padding: 3px;

    background:
        #f0eee9;
}


.ere-pa-segmented button {

    min-height: 38px;

    padding:
        0 7px;

    border: 0;

    background: transparent;

    color: #7d7f82;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;
    font-weight: 700;
}


.ere-pa-segmented button.active {

    background: white;

    color:
        var(--pa-black);

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


/* SELECT */

.ere-pa-select {

    position: relative;
}


.ere-pa-select select {

    width: 100%;
    height: 45px;

    padding:
        0 38px 0 13px;

    appearance: none;

    border:
        1px solid rgba(0,0,0,.09);

    outline: 0;

    background: white;

    color:
        #55585b;

    font-family: inherit;

    font-size: 12px;
}


.ere-pa-select > i {

    position: absolute;

    top: 50%;
    right: 13px;

    transform:
        translateY(-50%);

    pointer-events: none;

    color:
        var(--pa-gold);

    font-size: 8px;
}


/* FEATURE CHIPS */

.ere-pa-feature-chips {

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.ere-pa-feature-chips button {

    min-height: 36px;

    padding:
        0 10px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    border:
        1px solid rgba(0,0,0,.09);

    background: white;

    color: #737679;

    cursor: pointer;

    font-family: inherit;

    font-size: 10px;
}


.ere-pa-feature-chips button i {

    color:
        var(--pa-gold);
}


.ere-pa-feature-chips button.active {

    border-color:
        var(--pa-gold);

    background:
        rgba(185,154,93,.08);

    color:
        var(--pa-black);
}


/* AVAILABILITY */

.ere-pa-availability {

    margin-top: 22px;

    padding:
        14px;

    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 11px;

    align-items: center;

    background:
        #f7f6f2;
}


.ere-pa-availability > span {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #63d183;

    box-shadow:
        0 0 0 4px
        rgba(99,209,131,.12);
}


.ere-pa-availability div {

    display: flex;
    flex-direction: column;
}


.ere-pa-availability small {

    color: #96999c;

    font-size: 9px;
}


.ere-pa-availability strong {

    margin-top: 2px;

    color: #55585b;

    font-size: 10px;

    line-height: 1.4;
}


.ere-pa-mobile-apply {

    display: none;
}


/* ============================================================
   TOOLBAR
============================================================ */

.ere-pa-toolbar {

    min-height: 68px;

    margin-bottom: 17px;

    padding:
        0 4px;

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

    gap: 20px;
}


.ere-pa-results-info {

    display: flex;
    flex-direction: column;
}


.ere-pa-results-info > span {

    color:
        var(--pa-gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.ere-pa-results-info strong {

    margin-top: 4px;

    color:
        var(--pa-black);

    font-size: 17px;
}


.ere-pa-toolbar-actions {

    display: flex;
    align-items: center;

    gap: 8px;
}


/* SORT */

.ere-pa-sort {

    min-height: 43px;

    padding:
        0 11px;

    display: flex;
    align-items: center;

    gap: 8px;

    border:
        1px solid rgba(0,0,0,.08);

    background: white;
}


.ere-pa-sort i {

    color:
        var(--pa-gold);

    font-size: 10px;
}


.ere-pa-sort select {

    border: 0;
    outline: 0;

    background: transparent;

    color: #66696c;

    font-family: inherit;

    font-size: 11px;
}


/* VIEW */

.ere-pa-view-switch {

    display: flex;
}


.ere-pa-view-switch button {

    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(0,0,0,.08);

    background: white;

    color: #999b9e;

    cursor: pointer;
}


.ere-pa-view-switch button.active {

    background:
        var(--pa-black);

    color:
        var(--pa-gold-light);
}


.ere-pa-mobile-filter {

    display: none;
}


/* ============================================================
   ACTIVE FILTERS
============================================================ */

.ere-pa-active-filters {

    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 15px;
}


.ere-pa-active-filters:empty {

    display: none;
}


.ere-pa-active-filters button {

    min-height: 32px;

    padding:
        0 10px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border:
        1px solid rgba(185,154,93,.22);

    background:
        rgba(185,154,93,.07);

    color: #746039;

    cursor: pointer;

    font-size: 10px;
}


.ere-pa-active-filters button i {

    font-size: 7px;
}


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

.ere-pa-property-grid {

    display: grid;

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

    gap: 21px;
}


/* OCCUPIED IS NEVER SHOWN */

.ere-pa-card[data-status="ocupado"] {

    display: none !important;
}


.ere-pa-card[hidden] {

    display: none !important;
}


/* ============================================================
   CARD
============================================================ */

.ere-pa-card {

    min-width: 0;

    overflow: hidden;

    background: white;

    border:
        1px solid rgba(0,0,0,.07);

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

    animation:
        erePaCardIn
        .55s ease both;
}


@keyframes erePaCardIn {

    from {

        opacity: 0;

        transform:
            translateY(15px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.ere-pa-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(185,154,93,.30);

    box-shadow:
        0 22px 50px
        rgba(0,0,0,.09);
}


/* ============================================================
   CARD MEDIA
============================================================ */

.ere-pa-card-media {

    position: relative;

    height: 295px;

    overflow: hidden;

    background:
        #dedbd4;
}


.ere-pa-card-media img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        opacity .2s ease,
        transform .7s ease;
}


.ere-pa-card:hover
.ere-pa-card-media img {

    transform:
        scale(1.035);
}


.ere-pa-card-gradient {

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(7,8,9,.30),
            transparent 40%,
            rgba(7,8,9,.45)
        );
}


/* STATUS */

.ere-pa-card-status {

    position: absolute;

    top: 15px;
    left: 15px;

    min-height: 30px;

    padding:
        0 11px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border-radius: 30px;

    background:
        rgba(13,15,16,.84);

    color: white;

    backdrop-filter:
        blur(8px);

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}


.ere-pa-card-status i {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #63d183;
}


/* OPERATION */

.ere-pa-card-operation {

    position: absolute;

    left: 15px;
    bottom: 15px;

    padding:
        8px 11px;

    background:
        var(--pa-gold);

    color:
        var(--pa-black);

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}


/* FAVORITE */

.ere-pa-card-favorite {

    position: absolute;

    top: 15px;
    right: 15px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 50%;

    background:
        rgba(13,15,16,.78);

    color: white;

    cursor: pointer;

    backdrop-filter:
        blur(7px);
}


.ere-pa-card-favorite.active {

    background:
        var(--pa-gold);

    color:
        var(--pa-black);
}


/* GALLERY */

.ere-pa-gallery-controls {

    position: absolute;

    right: 15px;
    bottom: 15px;

    display: flex;
    align-items: center;

    gap: 7px;
}


.ere-pa-gallery-controls button {

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255,255,255,.20);

    border-radius: 50%;

    background:
        rgba(13,15,16,.70);

    color: white;

    cursor: pointer;

    font-size: 7px;

    backdrop-filter:
        blur(6px);
}


.ere-pa-gallery-controls span {

    min-width: 42px;

    text-align: center;

    color: white;

    font-size: 9px;

    text-shadow:
        0 2px 5px rgba(0,0,0,.4);
}


/* ============================================================
   CARD CONTENT
============================================================ */

.ere-pa-card-content {

    padding:
        21px;
}


.ere-pa-card-topline {

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

    gap: 13px;
}


.ere-pa-card-topline > span {

    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #878a8d;

    font-size: 10px;
}


.ere-pa-card-topline > span i {

    color:
        var(--pa-gold);
}


.ere-pa-card-topline small {

    flex-shrink: 0;

    color:
        #a0a2a4;

    font-size: 8px;

    letter-spacing: .05em;
}


/* TITLE */

.ere-pa-card h2 {

    margin:
        10px 0 8px;

    color:
        var(--pa-black);

    font-family:
        'Playfair Display',
        serif;

    font-size: 27px;
    font-weight: 600;

    line-height: 1.06;
}


.ere-pa-card h2 span {

    display: block;

    margin-top: 4px;

    color:
        var(--pa-gold);

    font-family:
        'Manrope',
        sans-serif;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .06em;

    text-transform: uppercase;
}


/* DESCRIPTION */

.ere-pa-card-description {

    min-height: 64px;

    margin:
        0 0 16px;

    color: #777a7e;

    font-size: 12px;

    line-height: 1.7;
}


/* META */

.ere-pa-card-meta {

    min-height: 52px;

    padding:
        13px 0;

    display: flex;
    flex-wrap: wrap;

    gap:
        9px 15px;

    border-top:
        1px solid rgba(0,0,0,.065);

    border-bottom:
        1px solid rgba(0,0,0,.065);
}


.ere-pa-card-meta span {

    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #777a7e;

    font-size: 10px;
}


.ere-pa-card-meta i {

    color:
        var(--pa-gold);
}


/* PRICE */

.ere-pa-card-price-row {

    margin-top: 17px;

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

    gap: 15px;
}


.ere-pa-card-price-row > div {

    display: flex;
    flex-direction: column;
}


.ere-pa-card-price-row small {

    color: #9a9c9f;

    font-size: 9px;
}


.ere-pa-card-price-row strong {

    margin-top: 2px;

    color:
        var(--pa-gold);

    font-size: 20px;
    font-weight: 800;
}


.ere-pa-card-price-row > div > span {

    margin-top: 2px;

    color: #999c9f;

    font-size: 9px;
}


.ere-pa-card-type {

    padding:
        7px 9px;

    background:
        #f2f0eb;

    color: #707377;

    font-size: 9px;
    font-weight: 700;
}


/* ============================================================
   ACTIONS
============================================================ */

.ere-pa-card-actions {

    margin-top: 18px;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 7px;
}


.ere-pa-card-actions button,
.ere-pa-card-actions a {

    min-height: 46px;

    padding:
        0 13px;

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

    gap: 8px;

    font-family: inherit;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


.ere-pa-quick-view {

    border:
        1px solid rgba(0,0,0,.09);

    background: white;

    color:
        var(--pa-black);

    cursor: pointer;
}


.ere-pa-details {

    justify-content:
        space-between !important;

    background:
        var(--pa-black);

    color: white;
}


.ere-pa-details:hover {

    color: white;
}


.ere-pa-details span {

    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        var(--pa-gold);

    color:
        var(--pa-black);

    font-size: 7px;
}


/* ============================================================
   LIST VIEW
============================================================ */

.ere-pa-property-grid.ere-list-view {

    grid-template-columns: 1fr;
}


.ere-pa-property-grid.ere-list-view
.ere-pa-card {

    display: grid;

    grid-template-columns:
        43% 57%;
}


.ere-pa-property-grid.ere-list-view
.ere-pa-card-media {

    height: 100%;

    min-height: 330px;
}


/* ============================================================
   EMPTY
============================================================ */

.ere-pa-empty {

    padding:
        80px 25px;

    text-align: center;

    background: white;

    border:
        1px solid rgba(0,0,0,.07);
}


.ere-pa-empty > div {

    width: 72px;
    height: 72px;

    margin:
        0 auto 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        #f5f3ee;

    color:
        var(--pa-gold);

    font-size: 22px;
}


.ere-pa-empty > span {

    color:
        var(--pa-gold);

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .12em;
}


.ere-pa-empty h3 {

    max-width: 530px;

    margin:
        9px auto 0;

    color:
        var(--pa-black);

    font-family:
        'Playfair Display',
        serif;

    font-size: 31px;
    font-weight: 500;
}


.ere-pa-empty p {

    max-width: 480px;

    margin:
        10px auto 0;

    color: #777a7e;

    font-size: 13px;

    line-height: 1.7;
}


.ere-pa-empty button {

    min-height: 45px;

    margin-top: 20px;

    padding:
        0 17px;

    border: 0;

    background:
        var(--pa-black);

    color: white;

    cursor: pointer;
}


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

.ere-pa-result-footer {

    margin-top: 24px;

    padding:
        17px;

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

    gap: 20px;

    border-top:
        1px solid rgba(0,0,0,.07);

    color: #888b8e;

    font-size: 10px;
}


.ere-pa-result-footer span,
.ere-pa-result-footer a {

    display: flex;
    align-items: center;

    gap: 8px;
}


.ere-pa-result-footer i {

    color:
        var(--pa-gold);
}


.ere-pa-result-footer a {

    color:
        var(--pa-black);

    font-weight: 800;

    text-decoration: none;
}


/* ============================================================
   QUICK VIEW MODAL
============================================================ */

.ere-pa-modal {

    position: fixed;
    inset: 0;

    z-index: 99999;

    display: none;

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

    padding: 25px;
}


.ere-pa-modal.active {

    display: flex;
}


.ere-pa-modal-overlay {

    position: absolute;
    inset: 0;

    background:
        rgba(5,6,7,.82);

    backdrop-filter:
        blur(7px);
}


.ere-pa-modal-dialog {

    position: relative;

    z-index: 2;

    width:
        min(
            1120px,
            100%
        );

    max-height:
        calc(100vh - 50px);

    overflow: auto;

    background: white;

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

    animation:
        erePaModalIn
        .35s ease;
}


@keyframes erePaModalIn {

    from {

        opacity: 0;

        transform:
            translateY(18px)
            scale(.985);

    }

}


.ere-pa-modal-close {

    position: absolute;

    z-index: 10;

    top: 15px;
    right: 15px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 50%;

    background:
        rgba(12,14,15,.88);

    color: white;

    cursor: pointer;
}


.ere-pa-modal-layout {

    display: grid;

    grid-template-columns:
        1.1fr .9fr;
}


/* GALLERY */

.ere-pa-modal-gallery {

    padding:
        20px;

    background:
        #eeeae3;
}


.ere-pa-modal-main-image {

    position: relative;

    height: 510px;

    overflow: hidden;

    background: #ddd;
}


.ere-pa-modal-main-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.ere-pa-modal-main-image button {

    position: absolute;

    top: 50%;

    width: 42px;
    height: 42px;

    transform:
        translateY(-50%);

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 50%;

    background:
        rgba(12,14,15,.75);

    color: white;

    cursor: pointer;
}


#ereModalPrev {

    left: 15px;
}


#ereModalNext {

    right: 15px;
}


.ere-pa-modal-main-image > span {

    position: absolute;

    left: 15px;
    bottom: 15px;

    padding:
        7px 10px;

    background:
        rgba(12,14,15,.75);

    color: white;

    font-size: 9px;
}


.ere-pa-modal-thumbs {

    margin-top: 8px;

    display: grid;

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

    gap: 6px;
}


.ere-pa-modal-thumbs button {

    height: 70px;

    padding: 0;

    overflow: hidden;

    border:
        2px solid transparent;

    background: #ddd;

    cursor: pointer;
}


.ere-pa-modal-thumbs button.active {

    border-color:
        var(--pa-gold);
}


.ere-pa-modal-thumbs img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* MODAL CONTENT */

.ere-pa-modal-content {

    padding:
        52px 37px 38px;
}


.ere-pa-modal-label {

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

    gap: 10px;
}


.ere-pa-modal-label span {

    padding:
        7px 10px;

    background:
        var(--pa-gold);

    color:
        var(--pa-black);

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}


.ere-pa-modal-label small {

    color: #999c9f;

    font-size: 9px;
}


.ere-pa-modal-location {

    margin-top: 22px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: #888b8e;

    font-size: 11px;
}


.ere-pa-modal-location i {

    color:
        var(--pa-gold);
}


.ere-pa-modal-content h2 {

    margin:
        10px 0 0;

    color:
        var(--pa-black);

    font-family:
        'Playfair Display',
        serif;

    font-size: 39px;
    font-weight: 500;

    line-height: 1.05;
}


.ere-pa-modal-price {

    margin-top: 22px;

    padding:
        17px 0;

    display: flex;
    flex-direction: column;

    border-top:
        1px solid rgba(0,0,0,.07);

    border-bottom:
        1px solid rgba(0,0,0,.07);
}


.ere-pa-modal-price small {

    color: #999c9f;

    font-size: 9px;
}


.ere-pa-modal-price strong {

    margin-top: 2px;

    color:
        var(--pa-gold);

    font-size: 25px;
}


.ere-pa-modal-price span {

    margin-top: 2px;

    color: #898c8f;

    font-size: 10px;
}


.ere-pa-modal-content > p {

    margin:
        20px 0 0;

    color: #717478;

    font-size: 12px;

    line-height: 1.8;
}


.ere-pa-modal-features {

    margin-top: 23px;
}


.ere-pa-modal-features > span {

    color:
        var(--pa-black);

    font-size: 12px;
    font-weight: 800;
}


.ere-pa-modal-features ul {

    margin:
        13px 0 0;

    padding: 0;

    display: grid;

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

    gap:
        9px 17px;

    list-style: none;
}


.ere-pa-modal-features li {

    position: relative;

    padding-left: 17px;

    color: #777a7e;

    font-size: 10px;

    line-height: 1.5;
}


.ere-pa-modal-features li::before {

    content: '';

    position: absolute;

    top: 6px;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--pa-gold);
}


/* MODAL ACTIONS */

.ere-pa-modal-actions {

    margin-top: 26px;

    display: grid;

    gap: 7px;
}


.ere-pa-modal-actions a {

    min-height: 47px;

    padding:
        0 15px;

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

    gap: 9px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}


.ere-pa-modal-primary {

    background:
        var(--pa-black);

    color: white;
}


.ere-pa-modal-primary:hover {

    color: white;
}


.ere-pa-modal-secondary {

    border:
        1px solid rgba(0,0,0,.09);

    color:
        var(--pa-black);
}


.ere-pa-modal-contact {

    background:
        rgba(185,154,93,.12);

    color:
        #806837;
}


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

@media (max-width: 1100px) {

    .ere-pa-layout {

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


    .ere-pa-property-grid {

        grid-template-columns: 1fr;
    }


    .ere-pa-quick-nav {

        overflow-x: auto;

        grid-template-columns:
            repeat(6,170px);
    }

}


/* ============================================================
   MOBILE FILTER APP
============================================================ */

@media (max-width: 900px) {

    .ere-pa-container {

        width:
            calc(100% - 30px);
    }


    .ere-pa-hero {

        min-height: 430px;
    }


    .ere-pa-hero-grid {

        grid-template-columns: 1fr;
    }


    .ere-pa-hero-status {

        display: none;
    }


    /* SEARCH */

    .ere-pa-search-shell {

        height: auto;

        margin-top: -42px;
    }


    .ere-pa-search-bar {

        transform: none;

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


    .ere-pa-search-main {

        grid-column:
            1 / -1;
    }


    .ere-pa-search-button {

        min-height: 65px;
    }


    /* APP */

    .ere-pa-app {

        padding-top: 35px;
    }


    .ere-pa-layout {

        grid-template-columns: 1fr;
    }


    /* SIDEBAR -> DRAWER */

    .ere-pa-filters {

        position: fixed;

        z-index: 100002;

        top: 0;
        left: 0;

        width:
            min(
                390px,
                90vw
            );

        height: 100dvh;

        padding: 0 23px 30px;

        overflow-y: auto;

        transform:
            translateX(-105%);

        transition:
            transform .38s
            cubic-bezier(.2,.65,.2,1);

        box-shadow:
            25px 0 70px
            rgba(0,0,0,.25);
    }


    .ere-pa-filters.active {

        transform:
            translateX(0);
    }


    .ere-pa-filter-mobile-head {

        min-height: 78px;

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

        border-bottom:
            1px solid rgba(0,0,0,.08);
    }


    .ere-pa-filter-mobile-head div {

        display: flex;
        flex-direction: column;
    }


    .ere-pa-filter-mobile-head small {

        color:
            var(--pa-gold);

        font-size: 8px;
    }


    .ere-pa-filter-mobile-head strong {

        margin-top: 2px;

        color:
            var(--pa-black);

        font-size: 18px;
    }


    .ere-pa-filter-mobile-head button {

        width: 40px;
        height: 40px;

        border: 0;

        background:
            var(--pa-black);

        color: white;
    }


    .ere-pa-filter-heading {

        padding-top: 20px;
    }


    .ere-pa-mobile-apply {

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

        margin-top: 22px;

        padding:
            0 16px;

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

        border: 0;

        background:
            var(--pa-black);

        color: white;

        font-family: inherit;

        font-weight: 800;
    }


    .ere-pa-filter-overlay {

        position: fixed;
        inset: 0;

        z-index: 100001;

        visibility: hidden;

        opacity: 0;

        background:
            rgba(5,6,7,.62);

        backdrop-filter:
            blur(4px);

        transition:
            opacity .3s ease,
            visibility .3s ease;
    }


    .ere-pa-filter-overlay.active {

        visibility: visible;

        opacity: 1;
    }


    .ere-pa-mobile-filter {

        min-height: 43px;

        padding:
            0 11px;

        display: flex;
        align-items: center;

        gap: 7px;

        border:
            1px solid rgba(0,0,0,.08);

        background: white;

        color:
            var(--pa-black);
    }


    .ere-pa-mobile-filter > span {

        min-width: 19px;
        height: 19px;

        display: grid;
        place-items: center;

        border-radius: 50%;

        background:
            var(--pa-gold);

        font-size: 7px;
    }

}


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

@media (max-width: 650px) {

    .ere-pa-container {

        width:
            calc(100% - 22px);
    }


    .ere-pa-hero-inner {

        padding:
            60px 0 75px;
    }


    .ere-pa-breadcrumb {

        margin-bottom: 28px;
    }


    .ere-pa-hero h1 {

        font-size:
            clamp(
                44px,
                13vw,
                61px
            );
    }


    .ere-pa-hero-grid p {

        font-size: 14px;
    }


    /* SEARCH */

    .ere-pa-search-bar {

        grid-template-columns: 1fr;
    }


    .ere-pa-search-main {

        grid-column: auto;
    }


    .ere-pa-search-main,
    .ere-pa-search-select {

        min-height: 70px;

        border-right: 0;

        border-bottom:
            1px solid rgba(0,0,0,.07);
    }


    /* QUICK NAV */

    .ere-pa-quick-nav {

        margin-inline:
            -11px;

        padding-inline:
            11px;

        border-left: 0;
        border-right: 0;

        grid-template-columns:
            repeat(6,145px);

        scrollbar-width: none;
    }


    .ere-pa-quick-nav::-webkit-scrollbar {

        display: none;
    }


    .ere-pa-quick {

        min-height: 70px;
    }


    /* TOOLBAR */

    .ere-pa-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .ere-pa-toolbar-actions {

        width: 100%;
    }


    .ere-pa-mobile-filter {

        flex: 1;

        justify-content: center;
    }


    .ere-pa-sort {

        flex: 1;

        justify-content: center;
    }


    .ere-pa-view-switch {

        display: none;
    }


    /* CARDS */

    .ere-pa-card-media {

        height: 285px;
    }


    .ere-pa-card-content {

        padding:
            18px 16px;
    }


    .ere-pa-card h2 {

        font-size: 24px;
    }


    .ere-pa-card-description {

        min-height: auto;
    }


    .ere-pa-card-price-row strong {

        font-size: 18px;
    }


    /* RESULT FOOTER */

    .ere-pa-result-footer {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    /* MODAL */

    .ere-pa-modal {

        padding: 0;

        align-items:
            flex-end;
    }


    .ere-pa-modal-dialog {

        width: 100%;

        max-height: 94dvh;

        border-radius:
            20px 20px 0 0;
    }


    .ere-pa-modal-layout {

        grid-template-columns: 1fr;
    }


    .ere-pa-modal-gallery {

        padding: 0;
    }


    .ere-pa-modal-main-image {

        height: 310px;
    }


    .ere-pa-modal-thumbs {

        padding:
            0 9px 9px;
    }


    .ere-pa-modal-thumbs button {

        height: 52px;
    }


    .ere-pa-modal-content {

        padding:
            28px 20px 35px;
    }


    .ere-pa-modal-content h2 {

        font-size: 31px;
    }


    .ere-pa-modal-features ul {

        grid-template-columns: 1fr;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ere-pa-hero-bg img {

        animation: none;
    }


    .ere-pa-card {

        animation: none;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   PROPERTIES APP
   CSS END
============================================================ */

/* ============================================================
   EMPIRE REAL ESTATE NI
   PROPERTIES PAGE
   DEFINITIVE GRID FIX
   PEGAR AL FINAL DE STYLE.CSS
============================================================ */


/* ============================================================
   01. IMPORTANTE
   EL OVERLAY NO PUEDE OCUPAR UNA COLUMNA EN DESKTOP
============================================================ */

.ere-pa-filter-overlay {
    display: none !important;
}


/* ============================================================
   02. LAYOUT PRINCIPAL DESKTOP
============================================================ */

.ere-pa-layout {
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;

    grid-template-columns:
        300px
        minmax(0, 1fr) !important;

    grid-template-areas:
        "filters results" !important;

    align-items: start !important;

    gap: 30px !important;
}


/* ============================================================
   03. FORZAR POSICION DEL SIDEBAR
============================================================ */

.ere-pa-filters {
    grid-area: filters !important;

    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;

    align-self: start !important;

    position: sticky !important;

    top: 115px;

    margin: 0 !important;
}


/* ============================================================
   04. FORZAR RESULTADOS A LA COLUMNA DERECHA
============================================================ */

.ere-pa-results {
    grid-area: results !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   05. TOOLBAR
============================================================ */

.ere-pa-toolbar {
    width: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px;

    margin:
        0 0 18px !important;
}


/* ============================================================
   06. ACTIVE FILTERS
============================================================ */

.ere-pa-active-filters {
    width: 100% !important;
}


/* ============================================================
   07. GRID DE PROPIEDADES
============================================================ */

.ere-pa-property-grid {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;

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

    gap: 22px !important;

    align-items: stretch !important;
}


/* ============================================================
   08. TARJETAS
============================================================ */

.ere-pa-card {
    width: 100% !important;

    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* ============================================================
   09. IMAGEN
============================================================ */

.ere-pa-card-media {
    position: relative !important;

    width: 100% !important;

    height: auto !important;

    aspect-ratio:
        16 / 10;

    min-height: 250px !important;

    overflow: hidden !important;
}


.ere-pa-card-media > img {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
}


/* ============================================================
   10. CONTENIDO
============================================================ */

.ere-pa-card-content {
    width: 100% !important;

    min-width: 0 !important;

    flex: 1;

    display: flex;
    flex-direction: column;

    padding:
        21px !important;
}


/* ============================================================
   11. TITULOS
============================================================ */

.ere-pa-card h2 {
    width: 100% !important;

    max-width: none !important;

    white-space: normal !important;

    overflow: visible !important;

    word-break: normal !important;

    font-size:
        clamp(
            23px,
            1.7vw,
            29px
        ) !important;

    line-height:
        1.08 !important;
}


/* ============================================================
   12. DESCRIPCION
============================================================ */

.ere-pa-card-description {
    width: 100% !important;

    max-width: none !important;

    overflow: visible !important;

    white-space: normal !important;

    font-size:
        13px !important;

    line-height:
        1.7 !important;
}


/* ============================================================
   13. LAPTOP
============================================================ */

@media (max-width: 1400px) {

    .ere-pa-layout {
        grid-template-columns:
            280px
            minmax(0, 1fr) !important;

        grid-template-areas:
            "filters results" !important;
    }


    .ere-pa-filters {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
    }


    .ere-pa-property-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

}


/* ============================================================
   14. TABLET / MOBILE
============================================================ */

@media (max-width: 900px) {

    /* EL GRID PASA A UNA COLUMNA */

    .ere-pa-layout {
        display: block !important;

        width: 100% !important;
    }


    /* ========================================================
       OVERLAY SOLAMENTE EXISTE VISUALMENTE EN MOBILE
    ======================================================== */

    .ere-pa-filter-overlay {
        display: block !important;

        position: fixed !important;

        z-index: 100001 !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        visibility: hidden;

        opacity: 0;

        pointer-events: none;

        background:
            rgba(7, 8, 9, .65);

        backdrop-filter:
            blur(5px);

        -webkit-backdrop-filter:
            blur(5px);

        transition:
            opacity .3s ease,
            visibility .3s ease;
    }


    .ere-pa-filter-overlay.active {
        visibility: visible;

        opacity: 1;

        pointer-events: auto;
    }


    /* ========================================================
       FILTER DRAWER
    ======================================================== */

    .ere-pa-filters {
        position: fixed !important;

        z-index: 100002 !important;

        top: 0 !important;
        left: 0 !important;

        width:
            min(
                400px,
                90vw
            ) !important;

        min-width: 0 !important;
        max-width: none !important;

        height:
            100dvh !important;

        margin: 0 !important;

        padding:
            0 23px 35px !important;

        overflow-y:
            auto !important;

        transform:
            translateX(-105%);

        transition:
            transform .38s
            cubic-bezier(
                .2,
                .65,
                .2,
                1
            );

        box-shadow:
            25px 0 70px
            rgba(0,0,0,.24);
    }


    .ere-pa-filters.active {
        transform:
            translateX(0);
    }


    /* RESULTS */

    .ere-pa-results {
        width: 100% !important;

        max-width: 100% !important;
    }


    /* CARDS */

    .ere-pa-property-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

}


/* ============================================================
   15. MOBILE
============================================================ */

@media (max-width: 650px) {

    .ere-pa-property-grid {
        grid-template-columns:
            1fr !important;
    }


    .ere-pa-card-media {
        min-height: 0 !important;

        aspect-ratio:
            16 / 10;
    }


    .ere-pa-card-content {
        padding:
            18px 17px !important;
    }


    .ere-pa-card h2 {
        font-size:
            27px !important;
    }

}


/* ============================================================
   16. OCUPADAS
============================================================ */

.ere-pa-card[data-status="ocupado"],
.ere-pa-card[hidden] {
    display:
        none !important;
}


/* ============================================================
   DEFINITIVE GRID FIX END
============================================================ */

/* ============================================================
   EMPIRE REAL ESTATE NI
   PROPERTIES PAGE
   FINAL SIDEBAR + RESULTS FIX
   PEGAR AL FINAL ABSOLUTO DE STYLE.CSS
============================================================ */


/* ============================================================
   01. BOX SIZING
   CRITICO PARA QUE EL PADDING NO AUMENTE EL ANCHO DEL SIDEBAR
============================================================ */

.ere-pa-layout,
.ere-pa-layout *,
.ere-pa-filters,
.ere-pa-results,
.ere-pa-property-grid,
.ere-pa-card {
    box-sizing: border-box !important;
}


/* ============================================================
   02. QUITAMOS EL GRID ANTERIOR
   USAMOS FLEXBOX PARA EVITAR SUPERPOSICIONES
============================================================ */

.ere-pa-layout {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    justify-content: flex-start !important;

    gap: 32px !important;

    position: relative !important;

    overflow: visible !important;
}


/* ============================================================
   03. SIDEBAR
============================================================ */

.ere-pa-filters {
    flex:
        0 0 300px !important;

    width:
        300px !important;

    min-width:
        300px !important;

    max-width:
        300px !important;

    box-sizing:
        border-box !important;

    position:
        sticky !important;

    top:
        115px !important;

    left:
        auto !important;

    right:
        auto !important;

    margin:
        0 !important;

    transform:
        none !important;

    z-index:
        5 !important;

    align-self:
        flex-start !important;

    padding:
        26px !important;

    overflow:
        visible !important;

    background:
        #ffffff !important;

    border:
        1px solid rgba(16,18,20,.08) !important;

    box-shadow:
        0 20px 50px
        rgba(16,18,20,.055) !important;
}


/* ============================================================
   04. RESULTS
   OCUPAN TODO EL ESPACIO RESTANTE
============================================================ */

.ere-pa-results {
    flex:
        1 1 0 !important;

    width:
        auto !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    position:
        relative !important;

    z-index:
        1 !important;

    overflow:
        visible !important;
}


/* ============================================================
   05. EL OVERLAY NO EXISTE EN DESKTOP
============================================================ */

.ere-pa-filter-overlay {
    display:
        none !important;

    position:
        fixed !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;
}


/* ============================================================
   06. TOOLBAR DE RESULTADOS
============================================================ */

.ere-pa-toolbar {
    width:
        100% !important;

    min-width:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        20px !important;

    margin:
        0 0 18px !important;

    padding:
        0 !important;
}


/* ============================================================
   07. CHIPS ACTIVOS
============================================================ */

.ere-pa-active-filters {
    width:
        100% !important;

    margin-bottom:
        20px !important;
}


/* ============================================================
   08. GRID PROPIEDADES
============================================================ */

.ere-pa-property-grid {
    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        100% !important;

    display:
        grid !important;

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

    gap:
        24px !important;

    align-items:
        stretch !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ============================================================
   09. TARJETAS
============================================================ */

.ere-pa-card {
    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    overflow:
        hidden !important;

    background:
        #ffffff !important;

    border:
        1px solid rgba(16,18,20,.075);

    box-shadow:
        0 12px 32px
        rgba(16,18,20,.05);
}


/* ============================================================
   10. IMAGEN
============================================================ */

.ere-pa-card-media {
    position:
        relative !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        auto !important;

    min-height:
        0 !important;

    aspect-ratio:
        16 / 9 !important;

    overflow:
        hidden !important;
}


.ere-pa-card-media > img {
    position:
        absolute !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    display:
        block !important;

    object-fit:
        cover !important;

    object-position:
        center !important;
}


/* ============================================================
   11. CONTENIDO
============================================================ */

.ere-pa-card-content {
    width:
        100% !important;

    min-width:
        0 !important;

    flex:
        1 1 auto !important;

    padding:
        22px !important;

    display:
        flex !important;

    flex-direction:
        column !important;
}


/* ============================================================
   12. TEXTO
============================================================ */

.ere-pa-card h2,
.ere-pa-card-description,
.ere-pa-card-topline,
.ere-pa-card-price-row,
.ere-pa-card-meta,
.ere-pa-card-actions {
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;
}


.ere-pa-card h2 {
    white-space:
        normal !important;

    overflow:
        visible !important;

    font-size:
        clamp(
            26px,
            2vw,
            33px
        ) !important;

    line-height:
        1.05 !important;
}


.ere-pa-card-description {
    min-height:
        68px;

    font-size:
        13px !important;

    line-height:
        1.75 !important;
}


/* ============================================================
   13. LAPTOP
============================================================ */

@media (max-width: 1250px) {

    .ere-pa-layout {
        gap:
            24px !important;
    }


    .ere-pa-filters {
        flex-basis:
            265px !important;

        width:
            265px !important;

        min-width:
            265px !important;

        max-width:
            265px !important;

        padding:
            21px !important;
    }


    .ere-pa-property-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

}


/* ============================================================
   14. TABLET
   SIDEBAR SE CONVIERTE EN DRAWER
============================================================ */

@media (max-width: 900px) {

    .ere-pa-layout {
        display:
            block !important;

        width:
            100% !important;
    }


    /* ========================================================
       RESULTS
    ======================================================== */

    .ere-pa-results {
        width:
            100% !important;

        max-width:
            100% !important;
    }


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

    .ere-pa-filters {
        position:
            fixed !important;

        z-index:
            100002 !important;

        top:
            0 !important;

        left:
            0 !important;

        right:
            auto !important;

        width:
            min(
                400px,
                90vw
            ) !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        height:
            100dvh !important;

        padding:
            0 23px 35px !important;

        margin:
            0 !important;

        overflow-y:
            auto !important;

        transform:
            translateX(-105%) !important;

        box-shadow:
            30px 0 70px
            rgba(0,0,0,.25) !important;

        transition:
            transform .38s
            cubic-bezier(.2,.65,.2,1) !important;
    }


    .ere-pa-filters.active {
        transform:
            translateX(0) !important;
    }


    /* ========================================================
       OVERLAY SOLO TABLET/MOBILE
    ======================================================== */

    .ere-pa-filter-overlay {
        display:
            block !important;

        visibility:
            hidden !important;

        opacity:
            0 !important;

        pointer-events:
            none !important;

        z-index:
            100001 !important;

        background:
            rgba(7,8,9,.65) !important;

        backdrop-filter:
            blur(5px);

        -webkit-backdrop-filter:
            blur(5px);

        transition:
            opacity .3s ease,
            visibility .3s ease;
    }


    .ere-pa-filter-overlay.active {
        visibility:
            visible !important;

        opacity:
            1 !important;

        pointer-events:
            auto !important;
    }


    /* ========================================================
       DOS CARDS
    ======================================================== */

    .ere-pa-property-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

}


/* ============================================================
   15. MOBILE
============================================================ */

@media (max-width: 650px) {

    .ere-pa-property-grid {
        grid-template-columns:
            1fr !important;

        gap:
            18px !important;
    }


    .ere-pa-card-media {
        aspect-ratio:
            16 / 10 !important;
    }


    .ere-pa-card-content {
        padding:
            19px 17px !important;
    }


    .ere-pa-card h2 {
        font-size:
            27px !important;
    }


    .ere-pa-card-description {
        min-height:
            0 !important;
    }

}


/* ============================================================
   16. LIST VIEW
============================================================ */

@media (min-width: 901px) {

    .ere-pa-property-grid.ere-list-view {
        grid-template-columns:
            1fr !important;
    }


    .ere-pa-property-grid.ere-list-view
    .ere-pa-card {
        display:
            grid !important;

        grid-template-columns:
            minmax(380px, 45%)
            minmax(0, 55%) !important;
    }


    .ere-pa-property-grid.ere-list-view
    .ere-pa-card-media {
        height:
            100% !important;

        min-height:
            390px !important;

        aspect-ratio:
            auto !important;
    }

}


/* ============================================================
   17. NO MOSTRAR OCUPADAS
============================================================ */

.ere-pa-card[data-status="ocupado"],
.ere-pa-card[hidden] {
    display:
        none !important;
}


/* ============================================================
   FINAL FIX END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   PROPERTY DETAIL
   CSS START
============================================================ */

.ere-pd-page {

    --pd-black: #101214;
    --pd-dark: #17191b;

    --pd-gold: #b99a5d;
    --pd-gold-light: #d8bc7d;

    --pd-cream: #f6f4ef;
    --pd-gray: #74777b;

    width: 100%;

    overflow: hidden;

    background:
        #f8f7f4;

    color:
        var(--pd-black);

    font-family:
        'Manrope',
        sans-serif;
}


.ere-pd-page *,
.ere-pd-lightbox *,
.ere-pd-error-page * {

    box-sizing: border-box;
}


.ere-pd-container {

    width:
        min(
            calc(100% - 48px),
            1380px
        );

    margin-inline: auto;
}


/* ============================================================
   BREADCRUMB
============================================================ */

.ere-pd-breadcrumb-section {

    padding:
        27px 0;

    background: white;

    border-bottom:
        1px solid rgba(0,0,0,.07);
}


.ere-pd-breadcrumb {

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    color: #929599;

    font-size: 11px;
}


.ere-pd-breadcrumb a {

    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #73767a;

    text-decoration: none;
}


.ere-pd-breadcrumb a:hover {

    color:
        var(--pd-gold);
}


.ere-pd-breadcrumb > i {

    color:
        var(--pd-gold);

    font-size: 6px;
}


.ere-pd-breadcrumb > span {

    color:
        var(--pd-black);

    font-weight: 700;
}


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

.ere-pd-header {

    padding:
        56px 0 44px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f4f1ea
        );
}


.ere-pd-heading-grid {

    display: grid;

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

    align-items: end;

    gap: 60px;
}


.ere-pd-heading-labels {

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 17px;
}


.ere-pd-operation {

    padding:
        8px 11px;

    background:
        var(--pd-gold);

    color:
        var(--pd-black);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.ere-pd-status {

    min-height: 31px;

    padding:
        0 11px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border:
        1px solid rgba(0,0,0,.08);

    background: white;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;
}


.ere-pd-status i {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #62d082;

    box-shadow:
        0 0 0 4px
        rgba(98,208,130,.12);
}


.ere-pd-code {

    display: block;

    margin-bottom: 8px;

    color:
        #9c9ea1;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .12em;
}


.ere-pd-heading-copy h1 {

    max-width: 900px;

    margin: 0;

    color:
        var(--pd-black);

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            48px,
            5vw,
            75px
        );

    font-weight: 500;

    line-height: .98;

    letter-spacing:
        -.045em;
}


.ere-pd-heading-copy h1 em {

    display: block;

    margin-top: 5px;

    color:
        var(--pd-gold);

    font-weight: 500;
}


.ere-pd-location {

    margin-top: 18px;

    display: flex;
    align-items: center;

    gap: 8px;

    color:
        #74777b;

    font-size: 13px;
}


.ere-pd-location i {

    color:
        var(--pd-gold);
}


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

.ere-pd-heading-price {

    min-width: 310px;

    text-align: right;
}


.ere-pd-heading-price > small {

    display: block;

    color:
        #929599;

    font-size: 10px;
}


.ere-pd-heading-price > strong {

    display: block;

    margin-top: 5px;

    color:
        var(--pd-gold);

    font-size:
        clamp(
            25px,
            2.5vw,
            36px
        );

    line-height: 1.1;
}


.ere-pd-heading-price > span {

    display: block;

    margin-top: 6px;

    color:
        #8a8d90;

    font-size: 10px;
}


.ere-pd-heading-actions {

    margin-top: 19px;

    display: flex;
    justify-content: flex-end;

    gap: 7px;
}


.ere-pd-heading-actions button {

    min-height: 42px;

    padding:
        0 13px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border:
        1px solid rgba(0,0,0,.09);

    background: white;

    color:
        var(--pd-black);

    cursor: pointer;

    font-family: inherit;

    font-size: 10px;

    transition:
        background .25s ease,
        color .25s ease;
}


.ere-pd-heading-actions button:hover,
.ere-pd-heading-actions button.active {

    background:
        var(--pd-black);

    color:
        var(--pd-gold-light);
}


/* ============================================================
   GALLERY
============================================================ */

.ere-pd-gallery-section {

    background:
        #f8f7f4;
}


.ere-pd-gallery {

    height: 670px;

    display: grid;

    grid-template-columns:
        1.6fr .7fr .7fr;

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

    gap: 7px;

    overflow: hidden;
}


.ere-pd-gallery button {

    position: relative;

    padding: 0;

    overflow: hidden;

    border: 0;

    background: #ddd;

    cursor: pointer;
}


.ere-pd-gallery-main {

    grid-column: 1;
    grid-row:
        1 / 3;
}


.ere-pd-gallery button img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2,.65,.2,1);
}


.ere-pd-gallery button:hover img {

    transform:
        scale(1.04);
}


.ere-pd-main-overlay {

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(7,8,9,.42)
        );
}


.ere-pd-main-label {

    position: absolute;

    left: 20px;
    bottom: 20px;

    min-height: 41px;

    padding:
        0 13px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    background:
        rgba(12,14,15,.82);

    color: white;

    backdrop-filter:
        blur(7px);

    font-size: 10px;
    font-weight: 700;
}


.ere-pd-gallery-more > span {

    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

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

    gap: 7px;

    background:
        rgba(10,12,13,.48);

    color: white;

    font-size: 11px;
    font-weight: 700;
}


.ere-pd-gallery-more > span i {

    font-size: 19px;
}


/* ============================================================
   CONTENT
============================================================ */

.ere-pd-content-section {

    padding:
        75px 0 110px;
}


.ere-pd-content-layout {

    display: grid;

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

    align-items: start;

    gap:
        clamp(
            50px,
            6vw,
            90px
        );
}


/* ============================================================
   FACTS
============================================================ */

.ere-pd-facts {

    display: grid;

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

    background:
        rgba(0,0,0,.07);

    gap: 1px;
}


.ere-pd-fact {

    min-height: 105px;

    padding:
        17px;

    display: flex;
    align-items: center;

    gap: 12px;

    background: white;
}


.ere-pd-fact > span {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    background:
        #f5f2ec;

    color:
        var(--pd-gold);

    font-size: 13px;
}


.ere-pd-fact div {

    display: flex;
    flex-direction: column;
}


.ere-pd-fact small {

    color: #999b9f;

    font-size: 8px;

    text-transform: uppercase;
}


.ere-pd-fact strong {

    margin-top: 3px;

    color:
        var(--pd-black);

    font-size: 12px;
}


/* ============================================================
   CONTENT SECTIONS
============================================================ */

.ere-pd-section {

    padding:
        60px 0;

    border-bottom:
        1px solid rgba(0,0,0,.075);
}


.ere-pd-section-heading {

    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-bottom: 29px;
}


.ere-pd-section-heading > span {

    color:
        var(--pd-gold);

    font-family:
        'Playfair Display',
        serif;

    font-size: 13px;
}


.ere-pd-section-heading div {

    display: flex;
    flex-direction: column;
}


.ere-pd-section-heading small {

    color: #929599;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.ere-pd-section-heading h2 {

    margin:
        4px 0 0;

    color:
        var(--pd-black);

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            30px,
            3vw,
            43px
        );

    font-weight: 500;
}


.ere-pd-description {

    max-width: 820px;

    margin: 0;

    color: #666a6e;

    font-size: 15px;

    line-height: 1.9;
}


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

.ere-pd-features {

    display: grid;

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

    gap: 9px;
}


.ere-pd-features > div {

    min-height: 57px;

    padding:
        10px 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    background: white;

    border:
        1px solid rgba(0,0,0,.065);

    color: #5e6266;

    font-size: 12px;

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


.ere-pd-features > div:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(185,154,93,.30);

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.045);
}


.ere-pd-features > div > span {

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(185,154,93,.10);

    color:
        var(--pd-gold);

    font-size: 8px;
}


/* ============================================================
   REFERENCE
============================================================ */

.ere-pd-reference {

    margin-top: 55px;

    display: grid;

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

    background:
        var(--pd-black);
}


.ere-pd-reference > div {

    min-height: 93px;

    padding:
        19px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    border-right:
        1px solid rgba(255,255,255,.08);
}


.ere-pd-reference span {

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

    font-size: 8px;

    text-transform: uppercase;
}


.ere-pd-reference strong {

    margin-top: 5px;

    color: white;

    font-size: 11px;
}


.ere-pd-reference
.ere-pd-reference-available {

    color:
        #75d994;
}


/* ============================================================
   LOCATION
============================================================ */

.ere-pd-location-intro {

    margin-bottom: 18px;

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

    gap: 25px;
}


.ere-pd-location-intro > div {

    display: flex;
    align-items: center;

    gap: 12px;
}


.ere-pd-location-intro > div > i {

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    background:
        var(--pd-black);

    color:
        var(--pd-gold);
}


.ere-pd-location-intro span {

    display: flex;
    flex-direction: column;
}


.ere-pd-location-intro small {

    color: #999c9f;

    font-size: 8px;
}


.ere-pd-location-intro strong {

    margin-top: 2px;

    font-size: 11px;
}


.ere-pd-location-intro p {

    max-width: 310px;

    margin: 0;

    color: #8b8e91;

    font-size: 10px;

    text-align: right;
}


/* ============================================================
   MAP
============================================================ */

.ere-pd-map {

    width: 100%;
    height: 430px;

    background: #ddd;
}


.ere-pd-map-note {

    margin:
        10px 0 0;

    color: #999c9f;

    font-size: 9px;
}


.ere-pd-map-note i {

    margin-right: 5px;

    color:
        var(--pd-gold);
}


.ere-pd-map-private {

    min-height: 240px;

    padding: 30px;

    display: flex;
    align-items: center;

    justify-content: center;

    gap: 20px;

    background:
        linear-gradient(
            135deg,
            #17191b,
            #252729
        );

    color: white;
}


.ere-pd-map-private > span {

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(216,188,125,.25);

    color:
        var(--pd-gold-light);

    font-size: 19px;
}


.ere-pd-map-private div {

    max-width: 450px;

    display: flex;
    flex-direction: column;
}


.ere-pd-map-private small {

    color:
        var(--pd-gold);

    font-size: 8px;
}


.ere-pd-map-private strong {

    margin-top: 3px;

    font-size: 15px;
}


.ere-pd-map-private p {

    margin:
        7px 0 0;

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

    font-size: 11px;

    line-height: 1.6;
}


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

.ere-pd-sidebar {

    position: sticky;

    top: 115px;

    display: grid;

    gap: 13px;
}


/* PRICE CARD */

.ere-pd-price-card {

    padding:
        29px;

    background:
        var(--pd-black);

    color: white;

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


.ere-pd-price-eyebrow {

    display: block;

    margin-bottom: 18px;

    color:
        var(--pd-gold);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.ere-pd-price-card > small {

    display: block;

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

    font-size: 9px;
}


.ere-pd-price-card > strong {

    display: block;

    margin-top: 4px;

    color:
        var(--pd-gold-light);

    font-size: 27px;

    line-height: 1.15;
}


.ere-pd-price-currency {

    display: block;

    margin-top: 5px;

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

    font-size: 9px;

    line-height: 1.5;
}


.ere-pd-price-divider {

    height: 1px;

    margin:
        22px 0;

    background:
        rgba(255,255,255,.09);
}


.ere-pd-price-code {

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

    gap: 15px;

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

    font-size: 9px;
}


.ere-pd-price-code strong {

    color: white;

    font-size: 10px;
}


/* CALL */

.ere-pd-call-button {

    min-height: 64px;

    margin-top: 22px;

    padding:
        8px;

    display: grid;

    grid-template-columns:
        45px 1fr;

    align-items: center;

    gap: 11px;

    background:
        linear-gradient(
            135deg,
            var(--pd-gold-light),
            var(--pd-gold)
        );

    color:
        var(--pd-black);

    text-decoration: none;
}


.ere-pd-call-button > span {

    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

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


.ere-pd-call-button div {

    display: flex;
    flex-direction: column;
}


.ere-pd-call-button small {

    font-size: 7px;
}


.ere-pd-call-button strong {

    margin-top: 2px;

    font-size: 13px;
}


/* CONTACT */

.ere-pd-contact-button,
.ere-pd-facebook-button {

    min-height: 49px;

    margin-top: 8px;

    padding:
        0 14px;

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

    gap: 9px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}


.ere-pd-contact-button {

    justify-content: space-between;

    background: white;

    color:
        var(--pd-black);
}


.ere-pd-facebook-button {

    border:
        1px solid rgba(255,255,255,.13);

    color:
        rgba(255,255,255,.70);
}


/* ============================================================
   ADVISOR
============================================================ */

.ere-pd-advisor {

    padding:
        22px;

    background: white;

    border:
        1px solid rgba(0,0,0,.07);
}


.ere-pd-advisor-icon {

    width: 45px;
    height: 45px;

    margin-bottom: 14px;

    display: grid;
    place-items: center;

    background:
        #f3f0e9;

    color:
        var(--pd-gold);
}


.ere-pd-advisor small {

    color: #999c9f;

    font-size: 8px;
}


.ere-pd-advisor strong {

    display: block;

    margin-top: 2px;

    font-size: 13px;
}


.ere-pd-advisor p {

    margin:
        10px 0 0;

    color: #797c80;

    font-size: 11px;

    line-height: 1.7;
}


.ere-pd-advisor-actions {

    display: flex;

    gap: 7px;

    margin-top: 17px;
}


.ere-pd-advisor-actions a {

    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(0,0,0,.08);

    color:
        var(--pd-black);
}


.ere-pd-advisor-actions a:hover {

    background:
        var(--pd-black);

    color:
        var(--pd-gold);
}


/* LICENSE */

.ere-pd-license {

    padding:
        15px;

    display: flex;
    align-items: center;

    gap: 10px;

    background:
        rgba(185,154,93,.08);

    border:
        1px solid rgba(185,154,93,.15);
}


.ere-pd-license > i {

    color:
        var(--pd-gold);
}


.ere-pd-license div {

    display: flex;
    flex-direction: column;
}


.ere-pd-license small {

    color: #96999d;

    font-size: 7px;
}


.ere-pd-license strong {

    margin-top: 2px;

    color: #676a6e;

    font-size: 8px;
}


/* ============================================================
   RELATED
============================================================ */

.ere-pd-related {

    padding:
        100px 0;

    background:
        #eeeae2;
}


.ere-pd-related-heading {

    margin-bottom: 35px;

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

    gap: 30px;
}


.ere-pd-related-heading > div > span {

    color:
        var(--pd-gold);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.ere-pd-related-heading h2 {

    max-width: 700px;

    margin:
        7px 0 0;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            37px,
            4vw,
            56px
        );

    font-weight: 500;

    line-height: 1;
}


.ere-pd-related-heading h2 em {

    color:
        var(--pd-gold);
}


.ere-pd-related-heading > a {

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color:
        var(--pd-black);

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}


.ere-pd-related-grid {

    display: grid;

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

    gap: 19px;
}


.ere-pd-related-card {

    overflow: hidden;

    background: white;

    border:
        1px solid rgba(0,0,0,.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.ere-pd-related-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.09);
}


.ere-pd-related-image {

    position: relative;

    height: 245px;

    display: block;

    overflow: hidden;
}


.ere-pd-related-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s ease;
}


.ere-pd-related-card:hover
.ere-pd-related-image img {

    transform:
        scale(1.045);
}


.ere-pd-related-image > span {

    position: absolute;

    left: 13px;
    bottom: 13px;

    padding:
        7px 9px;

    background:
        var(--pd-gold);

    color:
        var(--pd-black);

    font-size: 8px;
    font-weight: 800;
}


.ere-pd-related-content {

    padding:
        18px;
}


.ere-pd-related-content > small {

    color: #8b8e92;

    font-size: 9px;
}


.ere-pd-related-content h3 {

    margin:
        8px 0 15px;

    font-family:
        'Playfair Display',
        serif;

    font-size: 24px;
    line-height: 1.05;
}


.ere-pd-related-content h3 a {

    color:
        var(--pd-black);

    text-decoration: none;
}


.ere-pd-related-content h3 span {

    display: block;

    margin-top: 4px;

    color:
        var(--pd-gold);

    font-family:
        'Manrope',
        sans-serif;

    font-size: 9px;

    text-transform: uppercase;
}


.ere-pd-related-content > div {

    padding-top: 13px;

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

    border-top:
        1px solid rgba(0,0,0,.07);
}


.ere-pd-related-content > div > strong {

    color:
        var(--pd-gold);

    font-size: 16px;
}


.ere-pd-related-content > div > a {

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        var(--pd-black);

    color:
        var(--pd-gold);

    font-size: 8px;
}


/* ============================================================
   LIGHTBOX
============================================================ */

.ere-pd-lightbox {

    position: fixed;
    inset: 0;

    z-index: 999999;

    display: none;

    color: white;
}


.ere-pd-lightbox.active {

    display: block;
}


.ere-pd-lightbox-bg {

    position: absolute;
    inset: 0;

    background:
        rgba(3,4,5,.96);

    backdrop-filter:
        blur(10px);
}


.ere-pd-lightbox-ui {

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100dvh;

    padding:
        20px;

    display: grid;

    grid-template-rows:
        auto 1fr auto;
}


.ere-pd-lightbox-top {

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

    gap: 20px;
}


.ere-pd-lightbox-top div {

    display: flex;
    flex-direction: column;
}


.ere-pd-lightbox-top small {

    color:
        var(--pd-gold);

    font-size: 8px;
}


.ere-pd-lightbox-top strong {

    margin-top: 3px;

    font-size: 12px;
}


.ere-pd-lightbox-top button {

    width: 45px;
    height: 45px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    color: white;

    cursor: pointer;
}


.ere-pd-lightbox-main {

    min-height: 0;

    display: grid;

    grid-template-columns:
        55px 1fr 55px;

    align-items: center;

    gap: 15px;
}


.ere-pd-lightbox-main > div {

    width: 100%;
    height: calc(100dvh - 190px);

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


.ere-pd-lightbox-main img {

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}


.ere-pd-lightbox-main > button {

    width: 48px;
    height: 48px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 50%;

    background:
        rgba(255,255,255,.05);

    color: white;

    cursor: pointer;
}


.ere-pd-lightbox-bottom {

    display: flex;
    align-items: center;

    gap: 18px;
}


.ere-pd-lightbox-bottom > span {

    min-width: 45px;

    color:
        var(--pd-gold);

    font-size: 9px;
}


.ere-pd-lightbox-bottom > div {

    flex: 1;

    display: flex;
    justify-content: center;

    gap: 5px;
}


.ere-pd-lightbox-bottom button {

    width: 65px;
    height: 45px;

    padding: 0;

    overflow: hidden;

    border:
        2px solid transparent;

    background: transparent;

    cursor: pointer;
}


.ere-pd-lightbox-bottom button.active {

    border-color:
        var(--pd-gold);
}


.ere-pd-lightbox-bottom img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   404
============================================================ */

.ere-pd-error-page {

    min-height: 70vh;

    padding:
        80px 20px;

    display: grid;
    place-items: center;

    background:
        #f5f3ee;
}


.ere-pd-error-box {

    max-width: 600px;

    text-align: center;
}


.ere-pd-error-box > span {

    color:
        #b99a5d;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .15em;
}


.ere-pd-error-box h1 {

    margin:
        10px 0;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            40px,
            6vw,
            70px
        );
}


.ere-pd-error-box p {

    color: #777;

    font-size: 14px;
}


.ere-pd-error-box a {

    min-height: 50px;

    margin-top: 20px;

    padding:
        0 18px;

    display: inline-flex;
    align-items: center;

    gap: 12px;

    background: #111315;

    color: white;

    text-decoration: none;
}


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

@media (max-width: 1000px) {

    .ere-pd-content-layout {

        grid-template-columns:
            1fr;
    }


    .ere-pd-sidebar {

        position: relative;

        top: auto;

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


    .ere-pd-license {

        grid-column:
            1 / -1;
    }


    .ere-pd-gallery {

        height: 550px;
    }


    .ere-pd-facts {

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

}


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

@media (max-width: 700px) {

    .ere-pd-container {

        width:
            calc(100% - 22px);
    }


    .ere-pd-header {

        padding:
            40px 0 30px;
    }


    .ere-pd-heading-grid {

        grid-template-columns:
            1fr;

        gap: 27px;
    }


    .ere-pd-heading-copy h1 {

        font-size:
            clamp(
                43px,
                13vw,
                60px
            );
    }


    .ere-pd-heading-price {

        min-width: 0;

        text-align: left;
    }


    .ere-pd-heading-actions {

        justify-content:
            flex-start;
    }


    /* GALLERY APP */

    .ere-pd-gallery {

        height: auto;

        margin-inline:
            -11px;

        padding-inline:
            11px;

        display: grid;

        grid-auto-flow: column;

        grid-auto-columns:
            88%;

        grid-template-columns: none;
        grid-template-rows: none;

        gap: 8px;

        overflow-x: auto;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;
    }


    .ere-pd-gallery::-webkit-scrollbar {

        display: none;
    }


    .ere-pd-gallery button,
    .ere-pd-gallery-main {

        grid-column: auto;
        grid-row: auto;

        height: 365px;

        scroll-snap-align:
            center;
    }


    /* CONTENT */

    .ere-pd-content-section {

        padding:
            50px 0 75px;
    }


    .ere-pd-facts {

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


    .ere-pd-fact {

        min-height: 95px;

        padding: 13px;
    }


    .ere-pd-section {

        padding:
            48px 0;
    }


    .ere-pd-description {

        font-size: 14px;
    }


    .ere-pd-features {

        grid-template-columns:
            1fr;
    }


    .ere-pd-reference {

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


    .ere-pd-location-intro {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .ere-pd-location-intro p {

        max-width: 100%;

        text-align: left;
    }


    .ere-pd-map {

        height: 350px;
    }


    /* SIDEBAR */

    .ere-pd-sidebar {

        grid-template-columns:
            1fr;
    }


    .ere-pd-license {

        grid-column: auto;
    }


    /* RELATED */

    .ere-pd-related {

        padding:
            70px 0;
    }


    .ere-pd-related-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .ere-pd-related-grid {

        grid-template-columns:
            1fr;
    }


    /* LIGHTBOX */

    .ere-pd-lightbox-ui {

        padding:
            12px;
    }


    .ere-pd-lightbox-main {

        grid-template-columns:
            37px 1fr 37px;

        gap: 5px;
    }


    .ere-pd-lightbox-main > button {

        width: 36px;
        height: 36px;
    }


    .ere-pd-lightbox-main > div {

        height:
            calc(100dvh - 170px);
    }


    .ere-pd-lightbox-bottom > div {

        overflow-x: auto;

        justify-content:
            flex-start;

        scrollbar-width: none;
    }


    .ere-pd-lightbox-bottom button {

        min-width: 54px;
    }

}


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

@media (max-width: 420px) {

    .ere-pd-gallery button,
    .ere-pd-gallery-main {

        height: 320px;
    }


    .ere-pd-facts {

        grid-template-columns: 1fr;
    }


    .ere-pd-reference {

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


    .ere-pd-heading-actions button span {

        display: none;
    }

}


/* ============================================================
   PROPERTY DETAIL CSS END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   CONTACT PAGE
   contacto.php

   DISEÑO:
   - Negro / grafito
   - Dorado premium
   - Blanco / crema
   - Playfair Display
   - Manrope
   - Responsive
   - Animaciones sutiles
============================================================ */


/* ============================================================
   01. VARIABLES
============================================================ */

:root{

    --ere-contact-black:
        #090a0b;

    --ere-contact-dark:
        #111315;

    --ere-contact-dark-soft:
        #181a1d;

    --ere-contact-gold:
        #b99a5d;

    --ere-contact-gold-light:
        #d8bc7d;

    --ere-contact-gold-soft:
        #eee4d1;

    --ere-contact-white:
        #ffffff;

    --ere-contact-cream:
        #f7f5f0;

    --ere-contact-cream-dark:
        #efede8;

    --ere-contact-text:
        #242629;

    --ere-contact-muted:
        #7d8084;

    --ere-contact-border:
        rgba(17,19,21,.11);

    --ere-contact-shadow:
        0 22px 55px rgba(10,12,14,.08);

    --ere-contact-shadow-lg:
        0 35px 90px rgba(10,12,14,.13);

}


/* ============================================================
   02. PAGE
============================================================ */

.ere-contact-page{

position:
        relative;

width:
        100%;

margin:
        0;

overflow:
        hidden;

background:
        var(--ere-contact-cream);

color:
        var(--ere-contact-text);
}


/* ============================================================
   CONTAINER
============================================================ */

.ere-contact-container{

    width:
        calc(100% - 48px);

    max-width:
        1380px;

    margin:
        0 auto;

    box-sizing:
        border-box;

}


/* ============================================================
   03. BREADCRUMB / HERO
============================================================ */

.ere-contact-breadcrumb-section{

    position:
        relative;

    isolation:
        isolate;

    width:
        100%;

    min-height:
        470px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--ere-contact-dark);

}


/* ============================================================
   BACKGROUND IMAGE
============================================================ */

.ere-contact-breadcrumb-bg{

    position:
        absolute;

    z-index:
        -3;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

}


.ere-contact-breadcrumb-bg img{

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.03);

    animation:
        ereContactBackgroundIn
        1.6s
        cubic-bezier(.2,.75,.2,1)
        both;

}


/* ============================================================
   IMAGE ANIMATION
============================================================ */

@keyframes ereContactBackgroundIn{

    from{

        opacity:
            .6;

        transform:
            scale(1.09);

    }

    to{

        opacity:
            1;

        transform:
            scale(1.03);

    }

}


/* ============================================================
   DARK OVERLAY
============================================================ */

.ere-contact-breadcrumb-overlay{

    position:
        absolute;

    z-index:
        -2;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(7,8,9,.94) 0%,
            rgba(7,8,9,.86) 34%,
            rgba(7,8,9,.67) 64%,
            rgba(7,8,9,.42) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.06),
            rgba(0,0,0,.28)
        );

    pointer-events:
        none;

}


/* ============================================================
   DECORATIVE CIRCLES
============================================================ */

.ere-contact-breadcrumb-pattern{

    position:
        absolute;

    z-index:
        -1;

    width:
        610px;

    height:
        610px;

    right:
        -115px;

    top:
        -320px;

    border:
        1px solid rgba(216,188,125,.13);

    border-radius:
        50%;

    pointer-events:
        none;

}


.ere-contact-breadcrumb-pattern::before{

    content:
        "";

    position:
        absolute;

    width:
        440px;

    height:
        440px;

    left:
        84px;

    top:
        84px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:
        50%;

}


.ere-contact-breadcrumb-pattern::after{

    content:
        "";

    position:
        absolute;

    width:
        270px;

    height:
        270px;

    left:
        169px;

    top:
        169px;

    border:
        1px solid rgba(185,154,93,.08);

    border-radius:
        50%;

}


/* ============================================================
   GOLD LINE
============================================================ */

.ere-contact-breadcrumb-section::after{

    content:
        "";

    position:
        absolute;

    z-index:
        5;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        3px;

    background:

        linear-gradient(
            90deg,
            transparent 0%,
            rgba(185,154,93,.25) 10%,
            #b99a5d 30%,
            #d8bc7d 50%,
            #b99a5d 70%,
            rgba(185,154,93,.25) 90%,
            transparent 100%
        );

}


/* ============================================================
   BREADCRUMB INNER
============================================================ */

.ere-contact-breadcrumb-inner{

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    min-height:
        470px;

    padding:
        75px 0 60px;

    box-sizing:
        border-box;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        70px;

}


/* ============================================================
   BREADCRUMB CONTENT
============================================================ */

.ere-contact-breadcrumb-content{

    width:
        100%;

    max-width:
        820px;

    animation:
        ereContactHeroContent
        .9s
        cubic-bezier(.2,.75,.2,1)
        both;

}


@keyframes ereContactHeroContent{

    from{

        opacity:
            0;

        transform:
            translateY(28px);

    }

    to{

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* ============================================================
   EYEBROW
============================================================ */

.ere-contact-breadcrumb-eyebrow{

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin:
        0 0 19px;

    color:
        var(--ere-contact-gold-light);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        2.4px;

    text-transform:
        uppercase;

}


.ere-contact-breadcrumb-line{

    display:
        block;

    width:
        40px;

    height:
        1px;

    flex:
        0 0 40px;

    background:
        var(--ere-contact-gold);

}


/* ============================================================
   BREADCRUMB H1
============================================================ */

.ere-contact-breadcrumb-content h1{

    max-width:
        800px;

    margin:
        0;

    padding:
        0;

    color:
        var(--ere-contact-white);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            54px,
            5.2vw,
            80px
        );

    font-weight:
        500;

    line-height:
        1.01;

    letter-spacing:
        -2.2px;

    text-transform:
        none;

}


.ere-contact-breadcrumb-content h1 em{

    display:
        block;

    margin-top:
        3px;

    color:
        var(--ere-contact-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-style:
        italic;

    font-weight:
        400;

}


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

.ere-contact-breadcrumb-content > p{

    max-width:
        670px;

    margin:
        23px 0 0;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.8;

}


.ere-contact-breadcrumb-content > p span{

    display:
        inline-block;

    margin:
        0 7px;

    color:
        var(--ere-contact-gold-light);

}


/* ============================================================
   BREADCRUMB NAVIGATION
============================================================ */

.ere-contact-breadcrumb-nav{

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin:
        35px 0 0;

    padding:
        0;

    background:
        transparent;

    border:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

}


.ere-contact-breadcrumb-nav a{

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0;

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

    background:
        transparent;

    text-decoration:
        none;

    font-weight:
        500;

    transition:
        color .25s ease;

}


.ere-contact-breadcrumb-nav a:hover{

    color:
        var(--ere-contact-gold-light);

}


.ere-contact-breadcrumb-nav > i{

    color:
        rgba(216,188,125,.64);

    font-size:
        7px;

}


.ere-contact-breadcrumb-nav > span{

    color:
        var(--ere-contact-white);

    font-weight:
        700;

}


/* ============================================================
   PROPERTY HERO REFERENCE
============================================================ */

.ere-contact-breadcrumb-property{

    flex:
        0 0 265px;

    box-sizing:
        border-box;

    padding:
        28px 29px;

    background:
        rgba(12,14,15,.73);

    border:
        1px solid rgba(255,255,255,.13);

    border-left:
        3px solid var(--ere-contact-gold);

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

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    animation:
        ereContactHeroProperty
        .95s
        .12s
        cubic-bezier(.2,.75,.2,1)
        both;

}


@keyframes ereContactHeroProperty{

    from{

        opacity:
            0;

        transform:
            translateX(30px);

    }

    to{

        opacity:
            1;

        transform:
            translateX(0);

    }

}


.ere-contact-breadcrumb-property > span{

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--ere-contact-gold-light);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.ere-contact-breadcrumb-property > strong{

    display:
        block;

    color:
        var(--ere-contact-white);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        16px;

    font-weight:
        800;

    line-height:
        1.4;

}


.ere-contact-breadcrumb-property > small{

    display:
        inline-flex;

    margin-top:
        15px;

    padding:
        8px 11px;

    background:
        var(--ere-contact-gold);

    color:
        var(--ere-contact-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    text-transform:
        uppercase;

}


/* ============================================================
   04. MAIN CONTACT
============================================================ */

.ere-contact-main-section{

    position:
        relative;

    padding:
        105px 0 115px;

    background:
        var(--ere-contact-cream);

}


/* decorative background line */

.ere-contact-main-section::before{

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        1px;

    height:
        100%;

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(185,154,93,.11),
            transparent
        );

    pointer-events:
        none;

}


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

.ere-contact-layout{

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(430px,.86fr);

    gap:
        78px;

    align-items:
        start;

}


/* ============================================================
   05. INTRO
============================================================ */

.ere-contact-intro{

    max-width:
        680px;

    margin-bottom:
        43px;

}


.ere-contact-intro > span{

    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--ere-contact-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

}


.ere-contact-intro h2{

    margin:
        0;

    color:
        var(--ere-contact-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            42px,
            4vw,
            62px
        );

    font-weight:
        500;

    line-height:
        1.04;

    letter-spacing:
        -1.5px;

}


.ere-contact-intro h2 em{

    color:
        var(--ere-contact-gold);

    font-weight:
        400;

    font-style:
        italic;

}


.ere-contact-intro p{

    max-width:
        620px;

    margin:
        22px 0 0;

    color:
        var(--ere-contact-muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        14px;

    line-height:
        1.85;

}


/* ============================================================
   06. SELECTED PROPERTY CARD
============================================================ */

.ere-contact-property-card{

    display:
        grid;

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

    margin-bottom:
        35px;

    overflow:
        hidden;

    background:
        var(--ere-contact-white);

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

    box-shadow:
        var(--ere-contact-shadow);

    transition:
        transform .35s cubic-bezier(.2,.75,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;

}


.ere-contact-property-card:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(185,154,93,.30);

    box-shadow:
        0 30px 75px rgba(10,12,14,.12);

}


/* ============================================================
   PROPERTY IMAGE
============================================================ */

.ere-contact-property-image{

    position:
        relative;

    min-height:
        270px;

    display:
        block;

    overflow:
        hidden;

    background:
        var(--ere-contact-dark);

}


.ere-contact-property-image img{

    width:
        100%;

    height:
        100%;

    min-height:
        270px;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .65s cubic-bezier(.2,.75,.2,1);

}


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

    transform:
        scale(1.05);

}


.ere-contact-property-image::after{

    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    background:

        linear-gradient(
            to top,
            rgba(7,8,9,.58),
            transparent 58%
        );

    pointer-events:
        none;

}


/* ============================================================
   OPERATION BADGE
============================================================ */

.ere-contact-property-operation{

    position:
        absolute;

    z-index:
        3;

    left:
        18px;

    bottom:
        18px;

    padding:
        9px 13px;

    background:
        var(--ere-contact-gold);

    color:
        var(--ere-contact-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}


/* ============================================================
   PROPERTY WITHOUT IMAGE
============================================================ */

.ere-contact-property-no-image{

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    color:
        #a0a3a6;

    text-align:
        center;

}


.ere-contact-property-no-image i{

    color:
        var(--ere-contact-gold);

    font-size:
        28px;

}


.ere-contact-property-no-image span{

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

}


/* ============================================================
   PROPERTY CONTENT
============================================================ */

.ere-contact-property-content{

    min-width:
        0;

    padding:
        27px 29px;

    display:
        flex;

    flex-direction:
        column;

}


/* top */

.ere-contact-property-top{

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        18px;

}


.ere-contact-property-top span{

    color:
        var(--ere-contact-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

}


.ere-contact-property-top strong{

    color:
        #9da0a3;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    font-weight:
        700;

}


/* heading */

.ere-contact-property-content h3{

    margin:
        0;

    padding:
        0;

}


.ere-contact-property-content h3 a{

    color:
        var(--ere-contact-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        27px;

    font-weight:
        600;

    line-height:
        1.15;

    text-decoration:
        none;

}


.ere-contact-property-content h3 small{

    display:
        block;

    margin-top:
        5px;

    color:
        var(--ere-contact-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

}


/* location */

.ere-contact-property-location{

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    margin-top:
        17px;

    color:
        #888b8e;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        11px;

    line-height:
        1.6;

}


.ere-contact-property-location i{

    margin-top:
        3px;

    color:
        var(--ere-contact-gold);

}


/* ============================================================
   PROPERTY BOTTOM
============================================================ */

.ere-contact-property-bottom{

    margin-top:
        auto;

    padding-top:
        20px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        18px;

    border-top:
        1px solid #ecece9;

}


.ere-contact-property-bottom > div{

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.ere-contact-property-bottom small{

    color:
        #999c9f;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}


.ere-contact-property-bottom strong{

    color:
        var(--ere-contact-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        18px;

    font-weight:
        800;

}


.ere-contact-property-bottom > a{

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--ere-contact-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        gap .25s ease,
        color .25s ease;

}


.ere-contact-property-bottom > a:hover{

    gap:
        11px;

    color:
        var(--ere-contact-gold);

}


/* ============================================================
   07. PROPERTY WARNING
============================================================ */

.ere-contact-property-warning{

    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    margin-bottom:
        35px;

    padding:
        24px;

    background:
        var(--ere-contact-white);

    border:
        1px solid rgba(185,154,93,.25);

}


.ere-contact-property-warning > span{

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--ere-contact-gold);

    color:
        var(--ere-contact-dark);

}


.ere-contact-property-warning strong{

    display:
        block;

    color:
        var(--ere-contact-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

}


.ere-contact-property-warning p{

    margin:
        7px 0 12px;

    color:
        var(--ere-contact-muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        12px;

    line-height:
        1.7;

}


.ere-contact-property-warning a{

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--ere-contact-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    text-decoration:
        none;

    text-transform:
        uppercase;

}


/* ============================================================
   08. CONTACT DETAILS
============================================================ */

.ere-contact-details{

    display:
        grid;

    gap:
        1px;

    overflow:
        hidden;

    background:
        #dedbd4;

    border:
        1px solid #dedbd4;

}


.ere-contact-detail{

    position:
        relative;

    min-width:
        0;

    padding:
        21px 23px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        16px;

    background:
        var(--ere-contact-white);

    color:
        inherit;

    text-decoration:
        none;

    transition:
        background .3s ease;

}


a.ere-contact-detail:hover{

    background:
        #faf8f4;

}


/* contact icon */

.ere-contact-detail > span{

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(185,154,93,.29);

    color:
        var(--ere-contact-gold);

    font-size:
        14px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


a.ere-contact-detail:hover > span{

    background:
        var(--ere-contact-gold);

    color:
        var(--ere-contact-dark);

    transform:
        translateY(-2px);

}


/* copy */

.ere-contact-detail > div{

    min-width:
        0;

}


.ere-contact-detail small{

    display:
        block;

    margin-bottom:
        3px;

    color:
        #999c9f;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.ere-contact-detail strong{

    display:
        block;

    color:
        var(--ere-contact-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;

}


.ere-contact-detail p{

    margin:
        4px 0 0;

    color:
        #96999c;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        10px;

}


/* arrow */

.ere-contact-detail > i{

    color:
        #b8b9b7;

    font-size:
        10px;

    transition:
        color .25s ease,
        transform .25s ease;

}


a.ere-contact-detail:hover > i{

    color:
        var(--ere-contact-gold);

    transform:
        translateX(4px);

}


/* ============================================================
   09. LICENSE
============================================================ */

.ere-contact-license{

    margin-top:
        18px;

    padding:
        17px 20px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    background:
        rgba(185,154,93,.08);

    border:
        1px solid rgba(185,154,93,.16);

}


.ere-contact-license > i{

    color:
        var(--ere-contact-gold);

    font-size:
        16px;

}


.ere-contact-license small{

    display:
        block;

    color:
        #9d978c;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .9px;

    text-transform:
        uppercase;

}


.ere-contact-license strong{

    display:
        block;

    margin-top:
        2px;

    color:
        #555149;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

}


/* ============================================================
   10. FORM PANEL
============================================================ */

.ere-contact-form-panel{

    position:
        sticky;

    top:
        120px;

    box-sizing:
        border-box;

    padding:
        44px 41px;

    background:
        var(--ere-contact-white);

    border-top:
        4px solid var(--ere-contact-gold);

    box-shadow:
        var(--ere-contact-shadow-lg);

}


/* decorative corner */

.ere-contact-form-panel::after{

    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        110px;

    height:
        110px;

    background:

        linear-gradient(
            135deg,
            transparent 49%,
            rgba(185,154,93,.06) 50%
        );

    pointer-events:
        none;

}


/* ============================================================
   FORM HEADING
============================================================ */

.ere-contact-form-heading{

    position:
        relative;

    z-index:
        2;

    margin-bottom:
        31px;

}


.ere-contact-form-heading > span{

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--ere-contact-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;

}


.ere-contact-form-heading h2{

    margin:
        0;

    color:
        var(--ere-contact-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        38px;

    font-weight:
        600;

    line-height:
        1.08;

}


.ere-contact-form-heading p{

    margin:
        14px 0 0;

    color:
        #85888b;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        12px;

    line-height:
        1.7;

}


.ere-contact-form-heading p strong{

    color:
        var(--ere-contact-dark);

}


/* ============================================================
   11. FORM
============================================================ */

.ere-contact-form{

    display:
        grid;

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

    gap:
        21px 17px;

}


/* ============================================================
   FIELDS
============================================================ */

.ere-contact-field{

    min-width:
        0;

}


.ere-contact-field-full{

    grid-column:
        1 / -1;

}


/* labels */

.ere-contact-field label{

    display:
        block;

    margin-bottom:
        8px;

    color:
        #484b4e;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        10px;

    font-weight:
        800;

}


.ere-contact-field label span{

    color:
        var(--ere-contact-gold);

}


/* ============================================================
   WRAPPERS
============================================================ */

.ere-contact-input-wrap,
.ere-contact-select-wrap,
.ere-contact-textarea-wrap{

    position:
        relative;

    width:
        100%;

}


/* ============================================================
   FIELD ICONS
============================================================ */

.ere-contact-input-wrap > i,
.ere-contact-select-wrap > i:first-child{

    position:
        absolute;

    z-index:
        3;

    left:
        16px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #b2a58e;

    font-size:
        11px;

    pointer-events:
        none;

}


.ere-contact-select-wrap > i:last-child{

    position:
        absolute;

    z-index:
        3;

    right:
        16px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--ere-contact-gold);

    font-size:
        9px;

    pointer-events:
        none;

}


/* ============================================================
   INPUTS
============================================================ */

.ere-contact-form input,
.ere-contact-form select,
.ere-contact-form textarea{

    width:
        100%;

    box-sizing:
        border-box;

    margin:
        0;

    outline:
        0;

    border:
        1px solid #dededb;

    border-radius:
        0;

    background:
        #fbfbfa;

    color:
        var(--ere-contact-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        12px;

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

}


/* input */

.ere-contact-form input{

    height:
        56px;

    padding:
        0 15px 0 43px;

}


/* select */

.ere-contact-form select{

    height:
        56px;

    padding:
        0 40px 0 43px;

    appearance:
        none;

    -webkit-appearance:
        none;

    cursor:
        pointer;

}


/* textarea */

.ere-contact-form textarea{

    min-height:
        165px;

    padding:
        16px 17px;

    line-height:
        1.7;

    resize:
        vertical;

}


/* placeholders */

.ere-contact-form input::placeholder,
.ere-contact-form textarea::placeholder{

    color:
        #acadad;

}


/* focus */

.ere-contact-form input:focus,
.ere-contact-form select:focus,
.ere-contact-form textarea:focus{

    background:
        var(--ere-contact-white);

    border-color:
        var(--ere-contact-gold);

    box-shadow:
        0 0 0 3px rgba(185,154,93,.08);

}


/* ============================================================
   12. PROPERTY FORM REFERENCE
============================================================ */

.ere-contact-form-reference{

    grid-column:
        1 / -1;

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    background:
        var(--ere-contact-cream);

    border-left:
        3px solid var(--ere-contact-gold);

}


.ere-contact-form-reference > span{

    width:
        35px;

    height:
        35px;

    flex:
        0 0 35px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--ere-contact-white);

    color:
        var(--ere-contact-gold);

    font-size:
        11px;

}


.ere-contact-form-reference small{

    display:
        block;

    color:
        #999c9f;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.ere-contact-form-reference strong{

    display:
        block;

    margin-top:
        2px;

    color:
        #333537;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        10px;

    line-height:
        1.5;

}


/* ============================================================
   13. SECURITY
============================================================ */

.ere-contact-form-security{

    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

}


.ere-contact-form-security i{

    margin-top:
        3px;

    color:
        var(--ere-contact-gold);

    font-size:
        10px;

}


.ere-contact-form-security p{

    margin:
        0;

    color:
        #999c9f;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    line-height:
        1.6;

}


/* ============================================================
   14. SUBMIT
============================================================ */

.ere-contact-submit{

    position:
        relative;

    grid-column:
        1 / -1;

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    overflow:
        hidden;

    border:
        0;

    border-radius:
        0;

    background:
        var(--ere-contact-dark);

    color:
        var(--ere-contact-white);

    cursor:
        pointer;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

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

}


/* shine */

.ere-contact-submit::before{

    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        -45%;

    width:
        30%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.14),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .55s ease;

}


.ere-contact-submit:hover::before{

    left:
        120%;

}


.ere-contact-submit:hover{

    background:
        #191b1d;

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 30px rgba(17,19,21,.18);

}


.ere-contact-submit > *{

    position:
        relative;

    z-index:
        2;

}


.ere-contact-submit > i{

    color:
        var(--ere-contact-gold-light);

    transition:
        transform .25s ease;

}


.ere-contact-submit:hover > i{

    transform:
        translateX(4px);

}


.ere-contact-submit:disabled{

    opacity:
        .7;

    cursor:
        not-allowed;

    transform:
        none;

}


/* ============================================================
   15. AJAX SPINNER
============================================================ */

.ere-contact-spinner,
.spinner-border{

    width:
        14px;

    height:
        14px;

    display:
        inline-block;

    border:
        2px solid currentColor;

    border-right-color:
        transparent;

    border-radius:
        50%;

    animation:
        ereContactSpinner
        .7s
        linear
        infinite;

}


@keyframes ereContactSpinner{

    to{

        transform:
            rotate(360deg);

    }

}


/* ============================================================
   16. DIRECT CONTACT CTA
============================================================ */

.ere-contact-direct-section{

    padding:
        0 0 105px;

    background:
        var(--ere-contact-cream);

}


.ere-contact-direct{

    position:
        relative;

    overflow:
        hidden;

    padding:
        60px 64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        55px;

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(185,154,93,.15),
            transparent 27%
        ),

        var(--ere-contact-dark);

}


/* circle */

.ere-contact-direct::before{

    content:
        "";

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    right:
        7%;

    top:
        -190px;

    border:
        1px solid rgba(185,154,93,.11);

    border-radius:
        50%;

    pointer-events:
        none;

}


.ere-contact-direct > div,
.ere-contact-direct > a{

    position:
        relative;

    z-index:
        2;

}


.ere-contact-direct > div{

    max-width:
        730px;

}


.ere-contact-direct > div > span{

    color:
        var(--ere-contact-gold-light);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;

}


.ere-contact-direct h2{

    margin:
        12px 0 0;

    color:
        var(--ere-contact-white);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            36px,
            4vw,
            53px
        );

    font-weight:
        500;

    line-height:
        1.08;

}


.ere-contact-direct h2 em{

    color:
        var(--ere-contact-gold-light);

    font-weight:
        400;

    font-style:
        italic;

}


.ere-contact-direct p{

    max-width:
        620px;

    margin:
        19px 0 0;

    color:
        #9b9da0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        12px;

    line-height:
        1.8;

}


/* ============================================================
   CTA PHONE
============================================================ */

.ere-contact-direct > a{

    min-width:
        260px;

    box-sizing:
        border-box;

    padding:
        19px 22px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    background:
        var(--ere-contact-gold);

    color:
        var(--ere-contact-dark);

    text-decoration:
        none;

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

}


.ere-contact-direct > a:hover{

    background:
        var(--ere-contact-gold-light);

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.20);

}


.ere-contact-direct > a > span{

    width:
        44px;

    height:
        44px;

    flex:
        0 0 44px;

    display:
        grid;

    place-items:
        center;

    background:
        var(--ere-contact-dark);

    color:
        var(--ere-contact-white);

}


.ere-contact-direct > a small{

    display:
        block;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;

}


.ere-contact-direct > a strong{

    display:
        block;

    margin-top:
        3px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        14px;

    font-weight:
        800;

}


/* ============================================================
   17. SWEETALERT
============================================================ */

.swal2-popup.alerta-contacto{

    border-radius:
        0 !important;

    border-top:
        4px solid var(--ere-contact-gold) !important;

    padding:
        38px 30px 30px !important;

    box-shadow:
        0 35px 90px rgba(0,0,0,.20) !important;

    font-family:
        "Manrope",
        sans-serif !important;

}


.alerta-contacto
.swal2-title{

    color:
        var(--ere-contact-dark) !important;

    font-family:
        "Playfair Display",
        serif !important;

    font-size:
        29px !important;

    font-weight:
        600 !important;

}


.alerta-contacto
.swal2-html-container{

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        13px !important;

    line-height:
        1.7 !important;

}


.alerta-contacto
.swal2-confirm{

    min-width:
        150px;

    padding:
        13px 22px !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

}


/* ============================================================
   18. SCROLL ANIMATIONS
   LAS ACTIVARÁ EL JAVASCRIPT
============================================================ */

.ere-contact-reveal{

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.75,.2,1);

}


.ere-contact-reveal.ere-contact-visible{

    opacity:
        1;

    transform:
        translateY(0);

}


.ere-contact-reveal-left{

    opacity:
        0;

    transform:
        translateX(-30px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.75,.2,1);

}


.ere-contact-reveal-left.ere-contact-visible{

    opacity:
        1;

    transform:
        translateX(0);

}


.ere-contact-reveal-right{

    opacity:
        0;

    transform:
        translateX(30px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.75,.2,1);

}


.ere-contact-reveal-right.ere-contact-visible{

    opacity:
        1;

    transform:
        translateX(0);

}


/* ============================================================
   19. TABLET
============================================================ */

@media(max-width:1100px){

    .ere-contact-layout{

        grid-template-columns:
            minmax(0,1fr)
            minmax(390px,.88fr);

        gap:
            45px;

    }


    .ere-contact-property-card{

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

    }


    .ere-contact-form-panel{

        padding:
            39px 31px;

    }


    .ere-contact-direct{

        padding:
            52px 43px;

    }

}


/* ============================================================
   20. TABLET / MOBILE
============================================================ */

@media(max-width:900px){

    .ere-contact-page{

padding-top: 0;

}


    .ere-contact-container{

        width:
            calc(100% - 32px);

    }


    /* HERO */

    .ere-contact-breadcrumb-section{

        min-height:
            420px;

    }


    .ere-contact-breadcrumb-inner{

        min-height:
            420px;

        padding:
            62px 0 48px;

    }


    .ere-contact-breadcrumb-content{

        max-width:
            720px;

    }


    .ere-contact-breadcrumb-property{

        display:
            none;

    }


    /* MAIN */

    .ere-contact-main-section{

        padding:
            78px 0 88px;

    }


    .ere-contact-main-section::before{

        display:
            none;

    }


    .ere-contact-layout{

        display:
            block;

    }


    .ere-contact-information{

        margin-bottom:
            55px;

    }


    /* FORM */

    .ere-contact-form-panel{

        position:
            relative;

        top:
            auto;

    }


    /* CTA */

    .ere-contact-direct{

        display:
            block;

    }


    .ere-contact-direct > a{

        width:
            max-content;

        max-width:
            100%;

        margin-top:
            32px;

    }

}


/* ============================================================
   21. MOBILE
============================================================ */

@media(max-width:680px){

    .ere-contact-page{

padding-top: 0;

}


    .ere-contact-container{

        width:
            calc(100% - 24px);

    }


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

    .ere-contact-breadcrumb-section{

        min-height:
            365px;

    }


    .ere-contact-breadcrumb-inner{

        min-height:
            365px;

        padding:
            48px 0 37px;

    }


    .ere-contact-breadcrumb-bg img{

        object-position:
            center center;

    }


    .ere-contact-breadcrumb-eyebrow{

        margin-bottom:
            15px;

        gap:
            10px;

        font-size:
            9px;

        letter-spacing:
            1.8px;

    }


    .ere-contact-breadcrumb-line{

        width:
            30px;

        flex-basis:
            30px;

    }


    .ere-contact-breadcrumb-content h1{

        font-size:
            43px;

        line-height:
            1.02;

        letter-spacing:
            -1.2px;

    }


    .ere-contact-breadcrumb-content > p{

        margin-top:
            18px;

        font-size:
            12px;

        line-height:
            1.7;

    }


    .ere-contact-breadcrumb-nav{

        margin-top:
            27px;

        gap:
            7px;

        font-size:
            9px;

    }


    .ere-contact-breadcrumb-nav a,
    .ere-contact-breadcrumb-nav > span{

        font-size:
            9px;

    }


    .ere-contact-breadcrumb-pattern{

        width:
            320px;

        height:
            320px;

        right:
            -145px;

        top:
            -165px;

    }


    .ere-contact-breadcrumb-pattern::before{

        width:
            220px;

        height:
            220px;

        left:
            49px;

        top:
            49px;

    }


    .ere-contact-breadcrumb-pattern::after{

        width:
            130px;

        height:
            130px;

        left:
            94px;

        top:
            94px;

    }


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

    .ere-contact-main-section{

        padding:
            58px 0 70px;

    }


    .ere-contact-intro{

        margin-bottom:
            34px;

    }


    .ere-contact-intro h2{

        font-size:
            39px;

    }


    .ere-contact-intro p{

        font-size:
            13px;

    }


    /* ========================================================
       PROPERTY CARD
    ======================================================== */

    .ere-contact-property-card{

        display:
            block;

    }


    .ere-contact-property-image{

        min-height:
            235px;

    }


    .ere-contact-property-image img{

        min-height:
            235px;

    }


    .ere-contact-property-content{

        padding:
            24px 21px;

    }


    .ere-contact-property-content h3 a{

        font-size:
            25px;

    }


    .ere-contact-property-bottom{

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    /* ========================================================
       CONTACT INFO
    ======================================================== */

    .ere-contact-detail{

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

        gap:
            13px;

        padding:
            18px 15px;

    }


    .ere-contact-detail > span{

        width:
            43px;

        height:
            43px;

    }


    .ere-contact-detail strong{

        font-size:
            11px;

    }


    /* ========================================================
       FORM
    ======================================================== */

    .ere-contact-form-panel{

        padding:
            33px 20px 25px;

    }


    .ere-contact-form-heading h2{

        font-size:
            33px;

    }


    .ere-contact-form{

        grid-template-columns:
            1fr;

        gap:
            19px;

    }


    .ere-contact-field,
    .ere-contact-field-full,
    .ere-contact-form-reference,
    .ere-contact-form-security,
    .ere-contact-submit{

        grid-column:
            1;

    }


    .ere-contact-form input,
    .ere-contact-form select{

        height:
            55px;

    }


    .ere-contact-submit{

        min-height:
            58px;

    }


    /* ========================================================
       CTA
    ======================================================== */

    .ere-contact-direct-section{

        padding-bottom:
            74px;

    }


    .ere-contact-direct{

        padding:
            40px 23px;

    }


    .ere-contact-direct h2{

        font-size:
            36px;

    }


    .ere-contact-direct > a{

        width:
            100%;

        min-width:
            0;

        box-sizing:
            border-box;

    }

}


/* ============================================================
   22. SMALL PHONE
============================================================ */

@media(max-width:390px){

    .ere-contact-breadcrumb-content h1{

        font-size:
            39px;

    }


    .ere-contact-intro h2{

        font-size:
            35px;

    }


    .ere-contact-form-heading h2{

        font-size:
            30px;

    }


    .ere-contact-property-top{

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            5px;

    }


    .ere-contact-property-content h3 a{

        font-size:
            23px;

    }

}


/* ============================================================
   23. REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

    .ere-contact-page *,
    .ere-contact-page *::before,
    .ere-contact-page *::after{

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }


    .ere-contact-reveal,
    .ere-contact-reveal-left,
    .ere-contact-reveal-right{

        opacity:
            1 !important;

        transform:
            none !important;

    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   MAPA DE PROPIEDADES
============================================================ */

@import url("https://unpkg.com/leaflet@1.9.4/dist/leaflet.css");


:root{

    --ere-map-black:#090a0b;
    --ere-map-dark:#111315;
    --ere-map-dark-soft:#181a1d;

    --ere-map-gold:#b99a5d;
    --ere-map-gold-light:#d8bc7d;

    --ere-map-white:#ffffff;

    --ere-map-cream:#f7f5f0;
    --ere-map-cream-dark:#eeece7;

    --ere-map-text:#242629;
    --ere-map-muted:#7d8084;

    --ere-map-border:rgba(17,19,21,.11);

    --ere-map-shadow:
        0 20px 55px rgba(10,12,14,.08);

    --ere-map-shadow-lg:
        0 30px 80px rgba(10,12,14,.15);

}


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

.ere-map-page{

width:100%;

overflow:hidden;

background:
        var(--ere-map-cream);

color:
        var(--ere-map-text);
}


.ere-map-container{

    width:calc(100% - 48px);

    max-width:1380px;

    margin:0 auto;

    box-sizing:border-box;

}


.ere-map-container-wide{

    max-width:1500px;

}


/* ============================================================
   BREADCRUMB
============================================================ */

.ere-map-breadcrumb{

    position:relative;

    isolation:isolate;

    min-height:440px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        var(--ere-map-dark);

}


.ere-map-breadcrumb-bg{

    position:absolute;

    z-index:-3;

    inset:0;

}


.ere-map-breadcrumb-bg img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    animation:
        ereMapHeroImage
        1.6s
        ease
        both;

}


@keyframes ereMapHeroImage{

    from{

        opacity:.65;

        transform:scale(1.08);

    }

    to{

        opacity:1;

        transform:scale(1.02);

    }

}


.ere-map-breadcrumb-overlay{

    position:absolute;

    z-index:-2;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(7,8,9,.94) 0%,
            rgba(7,8,9,.85) 36%,
            rgba(7,8,9,.63) 68%,
            rgba(7,8,9,.48) 100%
        );

}


.ere-map-breadcrumb::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:3px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #b99a5d,
            #d8bc7d,
            #b99a5d,
            transparent
        );

}


.ere-map-breadcrumb-decoration{

    position:absolute;

    z-index:-1;

    width:570px;
    height:570px;

    right:-100px;
    top:-330px;

    border:
        1px solid rgba(216,188,125,.13);

    border-radius:50%;

}


.ere-map-breadcrumb-decoration::before{

    content:"";

    position:absolute;

    width:390px;
    height:390px;

    top:89px;
    left:89px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:50%;

}


.ere-map-breadcrumb-inner{

    max-width:820px;

    padding:70px 0 55px;

    animation:
        ereMapHeroContent
        .9s
        cubic-bezier(.2,.75,.2,1)
        both;

}


@keyframes ereMapHeroContent{

    from{

        opacity:0;

        transform:
            translateY(28px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


.ere-map-eyebrow{

    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:18px;

    color:
        var(--ere-map-gold-light);

    font-family:
        "Manrope",
        sans-serif;

    font-size:10px;

    font-weight:800;

    letter-spacing:2.3px;

    text-transform:uppercase;

}


.ere-map-eyebrow > span{

    width:38px;
    height:1px;

    background:
        var(--ere-map-gold);

}


.ere-map-breadcrumb h1{

    margin:0;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(52px,5.2vw,79px);

    font-weight:500;

    line-height:1.01;

    letter-spacing:-2px;

}


.ere-map-breadcrumb h1 em{

    display:block;

    color:
        var(--ere-map-gold-light);

    font-weight:400;

}


.ere-map-breadcrumb p{

    max-width:650px;

    margin:22px 0 0;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:14px;

    line-height:1.8;

}


.ere-map-breadcrumb-nav{

    display:flex;

    align-items:center;

    gap:9px;

    margin-top:30px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:10px;

}


.ere-map-breadcrumb-nav a{

    display:inline-flex;

    align-items:center;

    gap:7px;

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

    text-decoration:none;

}


.ere-map-breadcrumb-nav a:hover{

    color:
        var(--ere-map-gold-light);

}


.ere-map-breadcrumb-nav > i{

    color:
        rgba(216,188,125,.60);

    font-size:7px;

}


.ere-map-breadcrumb-nav > span{

    color:#fff;

    font-weight:700;

}


/* ============================================================
   INTRO
============================================================ */

.ere-map-intro-section{

    padding:
        85px 0 55px;

}


.ere-map-intro-grid{

    display:grid;

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

    align-items:end;

    gap:60px;

}


.ere-map-intro-copy{

    max-width:680px;

}


.ere-map-intro-copy > span{

    color:
        var(--ere-map-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.ere-map-intro-copy h2{

    margin:12px 0 0;

    color:
        var(--ere-map-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(40px,4vw,60px);

    font-weight:500;

    line-height:1.04;

}


.ere-map-intro-copy h2 em{

    color:
        var(--ere-map-gold);

    font-weight:400;

}


.ere-map-intro-copy p{

    max-width:600px;

    margin:19px 0 0;

    color:
        var(--ere-map-muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size:13px;

    line-height:1.8;

}


/* ============================================================
   STATS
============================================================ */

.ere-map-stats{

    display:flex;

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

    background:#fff;

}


.ere-map-stat{

    min-width:120px;

    padding:
        22px 25px;

    text-align:center;

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

}


.ere-map-stat:last-child{

    border-right:0;

}


.ere-map-stat strong{

    display:block;

    color:
        var(--ere-map-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:28px;

    line-height:1;

}


.ere-map-stat span{

    display:block;

    margin-top:7px;

    color:#909397;

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    font-weight:800;

    letter-spacing:.8px;

    text-transform:uppercase;

}


/* ============================================================
   FILTERS
============================================================ */

.ere-map-filter-section{

    position:relative;

    z-index:10;

    padding-bottom:28px;

}


.ere-map-filter-bar{

    display:grid;

    grid-template-columns:
        minmax(250px,1.5fr)
        minmax(170px,.75fr)
        minmax(170px,.75fr)
        minmax(210px,1fr)
        auto;

    gap:1px;

    background:#dcdad4;

    border:
        1px solid #dcdad4;

    box-shadow:
        0 18px 45px rgba(10,12,14,.07);

}


.ere-map-filter-search,
.ere-map-filter-select{

    position:relative;

    background:#fff;

}


.ere-map-filter-search > i,
.ere-map-filter-select > i:first-child{

    position:absolute;

    left:18px;
    top:50%;

    transform:
        translateY(-50%);

    color:
        var(--ere-map-gold);

    font-size:11px;

    pointer-events:none;

}


.ere-map-filter-select > i:last-child{

    position:absolute;

    right:17px;
    top:50%;

    transform:
        translateY(-50%);

    color:
        var(--ere-map-gold);

    font-size:9px;

    pointer-events:none;

}


.ere-map-filter-bar input,
.ere-map-filter-bar select{

    width:100%;
    height:62px;

    box-sizing:border-box;

    outline:0;
    border:0;

    background:#fff;

    color:
        var(--ere-map-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:11px;

}


.ere-map-filter-bar input{

    padding:
        0 18px 0 45px;

}


.ere-map-filter-bar select{

    padding:
        0 40px 0 43px;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;

}


.ere-map-filter-bar input:focus,
.ere-map-filter-bar select:focus{

    box-shadow:
        inset 0 -2px 0
        var(--ere-map-gold);

}


.ere-map-reset{

    min-width:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:0 20px;

    border:0;

    background:
        var(--ere-map-dark);

    color:#fff;

    cursor:pointer;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

    transition:
        background .25s ease;

}


.ere-map-reset:hover{

    background:
        var(--ere-map-gold);

    color:
        var(--ere-map-dark);

}


/* ============================================================
   MAP EXPERIENCE
============================================================ */

.ere-map-experience-section{

    padding:
        0 0 100px;

}


.ere-map-experience{

    min-height:720px;

    display:grid;

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

    background:#fff;

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

    box-shadow:
        var(--ere-map-shadow-lg);

}


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

.ere-map-sidebar{

    min-width:0;

    background:
        #f5f3ee;

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

}


.ere-map-sidebar-head{

    min-height:79px;

    padding:
        0 22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    background:
        var(--ere-map-dark);

}


.ere-map-sidebar-head span{

    display:block;

    margin-bottom:3px;

    color:
        var(--ere-map-gold-light);

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;

}


.ere-map-sidebar-head strong{

    color:#fff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:13px;

}


.ere-map-sidebar-head button{

    width:39px;
    height:39px;

    flex:0 0 39px;

    border:
        1px solid rgba(255,255,255,.16);

    background:
        rgba(255,255,255,.04);

    color:
        var(--ere-map-gold-light);

    cursor:pointer;

    transition:
        background .25s ease;

}


.ere-map-sidebar-head button:hover{

    background:
        var(--ere-map-gold);

    color:
        var(--ere-map-dark);

}


/* ============================================================
   PROPERTY LIST
============================================================ */

.ere-map-property-list{

    height:641px;

    overflow-y:auto;

    overscroll-behavior:contain;

}


.ere-map-property-list::-webkit-scrollbar{

    width:5px;

}


.ere-map-property-list::-webkit-scrollbar-track{

    background:#eceae5;

}


.ere-map-property-list::-webkit-scrollbar-thumb{

    background:#c0aa7d;

}


/* ============================================================
   MAP PROPERTY CARD
============================================================ */

.ere-map-card{

    position:relative;

    padding:18px;

    display:grid;

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

    gap:16px;

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

    background:#fff;

    cursor:pointer;

    transition:
        background .25s ease,
        box-shadow .25s ease;

}


.ere-map-card:hover,
.ere-map-card.is-active{

    background:#faf7f0;

    box-shadow:
        inset 3px 0 0
        var(--ere-map-gold);

}


.ere-map-card-image{

    position:relative;

    height:118px;

    overflow:hidden;

    background:
        var(--ere-map-dark);

}


.ere-map-card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .4s ease;

}


.ere-map-card:hover
.ere-map-card-image img{

    transform:
        scale(1.05);

}


.ere-map-card-no-image{

    width:100%;
    height:100%;

    display:grid;

    place-items:center;

    color:
        var(--ere-map-gold);

}


.ere-map-card-operation{

    display:inline-flex;

    margin-bottom:7px;

    color:
        var(--ere-map-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    font-weight:800;

    letter-spacing:.7px;

    text-transform:uppercase;

}


.ere-map-card h3{

    margin:0;

    color:
        var(--ere-map-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:19px;

    font-weight:600;

    line-height:1.15;

}


.ere-map-card-subtitle{

    display:block;

    margin-top:3px;

    color:#888b8e;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

}


.ere-map-card-location{

    display:flex;

    align-items:flex-start;

    gap:6px;

    margin-top:9px;

    color:#94979a;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    line-height:1.5;

}


.ere-map-card-location i{

    margin-top:2px;

    color:
        var(--ere-map-gold);

}


.ere-map-card-price{

    display:block;

    margin-top:10px;

    color:
        var(--ere-map-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:12px;

    font-weight:800;

}


.ere-map-card-code{

    position:absolute;

    top:18px;
    right:17px;

    color:#aaa;

    font-family:
        "Manrope",
        sans-serif;

    font-size:7px;

}


/* ============================================================
   EMPTY
============================================================ */

.ere-map-empty{

    padding:65px 30px;

    text-align:center;

}


.ere-map-empty > span{

    width:58px;
    height:58px;

    margin:0 auto 18px;

    display:grid;

    place-items:center;

    background:
        rgba(185,154,93,.10);

    color:
        var(--ere-map-gold);

    font-size:20px;

}


.ere-map-empty h3{

    margin:0;

    color:
        var(--ere-map-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:23px;

}


.ere-map-empty p{

    margin:10px 0 18px;

    color:
        var(--ere-map-muted);

    font-family:
        "Manrope",
        sans-serif;

    font-size:11px;

    line-height:1.7;

}


.ere-map-empty button{

    padding:12px 18px;

    border:0;

    background:
        var(--ere-map-dark);

    color:#fff;

    cursor:pointer;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

}


/* ============================================================
   MAP COLUMN
============================================================ */

.ere-map-map-column{

    position:relative;

    min-width:0;

}


.ere-map-map-toolbar{

    min-height:79px;

    padding:
        0 22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    background:#fff;

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

}


.ere-map-map-toolbar > div{

    display:flex;

    align-items:center;

    gap:9px;

    color:#707377;

    font-family:
        "Manrope",
        sans-serif;

    font-size:10px;

    font-weight:700;

}


.ere-map-live-dot{

    width:8px;
    height:8px;

    display:block;

    border-radius:50%;

    background:
        var(--ere-map-gold);

    box-shadow:
        0 0 0
        5px rgba(185,154,93,.12);

}


.ere-map-map-toolbar button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:11px 15px;

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

    background:#fff;

    color:
        var(--ere-map-dark);

    cursor:pointer;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

}


.ere-map-map-toolbar button i{

    color:
        var(--ere-map-gold);

}


/* ============================================================
   MAP
============================================================ */

.ere-map-map-wrap{

    position:relative;

    height:641px;

}


.ere-properties-map{

    width:100%;
    height:100%;

    background:
        #ddd;

}


/* LEAFLET */

.ere-properties-map .leaflet-control-zoom{

    border:0 !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.14) !important;

}


.ere-properties-map
.leaflet-control-zoom a{

    width:38px;
    height:38px;

    line-height:38px;

    border:0 !important;

    background:#111315;

    color:#d8bc7d;

}


.ere-properties-map
.leaflet-control-zoom a:hover{

    background:#b99a5d;

    color:#111315;

}


.ere-properties-map
.leaflet-control-attribution{

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

}


/* ============================================================
   CUSTOM MARKER
============================================================ */

.ere-map-marker{

    position:relative;

    width:42px;
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        3px solid #fff;

    border-radius:
        50% 50% 50% 10%;

    background:
        var(--ere-map-gold);

    color:
        var(--ere-map-dark);

    box-shadow:
        0 8px 22px rgba(0,0,0,.28);

    transform:
        rotate(-45deg);

    transition:
        transform .25s ease,
        background .25s ease;

}


.ere-map-marker > span{

    font-family:
        "Playfair Display",
        serif;

    font-size:16px;

    font-weight:700;

    transform:
        rotate(45deg);

}


.ere-map-marker.is-active{

    background:
        var(--ere-map-dark);

    color:
        var(--ere-map-gold-light);

    transform:
        rotate(-45deg)
        scale(1.18);

}


/* ============================================================
   POPUP
============================================================ */

.ere-properties-map
.leaflet-popup-content-wrapper{

    padding:0;

    overflow:hidden;

    border-radius:0;

    box-shadow:
        0 25px 70px rgba(0,0,0,.24);

}


.ere-properties-map
.leaflet-popup-content{

    width:290px !important;

    margin:0;

}


.ere-map-popup{

    background:#fff;

}


.ere-map-popup-image{

    height:150px;

    overflow:hidden;

    background:
        var(--ere-map-dark);

}


.ere-map-popup-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}


.ere-map-popup-image-no{

    height:100%;

    display:grid;

    place-items:center;

    color:
        var(--ere-map-gold);

}


.ere-map-popup-body{

    padding:19px;

}


.ere-map-popup-operation{

    display:block;

    margin-bottom:7px;

    color:
        var(--ere-map-gold);

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    font-weight:800;

    text-transform:uppercase;

}


.ere-map-popup h3{

    margin:0;

    color:
        var(--ere-map-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:22px;

    line-height:1.15;

}


.ere-map-popup-subtitle{

    display:block;

    margin-top:4px;

    color:#888;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

}


.ere-map-popup-location{

    margin-top:11px;

    color:#8d9093;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    line-height:1.6;

}


.ere-map-popup-price{

    display:block;

    margin-top:13px;

    color:
        var(--ere-map-dark);

    font-family:
        "Manrope",
        sans-serif;

    font-size:14px;

    font-weight:800;

}


.ere-map-popup-actions{

    margin-top:15px;

    display:grid;

    grid-template-columns:
        1fr auto;

    gap:1px;

    background:
        var(--ere-map-border);

}


.ere-map-popup-actions a{

    min-height:43px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 14px;

    background:
        var(--ere-map-dark);

    color:#fff;

    text-decoration:none;

    font-family:
        "Manrope",
        sans-serif;

    font-size:8px;

    font-weight:800;

    text-transform:uppercase;

}


.ere-map-popup-actions a:last-child{

    background:
        var(--ere-map-gold);

    color:
        var(--ere-map-dark);

}


/* ============================================================
   LEGEND
============================================================ */

.ere-map-legend{

    position:absolute;

    z-index:500;

    left:20px;
    bottom:20px;

    padding:13px 15px;

    background:
        rgba(17,19,21,.92);

    color:#fff;

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

    backdrop-filter:
        blur(10px);

}


.ere-map-legend > div{

    display:flex;

    align-items:center;

    gap:9px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    font-weight:700;

}


.ere-map-legend-pin{

    width:25px;
    height:25px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        var(--ere-map-gold);

    color:
        var(--ere-map-dark);

    font-family:
        "Playfair Display",
        serif;

    font-weight:700;

}


.ere-map-legend small{

    display:block;

    margin-top:6px;

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

    font-family:
        "Manrope",
        sans-serif;

    font-size:7px;

}


/* ============================================================
   CTA
============================================================ */

.ere-map-cta-section{

    padding:
        0 0 105px;

}


.ere-map-cta{

    padding:
        58px 62px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    background:
        var(--ere-map-dark);

}


.ere-map-cta > div{

    max-width:720px;

}


.ere-map-cta > div > span{

    color:
        var(--ere-map-gold-light);

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.6px;

    text-transform:uppercase;

}


.ere-map-cta h2{

    margin:11px 0 0;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(35px,4vw,52px);

    font-weight:500;

    line-height:1.08;

}


.ere-map-cta h2 em{

    color:
        var(--ere-map-gold-light);

    font-weight:400;

}


.ere-map-cta p{

    margin:17px 0 0;

    color:#a1a3a5;

    font-family:
        "Manrope",
        sans-serif;

    font-size:12px;

    line-height:1.8;

}


.ere-map-cta > a{

    flex:0 0 auto;

    min-height:55px;

    padding:0 24px;

    display:flex;

    align-items:center;

    gap:12px;

    background:
        var(--ere-map-gold);

    color:
        var(--ere-map-dark);

    text-decoration:none;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

}


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

@media(max-width:1100px){

    .ere-map-filter-bar{

        grid-template-columns:
            1.4fr
            .8fr
            .8fr;

    }


    .ere-map-filter-select:nth-of-type(3){

        grid-column:
            span 2;

    }


    .ere-map-reset{

        min-height:62px;

    }


    .ere-map-experience{

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

    }


    .ere-map-card{

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

    }

}


/* ============================================================
   900
============================================================ */

@media(max-width:900px){

    .ere-map-page{

padding-top: 0;

}


    .ere-map-container{

        width:
            calc(100% - 32px);

    }


    .ere-map-intro-grid{

        grid-template-columns:
            1fr;

        gap:30px;

    }


    .ere-map-stats{

        width:max-content;

        max-width:100%;

    }


    .ere-map-filter-bar{

        grid-template-columns:
            1fr 1fr;

    }


    .ere-map-filter-search{

        grid-column:
            1 / -1;

    }


    .ere-map-reset{

        min-height:62px;

    }


    .ere-map-experience{

        min-height:auto;

        display:flex;

        flex-direction:column;

    }


    .ere-map-map-column{

        order:1;

    }


    .ere-map-sidebar{

        order:2;

        border-right:0;

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

    }


    .ere-map-map-wrap{

        height:550px;

    }


    .ere-map-property-list{

        height:auto;

        max-height:650px;

    }


    .ere-map-cta{

        display:block;

    }


    .ere-map-cta > a{

        width:max-content;

        max-width:100%;

        margin-top:30px;

    }

}


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

@media(max-width:680px){

    .ere-map-page{

padding-top: 0;

}


    .ere-map-container{

        width:
            calc(100% - 24px);

    }


    .ere-map-breadcrumb{

        min-height:350px;

    }


    .ere-map-breadcrumb-inner{

        padding:
            48px 0 38px;

    }


    .ere-map-breadcrumb h1{

        font-size:42px;

        letter-spacing:-1px;

    }


    .ere-map-breadcrumb p{

        font-size:12px;

    }


    .ere-map-intro-section{

        padding:
            58px 0 40px;

    }


    .ere-map-intro-copy h2{

        font-size:39px;

    }


    .ere-map-stats{

        width:100%;

    }


    .ere-map-stat{

        min-width:0;

        flex:1;

        padding:
            18px 10px;

    }


    .ere-map-stat strong{

        font-size:24px;

    }


    .ere-map-filter-bar{

        grid-template-columns:
            1fr;

    }


    .ere-map-filter-search,
    .ere-map-filter-select,
    .ere-map-reset{

        grid-column:
            auto !important;

    }


    .ere-map-map-toolbar{

        min-height:68px;

        padding:
            0 14px;

    }


    .ere-map-map-toolbar button span{

        display:none;

    }


    .ere-map-map-wrap{

        height:470px;

    }


    .ere-map-legend{

        left:12px;
        bottom:12px;

    }


    .ere-map-card{

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

        padding:15px;

        gap:13px;

    }


    .ere-map-card-code{

        display:none;

    }


    .ere-map-card-image{

        height:110px;

    }


    .ere-map-sidebar-head{

        padding:
            0 16px;

    }


    .ere-map-cta-section{

        padding-bottom:75px;

    }


    .ere-map-cta{

        padding:
            40px 23px;

    }


    .ere-map-cta h2{

        font-size:36px;

    }


    .ere-map-cta > a{

        width:100%;

        box-sizing:border-box;

        justify-content:center;

    }

}


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

@media(max-width:390px){

    .ere-map-breadcrumb h1{

        font-size:38px;

    }


    .ere-map-stat span{

        font-size:7px;

    }


    .ere-map-card{

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

    }


    .ere-map-card-image{

        height:100px;

    }


    .ere-map-card h3{

        font-size:17px;

    }

}

/* ============================================================
   LEAFLET MAP FIX
============================================================ */

.ere-map-map-wrap{
    position:relative;
    width:100%;
    height:641px;
    min-height:641px;
    overflow:hidden;
}


#erePropertiesMap,
.ere-properties-map{
    position:absolute;
    inset:0;

    width:100% !important;
    height:100% !important;

    min-width:0;
    min-height:0;

    z-index:1;

    background:#dedede;
}


/* Leaflet necesita estos elementos posicionados correctamente */

.ere-properties-map .leaflet-pane,
.ere-properties-map .leaflet-tile,
.ere-properties-map .leaflet-marker-icon,
.ere-properties-map .leaflet-marker-shadow,
.ere-properties-map .leaflet-tile-container,
.ere-properties-map .leaflet-pane > svg,
.ere-properties-map .leaflet-pane > canvas{
    position:absolute;
    left:0;
    top:0;
}


.ere-properties-map .leaflet-container{
    width:100%;
    height:100%;
}


.ere-properties-map .leaflet-tile{
    max-width:none !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
}


/*
   MUY IMPORTANTE:
   Muchos CSS generales tienen:

   img{
       max-width:100%;
   }

   Eso rompe los tiles de Leaflet.
*/

.ere-properties-map img{
    max-width:none !important;
}


/* panes */

.ere-properties-map .leaflet-map-pane,
.ere-properties-map .leaflet-tile-pane,
.ere-properties-map .leaflet-overlay-pane,
.ere-properties-map .leaflet-shadow-pane,
.ere-properties-map .leaflet-marker-pane,
.ere-properties-map .leaflet-tooltip-pane,
.ere-properties-map .leaflet-popup-pane{
    position:absolute;
    left:0;
    top:0;
}


/* controls */

.ere-properties-map .leaflet-control-container{
    position:relative;
    z-index:800;
}


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

@media(max-width:900px){

    .ere-map-map-wrap{
        height:550px;
        min-height:550px;
    }

}


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

@media(max-width:680px){

    .ere-map-map-wrap{
        height:470px;
        min-height:470px;
    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   NOSOTROS - CSS AISLADO / FUTURISTIC APP
   IMPORTANTE:
   Todo este bloque queda encapsulado dentro de .ere-about-page
   para no heredar ni contaminar el About del Home.
============================================================ */

/* ============================================================
   01. VARIABLES LOCALES
============================================================ */

.ere-about-page {
    --ea-black: #07090c;
    --ea-black-soft: #0d1014;
    --ea-dark: #11151a;
    --ea-dark-2: #171c23;
    --ea-dark-3: #202733;

    --ea-gold: #b99a5d;
    --ea-gold-light: #d8bc7d;
    --ea-gold-pale: #efe2c7;

    --ea-blue: #8294d8;
    --ea-blue-soft: rgba(130,148,216,.14);

    --ea-white: #ffffff;
    --ea-cream: #f6f2eb;
    --ea-cream-2: #eee8de;
    --ea-text: #23272c;
    --ea-muted: #737980;
    --ea-border: rgba(17,19,21,.10);

    --ea-shadow-sm: 0 14px 36px rgba(10,12,14,.08);
    --ea-shadow: 0 24px 60px rgba(10,12,14,.11);
    --ea-shadow-lg: 0 38px 95px rgba(10,12,14,.17);

    --ea-radius: 28px;
    --ea-radius-sm: 20px;

    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip;
    background: var(--ea-cream);
    color: var(--ea-text);
    font-family: 'Manrope', sans-serif;
}

.ere-about-page,
.ere-about-page *,
.ere-about-page *::before,
.ere-about-page *::after {
    box-sizing: border-box;
}

.ere-about-page img {
    display: block;
    max-width: 100%;
}

.ere-about-page a {
    text-decoration: none;
}

/* ============================================================
   02. CONTAINER - RESET DEL CONFLICTO DEL HOME
============================================================ */

.ere-about-page .ere-about-container {
    position: relative;
    z-index: 3;

    width: min(calc(100% - 56px), 1420px);
    max-width: 1420px;
    min-width: 0;

    margin-inline: auto;
    padding: 0;

    /* CRÍTICO: elimina el grid heredado de .ere-about-container
       que utiliza la sección About del Home. */
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    align-items: initial;
    justify-items: initial;
    gap: 0;
}

/* ============================================================
   03. HERO / BREADCRUMB
   El hero NO agrega padding para compensar el header.
   El header ya existe antes del <main> en el flujo inicial.
============================================================ */

.ere-about-page .ere-about-breadcrumb {
    position: relative;
    isolation: isolate;

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

    margin: 0;
    padding: 0;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: var(--ea-black);
}

.ere-about-page .ere-about-breadcrumb-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.ere-about-page .ere-about-breadcrumb-bg img {
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center 58%;

    transform: scale(1.07) translate3d(0, var(--ea-parallax-y, 0px), 0);
    will-change: transform;

    filter: saturate(.96) contrast(1.03);
}

.ere-about-page .ere-about-breadcrumb-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            100deg,
            rgba(4,6,8,.95) 0%,
            rgba(6,9,12,.88) 30%,
            rgba(8,12,17,.66) 59%,
            rgba(9,13,18,.38) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.28) 100%
        ),
        radial-gradient(
            circle at 79% 18%,
            rgba(216,188,125,.14),
            transparent 25%
        );
}

.ere-about-page .ere-about-breadcrumb-decoration {
    position: absolute;
    z-index: 2;

    width: 740px;
    height: 740px;

    top: -250px;
    right: -160px;

    border: 1px solid rgba(216,188,125,.12);
    border-radius: 50%;

    pointer-events: none;
}

.ere-about-page .ere-about-breadcrumb-decoration::before,
.ere-about-page .ere-about-breadcrumb-decoration::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.ere-about-page .ere-about-breadcrumb-decoration::before {
    inset: 105px;
    border: 1px solid rgba(255,255,255,.055);
}

.ere-about-page .ere-about-breadcrumb-decoration::after {
    inset: 220px;
    border: 1px solid rgba(130,148,216,.11);
}

.ere-about-page .ere-about-breadcrumb::after {
    content: '';
    position: absolute;
    z-index: 5;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(185,154,93,.28) 14%,
        var(--ea-gold-light) 37%,
        rgba(130,148,216,.75) 50%,
        var(--ea-gold-light) 63%,
        rgba(185,154,93,.28) 86%,
        transparent 100%
    );
}

/* ============================================================
   04. HERO GRID
============================================================ */

.ere-about-page .ere-about-hero-grid {
    position: relative;
    z-index: 3;

    width: 100%;
    min-width: 0;
    min-height: 700px;

    padding: 68px 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    align-items: center;
    gap: clamp(36px, 5vw, 72px);
}

/* ============================================================
   05. HERO CONTENT
============================================================ */

.ere-about-page .ere-about-breadcrumb-content {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 850px;
    min-width: 0;

    padding: clamp(32px, 3vw, 46px);

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.105);
    border-radius: 30px;

    background: linear-gradient(
        145deg,
        rgba(19,23,28,.68),
        rgba(10,13,17,.38)
    );

    box-shadow:
        0 34px 88px rgba(0,0,0,.27),
        inset 0 1px 0 rgba(255,255,255,.065);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transform-style: preserve-3d;
}

.ere-about-page .ere-about-breadcrumb-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;

    width: 170px;
    height: 4px;

    background: linear-gradient(
        90deg,
        var(--ea-gold-light),
        rgba(130,148,216,.70),
        transparent
    );
}

.ere-about-page .ere-about-hero-glow {
    position: absolute;
    right: -150px;
    bottom: -185px;

    width: 320px;
    height: 320px;

    border-radius: 50%;
    background: rgba(130,148,216,.09);
    filter: blur(28px);
    pointer-events: none;
}

.ere-about-page .ere-about-eyebrow {
    position: relative;
    z-index: 2;

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

    margin: 0 0 19px;

    color: var(--ea-gold-light);

    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-eyebrow > span {
    width: 40px;
    height: 1px;
    flex: 0 0 40px;
    background: var(--ea-gold);
}

.ere-about-page .ere-about-breadcrumb-content h1 {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 800px;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: visible;

    color: #fff;

    font-family: 'Playfair Display', serif;
    font-size: clamp(54px, 5vw, 82px);
    font-weight: 500;
    line-height: .99;
    letter-spacing: -.035em;

    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    text-wrap: balance;
}

.ere-about-page .ere-about-breadcrumb-content h1 em {
    display: block;
    margin-top: 7px;

    color: var(--ea-gold-light);
    font-style: italic;
    font-weight: 400;
}

.ere-about-page .ere-about-breadcrumb-content > p {
    position: relative;
    z-index: 2;

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

    margin: 23px 0 0;

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

    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 1.85;
}

/* ============================================================
   06. HERO ACTIONS
============================================================ */

.ere-about-page .ere-about-hero-actions {
    position: relative;
    z-index: 2;

    margin-top: 30px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ere-about-page .ere-about-hero-actions a {
    min-height: 54px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: 15px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;

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

.ere-about-page .ere-about-hero-primary {
    background: linear-gradient(135deg, var(--ea-gold-light), var(--ea-gold));
    color: var(--ea-black);
    border: 1px solid rgba(216,188,125,.45);
}

.ere-about-page .ere-about-hero-primary:hover {
    transform: translateY(-3px);
    background: var(--ea-gold-light);
    color: var(--ea-black);
    box-shadow: 0 14px 32px rgba(0,0,0,.20);
}

.ere-about-page .ere-about-hero-secondary {
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.035);
}

.ere-about-page .ere-about-hero-secondary:hover {
    transform: translateY(-3px);
    border-color: rgba(216,188,125,.38);
    color: var(--ea-gold-light);
    background: rgba(255,255,255,.06);
}

/* ============================================================
   07. BREADCRUMB NAV
============================================================ */

.ere-about-page .ere-about-breadcrumb-nav {
    position: relative;
    z-index: 2;

    margin-top: 30px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;

    color: rgba(255,255,255,.55);
    font-size: 10px;
}

.ere-about-page .ere-about-breadcrumb-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.65);
    transition: color .25s ease;
}

.ere-about-page .ere-about-breadcrumb-nav a:hover {
    color: var(--ea-gold-light);
}

.ere-about-page .ere-about-breadcrumb-nav > i {
    color: rgba(216,188,125,.62);
    font-size: 7px;
}

.ere-about-page .ere-about-breadcrumb-nav > span {
    color: #fff;
    font-weight: 700;
}

/* ============================================================
   08. HERO APP HUD
============================================================ */

.ere-about-page .ere-about-hero-app {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 430px;
    justify-self: end;
    perspective: 1300px;
}

.ere-about-page .ere-about-app-panel {
    position: relative;
    z-index: 3;

    width: 100%;
    min-width: 0;

    padding: 23px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 28px;

    background: linear-gradient(
        145deg,
        rgba(20,24,30,.94),
        rgba(7,10,13,.93)
    );

    box-shadow: 0 42px 100px rgba(0,0,0,.40);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transform: perspective(1300px) rotateY(-4deg) rotateX(1deg);
    transform-style: preserve-3d;
}

.ere-about-page .ere-about-app-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 82% 0%, rgba(216,188,125,.15), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(130,148,216,.07), transparent 30%);
}

.ere-about-page .ere-about-app-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 19px;

    border-bottom: 1px solid rgba(255,255,255,.075);
}

.ere-about-page .ere-about-app-status {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 9px;

    color: rgba(255,255,255,.52);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .095em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-app-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ea-gold-light);
    box-shadow: 0 0 0 5px rgba(216,188,125,.09);
}

.ere-about-page .ere-about-app-top strong {
    display: block;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 29px;
    font-weight: 500;
}

.ere-about-page .ere-about-app-top small {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.38);
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-app-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(216,188,125,.18);
    border-radius: 15px;

    background: rgba(216,188,125,.09);
    color: var(--ea-gold-light);
}

.ere-about-page .ere-about-app-metrics {
    position: relative;
    z-index: 2;

    margin-top: 17px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
}

.ere-about-page .ere-about-app-metrics > div {
    min-width: 0;
    padding: 14px 8px;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 15px;

    background: rgba(255,255,255,.04);
    text-align: center;
}

.ere-about-page .ere-about-app-metrics strong {
    display: block;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
}

.ere-about-page .ere-about-app-metrics span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.39);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.ere-about-page .ere-about-app-properties {
    position: relative;
    z-index: 2;
    margin-top: 19px;
}

.ere-about-page .ere-about-app-properties-head {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ere-about-page .ere-about-app-properties-head span {
    color: rgba(255,255,255,.47);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-app-properties-head a {
    color: var(--ea-gold-light);
    font-size: 8px;
    font-weight: 700;
}

.ere-about-page .ere-about-app-property-stack {
    display: grid;
    gap: 8px;
}

.ere-about-page .ere-about-app-property {
    min-width: 0;
    padding: 8px;

    display: grid;
    grid-template-columns: 68px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;

    background: rgba(255,255,255,.038);
    color: inherit;

    transition: transform .28s ease, background .28s ease, border-color .28s ease;
}

.ere-about-page .ere-about-app-property:hover {
    transform: translateX(4px);
    background: rgba(255,255,255,.07);
    border-color: rgba(216,188,125,.12);
}

.ere-about-page .ere-about-app-property-image {
    width: 68px;
    height: 58px;
    overflow: hidden;
    border-radius: 10px;
    background: #22272d;
}

.ere-about-page .ere-about-app-property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ere-about-page .ere-about-app-property-copy {
    min-width: 0;
}

.ere-about-page .ere-about-app-property-copy span {
    display: block;
    margin-bottom: 3px;
    color: var(--ea-gold-light);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-app-property-copy strong,
.ere-about-page .ere-about-app-property-copy small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ere-about-page .ere-about-app-property-copy strong {
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.ere-about-page .ere-about-app-property-copy small {
    margin-top: 3px;
    color: rgba(255,255,255,.37);
    font-size: 8px;
}

.ere-about-page .ere-about-app-property > i {
    color: var(--ea-gold-light);
    font-size: 8px;
}

.ere-about-page .ere-about-app-footer {
    position: relative;
    z-index: 2;

    margin-top: 16px;
    padding-top: 13px;

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

    border-top: 1px solid rgba(255,255,255,.07);
}

.ere-about-page .ere-about-app-footer > div {
    display: flex;
    align-items: center;
    gap: 7px;

    color: rgba(255,255,255,.34);
    font-size: 8px;
}

.ere-about-page .ere-about-app-footer > div i {
    color: var(--ea-gold);
}

.ere-about-page .ere-about-app-signal {
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.ere-about-page .ere-about-app-signal i {
    width: 3px;
    display: block;
    border-radius: 3px;
    background: var(--ea-gold);
}

.ere-about-page .ere-about-app-signal i:nth-child(1) { height: 5px; }
.ere-about-page .ere-about-app-signal i:nth-child(2) { height: 8px; }
.ere-about-page .ere-about-app-signal i:nth-child(3) { height: 11px; }

/* ============================================================
   09. FLOATING CHIPS
============================================================ */

.ere-about-page .ere-about-floating-chip {
    position: absolute;
    z-index: 5;

    min-width: 170px;
    padding: 11px;

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

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;

    background: rgba(12,15,19,.77);
    color: #fff;

    box-shadow: 0 20px 48px rgba(0,0,0,.28);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.ere-about-page .ere-about-floating-chip > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;
    background: rgba(216,188,125,.10);
    color: var(--ea-gold-light);
}

.ere-about-page .ere-about-floating-chip small,
.ere-about-page .ere-about-floating-chip strong {
    display: block;
}

.ere-about-page .ere-about-floating-chip small {
    color: rgba(255,255,255,.36);
    font-size: 7px;
    text-transform: uppercase;
}

.ere-about-page .ere-about-floating-chip strong {
    margin-top: 2px;
    color: #fff;
    font-size: 9px;
}

.ere-about-page .ere-about-floating-chip-a {
    left: -34px;
    bottom: 82px;
    animation: ereAboutFloatA 5s ease-in-out infinite;
}

.ere-about-page .ere-about-floating-chip-b {
    right: -20px;
    top: 58px;
    animation: ereAboutFloatB 5.8s ease-in-out infinite;
}

@keyframes ereAboutFloatA {
    0%,100% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(-11px) rotate(.5deg); }
}

@keyframes ereAboutFloatB {
    0%,100% { transform: translateY(0) rotate(1.5deg); }
    50% { transform: translateY(9px) rotate(-.5deg); }
}

/* ============================================================
   10. DASHBOARD LABEL
============================================================ */

.ere-about-page .ere-about-dashboard-label {
    margin-bottom: 23px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.ere-about-page .ere-about-dashboard-label > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--ea-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-dashboard-label > span i {
    color: var(--ea-gold);
}

.ere-about-page .ere-about-dashboard-label small {
    color: #9c9fa3;
    font-size: 9px;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-dashboard-dark > span {
    color: #fff;
}

.ere-about-page .ere-about-dashboard-dark small {
    color: rgba(255,255,255,.34);
}

/* ============================================================
   11. INTRO / WHO WE ARE
============================================================ */

.ere-about-page .ere-about-intro-section {
    position: relative;
    padding: 100px 0 66px;
    overflow: hidden;

    background:
        radial-gradient(circle at 7% 10%, rgba(185,154,93,.09), transparent 20%),
        radial-gradient(circle at 92% 85%, rgba(130,148,216,.07), transparent 22%),
        linear-gradient(180deg, #f8f5ef, #f0ebe3);
}

.ere-about-page .ere-about-intro-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(17,19,21,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,19,21,.022) 1px, transparent 1px);
    background-size: 72px 72px;

    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 86%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 86%);
}

.ere-about-page .ere-about-intro-grid {
    position: relative;
    z-index: 2;

    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: stretch;
    gap: 20px;
}

.ere-about-page .ere-about-intro-heading {
    position: relative;
    min-width: 0;
    min-height: 510px;

    padding: 44px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    overflow: hidden;

    border: 1px solid rgba(216,188,125,.13);
    border-radius: 30px;

    background:
        radial-gradient(circle at 84% 10%, rgba(216,188,125,.17), transparent 24%),
        linear-gradient(145deg, #101419, #1a2028);

    box-shadow: var(--ea-shadow-lg);
    transform-style: preserve-3d;
}

.ere-about-page .ere-about-intro-orbit {
    position: absolute;
    width: 500px;
    height: 500px;
    top: -280px;
    right: -160px;
    border: 1px solid rgba(216,188,125,.12);
    border-radius: 50%;
}

.ere-about-page .ere-about-intro-orbit::before {
    content: '';
    position: absolute;
    inset: 90px;
    border: 1px solid rgba(130,148,216,.09);
    border-radius: 50%;
}

.ere-about-page .ere-about-section-label {
    position: relative;
    z-index: 2;

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

    margin: 0 0 17px;

    color: var(--ea-gold-light);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-section-label::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--ea-gold);
}

.ere-about-page .ere-about-intro-heading h2 {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 660px;
    min-width: 0;

    margin: 0;

    color: #fff;

    font-family: 'Playfair Display', serif;
    font-size: clamp(46px, 4.3vw, 70px);
    font-weight: 500;
    line-height: 1.01;
    letter-spacing: -.034em;

    word-break: normal;
    overflow-wrap: normal;
    text-wrap: balance;
}

.ere-about-page .ere-about-intro-heading h2 em {
    display: block;
    margin-top: 7px;
    color: var(--ea-gold-light);
    font-style: italic;
    font-weight: 400;
}

.ere-about-page .ere-about-intro-mini-stats {
    position: relative;
    z-index: 2;

    margin-top: 30px;

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

.ere-about-page .ere-about-intro-mini-stats > div {
    min-width: 125px;
    padding: 12px 15px;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;

    background: rgba(255,255,255,.048);
}

.ere-about-page .ere-about-intro-mini-stats strong {
    display: block;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    line-height: 1;
}

.ere-about-page .ere-about-intro-mini-stats span {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.39);
    font-size: 8px;
    text-transform: uppercase;
}

.ere-about-page .ere-about-intro-copy {
    position: relative;
    min-width: 0;
    min-height: 510px;

    padding: 46px;
    overflow: hidden;

    border: 1px solid rgba(185,154,93,.14);
    border-radius: 30px;

    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(255,255,255,.86));

    box-shadow: var(--ea-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ere-about-page .ere-about-intro-copy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background: linear-gradient(
        180deg,
        var(--ea-gold-light),
        rgba(130,148,216,.55),
        transparent
    );
}

.ere-about-page .ere-about-intro-copy::after {
    content: '';
    position: absolute;
    right: -135px;
    bottom: -135px;

    width: 260px;
    height: 260px;

    border: 1px solid rgba(185,154,93,.13);
    border-radius: 50%;
    pointer-events: none;
}

.ere-about-page .ere-about-copy-index {
    position: absolute;
    top: 22px;
    right: 26px;

    color: rgba(185,154,93,.14);
    font-family: 'Playfair Display', serif;
    font-size: 45px;
}

.ere-about-page .ere-about-intro-copy p {
    position: relative;
    z-index: 2;

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

    margin: 0 0 18px;

    color: var(--ea-muted);
    font-size: 14px;
    line-height: 1.88;
}

.ere-about-page .ere-about-intro-copy .ere-about-lead {
    margin-bottom: 24px;

    color: #292d32;

    font-family: 'Playfair Display', serif;
    font-size: clamp(22px, 1.9vw, 29px);
    font-weight: 500;
    line-height: 1.55;
}

.ere-about-page .ere-about-signature {
    position: relative;
    z-index: 2;

    margin-top: 29px;
    padding-top: 23px;

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

    border-top: 1px solid rgba(17,19,21,.08);
}

.ere-about-page .ere-about-signature > span {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;

    display: grid;
    place-items: center;

    transform: rotate(45deg);

    border: 1px solid rgba(185,154,93,.52);
    background: #fbfaf7;
    color: var(--ea-gold);

    font-family: 'Playfair Display', serif;
    font-size: 20px;
}

.ere-about-page .ere-about-signature > div {
    margin-left: 7px;
}

.ere-about-page .ere-about-signature strong {
    display: block;
    color: var(--ea-dark);
    font-size: 12px;
    font-weight: 800;
}

.ere-about-page .ere-about-signature small {
    display: block;
    margin-top: 4px;
    color: #999da1;
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ============================================================
   12. NUMBERS
============================================================ */

.ere-about-page .ere-about-numbers-section {
    padding: 0 0 100px;
    background: linear-gradient(180deg, #f0ebe3, #f6f2eb);
}

.ere-about-page .ere-about-numbers {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;

    background: transparent;
    border: 0;
}

.ere-about-page .ere-about-number {
    position: relative;
    min-width: 0;
    min-height: 280px;

    padding: 27px;
    overflow: hidden;

    border: 1px solid rgba(185,154,93,.13);
    border-radius: 24px;

    background: linear-gradient(145deg, #fff, #faf8f4);
    box-shadow: var(--ea-shadow-sm);

    transform-style: preserve-3d;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.ere-about-page .ere-about-number:hover {
    transform: translateY(-6px);
    border-color: rgba(185,154,93,.28);
    box-shadow: var(--ea-shadow);
}

.ere-about-page .ere-about-number::after {
    content: '';
    position: absolute;
    left: 27px;
    bottom: 21px;

    width: 52px;
    height: 3px;
    border-radius: 3px;

    background: linear-gradient(90deg, var(--ea-gold), rgba(130,148,216,.42), transparent);
}

.ere-about-page .ere-about-number > span:first-child {
    position: absolute;
    top: 19px;
    right: 21px;

    color: rgba(185,154,93,.22);
    font-family: 'Playfair Display', serif;
    font-size: 26px;
}

.ere-about-page .ere-about-number > strong {
    display: block;
    margin-top: 42px;

    color: var(--ea-dark);
    font-family: 'Playfair Display', serif;
    font-size: 70px;
    font-weight: 500;
    line-height: .92;
}

.ere-about-page .ere-about-number h3 {
    max-width: 220px;
    margin: 22px 0 0;

    color: var(--ea-dark);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.ere-about-page .ere-about-number p {
    max-width: 225px;
    margin: 10px 0 0;

    color: #888d92;
    font-size: 11px;
    line-height: 1.7;
}

.ere-about-page .ere-about-number-license {
    background:
        radial-gradient(circle at 84% 10%, rgba(216,188,125,.13), transparent 27%),
        linear-gradient(145deg, #111419, #080a0d);
    border-color: rgba(216,188,125,.14);
}

.ere-about-page .ere-about-number-license h3 {
    color: #fff;
}

.ere-about-page .ere-about-number-license p {
    color: var(--ea-gold-light);
}

.ere-about-page .ere-about-license-icon {
    width: 62px;
    height: 62px;
    margin-top: 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(216,188,125,.22);
    border-radius: 17px;

    background: rgba(255,255,255,.024);
    color: var(--ea-gold-light);
    font-size: 21px;
}

/* ============================================================
   13. SERVICES / BENTO
============================================================ */

.ere-about-page .ere-about-services-section {
    position: relative;
    padding: 100px 0 108px;
    overflow: hidden;
    background: #0b0e12;
}

.ere-about-page .ere-about-services-background {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 10% 20%, rgba(185,154,93,.10), transparent 22%),
        radial-gradient(circle at 90% 80%, rgba(130,148,216,.09), transparent 25%),
        linear-gradient(145deg, #0d1116, #151b22);
}

.ere-about-page .ere-about-services-head {
    position: relative;
    z-index: 2;

    margin-bottom: 40px;

    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(300px,.60fr);
    align-items: end;
    gap: 55px;
}

.ere-about-page .ere-about-services-head h2 {
    max-width: 760px;
    margin: 0;

    color: #fff;

    font-family: 'Playfair Display', serif;
    font-size: clamp(41px, 4vw, 60px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.025em;
}

.ere-about-page .ere-about-services-head h2 em {
    display: block;
    color: var(--ea-gold-light);
    font-style: italic;
    font-weight: 400;
}

.ere-about-page .ere-about-services-head > p {
    margin: 0;
    color: rgba(255,255,255,.50);
    font-size: 13px;
    line-height: 1.82;
}

.ere-about-page .ere-about-services-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    grid-auto-rows: minmax(245px, auto);
    gap: 15px;
}

.ere-about-page .ere-about-service-card {
    position: relative;
    min-width: 0;

    padding: 27px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(255,255,255,.075);
    border-radius: 23px;

    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.024));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

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

.ere-about-page .ere-about-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(216,188,125,.27);
    background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.038));
    box-shadow: 0 24px 55px rgba(0,0,0,.15);
}

.ere-about-page .ere-about-service-large {
    grid-column: span 2;
}

.ere-about-page .ere-about-service-wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.ere-about-page .ere-about-service-number {
    position: absolute;
    right: 20px;
    top: 17px;

    color: rgba(216,188,125,.21);
    font-family: 'Playfair Display', serif;
    font-size: 23px;
}

.ere-about-page .ere-about-service-icon {
    width: 59px;
    height: 59px;
    flex: 0 0 59px;
    margin-top: 10px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(216,188,125,.16);
    border-radius: 17px;

    background: rgba(216,188,125,.085);
    color: var(--ea-gold-light);
    font-size: 18px;
}

.ere-about-page .ere-about-service-card h3 {
    margin: 26px 0 0;

    color: #fff;

    font-family: 'Playfair Display', serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.16;
}

.ere-about-page .ere-about-service-wide h3 {
    margin-top: 0;
}

.ere-about-page .ere-about-service-card p {
    margin: 13px 0 22px;
    color: rgba(255,255,255,.48);
    font-size: 11px;
    line-height: 1.8;
}

.ere-about-page .ere-about-service-card > a {
    margin-top: auto;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--ea-gold-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;

    transition: gap .25s ease, color .25s ease;
}

.ere-about-page .ere-about-service-card > a:hover {
    gap: 12px;
    color: #fff;
}

/* ============================================================
   14. APPROACH PARALLAX
============================================================ */

.ere-about-page .ere-about-approach-section {
    position: relative;
    isolation: isolate;

    padding: 112px 0;
    overflow: hidden;

    background: #0a0d11;
}

.ere-about-page .ere-about-approach-bg {
    position: absolute;
    z-index: 0;
    inset: -70px 0;

    background:
        url('https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=2200&q=88')
        center center / cover no-repeat;

    transform: translate3d(0, var(--ea-section-parallax, 0px), 0) scale(1.08);
    will-change: transform;
}

.ere-about-page .ere-about-approach-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(90deg, rgba(6,8,11,.95), rgba(8,11,15,.84), rgba(10,13,17,.70)),
        radial-gradient(circle at 80% 15%, rgba(216,188,125,.12), transparent 23%);
}

.ere-about-page .ere-about-approach-grid {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: minmax(0,.88fr) minmax(0,1fr);
    align-items: start;
    gap: 62px;
}

.ere-about-page .ere-about-approach-heading {
    min-width: 0;
    padding: 35px;

    border: 1px solid rgba(255,255,255,.095);
    border-radius: 26px;

    background: rgba(13,16,20,.64);
    box-shadow: 0 30px 80px rgba(0,0,0,.20);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.ere-about-page .ere-about-dark-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;

    color: var(--ea-gold-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-dark-label::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--ea-gold);
}

.ere-about-page .ere-about-approach-heading h2 {
    max-width: 650px;
    margin: 0;

    color: #fff;

    font-family: 'Playfair Display', serif;
    font-size: clamp(41px, 4.1vw, 61px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.025em;
}

.ere-about-page .ere-about-approach-heading h2 em {
    display: block;
    color: var(--ea-gold-light);
    font-style: italic;
    font-weight: 400;
}

.ere-about-page .ere-about-approach-heading p {
    max-width: 550px;
    margin: 21px 0 0;
    color: rgba(255,255,255,.50);
    font-size: 13px;
    line-height: 1.82;
}

.ere-about-page .ere-about-approach-chip {
    width: max-content;
    max-width: 100%;
    margin-top: 27px;
    padding: 10px 13px;

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

    border: 1px solid rgba(216,188,125,.16);
    border-radius: 12px;

    background: rgba(216,188,125,.085);
    color: var(--ea-gold-light);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-approach-list {
    display: grid;
    gap: 12px;
}

.ere-about-page .ere-about-approach-item {
    min-width: 0;
    padding: 20px;

    display: grid;
    grid-template-columns: 64px minmax(0,1fr);
    align-items: start;
    gap: 15px;

    border: 1px solid rgba(255,255,255,.085);
    border-radius: 19px;

    background: rgba(14,17,21,.66);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition: transform .28s ease, background .28s ease, border-color .28s ease;
}

.ere-about-page .ere-about-approach-item:hover {
    transform: translateX(7px);
    background: rgba(20,24,29,.82);
    border-color: rgba(216,188,125,.14);
}

.ere-about-page .ere-about-approach-item > span {
    width: 51px;
    height: 51px;

    display: grid;
    place-items: center;

    border-radius: 15px;
    background: rgba(216,188,125,.085);
    color: var(--ea-gold-light);

    font-family: 'Playfair Display', serif;
    font-size: 17px;
}

.ere-about-page .ere-about-approach-item h3 {
    margin: 0;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    font-weight: 500;
}

.ere-about-page .ere-about-approach-item p {
    margin: 7px 0 0;
    color: rgba(255,255,255,.43);
    font-size: 11px;
    line-height: 1.72;
}

/* ============================================================
   15. VALUES
============================================================ */

.ere-about-page .ere-about-values-section {
    padding: 100px 0;

    background:
        radial-gradient(circle at 8% 15%, rgba(185,154,93,.08), transparent 20%),
        linear-gradient(180deg, #faf8f4, #f1ece4);
}

.ere-about-page .ere-about-values-head {
    max-width: 760px;
    margin-bottom: 39px;
}

.ere-about-page .ere-about-values-head h2 {
    margin: 0;
    color: var(--ea-dark);
    font-family: 'Playfair Display', serif;
    font-size: clamp(41px, 4vw, 59px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.025em;
}

.ere-about-page .ere-about-values-head h2 em {
    display: block;
    color: var(--ea-gold);
    font-style: italic;
    font-weight: 400;
}

.ere-about-page .ere-about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
}

.ere-about-page .ere-about-value {
    min-width: 0;
    padding: 27px 24px;

    border: 1px solid rgba(185,154,93,.12);
    border-radius: 22px;

    background: rgba(255,255,255,.92);
    box-shadow: var(--ea-shadow-sm);

    transform-style: preserve-3d;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.ere-about-page .ere-about-value:hover {
    transform: translateY(-6px);
    border-color: rgba(185,154,93,.26);
    box-shadow: var(--ea-shadow);
}

.ere-about-page .ere-about-value > span {
    width: 53px;
    height: 53px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(185,154,93,.15);
    border-radius: 16px;

    background: rgba(185,154,93,.085);
    color: var(--ea-gold);
    font-size: 17px;
}

.ere-about-page .ere-about-value h3 {
    margin: 23px 0 0;
    color: var(--ea-dark);
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.18;
}

.ere-about-page .ere-about-value p {
    margin: 11px 0 0;
    color: var(--ea-muted);
    font-size: 11px;
    line-height: 1.78;
}

/* ============================================================
   16. BUSINESS
============================================================ */

.ere-about-page .ere-about-business-section {
    padding: 0 0 100px;
    background: var(--ea-cream);
}

.ere-about-page .ere-about-business {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns: minmax(320px,.72fr) minmax(0,1fr);
    gap: 17px;
}

.ere-about-page .ere-about-business-heading {
    position: relative;
    min-width: 0;
    padding: 42px 37px;
    overflow: hidden;

    border-radius: 26px;

    background:
        radial-gradient(circle at 80% 10%, rgba(216,188,125,.12), transparent 25%),
        linear-gradient(145deg, #101419, #171c23);

    box-shadow: var(--ea-shadow-lg);
}

.ere-about-page .ere-about-business-heading::after {
    content: '';
    position: absolute;
    right: -120px;
    bottom: -120px;

    width: 250px;
    height: 250px;

    border: 1px solid rgba(216,188,125,.12);
    border-radius: 50%;
}

.ere-about-page .ere-about-business-heading > span {
    display: block;
    margin-bottom: 11px;
    color: var(--ea-gold-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-business-heading h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 3.6vw, 53px);
    font-weight: 500;
    line-height: 1.05;
}

.ere-about-page .ere-about-business-heading h2 em {
    display: block;
    color: var(--ea-gold-light);
    font-style: italic;
    font-weight: 400;
}

.ere-about-page .ere-about-business-status {
    position: relative;
    z-index: 2;

    width: max-content;
    max-width: 100%;

    margin-top: 24px;
    padding: 9px 12px;

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

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;

    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.48);

    font-size: 9px;
    text-transform: uppercase;
}

.ere-about-page .ere-about-business-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ea-gold-light);
}

.ere-about-page .ere-about-business-data {
    min-width: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

.ere-about-page .ere-about-business-row {
    min-width: 0;
    padding: 21px;

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

    border: 1px solid rgba(185,154,93,.11);
    border-radius: 19px;

    background: #fff;
    box-shadow: var(--ea-shadow-sm);
    color: inherit;

    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.ere-about-page a.ere-about-business-row:hover {
    transform: translateY(-4px);
    border-color: rgba(185,154,93,.24);
    box-shadow: var(--ea-shadow);
}

.ere-about-page .ere-about-business-row > span {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(185,154,93,.14);
    border-radius: 14px;

    background: rgba(185,154,93,.085);
    color: var(--ea-gold);
}

.ere-about-page .ere-about-business-row small {
    display: block;
    margin-bottom: 4px;
    color: #959a9f;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-business-row strong {
    display: block;
    color: var(--ea-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* ============================================================
   17. CTA FINAL
============================================================ */

.ere-about-page .ere-about-cta-section {
    padding: 0 0 100px;
    background: var(--ea-cream);
}

.ere-about-page .ere-about-cta {
    position: relative;
    padding: 56px;
    overflow: hidden;

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

    border-radius: 28px;

    background:
        radial-gradient(circle at 85% 10%, rgba(216,188,125,.14), transparent 24%),
        linear-gradient(145deg, #101419, #080a0d);

    box-shadow: var(--ea-shadow-lg);
}

.ere-about-page .ere-about-cta-glow {
    position: absolute;
    right: -130px;
    bottom: -220px;

    width: 330px;
    height: 330px;

    border-radius: 50%;
    background: rgba(130,148,216,.10);
    filter: blur(15px);
}

.ere-about-page .ere-about-cta > div {
    position: relative;
    z-index: 2;
}

.ere-about-page .ere-about-cta > div:first-of-type {
    max-width: 720px;
}

.ere-about-page .ere-about-cta > div > span {
    color: var(--ea-gold-light);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.ere-about-page .ere-about-cta h2 {
    margin: 11px 0 0;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.02em;
}

.ere-about-page .ere-about-cta h2 em {
    display: block;
    color: var(--ea-gold-light);
    font-style: italic;
    font-weight: 400;
}

.ere-about-page .ere-about-cta p {
    max-width: 620px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.49);
    font-size: 12px;
    line-height: 1.8;
}

.ere-about-page .ere-about-cta-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
}

.ere-about-page .ere-about-cta-actions a {
    min-height: 54px;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border-radius: 15px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;

    transition: transform .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
}

.ere-about-page .ere-about-cta-primary {
    background: linear-gradient(135deg, var(--ea-gold-light), var(--ea-gold));
    color: var(--ea-dark);
}

.ere-about-page .ere-about-cta-primary:hover {
    transform: translateY(-3px);
    background: var(--ea-gold-light);
    color: var(--ea-dark);
}

.ere-about-page .ere-about-cta-secondary {
    border: 1px solid rgba(255,255,255,.13);
    color: #fff;
    background: rgba(255,255,255,.02);
}

.ere-about-page .ere-about-cta-secondary:hover {
    transform: translateY(-3px);
    border-color: rgba(216,188,125,.33);
    color: var(--ea-gold-light);
}

/* ============================================================
   18. REVEAL / 3D
   Aislado del antiguo .ere-about-reveal del Home.
============================================================ */

.ere-about-page .ere-about-reveal {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity .78s ease,
        transform .78s cubic-bezier(.2,.72,.2,1);
}

.ere-about-page .ere-about-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.ere-about-page .ere-about-tilt {
    transition: transform .20s ease, box-shadow .28s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

/* ============================================================
   19. RESPONSIVE 1180
============================================================ */

@media (max-width: 1180px) {

    .ere-about-page .ere-about-hero-grid {
        grid-template-columns: minmax(0,1fr) minmax(330px,390px);
        gap: 34px;
    }

    .ere-about-page .ere-about-breadcrumb-content h1 {
        font-size: clamp(49px, 4.8vw, 72px);
    }

    .ere-about-page .ere-about-floating-chip-a {
        left: -18px;
    }

    .ere-about-page .ere-about-floating-chip-b {
        right: -12px;
    }

    .ere-about-page .ere-about-numbers {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .ere-about-page .ere-about-values-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

/* ============================================================
   20. RESPONSIVE 980
============================================================ */

@media (max-width: 980px) {

    .ere-about-page .ere-about-container {
        width: min(calc(100% - 36px), 1420px);
    }

    .ere-about-page .ere-about-breadcrumb {
        min-height: auto;
    }

    .ere-about-page .ere-about-hero-grid {
        min-height: 0;
        padding: 54px 0 60px;

        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ere-about-page .ere-about-breadcrumb-content {
        max-width: 800px;
    }

    .ere-about-page .ere-about-hero-app {
        width: min(100%, 640px);
        max-width: 640px;
        justify-self: start;
    }

    .ere-about-page .ere-about-app-panel {
        transform: perspective(1300px) rotateY(-1.5deg) rotateX(.5deg);
    }

    .ere-about-page .ere-about-floating-chip-a {
        left: auto;
        right: -14px;
        bottom: 72px;
    }

    .ere-about-page .ere-about-floating-chip-b {
        right: -8px;
        top: 64px;
    }

    .ere-about-page .ere-about-intro-grid,
    .ere-about-page .ere-about-approach-grid,
    .ere-about-page .ere-about-business {
        grid-template-columns: 1fr;
    }

    .ere-about-page .ere-about-intro-heading,
    .ere-about-page .ere-about-intro-copy {
        min-height: auto;
    }

    .ere-about-page .ere-about-intro-heading {
        min-height: 430px;
    }

    .ere-about-page .ere-about-services-head {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ere-about-page .ere-about-services-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .ere-about-page .ere-about-service-large,
    .ere-about-page .ere-about-service-wide {
        grid-column: span 2;
    }

    .ere-about-page .ere-about-business-data {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .ere-about-page .ere-about-cta {
        display: block;
    }

    .ere-about-page .ere-about-cta-actions {
        margin-top: 27px;
    }
}

/* ============================================================
   21. MOBILE 680
   Menos 3D, pero el panel tipo APP se conserva.
============================================================ */

@media (max-width: 680px) {

    .ere-about-page {
        overflow-x: hidden;
    }

    .ere-about-page .ere-about-container {
        width: calc(100% - 24px);
    }

    .ere-about-page .ere-about-breadcrumb-decoration {
        width: 360px;
        height: 360px;
        top: -90px;
        right: -175px;
    }

    .ere-about-page .ere-about-breadcrumb-decoration::before {
        inset: 52px;
    }

    .ere-about-page .ere-about-breadcrumb-decoration::after {
        inset: 110px;
    }

    .ere-about-page .ere-about-hero-grid {
        padding: 38px 0 44px;
        gap: 18px;
    }

    .ere-about-page .ere-about-breadcrumb-content {
        padding: 23px 19px;
        border-radius: 21px;
        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);
        box-shadow: 0 20px 48px rgba(0,0,0,.20);
        transform: none !important;
    }

    .ere-about-page .ere-about-eyebrow {
        margin-bottom: 14px;
        gap: 9px;
        font-size: 9px;
        letter-spacing: .16em;
    }

    .ere-about-page .ere-about-eyebrow > span {
        width: 28px;
        flex-basis: 28px;
    }

    .ere-about-page .ere-about-breadcrumb-content h1 {
        max-width: 100%;
        font-size: clamp(39px, 11.4vw, 48px);
        line-height: 1.01;
        letter-spacing: -.027em;
    }

    .ere-about-page .ere-about-breadcrumb-content > p {
        margin-top: 17px;
        font-size: 13px;
        line-height: 1.72;
    }

    .ere-about-page .ere-about-hero-actions {
        margin-top: 22px;
        display: grid;
        grid-template-columns: 1fr;
    }

    .ere-about-page .ere-about-hero-actions a {
        width: 100%;
        min-height: 51px;
    }

    .ere-about-page .ere-about-breadcrumb-nav {
        margin-top: 23px;
    }

    /* APP MOBILE: visible, compacta, sin tilt fuerte */
    .ere-about-page .ere-about-hero-app {
        width: 100%;
        max-width: none;
        perspective: none;
    }

    .ere-about-page .ere-about-app-panel {
        padding: 17px;
        border-radius: 20px;
        transform: none !important;
        box-shadow: 0 22px 50px rgba(0,0,0,.24);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .ere-about-page .ere-about-app-top strong {
        font-size: 24px;
    }

    .ere-about-page .ere-about-app-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .ere-about-page .ere-about-app-metrics > div {
        padding: 11px 5px;
    }

    .ere-about-page .ere-about-app-metrics strong {
        font-size: 20px;
    }

    .ere-about-page .ere-about-app-property {
        grid-template-columns: 58px minmax(0,1fr) auto;
        gap: 8px;
    }

    .ere-about-page .ere-about-app-property-image {
        width: 58px;
        height: 50px;
    }

    .ere-about-page .ere-about-app-property:nth-child(n+3) {
        display: none;
    }

    .ere-about-page .ere-about-floating-chip {
        display: none;
    }

    .ere-about-page .ere-about-tilt {
        transform: none !important;
        will-change: auto;
    }

    /* INTRO */
    .ere-about-page .ere-about-intro-section {
        padding: 62px 0 47px;
    }

    .ere-about-page .ere-about-dashboard-label {
        margin-bottom: 16px;
    }

    .ere-about-page .ere-about-dashboard-label small {
        display: none;
    }

    .ere-about-page .ere-about-intro-grid {
        gap: 12px;
    }

    .ere-about-page .ere-about-intro-heading {
        min-height: 370px;
        padding: 28px 22px;
        border-radius: 21px;
        transform: none !important;
    }

    .ere-about-page .ere-about-intro-heading h2 {
        font-size: clamp(38px, 10.5vw, 46px);
        line-height: 1.01;
        letter-spacing: -.025em;
    }

    .ere-about-page .ere-about-intro-mini-stats {
        margin-top: 23px;
    }

    .ere-about-page .ere-about-intro-mini-stats > div {
        min-width: 112px;
    }

    .ere-about-page .ere-about-intro-copy {
        padding: 28px 22px;
        border-radius: 21px;
    }

    .ere-about-page .ere-about-copy-index {
        font-size: 36px;
    }

    .ere-about-page .ere-about-intro-copy .ere-about-lead {
        font-size: 20px;
    }

    .ere-about-page .ere-about-intro-copy p {
        font-size: 13px;
        line-height: 1.75;
    }

    /* NUMBERS */
    .ere-about-page .ere-about-numbers-section {
        padding-bottom: 70px;
    }

    .ere-about-page .ere-about-numbers {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ere-about-page .ere-about-number {
        min-height: 225px;
        padding: 23px;
        border-radius: 20px;
        transform: none !important;
    }

    .ere-about-page .ere-about-number > strong {
        font-size: 56px;
    }

    /* SERVICES */
    .ere-about-page .ere-about-services-section {
        padding: 72px 0 78px;
    }

    .ere-about-page .ere-about-services-head h2 {
        font-size: 39px;
    }

    .ere-about-page .ere-about-services-grid {
        grid-template-columns: 1fr;
    }

    .ere-about-page .ere-about-service-large,
    .ere-about-page .ere-about-service-wide {
        grid-column: auto;
    }

    .ere-about-page .ere-about-service-wide {
        flex-direction: column;
        align-items: flex-start;
    }

    .ere-about-page .ere-about-service-card {
        min-height: 285px;
        border-radius: 20px;
    }

    /* APPROACH */
    .ere-about-page .ere-about-approach-section {
        padding: 74px 0;
    }

    .ere-about-page .ere-about-approach-bg {
        inset: 0;
        transform: scale(1.04) !important;
    }

    .ere-about-page .ere-about-approach-heading {
        padding: 26px 21px;
        border-radius: 20px;
    }

    .ere-about-page .ere-about-approach-heading h2 {
        font-size: 39px;
    }

    .ere-about-page .ere-about-approach-item {
        grid-template-columns: 52px minmax(0,1fr);
        padding: 16px;
        border-radius: 16px;
    }

    .ere-about-page .ere-about-approach-item:hover {
        transform: none;
    }

    /* VALUES */
    .ere-about-page .ere-about-values-section {
        padding: 74px 0;
    }

    .ere-about-page .ere-about-values-head h2 {
        font-size: 39px;
    }

    .ere-about-page .ere-about-values-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ere-about-page .ere-about-value {
        border-radius: 19px;
        transform: none !important;
    }

    /* BUSINESS */
    .ere-about-page .ere-about-business-section {
        padding-bottom: 70px;
    }

    .ere-about-page .ere-about-business-heading {
        padding: 32px 23px;
        border-radius: 21px;
    }

    .ere-about-page .ere-about-business-data {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ere-about-page .ere-about-business-row {
        padding: 18px;
        border-radius: 16px;
    }

    /* CTA */
    .ere-about-page .ere-about-cta-section {
        padding-bottom: 70px;
    }

    .ere-about-page .ere-about-cta {
        padding: 36px 21px;
        border-radius: 21px;
    }

    .ere-about-page .ere-about-cta h2 {
        font-size: 35px;
    }

    .ere-about-page .ere-about-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ere-about-page .ere-about-cta-actions a {
        width: 100%;
    }
}

/* ============================================================
   22. SMALL MOBILE
============================================================ */

@media (max-width: 390px) {

    .ere-about-page .ere-about-breadcrumb-content h1 {
        font-size: 37px;
    }

    .ere-about-page .ere-about-intro-heading h2,
    .ere-about-page .ere-about-services-head h2,
    .ere-about-page .ere-about-approach-heading h2,
    .ere-about-page .ere-about-values-head h2 {
        font-size: 34px;
    }

    .ere-about-page .ere-about-app-footer > div {
        font-size: 7px;
    }
}

/* ============================================================
   23. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ere-about-page *,
    .ere-about-page *::before,
    .ere-about-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .ere-about-page .ere-about-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .ere-about-page .ere-about-tilt,
    .ere-about-page .ere-about-app-panel,
    .ere-about-page .ere-about-breadcrumb-bg img,
    .ere-about-page .ere-about-approach-bg {
        transform: none !important;
    }
}

/* ============================================================
   EMPIRE REAL ESTATE NI
   NOSOTROS - CSS AISLADO END
============================================================ */


/* ============================================================
   EMPIRE REAL ESTATE NI
   PROJECT GALLERY
   3D APP EXPERIENCE
============================================================ */


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

.ere-projects-page{

    --ep-black:#080a0d;
    --ep-dark:#101419;
    --ep-dark-2:#171c23;
    --ep-dark-3:#202731;

    --ep-gold:#b99a5d;
    --ep-gold-light:#d8bc7d;

    --ep-blue:#8294d8;

    --ep-white:#ffffff;

    --ep-cream:#f6f2eb;
    --ep-cream-2:#eee9e1;

    --ep-text:#20242a;
    --ep-muted:#777d83;

    --ep-border:rgba(17,19,21,.10);

    --ep-shadow:
        0 20px 55px rgba(11,13,15,.08);

    --ep-shadow-lg:
        0 35px 90px rgba(11,13,15,.16);

    position:relative;

    width:100%;

    margin:0;

    padding:0;

    overflow-x:clip;

    background:
        var(--ep-cream);

    color:
        var(--ep-text);

    font-family:
        "Manrope",
        sans-serif;
}


.ere-projects-page *,
.ere-projects-page *::before,
.ere-projects-page *::after{

    box-sizing:border-box;

}


body.ere-projects-lock{

    overflow:hidden !important;

}


/* ============================================================
   CONTAINER
============================================================ */

.ere-projects-container{

    position:relative;

    z-index:3;

    width:min(
        calc(100% - 56px),
        1420px
    );

    margin-inline:auto;

}


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

.ere-projects-hero{

    position:relative;

    isolation:isolate;

    width:100%;

    min-height:720px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:
        var(--ep-black);

}


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

.ere-projects-hero-bg{

    position:absolute;

    inset:-35px;

    z-index:0;

    overflow:hidden;

}


.ere-projects-hero-bg img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transform:
        scale(1.08)
        translate3d(
            0,
            var(--ep-hero-parallax,0px),
            0
        );

    will-change:transform;

}


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

.ere-projects-hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(
            100deg,
            rgba(5,7,9,.96) 0%,
            rgba(7,9,12,.90) 33%,
            rgba(8,11,16,.66) 64%,
            rgba(10,14,20,.42) 100%
        ),

        radial-gradient(
            circle at 80% 15%,
            rgba(216,188,125,.14),
            transparent 24%
        ),

        radial-gradient(
            circle at 15% 84%,
            rgba(130,148,216,.10),
            transparent 25%
        );

}


.ere-projects-hero::after{

    content:"";

    position:absolute;

    z-index:5;

    left:0;
    bottom:0;

    width:100%;
    height:2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(185,154,93,.30),
            #d8bc7d,
            rgba(130,148,216,.75),
            #d8bc7d,
            rgba(185,154,93,.25),
            transparent
        );

}


/* ============================================================
   ORBITS
============================================================ */

.ere-projects-orbit{

    position:absolute;

    z-index:2;

    border-radius:50%;

    border:
        1px solid rgba(216,188,125,.10);

    pointer-events:none;

}


.ere-projects-orbit-one{

    width:760px;
    height:760px;

    right:-200px;
    top:-270px;

}


.ere-projects-orbit-one::before{

    content:"";

    position:absolute;

    inset:110px;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.05);

}


.ere-projects-orbit-two{

    width:340px;
    height:340px;

    left:-180px;
    bottom:-170px;

    border-color:
        rgba(130,148,216,.10);

}


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

.ere-projects-hero-grid{

    min-height:720px;

    padding:75px 0;

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(370px,430px);

    align-items:center;

    gap:
        clamp(
            45px,
            6vw,
            90px
        );

}


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

.ere-projects-hero-copy{

    position:relative;

    min-width:0;

    max-width:850px;

    padding:42px;

    overflow:hidden;

    border-radius:30px;

    border:
        1px solid rgba(255,255,255,.10);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );

    box-shadow:

        0 30px 90px rgba(0,0,0,.25),

        inset 0 1px 0
        rgba(255,255,255,.07);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transform-style:
        preserve-3d;

}


.ere-projects-hero-copy::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:160px;
    height:4px;

    background:

        linear-gradient(
            90deg,
            var(--ep-gold-light),
            rgba(130,148,216,.70),
            transparent
        );

}


/* ============================================================
   EYEBROW
============================================================ */

.ere-projects-eyebrow{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:
        var(--ep-gold-light);

    font-size:10px;

    font-weight:800;

    letter-spacing:2.3px;

    text-transform:uppercase;

}


.ere-projects-eyebrow i{

    width:39px;
    height:1px;

    background:
        var(--ep-gold);

}


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

.ere-projects-hero-copy h1{

    max-width:780px;

    margin:0;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            55px,
            5.2vw,
            86px
        );

    font-weight:500;

    line-height:.98;

    letter-spacing:-2.6px;

}


.ere-projects-hero-copy h1 em{

    display:block;

    margin-top:7px;

    color:
        var(--ep-gold-light);

    font-weight:400;

    font-style:italic;

}


.ere-projects-hero-copy > p{

    max-width:660px;

    margin:
        24px 0 0;

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

    font-size:14px;

    line-height:1.85;

}


/* ============================================================
   BUTTONS
============================================================ */

.ere-projects-primary-button,
.ere-projects-secondary-button{

    min-height:54px;

    padding:0 21px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    border:0;

    border-radius:15px;

    cursor:pointer;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9px;

    font-weight:800;

    letter-spacing:.5px;

    text-decoration:none;

    text-transform:uppercase;

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

}


.ere-projects-primary-button{

    background:

        linear-gradient(
            135deg,
            var(--ep-gold-light),
            var(--ep-gold)
        );

    color:
        var(--ep-black);

}


.ere-projects-primary-button:hover{

    color:
        var(--ep-black);

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.18);

}


.ere-projects-secondary-button{

    border:
        1px solid rgba(255,255,255,.15);

    background:
        rgba(255,255,255,.04);

    color:#fff;

}


.ere-projects-secondary-button:hover{

    color:
        var(--ep-gold-light);

    transform:
        translateY(-4px);

}


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

.ere-projects-hero-actions{

    margin-top:31px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


/* ============================================================
   BREADCRUMB
============================================================ */

.ere-projects-breadcrumb{

    margin-top:31px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:9px;

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

    font-size:9px;

}


.ere-projects-breadcrumb a{

    display:flex;

    align-items:center;

    gap:7px;

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

    text-decoration:none;

}


.ere-projects-breadcrumb a:hover{

    color:
        var(--ep-gold-light);

}


.ere-projects-breadcrumb > i{

    color:
        rgba(216,188,125,.50);

    font-size:6px;

}


.ere-projects-breadcrumb > span{

    color:#fff;

}


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

.ere-projects-hero-app{

    position:relative;

    width:100%;

    max-width:430px;

    justify-self:end;

    perspective:1200px;

}


.ere-projects-app-panel{

    position:relative;

    width:100%;

    padding:22px;

    overflow:hidden;

    border-radius:29px;

    border:
        1px solid rgba(255,255,255,.13);

    background:

        radial-gradient(
            circle at 85% 0%,
            rgba(216,188,125,.12),
            transparent 26%
        ),

        linear-gradient(
            145deg,
            rgba(20,24,29,.94),
            rgba(8,11,14,.92)
        );

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.38);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    transform:
        perspective(1300px)
        rotateY(-5deg)
        rotateX(2deg);

    transform-style:
        preserve-3d;

}


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

.ere-projects-app-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    padding-bottom:19px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

}


.ere-projects-app-header > div:first-child{

    display:flex;

    flex-direction:column;

}


.ere-projects-app-header > div:first-child > span{

    display:flex;

    align-items:center;

    gap:7px;

    margin-bottom:9px;

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

    font-size:7px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


.ere-projects-app-header > div:first-child > span i{

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        var(--ep-gold-light);

    box-shadow:
        0 0 0
        5px
        rgba(216,188,125,.08);

}


.ere-projects-app-header strong{

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:27px;

    font-weight:500;

}


.ere-projects-app-header small{

    margin-top:3px;

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

    font-size:7px;

    letter-spacing:.7px;

    text-transform:uppercase;

}


.ere-projects-app-logo{

    width:47px;
    height:47px;

    flex:0 0 47px;

    display:grid;

    place-items:center;

    border-radius:15px;

    border:
        1px solid rgba(216,188,125,.17);

    background:
        rgba(216,188,125,.08);

    color:
        var(--ep-gold-light);

}


/* ============================================================
   APP STATS
============================================================ */

.ere-projects-app-stats{

    margin-top:17px;

    display:grid;

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

    gap:7px;

}


.ere-projects-app-stats > div{

    padding:14px 7px;

    text-align:center;

    border-radius:15px;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.06);

}


.ere-projects-app-stats strong{

    display:block;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:22px;

    font-weight:500;

}


.ere-projects-app-stats span{

    display:block;

    margin-top:3px;

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

    font-size:6.5px;

    font-weight:700;

    text-transform:uppercase;

}


/* ============================================================
   APP PREVIEW
============================================================ */

.ere-projects-app-preview{

    width:100%;

    margin-top:17px;

    padding:8px;

    display:grid;

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

    align-items:center;

    gap:11px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:17px;

    background:
        rgba(255,255,255,.045);

    color:inherit;

    cursor:pointer;

    text-align:left;

    transition:
        transform .3s ease,
        background .3s ease;

}


.ere-projects-app-preview:hover{

    transform:
        translateX(4px);

    background:
        rgba(255,255,255,.07);

}


.ere-projects-app-preview-image{

    width:77px;
    height:70px;

    overflow:hidden;

    border-radius:12px;

}


.ere-projects-app-preview-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

}


.ere-projects-app-preview-copy{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.ere-projects-app-preview-copy small{

    color:
        var(--ep-gold-light);

    font-size:6.5px;

    font-weight:800;

    text-transform:uppercase;

}


.ere-projects-app-preview-copy strong{

    margin-top:4px;

    overflow:hidden;

    color:#fff;

    font-size:10px;

    font-weight:800;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.ere-projects-app-preview-copy span{

    margin-top:4px;

    overflow:hidden;

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

    font-size:7px;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.ere-projects-app-preview-copy span i{

    margin-right:4px;

    color:
        var(--ep-gold);

}


.ere-projects-app-preview-count{

    min-width:49px;

    text-align:center;

}


.ere-projects-app-preview-count strong{

    display:block;

    color:
        var(--ep-gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size:20px;

}


.ere-projects-app-preview-count small{

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

    font-size:6px;

    text-transform:uppercase;

}


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

.ere-projects-app-footer{

    margin-top:16px;

    padding-top:14px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border-top:
        1px solid rgba(255,255,255,.07);

}


.ere-projects-app-footer > span{

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

    font-size:6.5px;

}


.ere-projects-app-footer > span i{

    margin-right:5px;

    color:
        var(--ep-gold);

}


.ere-projects-app-footer > div{

    display:flex;

    align-items:flex-end;

    gap:2px;

}


.ere-projects-app-footer > div i{

    width:3px;

    display:block;

    border-radius:3px;

    background:
        var(--ep-gold);

}


.ere-projects-app-footer > div i:nth-child(1){
    height:5px;
}

.ere-projects-app-footer > div i:nth-child(2){
    height:8px;
}

.ere-projects-app-footer > div i:nth-child(3){
    height:11px;
}


/* ============================================================
   SYSTEM STRIP
============================================================ */

.ere-projects-system-strip{

    position:relative;

    z-index:7;

    background:
        var(--ep-black);

    border-top:
        1px solid rgba(255,255,255,.05);

    border-bottom:
        1px solid rgba(255,255,255,.06);

}


.ere-projects-system-grid{

    min-height:100px;

    display:grid;

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

}


.ere-projects-system-grid > div{

    min-width:0;

    padding:21px 24px;

    display:flex;

    align-items:center;

    gap:13px;

    border-right:
        1px solid rgba(255,255,255,.07);

}


.ere-projects-system-grid > div:first-child{

    border-left:
        1px solid rgba(255,255,255,.07);

}


.ere-projects-system-grid > div > span:not(.ere-projects-live-dot){

    width:43px;
    height:43px;

    flex:0 0 43px;

    display:grid;

    place-items:center;

    border-radius:14px;

    border:
        1px solid rgba(216,188,125,.16);

    background:
        rgba(216,188,125,.07);

    color:
        var(--ep-gold-light);

}


.ere-projects-system-grid > div > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.ere-projects-system-grid small{

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

    font-size:7px;

    text-transform:uppercase;

    letter-spacing:.7px;

}


.ere-projects-system-grid strong{

    margin-top:3px;

    overflow:hidden;

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

    font-size:9px;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.ere-projects-live-dot{

    width:9px;
    height:9px;

    flex:0 0 9px;

    border-radius:50%;

    background:#65d382;

    box-shadow:
        0 0 0
        5px
        rgba(101,211,130,.10);

}


/* ============================================================
   COMMON META
============================================================ */

.ere-projects-section-meta{

    margin-bottom:23px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


.ere-projects-section-meta > span{

    display:flex;

    align-items:center;

    gap:8px;

    color:
        var(--ep-dark);

    font-size:8px;

    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;

}


.ere-projects-section-meta > span i{

    color:
        var(--ep-gold);

}


.ere-projects-section-meta small{

    color:#a0a4a8;

    font-size:7px;

    letter-spacing:.7px;

    text-transform:uppercase;

}


/* ============================================================
   FEATURED
============================================================ */

.ere-projects-featured-section{

    position:relative;

    padding:105px 0;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 8% 10%,
            rgba(185,154,93,.08),
            transparent 20%
        ),

        radial-gradient(
            circle at 92% 82%,
            rgba(130,148,216,.06),
            transparent 20%
        ),

        linear-gradient(
            180deg,
            #f8f5ef,
            #f0ebe3
        );

}


.ere-projects-featured-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(360px,.75fr);

    gap:20px;

    align-items:stretch;

}


/* ============================================================
   FEATURED IMAGE
============================================================ */

.ere-projects-featured-image{

    position:relative;

    min-height:600px;

    padding:0;

    overflow:hidden;

    border:0;

    border-radius:30px;

    background:#ddd;

    cursor:pointer;

    text-align:left;

    box-shadow:
        var(--ep-shadow-lg);

}


.ere-projects-featured-image img{

    width:100%;
    height:100%;

    position:absolute;

    inset:0;

    object-fit:cover;

    transform:
        scale(1.05)
        translate3d(
            0,
            var(--ep-featured-parallax,0px),
            0
        );

    transition:
        transform .8s ease;

}


.ere-projects-featured-image:hover img{

    transform:
        scale(1.08);

}


.ere-projects-featured-image-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(7,9,11,.08),
            rgba(7,9,11,.10) 45%,
            rgba(7,9,11,.65)
        );

}


.ere-projects-featured-play{

    position:absolute;

    left:50%;
    top:50%;

    width:74px;
    height:74px;

    display:grid;

    place-items:center;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.30);

    background:
        rgba(10,12,14,.44);

    color:#fff;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        transform .3s ease,
        background .3s ease;

}


.ere-projects-featured-image:hover
.ere-projects-featured-play{

    transform:
        translate(-50%,-50%)
        scale(1.08);

    background:
        var(--ep-gold);

    color:
        var(--ep-black);

}


.ere-projects-featured-counter{

    position:absolute;

    left:25px;
    bottom:25px;

    padding:10px 13px;

    border-radius:12px;

    background:
        rgba(10,12,14,.72);

    color:#fff;

    font-size:8px;

    font-weight:800;

    text-transform:uppercase;

    backdrop-filter:
        blur(10px);

}


/* ============================================================
   FEATURED COPY
============================================================ */

.ere-projects-featured-copy{

    position:relative;

    min-width:0;

    min-height:600px;

    padding:42px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

    border-radius:30px;

    border:
        1px solid rgba(185,154,93,.13);

    background:

        radial-gradient(
            circle at 90% 0%,
            rgba(216,188,125,.12),
            transparent 23%
        ),

        linear-gradient(
            145deg,
            #11151a,
            #1a2028
        );

    box-shadow:
        var(--ep-shadow-lg);

}


.ere-projects-featured-status{

    width:max-content;

    padding:8px 11px;

    display:flex;

    align-items:center;

    gap:7px;

    border-radius:30px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.07);

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

    font-size:7px;

    font-weight:800;

    text-transform:uppercase;

}


.ere-projects-featured-status i{

    width:6px;
    height:6px;

    border-radius:50%;

    background:#65d382;

}


.ere-projects-featured-status
.ere-projects-portfolio-dot{

    background:
        var(--ep-gold-light);

}


.ere-projects-featured-category{

    margin-top:27px;

    color:
        var(--ep-gold-light);

    font-size:8px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.ere-projects-featured-copy h2{

    margin:12px 0 0;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            39px,
            4vw,
            59px
        );

    line-height:1.02;

    font-weight:500;

}


.ere-projects-featured-copy h2 em{

    display:block;

    margin-top:5px;

    color:
        var(--ep-gold-light);

    font-weight:400;

    font-style:italic;

}


.ere-projects-featured-location{

    margin:
        19px 0 0;

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

    font-size:9px;

}


.ere-projects-featured-location i{

    margin-right:6px;

    color:
        var(--ep-gold);

}


.ere-projects-featured-description{

    margin:
        20px 0 0;

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

    font-size:11px;

    line-height:1.85;

}


/* ============================================================
   FEATURED META
============================================================ */

.ere-projects-featured-meta{

    margin-top:28px;

    display:grid;

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

    gap:7px;

}


.ere-projects-featured-meta > div{

    padding:13px;

    border-radius:14px;

    border:
        1px solid rgba(255,255,255,.07);

    background:
        rgba(255,255,255,.04);

}


.ere-projects-featured-meta small{

    display:block;

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

    font-size:6px;

    text-transform:uppercase;

}


.ere-projects-featured-meta strong{

    display:block;

    margin-top:4px;

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

    font-size:8px;

    line-height:1.4;

}


/* ============================================================
   FEATURED ACTIONS
============================================================ */

.ere-projects-featured-actions{

    margin-top:28px;

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:18px;

}


.ere-projects-inline-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

    font-size:8px;

    font-weight:800;

    text-decoration:none;

    text-transform:uppercase;

}


.ere-projects-inline-link i{

    color:
        var(--ep-gold-light);

    transition:
        transform .3s ease;

}


.ere-projects-inline-link:hover{

    color:
        var(--ep-gold-light);

}


.ere-projects-inline-link:hover i{

    transform:
        translateX(4px);

}


/* ============================================================
   COLLECTIONS
============================================================ */

.ere-projects-collections-section{

    position:relative;

    padding:105px 0 115px;

    background:

        radial-gradient(
            circle at 90% 5%,
            rgba(130,148,216,.05),
            transparent 22%
        ),

        linear-gradient(
            180deg,
            #faf8f4,
            #f3efe8
        );

}


.ere-projects-collections-heading{

    margin-bottom:40px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.55fr);

    align-items:end;

    gap:60px;

}


.ere-projects-heading-label{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    color:
        #967a48;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.6px;

    text-transform:uppercase;

}


.ere-projects-heading-label::before{

    content:"";

    width:31px;
    height:1px;

    background:
        var(--ep-gold);

}


.ere-projects-collections-heading h2{

    max-width:780px;

    margin:0;

    color:
        var(--ep-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            43px,
            4.5vw,
            65px
        );

    font-weight:500;

    line-height:1;

    letter-spacing:-2px;

}


.ere-projects-collections-heading h2 em{

    display:block;

    color:
        var(--ep-gold);

    font-style:italic;

    font-weight:400;

}


.ere-projects-collections-heading > p{

    margin:0;

    color:
        var(--ep-muted);

    font-size:12px;

    line-height:1.85;

}


/* ============================================================
   FILTER APP
============================================================ */

.ere-projects-filter-app{

    position:sticky;

    z-index:30;

    top:82px;

    margin-bottom:17px;

    padding:9px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-radius:20px;

    border:
        1px solid rgba(17,19,21,.08);

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 17px 45px
        rgba(12,14,16,.08);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

}


.ere-projects-filter-categories{

    min-width:0;

    display:flex;

    gap:5px;

    overflow-x:auto;

    scrollbar-width:none;

}


.ere-projects-filter-categories::-webkit-scrollbar{

    display:none;

}


.ere-projects-filter-chip{

    min-height:46px;

    padding:0 14px;

    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:9px;

    border:0;

    border-radius:13px;

    background:transparent;

    color:#777c81;

    cursor:pointer;

    font-family:inherit;

    font-size:9px;

    font-weight:800;

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

}


.ere-projects-filter-chip span{

    min-width:21px;
    height:21px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        rgba(0,0,0,.06);

    font-size:7px;

}


.ere-projects-filter-chip.is-active{

    background:
        var(--ep-black);

    color:#fff;

}


.ere-projects-filter-chip.is-active span{

    background:
        var(--ep-gold);

    color:
        var(--ep-black);

}


/* ============================================================
   FILTER CONTROLS
============================================================ */

.ere-projects-filter-controls{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:6px;

}


.ere-projects-filter-search,
.ere-projects-filter-location{

    min-height:46px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:0 12px;

    border-radius:13px;

    border:
        1px solid rgba(17,19,21,.08);

    background:
        #f8f6f2;

}


.ere-projects-filter-search > i,
.ere-projects-filter-location > i:first-child{

    color:
        var(--ep-gold);

    font-size:9px;

}


.ere-projects-filter-search input{

    width:165px;

    border:0;
    outline:0;

    background:transparent;

    color:
        var(--ep-dark);

    font-family:inherit;

    font-size:9px;

}


.ere-projects-filter-location select{

    max-width:195px;

    padding:0 17px 0 0;

    appearance:none;

    border:0;
    outline:0;

    background:transparent;

    color:
        var(--ep-dark);

    font-family:inherit;

    font-size:8px;

    cursor:pointer;

}


.ere-projects-filter-location > i:last-child{

    color:#a3a6a9;

    font-size:6px;

}


.ere-projects-filter-reset{

    width:46px;
    height:46px;

    flex:0 0 46px;

    display:grid;

    place-items:center;

    border:0;

    border-radius:13px;

    background:
        var(--ep-black);

    color:
        var(--ep-gold-light);

    cursor:pointer;

}


/* ============================================================
   RESULT META
============================================================ */

.ere-projects-result-meta{

    margin-bottom:21px;

    padding:10px 4px 15px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-bottom:
        1px solid rgba(17,19,21,.08);

    color:#969a9e;

    font-size:7px;

    text-transform:uppercase;

    letter-spacing:.4px;

}


.ere-projects-result-meta > div{

    display:flex;

    align-items:center;

    gap:7px;

}


.ere-projects-result-meta strong{

    color:
        var(--ep-dark);

}


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

.ere-projects-grid{

    display:grid;

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

    gap:20px;

}


/* ============================================================
   CARD
============================================================ */

.ere-projects-card{

    min-width:0;

    overflow:hidden;

    border-radius:26px;

    border:
        1px solid rgba(185,154,93,.12);

    background:#fff;

    box-shadow:
        var(--ep-shadow);

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

}


.ere-projects-card:hover{

    transform:
        translateY(-7px);

    border-color:
        rgba(185,154,93,.28);

    box-shadow:
        var(--ep-shadow-lg);

}


/* ============================================================
   PREVIEW BENTO
============================================================ */

.ere-projects-card-preview{

    position:relative;

    height:390px;

    display:grid;

    gap:3px;

    overflow:hidden;

    background:#ddd;

}


.ere-projects-preview-count-1{

    grid-template-columns:1fr;

}


.ere-projects-preview-count-2{

    grid-template-columns:
        1.45fr .75fr;

}


.ere-projects-preview-count-3{

    grid-template-columns:
        1.45fr .75fr;

    grid-template-rows:
        1fr 1fr;

}


.ere-projects-preview-count-3
.ere-projects-preview-image:first-child{

    grid-row:
        1 / 3;

}


.ere-projects-preview-image{

    position:relative;

    min-width:0;

    padding:0;

    overflow:hidden;

    border:0;

    background:#ddd;

    cursor:pointer;

}


.ere-projects-preview-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .7s
        cubic-bezier(.2,.7,.2,1);

}


.ere-projects-preview-image:hover img{

    transform:
        scale(1.05);

}


.ere-projects-more-photos{

    position:absolute;

    inset:0;

    display:grid;

    place-items:center;

    background:
        rgba(8,10,12,.58);

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:27px;

}


/* ============================================================
   CARD TOP
============================================================ */

.ere-projects-card-top{

    position:absolute;

    z-index:5;

    left:15px;
    right:15px;
    top:15px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    pointer-events:none;

}


.ere-projects-card-status,
.ere-projects-card-photo-count{

    min-height:29px;

    padding:0 10px;

    display:flex;

    align-items:center;

    gap:7px;

    border-radius:30px;

    background:
        rgba(10,12,14,.76);

    color:#fff;

    font-size:7px;

    font-weight:800;

    text-transform:uppercase;

    backdrop-filter:
        blur(9px);

}


.ere-projects-card-status i{

    width:6px;
    height:6px;

    border-radius:50%;

}


.ere-projects-card-status.is-available i{

    background:#65d382;

}


.ere-projects-card-status.is-portfolio i{

    background:
        var(--ep-gold-light);

}


.ere-projects-card-photo-count i{

    color:
        var(--ep-gold-light);

}


/* ============================================================
   CARD CONTENT
============================================================ */

.ere-projects-card-content{

    padding:24px;

}


.ere-projects-card-meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.ere-projects-card-meta span{

    color:
        var(--ep-gold);

    font-size:7px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1.2px;

}


.ere-projects-card-meta small{

    color:#aaaeb1;

    font-size:6.5px;

}


.ere-projects-card h3{

    margin:
        12px 0 0;

    color:
        var(--ep-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:30px;

    font-weight:600;

    line-height:1.05;

}


.ere-projects-card h3 em{

    display:block;

    margin-top:4px;

    color:
        var(--ep-gold);

    font-size:.70em;

    font-weight:400;

    font-style:italic;

}


.ere-projects-card-location{

    margin:
        13px 0 0;

    color:#8b9094;

    font-size:8px;

}


.ere-projects-card-location i{

    margin-right:5px;

    color:
        var(--ep-gold);

}


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

.ere-projects-card-footer{

    margin-top:23px;

    padding-top:16px;

    display:grid;

    grid-template-columns:
        1fr 45px;

    gap:7px;

    border-top:
        1px solid rgba(17,19,21,.07);

}


.ere-projects-card-gallery{

    min-height:45px;

    padding:0 14px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border:0;

    border-radius:13px;

    background:
        var(--ep-black);

    color:#fff;

    cursor:pointer;

    font-family:inherit;

    font-size:8px;

    font-weight:800;

    text-align:left;

}


.ere-projects-card-gallery i{

    color:
        var(--ep-gold-light);

    font-size:7px;

    transition:
        transform .3s ease;

}


.ere-projects-card-gallery:hover i{

    transform:
        translateX(4px);

}


.ere-projects-card-footer > a{

    width:45px;
    height:45px;

    display:grid;

    place-items:center;

    border-radius:13px;

    border:
        1px solid rgba(17,19,21,.08);

    background:
        #f7f5f0;

    color:
        var(--ep-gold);

    text-decoration:none;

}


/* ============================================================
   EMPTY
============================================================ */

.ere-projects-filter-empty,
.ere-projects-no-gallery{

    padding:80px 25px;

    text-align:center;

    border-radius:25px;

    border:
        1px solid rgba(17,19,21,.07);

    background:#fff;

}


.ere-projects-filter-empty > span,
.ere-projects-no-gallery > span{

    width:72px;
    height:72px;

    margin:
        0 auto 18px;

    display:grid;

    place-items:center;

    border-radius:20px;

    background:
        #f5f2ec;

    color:
        var(--ep-gold);

    font-size:21px;

}


.ere-projects-filter-empty h3,
.ere-projects-no-gallery h2{

    margin:0;

    color:
        var(--ep-dark);

    font-family:
        "Playfair Display",
        serif;

    font-size:29px;

    font-weight:500;

}


.ere-projects-filter-empty p,
.ere-projects-no-gallery p{

    max-width:480px;

    margin:
        10px auto 0;

    color:
        var(--ep-muted);

    font-size:11px;

    line-height:1.75;

}


.ere-projects-filter-empty button{

    min-height:44px;

    margin-top:20px;

    padding:0 16px;

    border:0;

    border-radius:12px;

    background:
        var(--ep-black);

    color:#fff;

    cursor:pointer;

    font-family:inherit;

    font-size:8px;

    font-weight:800;

}


/* ============================================================
   LOCATIONS
============================================================ */

.ere-projects-locations-section{

    position:relative;

    padding:105px 0;

    overflow:hidden;

    background:

        linear-gradient(
            145deg,
            #0d1116,
            #171d24
        );

}


.ere-projects-locations-section
.ere-projects-section-meta > span{

    color:#fff;

}


.ere-projects-locations-section
.ere-projects-section-meta small{

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

}


.ere-projects-locations-heading{

    max-width:760px;

    margin-bottom:39px;

}


.ere-projects-locations-heading h2{

    margin:0;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            42px,
            4.3vw,
            61px
        );

    line-height:1.02;

    font-weight:500;

}


.ere-projects-locations-heading h2 em{

    display:block;

    color:
        var(--ep-gold-light);

    font-weight:400;

    font-style:italic;

}


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

.ere-projects-location-grid{

    display:grid;

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

    gap:14px;

}


.ere-projects-location-card{

    position:relative;

    min-height:330px;

    padding:0;

    overflow:hidden;

    border:0;

    border-radius:23px;

    background:#252a30;

    cursor:pointer;

    text-align:left;

}


.ere-projects-location-card img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s ease;

}


.ere-projects-location-card:hover img{

    transform:
        scale(1.06);

}


.ere-projects-location-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(7,9,11,.13),
            rgba(7,9,11,.35) 45%,
            rgba(7,9,11,.91)
        );

}


.ere-projects-location-index{

    position:absolute;

    right:17px;
    top:15px;

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

    font-family:
        "Playfair Display",
        serif;

    font-size:19px;

}


.ere-projects-location-card > div{

    position:absolute;

    z-index:3;

    left:22px;
    right:22px;
    bottom:22px;

}


.ere-projects-location-card small{

    color:
        var(--ep-gold-light);

    font-size:7px;

    font-weight:800;

    text-transform:uppercase;

}


.ere-projects-location-card strong{

    display:block;

    margin-top:6px;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:26px;

    line-height:1.05;

    font-weight:500;

}


.ere-projects-location-card > div > span{

    margin-top:12px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

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

    font-size:7px;

    text-transform:uppercase;

}


.ere-projects-location-card > div > span i{

    color:
        var(--ep-gold-light);

}


/* ============================================================
   CTA
============================================================ */

.ere-projects-cta-section{

    padding:105px 0;

    background:
        var(--ep-cream);

}


.ere-projects-cta{

    position:relative;

    min-height:330px;

    padding:55px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    border-radius:30px;

    background:

        radial-gradient(
            circle at 85% 0%,
            rgba(216,188,125,.14),
            transparent 24%
        ),

        linear-gradient(
            145deg,
            #11151a,
            #080a0d
        );

    box-shadow:
        var(--ep-shadow-lg);

}


.ere-projects-cta-orbit{

    position:absolute;

    width:440px;
    height:440px;

    right:-190px;
    bottom:-260px;

    border-radius:50%;

    border:
        1px solid rgba(130,148,216,.12);

}


.ere-projects-cta > div:not(.ere-projects-cta-orbit){

    position:relative;

    z-index:2;

}


.ere-projects-cta > div:nth-child(2){

    max-width:750px;

}


.ere-projects-cta > div:nth-child(2) > span{

    color:
        var(--ep-gold-light);

    font-size:8px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.ere-projects-cta h2{

    margin:11px 0 0;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            39px,
            4.2vw,
            58px
        );

    line-height:1.04;

    font-weight:500;

}


.ere-projects-cta h2 em{

    display:block;

    color:
        var(--ep-gold-light);

    font-style:italic;

    font-weight:400;

}


.ere-projects-cta p{

    max-width:620px;

    margin:
        17px 0 0;

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

    font-size:11px;

    line-height:1.85;

}


.ere-projects-cta-actions{

    flex:0 0 auto;

    display:flex;

    gap:9px;

}


/* ============================================================
   FULLSCREEN VIEWER
============================================================ */

.ere-projects-viewer{

    position:fixed;

    inset:0;

    z-index:200000;

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.ere-projects-viewer.is-open{

    visibility:visible;

    opacity:1;

    pointer-events:auto;

}


.ere-projects-viewer-backdrop{

    position:absolute;

    inset:0;

    background:
        rgba(5,7,9,.91);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


.ere-projects-viewer-shell{

    position:absolute;

    inset:15px;

    overflow:hidden;

    display:grid;

    grid-template-rows:
        64px
        minmax(0,1fr)
        auto;

    border-radius:26px;

    border:
        1px solid rgba(255,255,255,.09);

    background:
        #0b0e12;

    box-shadow:
        0 40px 110px
        rgba(0,0,0,.55);

}


/* ============================================================
   VIEWER TOP
============================================================ */

.ere-projects-viewer-top{

    min-width:0;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

}


.ere-projects-viewer-brand{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.ere-projects-viewer-brand span{

    color:
        var(--ep-gold-light);

    font-size:6px;

    font-weight:800;

    letter-spacing:1.3px;

    text-transform:uppercase;

}


.ere-projects-viewer-brand strong{

    margin-top:3px;

    overflow:hidden;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:17px;

    font-weight:500;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.ere-projects-viewer-top-actions{

    display:flex;

    align-items:center;

    gap:14px;

}


.ere-projects-viewer-top-actions > span{

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

    font-size:8px;

}


.ere-projects-viewer-top-actions button{

    width:41px;
    height:41px;

    display:grid;

    place-items:center;

    border:0;

    border-radius:50%;

    background:
        rgba(255,255,255,.07);

    color:#fff;

    cursor:pointer;

}


/* ============================================================
   VIEWER BODY
============================================================ */

.ere-projects-viewer-body{

    position:relative;

    min-width:0;
    min-height:0;

    padding:16px 80px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.ere-projects-viewer-stage{

    width:100%;
    height:100%;

    min-height:0;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


.ere-projects-viewer-stage img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

}


.ere-projects-viewer-arrow{

    position:absolute;

    z-index:5;

    top:50%;

    width:48px;
    height:48px;

    display:grid;

    place-items:center;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:50%;

    background:
        rgba(255,255,255,.05);

    color:#fff;

    cursor:pointer;

    backdrop-filter:
        blur(8px);

}


.ere-projects-viewer-prev{

    left:20px;

}


.ere-projects-viewer-next{

    right:20px;

}


/* ============================================================
   VIEWER BOTTOM
============================================================ */

.ere-projects-viewer-bottom{

    min-width:0;

    padding:15px 18px;

    display:grid;

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

    align-items:center;

    gap:18px;

    border-top:
        1px solid rgba(255,255,255,.07);

    background:
        #101419;

}


.ere-projects-viewer-info{

    min-width:0;

}


.ere-projects-viewer-info > span{

    color:
        var(--ep-gold-light);

    font-size:6px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;

}


.ere-projects-viewer-info h3{

    margin:
        5px 0 0;

    overflow:hidden;

    color:#fff;

    font-family:
        "Playfair Display",
        serif;

    font-size:18px;

    font-weight:500;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.ere-projects-viewer-info p{

    margin:
        5px 0 0;

    overflow:hidden;

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

    font-size:7px;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.ere-projects-viewer-info p i{

    margin-right:5px;

    color:
        var(--ep-gold);

}


/* ============================================================
   THUMBS
============================================================ */

.ere-projects-viewer-thumbs{

    min-width:0;

    display:flex;

    align-items:center;

    gap:6px;

    overflow-x:auto;

    scrollbar-width:none;

}


.ere-projects-viewer-thumbs::-webkit-scrollbar{

    display:none;

}


.ere-projects-viewer-thumbs button{

    width:65px;
    height:52px;

    flex:0 0 65px;

    padding:0;

    overflow:hidden;

    border:
        2px solid transparent;

    border-radius:9px;

    background:#252a30;

    cursor:pointer;

    opacity:.45;

    transition:
        opacity .25s ease,
        border-color .25s ease;

}


.ere-projects-viewer-thumbs button.is-active{

    opacity:1;

    border-color:
        var(--ep-gold);

}


.ere-projects-viewer-thumbs img{

    width:100%;
    height:100%;

    object-fit:cover;

}


/* ============================================================
   VIEWER ACTIONS
============================================================ */

.ere-projects-viewer-actions{

    display:flex;

    gap:6px;

}


.ere-projects-viewer-actions a{

    min-height:43px;

    padding:0 14px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:12px;

    text-decoration:none;

    font-size:7px;

    font-weight:800;

    text-transform:uppercase;

}


.ere-projects-viewer-actions a:first-child{

    background:
        var(--ep-gold);

    color:
        var(--ep-black);

}


.ere-projects-viewer-actions a:last-child{

    border:
        1px solid rgba(255,255,255,.10);

    color:#fff;

}


/* ============================================================
   REVEALS
============================================================ */

.ere-projects-reveal{

    opacity:0;

    transform:
        translateY(30px);

    transition:
        opacity .75s ease,
        transform .75s
        cubic-bezier(.2,.75,.2,1);

}


.ere-projects-reveal.is-visible{

    opacity:1;

    transform:none;

}


/* ============================================================
   TILT
============================================================ */

.ere-projects-tilt{

    transform-style:
        preserve-3d;

    transition:
        transform .18s ease;

}


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

@media(max-width:1100px){

    .ere-projects-hero-grid{

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

        gap:35px;

    }


    .ere-projects-featured-grid{

        grid-template-columns:
            1fr 420px;

    }


    .ere-projects-location-grid{

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

    }


    .ere-projects-filter-app{

        align-items:stretch;

        flex-direction:column;

    }


    .ere-projects-filter-controls{

        width:100%;

    }


    .ere-projects-filter-search{

        flex:1;

    }


    .ere-projects-filter-search input{

        width:100%;

    }

}


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

@media(max-width:900px){

    .ere-projects-container{

        width:
            calc(100% - 32px);

    }


    /* HERO */

    .ere-projects-hero{

        min-height:auto;

    }


    .ere-projects-hero-grid{

        min-height:auto;

        padding:
            60px 0;

        grid-template-columns:1fr;

        gap:22px;

    }


    .ere-projects-hero-copy{

        max-width:none;

        padding:31px;

        transform:none !important;

    }


    .ere-projects-hero-app{

        max-width:none;

        justify-self:stretch;

    }


    .ere-projects-app-panel{

        transform:none !important;

    }


    /* SYSTEM */

    .ere-projects-system-grid{

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

    }


    /* FEATURED */

    .ere-projects-featured-grid{

        grid-template-columns:1fr;

    }


    .ere-projects-featured-image{

        min-height:500px;

    }


    .ere-projects-featured-copy{

        min-height:auto;

    }


    /* COLLECTIONS */

    .ere-projects-collections-heading{

        grid-template-columns:1fr;

        gap:20px;

    }


    .ere-projects-grid{

        grid-template-columns:1fr;

    }


    .ere-projects-filter-app{

        position:relative;

        top:auto;

    }


    /* CTA */

    .ere-projects-cta{

        display:block;

    }


    .ere-projects-cta-actions{

        margin-top:26px;

    }


    /* 3D OFF */

    .ere-projects-tilt{

        transform:none !important;

    }


    .ere-projects-card:hover{

        transform:
            translateY(-3px);

    }


    /* VIEWER */

    .ere-projects-viewer-bottom{

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

    }


    .ere-projects-viewer-actions{

        grid-column:
            1 / -1;

    }

}


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

@media(max-width:680px){

    .ere-projects-container{

        width:
            calc(100% - 22px);

    }


    /* HERO */

    .ere-projects-hero-grid{

        padding:
            40px 0;

    }


    .ere-projects-hero-copy{

        padding:
            24px 19px;

        border-radius:21px;

        backdrop-filter:
            blur(9px);

        -webkit-backdrop-filter:
            blur(9px);

    }


    .ere-projects-hero-copy h1{

        font-size:
            43px;

        line-height:1;

        letter-spacing:-1.2px;

    }


    .ere-projects-hero-copy > p{

        font-size:12px;

        line-height:1.7;

    }


    .ere-projects-hero-actions{

        display:grid;

        grid-template-columns:1fr;

    }


    .ere-projects-hero-actions a{

        width:100%;

    }


    /* APP */

    .ere-projects-app-panel{

        padding:17px;

        border-radius:21px;

        box-shadow:
            0 20px 50px
            rgba(0,0,0,.25);

    }


    .ere-projects-app-stats strong{

        font-size:19px;

    }


    .ere-projects-app-preview{

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

    }


    .ere-projects-app-preview-image{

        width:62px;
        height:59px;

    }


    /* SYSTEM */

    .ere-projects-system-grid{

        grid-template-columns:1fr 1fr;

    }


    .ere-projects-system-grid > div{

        padding:16px 12px;

    }


    /* FEATURED */

    .ere-projects-featured-section,
    .ere-projects-collections-section,
    .ere-projects-locations-section,
    .ere-projects-cta-section{

        padding:
            72px 0;

    }


    .ere-projects-featured-image{

        min-height:390px;

        border-radius:21px;

    }


    .ere-projects-featured-copy{

        padding:
            30px 22px;

        border-radius:21px;

    }


    .ere-projects-featured-copy h2{

        font-size:39px;

    }


    .ere-projects-featured-meta{

        grid-template-columns:1fr;

    }


    /* HEAD */

    .ere-projects-section-meta small{

        display:none;

    }


    .ere-projects-collections-heading h2,
    .ere-projects-locations-heading h2{

        font-size:39px;

        letter-spacing:-1px;

    }


    /* FILTER */

    .ere-projects-filter-app{

        padding:7px;

        border-radius:17px;

    }


    .ere-projects-filter-controls{

        display:grid;

        grid-template-columns:
            1fr 46px;

    }


    .ere-projects-filter-search,
    .ere-projects-filter-location{

        min-width:0;

    }


    .ere-projects-filter-search{

        grid-column:
            1 / -1;

    }


    .ere-projects-filter-location{

        width:100%;

    }


    .ere-projects-filter-location select{

        width:100%;
        max-width:none;

    }


    .ere-projects-result-meta > span{

        display:none;

    }


    /* CARDS */

    .ere-projects-card{

        border-radius:20px;

    }


    .ere-projects-card-preview{

        height:325px;

    }


    .ere-projects-card-content{

        padding:20px 17px;

    }


    .ere-projects-card h3{

        font-size:26px;

    }


    /* LOCATION */

    .ere-projects-location-grid{

        grid-template-columns:1fr;

    }


    .ere-projects-location-card{

        min-height:290px;

        border-radius:20px;

    }


    /* CTA */

    .ere-projects-cta{

        min-height:0;

        padding:
            37px 22px;

        border-radius:22px;

    }


    .ere-projects-cta h2{

        font-size:37px;

    }


    .ere-projects-cta-actions{

        display:grid;

        grid-template-columns:1fr;

    }


    .ere-projects-cta-actions a{

        width:100%;

    }


    /* VIEWER */

    .ere-projects-viewer-shell{

        inset:0;

        border:0;

        border-radius:0;

        grid-template-rows:
            61px
            minmax(0,1fr)
            auto;

    }


    .ere-projects-viewer-body{

        padding:
            10px 0;

    }


    .ere-projects-viewer-arrow{

        width:40px;
        height:40px;

        background:
            rgba(8,10,12,.65);

    }


    .ere-projects-viewer-prev{

        left:8px;

    }


    .ere-projects-viewer-next{

        right:8px;

    }


    .ere-projects-viewer-bottom{

        padding:13px;

        grid-template-columns:1fr;

        gap:12px;

    }


    .ere-projects-viewer-info h3{

        white-space:normal;

    }


    .ere-projects-viewer-thumbs{

        order:1;

    }


    .ere-projects-viewer-actions{

        order:2;

        display:grid;

        grid-template-columns:1fr;

    }


    .ere-projects-viewer-actions a{

        width:100%;

    }


    .ere-projects-viewer-thumbs button{

        width:58px;
        height:47px;

        flex-basis:58px;

    }

}


/* ============================================================
   VERY SMALL
============================================================ */

@media(max-width:390px){

    .ere-projects-hero-copy h1{

        font-size:39px;

    }


    .ere-projects-card-preview{

        height:290px;

    }


    .ere-projects-system-grid{

        grid-template-columns:1fr;

    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

    .ere-projects-page *,
    .ere-projects-page *::before,
    .ere-projects-page *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }


    .ere-projects-reveal{

        opacity:1 !important;

        transform:none !important;

    }


    .ere-projects-tilt{

        transform:none !important;

    }

}


/* ============================================================
   EMPIRE REAL ESTATE NI
   MOBILE APP QUICK SEARCH
   CORRECCIÓN BASADA EN EL HTML REAL DEL HEADER
============================================================ */


/* ============================================================
   QUICK SEARCH WRAPPER
============================================================ */

.ere-mobile-drawer .ere-app-quick-search{
    position:relative;

    width:100%;

    margin-top:27px;
    padding-top:23px;
    padding-bottom:26px;

    border-top:
        1px solid rgba(255,255,255,.07);

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


/* ============================================================
   TITLE
============================================================ */

.ere-mobile-drawer .ere-app-quick-title{
    display:flex;

    align-items:center;

    gap:10px;

    margin:0 0 14px;

    color:#d8bc7d !important;

    font-family:"Manrope",sans-serif;

    font-size:10px !important;

    font-weight:800;

    line-height:1.3;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.ere-mobile-drawer .ere-app-quick-title::before{
    content:"";

    width:25px;
    height:1px;

    flex:0 0 25px;

    background:#b99a5d;
}


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

.ere-mobile-drawer .ere-app-quick-grid{
    width:100%;

    display:grid !important;

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

    gap:8px !important;
}


/* ============================================================
   CARD
============================================================ */

.ere-mobile-drawer .ere-app-quick-item,
.ere-mobile-drawer .ere-app-quick-item:link,
.ere-mobile-drawer .ere-app-quick-item:visited{
    position:relative;

    min-width:0;
    min-height:105px;

    padding:14px !important;

    display:grid !important;

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

    grid-template-rows:
        auto
        auto;

    column-gap:10px;
    row-gap:2px;

    align-items:center;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.075);

    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.022)
        );

    color:#ffffff !important;

    text-decoration:none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


/* sutil brillo */

.ere-mobile-drawer .ere-app-quick-item::after{
    content:"";

    position:absolute;

    width:95px;
    height:95px;

    right:-55px;
    top:-55px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(216,188,125,.08),
            transparent 70%
        );

    pointer-events:none;
}


/* ============================================================
   ICON
============================================================ */

.ere-mobile-drawer .ere-app-quick-icon{
    grid-column:1;
    grid-row:1 / 3;

    width:38px;
    height:38px;

    display:grid !important;

    place-items:center;

    border-radius:12px;

    border:
        1px solid rgba(216,188,125,.14);

    background:
        rgba(216,188,125,.075);

    color:#d8bc7d !important;

    font-size:13px;

    transition:
        transform .25s ease,
        background .25s ease;
}


.ere-mobile-drawer .ere-app-quick-icon i{
    color:#d8bc7d !important;
}


/* ============================================================
   STRONG
============================================================ */

.ere-mobile-drawer .ere-app-quick-item strong{
    grid-column:2;
    grid-row:1;

    min-width:0;

    display:block;

    margin:0 !important;

    color:#ffffff !important;

    font-family:"Manrope",sans-serif;

    font-size:13px !important;

    font-weight:800 !important;

    line-height:1.2 !important;

    text-decoration:none !important;
}


/* ============================================================
   SMALL DESCRIPTION
============================================================ */

.ere-mobile-drawer .ere-app-quick-item small{
    grid-column:2;
    grid-row:2;

    min-width:0;

    display:block;

    margin:0 !important;

    color:
        rgba(255,255,255,.40) !important;

    font-family:"Manrope",sans-serif;

    font-size:9px !important;

    font-weight:500;

    line-height:1.4;

    text-decoration:none !important;
}


/* ============================================================
   HOVER
============================================================ */

@media (hover:hover){

    .ere-mobile-drawer .ere-app-quick-item:hover{
        transform:
            translateY(-3px);

        border-color:
            rgba(216,188,125,.24);

        background:
            linear-gradient(
                145deg,
                rgba(216,188,125,.09),
                rgba(255,255,255,.035)
            );
    }


    .ere-mobile-drawer
    .ere-app-quick-item:hover
    .ere-app-quick-icon{
        transform:
            scale(1.05);

        background:
            rgba(216,188,125,.13);
    }

}


/* ============================================================
   QUITAR CUALQUIER ESTADO AZUL / MORADO DEL NAVEGADOR
============================================================ */

.ere-mobile-drawer .ere-app-quick-grid a,
.ere-mobile-drawer .ere-app-quick-grid a:link,
.ere-mobile-drawer .ere-app-quick-grid a:visited,
.ere-mobile-drawer .ere-app-quick-grid a:active{
    color:#ffffff !important;

    text-decoration:none !important;

    -webkit-text-decoration:none !important;
}


/* ============================================================
   MOBILE DRAWER INTRO - NORMALIZACIÓN
============================================================ */

.ere-mobile-drawer .ere-mobile-menu-intro{
    width:100%;

    padding-bottom:0;
}


.ere-mobile-drawer .ere-mobile-menu-intro > span{
    display:block;

    margin:0 0 13px;

    color:#d8bc7d !important;

    font-size:9px !important;

    font-weight:800;

    letter-spacing:1.8px;

    text-transform:uppercase;
}


.ere-mobile-drawer .ere-mobile-menu-intro h3{
    width:100%;
    max-width:360px;

    margin:0;

    color:#ffffff !important;

    font-family:
        "Playfair Display",
        serif;

    font-size:37px !important;

    font-weight:500;

    line-height:1.03;

    letter-spacing:-.7px;
}


.ere-mobile-drawer .ere-mobile-menu-intro p{
    width:100%;
    max-width:350px;

    margin:13px 0 0;

    color:
        rgba(255,255,255,.58) !important;

    font-family:
        "Manrope",
        sans-serif;

    font-size:11px !important;

    line-height:1.7;
}


/* ============================================================
   NAVIGATION SEPARATION
============================================================ */

.ere-mobile-drawer .ere-mobile-navigation{
    width:100%;

    margin-top:0;

    border-top:0 !important;
}


/* ============================================================
   NAV LINKS
============================================================ */

.ere-mobile-drawer .ere-mobile-nav-link,
.ere-mobile-drawer .ere-mobile-nav-link:link,
.ere-mobile-drawer .ere-mobile-nav-link:visited{
    position:relative;

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

    padding:12px 0;

    display:grid;

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

    align-items:center;

    gap:12px;

    border-bottom:
        1px solid rgba(255,255,255,.075);

    color:#ffffff !important;

    text-decoration:none !important;
}


.ere-mobile-drawer .ere-mobile-nav-icon{
    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        rgba(255,255,255,.055);

    color:#d8bc7d !important;

    font-size:11px;
}


.ere-mobile-drawer
.ere-mobile-nav-link
> span:nth-child(2){
    min-width:0;

    display:flex;

    flex-direction:column;

    color:#ffffff !important;

    font-family:
        "Manrope",
        sans-serif;

    font-size:14px !important;

    font-weight:800;

    line-height:1.25;
}


.ere-mobile-drawer
.ere-mobile-nav-link
small{
    margin-bottom:4px;

    color:
        rgba(216,188,125,.38) !important;

    font-size:7px !important;

    font-weight:800;

    letter-spacing:1.1px;
}


.ere-mobile-drawer
.ere-mobile-nav-link
> i:last-child{
    justify-self:end;

    color:
        rgba(216,188,125,.37) !important;

    font-size:9px;
}


/* ============================================================
   DRAWER GENERAL
============================================================ */

@media(max-width:900px){

    .ere-mobile-drawer{
        color:#ffffff;

        background:
            linear-gradient(
                145deg,
                #0c0f12,
                #11151a
            ) !important;
    }


    .ere-mobile-drawer-content{
        width:100%;

        padding:
            34px 18px
            40px !important;
    }

}


/* ============================================================
   MOBILE <= 480
============================================================ */

@media(max-width:480px){

    .ere-mobile-drawer .ere-app-quick-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:7px !important;
    }


    .ere-mobile-drawer .ere-app-quick-item{
        min-height:102px;

        padding:12px !important;

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

        column-gap:8px;
    }


    .ere-mobile-drawer .ere-app-quick-icon{
        width:34px;
        height:34px;

        border-radius:10px;

        font-size:11px;
    }


    .ere-mobile-drawer
    .ere-app-quick-item strong{
        font-size:12px !important;
    }


    .ere-mobile-drawer
    .ere-app-quick-item small{
        font-size:8px !important;
    }


    .ere-mobile-drawer
    .ere-mobile-menu-intro h3{
        font-size:35px !important;
    }

}


/* ============================================================
   VERY SMALL
============================================================ */

@media(max-width:360px){

    .ere-mobile-drawer .ere-app-quick-grid{
        grid-template-columns:1fr !important;
    }


    .ere-mobile-drawer .ere-app-quick-item{
        min-height:79px;
    }

}