/* =========================================================
   IMPORTS
   ========================================================= */
@import "../../css/layouts/layout-06/layout-06.css";

/* client structure */
@import "client-about.css";
@import "client-terms.css";

/* options */
@import "../../css/options/house-hero-mosaic/house-hero-mosaic-dynamic.css";

/* fonts */
@import "../../css/structure/fonts/quicksand.css";
@import "../../css/structure/fonts/quicksand--title.css";

/* icons */
@import "../../css/structure/icons/hugeicons-solid-rounded.css";

/* =========================================================
   CORES DO CLIENTE
   Não usar diretamente em nenhum css de css/structure.
   Usar somente aqui, para definir as variáveis dos componentes e módulos.
   ========================================================= */
:root {
    /* client color 1 */
    --client-color1-50: #FCF4F7;
    --client-color1-100: #F7E4EC;
    --client-color1-200: #EFC5D6;
    --client-color1-300: #E39AB8;
    --client-color1-400: #D36291;
    --client-color1-500: #C01F62;
    --client-color1-600: #A91B56;
    --client-color1-700: #8E1749;
    --client-color1-800: #73133B;
    --client-color1-900: #5C0F2F;
    --client-color1-950: #3D0A1F;

    /* client color 2 */
    --client-color2-50: #F7F7FB;
    --client-color2-100: #ECEBF5;
    --client-color2-200: #D6D4E9;
    --client-color2-300: #B7B4D8;
    --client-color2-400: #908BC3;
    --client-color2-500: #6059A9;
    --client-color2-600: #544E95;
    --client-color2-700: #47427D;
    --client-color2-800: #3A3565;
    --client-color2-900: #2E2B51;
    --client-color2-950: #1F1C36;

    /* client color 3 */
    --client-color3-50: #FEFAF5;
    --client-color3-100: #FCF4E8;
    --client-color3-200: #F9E7CD;
    --client-color3-300: #F5D6A8;
    --client-color3-400: #EFBF77;
    --client-color3-500: #E8A33D;
    --client-color3-600: #CC8F36;
    --client-color3-700: #AC792D;
    --client-color3-800: #8B6225;
    --client-color3-900: #6F4E1D;
    --client-color3-950: #4A3414;

    /* client accent */
    --client-accent-50: var(--client-color2-50);
    --client-accent-100: var(--client-color2-100);
    --client-accent-200: var(--client-color2-200);
    --client-accent-300: var(--client-color2-300);
    --client-accent-400: var(--client-color2-400);
    --client-accent-500: var(--client-color2-500);
    --client-accent-600: var(--client-color2-600);
    --client-accent-700: var(--client-color2-700);
    --client-accent-800: var(--client-color2-800);
    --client-accent-900: var(--client-color2-900);
    --client-accent-950: var(--client-color2-950);

    /* transparent black */
    --transp-black-100: rgba(22, 22, 29, 0.07);
    --transp-black-300: rgba(22, 22, 29, 0.2);
    --transp-black-500: rgba(22, 22, 29, 0.4);
    --transp-black-700: rgba(22, 22, 29, 0.65);
    --transp-black-900: rgba(22, 22, 29, 0.9);

    /* transparent white */
    --transp-white-100: rgba(255, 255, 255, 0.07);
    --transp-white-300: rgba(255, 255, 255, 0.2);
    --transp-white-500: rgba(255, 255, 255, 0.4);
    --transp-white-700: rgba(255, 255, 255, 0.65);
    --transp-white-900: rgba(255, 255, 255, 0.9);

    /* danger */
    --danger-100: #FDE8E8;
    --danger-300: #F5A3A3;
    --danger-500: #DC4C4C;
    --danger-700: #B83232;
    --danger-900: #7F2020;
    --transp-danger: #DC4C4C30;

    /* success */
    --success-100: #E8F6EB;
    --success-300: #9AD9A8;
    --success-500: #40B15C;
    --success-700: #2F8745;
    --success-900: #1D5C2D;
    --transp-success: #40B15C30;

    /* gray scale */
    --white: #ffffff;
    --gray-50: #F6F6F9;
    --gray-100: #E7E7EE;
    --gray-200: #D6D6E0;
    --gray-300: #C0C0CE;
    --gray-400: #9090A2;
    --gray-500: #68687D;
    --gray-600: #49495A;
    --gray-700: #363644;
    --gray-800: #22222B;
    --gray-900: #16161D;
    --gray-950: #0D0D12;

    /* shadows */
    --shadow-light-lg: 0 1px 30px rgb(8, 13, 21, 0.1);
    --shadow-light: 0 1px 15px rgb(8, 13, 21, 0.1);
    --shadow-light-sm: 0 1px 5px rgb(8, 13, 21, 0.1);
    --shadow-lg: 0 1px 30px rgb(8, 13, 21, 0.2);
    --shadow: 0 1px 15px rgb(8, 13, 21, 0.2);
    --shadow-sm: 0 1px 5px rgb(8, 13, 21, 0.2);
    --shadow-dark-lg: 0 2px 30px rgb(8, 13, 21, 0.35);
    --shadow-dark: 0 2px 15px rgb(8, 13, 21, 0.35);
    --shadow-dark-sm: 0 2px 5px rgb(8, 13, 21, 0.35);
}

/* =========================================================
   VARIÁVEIS BASE
   Podem ser usadas diretamente nos css de css/structure.
   ========================================================= */
:root {
    /* max width */
    --max-site-width: 2560px;
    --max-cont-width: 1660px;

    /* font sizes */
    --font-8: 0.5rem;
    --font-9: 0.5625rem;
    --font-10: 0.625rem;
    --font-11: 0.6875rem;
    --font-12: 0.75rem;
    --font-14: 0.875rem;
    --font-16: 1rem;
    --font-18: 1.125rem;
    --font-20: 1.25rem;
    --font-24: 1.5rem;
    --font-28: 1.75rem;
    --font-30: 1.875rem;
    --font-32: 2rem;
    --font-36: 2.25rem;
    --font-40: 2.5rem;
    --font-48: 3rem;
    --font-52: 3.25rem;
    --font-60: 3.75rem;
    --font-72: 4.5rem;
    --font-96: 6rem;

    /* borders */
    --border-radius: 10rem;
    --border-radius-input: 10rem;
    --border-radius-btn: 10rem;
    --border-w: 2px;

    /* bg */
    --bg: var(--white);
    --bg-light: var(--client-color1-50);
    --bg-dark: var(--client-color1-200);

    /* border */
    --border: var(--gray-300);
    --border-light: var(--gray-200);
    --border-dark: var(--gray-400);

    /* fonts */
    --font: var(--gray-600);
    --font-light: var(--gray-500);
    --font-dark: var(--gray-900);

    /* text properties */
    --blockquote-border: var(--gray-200);
    --highlight-bg: var(--gray-100);
    --highlight-border: var(--gray-300);
    --mark-bg: var(--client-color1-100);
    --mark-font: var(--client-color1-700);
}

/* =========================================================
   COMPONENTES (css/structure/commons)
   ========================================================= */
:root {
    /* ---------- accessibility ---------- */
    --focus-ring: var(--client-color1-700);
    --skip-link-bg: var(--white);
    --skip-link-font: var(--font-dark);
    --skip-link-shadow: var(--shadow);

    /* ---------- buttons ---------- */
    /* --btn-uppercase: uppercase; */
    /* --btn-weight: bold; */
    --btn-primary: var(--client-color1-500);
    --btn-primary-font: var(--white);
    --btn-primary-hover: var(--client-color1-700);
    --btn-primary-font-hover: var(--white);
    --btn-secondary: var(--client-color2-900);
    --btn-secondary-font: var(--white);
    --btn-secondary-hover: var(--client-color2-950);
    --btn-secondary-font-hover: var(--white);
    --btn-action: var(--gray-100);
    --btn-action-hover: var(--gray-200);
    --btn-danger: var(--danger-500);
    --btn-danger-font: var(--white);
    --btn-danger-hover: var(--danger-700);
    --btn-success: var(--success-500);
    --btn-success-font: var(--white);
    --btn-success-hover: var(--success-700);

    /* ---------- dropdown ---------- */
    --dropdown: var(--white);
    --dropdown-font: var(--font);
    --dropdown-hover: var(--white);
    --dropdown-font-hover: var(--client-color1-500);
    --dropdown-title: var(--font-light);
    --dropdown-border: var(--border-light);
    --dropdown-shadow: var(--shadow);

    /* ---------- form ---------- */
    --form-required: var(--danger-500);
    --form-valid: var(--success-500);
    --form-invalid: var(--danger-500);

    /* ---------- input ---------- */
    --input-bg: var(--white);
    --input-border: var(--gray-300);
    --input-font: var(--gray-600);
    --input-placeholder: var(--gray-400);
    --input-focus-outline: var(--client-color1-200);
    --input-disabled-bg: var(--gray-50);
    --input-icon: var(--gray-400);
    --input-text-bg: var(--input-bg);
    --input-text-bg-hover: var(--gray-200);
    --input-text-font-hover: var(--client-color1-500);

    /* ---------- checkbox ---------- */
    --checkbox-bg: var(--white);
    --checkbox-border: var(--gray-300);
    --checkbox-checked-bg: var(--client-color1-500);
    --checkbox-checked-border: var(--client-color1-500);
    --checkbox-checked-icon: var(--white);
    --checkbox-indeterminate: var(--gray-500);

    /* ---------- multiselect ---------- */
    --multiselect-menu-bg: var(--dropdown);
    --multiselect-menu-shadow: var(--dropdown-shadow);
    --multiselect-option-font: var(--dropdown-font);
    --multiselect-option-font-hover: var(--dropdown-font-hover);
    --multiselect-option-hover: var(--dropdown-hover);
    --multiselect-option-selected: var(--client-color1-200);
    --multiselect-option-selected-font: var(--client-color1-700);
    --multiselect-tag-bg: var(--client-color1-200);
    --multiselect-tag-font: var(--client-color1-700);
    --multiselect-tag-remove-hover: var(--client-color1-200);
    --multiselect-empty: var(--font-light);

    /* ---------- phone ---------- */
    --phone-option-font: var(--input-font);
    --phone-option-font-hover: var(--client-color1-500);
    --phone-option-selected-font: var(--client-color1-500);
    --phone-dial-font: var(--font-light);
    --phone-empty: var(--font-light);
    --phone-toggle-active-bg: var(--client-color1-100);
    --phone-toggle-active-font: var(--client-color1-700);

    /* ---------- range ---------- */
    --range-slider-track: var(--gray-200);
    --range-slider-fill: var(--client-color1-500);
    --range-slider-thumb: var(--white);
    --range-slider-thumb-border: var(--client-color1-500);
    --range-slider-thumb-shadow: var(--shadow-sm);
    --range-slider-thumb-shadow-focus: var(--shadow-dark-sm);
    --range-slider-label: var(--font-dark);

    /* ---------- datepicker ---------- */
    --datepicker-bg: var(--white);
    --datepicker-shadow: var(--shadow);
    --datepicker-font: var(--font);
    --datepicker-title: var(--font-dark);
    --datepicker-nav: transparent;
    --datepicker-nav-font: var(--font);
    --datepicker-nav-hover: var(--gray-200);
    --datepicker-nav-font-hover: var(--font-dark);
    --datepicker-price: var(--font-light);
    --datepicker-disabled-font: var(--gray-300);
    --datepicker-today: var(--client-color1-500);
    --datepicker-today-border: var(--gray-100);
    --datepicker-day-hover: var(--gray-100);
    --datepicker-day-font-hover: var(--font-dark);
    --datepicker-range: var(--gray-100);
    --datepicker-range-font: var(--font);
    --datepicker-range-hover: var(--gray-300);
    --datepicker-range-font-hover: var(--font-dark);
    --datepicker-selected: var(--client-color1-500);
    --datepicker-selected-hover: var(--client-color1-700);
    --datepicker-selected-font: var(--white);
    --datepicker-min-stay: var(--font-light);
    --datepicker-min-stay-font: var(--gray-300);
    --datepicker-min-stay-icon: var(--gray-200);

    /* ---------- tooltip ---------- */
    --tooltip-bg: var(--gray-700);
    --tooltip-font: var(--white);
    --tooltip-shadow: var(--shadow-light);

    /* ---------- accordion ---------- */
    --accordion-border: var(--border-light);
    --accordion-font: var(--font-dark);
    --accordion-font-hover: var(--client-color1-500);
    --accordion-font-active: var(--client-color1-500);
    --accordion-icon: var(--client-color1-500);
    --accordion-body-font: var(--font);

    /* ---------- more options ---------- */
    --more-option-font: var(--font);
    --more-option-btn: var(--font-dark);
    --more-option-btn-hover: var(--client-color1-500);
    --more-option-btn-bg: var(--gray-100);
    --more-option-btn-bg-hover: var(--gray-200);

    /* ---------- tabs ---------- */
    --tabs-link-bg: var(--gray-50);
    --tabs-link-font: var(--font-dark);
    --tabs-link-icon: var(--client-color1-500);
    --tabs-link-shadow: none;
    --tabs-link-hover-bg: var(--client-color1-50);
    --tabs-link-hover-font: var(--client-color1-500);
    --tabs-link-active-bg: var(--client-color1-500);
    --tabs-link-active-font: var(--white);
    --tabs-scroll-track: var(--gray-100);
    --tabs-scroll-thumb: var(--gray-300);

    /* ---------- gallery ---------- */
    --gallery-title: var(--font-dark);
    --gallery-caption-bg: var(--transp-black-700);
    --gallery-caption-font: var(--white);
    --gallery-modal-bg: var(--transp-black-900);
    --gallery-modal-font: var(--white);
    --gallery-modal-counter: var(--transp-white-700);
    --gallery-modal-btn: var(--transp-black-700);
    --gallery-modal-btn-font: var(--white);
    --gallery-modal-btn-hover: var(--white);
    --gallery-modal-btn-hover-font: var(--font-dark);
    --gallery-modal-group-title: var(--white);
    --gallery-modal-divider: var(--transp-white-300);
    --gallery-modal-thumb-hover: var(--transp-white-500);
    --gallery-modal-thumb-active: var(--client-color1-500);

    /* ---------- modal ---------- */
    --modal-bg-transparent: var(--transp-black-700);
    --modal-content-bg: var(--white);
    --modal-close-font: var(--gray-300);
    --modal-close-font-hover: var(--gray-700);
    --modal-error: var(--danger-500);
    --modal-success: var(--success-500);
    --modal-shadow: var(--shadow-dark);

    /* ---------- alert ---------- */
    --alert-bg: var(--gray-100);
    --alert-danger-bg: var(--danger-100);
    --alert-danger-font: var(--danger-700);
    --alert-danger-border: var(--danger-700);
    --alert-success-bg: var(--success-100);
    --alert-success-font: var(--success-700);
    --alert-success-border: var(--success-700);
}

/* =========================================================
   MÓDULOS (css/structure/modules)
   ========================================================= */
:root {
    /* ---------- navbar ---------- */
    --logo-max-width: 200px;
    --logo-padding: 1.5rem;

    /* --navbar-uppercase: uppercase; */
    /* --navbar-weight: bold; */
    --navbar-bg: var(--white);
    --navbar-shadow: var(--shadow-light);
    --navbar-top-bg: var(--gray-50);
    --navbar-link-font: var(--font-dark);
    --navbar-link-hover: var(--client-color1-500);
    --navbar-link-hover-font: var(--white);
    --navbar-link-font-hover: var(--client-color1-500);
    --navbar-action: transparent;
    --navbar-action-hover: var(--client-color1-100);
    --navbar-action-font: var(--font-dark);
    --navbar-action-font-hover: var(--client-color1-900);
    --navbar-top-action-font: var(--font-dark);
    --navbar-top-action-font-hover: var(--client-color1-500);
    --navbar-dropdown-divider: var(--gray-100);
    --navbar-nav-mobile-bg: var(--white);
    --navbar-nav-mobile-shadow: var(--shadow-light-lg);
    --navbar-nav-mobile-divider: var(--gray-300);
    --navbar-nav-mobile-dropdown-bg: var(--gray-50);
    --navbar-nav-mobile-backdrop: var(--transp-white-700);

    /* ---------- navbar small ---------- */
    --navbar-small-bg: var(--navbar-bg);
    --navbar-small-shadow: var(--shadow-light-lg);
    --navbar-small-search-border-w: 1px;
    --navbar-small-search-bg: var(--client-color1-500);
    --navbar-small-search-border: var(--client-color1-500);
    --navbar-small-search-shadow: none;

    /* ---------- search ---------- */
    --search-border-w: 2px;
    --search-bg: var(--client-color1-500);
    --search-border: var(--client-color1-500);
    --search-shadow: 0 1rem 2rem rgb(8, 13, 21, 0.08);
    --search-font: var(--white);
    --search-input-bg: transparent;
    --search-input-border: var(--transp-white-500);
    --search-input-border-mobile: var(--transp-white-500);
    --search-input-text-bg: transparent;
    --search-btn: var(--white);
    --search-btn-font: var(--client-color1-500);
    --search-more-font-hover: var(--client-color1-100);
    --search-more-btn-active: var(--transp-white-300);
    --search-more-btn-active-font: var(--white);
    --search-more-bg: var(--white);
    --search-more-shadow: var(--shadow-light-lg);
    --search-more-border: var(--border-light);
    --search-more-input-border: var(--border);
    --search-more-input-font: var(--font-dark);
    --search-more-input-placeholder: var(--font-light);
    --search-more-input-icon: var(--font-dark);
    --search-more-label: var(--font-dark);
    --search-more-badge: var(--font-dark);
    --search-more-badge-font: var(--white);
    --search-more-multiselect-bg: var(--client-color1-100);
    --search-more-multiselect-input-bg: var(--white);

    /* ---------- banner hero ---------- */
    --banner-hero-gradient: var(--white);
    --banner-hero-btn-font: var(--font-dark);
    --banner-hero-btn-bg: var(--transp-white-700);
    --banner-hero-btn-hover: var(--white);
    --banner-hero-arrow-bg: var(--white);
    --banner-hero-arrow-font: var(--font-dark);
    --banner-hero-arrow-shadow: var(--shadow-light);
    --banner-hero-title: var(--font-dark);
    --banner-hero-font: var(--font-dark);
    --banner-hero-indicator: var(--transp-black-300);
    --banner-hero-indicator-active: var(--white);
    --banner-hero-indicator-shadow: var(--shadow-dark-sm);

    /* ---------- house hero ---------- */
    --house-hero-control: var(--transp-white-700);
    --house-hero-control-font: var(--font-dark);
    --house-hero-control-hover: var(--white);
    --house-hero-control-hover-font: var(--gray-500);
    --house-hero-indicator: var(--transp-black-300);
    --house-hero-indicator-active: var(--gray-800);
    --house-hero-dot: var(--white);
    --house-hero-dot-shadow: var(--shadow-dark-sm);
    --house-hero-btn: var(--transp-black-700);
    --house-hero-btn-font: var(--white);
    --house-hero-btn-hover: var(--transp-black-900);
    --house-hero-btn-hover-font: var(--white);
    --house-hero-btn-shadow: none;

    /* house hero mosaic */
    --house-hero-mosaic-bg: var(--gray-100);
    --house-hero-mosaic-btn: var(--white);
    --house-hero-mosaic-btn-font: var(--font-dark);
    --house-hero-mosaic-btn-hover: var(--white);
    --house-hero-mosaic-btn-hover-font: var(--client-color1-500);
    --house-hero-mosaic-btn-shadow: var(--shadow-light);

    /* ---------- house title ---------- */
    --house-title-resort: var(--client-color3-600);
    --house-title-title: var(--client-color1-500);
    --house-title-title-weight: bold;
    --house-title-line: var(--client-color3-500);
    --house-title-reviews: var(--font-light);
    --house-title-star: #FCC33F;
    --house-title-address: var(--font);
    --house-title-address-icon: var(--client-color2-500);
    --house-title-amenity-border: var(--border-light);
    --house-title-amenity-font: var(--font);
    --house-title-amenity-icon: var(--client-accent-500);
    --house-title-amenity-strong: var(--font-dark);
    --house-title-amenity-bg: var(--white);
    --house-title-amenity-shadow: var(--shadow-light);

    /* ---------- house content ---------- */
    --house-content-text: var(--font);
    --house-content-title: var(--font-dark);
    --house-content-title-strong: var(--font-dark);
    --house-content-title-weight: bold;
    --house-content-card-bg: var(--white);
    --house-content-card-shadow: var(--shadow-light);
    --house-content-title-line: var(--client-color3-500);
    --house-content-divider: var(--border-light);
    --house-content-subtitle: var(--font-dark);
    --house-content-amenity-title: var(--font-dark);
    --house-content-bedroom-border: var(--border-light);
    --house-content-bedroom-bed: var(--font);
    --house-content-bedroom-icon: var(--client-color2-500);
    --house-content-bedroom-title: var(--font-dark);
    --house-content-bedroom-tag: var(--client-color3-500);
    --house-content-feature-font: var(--font);
    --house-content-feature-icon: var(--client-color2-500);
    --house-content-distance-divider: var(--border-light);
    --house-content-distance-strong: var(--client-color1-500);
    --house-content-distance-name: var(--font-dark);
    --house-content-review-border: var(--border-light);
    --house-content-review-name: var(--font-dark);
    --house-content-review-date: var(--font-light);
    --house-content-review-star: #FCC33F;

    /* ---------- house price ---------- */
    --house-price-bg: var(--white);
    --house-price-shadow: var(--shadow-light-lg);
    --house-price-font: var(--font);
    --house-price-title: var(--font-dark);
    --house-price-value: var(--font-dark);
    --house-price-item-detail: var(--gray-400);
    --house-price-discount: var(--success-500);
    --house-price-divider: var(--border-light);
    --house-price-summary-bg: var(--gray-50);
    --house-price-total: var(--font-dark);
    --house-price-down: var(--font);
    --house-price-down-strong: var(--client-color2-500);
    --house-price-btn-shadow: var(--shadow-light);
    --house-price-toggle: var(--white);
    --house-price-toggle-hover: var(--gray-50);
    --house-price-toggle-font: var(--font-dark);
    --house-price-toggle-book: var(--client-color1-500);
    --house-price-toggle-shadow: var(--shadow-dark);
    --house-price-floating-shadow: var(--shadow-dark-lg);
    --house-price-empty: var(--font-light);
    --house-price-help: var(--font-light);
    --house-price-help-link: var(--font-light);
    --house-price-help-link-hover: var(--client-color1-500);
    --house-price-help-icon: var(--font-light);

    /* ---------- page title ---------- */
    --page-title-img-gradient: var(--bg);
    --page-title-bg: var(--client-color1-700);
    --page-title-bg-end: var(--client-color1-900);
    --page-title-title: var(--white);
    --page-title-strong: var(--white);
    --page-title-line: var(--white);
    --page-title-font: var(--white);

    /* ---------- module title ---------- */
    --module-title-font: var(--font-dark);
    --module-title-strong: var(--font-dark);
    --module-title-line: var(--client-color3-500);

    /* ---------- houses list ---------- */
    --houses-list-bg: var(--white);
    --houses-list-inner-bg: var(--white);
    --houses-list-shadow: var(--shadow-light);
    --houses-list-shadow-hover: var(--shadow-light-lg);
    --houses-list-font-light: var(--font-light);
    --houses-list-title: var(--font-dark);
    --houses-list-divider: var(--client-color3-500);
    --houses-list-price-total: var(--client-color1-500);
    --houses-list-condo: var(--font-light);
    --houses-list-img-dot: var(--white);
    --houses-list-img-dot-shadow: var(--shadow-dark-sm);
    --houses-list-link-btn: var(--btn-primary);
    --houses-list-link-btn-font: var(--btn-primary-font);
    --houses-list-link-btn-hover: var(--btn-primary-hover);
    --houses-list-carousel-control-bg: var(--white);
    --houses-list-carousel-control-shadow: var(--shadow-light);
    --houses-list-price-nights: var(--client-color1-500);
    --houses-list-price-per-night: var(--client-color1-500);
    --houses-list-price-old: var(--font-light);
    --houses-list-price-discount: var(--houses-list-price-total);
    --houses-list-discount-bg: var(--client-color3-500);
    --houses-list-discount-font: var(--white);
    --houses-list-discount-border: var(--white);
    --houses-list-discount-shadow: var(--shadow);
    --houses-list-price-divider: var(--border-light);
    --houses-list-img-indicator: var(--white);
    --houses-list-img-indicator-track: var(--transp-white-500);
    --houses-list-img-control-bg: var(--white);
    --houses-list-img-control-font: var(--font-dark);
    --houses-list-img-control-font-hover: var(--gray-500);
    --houses-list-img-control-shadow: var(--shadow-light);
    --houses-list-link: var(--client-color1-700);
    --houses-list-link-hover: var(--client-color1-900);
    --houses-list-link-icon-bg: var(--client-color1-200);
    --houses-list-link-icon-bg-hover: var(--client-color1-500);

    /* ---------- houses list carousel ---------- */
    --houses-list-carousel-control: var(--font-dark);
    --houses-list-carousel-control-hover: var(--gray-500);
    --houses-list-carousel-progress: var(--gray-200);
    --houses-list-carousel-progress-active: var(--font-dark);

    /* ---------- houses list tab ---------- */
    --houses-list-tab-link-bg: transparent;
    --houses-list-tab-link-border: var(--border-light);
    --houses-list-tab-link-icon: var(--client-color2-500);
    --houses-list-tab-link-label: var(--font);
    --houses-list-tab-link-title: var(--font-dark);
    --houses-list-tab-link-title-hover: var(--client-color1-500);
    --houses-list-tab-link-active-bg: var(--white);
    --houses-list-tab-link-active-border: var(--client-color1-500);
    --houses-list-tab-link-active-icon: var(--white);
    --houses-list-tab-link-active-title: var(--client-color1-500);
    --houses-list-tab-link-icon-bg: var(--client-color2-50);
    --houses-list-tab-link-icon-bg-hover: var(--client-color2-100);
    --houses-list-tab-link-active-icon-bg: var(--client-color2-500);

    /* ---------- houses list big ---------- */
    --houses-list-header-divider: var(--border-light);
    --houses-list-header-count: var(--font-dark);
    --houses-list-header-count-strong: var(--client-color1-500);
    --houses-list-header-filter-bg: transparent;
    --houses-list-header-filter-font: var(--font);
    --houses-list-header-filter-icon: var(--client-color1-500);
    --houses-list-header-filter-border: var(--border);
    --houses-list-header-sort-bg: var(--btn-secondary);
    --houses-list-header-sort-font: var(--btn-secondary-font);
    --houses-list-header-sort-label: var(--client-color2-200);
    --houses-list-header-sort-bg-hover: var(--btn-secondary-hover);
    --houses-list-header-sort-font-hover: var(--btn-secondary-font-hover);
    --houses-list-header-sort-shadow: var(--shadow-light-sm);
    --houses-list-view-bg: var(--btn-primary);
    --houses-list-view-font: var(--btn-primary-font);
    --houses-list-view-bg-hover: var(--btn-primary-hover);
    --houses-list-view-font-hover: var(--btn-primary-font-hover);
    --houses-list-map-bg: var(--gray-50);
    --houses-list-map-shadow: var(--shadow-light-sm);
    --houses-list-map-preview-line: var(--white);
    --houses-list-map-note-bg: var(--white);
    --houses-list-map-note-font: var(--font-light);
    --houses-list-map-pin-bg: var(--client-color1-500);
    --houses-list-map-pin-font: var(--white);
    --houses-list-map-pin-active-bg: var(--font-dark);
    --houses-list-map-pin-active-font: var(--white);
    --houses-list-map-pin-shadow: var(--shadow-light);
    --houses-list-map-card-shadow: var(--shadow-light-lg);
    --houses-list-map-card-close-bg: var(--white);
    --houses-list-map-card-close-font: var(--font-dark);

    /* ---------- resorts list ---------- */
    --resorts-list-header-border: var(--border-light);
    --resorts-list-count: var(--font-dark);
    --resorts-list-count-strong: var(--client-color1-500);
    --resorts-list-filter-bg: transparent;
    --resorts-list-filter-font: var(--font);
    --resorts-list-filter-icon: var(--client-color1-500);
    --resorts-list-filter-border: var(--border);
    --resorts-list-sort-bg: var(--white);
    --resorts-list-sort-font: var(--font-dark);
    --resorts-list-sort-label: var(--font-light);
    --resorts-list-sort-bg-hover: var(--white);
    --resorts-list-sort-font-hover: var(--client-color1-500);
    --resorts-list-sort-shadow: var(--shadow-light-sm);
    --resorts-list-bg: var(--white);
    --resorts-list-inner-bg: var(--white);
    --resorts-list-shadow: var(--shadow-light);
    --resorts-list-shadow-hover: var(--shadow-light-lg);
    --resorts-list-stars: var(--client-color3-500);
    --resorts-list-title: var(--font-dark);
    --resorts-list-divider: var(--client-color3-500);
    --resorts-list-homes: var(--font-light);
    --resorts-list-homes-strong: var(--font-dark);
    --resorts-list-title-weight: bold;
    --resorts-list-homes-divider: var(--border-light);

    /* ---------- pagination ---------- */
    --pagination-bg: transparent;
    --pagination-font: var(--font);
    --pagination-border: var(--border);
    --pagination-hover: var(--border);
    --pagination-font-hover: var(--font);
    --pagination-hover-border: var(--border);
    --pagination-active: var(--client-color1-500);
    --pagination-active-font: var(--white);

    /* ---------- resorts ---------- */
    --resorts-bg: var(--white);
    --resorts-inner-bg: var(--white);
    --resorts-shadow: var(--shadow-light);
    --resorts-shadow-hover: var(--shadow-light-lg);
    --resorts-stars: var(--client-color3-500);
    --resorts-title: var(--font-dark);
    --resorts-divider: var(--client-color3-500);
    --resorts-link: var(--btn-primary-font);
    --resorts-link-hover: var(--btn-primary-font);
    --resorts-link-btn: var(--btn-primary);
    --resorts-link-btn-hover: var(--btn-primary-hover);
    --resorts-title-weight: bold;
    --resorts-link-icon-bg: var(--client-color1-200);
    --resorts-link-icon-bg-hover: var(--client-color1-500);

    /* ---------- booking steps ---------- */
    --booking-steps-icon: var(--client-color2-500);
    --booking-steps-icon-bg: var(--client-color2-50);
    --booking-steps-icon-shadow: none;
    --booking-steps-step1-icon: var(--client-color1-500);
    --booking-steps-step1-icon-bg: var(--client-color1-50);
    --booking-steps-step2-icon: var(--client-color2-500);
    --booking-steps-step2-icon-bg: var(--client-color2-50);
    --booking-steps-step3-icon: var(--client-color3-500);
    --booking-steps-step3-icon-bg: var(--client-color3-50);
    --booking-steps-number: var(--client-color3-600);
    --booking-steps-title: var(--font-dark);
    --booking-steps-text: var(--font);
    --booking-steps-arrow: var(--gray-300);
    --booking-steps-link: var(--btn-primary-font);
    --booking-steps-link-hover: var(--btn-primary-font);
    --booking-steps-link-btn: var(--btn-primary);
    --booking-steps-link-btn-hover: var(--btn-primary-hover);
    --booking-steps-title-weight: bold;
    --booking-steps-link-icon-bg: var(--client-color1-200);
    --booking-steps-link-icon-bg-hover: var(--client-color1-500);

    /* ---------- contact ---------- */
    --contact-title: var(--font-dark);
    --contact-title-strong: var(--font-dark);
    --contact-divider: var(--client-color3-500);
    --contact-text: var(--font);
    --contact-item-icon: var(--client-color2-500);
    --contact-item-icon-bg: var(--client-color2-50);
    --contact-item-icon-shadow: none;
    --contact-item-icon-hover: var(--white);
    --contact-item-icon-bg-hover: var(--client-color2-500);
    --contact-item-label: var(--font-light);
    --contact-item-value: var(--font-dark);
    --contact-social: var(--client-color2-500);
    --contact-social-border: var(--client-color2-50);
    --contact-social-hover: var(--white);
    --contact-social-bg-hover: var(--client-color2-500);
    --contact-social-bg: var(--client-color2-50);
    --contact-form-bg: var(--white);
    --contact-form-shadow: var(--shadow-light-lg);
    --contact-consent: var(--font);
    --contact-consent-link: var(--client-color1-700);
    --checkout-box-bg: var(--white);
    --checkout-box-shadow: var(--shadow-light-lg);
    --checkout-title: var(--font-dark);
    --checkout-title-weight: bold;
    --checkout-title-line: var(--client-color3-500);
    --checkout-divider: var(--border-light);
    --checkout-consent: var(--font);
    --checkout-consent-link: var(--client-color1-700);
    --checkout-policy-link: var(--font);
    --checkout-policy-link-hover: var(--client-color1-500);
    --checkout-extra-border: var(--border-light);
    --checkout-extra-active-border: var(--client-color1-500);
    --checkout-extra-active-bg: var(--client-color1-50);
    --checkout-extra-bg: var(--gray-50);
    --checkout-extra-title: var(--font-dark);
    --checkout-extra-text: var(--font-light);
    --checkout-extra-price: var(--font-dark);
    --checkout-house-title: var(--font-dark);
    --checkout-house-feature: var(--font);
    --checkout-house-icon: var(--client-color2-500);
    --checkout-stay-label: var(--font-light);
    --checkout-stay-value: var(--font-dark);

    /* ---------- checkout success ---------- */
    --checkout-success-bg: var(--white);
    --checkout-success-shadow: var(--shadow-light-lg);
    --checkout-success-icon: var(--white);
    --checkout-success-icon-bg: var(--success-500);
    --checkout-success-icon-ring: var(--success-100);
    --checkout-success-title: var(--font-dark);
    --checkout-success-title-strong: var(--client-color1-500);
    --checkout-success-text: var(--font);
    --checkout-success-text-strong: var(--font-dark);
    --checkout-success-code-border: var(--gray-300);
    --checkout-success-code-label: var(--font-light);
    --checkout-success-code: var(--font-dark);
    --checkout-success-code-bg: var(--client-color1-50);
    --checkout-success-divider: var(--border-light);
    --checkout-success-house-title: var(--font-dark);
    --checkout-success-stay-label: var(--font-light);
    --checkout-success-stay-value: var(--font-dark);
    --checkout-success-list-font: var(--font);
    --checkout-success-list-detail: var(--gray-400);
    --checkout-success-list-value: var(--font-dark);
    --checkout-success-discount: var(--success-500);
    --checkout-success-summary-bg: var(--house-price-summary-bg);
    --checkout-success-summary-font: var(--font);
    --checkout-success-summary-value: var(--font-dark);

    --quote-summary-border: var(--border-light);
    --quote-summary-bg: var(--white);
    --quote-summary-shadow: var(--shadow-light);
    --quote-summary-font: var(--font);
    --quote-summary-icon: var(--client-accent-500);
    --quote-summary-arrow: var(--font-light);
    --quote-summary-strong: var(--font-dark);

    --quote-note-font: var(--font);
    --quote-note-alert-bg: var(--client-color1-100);
    --quote-note-alert-font: var(--font-dark);
    --quote-note-alert-icon: var(--client-color1-500);
    --quote-note-sign: var(--font-dark);

    /* ---------- not found ---------- */
    --not-found-code-size: 10rem;
    --not-found-code-size-sm: var(--font-72);
    --not-found-code: var(--client-color3-200);
    --not-found-house-bg: var(--client-color1-500);
    --not-found-house-icon: var(--white);
    --not-found-house-shadow: var(--shadow-light-lg);
    --not-found-house-ring: var(--client-color1-100);
    --not-found-title: var(--font-dark);
    --not-found-title-strong: var(--client-color1-500);
    --not-found-text: var(--font);

    /* ---------- client about ---------- */
    --client-about-eyebrow: var(--client-color3-700);
    --client-about-eyebrow-bg: var(--client-color3-50);
    --client-about-title: var(--font-dark);
    --client-about-title-strong: var(--client-color1-500);
    --client-about-text: var(--font);
    --client-about-shadow: var(--shadow-light-lg);
    --client-about-img-border: var(--white);
    --client-about-numbers-font: var(--client-color1-500);
    --client-about-numbers-label: var(--font-light);
    --client-about-numbers-divider: var(--border-light);
    --client-about-value-icon: var(--client-color2-500);
    --client-about-value-icon-bg: var(--client-color2-50);
    --client-about-value-title: var(--font-dark);
    --client-about-value-text: var(--font-light);
    --client-about-cta-overlay: var(--transp-black-500);
    --client-about-cta-font: var(--white);

    /* ---------- client terms ---------- */
    --client-terms-font: var(--font);
    --client-terms-updated: var(--client-color3-600);
    --client-terms-title: var(--font-dark);
    --client-terms-divider: var(--client-color3-500);
    --client-terms-bullet: var(--client-color1-500);

    /* ---------- newsletter ---------- */
    --newsletter-bg: var(--client-accent-400);
    --newsletter-bg-end: var(--client-accent-600);
    --newsletter-border: transparent;
    --newsletter-shadow: none;
    --newsletter-line: var(--white);
    --newsletter-title: var(--white);
    --newsletter-title-weight: bold;
    --newsletter-text: var(--white);
    --newsletter-icon: var(--font-light);
    --newsletter-input-bg: var(--white);
    --newsletter-input-border: var(--white);
    --newsletter-btn: var(--client-color1-500);
    --newsletter-btn-hover: var(--client-color1-700);
    --newsletter-btn-font: var(--white);
    --newsletter-success: var(--white);
    --newsletter-success-icon: var(--white);

    /* ---------- footer ---------- */
    --footer-bg-gradient: var(--gray-50);
    --footer-font: var(--font);
    --footer-contact: var(--font);
    --footer-contact-hover: var(--client-color2-500);
    --footer-social: var(--white);
    --footer-social-bg: var(--client-color2-500);
    --footer-social-bg-hover: var(--client-color2-700);
    --footer-social-hover: var(--client-color2-700);
    --footer-divider: var(--border);
    --footer-copyright: var(--font-light);
    --footer-link: var(--font);
    --footer-link-hover: var(--client-color1-500);

    /* ---------- whatsapp pop ---------- */
    --whatsapp-pop-bg: var(--white);
    --whatsapp-pop-bg-hover: var(--success-100);
    --whatsapp-pop-font: var(--success-500);
    --whatsapp-pop-icon: var(--success-500);
    --whatsapp-pop-shadow: var(--shadow-light);
    /* ---------- review home ---------- */
    --review-home-bg: var(--white);
    --review-home-shadow: var(--shadow-light);
    --review-home-name: var(--client-color2-500);
    --review-home-date: var(--font-light);
    --review-home-star: #FCC33F;
    --review-home-text: var(--font);
    --review-home-indicator: var(--gray-200);
    --review-home-indicator-active: var(--font-dark);
    --review-home-control: var(--font-dark);
    --review-home-control-hover: var(--gray-500);
    --review-home-control-bg: var(--white);
    --review-home-control-shadow: var(--shadow-light);

    /* banner small */
    --banner-small-overlay-start: var(--transp-black-500);
    --banner-small-overlay-end: var(--transp-black-700);
    --banner-small-subtitle: var(--white);
    --banner-small-title: var(--white);
    --banner-small-title-weight: bold;
    --banner-small-text: var(--white);
    --banner-small-btn: var(--client-color2-500);
    --banner-small-btn-hover: var(--client-color2-700);
    --banner-small-btn-font: var(--white);

    /* ---------- partners ---------- */
    --partners-item-bg: transparent;

    /* ---------- famous guests ---------- */
    --famous-guests-bg: var(--white);
    --famous-guests-shadow: var(--shadow-light);
    --famous-guests-img-bg: transparent;
    --famous-guests-name: var(--font-dark);
    --famous-guests-role: var(--client-color2-500);
    --famous-guests-name-weight: bold;

}

/* =========================================================
   REFERÊNCIA (não usar)
   ========================================================= */
/* rem to px (only for reference, not use):
                1px
    0.125rem    2px
    0.25rem     4px
    0.375rem    6px
    0.5rem      8px
    0.625rem    10px
    0.75rem     12px
    0.875rem    14px
    1rem        16px
    1.25rem     20px
    1.5rem      24px
    1.75rem     28px
    2rem        32px
    2.25rem     36px
    2.5rem      40px
    2.75rem     44px
    3rem        48px
    3.5rem      56px
    4rem        64px
    4.5rem      72px
    5rem        80px
    6rem        96px
    7rem        112px
    8rem        128px
    9rem        144px
    10rem       160px
    11rem       176px
    12rem       192px
    13rem       208px
    14rem       224px
    15rem       240px
    16rem       256px
    18rem       288px
    20rem       320px
    24rem       384px */
/* -- for reference
@container (max-width: 640px) {
@container (max-width: 768px) {
@container (max-width: 1024px) {
@container (max-width: 1280px) {
@container (max-width: 1540px) {
-- */