/* ========================================
   CARLO INTERNATIONAL - MAIN STYLESHEET
   Premium Real Estate Portal
   ======================================== */

/* ----- CSS Variables ----- */
:root {
    --ci-black: #1a1a1a;
    --ci-black-light: #2d2d2d;
    --ci-gold: #c9a84c;
    --ci-gold-light: #d4b85a;
    --ci-gold-dark: #b8953a;
    --ci-white: #ffffff;
    --ci-gray-50: #f8f8f8;
    --ci-gray-100: #f0f0f0;
    --ci-gray-200: #e0e0e0;
    --ci-gray-300: #cccccc;
    --ci-gray-400: #999999;
    --ci-gray-500: #666666;
    --ci-gray-600: #444444;
    --ci-gray-700: #333333;
    --ci-gray-800: #222222;
    --ci-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ci-font-alt: 'Playfair Display', Georgia, serif;
    --ci-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ci-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --ci-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --ci-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --ci-shadow-xl: 0 16px 60px rgba(0,0,0,0.16);
    --ci-radius: 8px;
    --ci-radius-lg: 16px;
    --ci-container: 1280px;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--ci-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ci-gray-700);
    background: var(--ci-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ci-gold); text-decoration: none; transition: color var(--ci-transition); }
a:hover { color: var(--ci-gold-dark); }

img { max-width: 100%; height: auto; display: block; }

ul { list-style: none; }

/* ----- Container ----- */
.ci-container {
    max-width: var(--ci-container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ----- Site Wrapper ----- */
.ci-site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ci-main { flex: 1; }

/* ========================================
   HEADER
   ======================================== */
.ci-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--ci-white);
    box-shadow: 0 1px 0 var(--ci-gray-200);
    transition: background var(--ci-transition), box-shadow var(--ci-transition);
}

.ci-header .ci-container {
    max-width: 100%;
    padding: 0 20px;
}

/* ----- Homepage header: fixed, same navy as the logo ----- */
body.home .ci-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #061532;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

body.home .ci-header__top-bar {
    background: var(--ci-black);
}

body.home .ci-header__main {
    background: #061532;
}

body.home .ci-header .ci-nav-list > li > a,
body.home .ci-header__site-name {
    color: var(--ci-white);
}

.ci-header__top-bar {
    background: var(--ci-black);
    color: var(--ci-gray-300);
    font-size: 13px;
    padding: 8px 0;
}

.ci-header__top-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ci-header__auth {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex: 1 1 0;
    min-width: 0;
}

.ci-notif-bell {
    position: relative;
}

.ci-notif-bell__btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    position: relative;
    padding: 4px;
    line-height: 1;
}

.ci-notif-bell__count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--ci-gold);
    color: var(--ci-white);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.ci-notif-bell__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    border-radius: 8px;
    box-shadow: var(--ci-shadow-lg);
    z-index: 200;
}

.ci-notif-bell__loading,
.ci-notif-bell__empty {
    padding: 20px;
    text-align: center;
    color: var(--ci-gray-500);
    font-size: 13px;
}

.ci-notif-bell__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ci-gray-100);
    font-size: 13px;
}

.ci-notif-bell__item--unread {
    background: var(--ci-gray-50);
}

.ci-notif-bell__dropdown .ci-notif-bell__item-body,
.ci-notif-bell__dropdown .ci-notif-bell__item-body a {
    color: var(--ci-black);
}

.ci-notif-bell__item-date {
    color: var(--ci-gray-400);
    font-size: 11px;
    margin-top: 4px;
}

.ci-notif-bell__item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ci-notif-bell__item-actions button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--ci-gray-500);
}

.ci-header__auth a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ci-white);
    font-size: 13px;
    font-weight: 600;
}

.ci-header__auth a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ci-header__auth a:hover { color: var(--ci-gold); }

.ci-header__user-chip {
    position: relative;
}

.ci-header__user-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 0 14px;
    background: none;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.2);
    color: var(--ci-white);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ci-header__user-chip-chevron {
    flex-shrink: 0;
    opacity: 0.7;
}

.ci-header__user-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ci-header__user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-header__user-chip-dropdown,
.ci-lang-switcher__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 14px;
    background: var(--ci-white);
    min-width: 170px;
    border-radius: 8px;
    box-shadow: var(--ci-shadow-lg);
    padding: 6px;
    display: none;
    z-index: 200;
}

.ci-header__auth a.ci-header__user-chip-item,
.ci-header__auth a.ci-lang-switcher__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--ci-gray-700);
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
}

.ci-header__user-chip-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.ci-lang-switcher__item svg { width: 20px; height: auto; border-radius: 2px; flex-shrink: 0; }

.ci-header__auth a.ci-header__user-chip-item:hover,
.ci-header__auth a.ci-lang-switcher__item:hover {
    background: var(--ci-gray-50);
    color: var(--ci-gold-dark);
}

.ci-header__search {
    position: relative;
    display: flex;
    align-items: center;
}

.ci-header__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: none;
    color: var(--ci-white);
    cursor: pointer;
}

.ci-header__search-btn svg {
    width: 18px;
    height: 18px;
}

.ci-header__search-form {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 14px;
    display: none;
    z-index: 200;
}

.ci-header__search-input {
    width: 220px;
    padding: 10px 14px;
    border: 1px solid var(--ci-gray-200);
    border-radius: 6px;
    font-size: 13px;
    background: var(--ci-white);
    color: var(--ci-gray-700);
    box-shadow: var(--ci-shadow-lg);
}

.ci-lang-switcher {
    position: relative;
}

.ci-lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    color: var(--ci-white);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ci-lang-switcher__toggle svg:first-child {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.ci-lang-switcher__code {
    letter-spacing: 0.5px;
}

.ci-lang-switcher__chevron {
    opacity: 0.7;
}

.ci-lang-flag:hover,
.ci-lang-flag--active {
    opacity: 1;
}

.ci-header__main {
    padding: 16px 0;
    background: #061532;
}

.ci-header__main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.ci-header__logo {
    flex: 1 1 0;
    min-width: 0;
}

.ci-header__logo .custom-logo-link {
    display: block;
}

/* Logotipo ao tamanho natural do ficheiro (LogoCIBanner.jpg, 211x107).
   Nao se redimensiona nem se recorta: e assim que o Carlo o quer. So
   encolhe na faixa 1200-1439, onde o menu horizontal completo nao deixa
   mesmo espaco - ver a regra dessa faixa mais abaixo. */
.ci-header__logo img,
.ci-header__logo .custom-logo {
    display: block;
    width: 211px;
    height: 107px;
    max-width: 100%;
}

.ci-header__site-name {
    font-family: var(--ci-font-alt);
    font-size: 28px;
    font-weight: 700;
    color: var(--ci-white);
    letter-spacing: 1px;
}

.ci-header__nav {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.ci-nav-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
}

.ci-nav-list > li {
    position: relative;
}

.ci-nav-list > li > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    color: var(--ci-white);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--ci-transition);
}

.ci-nav-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.ci-nav-list__icon svg {
    width: 17px;
    height: 17px;
}

.ci-nav-list__text {
    line-height: 1;
}

.ci-nav-list > li > a:hover,
.ci-nav-list > li.current-menu-item > a {
    color: var(--ci-gold);
}

.ci-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--ci-white);
    min-width: 220px;
    box-shadow: var(--ci-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--ci-transition);
    z-index: 100;
}

.ci-nav-list li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ci-nav-list .sub-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--ci-gray-600);
    font-size: 14px;
    border-bottom: 1px solid var(--ci-gray-100);
    transition: all var(--ci-transition);
}

.ci-nav-list .sub-menu a:hover {
    color: var(--ci-gold);
    background: var(--ci-gray-50);
    padding-left: 28px;
}

.ci-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.ci-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ci-white);
    transition: all var(--ci-transition);
}

/* ========================================
   BUTTONS
   ======================================== */
.ci-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--ci-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: all var(--ci-transition);
    text-decoration: none;
}

.ci-btn--primary {
    background: var(--ci-gold);
    color: var(--ci-white);
    border-color: var(--ci-gold);
}

.ci-btn--primary:hover {
    background: var(--ci-gold-dark);
    border-color: var(--ci-gold-dark);
    color: var(--ci-white);
    transform: translateY(-1px);
    box-shadow: var(--ci-shadow);
}

.ci-btn--outline {
    background: transparent;
    color: var(--ci-black);
    border-color: var(--ci-black);
}

.ci-btn--outline:hover {
    background: #061532;
    border-color: #061532;
    color: var(--ci-white);
    transform: translateY(-1px);
}

.ci-section--navy .ci-btn--outline {
    color: var(--ci-white);
    border-color: var(--ci-white);
}

.ci-section--navy .ci-btn--outline:hover {
    background: var(--ci-white);
    color: var(--ci-black);
}

.ci-btn--outline-gold {
    background: transparent;
    color: var(--ci-gold);
    border-color: var(--ci-gold);
}

.ci-btn--outline-gold:hover {
    background: var(--ci-gold);
    color: var(--ci-black);
    transform: translateY(-1px);
}

.ci-btn--danger {
    background: transparent;
    color: #dc3545;
    border-color: #dc3545;
}

.ci-btn--danger:hover {
    background: #dc3545;
    color: var(--ci-white);
}

.ci-btn--lg { padding: 16px 36px; font-size: 15px; }
.ci-btn--small { padding: 8px 16px; font-size: 12px; }
.ci-btn--block { width: 100%; }
.ci-btn--disabled { opacity: 0.5; pointer-events: none; }

/* ========================================
   HERO SECTION
   ======================================== */
.ci-hero {
    position: relative;
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--ci-black) 0%, var(--ci-black-light) 100%);
    color: var(--ci-white);
}

.ci-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(201,168,76,0.03)" d="M0,160L48,176C96,192,192,224,288,218.7C384,213,480,171,576,160C672,149,768,171,864,181.3C960,192,1056,192,1152,176C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"/></svg>');
    background-size: cover;
    background-position: bottom;
    opacity: 0.3;
}

.ci-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.ci-hero__title {
    font-family: var(--ci-font-alt);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 16px;
    color: var(--ci-white);
}

.ci-hero__title span { color: var(--ci-gold); }

.ci-hero__subtitle {
    font-size: clamp(16px, 2vw, 22px);
    color: var(--ci-gray-300);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
}

.ci-hero--page {
    padding: 100px 0 60px;
}

.ci-hero--archive {
    padding: 80px 0 220px;
}

.ci-hero--about {
    background-size: cover;
    background-position: center;
    padding: 170px 0 130px;
}

@media (max-width: 768px) {
    .ci-hero--about {
        padding: 130px 0 90px;
    }
}

.ci-hero--about::before {
    background: linear-gradient(135deg, rgba(6,21,50,0.55) 0%, rgba(6,21,50,0.4) 100%);
    opacity: 1;
}

.ci-hero--como-funciona::before {
    background: linear-gradient(135deg, rgba(6,21,50,0.7) 0%, rgba(6,21,50,0.55) 100%);
}

.ci-hero__search {
    /* Fora do banner, em fluxo normal, com margens entre as seccoes. */
    position: relative;
    z-index: 2;
    padding: 0 24px;
    margin: 48px 0 0;
}

/* A seccao de resultados segue logo a seguir a caixa de pesquisa: reduz o
   espaco entre a nota e "X imoveis encontrados" (padrao .ci-section = 80px). */
.ci-properties-archive .ci-section {
    padding-top: 28px;
}

.ci-hero__search-nota {
    margin: 14px auto 0;
    max-width: 760px;
    text-align: center;
    color: var(--ci-gray-500);
    font-size: 14px;
    line-height: 1.6;
}

.ci-hero__search-nota:first-of-type {
    margin-top: 18px;
}

/* ========================================
   SEARCH FORM
   ======================================== */
.ci-search-form {
    background: var(--ci-white);
    padding: 32px;
    box-shadow: var(--ci-shadow-xl);
    border: 1px solid var(--ci-gray-200);
}

.ci-search-form__main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.ci-search-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ci-search-form__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ci-gray-500);
}

.ci-search-form__input,
.ci-search-form__select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ci-gray-300);
    font-family: var(--ci-font);
    font-size: 14px;
    color: var(--ci-gray-700);
    background: var(--ci-white);
    transition: border-color var(--ci-transition);
}

.ci-search-form__input:focus,
.ci-search-form__select:focus {
    outline: none;
    border-color: var(--ci-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
}

.ci-search-form__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ========================================
   SECTIONS
   ======================================== */
.ci-section {
    padding: 80px 0;
}

.ci-section--search-agencies {
    padding: 40px 0 0;
}

.ci-section-badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 16px;
    background: var(--ci-gold);
    color: var(--ci-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
}

.ci-section-badge + .ci-section-description {
    margin-top: 0;
}

.ci-section-title {
    font-family: var(--ci-font-alt);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--ci-black);
    margin-bottom: 40px;
    position: relative;
}

.ci-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--ci-gold);
    margin-top: 16px;
}

.ci-text-center { text-align: center; }
.ci-text-center::after { margin-left: auto; margin-right: auto; }

/* ========================================
   PROPERTY CARDS
   ======================================== */
.ci-archive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ci-gray-200);
}

.ci-archive-toolbar__results {
    font-size: 14px;
    color: var(--ci-gray-500);
    font-weight: 500;
}

.ci-archive-toolbar__view {
    display: flex;
    gap: 8px;
}

.ci-active-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--ci-gray-50);
    border: 1px solid var(--ci-gray-200);
    font-size: 13px;
    color: var(--ci-gray-600);
}

.ci-active-filter a {
    font-weight: 600;
    color: var(--ci-gold-dark);
    white-space: nowrap;
}

.ci-active-filter a:hover {
    color: var(--ci-gold);
}

.ci-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ci-gray-300);
    background: var(--ci-white);
    cursor: pointer;
    color: var(--ci-gray-400);
    transition: all var(--ci-transition);
}

.ci-view-btn:hover { border-color: var(--ci-gold); color: var(--ci-gold); }
.ci-view-btn--active { background: var(--ci-black); color: var(--ci-white); border-color: var(--ci-black); }

.ci-properties {
    display: grid;
    gap: 28px;
}

.ci-properties--grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.ci-properties--list {
    grid-template-columns: 1fr;
}

/* ----- Shelf (carousel) view ----- */
.ci-properties-shelf {
    position: relative;
}

.ci-properties-shelf--active {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.ci-properties-shelf--active > .ci-properties {
    max-width: var(--ci-container);
    margin: 0 auto;
}

/* Inside layouts with a sidebar (eg. buyer dashboard), breaking out to the
   full viewport width would overlap the sidebar - keep the shelf within its
   own column instead and just pin the arrows to that column's edges. */
.ci-dashboard__main .ci-properties-shelf--active {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 0 52px;
}

.ci-dashboard__main .ci-properties-shelf--active > .ci-properties {
    max-width: none;
}

.ci-dashboard__main .ci-properties-shelf--active .ci-shelf-arrow--prev {
    left: 0;
}

.ci-dashboard__main .ci-properties-shelf--active .ci-shelf-arrow--next {
    right: 0;
}

.ci-properties--shelf {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.ci-properties--shelf::-webkit-scrollbar {
    display: none;
}

.ci-properties--shelf .ci-property-card,
.ci-properties--shelf .ci-agency-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
}

.ci-shelf-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ci-gray-200);
    background: var(--ci-white);
    color: var(--ci-black);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--ci-shadow-sm);
    transition: all var(--ci-transition);
}

.ci-shelf-arrow--prev { left: 24px; }
.ci-shelf-arrow--next { right: 24px; }

.ci-shelf-arrow:hover {
    border-color: var(--ci-gold);
    color: var(--ci-gold);
}

.ci-properties-shelf--active .ci-shelf-arrow {
    display: flex;
}

.ci-property-card {
    position: relative;
    background: #0b1730;
    border: none;
    overflow: hidden;
    border-radius: 10px;
    transition: all var(--ci-transition);
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.ci-property-card:hover {
    box-shadow: var(--ci-shadow-lg);
    transform: translateY(-4px);
}

.ci-property-card__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ci-property-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,21,50,0) 35%, rgba(6,21,50,0.55) 65%, rgba(6,21,50,0.96) 100%);
    z-index: 1;
}

.ci-property-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ci-property-card:hover .ci-property-card__image img {
    transform: scale(1.05);
}

/* ----- Property Card Photo Gallery ----- */
.ci-property-card__slides {
    position: absolute;
    inset: 0;
}

.ci-property-card__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ci-property-card__slide--active {
    opacity: 1;
    z-index: 1;
}

.ci-property-card__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(6,21,50,0.5);
    color: var(--ci-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ci-transition);
}

.ci-property-card__arrow:hover {
    background: rgba(6,21,50,0.8);
    border-color: var(--ci-gold);
}

.ci-property-card__arrow--prev { left: 10px; }
.ci-property-card__arrow--next { right: 10px; }

.ci-property-card__dots {
    position: absolute;
    top: 16px;
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}

.ci-property-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: all var(--ci-transition);
}

.ci-property-card__dot--active {
    width: 18px;
    border-radius: 3px;
    background: var(--ci-gold);
}

.ci-property-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ci-gray-800);
    color: var(--ci-gray-400);
    font-size: 14px;
}

.ci-property-card__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ci-white);
    border-radius: 4px;
    z-index: 2;
}

.ci-badge--venda { background: var(--ci-gold); }
.ci-badge--arrendamento { background: #2196F3; }
.ci-badge--investimento { background: #4CAF50; }

/* Selo de imóvel em exclusivo (angariação exclusiva) - imagem redonda.
   Seletor com a mesma especificidade de `.ci-property-card__image img`
   (que força 100%/cover), senão o selo enchia o cartão. */
.ci-property-card__image img.ci-property-card__exclusive {
    position: absolute;
    bottom: 14px;
    left: 14px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: contain;
    transition: none;
    z-index: 2;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.ci-property-card:hover .ci-property-card__image img.ci-property-card__exclusive {
    transform: none;
}

.ci-property-header__selo {
    float: right;
    width: 112px;
    height: 112px;
    margin: 0 0 10px 18px;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.22));
}

.ci-property-header__exclusivo-nota {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid var(--ci-gold);
    border-radius: 6px;
    background: rgba(201,168,76,0.08);
    color: var(--ci-gold-dark);
    font-size: 14px;
}
.ci-property-header__exclusivo-nota svg { flex-shrink: 0; }
.ci-property-header__exclusivo-nota strong { color: inherit; }

.ci-property-card__favorite {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,21,50,0.55);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    cursor: pointer;
    color: var(--ci-white);
    transition: all var(--ci-transition);
    z-index: 2;
}

.ci-property-card__favorite:hover { color: #e74c3c; border-color: #e74c3c; }
.ci-property-card__favorite--active { color: #e74c3c; border-color: #e74c3c; }
.ci-property-card__favorite--active svg { fill: #e74c3c; }

.ci-property-card__body {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 20px;
    color: var(--ci-white);
}

.ci-property-card__price {
    font-family: var(--ci-font-alt);
    font-size: 24px;
    font-weight: 700;
    color: var(--ci-gold);
    margin-bottom: 6px;
}

/* ----- Price-tier collection label ----- */
.ci-property-card__collection {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    padding: 3px 0;
}

.ci-property-card__collection--premium { color: var(--ci-gold); }
.ci-property-card__collection--luxury { color: #e0c179; }
.ci-property-card__collection--signature {
    color: var(--ci-white);
    background: linear-gradient(90deg, #b8953a, #f0d488, #b8953a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ci-property-header__collection {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.ci-property-header__collection--premium { color: var(--ci-gold); }
.ci-property-header__collection--luxury { color: #b8953a; }
.ci-property-header__collection--signature {
    color: var(--ci-black);
    background: linear-gradient(90deg, #8b6a22, #d7bd68, #8b6a22);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ci-property-card__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ci-white);
    margin-bottom: 8px;
    line-height: 1.3;
}

.ci-property-card__title a { color: inherit; }
.ci-property-card__title a:hover { color: var(--ci-gold); }

.ci-property-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 12px;
}

.ci-property-card__location svg { flex-shrink: 0; }

.ci-property-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ci-property-card__meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    background: rgba(6,21,50,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 12px;
    line-height: 1.4;
}

.ci-property-card__meta-chip--reference {
    color: rgba(255,255,255,0.85);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ci-property-card__meta-chip--agency {
    color: rgba(255,255,255,0.9);
}

.ci-property-card__meta-chip--agency a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.4);
}

.ci-property-card__meta-chip--agency a:hover { color: var(--ci-gold); }

.ci-property-card__features {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ci-property-card__feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}

.ci-property-card__feature svg {
    color: var(--ci-gold);
    flex-shrink: 0;
}

.ci-property-card__footer {
    position: relative;
    z-index: 2;
    padding: 0 20px 20px;
}

.ci-property-card__footer .ci-btn--outline {
    color: var(--ci-white);
    border-color: rgba(255,255,255,0.3);
}

.ci-property-card__footer .ci-btn--outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--ci-white);
}

/* ----- List View ----- */
.ci-properties--list .ci-property-card {
    flex-direction: row;
    min-height: 0;
}

.ci-properties--list .ci-property-card__image {
    position: relative;
    width: 320px;
    flex-shrink: 0;
    aspect-ratio: 4/3;
}

.ci-properties--list .ci-property-card__image::after {
    background: linear-gradient(180deg, rgba(6,21,50,0) 60%, rgba(6,21,50,0.5) 100%);
}

.ci-properties--list .ci-property-card__body {
    flex: 1;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ci-properties--list .ci-property-card__footer {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 20px;
    border-top: none;
    border-left: 1px solid rgba(255,255,255,0.1);
}

/* ========================================
   SINGLE PROPERTY
   ======================================== */
.ci-property-hero__gallery {
    position: relative;
}

.ci-gallery-main {
    width: 100%;
    max-height: 600px;
    overflow: hidden;
}

.ci-gallery-main img {
    width: 100%;
    height: 600px;
    object-fit: cover;
}

.ci-gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    overflow-x: auto;
}

.ci-gallery-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    transition: border-color var(--ci-transition);
    overflow: hidden;
}

.ci-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ci-gallery-thumb--active { border-color: var(--ci-gold); }

.ci-gallery-more {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border: 2px dashed var(--ci-gray-300);
    background: var(--ci-gray-50);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--ci-gray-500);
    transition: all var(--ci-transition);
}

.ci-gallery-more:hover {
    border-color: var(--ci-gold);
    color: var(--ci-gold);
}

.ci-property-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
}

.ci-property-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ci-gray-200);
}

.ci-property-header__badges {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.ci-badge--status { background: var(--ci-gray-600); }
.ci-badge--pendente { background: #FF9800; }
.ci-badge--vendido { background: #dc3545; }
.ci-badge--alugado { background: #6c757d; }

.ci-property-header__title {
    font-family: var(--ci-font-alt);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    color: var(--ci-black);
    margin-bottom: 12px;
    line-height: 1.2;
}

.ci-property-header__location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--ci-gray-500);
    margin-bottom: 16px;
}

.ci-property-header__price {
    font-family: var(--ci-font-alt);
    font-size: 36px;
    font-weight: 700;
    color: var(--ci-gold);
}

.ci-property-header__agency {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ci-gray-200);
    font-size: 14px;
    color: var(--ci-gray-500);
}

.ci-property-header__agency img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ci-property-header__agency a,
.ci-property-header__agency strong {
    color: var(--ci-black);
    font-weight: 600;
}

.ci-property-header__agency a {
    text-decoration: none;
}

.ci-property-header__agency a:hover { color: var(--ci-gold); }

.ci-property-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.ci-property-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    background: var(--ci-gray-50);
    border: 1px solid var(--ci-gray-200);
    text-align: center;
}

.ci-property-feature__icon { color: var(--ci-gold); }

.ci-property-feature__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--ci-black);
}

.ci-property-feature__label {
    font-size: 12px;
    color: var(--ci-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ci-property-description__content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--ci-gray-600);
    max-width: 800px;
}

.ci-property-map { margin-top: 40px; }

.ci-map__container {
    width: 100%;
    height: 400px;
    background: var(--ci-gray-100);
}

/* ----- Sidebar ----- */
.ci-sidebar-sticky {
    position: sticky;
    top: 120px;
}

.ci-contact-form-widget {
    background: var(--ci-gray-50);
    border: 1px solid var(--ci-gray-200);
    padding: 32px;
    margin-bottom: 24px;
}

.ci-contact-form-widget__title {
    font-family: var(--ci-font-alt);
    font-size: 22px;
    font-weight: 700;
    color: var(--ci-black);
    margin-bottom: 24px;
    text-align: center;
}

.ci-contact-form-widget__agente-alvo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -12px 0 24px;
    color: var(--ci-gold-dark);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.ci-contact-form-gate {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.ci-contact-form-gate p {
    color: var(--ci-gray-600);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* ========================================
   FORMS
   ======================================== */
.ci-form-group {
    margin-bottom: 16px;
}

.ci-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ci-gray-600);
    margin-bottom: 6px;
}

.ci-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--ci-gray-300);
    font-family: var(--ci-font);
    font-size: 14px;
    color: var(--ci-gray-700);
    background: var(--ci-white);
    transition: all var(--ci-transition);
}

.ci-input:focus {
    outline: none;
    border-color: var(--ci-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.1);
}

.ci-textarea { resize: vertical; min-height: 100px; }
.ci-textarea--lg { min-height: 260px; }

.ci-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ci-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.ci-form-row--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.ci-form-row--compact { grid-template-columns: 200px 200px; }
.ci-form-row--cp { grid-template-columns: 140px 1fr; }

.ci-form-group--full { grid-column: 1 / -1; }
.ci-form-group--half { grid-column: span 1; }
.ci-form-group--narrow { max-width: 260px; }

.ci-phone-group {
    display: flex;
    gap: 8px;
}

.ci-phone-group__ddi {
    flex: 0 0 auto;
    width: auto;
    max-width: 160px;
}

.ci-phone-group__number {
    flex: 1;
    min-width: 0;
}

.ci-form-section {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ci-gray-200);
}

.ci-form-section:last-of-type {
    border-bottom: none;
}

.ci-form-section__title {
    font-family: var(--ci-font-alt);
    font-size: 22px;
    font-weight: 700;
    color: var(--ci-black);
    margin-bottom: 20px;
}

.ci-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 16px;
    margin-bottom: 16px;
}

.ci-checkbox-grid__group-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ci-gold-dark);
    margin: 12px 0 6px;
}

.ci-checkbox-grid__group-label:first-of-type {
    margin-top: 0;
}

.ci-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--ci-gray-700);
    cursor: pointer;
}

.ci-checkbox-label input { margin-top: 3px; }

.ci-checkbox-label--disabled {
    color: var(--ci-gray-400);
    cursor: not-allowed;
}

.ci-checkbox-label--disabled input { cursor: not-allowed; }

.ci-form-consent {
    margin-bottom: 12px;
}

.ci-contact-form__response {
    padding: 16px;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
}

.ci-contact-form__response.ci-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.ci-contactus-card {
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-lg);
    overflow: hidden;
    padding: 40px;
    margin-bottom: 40px;
}

.ci-contactus-card__cover {
    margin: -40px -40px 32px;
}

.ci-contactus-card__cover img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .ci-contactus-card__cover {
        margin: -40px -40px 24px;
    }

    .ci-contactus-card__cover img {
        height: 140px;
    }
}

.ci-contactus-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ci-contactus-section-title svg {
    color: var(--ci-gold);
    flex-shrink: 0;
}

.ci-contactus-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 36px 24px;
    border: 2px dashed var(--ci-gray-300);
    cursor: pointer;
    color: var(--ci-gray-600);
    transition: all var(--ci-transition);
}

.ci-contactus-dropzone:hover,
.ci-contactus-dropzone--dragover {
    border-color: var(--ci-gold);
    background: rgba(201,168,76,0.04);
}

.ci-contactus-dropzone svg {
    color: var(--ci-gold);
}

.ci-contactus-dropzone small {
    color: var(--ci-gray-500);
    font-size: 12px;
}

.ci-contactus-rgpd {
    margin-top: 20px;
    margin-bottom: 24px;
}

/* A última secção do formulário de contacto já perde a borda inferior via
   .ci-form-section:last-of-type, mas mantinha a margem e o padding pensados
   para separar DUAS secções de conteúdo - excessivos antes de uma simples
   caixa de consentimento. Zerados aqui para o espaço acima do "Autorizo"
   vir só do form-group da textarea + da margem própria do .ci-contactus-rgpd. */
.ci-contactus-card .ci-form-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

.ci-contactus-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    padding: 32px 0;
    border-top: 1px solid var(--ci-gray-200);
    border-bottom: 1px solid var(--ci-gray-200);
    margin-bottom: 32px;
}

.ci-contactus-trust__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ci-contactus-trust__item svg {
    color: var(--ci-gold);
    flex-shrink: 0;
}

.ci-contactus-trust__item strong {
    display: block;
    font-family: var(--ci-font-alt);
    margin-bottom: 4px;
}

.ci-contactus-trust__item p {
    font-size: 13px;
    color: var(--ci-gray-500);
    margin: 0;
}

.ci-contactus-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}

.ci-contactus-bar a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ci-gray-600);
    font-size: 14px;
}

.ci-contactus-bar a:hover {
    color: var(--ci-gold);
}

.ci-contact-form__response.ci-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ========================================
   ABOUT PAGE
   ======================================== */
.ci-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.ci-about-grid--single {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.ci-about-grid--single .ci-section-title::after {
    margin-left: auto;
    margin-right: auto;
}

.ci-section--navy .ci-about-grid__text p {
    color: rgba(255,255,255,0.72);
}

/* Assinatura da marca, sob os cards de valores - resume os quatro princípios. */
.ci-values-signature {
    max-width: 760px;
    margin: 56px auto 0;
    text-align: center;
    font-family: var(--ci-font-alt);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--ci-gold);
}

.ci-values-signature::before {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: rgba(201,168,76,0.45);
    margin: 0 auto 28px;
}

/* Separadores entre secções de persona (ex: página Como Funciona) - linha dourada
   a toda a largura, em tons diferentes para distinguir cada transição. */
.ci-persona-divider {
    position: relative;
    height: 1px;
    width: 100%;
}

.ci-persona-divider::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, currentColor 25%, currentColor 75%, transparent 100%);
    opacity: 0.55;
}

.ci-persona-divider--gold-light { color: var(--ci-gold-light); }
.ci-persona-divider--gold { color: var(--ci-gold); }
.ci-persona-divider--gold-dark { color: var(--ci-gold-dark); }

.ci-section--navy .ci-value-card {
    border-color: rgba(255,255,255,0.15);
}

.ci-section--navy .ci-value-card h3 {
    color: var(--ci-white);
}

.ci-section--navy .ci-value-card p {
    color: rgba(255,255,255,0.65);
}

.ci-section--navy .ci-content-wrap {
    color: rgba(255,255,255,0.72);
}

.ci-section--founder {
    position: relative;
    padding: 64px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 45%, rgba(201,168,76,0.1), transparent 42%),
        linear-gradient(180deg, #fbfaf7 0%, var(--ci-gray-50) 100%);
    border-top: 1px solid rgba(201,168,76,0.28);
    border-bottom: 1px solid rgba(201,168,76,0.28);
}

.ci-founder-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-lg);
    overflow: hidden;
}

.ci-founder-card__cover {
    position: relative;
    aspect-ratio: 4 / 1;
    background: var(--ci-black);
}

.ci-founder-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ci-founder-card__linkedin-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(6,21,50,0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    flex-shrink: 0;
}

.ci-founder-card__linkedin-icon:hover {
    background: var(--ci-gold);
    color: var(--ci-black);
}

.ci-founder-card__photo {
    flex-shrink: 0;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    border: 5px solid #fff;
    overflow: hidden;
    background: var(--ci-black);
    box-shadow: var(--ci-shadow);
    margin: -74px 0 0 32px;
    position: relative;
}

.ci-founder-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.ci-founder-card__body {
    padding: 16px 32px 32px;
}

.ci-founder-card__heading {
    margin-bottom: 2px;
}

.ci-founder-card__heading h2 {
    font-family: var(--ci-font-alt);
    font-size: 28px;
    font-weight: 700;
    color: var(--ci-black);
    margin: 0;
}

.ci-founder-card__title {
    color: var(--ci-gold-dark);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.ci-founder-card__bio {
    color: var(--ci-gray-600);
    font-size: 15px;
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 10px;
}

.ci-founder-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ci-gray-500);
    font-size: 14px;
    margin-bottom: 20px;
}

.ci-founder-card__location svg {
    flex-shrink: 0;
}

.ci-founder-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding-top: 20px;
    margin-bottom: 24px;
    border-top: 1px solid var(--ci-gray-100);
}

.ci-founder-card__stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ci-black);
}

.ci-founder-card__stat svg {
    color: var(--ci-gold);
    flex-shrink: 0;
}

.ci-founder-card__stat-number {
    font-family: var(--ci-font-alt);
    font-size: 18px;
    font-weight: 700;
}

.ci-founder-card__stat-label {
    font-size: 13px;
    color: var(--ci-gray-500);
}

@media (max-width: 768px) {
    .ci-section--founder {
        padding: 40px 0;
    }

    /*
     * Num telemovel a capa fica com uns 94px de altura e o logotipo ocupa-a
     * quase toda. A foto sobreposta, seja qual for o tamanho que se lhe de,
     * cai sempre por cima do "CARLO". Aqui deixa de sobrepor e assenta por
     * baixo da capa: nao ha colisao possivel, em largura nenhuma.
     */
    .ci-founder-card__photo {
        width: 96px;
        height: 96px;
        margin: 14px 0 0 20px;
        border-width: 4px;
    }

    .ci-founder-card__body {
        padding: 10px 20px 24px;
    }

    .ci-founder-card__stats {
        gap: 20px;
    }
}

.ci-about-grid__text p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--ci-gray-600);
    margin-bottom: 16px;
}

.ci-about-grid__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ci-stat {
    text-align: center;
    padding: 32px 24px;
    background: var(--ci-gray-50);
    border: 1px solid var(--ci-gray-200);
}

.ci-stat__number {
    display: block;
    font-family: var(--ci-font-alt);
    font-size: 42px;
    font-weight: 700;
    color: var(--ci-gold);
    margin-bottom: 8px;
}

.ci-stat__label {
    font-size: 14px;
    color: var(--ci-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ci-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
}

.ci-value-card {
    padding: 40px 28px;
    text-align: center;
    border: 1px solid var(--ci-gray-200);
    transition: all var(--ci-transition);
}

.ci-value-card:hover {
    box-shadow: var(--ci-shadow);
    transform: translateY(-4px);
    border-color: var(--ci-gold);
}

.ci-value-card__icon {
    color: var(--ci-gold);
    margin-bottom: 20px;
}

.ci-value-card__eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ci-gold);
    margin-bottom: 10px;
}

.ci-value-card h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ci-black);
    margin-bottom: 12px;
}

.ci-value-card p {
    font-size: 14px;
    color: var(--ci-gray-500);
    line-height: 1.6;
}

/* ========================================
   CONTACT PAGE
   ======================================== */
.ci-contact-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 32px;
}

.ci-contact-info-row .ci-contact-info__item {
    flex: 1 1 200px;
    padding: 0;
    border-bottom: none;
}

.ci-mandate-widget {
    border: 1px solid var(--ci-gold);
}

.ci-contact-info__item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--ci-gray-100);
}

.ci-contact-info__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ci-gray-50);
    color: var(--ci-gold);
}

.ci-contact-info__text h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--ci-black);
    margin-bottom: 4px;
}

.ci-contact-info__text p,
.ci-contact-info__text a {
    font-size: 14px;
    color: var(--ci-gray-500);
}

.ci-map-full { height: 400px; background: var(--ci-gray-100); }

/* ========================================
   404 PAGE
   ======================================== */
.ci-main--404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.ci-404 {
    text-align: center;
    padding: 80px 24px;
}

.ci-404__title {
    font-family: var(--ci-font-alt);
    font-size: 120px;
    font-weight: 700;
    color: var(--ci-gold);
    line-height: 1;
    margin-bottom: 16px;
}

.ci-404__subtitle {
    font-size: 28px;
    color: var(--ci-black);
    margin-bottom: 16px;
}

.ci-404__text {
    font-size: 16px;
    color: var(--ci-gray-500);
    margin-bottom: 32px;
}

.ci-property-gate-section {
    position: relative;
    padding: 64px 0;
    overflow: hidden;
}

.ci-property-gate-bg {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(6px) brightness(0.75);
    transform: scale(1.05);
}

.ci-property-gate-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 20, 38, 0.35), rgba(11, 20, 38, 0.55));
}

.ci-property-gate-section .ci-container {
    position: relative;
    z-index: 1;
}

.ci-property-gate-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 32px;
}

.ci-property-gate {
    background: var(--ci-white);
    border-radius: 12px;
    padding: 56px 40px;
    text-align: center;
}

.ci-property-gate__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ci-gray-100);
    color: var(--ci-gold);
    margin-bottom: 20px;
}

.ci-property-gate__title {
    font-family: var(--ci-font-alt);
    font-size: 28px;
    font-weight: 700;
    color: var(--ci-black);
    margin-bottom: 8px;
}

.ci-property-gate__location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ci-gray-500);
    font-size: 14px;
    margin-bottom: 20px;
}

.ci-property-gate__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ci-gray-500);
    margin-bottom: 28px;
}

.ci-property-gate__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ci-property-gate__trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ci-gray-500);
}

.ci-property-gate__persona-line {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ci-gray-200);
    text-align: center;
    font-size: 12.5px;
    color: var(--ci-gray-400);
}

.ci-property-gate__persona-line a {
    color: var(--ci-gold-dark);
    text-decoration: underline;
}

.ci-property-gate__persona-line a:hover {
    color: var(--ci-gold);
}

.ci-property-gate-sidebar {
    background: var(--ci-cream, #f7f3ea);
    border-radius: 12px;
    padding: 32px;
}

.ci-property-gate-sidebar__title {
    font-family: var(--ci-font-alt);
    font-size: 20px;
    font-weight: 700;
    color: var(--ci-black);
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--ci-gold);
    display: inline-block;
}

.ci-property-gate-benefits {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.ci-property-gate-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: var(--ci-gray-700);
    font-size: 14px;
    border-bottom: 1px solid var(--ci-gray-200);
}

.ci-property-gate-benefits li:last-child {
    border-bottom: none;
}

.ci-property-gate-benefits li svg {
    flex-shrink: 0;
    color: var(--ci-gold);
}

.ci-property-gate-urgency {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(212, 165, 63, 0.12);
    border: 1px solid var(--ci-gold-light);
    border-radius: 8px;
    padding: 16px;
    color: var(--ci-black);
}

.ci-property-gate-urgency svg {
    flex-shrink: 0;
    color: var(--ci-gold-dark);
    margin-top: 2px;
}

.ci-property-gate-urgency strong {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.ci-property-gate-urgency p {
    font-size: 13px;
    color: var(--ci-gray-600);
    margin: 0;
}


/* ========================================
   NO RESULTS
   ======================================== */
.ci-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 24px;
}

.ci-no-results h2 {
    font-size: 24px;
    color: var(--ci-black);
    margin-bottom: 12px;
}

.ci-no-results p {
    color: var(--ci-gray-500);
    margin-bottom: 24px;
}

/* ========================================
   PAGINATION
   ======================================== */
.ci-pagination {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.ci-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    margin: 0 4px;
    border: 1px solid var(--ci-gray-300);
    font-size: 14px;
    font-weight: 500;
    color: var(--ci-gray-600);
    text-decoration: none;
    transition: all var(--ci-transition);
}

.ci-pagination .page-numbers:hover {
    border-color: var(--ci-gold);
    color: var(--ci-gold);
}

.ci-pagination .page-numbers.current {
    background: var(--ci-black);
    border-color: var(--ci-black);
    color: var(--ci-white);
}

/* ========================================
   FOOTER
   ======================================== */
.ci-footer {
    background: #061532;
    color: var(--ci-gray-400);
    margin-top: auto;
}

.ci-footer__main {
    padding: 80px 0 48px;
}

.ci-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.ci-footer__tagline {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ci-gold);
    margin-bottom: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.ci-footer__logo h3 {
    font-family: var(--ci-font-alt);
    font-size: 12px;
    color: var(--ci-white);
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.ci-footer__logo .custom-logo-link {
    display: inline-block;
    max-width: 140px;
}

.ci-footer__logo img,
.ci-footer__logo .custom-logo {
    width: 100%;
    max-width: 140px;
    height: auto;
}

.ci-footer__description {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.ci-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ci-gray-600);
    font-size: 12px;
    font-weight: 700;
    color: var(--ci-gray-400);
    transition: all var(--ci-transition);
}

.ci-social-link:hover {
    border-color: var(--ci-gold);
    color: var(--ci-gold);
    background: rgba(201,168,76,0.1);
}

.ci-footer__heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ci-white);
    margin-bottom: 20px;
}

.ci-footer__menu li {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.ci-footer__menu a {
    font-size: 14px;
    color: var(--ci-gray-400);
    transition: color var(--ci-transition);
}

.ci-footer__menu a:hover { color: var(--ci-gold); }

.ci-footer__icon-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.ci-footer__icon-list li {
    margin-bottom: 12px;
}

.ci-footer__icon-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ci-gray-400);
    transition: color var(--ci-transition);
}

.ci-footer__icon-list a svg {
    stroke: var(--ci-gold);
    flex-shrink: 0;
}

.ci-footer__icon-list a:hover { color: var(--ci-gold); }

.ci-footer__menu--arrow li { margin-bottom: 4px; }

.ci-footer__menu--arrow a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ci-footer__menu--arrow a span {
    color: var(--ci-gold);
}

.ci-footer__menu--legal {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.ci-footer__menu--legal li {
    margin-bottom: 6px;
}

.ci-footer__menu--legal a {
    font-size: 13px;
}

.ci-footer__newsletter-text {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.ci-footer__newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.ci-footer__newsletter-input {
    position: relative;
}

.ci-footer__newsletter-input input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--ci-white);
    font-size: 14px;
}

.ci-footer__newsletter-input input::placeholder {
    color: var(--ci-gray-500);
}

.ci-footer__newsletter-input svg {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    stroke: var(--ci-gray-500);
    pointer-events: none;
}

.ci-footer__newsletter-privacy {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--ci-gray-500);
    margin: 0;
}

.ci-footer__newsletter-privacy svg {
    stroke: var(--ci-gold);
    flex-shrink: 0;
    margin-top: 1px;
}

.ci-footer__trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.ci-footer__trust-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ci-footer__trust-item svg {
    stroke: var(--ci-gold);
    flex-shrink: 0;
    margin-top: 2px;
}

.ci-footer__trust-item strong {
    display: block;
    font-size: 13px;
    color: var(--ci-white);
    margin-bottom: 4px;
}

.ci-footer__trust-item span {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ci-gray-500);
}

.ci-footer__linkedin-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
    transition: opacity var(--ci-transition);
}

.ci-footer__linkedin-banner:hover {
    opacity: 0.85;
}

.ci-footer__linkedin-banner-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ci-footer__linkedin-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--ci-gold);
    color: var(--ci-black);
    border-radius: 8px;
}

.ci-footer__linkedin-banner-title {
    color: var(--ci-gold);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ci-footer__linkedin-banner-text {
    color: var(--ci-gray-400);
    font-size: 13px;
    line-height: 1.5;
}


.ci-footer__bottom {
    padding: 20px 0;
    border-top: 1px solid var(--ci-gray-700);
}

.ci-footer__bottom-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.ci-footer__bottom-inner p {
    font-size: 13px;
    margin: 0;
    color: var(--ci-gray-500);
}

.ci-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ci-gold);
    color: var(--ci-black);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--ci-transition);
    z-index: 999;
}

.ci-scroll-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ci-scroll-top:hover {
    background: var(--ci-gold-dark, var(--ci-gold));
}

@media (max-width: 1100px) {
    .ci-footer__grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 40px;
    }

    .ci-footer__col--brand {
        grid-column: 1 / -1;
    }

    .ci-footer__trust-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .ci-footer__grid {
        grid-template-columns: 1fr;
    }

    .ci-footer__trust-row {
        grid-template-columns: 1fr;
    }

    .ci-footer__bottom-inner {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 900px) {
    .ci-property-gate-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .ci-property-gate {
        padding: 40px 24px;
    }

    .ci-property-gate-sidebar {
        padding: 24px;
    }

    .ci-property-gate__actions {
        flex-direction: column;
    }
}

/* ========================================
   PROFESSIONAL HOME REBUILD
   ======================================== */
.ci-gold { color: var(--ci-gold); }

.ci-container--narrow {
    max-width: 940px;
}

.ci-section-description,
.ci-section-text {
    max-width: 760px;
    margin: -20px auto 40px;
    color: var(--ci-gray-500);
    font-size: 17px;
    line-height: 1.8;
}

.ci-section-text--large {
    font-size: 19px;
    color: var(--ci-gray-600);
}

.ci-section--stone,
.ci-section--editorial {
    background: linear-gradient(180deg, #fbfaf7 0%, var(--ci-gray-50) 100%);
}

/* Tons claros adicionais para diferenciar secções consecutivas sem recorrer
   a fundos escuros (ci-section--navy) - cada secção da homepage tem o seu
   próprio tom, mantendo a mesma família clara vista em .ci-approach. */
.ci-section--tint-slate {
    background: linear-gradient(180deg, #f5f7fb 0%, #eef1f7 100%);
}

.ci-section--tint-sand {
    background: linear-gradient(180deg, #fdfaf3 0%, #f9f1de 100%);
}

.ci-section--tint-mist {
    background: linear-gradient(180deg, #f7f8f9 0%, #f1f2f4 100%);
}

.ci-section--tint-gold {
    background: linear-gradient(180deg, #faf6ec 0%, #f3e9d0 100%);
}

/* Homepage: "Cobertura Estratégica" (tint-mist) termina e "Backoffice"
   (tint-gold) começa logo a seguir, ambas com tons pálidos - o padding
   inteiro de .ci-section (80px) em cada uma soma 160px de espaço sem
   nada visual a marcar a transição. Aperta-se só esta costura. */
#markets {
    padding-bottom: 40px;
}

#backoffice {
    padding-top: 40px;
    /* O padding-bottom de .ci-section (80px) continuava a mostrar o creme
       da secção-mãe depois de .ci-plans-features já ter passado a azul-marinho
       - sobrava uma tira creme entre o azul-marinho e o rodapé. A própria
       .ci-plans-features já tem 72px de padding inferior, por isso a secção
       não precisa de nenhum aqui. */
    padding-bottom: 0;
}

/* Fotografia como textura de fundo, mal se destaca da secção de propósito -
   é ambiente, não hero; o teor tem de ficar por cima. --ci-photo-backdrop-image
   e --ci-photo-backdrop-position (opcional, default left center) definem-se
   inline por secção conforme onde o assunto da foto fica enquadrado.
   --ci-photo-backdrop-overlay/--ci-photo-backdrop-overlay-opacity têm
   default para secções claras (creme) - as secções escuras (--navy) passam
   o gradiente navy da própria secção para a foto se integrar em vez de
   destoar. */
.ci-photo-backdrop {
    position: relative;
    overflow: hidden;
}

.ci-photo-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--ci-photo-backdrop-image);
    background-size: cover;
    background-position: var(--ci-photo-backdrop-position, left center);
    opacity: var(--ci-photo-backdrop-image-opacity, 0.4);
}

.ci-photo-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ci-photo-backdrop-overlay, linear-gradient(180deg, #fbfaf7 0%, var(--ci-gray-50) 100%));
    opacity: var(--ci-photo-backdrop-overlay-opacity, 0.55);
}

.ci-photo-backdrop > .ci-container {
    position: relative;
    z-index: 1;
}

.ci-section--navy {
    background: radial-gradient(circle at top left, rgba(201,168,76,0.16), transparent 34%), linear-gradient(135deg, #071426 0%, var(--ci-black) 100%);
    color: var(--ci-white);
}

/* Contrasta de propósito com o "ci-section--tint-gold" da secção-mãe (grelha
   de funcionalidades do backoffice) - sem isto os planos ficam a flutuar no
   mesmo creme, sem nada a marcar onde uma zona acaba e a outra começa. */
.ci-subscriptions-panel {
    margin-top: 40px;
    padding: 56px 0 0;
    background: linear-gradient(180deg, #fbfaf7 0%, var(--ci-gray-50) 100%);
    color: var(--ci-gray-600);
}

.ci-section-title--light,
.ci-section--navy .ci-section-title {
    color: var(--ci-white);
}

.ci-subscriptions-panel .ci-section-title {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.ci-subscriptions-panel .ci-section-description {
    color: var(--ci-gray-600);
}

.ci-section-description--light,
.ci-section--navy .ci-section-description {
    color: rgba(255,255,255,0.68);
}

.ci-section-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* ----- Home Carousel ----- */
/* O banner tinha altura FIXA (height) e overflow:hidden, e os slides eram
   position:absolute - logo, nunca conseguiam empurrar o contentor. Tudo o
   que passasse da altura era cortado, e era: a 1920x1080 em PT faltavam
   114px ao slide 1, e a 1920x800 em alemao os quatro slides eram cortados,
   ate 279px. Desapareciam os botoes e metade da ilustracao.

   Agora os slides empilham-se em grid, na mesma celula: continuam
   sobrepostos e a fazer crossfade, mas ja contam para a altura, por isso o
   contentor fica com a altura do slide MAIS ALTO. O valor em vh passa a
   min-height, para o banner manter a presenca nos ecras grandes e so
   crescer quando o texto precisa. Deixa de haver corte em qualquer lingua
   ou altura de ecra. */
.ci-hero-slider {
    position: relative;
    min-height: max(720px, 92vh);
    overflow: hidden;
    color: var(--ci-white);
    background: var(--ci-black);
}

.ci-hero-slider--compact {
    min-height: max(calc(360px + 20mm), calc(46vh + 20mm));
}

.ci-hero-slider--compact-tall {
    min-height: max(calc(360px + 40mm), calc(46vh + 40mm));
}

.ci-hero-slider--compact .ci-hero-slider__content {
    padding: 90px 24px 60px;
}

.ci-hero-slider--compact .ci-hero-slider__indicators,
.ci-hero-slider--compact .ci-hero-slider__counter {
    bottom: 28px;
}

.ci-hero-slider__image,
.ci-hero-slider__overlay {
    position: absolute;
    inset: 0;
}

/* Os slides ocupam todos a mesma celula da grelha: ficam sobrepostos como
   antes, mas em fluxo - e o contentor passa a ter a altura do mais alto. */
.ci-hero-slider__slides {
    display: grid;
    min-height: inherit;
}

.ci-hero-slider__slide {
    grid-area: 1 / 1;
    min-height: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.ci-hero-slider__slide--active {
    opacity: 1;
    z-index: 1;
}

.ci-hero-slider__image {
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 8s ease;
}

.ci-hero-slider__slide--active .ci-hero-slider__image {
    transform: scale(1.08);
}

/* ----- Marca e pilares do slide 1 (texto real, dentro do corpo padrão
   do slide - mesma escala vw/clamp dos restantes slides, para que o
   slide 1 se comporte exatamente como os outros: fundo "cover", edge-
   to-edge, sem barras de letterbox). ----- */
.ci-hero-slider__content:has(.ci-hero-slider__brand) {
    padding-top: 80px;
    padding-bottom: 60px;
}

.ci-hero-slider__content:has(.ci-hero-slider__brand) .ci-hero-slider__title {
    margin-bottom: 14px;
}

.ci-hero-slider__content:has(.ci-hero-slider__brand) .ci-hero-slider__text {
    margin-bottom: 0;
}

.ci-hero-slider__brand {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.ci-hero-slider__brand-carlo {
    font-family: var(--ci-font-alt);
    font-size: clamp(28px, 3.2vw, 42px);
    letter-spacing: 3px;
    background: linear-gradient(100deg, #eef2f6 0%, #a7b1bd 16%, #f8fafc 36%, #7c8794 55%, #dde2e7 78%, #5a6470 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ci-hero-slider__brand-international {
    margin-top: 4px;
    font-family: var(--ci-font-alt);
    font-size: clamp(12px, 1.3vw, 17px);
    letter-spacing: 6px;
    color: #c3cad3;
}

.ci-hero-slider__brand-tagline {
    align-self: flex-start;
    margin-top: 8px;
    font-size: clamp(9px, 0.75vw, 11px);
    letter-spacing: 2px;
    color: #c3cad3;
}

.ci-hero-slider__pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 36px;
    margin-top: 20px;
}

.ci-hero-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ci-hero-pillar__icon {
    width: 22px;
    height: 22px;
    color: var(--ci-gold);
    margin-bottom: 8px;
}

.ci-hero-pillar__label {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    letter-spacing: 1.5px;
    line-height: 1.5;
    color: #e8edf3;
}

.ci-hero-slider__overlay {
    background: linear-gradient(110deg, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.18) 100%);
    z-index: 1;
}

.ci-hero-slider__content {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    align-items: center;
    max-width: var(--ci-container);
    margin: 0 auto;
    padding: 130px 24px 110px;
}

.ci-hero-slider__body {
    max-width: 720px;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s ease 0.25s, transform 0.9s ease 0.25s;
}

.ci-hero-slider__slide--active .ci-hero-slider__body {
    opacity: 1;
    transform: translateY(0);
}

.ci-hero-slider__subtitle {
    margin-bottom: 18px;
    color: rgba(255,255,255,0.68);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.ci-hero-slider__title {
    font-family: var(--ci-font-alt);
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.04;
    color: var(--ci-white);
    margin-bottom: 24px;
}

.ci-hero-slider__title span {
    color: var(--ci-gold);
}

.ci-hero-slider__text {
    max-width: 560px;
    color: rgba(255,255,255,0.78);
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.7;
    margin-bottom: 36px;
}

.ci-hero-slider__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ci-hero-slider__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px;
    border: 1px solid rgba(255,255,255,0.35);
    color: var(--ci-white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ci-hero-slider__btn--primary {
    background: var(--ci-gold);
    border-color: var(--ci-gold);
}

.ci-hero-slider__btn:hover {
    color: var(--ci-white);
    transform: translateY(-2px);
}

.ci-hero-slider__btn--outline:hover {
    background: rgba(255,255,255,0.12);
}

.ci-hero-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 54px;
    height: 54px;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(0,0,0,0.22);
    color: var(--ci-white);
    cursor: pointer;
    transition: all var(--ci-transition);
}

.ci-hero-slider__arrow:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.5);
}

.ci-hero-slider__arrow--prev { left: 12px; }
.ci-hero-slider__arrow--next { right: 12px; }

.ci-hero-slider__indicators,
.ci-hero-slider__counter {
    position: absolute;
    z-index: 5;
    bottom: 150px;
}

.ci-hero-slider__indicators {
    left: 50%;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.ci-hero-slider__dot {
    width: 34px;
    height: 3px;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all var(--ci-transition);
}

.ci-hero-slider__dot--active {
    width: 52px;
    background: var(--ci-gold);
}

.ci-hero-slider__counter {
    right: 36px;
    color: rgba(255,255,255,0.58);
    font-size: 13px;
    letter-spacing: 3px;
}

.ci-hero-slider__counter-current {
    color: var(--ci-white);
}

/* ----- Home Search ----- */
.ci-home-search {
    position: relative;
    z-index: 4;
    padding-top: 10mm;
    padding-bottom: 30px;
    background: #061532;
}

.ci-home-search__panel {
    background: #0b1730;
    padding: 28px 34px;
    box-shadow: var(--ci-shadow-xl);
}

.ci-home-search .ci-section-header {
    display: none;
}

.ci-home-search .ci-search-form {
    box-shadow: none;
    border: none;
    background: transparent;
}

.ci-home-search .ci-search-form__label {
    color: rgba(255,255,255,0.6);
}

.ci-home-search .ci-search-form__input,
.ci-home-search .ci-search-form__select {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    color: var(--ci-white);
}

/* The dropdown popup itself is always rendered by the browser/OS with a
   light background, regardless of the closed select's own styling above -
   force dark text on the options so the open list stays readable. */
.ci-home-search .ci-search-form__select option {
    color: var(--ci-gray-700);
    background: var(--ci-white);
}

.ci-home-search .ci-search-form__input::placeholder {
    color: rgba(255,255,255,0.4);
}

.ci-home-search .ci-search-form__input:focus,
.ci-home-search .ci-search-form__select:focus {
    border-color: var(--ci-gold);
}

.ci-home-search .ci-btn--outline {
    color: var(--ci-white);
    border-color: rgba(255,255,255,0.35);
}

.ci-home-search .ci-btn--outline:hover {
    background: rgba(255,255,255,0.1);
}

/* ----- Editorial Blocks ----- */
.ci-points-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
    text-align: left;
}

.ci-points-list li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 78px;
    padding: 18px 18px 18px 46px;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    color: var(--ci-gray-600);
    box-shadow: var(--ci-shadow-sm);
}

.ci-points-list li::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 24px;
    width: 10px;
    height: 10px;
    background: var(--ci-gold);
    transform: rotate(45deg);
}

/* ----- Approach (posicionamento) - hero editorial a duas colunas ----- */
.ci-approach {
    padding: 100px 0;
    background: var(--ci-white);
}

.ci-approach__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center;
}

.ci-approach__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.ci-approach__title {
    font-family: var(--ci-font-alt);
    font-size: 40px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ci-black);
    margin: 0 0 20px;
}

/*
 * No desenho o dourado comeca em linha propria: "Uma Plataforma
 * Independente" a preto e "Pensada para o Cliente Privado." a dourado por
 * baixo. Em linha, o dourado sobe para o fim da segunda linha e a quebra
 * cai no meio da ideia. Fica preso a este titulo: nos outros sete que usam
 * .ci-gold o dourado continua a frase e deve mesmo ficar inline.
 */
.ci-approach__title .ci-gold {
    display: block;
}

/*
 * Sao quatro paragrafos, nao um. O espaco entre eles e menor do que o espaco
 * que separa o bloco todo dos botoes, por isso o ultimo leva mais.
 */
.ci-approach__text {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ci-gray-600);
    margin: 0 0 16px;
    max-width: 46ch;
}

.ci-approach__text:last-of-type {
    margin-bottom: 32px;
}

.ci-approach__text strong {
    color: var(--ci-black);
    font-weight: 600;
}

/*
 * Os dois botoes desta seccao nunca cabem lado a lado: somam 554px e a
 * coluna tem 531, por isso o flex-wrap empilhava-os sempre e cada um ficava
 * do tamanho do seu proprio texto - um mais curto do que o outro, com um
 * degrau a direita que se lia como defeito.
 *
 * Uma coluna de grelha em max-content resolve sem media query nenhuma: a
 * coluna toma a largura do botao mais largo e os dois esticam para ela.
 * O minmax(0, ...) deixa-a encolher quando o ecra e estreito, para o
 * texto mais comprido nao empurrar a seccao para fora.
 */
.ci-approach__actions {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    gap: 14px;
}

.ci-approach__visual {
    position: relative;
}

.ci-approach__image {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-xl);
}

.ci-approach__badge {
    position: absolute;
    right: -32px;
    bottom: -32px;
    width: min(340px, 78%);
    background: linear-gradient(135deg, #0b1730 0%, #071426 100%);
    border-radius: var(--ci-radius-lg);
    padding: 28px;
    box-shadow: var(--ci-shadow-xl);
}

.ci-approach__badge h3 {
    font-family: var(--ci-font-alt);
    font-size: 18px;
    color: var(--ci-white);
    margin: 0 0 18px;
}

.ci-approach__badge ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ci-approach__badge li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #cfd6e4;
    font-size: 13.5px;
    line-height: 1.5;
}

.ci-approach__badge li svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--ci-gold);
}

/*
 * O inicio de cada ponto e o que se le primeiro; o resto e a explicacao.
 * Sobre o azul escuro do cartao, o branco separa-os sem precisar de mudar
 * de tamanho nem de acrescentar uma linha.
 */
.ci-approach__badge li strong {
    color: var(--ci-white);
    font-weight: 600;
}

.ci-process-grid,
.ci-market-grid,
.ci-platform-grid,
.ci-home-plans {
    display: grid;
    gap: 28px;
}

.ci-process-grid {
    grid-template-columns: repeat(3, 1fr);
}

.ci-process-step {
    background: var(--ci-white);
    padding: 36px;
    border: 1px solid var(--ci-gray-200);
    box-shadow: var(--ci-shadow-sm);
    /* Numero, titulo e texto centrados (pagina Como Funciona). */
    text-align: center;
}

.ci-process-step__number {
    display: block;
    margin-bottom: 24px;
    color: var(--ci-gold);
    font-family: var(--ci-font-alt);
    font-size: 42px;
    line-height: 1;
}

.ci-process-step h3,
.ci-market-card h3,
.ci-platform-card h3,
.ci-home-plan h3 {
    color: var(--ci-black);
    font-size: 21px;
    margin-bottom: 12px;
}

.ci-process-step p,
.ci-market-card p,
.ci-platform-card p,
.ci-home-plan p {
    color: var(--ci-gray-500);
    line-height: 1.7;
}

.ci-market-grid {
    grid-template-columns: repeat(4, 1fr);
}

.ci-market-card {
    min-height: 240px;
    padding: 32px;
    border: 1px solid var(--ci-gray-200);
    background: linear-gradient(180deg, var(--ci-white), #fbfaf7);
    /* Conteudo centrado: icone, eyebrow, titulo e descricao. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Eyebrow (tipo de mercado). Classe propria para o seletor nao apanhar o
   icone redondo (ci-platform-card__icon), que fica acima. */
.ci-market-card__type {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--ci-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ci-platform-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/*
 * Seis cartoes em auto-fit dariam quatro numa fila e dois na outra, com a
 * segunda fila a flutuar. Tres fixas dao duas filas cheias.
 */
.ci-platform-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/*
 * Conteudo do cartao centrado: icone, titulo e texto.
 *
 * --3 (Area de Cliente) fixa tres colunas; --center aplica so a centragem e
 * deixa a grelha auto-fit (Area do Investidor, Cobertura, Backoffice). Um
 * eventual link no fim do cartao (ci-platform-card__link) tambem centra.
 */
.ci-platform-grid--3 .ci-platform-card,
.ci-platform-grid--center .ci-platform-card {
    align-items: center;
    text-align: center;
}

/* Ao centro, o titulo e o texto pedem menos ar entre si. */
.ci-platform-grid--3 .ci-platform-card h3,
.ci-platform-grid--center .ci-platform-card h3 {
    margin-bottom: 6px;
}

/*
 * Coluna flex para os titulos de duas linhas ("Processo de Compra",
 * "Gabinete de Financiamento") nao empurrarem o texto para fora do
 * alinhamento dos vizinhos.
 */
.ci-platform-card {
    display: flex;
    flex-direction: column;
}

.ci-platform-card h3 {
    min-height: 2lh;
}

.ci-platform-card {
    padding: 30px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ci-platform-card:hover {
    border-color: rgba(201,168,76,0.45);
    background: rgba(255,255,255,0.08);
}

/* #backoffice tem foto de fundo (ci-photo-backdrop) - o cartão sólido evita
   que a foto transpareça por trás do texto. */
#backoffice .ci-platform-card {
    background: var(--ci-white);
    border-color: var(--ci-gray-200);
}

#backoffice .ci-platform-card:hover {
    background: var(--ci-gray-50);
    border-color: rgba(201,168,76,0.45);
}

.ci-platform-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border: 1px solid rgba(201,168,76,0.4);
    border-radius: 50%;
    color: var(--ci-gold);
}

.ci-platform-card__icon svg {
    stroke: var(--ci-gold);
}

.ci-platform-card h3 {
    color: var(--ci-white);
}

.ci-platform-card p {
    color: rgba(255,255,255,0.68);
}

.ci-section--stone .ci-platform-card__icon,
.ci-section--tint-slate .ci-platform-card__icon,
.ci-section--tint-gold .ci-platform-card__icon {
    border-color: rgba(201,168,76,0.5);
}

.ci-section--stone .ci-platform-card,
.ci-section--tint-slate .ci-platform-card,
.ci-section--tint-gold .ci-platform-card {
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    box-shadow: var(--ci-shadow-sm);
}

.ci-section--stone .ci-platform-card h3,
.ci-section--tint-slate .ci-platform-card h3,
.ci-section--tint-gold .ci-platform-card h3 {
    color: var(--ci-black);
}

.ci-section--stone .ci-platform-card p,
.ci-section--tint-slate .ci-platform-card p,
.ci-section--tint-gold .ci-platform-card p {
    color: var(--ci-gray-500);
}

.ci-platform-card__link {
    display: inline-block;
    margin-top: 14px;
    color: var(--ci-gold);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.ci-platform-card__link:hover {
    color: var(--ci-gold-dark);
    text-decoration: underline;
}

/* ----- Plans ----- */
.ci-home-plans {
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    margin-top: 48px;
}

.ci-home-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    border: 1px solid var(--ci-gray-200);
    border-radius: var(--ci-radius);
    background: var(--ci-white);
    box-shadow: var(--ci-shadow-sm);
}

.ci-home-plan h3 {
    font-size: 19px;
    text-align: center;
}

.ci-home-plan--featured {
    background: linear-gradient(165deg, #0d2044 0%, #071426 100%);
    border-color: var(--ci-gold);
    box-shadow: var(--ci-shadow-lg);
    transform: translateY(-8px);
}

.ci-home-plan--featured h3,
.ci-home-plan--featured .ci-home-plan__price {
    color: var(--ci-white);
}

.ci-home-plan__badge {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 6px 12px;
    background: var(--ci-gold);
    color: var(--ci-white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
}

.ci-home-plan__price {
    margin: 10px 0 18px;
    color: var(--ci-black);
    font-family: var(--ci-font-alt);
    font-size: 34px;
    font-weight: 700;
}

.ci-home-plan__price span {
    color: var(--ci-gray-400);
    font-family: var(--ci-font);
    font-size: 14px;
    font-weight: 400;
}

.ci-home-plan__iva {
    margin: -12px 0 18px;
    font-size: 13px;
    color: var(--ci-gray-400);
}

.ci-home-plan__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(201,168,76,0.12);
    color: var(--ci-gold);
}

.ci-home-plan--featured .ci-home-plan__icon {
    background: rgba(201,168,76,0.2);
}

.ci-home-plan__tagline {
    margin: -4px 0 0;
    color: var(--ci-gray-500);
    font-size: 13.5px;
    text-align: center;
}

.ci-home-plan--featured .ci-home-plan__tagline {
    color: rgba(255,255,255,0.65);
}

.ci-home-plan__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    padding: 8px 14px;
    background: var(--ci-gray-50);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ci-gray-700);
    width: fit-content;
}

/* Os créditos de oportunidades levam a cor da marca porque são o que
   distingue os planos pagos, e não mais uma linha de contagem. Fica logo
   abaixo da pastilha dos imóveis e agentes, com a mesma forma. */
.ci-home-plan__pill--creditos {
    margin-top: -12px;
    background: rgba(201, 168, 76, 0.12);
    /* Dourado escurecido de propósito. O --ci-gold-dark do tema (#B8953A)
       sobre este fundo dava 2,4:1 de contraste, menos de metade do mínimo
       legível para texto pequeno; este dá 5,2:1. Nos cartões em destaque a
       regra do cartão sobrepõe-se a esta e o texto sai branco, que sobre o
       navy tem contraste de sobra. */
    color: #7a5e1c;
}

.ci-home-plan__pill-sep {
    color: var(--ci-gray-300);
}

.ci-home-plan--featured .ci-home-plan__pill {
    background: rgba(255,255,255,0.08);
    color: var(--ci-white);
}

.ci-home-plan--featured .ci-home-plan__pill-sep {
    color: rgba(255,255,255,0.3);
}

/* A checklist é uma simplificação de marketing dos escalões - só as linhas
   "Rede de Investidores"/"Oportunidades de Investimento" (mais abaixo, via
   .ci-home-plan__premium-features) correspondem a um bloqueio real de
   acesso; ver a nota em ci_home_plans_marketing(). */
.ci-home-plan__checklist {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.ci-home-plan__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ci-gray-700);
}

.ci-home-plan__checklist li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.ci-home-plan__checklist-item--yes svg {
    color: var(--ci-gold);
}

.ci-home-plan__checklist-item--no {
    color: var(--ci-gray-400);
}

.ci-home-plan__checklist-item--no svg {
    color: var(--ci-gray-300);
}

.ci-home-plan--featured .ci-home-plan__checklist li {
    color: rgba(255,255,255,0.8);
}

.ci-home-plan--featured .ci-home-plan__checklist-item--no {
    color: rgba(255,255,255,0.4);
}

.ci-home-plan--featured .ci-home-plan__checklist-item--no svg {
    color: rgba(255,255,255,0.3);
}

.ci-home-plan__note {
    margin: 0 0 20px;
    padding: 14px;
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: var(--ci-radius);
}

.ci-home-plan__note p {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ci-gray-500);
}

.ci-home-plan__note p:last-child {
    margin-bottom: 0;
}

.ci-home-plan__note-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ci-black);
}

/* Só o plano Premium mostra isto - lê diretamente de
   ci_get_funcionalidades_premium() (inc/subscriptions.php), a mesma fonte
   que já gere o gate "Premium" no dashboard da imobiliária, para o texto
   nunca desalinhar do que o plano realmente desbloqueia. */
.ci-home-plan__premium-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 18px;
    padding: 14px;
    list-style: none;
    background: rgba(201,168,76,0.1);
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: var(--ci-radius);
}

.ci-home-plan__premium-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ci-gray-600);
}

.ci-home-plan__premium-features li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--ci-gold);
}

.ci-home-plan__premium-features li strong {
    color: var(--ci-black);
}

.ci-home-plan--featured .ci-home-plan__premium-features {
    background: rgba(201,168,76,0.14);
    border-color: rgba(201,168,76,0.4);
}

.ci-home-plan--featured .ci-home-plan__premium-features li {
    color: rgba(255,255,255,0.75);
}

.ci-home-plan--featured .ci-home-plan__premium-features li strong {
    color: var(--ci-white);
}

/* Duas linhas fixas ("Começar" + nome do plano) em vez de frases de
   comprimento variável ("Escolher Profissional" vs "Começar Grátis") - é o
   que mantém os 4 botões com a mesma altura lado a lado. */
.ci-home-plan__cta {
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.3;
}

.ci-home-plan__cta-verb {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.ci-home-plan__cta-nome {
    font-size: 15px;
    font-weight: 700;
}

.ci-plans-trust-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--ci-gray-200);
}

.ci-plans-trust-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.ci-plans-trust-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(201,168,76,0.12);
    color: var(--ci-gold);
}

.ci-plans-trust-bar__item h4 {
    margin: 0 0 4px;
    font-size: 14.5px;
    color: var(--ci-black);
}

.ci-plans-trust-bar__item p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ci-gray-500);
}

.ci-plans-iva-note {
    margin: 24px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--ci-gray-400);
}

/* ----- Plans: feature strip + closing CTA ----- */
/* Mesmo azul-marinho do cabeçalho/rodapé/hero (ver .ci-section--navy) -
   contrasta de propósito com o painel de planos (claro) logo acima. Faixa a
   toda a largura da página (quebra o .ci-container em que vive, com o truque
   100vw/calc - funciona independentemente de quantos wrappers há por cima),
   por isso sem cantos arredondados: não há bordo nenhum para arredondar. */
.ci-plans-features {
    width: 100vw;
    margin-top: 40px;
    margin-bottom: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 56px 48px 72px;
    background: radial-gradient(circle at top left, rgba(201,168,76,0.16), transparent 34%), linear-gradient(135deg, #071426 0%, var(--ci-black) 100%);
    color: rgba(255,255,255,0.75);
}

.ci-plans-features__intro {
    max-width: 560px;
    margin: 0 auto 40px;
    text-align: center;
}

.ci-plans-features__intro h3 {
    font-family: var(--ci-font-alt);
    font-size: 26px;
    color: var(--ci-white);
    margin-bottom: 10px;
}

.ci-plans-features__intro p {
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
}

.ci-plans-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 900px;
    margin: 0 auto;
    gap: 32px;
    text-align: center;
}

.ci-plans-features__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ci-plans-features__item svg {
    color: var(--ci-gold);
    margin-bottom: 14px;
}

.ci-plans-features__item h4 {
    color: var(--ci-white);
    font-size: 16px;
    margin-bottom: 6px;
}

.ci-plans-features__item p {
    color: rgba(255,255,255,0.65);
    font-size: 13.5px;
    line-height: 1.6;
}

.ci-plans-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 720px;
    margin: 48px auto 0;
    padding: 22px 28px;
    background: var(--ci-white);
    border: 1px solid rgba(201,168,76,0.35);
    border-radius: var(--ci-radius);
}

.ci-plans-cta svg {
    flex-shrink: 0;
    color: var(--ci-gold);
}

.ci-plans-cta p {
    margin: 0;
    color: var(--ci-gray-600);
    font-size: 14.5px;
    line-height: 1.6;
}

.ci-mandate-form {
    margin-top: 32px;
    padding: 32px;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    box-shadow: var(--ci-shadow);
}

.ci-contact-email {
    margin-top: 24px;
    text-align: center;
    color: var(--ci-gray-500);
}

.ci-contact-intro {
    margin: -24px 0 24px;
    color: var(--ci-gray-500);
    line-height: 1.7;
}

.ci-property-header__reference {
    color: var(--ci-gray-400);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 8px;
}

.ci-agents-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.ci-agent-form-card {
    padding: 24px;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    box-shadow: var(--ci-shadow-sm);
}

/* ========================================
   AGENCY CARD / PUBLIC PROFILE
   ======================================== */
.ci-star {
    color: var(--ci-gray-300);
    font-size: 14px;
    line-height: 1;
}

.ci-star--filled {
    color: var(--ci-gold);
}

.ci-agency-card {
    position: relative;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    box-shadow: var(--ci-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--ci-transition);
}

.ci-agency-card:hover {
    box-shadow: var(--ci-shadow-lg);
    transform: translateY(-4px);
}

.ci-agency-card__image {
    position: relative;
    height: 140px;
    background: var(--ci-black);
}

.ci-agency-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ci-agency-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ci-black) 0%, var(--ci-black-light) 100%);
}

.ci-agency-card__logo {
    position: absolute;
    left: 20px;
    bottom: -28px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ci-white);
    border: 3px solid var(--ci-white);
    box-shadow: var(--ci-shadow-sm);
    overflow: hidden;
    z-index: 2;
}

.ci-agency-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ci-agency-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    z-index: 2;
}

.ci-agency-card__badge--verified {
    background: var(--ci-gold);
    color: var(--ci-white);
}

/* O selo ocupa o canto que era da etiqueta escrita. A sombra separa-o do
   banner da imobiliária, que pode ser claro ou escuro conforme a foto.
   O seletor leva o pai à frente de propósito: `.ci-agency-card__image img`
   estica qualquer imagem para 100% do cartão, e o selo é uma imagem também -
   sem isto sai do tamanho de um banner. */
.ci-agency-card__image .ci-agency-card__selo {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 3px 10px rgba(6, 21, 50, 0.35));
}

@media (max-width: 700px) {
    .ci-agency-card__image .ci-agency-card__selo {
        width: 44px;
        height: 44px;
    }
}

.ci-agency-card__body {
    padding: 40px 20px 12px;
    flex: 1;
}

.ci-agency-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ci-black);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ci-agency-card__title a { color: inherit; }
.ci-agency-card__title a:hover { color: var(--ci-gold); }

.ci-agency-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ci-gray-500);
    margin-bottom: 10px;
}

.ci-agency-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.ci-agency-card__rating-value {
    font-weight: 700;
    color: var(--ci-black);
    font-size: 14px;
}

.ci-agency-card__rating-total {
    color: var(--ci-gray-400);
    font-size: 13px;
}

.ci-agency-card__stats {
    display: flex;
    gap: 20px;
}

.ci-agency-card__stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ci-gray-600);
}

.ci-agency-card__stat svg { color: var(--ci-gold); flex-shrink: 0; }

.ci-agency-card__footer {
    padding: 0 20px 20px;
}

.ci-agency-card__footer--gate {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ----- Public agency profile page ----- */
.ci-agency-profile__hero {
    position: relative;
    background: var(--ci-black);
}

.ci-agency-profile__banner {
    height: 280px;
    overflow: hidden;
}

.ci-agency-profile__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
}

.ci-agency-profile__header {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 24px 0;
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

.ci-agency-profile__hero--no-banner .ci-agency-profile__header {
    margin-top: 0;
    align-items: center;
}

.ci-agency-profile__logo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--ci-white);
    border: 4px solid var(--ci-white);
    box-shadow: var(--ci-shadow);
    overflow: hidden;
    flex-shrink: 0;
}

.ci-agency-profile__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ci-agency-profile__identity {
    padding-bottom: 8px;
}

.ci-agency-profile__title {
    font-family: var(--ci-font-alt);
    font-size: 28px;
    color: var(--ci-white);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.ci-agency-profile__location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    margin-bottom: 10px;
}

.ci-agency-profile__nav {
    border-top: 1px solid rgba(255,255,255,0.12);
}

.ci-agency-profile__nav ul {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ci-agency-profile__nav-link {
    display: block;
    padding: 16px 18px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
    transition: all var(--ci-transition);
}

.ci-agency-profile__nav-link:hover,
.ci-agency-profile__nav-link--active {
    color: var(--ci-gold);
    border-bottom-color: var(--ci-gold);
}

/* ----- Agents grid (public tab) ----- */
.ci-agents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.ci-agent-card {
    text-align: center;
    padding: 28px 20px;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
}

.ci-agent-card__photo {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
}

.ci-agent-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.ci-agent-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ci-black);
    color: var(--ci-gold);
    font-size: 24px;
    font-weight: 700;
}

.ci-agent-card__name { font-size: 16px; font-weight: 700; color: var(--ci-black); }

.ci-agent-card__role {
    display: block;
    font-size: 12px;
    color: var(--ci-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 4px 0 12px;
}

.ci-agent-card__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

.ci-agent-card__stat {
    font-size: 13px;
    color: var(--ci-gray-600);
    margin-bottom: 12px;
}

.ci-agent-card__bio {
    font-size: 13px;
    color: var(--ci-gray-500);
    line-height: 1.5;
    margin-bottom: 12px;
}

.ci-agent-card__properties-btn {
    margin-top: 16px;
}

.ci-agent-card__actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

/* ----- About tab ----- */
.ci-agency-about__description { max-width: 760px; margin-bottom: 32px; line-height: 1.8; color: var(--ci-gray-600); }

.ci-agency-about__stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ci-gray-200);
}

.ci-agency-about__stat { display: flex; flex-direction: column; gap: 4px; }
.ci-agency-about__stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ci-gray-500); }
.ci-agency-about__stat-value { font-size: 20px; font-weight: 700; color: var(--ci-black); }

.ci-agency-about__hours { margin-bottom: 32px; }

.ci-agency-about__gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.ci-agency-about__gallery-grid img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.ci-agency-about__social {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.ci-agency-about__social .ci-social-link {
    border-color: var(--ci-gray-300);
    color: var(--ci-gray-600);
}

.ci-agency-about__social .ci-social-link:hover {
    border-color: var(--ci-gold);
    color: var(--ci-gold);
}

/* ----- Reviews tab ----- */
.ci-agency-reviews__summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ci-gray-200);
}

.ci-agency-reviews__average {
    font-family: var(--ci-font-alt);
    font-size: 42px;
    font-weight: 700;
    color: var(--ci-black);
}

.ci-agency-reviews__total { font-size: 13px; color: var(--ci-gray-500); }

.ci-agency-reviews__list { display: flex; flex-direction: column; gap: 20px; }

.ci-agency-review {
    padding: 20px;
    background: var(--ci-gray-50);
    border: 1px solid var(--ci-gray-200);
}

.ci-agency-review__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ci-agency-review__author { font-weight: 700; color: var(--ci-black); }
.ci-agency-review__date { font-size: 12px; color: var(--ci-gray-400); }
.ci-agency-review__comment { margin-top: 8px; color: var(--ci-gray-600); line-height: 1.6; }

.ci-form-hint { font-size: 12px; color: var(--ci-gray-500); margin-top: 6px; }

.ci-form-notice {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.6;
}

.ci-form-notice--gratuito {
    background: #fbf6e9;
    border: 1px solid var(--ci-gold-light);
    color: var(--ci-gray-700, #333);
}

.ci-form-notice--gratuito strong { color: var(--ci-gold-dark); }

.ci-form-notice--preco {
    background: #eef2f6;
    border: 1px solid #cfd8e3;
    color: var(--ci-gray-700, #333);
}

.ci-form-notice--preco strong { color: var(--ci-black); }
.ci-form-notice--preco span { color: var(--ci-gray-500); font-size: 12.5px; }

@media (max-width: 1100px) {
    .ci-process-grid {
        grid-template-columns: 1fr;
    }

    .ci-market-grid,
    .ci-platform-grid,
    .ci-home-plans,
    .ci-plans-features__grid,
    .ci-plans-trust-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .ci-platform-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ci-home-plan--featured {
        transform: none;
    }
}

@media (max-width: 620px) {
    .ci-home-plans,
    .ci-plans-features__grid,
    .ci-plans-trust-bar {
        grid-template-columns: 1fr;
    }

    .ci-plans-cta {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .ci-hero-slider {
        min-height: 640px;
        height: auto;
    }

    .ci-hero-slider__content {
        padding: 110px 24px 120px;
        text-align: center;
        justify-content: center;
    }

    .ci-hero-slider__actions {
        justify-content: center;
    }

    .ci-hero-slider__arrow,
    .ci-hero-slider__counter {
        display: none;
    }

    .ci-hero-slider__indicators {
        bottom: 24px;
    }

    .ci-home-search {
        margin-top: 0;
        padding-top: 32px;
    }

    .ci-home-search__panel,
    .ci-mandate-form {
        padding: 22px;
    }

    .ci-approach {
        padding: 64px 0;
    }

    .ci-approach__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .ci-approach__content {
        align-items: center;
        text-align: center;
    }

    .ci-approach__text {
        max-width: none;
    }

    .ci-approach__actions {
        justify-content: center;
    }

    .ci-approach__badge {
        position: static;
        width: auto;
        margin-top: 20px;
    }

    .ci-points-list,
    .ci-market-grid,
    .ci-platform-grid,
    .ci-agents-layout {
        grid-template-columns: 1fr;
    }

    /*
     * Em tablet ficam duas colunas; a uma coluna so aos 600, ja em
     * telemovel.
     */
    .ci-platform-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ci-agency-profile__header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .ci-agency-profile__nav ul {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

/* ----- Toast Notifications ----- */
.ci-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    width: calc(100% - 32px);
    pointer-events: none;
}

.ci-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ci-white);
    color: var(--ci-gray-800);
    border-radius: var(--ci-radius);
    box-shadow: var(--ci-shadow-lg);
    padding: 14px 16px;
    border-left: 4px solid var(--ci-gold);
    font-size: 14px;
    line-height: 1.45;
    pointer-events: auto;
    animation: ci-toast-in 0.25s ease forwards;
}

.ci-toast--leaving {
    animation: ci-toast-out 0.2s ease forwards;
}

.ci-toast--success {
    border-left-color: #2e7d32;
}

.ci-toast--error {
    border-left-color: #c0392b;
}

.ci-toast__icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.ci-toast--success .ci-toast__icon {
    color: #2e7d32;
}

.ci-toast--error .ci-toast__icon {
    color: #c0392b;
}

.ci-toast__message {
    flex: 1;
}

.ci-toast__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ci-gray-400);
    font-size: 20px;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
}

.ci-toast__close:hover {
    color: var(--ci-gray-700);
}

@keyframes ci-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes ci-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(24px); }
}

@media (max-width: 480px) {
    .ci-toast-container {
        top: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
        width: auto;
    }
}

/* ----- Back Button ----- */
.ci-back-button {
    display: flex;
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 999;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--ci-gray-200);
    background: var(--ci-white);
    color: var(--ci-black);
    cursor: pointer;
    box-shadow: var(--ci-shadow);
    transition: all var(--ci-transition);
}

.ci-back-button:hover {
    border-color: var(--ci-gold);
    color: var(--ci-gold);
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    .ci-back-button {
        left: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

/* ========================================
   O MODELO CARLO INTERNATIONAL (Sobre Nós)
   ======================================== */
.ci-model-subtitle {
    max-width: 640px;
    margin: 0 auto 24px;
    font-family: var(--ci-font-alt);
    font-size: clamp(17px, 1.8vw, 20px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ci-gold-dark);
}

.ci-model-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 56px;
}

.ci-model-steps {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.ci-model-step {
    flex: 1;
    max-width: 300px;
    padding: 32px 26px;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    border-radius: 4px;
    text-align: center;
    box-shadow: var(--ci-shadow-sm);
    transition: all var(--ci-transition);
}

.ci-model-step:hover {
    border-color: var(--ci-gold);
    background: var(--ci-gray-50);
    transform: translateY(-4px);
}

.ci-model-step__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(201,168,76,0.12);
    border: 1px solid rgba(201,168,76,0.4);
    color: var(--ci-gold);
}

.ci-model-step__number {
    display: block;
    margin-bottom: 10px;
    color: var(--ci-gray-300);
    font-family: var(--ci-font-alt);
    font-size: 28px;
    line-height: 1;
}

.ci-model-step h3 {
    color: var(--ci-black);
    font-size: 18px;
    margin-bottom: 10px;
}

.ci-model-step p {
    color: var(--ci-gray-500);
    font-size: 14.5px;
    line-height: 1.7;
}

.ci-model-connector {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ci-gold);
    opacity: 0.6;
}

.ci-model-hub-connector {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, rgba(201,168,76,0.5), rgba(201,168,76,0.15));
}

.ci-model-hub {
    max-width: 420px;
    width: 100%;
    padding: 28px 32px;
    text-align: center;
    background: #061532;
    border: 1px solid var(--ci-gold);
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(6,21,50,0.45);
}

.ci-model-hub__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.ci-model-hub__logo img {
    max-height: 128px;
    width: auto;
    max-width: 100%;
}

.ci-model-hub__logo span {
    font-family: var(--ci-font-alt);
    font-size: 20px;
    font-weight: 700;
    color: var(--ci-white);
}

.ci-model-hub__tagline {
    font-family: var(--ci-font-alt);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ci-gold-light);
}

.ci-audiences-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 72px;
}

.ci-audience-card {
    padding: 32px 28px;
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    border-radius: 4px;
    box-shadow: var(--ci-shadow-sm);
    /* Conteudo centrado: icone, titulo e checklist, como os cartoes de processo. */
    text-align: center;
}

.ci-audience-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(201,168,76,0.12);
    border: 1px solid rgba(201,168,76,0.4);
    color: var(--ci-gold);
}

.ci-audience-card h3 {
    color: var(--ci-black);
    font-size: 18px;
    margin-bottom: 18px;
}

/* Checklist centrada como bloco (os itens ficam alinhados a esquerda, com os
   vistos em coluna). inline-flex encolhe a lista ao conteudo, e o text-align
   center do cartao centra-a por baixo do titulo. */
.ci-audience-card__list {
    display: inline-flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.ci-audience-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ci-gray-500);
    font-size: 14px;
    line-height: 1.6;
}

.ci-audience-card__list li svg {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--ci-gold);
}

@media (max-width: 1100px) {
    .ci-model-steps {
        flex-direction: column;
        align-items: stretch;
    }

    .ci-model-step {
        max-width: none;
    }

    .ci-model-connector {
        transform: rotate(90deg);
    }

    .ci-audiences-panel {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   AJUDA CONTEXTUAL (tooltips)
   Balão próprio em vez do title nativo: estilizável, sem atraso, e
   funciona com foco de teclado. Ver assets/js/tooltips.js.
   ======================================== */
.ci-tooltip {
    position: absolute;
    z-index: 10000;
    max-width: 340px;
    background: #061532;
    color: #ffffff;
    border-radius: 8px;
    padding: 9px 13px;
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 6px 24px rgba(6,21,50,0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
}

.ci-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Seta a apontar ao elemento. Vira quando o balão abre por cima. */
.ci-tooltip::before {
    content: '';
    position: absolute;
    left: 18px;
    top: -6px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #061532;
}

.ci-tooltip--acima::before {
    top: auto;
    bottom: -6px;
    border-bottom: none;
    border-top: 7px solid #061532;
}

/* Marca "?" junto à etiqueta - sem ela ninguém descobre que há ajuda. */
.ci-tooltip-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border: 1px solid var(--ci-gold);
    border-radius: 50%;
    color: var(--ci-gold-dark);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background var(--ci-transition), color var(--ci-transition);
}

.ci-tooltip-marca:hover,
.ci-tooltip-marca:focus-visible {
    background: var(--ci-gold);
    color: #061532;
    outline: none;
}

.ci-tooltip-marca:focus-visible {
    box-shadow: 0 0 0 3px rgba(201,168,76,0.3);
}

@media (prefers-reduced-motion: reduce) {
    .ci-tooltip {
        transition: none;
        transform: none;
    }
}

/* Em ecrã pequeno o balão ocupa a largura disponível, para o texto não
   ficar numa coluna estreitíssima. */
@media (max-width: 600px) {
    .ci-tooltip {
        max-width: calc(100vw - 24px);
    }

    /*
     * Em telemovel, dois cartoes lado a lado nao cabem: cada um ficaria
     * com uns 160px uteis depois do padding de 30, e o titulo
     * "Gabinete de Financiamento" partia em quatro linhas.
     */
    .ci-platform-grid--3 {
        grid-template-columns: 1fr;
    }

    /*
     * Numa so coluna nao ha vizinho com quem alinhar, e as duas linhas
     * reservadas para o titulo passam a ser so um buraco entre o titulo
     * e o texto.
     */
    .ci-platform-card h3 {
        min-height: 0;
    }
}

/* =========================================================================
   VALIDAÇÃO DE CONVITE
   O ecrã que substitui o formulário de registo de Investidor e Representante
   enquanto não houver um convite validado. Namespace .ci-convite, isolado do
   resto do registo porque este ecrã aparece ANTES de tudo o resto e não
   herda a grelha de passos do formulário normal.
   ====================================================================== */

.ci-convite {
    max-width: 640px;
    margin: 40px auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ci-convite__banner {
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

.ci-convite__banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* Troca entre o painel de código e o painel de pedido: um sentido é um link
   discreto que revela o campo sem recarregar a página (ver o script inline em
   convite-validacao.php); o outro é uma navegação normal para o mesmo URL sem
   o parâmetro de convite. */
.ci-convite__toggle,
.ci-convite__trocar {
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: var(--ci-gray-500);
}

.ci-convite__toggle a,
.ci-convite__trocar a {
    color: var(--ci-gold-dark);
    font-weight: 600;
    text-decoration: none;
}

.ci-convite__toggle a:hover,
.ci-convite__trocar a:hover {
    text-decoration: underline;
}

.ci-convite__cartao {
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    border-radius: 12px;
    padding: 36px 32px;
    text-align: center;
}

.ci-convite__cartao--sucesso {
    padding: 44px 32px;
}

.ci-convite__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--ci-gray-50);
    color: var(--ci-gold-dark);
}

.ci-convite__icone--ok {
    background: #dff3e4;
    color: #1f7a3d;
}

.ci-convite__cartao h2 {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.35;
}

.ci-convite__intro {
    margin: 0 0 24px;
    color: var(--ci-gray-500);
    line-height: 1.55;
}

.ci-convite__erro {
    margin: 0 0 18px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fbe4e4;
    color: #a12a2a;
    font-size: 14px;
    text-align: left;
}

.ci-convite__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.ci-convite__form label {
    font-weight: 600;
    font-size: 14px;
}

/* O código lê-se melhor espaçado e em maiúsculas - reforça visualmente que é
   um código, não uma palavra-passe a esconder. */
.ci-convite__codigo {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.ci-convite__submeter {
    margin-top: 8px;
    width: 100%;
    justify-content: center;
}

.ci-convite__aviso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 20px 0 0;
    font-size: 12px;
    color: var(--ci-gray-500);
}

.ci-convite__aviso svg {
    flex: 0 0 auto;
}

/* --- Pedido de convite --- */
.ci-convite__pedido {
    padding: 24px 28px;
    border: 1px dashed var(--ci-gray-300);
    border-radius: 12px;
}

.ci-convite__pedido h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

.ci-convite__pedido > p {
    margin: 0 0 18px;
    color: var(--ci-gray-500);
    font-size: 14px;
}

.ci-convite__campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.ci-convite__campos label,
.ci-convite__mensagem {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.ci-convite__mensagem {
    margin-bottom: 16px;
}

@media (max-width: 560px) {
    .ci-convite__cartao {
        padding: 28px 20px;
    }

    .ci-convite__campos {
        grid-template-columns: 1fr;
    }
}

/* Campo de email bloqueado ao convite (páginas de registo de Investidor e
   Representante). Um fundo diferente diz "isto não se edita" antes de
   alguém tentar e descobrir pelo teclado. */
.ci-input[readonly] {
    background: var(--ci-gray-50);
    color: var(--ci-gray-600);
    cursor: not-allowed;
}

/* ==========================================================================
   PAGINA DE CONFIANCA E VERIFICACAO (templates/page-confianca.php)

   A decisao visual que mais importa e a mesma que ja governa o cartao de
   compliance no wp-admin: 'lacuna' (sem rastreio ligado, nao recolhido) NAO
   e verde nem vermelho - e cinzento com tracejado. Uma verificacao que nao
   foi feita nao e uma boa noticia nem uma ma; e uma pergunta por responder,
   e tem de parecer isso, mesmo em leitura rapida ou impressa a preto e
   branco. As cores abaixo sao as mesmas de ci_get_cor_estado_compliance().
   ========================================================================== */

/* A imagem entra por style inline no template (mesmo padrão de page-sobre.php
   e page-como-funciona.php); aqui fica só o véu escuro por cima, para o texto
   branco ter contraste sobre o céu claro do pôr do sol. */
.ci-hero--confianca {
    background-size: cover;
    background-position: center 40%;
    color: var(--ci-white);
}

/* opacity explícito: .ci-hero::before traz 0.3 para a onda decorativa, e sem
   o repor o véu ficaria a um terço da opacidade escrita aqui. */
.ci-hero--confianca::before {
    background: linear-gradient(135deg, rgba(6,21,50,0.86) 0%, rgba(6,21,50,0.62) 55%, rgba(6,21,50,0.78) 100%);
    opacity: 1;
}

.ci-hero--confianca .ci-hero__title,
.ci-hero--confianca .ci-hero__subtitle {
    color: var(--ci-white);
}

.ci-confianca__eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ci-gold);
    margin-bottom: 20px;
}

.ci-confianca__eyebrow--escuro {
    color: var(--ci-gold-dark);
}

/* ----- Perfis verificados ----- */
.ci-confianca-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 52px;
}

.ci-confianca-card {
    border: 1px solid var(--ci-gray-200);
    border-top: 3px solid var(--ci-gold);
    padding: 30px 26px 34px;
    background: var(--ci-white);
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Icone, titulo e lista centrados. */
    align-items: center;
    text-align: center;
}

/* O espacamento vem do gap do cartao; evita somar a margem base do icone. */
.ci-confianca-card .ci-platform-card__icon {
    margin-bottom: 0;
}

.ci-confianca-card:nth-child(odd) {
    border-top-color: var(--ci-navy, #061532);
}

.ci-confianca-card__titulo {
    font-family: var(--ci-font-alt);
    font-size: 21px;
    font-weight: 400;
    color: var(--ci-black);
    margin: 0;
}

.ci-confianca-card__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ci-confianca-card__lista li {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ci-gray-600);
}

/* ----- A regra da honestidade ----- */
.ci-confianca-regra {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}

.ci-confianca-regra__texto h2 {
    font-family: var(--ci-font-alt);
    font-size: 38px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ci-black);
    margin: 0 0 20px;
}

.ci-confianca-regra__texto p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ci-gray-500);
    margin: 0 0 16px;
}

.ci-confianca-estados {
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    padding: 34px 36px;
}

.ci-confianca-estados__titulo {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ci-gray-400);
    margin-bottom: 24px;
}

.ci-confianca-estado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
}

.ci-confianca-estado__nome {
    font-size: 14px;
    color: var(--ci-gray-700);
    flex-shrink: 0;
}

.ci-confianca-estado__valor {
    font-size: 13.5px;
    text-align: right;
}

.ci-confianca-estado--ok .ci-confianca-estado__valor {
    color: #1f7a3d;
    font-weight: 600;
}

.ci-confianca-estado--aviso .ci-confianca-estado__valor {
    color: #8a6d1d;
    font-weight: 600;
}

.ci-confianca-estado--mau .ci-confianca-estado__valor {
    color: #a12a2a;
    font-weight: 600;
}

.ci-confianca-estado--neutro .ci-confianca-estado__valor {
    color: #6b7280;
}

/* Lacuna: cinzento e tracejado. Ver a nota no topo deste bloco. */
.ci-confianca-estado--lacuna .ci-confianca-estado__valor {
    color: #5b6473;
    border-bottom: 1px dashed #b6bcc6;
    padding-bottom: 2px;
}

.ci-confianca-estados__nota {
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--ci-gray-100);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ci-gray-400);
}

/* ----- O que a Carlo nao faz ----- */
.ci-confianca-limites {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.10);
    margin-top: 52px;
}

/* Translúcido, não um azul liso: deixa o gradiente de .ci-section--navy
   passar por baixo, e as linhas de 1px do grid tornam-se as separadoras. */
.ci-confianca-limite {
    background: rgba(6,21,50,0.55);
    padding: 34px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.ci-confianca-limite__icone {
    flex-shrink: 0;
    margin-bottom: 0;
    /* Preenchimento subtil para o circulo dourado destacar no fundo escuro. */
    background: rgba(201,168,76,0.12);
}

.ci-confianca-limite h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ci-white);
    margin: 0 0 9px;
}

.ci-confianca-limite p {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255,255,255,0.66);
    margin: 0;
}

@media (max-width: 1024px) {
    .ci-confianca-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ci-confianca-regra {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

@media (max-width: 700px) {
    .ci-confianca-grid,
    .ci-confianca-limites {
        grid-template-columns: minmax(0, 1fr);
    }

    .ci-confianca-regra__texto h2 {
        font-size: 30px;
    }

    .ci-confianca-estado {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ci-confianca-estado__valor {
        text-align: left;
    }
}

/* ----- Ficha de verificação voltada para fora (inc/verificacao-publica.php) ----- */
.ci-ficha-verificacao {
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    padding: 24px 26px;
    max-width: 520px;
}

.ci-ficha-verificacao__topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ci-gray-100);
}

.ci-ficha-verificacao__nome {
    display: block;
    font-family: var(--ci-font-alt);
    font-size: 19px;
    color: var(--ci-black);
}

.ci-ficha-verificacao__tipo {
    display: block;
    font-size: 12.5px;
    color: var(--ci-gray-400);
    margin-top: 4px;
}

.ci-ficha-verificacao__selo {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #1f7a3d;
    background: #eaf5ee;
    padding: 5px 11px;
}

.ci-ficha-verificacao__selo--pendente {
    color: #8a6d1d;
    background: #fbf3e0;
}

.ci-ficha-verificacao__linhas {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

.ci-ficha-verificacao__linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ci-gray-50);
}

.ci-ficha-verificacao__rotulo {
    font-size: 14px;
    color: var(--ci-gray-700);
}

.ci-ficha-verificacao__estado {
    font-size: 13.5px;
    text-align: right;
    flex-shrink: 0;
}

.ci-ficha-verificacao__linha--ok .ci-ficha-verificacao__estado {
    color: #1f7a3d;
    font-weight: 600;
}

.ci-ficha-verificacao__linha--aviso .ci-ficha-verificacao__estado {
    color: #8a6d1d;
    font-weight: 600;
}

.ci-ficha-verificacao__linha--mau .ci-ficha-verificacao__estado {
    color: #a12a2a;
    font-weight: 600;
}

.ci-ficha-verificacao__linha--neutro .ci-ficha-verificacao__estado {
    color: #6b7280;
}

/* Lacuna: cinzento e tracejado, como no cartão interno. */
.ci-ficha-verificacao__linha--lacuna .ci-ficha-verificacao__estado {
    color: #5b6473;
    border-bottom: 1px dashed #b6bcc6;
    padding-bottom: 2px;
}

.ci-ficha-verificacao__nota {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--ci-gray-400);
    margin: 16px 0 0;
}

.ci-ficha-verificacao__rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ci-gray-100);
    font-size: 12px;
    color: var(--ci-gray-400);
}

/* Títulos de secção centrados nesta página, com a barra dourada a acompanhar.
   Mesmo padrão já usado em .ci-about-grid--single .ci-section-title::after. */
.ci-page-confianca .ci-section-title {
    text-align: center;
}

.ci-page-confianca .ci-section-title::after {
    margin-left: auto;
    margin-right: auto;
}

/* No banner o sobretítulo compete com uma fotografia de página inteira: aos
   11px do resto da página desaparecia. Só dentro do hero. */
.ci-hero--confianca .ci-confianca__eyebrow {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 4px;
    margin-bottom: 26px;
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}

@media (max-width: 700px) {
    .ci-hero--confianca .ci-confianca__eyebrow {
        font-size: 13px;
        letter-spacing: 3px;
    }
}

/* Selo no topo do banner: âncora visual, não um carimbo sobre ninguém. */
.ci-confianca__selo {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto 26px;
    filter: drop-shadow(0 8px 28px rgba(0,0,0,0.45));
}

@media (max-width: 700px) {
    .ci-confianca__selo {
        width: 104px;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   HEADER EM LINHA ÚNICA
   ==========================================================================
   Logótipo à esquerda, menu ao centro, utilizador à direita - com os ícones.

   O que estava mal não era o desenho, era o logótipo: ocupava 547px, um
   quarto do header inteiro, e obrigava o menu a desaparecer em qualquer
   ecrã abaixo dos 1900px. Preso num tamanho fixo, o menu volta a caber
   muito mais cedo.
   ========================================================================== */

@media (min-width: 1200px) {

    /*
     * Duas linhas: acoes em cima, logotipo e menu em baixo.
     *
     * Tirar a pesquisa, a lingua, o Entrar e o Registar da linha do menu
     * liberta 272px medidos - e o que permite ao menu completo caber a
     * partir dos 1200px em vez de 1600. Feito com wrap sobre o markup que
     * ja existe: a zona do utilizador tem logica demais (notificacoes,
     * papeis, avatar) para se reescrever so por causa da ordem visual.
     */
    .ci-header__main-inner {
        flex-wrap: wrap;
        align-items: center;
        gap: 0 24px;
        padding: 6px 0 2px;
    }

    .ci-header__auth {
        order: 1;
        flex: 0 0 100%;
        justify-content: flex-end;
        padding-bottom: 4px;
    }

    .ci-header__logo { order: 2; }
    .ci-header__nav  { order: 3; flex: 1 1 auto; min-width: 0; }

    /* Nunca encolher o logótipo - regra 17 da especificação. Era o que
       fazia o header rebentar quando o espaço apertava. */
    /* O logotipo esta na 2a linha (a linha do menu), por isso comecava
       52px abaixo do topo, empurrado pela linha de acoes. Sobe ao nivel do
       topo do header: encosta-se ao inicio da sua linha e recua a altura da
       linha de acoes, que fica a direita dele e nunca lhe toca (as acoes sao
       alinhadas a direita, o logotipo ocupa 211px a esquerda). */
    .ci-header__logo {
        flex: 0 0 auto;
        max-width: 211px;
        align-self: flex-start;
        margin-top: -30px;
    }

    .ci-menu-toggle { display: none; }
}

/* Faixa apertada: menu completo, com o espaçamento reduzido ao limite que a
   especificação permite - a fonte nunca desce abaixo de 12px (regra 18).
   É o que estica o menu horizontal para baixo, em vez de o mandar para o
   hambúrguer mais cedo.
   --------------------------------------------------------------------------
   O limite superior desta faixa era 1439, e estava 100px curto. Aos 1440 o
   padding de cada item passava de 5px para 12px e a fonte de 12 para 13:
   uns 140px a mais num menu de dez itens. Em alemao, a lingua mais longa, o
   menu deixava de caber ao lado do logotipo e caia para uma terceira linha,
   e o cabecalho passava de 74px para 148px - o dobro - com um pixel de
   diferenca na largura da janela.
   Entre 1440 e 1541 o cabecalho ficava assim, e essa faixa apanha 1440,
   1512 e 1536, que sao larguras de janela correntes. Pior: com a barra de
   scroll a valer 15px, a mesma janela caia de um lado da fronteira numa
   pagina curta e do outro numa pagina comprida - o menu mudava de sitio
   entre paginas, e saltava a meio do carregamento quando as imagens
   chegavam e a barra aparecia.
   O espacamento confortavel so entra onde ele cabe mesmo: medido, o alemao
   precisa de 1542px de janela; 1560 da folga e e um valor redondo.
   --------------------------------------------------------------------------
   O padding horizontal era 5px e sobrava uma ultima faixa partida: entre
   1200 e 1214, so em alemao, o menu ainda caia para baixo do logotipo e o
   cabecalho passava de 106px para 139px. A conta e curta: aos 1200 o inner
   tem 1145px, o logotipo leva 130 e o gap 24, sobram 991 para o menu - e o
   alemao pede 1006. Faltavam 15px.
   Baixar o padding de 5 para 4 liberta 20px nos dez itens, e chega. Feito na
   faixa inteira e nao numa sub-faixa nova de propriedade: um degrau novo aos
   1215 seria trocar um salto de 33px por outro de 20, e o proposito desta
   seccao e o cabecalho ter duas formas e uma unica transicao. Entre 4 e 5px
   de padding nao ha diferenca que se veja; entre uma e duas linhas ha. */
@media (min-width: 1200px) and (max-width: 1559px) {
    .ci-nav-list > li > a {
        padding: 8px 4px;
        gap: 4px;
        font-size: 12px;
    }
    .ci-nav-list { gap: 0; }
}

/* O logotipo encolhe na mesma faixa do espacamento, e nao numa sua.
   --------------------------------------------------------------------------
   Tinha 1439 como limite, e isso deixava um segundo degrau: aos 1440 o
   logotipo voltava aos 211px e o cabecalho subia de 74px para 115px. Como
   1440 e das larguras de janela mais correntes que ha, esse degrau era
   visivel a qualquer redimensionamento - e as media queries contam a
   largura sem a barra de scroll, por isso a mesma janela caia de um lado da
   fronteira numa pagina curta e do outro numa pagina comprida.
   Com as duas faixas a acabar no mesmo sitio, o cabecalho tem so duas
   formas e uma unica transicao, aos 1560: compacto em baixo, folgado em
   cima. 1560 fica entre as larguras comuns (1536 e 1600), o que torna
   improvavel acertar-lhe em cheio. */
@media (min-width: 1200px) and (max-width: 1559px) {
    .ci-header__logo,
    .ci-header__logo img,
    .ci-header__logo .custom-logo { width: auto; height: auto; max-width: 130px; }
}

/* >= 1560: espaçamento confortável. */
@media (min-width: 1560px) {
    .ci-nav-list > li > a { padding: 8px 12px; }
}

/* Nada de scroll horizontal no header, em largura nenhuma. */
.ci-header,
.ci-header__main { overflow-x: clip; }

/* Abaixo dos 1200 o logótipo voltava aos 520px, porque o `flex: 1 1 0`
   original o deixava crescer com o espaço livre. Num header com hambúrguer
   isso deixa-o a ocupar meio ecrã. Valores da regra 17 da especificação. */
@media (max-width: 1199px) {
    .ci-header__logo {
        flex: 0 0 auto;
        max-width: 211px;
    }
}

@media (max-width: 767px) {
    .ci-header__logo,
    .ci-header__logo img,
    .ci-header__logo .custom-logo {
        width: auto;
        height: auto;
        max-width: 150px;
    }
}

/* Área de toque: regra 15 e 16 da especificação. O botão inteiro é
   clicável, não só as três linhas. */
@media (max-width: 1199px) {
    .ci-menu-toggle {
        min-width: 48px;
        min-height: 48px;
        align-items: center;
        justify-content: center;
    }

    .ci-nav-list > li > a {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* O carrossel da homepage faz um zoom lento (scale 1.07) sobre a imagem.
   O contentor deixava-a transbordar, e isso dava scroll horizontal na
   página inteira - a regra 20 da especificação proíbe-o. A imagem continua
   a fazer o zoom; o que muda é ficar aparada no slide. */
.ci-hero-slider,
.ci-hero-slider__slide { overflow: hidden; }


/* Guarda final contra scroll horizontal - regra 20 da especificação.
   `clip` e não `hidden`: `hidden` cria um contentor de scroll e partia
   qualquer `position: sticky` lá dentro. Isto apanha o que escapar a
   quem transborde, seja o carrossel ou o que vier a seguir. */
html,
.ci-site-wrapper { overflow-x: clip; }

/* ----- Topo em telemóvel e tablet -----------------------------------------
   Só pesquisa, língua e o botão do menu. O Entrar e o Registar descem para
   dentro do painel: a 390px o topo não tinha largura para tudo, e o
   hambúrguer acabava por cima da bandeira. */

.ci-nav-acoes { display: none; }

@media (max-width: 1199px) {
    /* O pai a frente de proposito: `.ci-header__auth a` tem mais
       especificidade e ganhava a um seletor de classe simples. */
    .ci-header__auth .ci-header__login-link,
    .ci-header__auth .ci-header__register-link { display: none; }

    .ci-nav-acoes {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 0 4px;
        border-top: 1px solid var(--ci-gray-200);
        margin-top: 4px;
    }

    /* Área de toque de 48px, como manda a regra 15. */
    .ci-nav-acoes a {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        font-weight: 600;
        font-size: 15px;
    }

    .ci-nav-acoes__entrar {
        border: 1px solid var(--ci-gray-300);
        color: var(--ci-white);
    }

    .ci-nav-acoes__registar {
        background: var(--ci-gold);
        color: var(--ci-white);
    }

    /* O botão do menu não pode encostar à bandeira. */
    .ci-menu-toggle { margin-left: 12px; }
}

/* Ordem no topo em telemóvel e tablet: logótipo à esquerda, e à direita
   lupa, língua e o botão do menu - por esta ordem. O botão vinha a seguir
   ao logótipo e encostava à bandeira. */
@media (max-width: 1199px) {
    .ci-header__main-inner { align-items: center; }

    .ci-header__logo  { order: 1; margin-right: auto; }
    .ci-header__auth  { order: 2; flex: 0 0 auto; gap: 10px; }
    .ci-menu-toggle   { order: 3; margin-left: 4px; }
    .ci-header__nav   { order: 4; }
}

/* ==========================================================================
   PAINEL LATERAL (secções 11 a 13 da especificação)
   ==========================================================================
   O menu deslizava por baixo e empurrava a página. Passa a entrar da
   direita por cima dela, com o fundo escurecido e a página travada.
   ========================================================================== */

.ci-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.ci-menu-overlay--visivel {
    opacity: 1;
    visibility: visible;
}

body.ci-menu-aberto { overflow: hidden; }

@media (max-width: 1199px) {

    .ci-header__nav {
        position: fixed;
        top: 0;
        right: 0;
        /* 380 em tablet, 85% do ecrã em telemóvel - regra 11. */
        width: min(380px, 85vw);
        height: 100dvh;
        background: #07162f;
        z-index: 9999;
        overflow-y: auto;
        padding: 76px 24px 32px;

        /* Fora do ecrã, e não escondido: é o que permite a animação. */
        display: block;
        transform: translateX(100%);
        transition: transform .3s ease;
        box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
    }

    .ci-header__nav.ci-header__nav--open {
        display: block;
        transform: translateX(0);
    }

    /* O botão fica por cima do painel e vira X quando está aberto. */
    .ci-menu-toggle {
        position: relative;
        z-index: 10000;
    }

    .ci-menu-toggle--active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .ci-menu-toggle--active span:nth-child(2) { opacity: 0; }
    .ci-menu-toggle--active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .ci-menu-toggle span { transition: transform .3s ease, opacity .2s ease; }

    .ci-nav-list {
        border-top: none;
        padding: 0;
    }

    .ci-nav-list > li > a {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        color: var(--ci-white);
        font-size: 16px;
    }

    /* Quem prefere menos movimento não leva nenhum. */
    @media (prefers-reduced-motion: reduce) {
        .ci-header__nav,
        .ci-menu-overlay,
        .ci-menu-toggle span { transition: none; }
    }
}

/* ----- Logótipo no header: sem a assinatura ------------------------------
   O ficheiro traz três linhas - CARLO, INTERNATIONAL e a assinatura
   "BUSINESS & REAL ESTATE". À altura de um header (48px) essa terceira
   linha fica com 3,4px e não se lê: deixa de ser informação e passa a ser
   sujidade por baixo do nome.

   Corta-se a faixa de baixo (y 245-310 de 310) e o nome passa a ocupar a
   caixa toda, ~25% maior. A assinatura continua inteira no rodapé e no
   hero, onde há altura para ela. */


/* O painel tem z-index 9999, mas isso vale dentro do .ci-header - e o
   header tem contexto de empilhamento próprio. O fundo escurecido, que é
   filho do <body>, ficava por cima dele e esbatia o menu todo. Enquanto o
   menu está aberto, o header sobe acima do fundo. */
body.ci-menu-aberto .ci-header {
    position: relative;
    z-index: 10000;
}

/* ==========================================================================
   Janelas modais - extensao da base que ja existe
   --------------------------------------------------------------------------
   A base (.ci-modal, __backdrop, __dialog, __close) vive em dashboard.css e
   e usada pelos modais da Agenda desde ha muito. Este bloco NAO a redefine:
   acrescenta-lhe o que faltava para servir tambem uma janela centrada e sem
   respiro interior, como a de boas-vindas.

   Quem usa isto opta por ele com data-ci-modal no elemento. E esse atributo
   que o JavaScript procura, para nao mexer nos modais da Agenda, que abrem e
   fecham com .show()/.hide() e nao com o atributo hidden.

   Nota: dashboard.css carrega depois de main.css (depende de ci-main), por
   isso qualquer coisa que aqui repetisse um seletor da base perderia.
   Por isso os modificadores abaixo sao todos mais especificos.
   ========================================================================== */

.ci-modal[hidden] {
    display: none !important;
}

/*
 * Centrada: margin auto em vez de align-items, porque com align-items:center
 * o topo da caixa fica inacessivel quando o conteudo e mais alto do que o
 * ecra. Com margin auto centra e continua a poder deslizar.
 */
.ci-modal.ci-modal--centrada {
    align-items: flex-start;
    padding: 24px;
}

.ci-modal.ci-modal--centrada .ci-modal__dialog {
    margin: auto;
}

.ci-modal.ci-modal--centrada .ci-modal__backdrop {
    background: rgba(10, 14, 26, 0.72);
    backdrop-filter: blur(3px);
}

/* Sem respiro interior: o conteudo encosta as margens da caixa. */
.ci-modal.ci-modal--rente .ci-modal__dialog {
    padding: 0;
    max-width: 620px;
    border-radius: var(--ci-radius-lg);
    box-shadow: var(--ci-shadow-xl);
    overflow: hidden;
    animation: ci-modal-entrar 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*
 * Sobre uma capa escura o X cinzento da base desaparece. Aqui ganha o mesmo
 * disco translucido do icone do LinkedIn, que esta ao lado dele.
 */
.ci-modal.ci-modal--rente .ci-modal__close {
    /*
     * O cartao la dentro tem z-index: 1, por isso a imagem da capa era
     * pintada por cima deste botao: ele estava no sitio certo, invisivel e
     * sem receber cliques. Tem de ficar acima do cartao.
     */
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(6, 21, 50, 0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    transition: var(--ci-transition);
}

.ci-modal.ci-modal--rente .ci-modal__close:hover,
.ci-modal.ci-modal--rente .ci-modal__close:focus-visible {
    background: var(--ci-gold);
    color: var(--ci-black);
}

body.ci-modal-aberto {
    overflow: hidden;
}

@keyframes ci-modal-entrar {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ci-modal.ci-modal--rente .ci-modal__dialog {
        animation: none;
    }
}

/* ==========================================================================
   Boas-vindas do primeiro acesso
   ========================================================================== */

/*
 * A variante compacta encosta ao topo da caixa: sem sombra propria e sem
 * cantos redondos em baixo, para o cartao e a janela lerem como uma peca so.
 */
.ci-founder-card--compacto {
    border-radius: var(--ci-radius-lg) var(--ci-radius-lg) 0 0;
    box-shadow: none;
}

.ci-founder-card--compacto .ci-founder-card__body {
    padding-bottom: 4px;
}

/*
 * A capa tem proporcao fixa (4:1), a foto tem tamanho fixo (148px). Numa
 * pagina larga isso equilibra-se; dentro de uma janela de 620px a capa fica
 * com 155px e a foto passa a ocupar-lhe metade da altura, encostada ao
 * logotipo. Aqui a capa ganha altura e a foto encolhe, para a proporcao
 * ficar parecida com a da pagina institucional.
 */
.ci-founder-card--compacto .ci-founder-card__cover {
    aspect-ratio: 3 / 1;
}

.ci-founder-card--compacto .ci-founder-card__photo {
    width: 126px;
    height: 126px;
    border-width: 4px;
    margin: -63px 0 0 28px;
}

/*
 * O icone do LinkedIn vive no mesmo canto que o botao de fechar. Aqui abre
 * espaco para os dois em vez de se esconder um deles.
 */
.ci-founder-card--compacto .ci-founder-card__linkedin-icon {
    right: 62px;
}

.ci-boas-vindas__mensagem {
    padding: 4px 32px 0;
}

.ci-boas-vindas__titulo {
    font-family: var(--ci-font-alt);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ci-black);
    margin: 0 0 12px;
    padding-top: 20px;
    border-top: 1px solid var(--ci-gray-100);
}

.ci-boas-vindas__mensagem p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--ci-gray-500);
    margin: 0 0 14px;
}

.ci-boas-vindas__acoes {
    display: flex;
    justify-content: flex-end;
    padding: 10px 32px 32px;
}

/*
 * Ecras baixos - o caso do portatil de 1366x768.
 *
 * Com a capa a 3:1 a janela pede 777px de altura e so ha 720 disponiveis:
 * o botao "Entrar no meu painel" cai abaixo da dobra, que e exactamente o
 * sitio onde nao pode estar. Aqui a capa e a foto encolhem juntas, para a
 * proporcao entre as duas se manter enquanto a janela deixa de precisar de
 * scroll.
 */
@media (max-height: 850px) {
    .ci-founder-card--compacto .ci-founder-card__cover {
        aspect-ratio: 4 / 1;
    }

    .ci-founder-card--compacto .ci-founder-card__photo {
        width: 104px;
        height: 104px;
        margin: -52px 0 0 26px;
    }

    .ci-boas-vindas__titulo {
        padding-top: 14px;
        margin-bottom: 8px;
    }

    .ci-boas-vindas__mensagem p {
        margin-bottom: 10px;
    }

    .ci-boas-vindas__acoes {
        padding: 6px 32px 24px;
    }
}

@media (max-width: 768px) {
    .ci-modal.ci-modal--centrada {
        padding: 12px;
    }

    .ci-founder-card--compacto .ci-founder-card__body,
    .ci-boas-vindas__mensagem {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ci-boas-vindas__acoes {
        padding: 10px 20px 24px;
    }

    .ci-boas-vindas__acoes .ci-btn {
        width: 100%;
        justify-content: center;
    }

    .ci-boas-vindas__titulo {
        font-size: 20px;
    }

    /*
     * Repor o que a regra de ecra baixo (max-height: 850px) impoe: num
     * telemovel as duas condicoes sao verdadeiras ao mesmo tempo, e sem isto
     * a variante compacta voltava a sobrepor a foto ao logotipo.
     */
    .ci-founder-card--compacto .ci-founder-card__cover {
        aspect-ratio: 4 / 1;
    }

    .ci-founder-card--compacto .ci-founder-card__photo {
        width: 96px;
        height: 96px;
        margin: 14px 0 0 20px;
    }

    /* Com a foto ja fora da capa, o icone volta ao seu canto. */
    .ci-founder-card--compacto .ci-founder-card__linkedin-icon {
        right: 60px;
    }
}

/* ==========================================================================
   Conteudo de paginas simples (.ci-page-content)
   --------------------------------------------------------------------------
   O contentor do page.php nao tinha regra nenhuma. O reset do tema desliga
   os marcadores das listas e as margens dos paragrafos e nada as repunha,
   por isso qualquer pagina com texto corrido saia com as linhas coladas e
   as listas sem marcador nem indentacao - os Termos e Condicoes, a Politica
   de Privacidade e a de Cookies, que sao precisamente os documentos que as
   pessoas tem de conseguir ler.

   Segue a tipografia que o resto do tema ja usa: Playfair nos titulos,
   Inter no corpo, cinzento 600 no texto e o dourado nas ligacoes.
   ========================================================================== */

.ci-page-content {
    max-width: 78ch;
    font-size: 16px;
    line-height: 1.8;
    color: var(--ci-gray-600);
}

.ci-page-content > *:first-child {
    margin-top: 0;
}

.ci-page-content p {
    margin: 0 0 18px;
}

.ci-page-content h2 {
    font-family: var(--ci-font-alt);
    font-size: clamp(21px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ci-black);
    margin: 44px 0 16px;
    padding-top: 20px;
    border-top: 1px solid var(--ci-gray-100);
}

.ci-page-content h3 {
    font-family: var(--ci-font-alt);
    font-size: 19px;
    font-weight: 700;
    color: var(--ci-black);
    margin: 28px 0 12px;
}

/*
 * As listas destes documentos sao quase todas enumeracoes dentro de uma
 * frase que as introduz, por isso ficam encostadas ao paragrafo anterior e
 * com o marcador dourado, que e o unico sinal de marca nesta pagina.
 */
.ci-page-content ul,
.ci-page-content ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.ci-page-content ul {
    list-style: disc;
}

.ci-page-content ol {
    list-style: decimal;
}

.ci-page-content li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.ci-page-content li::marker {
    color: var(--ci-gold);
}

.ci-page-content strong {
    color: var(--ci-black);
    font-weight: 600;
}

.ci-page-content a {
    color: var(--ci-gold-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ci-page-content a:hover {
    color: var(--ci-black);
}

.ci-page-content em {
    color: var(--ci-gray-500);
}

/* A data de atualizacao, que e sempre o primeiro paragrafo em italico. */
.ci-page-content > p:first-child em {
    display: inline-block;
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ci-gray-400);
    margin-bottom: 8px;
}

.ci-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
}

.ci-page-content th,
.ci-page-content td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ci-gray-200);
    text-align: left;
}

@media (max-width: 768px) {
    .ci-page-content {
        font-size: 15px;
    }

    .ci-page-content h2 {
        margin-top: 32px;
        padding-top: 16px;
    }

    .ci-page-content ul,
    .ci-page-content ol {
        padding-left: 18px;
    }
}
/* ========================================
   F.A.Q. dos backoffices (templates/template-parts/faq.php)
   ======================================== */
.ci-faq { max-width: 860px; }

.ci-faq__intro { margin-bottom: 28px; }

.ci-faq__title {
    font-family: var(--ci-font-alt);
    font-size: 30px;
    line-height: 1.2;
    color: var(--ci-black);
    margin-bottom: 8px;
}

.ci-faq__lead {
    color: var(--ci-gray-500);
    max-width: 60ch;
    margin-bottom: 20px;
}

.ci-faq__search {
    position: relative;
    display: flex;
    align-items: center;
}
.ci-faq__search svg {
    position: absolute;
    left: 16px;
    color: var(--ci-gray-400);
    pointer-events: none;
}
.ci-faq__search-input {
    width: 100%;
    padding: 13px 16px 13px 46px;
    font-family: var(--ci-font);
    font-size: 15px;
    color: var(--ci-gray-700);
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-300);
    border-radius: var(--ci-radius);
    transition: border-color var(--ci-transition), box-shadow var(--ci-transition);
}
.ci-faq__search-input:focus {
    outline: none;
    border-color: var(--ci-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.ci-faq__cat { margin-bottom: 30px; }
.ci-faq__cat[hidden] { display: none; }

.ci-faq__cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ci-gold-dark);
    margin-bottom: 14px;
}
.ci-faq__cat-title::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--ci-gold);
    border-radius: 2px;
}

.ci-faq__items { display: flex; flex-direction: column; gap: 10px; }

.ci-faq__item {
    background: var(--ci-white);
    border: 1px solid var(--ci-gray-200);
    border-radius: var(--ci-radius);
    box-shadow: var(--ci-shadow-sm);
    overflow: hidden;
    transition: border-color var(--ci-transition), box-shadow var(--ci-transition);
}
.ci-faq__item[hidden] { display: none; }
.ci-faq__item[open] { border-color: var(--ci-gold); box-shadow: var(--ci-shadow); }

.ci-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--ci-black);
    transition: background var(--ci-transition);
}
.ci-faq__q::-webkit-details-marker { display: none; }
.ci-faq__q:hover { background: var(--ci-gray-50); }

.ci-faq__q-text { flex: 1; }

.ci-faq__chevron {
    display: inline-flex;
    color: var(--ci-gray-400);
    transition: transform var(--ci-transition), color var(--ci-transition);
    flex-shrink: 0;
}
.ci-faq__item[open] .ci-faq__chevron {
    transform: rotate(90deg);
    color: var(--ci-gold-dark);
}

.ci-faq__a {
    padding: 0 18px 18px;
    color: var(--ci-gray-600);
    line-height: 1.7;
    border-top: 1px solid var(--ci-gray-100);
}
.ci-faq__a p { margin: 14px 0 0; }
.ci-faq__a p:first-child { margin-top: 14px; }
.ci-faq__a strong { color: var(--ci-gray-700); }
.ci-faq__a ul { margin: 12px 0 0; padding-left: 20px; }
.ci-faq__a a { color: var(--ci-gold-dark); text-decoration: underline; }

.ci-faq__no-results,
.ci-faq__empty-state {
    padding: 28px;
    text-align: center;
    color: var(--ci-gray-500);
    background: var(--ci-gray-50);
    border: 1px dashed var(--ci-gray-300);
    border-radius: var(--ci-radius);
}
.ci-faq__no-results[hidden] { display: none; }

.ci-faq__footer {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 32px;
    padding: 20px 22px;
    background: var(--ci-gray-50);
    border: 1px solid var(--ci-gray-200);
    border-left: 3px solid var(--ci-gold);
    border-radius: var(--ci-radius);
}
.ci-faq__footer-icon { color: var(--ci-gold-dark); flex-shrink: 0; margin-top: 2px; }
.ci-faq__footer strong { display: block; color: var(--ci-black); margin-bottom: 2px; }
.ci-faq__footer p { color: var(--ci-gray-500); margin: 0; }

@media (max-width: 600px) {
    .ci-faq__title { font-size: 24px; }
    .ci-faq__q { padding: 14px; }
    .ci-faq__a { padding: 0 14px 14px; }
}