/*
 * File:        main.css
 * Purpose:     Editorial design system for Assessoria Tomas / Finques Tomas.
 *              Layered, "with relief" - not flat. Soft shadows, subtle gradients,
 *              overlapping section motifs, scroll-reveal motion, contact modal.
 * Author:      Carles Teruel (Serveisit)
 * Created:     2026-05-04
 * Project:     assessoriatomas.com / Finques Tomas
 */

/* ============================== 1. TOKENS ============================== */
:root {
    --c-ink:        #0f1f33;
    --c-ink-2:      #14253b;
    --c-ink-soft:   #4a5a72;
    --c-muted:      #80818a;

    --c-line:       #e6dfcf;
    --c-line-soft:  #efeadc;

    --c-bg:         #f7f2e8;
    --c-bg-2:       #fbf7ef;
    --c-bg-3:       #fefbf3;
    --c-surface:    #ffffff;

    --c-gold:       #b58a36;
    --c-gold-2:     #936e23;
    --c-gold-soft:  #f1e6cb;

    --c-finques:    #b85540;
    --c-finques-2:  #8c3e2c;
    --c-finques-soft:#f8e3db;

    --c-success:    #486a3a;

    /* layered shadows for executive depth */
    --shadow-1: 0 1px 2px rgba(15, 31, 51, 0.06);
    --shadow-2: 0 6px 14px rgba(15, 31, 51, 0.08), 0 2px 4px rgba(15, 31, 51, 0.04);
    --shadow-3: 0 18px 38px rgba(15, 31, 51, 0.12), 0 6px 12px rgba(15, 31, 51, 0.06);
    --shadow-4: 0 36px 80px rgba(15, 31, 51, 0.18), 0 12px 24px rgba(15, 31, 51, 0.08);
    --shadow-gold: 0 16px 36px rgba(181, 138, 54, 0.22);

    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-pill: 999px;

    --f-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --f-serif: 'Fraunces', 'Georgia', serif;

    --container: 1200px;
    --gutter:    24px;

    --ease:    cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast:  140ms;
    --t-mid:   320ms;
    --t-slow:  600ms;
}

/* ============================== 2. RESET / BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--f-sans);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv11' on, 'ss01' on;
    -webkit-tap-highlight-color: rgba(181, 138, 54, 0.18);
    overflow-x: hidden;
}
body.is-modal-open,
body.is-nav-open { overflow: hidden; }

/* iOS auto-zooms inputs whose font-size < 16px on focus. Force 16px to suppress it. */
input[type="text"], input[type="tel"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
    font-size: 16px;
}

/* Disable hover effects on touch-only devices (avoids stuck "hover" on Android). */
@media (hover: none) {
    a:hover, .btn:hover, .btn-admin:hover,
    .service-card:hover, .imm-card:hover, .imm-step:hover, .property:hover,
    .value:hover, .contact-card:hover, .topic-chip:hover,
    .brand-switch:hover, .sticky-cta:hover,
    .lang-switch__item:hover {
        transform: none !important;
    }
    .service-card:hover::before { transform: scaleY(0); }
    .service-card:hover .service-card__more { gap: 6px; }
    .property:hover { box-shadow: var(--shadow-1); }
    .btn--3d:hover { transform: translateY(0) !important; }
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--c-ink); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--c-gold-2); }

h1, h2, h3 {
    font-family: var(--f-serif);
    color: var(--c-ink);
    margin: 0 0 0.6em 0;
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -0.014em;
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.18; }
h3 { font-size: 1.3rem; line-height: 1.3; }

p { margin: 0 0 1em 0; color: var(--c-ink-soft); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }

.eyebrow {
    display: inline-block;
    color: var(--c-gold);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.74rem;
    margin: 0 0 14px 0;
    position: relative;
    padding-left: 26px;
}
.eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 2px;
    background: var(--c-gold);
}
.eyebrow--center { display: block; text-align: center; padding-left: 0; }
.eyebrow--center::before { display: none; }
.eyebrow--finques { color: var(--c-finques); }
.eyebrow--finques::before { background: var(--c-finques); }

.lead {
    font-size: 1.08rem;
    color: var(--c-ink-soft);
    max-width: 60ch;
}

::selection { background: var(--c-gold); color: #fff; }

/* ============================== 3. BUTTONS ============================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: var(--f-sans);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                box-shadow var(--t-mid) var(--ease);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--block { width: 100%; justify-content: center; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 18px; height: 18px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    color: #fff;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn--primary {
    background: var(--c-ink);
    color: #fff;
    box-shadow: var(--shadow-2);
}
.btn--primary:hover {
    background: var(--c-ink-2);
    color: #fff;
    box-shadow: var(--shadow-3);
}

/* --- 3D variant: oversized, raised, gold accent under, deep press feedback --- */
.btn--3d {
    position: relative;
    padding: 18px 32px;
    font-size: 1.02rem;
    background: linear-gradient(180deg, #1f3450 0%, #14253b 50%, #0d1d33 100%);
    color: #fff;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -2px 0 rgba(0,0,0,0.30),
        0 4px 0 #b58a36,
        0 8px 18px rgba(15, 31, 51, 0.30),
        0 18px 40px rgba(15, 31, 51, 0.18);
    transform: translateY(0);
    transition:
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease);
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.btn--3d:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -2px 0 rgba(0,0,0,0.34),
        0 6px 0 #9c7423,
        0 14px 28px rgba(15, 31, 51, 0.35),
        0 30px 54px rgba(15, 31, 51, 0.22);
}
.btn--3d:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -2px 0 rgba(0,0,0,0.30),
        0 1px 0 #9c7423,
        0 4px 12px rgba(15, 31, 51, 0.30);
}
.btn--3d svg { transition: transform var(--t-fast) var(--ease); }
.btn--3d:hover svg { transform: translateX(4px); }

.btn--ghost {
    background: rgba(255,255,255,0.7);
    color: var(--c-ink);
    border-color: var(--c-line);
    backdrop-filter: blur(4px);
}
.btn--ghost:hover {
    color: var(--c-ink);
    border-color: var(--c-ink);
    background: #fff;
}

.btn--gold { background: var(--c-gold); color: #fff; box-shadow: var(--shadow-gold); }
.btn--gold:hover { background: var(--c-gold-2); color: #fff; }

.btn--finques-solid {
    background: var(--c-finques);
    color: #fff;
    box-shadow: 0 14px 28px rgba(184, 85, 64, 0.28);
}
.btn--finques-solid:hover {
    background: var(--c-finques-2);
    color: #fff;
}

/* Finques outline button - signals "different brand" while sitting next to the
   primary Assessoria button. Used in the hero next to the dark "Demana cita". */
.btn--finques-outline {
    background: #fff;
    color: var(--c-finques);
    border: 1.5px solid var(--c-finques);
    box-shadow: 0 8px 18px rgba(184, 85, 64, 0.10);
    padding-left: 18px;
}
.btn--finques-outline:hover {
    background: var(--c-finques);
    color: #fff;
    box-shadow: 0 14px 28px rgba(184, 85, 64, 0.28);
}
.btn--finques-outline .btn__finques-mark {
    display: inline-flex;
    width: 22px; height: 22px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--c-finques);
    color: #fff;
    transition: background var(--t-fast) var(--ease);
}
.btn--finques-outline .btn__finques-mark svg { width: 13px; height: 13px; }
.btn--finques-outline:hover .btn__finques-mark {
    background: #fff;
    color: var(--c-finques);
}

/* ============================== 4. SITE HEADER ============================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 242, 232, 0.86);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 14px var(--gutter);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 46px; width: auto; }

.site-nav {
    display: flex;
    gap: 32px;
    font-size: 0.95rem;
    font-weight: 500;
    align-items: center;
    justify-content: center;
}

/* Right-side cluster: Finques sister brand + lang switcher. */
.site-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}
.site-nav a {
    color: var(--c-ink-soft);
    position: relative;
    padding: 6px 0;
}
.site-nav a:hover { color: var(--c-ink); }
.site-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--c-gold);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-mid) var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); }

/* Finques link - signals separate brand identity (terracotta accent + dot). */
.site-nav__finques {
    color: var(--c-finques) !important;
    font-style: italic;
    font-weight: 600;
    padding-left: 14px !important;
}
.site-nav__finques::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-finques);
    transform: translateY(-50%);
}
.site-nav__finques::after { background: var(--c-finques) !important; }
.site-nav__finques:hover { color: var(--c-finques-2) !important; }

/* CTA 2026-05-05 .site-header__phone removed - replaced by sticky CTA + page contact section. */

/* Brand switch button - real-estate-portal style (Idealista/Fotocasa-inspired):
   solid terracotta pill, sans-serif bold, house icon, subtle elevation. */
.brand-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    border-radius: var(--r-pill);
    background: var(--c-finques);
    border: 0;
    color: #fff;
    text-decoration: none;
    font-family: var(--f-sans);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgba(184, 85, 64, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: background var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                box-shadow var(--t-mid) var(--ease);
}
.brand-switch:hover {
    background: var(--c-finques-2);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(184, 85, 64, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.brand-switch:active { transform: translateY(0); }

.brand-switch__icon {
    display: inline-grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.brand-switch__icon svg { width: 14px; height: 14px; }

.brand-switch__text {
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .brand-switch__text { display: none; }
    .brand-switch { padding: 10px; }
    .brand-switch__icon { width: 22px; height: 22px; }
}

.lang-switch {
    display: inline-flex;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    overflow: hidden;
    background: #fff;
}
.lang-switch__item {
    display: inline-flex; align-items: center;
    padding: 6px 12px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c-muted);
    border-right: 1px solid var(--c-line);
}
.lang-switch__item:last-child { border-right: none; }
.lang-switch__item:hover { color: var(--c-ink); background: var(--c-bg-2); }
.lang-switch__item.is-active { background: var(--c-ink); color: #fff; }

/* ============================== 5. SCROLL REVEAL ============================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================== 5b. SCROLL PROGRESS BAR ============================== */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-gold), var(--c-finques));
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 60;
    pointer-events: none;
    transition: transform 60ms linear;
}

/* ============================== 5c. CURSOR SHINE on interactive cards ============================== */
.service-card,
.imm-card,
.imm-step,
.value,
.property,
.contact-card {
    --mx: 50%;
    --my: 50%;
}
.service-card::before,
.imm-card::before,
.imm-step::before,
.value::before {
    /* keep the existing :before rules above; this just preserves the cascade. */
}
.service-card,
.imm-card,
.imm-step,
.property {
    background-image:
        radial-gradient(circle at var(--mx) var(--my), rgba(181, 138, 54, 0.10), transparent 35%);
    background-color: var(--c-surface);
    background-blend-mode: normal;
}
.service-card.is-highlight {
    background-image:
        radial-gradient(circle at var(--mx) var(--my), rgba(181, 138, 54, 0.16), transparent 40%),
        linear-gradient(165deg, #ffffff 0%, var(--c-gold-soft) 110%);
}

/* ============================== 6. SECTION HEAD ============================== */
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head__title { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 12px; }
.section-head__lead { color: var(--c-ink-soft); }

/* ============================== 7. HERO ============================== */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 9vw, 130px) var(--gutter) clamp(70px, 8vw, 110px);
    isolation: isolate;
    background-color: var(--c-ink);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    animation: hero-zoom 18s ease-out forwards;
}
@keyframes hero-zoom {
    from { background-size: 105%; }
    to   { background-size: 112%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero { animation: none; }
}
.hero::after {
    /* fade-out into the next section, gives depth */
    content: "";
    position: absolute;
    bottom: -1px; left: 0; right: 0; height: 120px;
    background: linear-gradient(180deg, transparent, var(--c-bg));
    z-index: 2;
    pointer-events: none;
}
/* Heavily-tinted overlay: photo is just a soft texture under a deep navy gradient
   that fades to the page background at the bottom. */
.hero--photo .hero__bg {
    position: absolute; inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(15, 31, 51, 0.96) 0%,
            rgba(15, 31, 51, 0.92) 30%,
            rgba(15, 31, 51, 0.86) 60%,
            rgba(247, 242, 232, 0.40) 92%,
            var(--c-bg) 100%),
        radial-gradient(ellipse at 20% 100%, rgba(181, 138, 54, 0.18), transparent 60%);
    backdrop-filter: blur(2px);
    will-change: transform;
}

.hero__inner {
    position: relative;
    z-index: 3;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.hero--photo .hero__inner { color: #fff; }
.hero--photo .eyebrow { color: var(--c-gold); }
.hero--photo .eyebrow::before { background: var(--c-gold); }
.hero__title {
    font-weight: 500;
    margin-bottom: 22px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
}
.hero--photo .hero__title { color: #fff; }
.hero__sub {
    max-width: 700px;
    margin: 0 auto 36px;
    font-size: clamp(1.05rem, 1.4vw, 1.22rem);
    color: var(--c-ink-soft);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.hero--photo .hero__sub { color: rgba(255, 255, 255, 0.88); }
.hero__cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero--photo .hero__scroll { border-color: rgba(255, 255, 255, 0.35); }
.hero--photo .hero__scroll span { background: var(--c-gold); }

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    z-index: 2;
    width: 22px; height: 36px;
    border-radius: 12px;
    border: 2px solid rgba(15,31,51,0.25);
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.hero__scroll span {
    display: block;
    width: 3px; height: 8px;
    background: var(--c-gold);
    border-radius: 3px;
    margin-top: 6px;
    animation: scroll-dot 1.6s ease-in-out infinite;
}
@keyframes scroll-dot {
    0%   { opacity: 0; transform: translateY(0); }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(14px); }
}

/* ============================== 8. SERVICES ============================== */
.services {
    padding: clamp(80px, 10vw, 130px) 0 clamp(60px, 8vw, 100px);
    position: relative;
}
.services::before {
    /* offset color block for layered feel */
    content: "";
    position: absolute;
    left: 50%; top: 60px;
    transform: translateX(-50%);
    width: min(820px, 90%);
    height: 360px;
    background: var(--c-bg-3);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    z-index: 0;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    position: relative;
    z-index: 1;
}

.service-card {
    appearance: none;
    text-align: left;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 26px 24px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    color: var(--c-ink);
    box-shadow: var(--shadow-1);
    transition: transform var(--t-mid) var(--ease),
                box-shadow var(--t-mid) var(--ease),
                border-color var(--t-mid) var(--ease);
    overflow: hidden;
    font: inherit;
}
.service-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--c-gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--t-mid) var(--ease);
}
.service-card::after {
    /* subtle radial highlight on top-right */
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(181,138,54,0.10), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease);
}
.service-card:hover {
    transform: translateY(-6px);
    border-color: var(--c-line-soft);
    box-shadow: var(--shadow-3);
}
.service-card:hover::before { transform: scaleY(1); }
.service-card:hover::after { opacity: 1; }

.service-card__icon {
    display: inline-flex;
    width: 48px; height: 48px;
    align-items: center;
    justify-content: center;
    color: var(--c-ink);
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--c-bg-2), var(--c-bg));
    border: 1px solid var(--c-line-soft);
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card__title { font-size: 1.2rem; margin: 4px 0 0 0; }
.service-card__desc { color: var(--c-ink-soft); font-size: 0.95rem; margin: 0; flex: 1; }

.service-card.is-highlight {
    background: linear-gradient(165deg, #ffffff 0%, var(--c-gold-soft) 110%);
    border-color: rgba(181, 138, 54, 0.35);
    box-shadow: var(--shadow-2);
}
.service-card.is-highlight::before { background: var(--c-gold); transform: scaleY(1); }
.service-card.is-highlight .service-card__icon {
    background: linear-gradient(135deg, #ffffff, var(--c-gold-soft));
    color: var(--c-gold-2);
    border-color: rgba(181, 138, 54, 0.35);
}
.service-card__pill {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--c-gold);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-pill);
}

/* ============================== 8b. SERVICES SUMMARY (home presentation) ============================== */
.services-summary { padding: clamp(70px, 9vw, 110px) 0; }
.services-summary__list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.services-summary__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    font-weight: 500;
    color: var(--c-ink);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.services-summary__list li:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.services-summary__list li.is-highlight {
    background: linear-gradient(135deg, #ffffff, var(--c-gold-soft));
    border-color: rgba(181,138,54,0.35);
}
.services-summary__icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--c-bg-2);
    color: var(--c-gold-2);
    border: 1px solid var(--c-line-soft);
}
.services-summary__icon svg { width: 18px; height: 18px; }
.services-summary__cta { text-align: center; }

/* ============================== 8c. SERVICES DETAIL (full /serveis page) ============================== */
.services-hero {
    position: relative;
    padding: clamp(70px, 8vw, 110px) var(--gutter) clamp(60px, 7vw, 90px);
    border-bottom: 1px solid var(--c-line);
    text-align: center;
    isolation: isolate;
    background-color: var(--c-ink);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
.services-hero__inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 3; }
.services-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.30); }
.services-hero .lead { color: rgba(255,255,255,0.88); text-shadow: 0 1px 6px rgba(0,0,0,0.25); margin-left: auto; margin-right: auto; }
.services-hero .eyebrow { color: var(--c-gold); }
.services-hero .eyebrow::before { background: var(--c-gold); }

.services-detail { padding: clamp(60px, 8vw, 100px) 0; }
.service-block {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid var(--c-line);
}
.service-block:last-child { border-bottom: 0; }
.service-block__index {
    font-family: var(--f-serif);
    font-size: 2rem;
    color: var(--c-gold);
    font-weight: 600;
    line-height: 1;
}
.service-block__index span:first-child { display: block; margin-bottom: 8px; }
.service-block__pill {
    display: inline-block;
    background: var(--c-gold);
    color: #fff;
    font-family: var(--f-sans);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: var(--r-pill);
}
.service-block__icon {
    display: none; /* The big serif index already labels it; keep it minimal. */
}
.service-block__body { max-width: 760px; }
.service-block__body h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 8px; }
.service-block__body .lead { margin-bottom: 16px; }
.service-block__list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 22px;
}
.service-block__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-ink);
    font-size: 0.95rem;
}
.service-block__list svg { color: var(--c-gold); flex-shrink: 0; width: 18px; height: 18px; }

.service-block.is-highlight {
    background: linear-gradient(180deg, var(--c-gold-soft), transparent 80%);
    border-radius: var(--r-md);
    padding-left: 24px;
    padding-right: 24px;
}
.service-block.is-highlight .service-block__index { color: var(--c-gold-2); }

@media (max-width: 720px) {
    .service-block { grid-template-columns: 60px 1fr; gap: 16px; padding: 24px 0; }
    .service-block__index { font-size: 1.6rem; }
}

/* ============================== 8d. IMMIGRATION DEDICATED PAGE ============================== */
.imm-how { padding: clamp(60px, 8vw, 100px) 0; background: var(--c-bg-2); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.imm-how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.imm-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 28px 26px 24px;
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--t-mid) var(--ease), transform var(--t-fast) var(--ease);
}
.imm-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.imm-step__num {
    display: inline-block;
    color: var(--c-gold);
    font-family: var(--f-serif);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.imm-step h3 { font-size: 1.2rem; margin: 0 0 8px 0; }
.imm-step p  { color: var(--c-ink-soft); margin: 0; font-size: 0.96rem; }

.imm-list { padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 130px); }
.imm-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.imm-card {
    position: relative;
    padding: 26px 26px 24px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--t-mid) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.imm-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-3);
    border-color: var(--c-gold);
}
.imm-card__num {
    display: inline-block;
    color: var(--c-gold);
    font-family: var(--f-serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.imm-card__title {
    font-family: var(--f-serif);
    font-size: 1.12rem;
    line-height: 1.3;
    margin: 0 0 8px 0;
    color: var(--c-ink);
}
.imm-card__desc { color: var(--c-ink-soft); margin: 0; font-size: 0.94rem; line-height: 1.55; }

/* ============================== 9. IMMIGRATION ============================== */
.immigration {
    padding: clamp(80px, 10vw, 130px) 0;
    background:
        radial-gradient(ellipse at 90% 0%, rgba(181,138,54,0.10), transparent 60%),
        linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg) 100%);
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    position: relative;
    overflow: hidden;
}
/* CTA 2026-05-06 backdrop "01" numeral removed (felt like a stray "1" to non-design viewers). */
.immigration__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 64px;
    position: relative;
    z-index: 1;
}
.immigration__copy h2 { margin-bottom: 16px; }
.immigration__copy .lead { margin-bottom: 24px; }

.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
}
.check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--c-ink);
    font-size: 0.97rem;
}
.check-list svg { color: var(--c-gold); flex-shrink: 0; }

.immigration__visual { display: flex; justify-content: center; }
.immigration__visual svg {
    max-width: 320px; width: 100%;
    filter: drop-shadow(0 24px 40px rgba(15, 31, 51, 0.22));
}

@media (max-width: 820px) {
    .immigration__inner { grid-template-columns: 1fr; gap: 32px; }
    .immigration__visual { order: -1; }
    .check-list { grid-template-columns: 1fr; }
}

/* ============================== 10. FINQUES TEASER ============================== */
/* Visually distinct band - signals "this is a separate brand inside the same firm". */
.finques-teaser {
    position: relative;
    padding: clamp(90px, 11vw, 140px) 0 clamp(110px, 12vw, 160px);
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid rgba(184,85,64,0.18);
    border-bottom: 1px solid rgba(184,85,64,0.18);
}
.finques-teaser__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 0% 30%, rgba(184,85,64,0.18), transparent 55%),
        radial-gradient(ellipse at 100% 80%, rgba(184,85,64,0.10), transparent 55%),
        linear-gradient(180deg, var(--c-finques-soft) 0%, #f3dcd1 100%);
    z-index: 0;
}
/* Diagonal divider strip on top + bottom - announces a brand change. */
.finques-teaser::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--c-finques), transparent);
    z-index: 1;
}
.finques-teaser .finques-teaser__chip {
    position: absolute;
    top: 22px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--c-finques);
    color: var(--c-finques);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}
.finques-teaser .finques-teaser__chip::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-finques);
}
/* CTA 2026-05-06 backdrop "02" numeral removed for consistency. */
.finques-teaser__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
}
.finques-teaser__logo { height: 56px; margin-bottom: 18px; width: auto; }
.finques-teaser__copy h2 { margin-bottom: 16px; }
.finques-teaser__copy .lead { margin-bottom: 28px; }
.finques-teaser__visual {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-3);
    transform: rotate(-1deg);
    transition: transform var(--t-mid) var(--ease);
}
.finques-teaser__visual:hover { transform: rotate(0); }

@media (max-width: 820px) {
    .finques-teaser__inner { grid-template-columns: 1fr; gap: 32px; }
    .finques-teaser__visual { transform: none; }
}

/* ============================== 11. VALUES ============================== */
.values {
    padding: clamp(80px, 10vw, 130px) 0;
    border-top: 1px solid var(--c-line);
    background: var(--c-bg);
}
.values__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
    margin-top: 36px;
}
.value {
    padding: 28px 4px 4px;
    border-top: 2px solid var(--c-ink);
    position: relative;
}
.value::before {
    content: "";
    position: absolute;
    left: 0; top: -2px;
    width: 40px; height: 2px;
    background: var(--c-gold);
}
.value__num {
    display: inline-block;
    color: var(--c-gold);
    font-family: var(--f-serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.value h3 { font-size: 1.5rem; margin: 4px 0 8px 0; }
.value p { color: var(--c-ink-soft); margin: 0; }

/* ============================== 12. CONTACT (with map) ============================== */
.contact {
    padding: clamp(80px, 10vw, 130px) 0;
    background:
        linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%);
    border-top: 1px solid var(--c-line);
    position: relative;
}
/* CTA 2026-05-06 backdrop "03" numeral removed (was confusing in the contact section). */
.contact__inner {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}
.contact__copy h2 { margin-bottom: 14px; }
.contact__copy .lead { margin-bottom: 28px; }

.contact__details {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 28px 0;
}
.contact__details li { margin: 0; }

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 14px 14px;
    text-decoration: none;
    color: var(--c-ink);
    backdrop-filter: blur(4px);
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                box-shadow var(--t-mid) var(--ease),
                transform var(--t-fast) var(--ease);
    position: relative;
}
a.contact-card { cursor: pointer; }
a.contact-card::after {
    content: "";
    position: absolute;
    top: 14px; right: 14px;
    width: 12px; height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a72' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
a.contact-card:hover {
    background: #fff;
    border-color: var(--c-gold);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
    color: var(--c-ink);
}
a.contact-card:hover::after { opacity: 1; transform: translateX(0); }

.contact-card__icon {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--r-sm);
    background: var(--c-gold-soft);
    color: var(--c-gold-2);
    flex-shrink: 0;
}
.contact-card__icon svg { width: 18px; height: 18px; }

.contact-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-card__label {
    font-family: var(--f-sans);
    font-weight: 600;
    color: var(--c-ink-soft);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.contact-card__value {
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

@media (max-width: 540px) {
    .contact__details { grid-template-columns: 1fr; }
}

.contact__map {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-3);
    border: 1px solid var(--c-line);
    min-height: 420px;
    background: var(--c-bg-3);
}
.contact__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.contact__map::after {
    content: "";
    position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(15,31,51,0.06);
    pointer-events: none;
    border-radius: var(--r-md);
}

@media (max-width: 900px) {
    .contact__inner { grid-template-columns: 1fr; gap: 32px; }
    .contact__details { grid-template-columns: 1fr; }
}

/* ============================== 13. STICKY CTA + WHATSAPP ============================== */
/* Sticky CTA - centred, oversized, deep 3D, gentle pulsing accent halo. */
.sticky-cta {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px 16px 22px;
    border-radius: var(--r-pill);
    background: linear-gradient(180deg, #1f3450 0%, #14253b 50%, #0d1d33 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.10);
    font-family: var(--f-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        inset 0 -2px 0 rgba(0,0,0,0.30),
        0 4px 0 #b58a36,
        0 14px 36px rgba(15, 31, 51, 0.40),
        0 24px 60px rgba(15, 31, 51, 0.20);
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease),
                transform var(--t-fast) var(--ease),
                box-shadow var(--t-mid) var(--ease),
                background var(--t-fast) var(--ease);
    text-shadow: 0 1px 0 rgba(0,0,0,0.22);
}
.sticky-cta.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: sticky-cta-pulse 2.6s ease-in-out 1.2s infinite;
}
.sticky-cta:hover {
    transform: translateX(-50%) translateY(-3px);
    background: linear-gradient(180deg, #243a58 0%, #14253b 50%, #0d1d33 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -2px 0 rgba(0,0,0,0.34),
        0 6px 0 #9c7423,
        0 22px 48px rgba(15, 31, 51, 0.50),
        0 36px 80px rgba(15, 31, 51, 0.28);
    animation: none;
}
.sticky-cta:active {
    transform: translateX(-50%) translateY(2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -2px 0 rgba(0,0,0,0.32),
        0 1px 0 #9c7423,
        0 4px 14px rgba(15, 31, 51, 0.30);
    animation: none;
}

/* Halo behind the button - subtle floating glow */
.sticky-cta::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(181,138,54,0.25), transparent 70%);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--t-mid) var(--ease);
    pointer-events: none;
}
.sticky-cta.is-visible::before { opacity: 1; }

/* Phone-icon disc */
.sticky-cta svg {
    width: 22px; height: 22px;
    color: #b58a36;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.30));
}

@keyframes sticky-cta-pulse {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.20),
            inset 0 -2px 0 rgba(0,0,0,0.30),
            0 4px 0 #b58a36,
            0 14px 36px rgba(15, 31, 51, 0.40),
            0 24px 60px rgba(15, 31, 51, 0.20),
            0 0 0 0 rgba(181, 138, 54, 0.45);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.20),
            inset 0 -2px 0 rgba(0,0,0,0.30),
            0 4px 0 #b58a36,
            0 14px 36px rgba(15, 31, 51, 0.40),
            0 24px 60px rgba(15, 31, 51, 0.20),
            0 0 0 14px rgba(181, 138, 54, 0);
    }
}

@media (max-width: 540px) {
    .sticky-cta {
        bottom: 18px;
        padding: 14px 22px 14px 18px;
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-cta.is-visible { animation: none; }
}

/* ============================== 14. CONTACT MODAL ============================== */
.modal[hidden] { display: none !important; }
.modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 16px;
}
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 31, 51, 0.55);
    backdrop-filter: blur(6px);
    animation: fade-in var(--t-mid) var(--ease) forwards;
}
.modal__panel {
    position: relative;
    width: min(640px, 100%);
    max-height: 94vh;
    overflow: auto;
    background: var(--c-surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-4);
    padding: 24px clamp(20px, 3.5vw, 32px);
    animation: pop-in var(--t-mid) var(--ease-out) forwards;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--c-bg-2);
    color: var(--c-ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--t-fast) var(--ease);
}
.modal__close:hover { background: var(--c-bg); }

.modal__header { margin-bottom: 16px; padding-right: 28px; }
.modal__header h2 { font-size: 1.3rem; margin: 4px 0 6px 0; }
.modal__header .eyebrow { margin-bottom: 8px; }
.modal__sub { color: var(--c-ink-soft); margin: 0; font-size: 0.88rem; }

.form-row { display: block; margin-bottom: 12px; }
.form-row label,
.form-row legend {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.86rem;
    color: var(--c-ink);
}
.form-row__required { color: var(--c-finques); margin-left: 2px; }
.form-row small,
.form-row__help { display: block; color: var(--c-muted); font-size: 0.78rem; margin-top: 3px; }
.form-row input,
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: #fff;
    font: inherit;
    color: var(--c-ink);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(181,138,54,0.18);
}
.form-row textarea { resize: vertical; min-height: 64px; }

/* Two-column row pair: Name + Phone share a line on wider screens. */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .form-grid-2 { grid-template-columns: 1fr; }
}

.topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.topic-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line);
    background: #fff;
    color: var(--c-ink-soft);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.topic-chip:hover { border-color: var(--c-ink); color: var(--c-ink); }
.topic-chip.is-selected {
    background: var(--c-ink);
    color: #fff;
    border-color: var(--c-ink);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 12px 0;
    font-size: 0.84rem;
    color: var(--c-ink-soft);
}
.form-check input { width: 16px; height: 16px; accent-color: var(--c-gold); }

.modal__or {
    margin-top: 12px;
    text-align: center;
    color: var(--c-ink-soft);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.modal__or span { color: var(--c-muted); }
.modal__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-gold-2);
    font-weight: 700;
    font-size: 0.98rem;
    font-variant-numeric: tabular-nums;
}
.modal__phone:hover { color: var(--c-gold); }

.modal__success {
    text-align: center;
    padding: 24px 0;
}
.modal__success-mark {
    display: grid;
    place-items: center;
    width: 84px; height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--c-success);
    color: #fff;
    box-shadow: var(--shadow-3);
}
.modal__success h3 { font-size: 1.6rem; margin-bottom: 8px; color: var(--c-ink); }
.modal__success p  { color: var(--c-ink-soft); margin: 0; }

/* ============================== 15. FINQUES PAGE ============================== */
.finques-hero {
    position: relative;
    padding: clamp(70px, 8vw, 110px) var(--gutter) clamp(60px, 7vw, 90px);
    border-bottom: 1px solid var(--c-line);
    text-align: center;
    isolation: isolate;
    background-color: var(--c-finques-2);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
/* Finques hero overlay - heavy terracotta gradient that fades to the page bg. */
.hero--finques-photo .hero__bg {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(140, 62, 44, 0.94) 0%,
            rgba(140, 62, 44, 0.88) 35%,
            rgba(140, 62, 44, 0.78) 70%,
            rgba(248, 227, 219, 0.35) 92%,
            var(--c-finques-soft) 100%);
    backdrop-filter: blur(2px);
}
.finques-hero__inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 3; }
.finques-hero__logo { height: 70px; margin: 0 auto 18px; filter: brightness(0) invert(1) opacity(0.95); }
.finques-hero__title { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: 14px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.28); }
.finques-hero__lead { color: rgba(255, 255, 255, 0.92); font-size: 1.08rem; text-shadow: 0 1px 6px rgba(0,0,0,0.22); max-width: 640px; margin: 0 auto; }

.finques-filter {
    padding: 22px 0 32px;
    background: var(--c-finques-soft);
    border-bottom: 1px solid var(--c-line);
}
.finques-filter__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}
.finques-filter__field label {
    display: block;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--c-ink-soft);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.finques-filter__field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: #fff;
    font: inherit;
    color: var(--c-ink);
}
.finques-filter__actions { display: flex; gap: 8px; }

@media (max-width: 720px) {
    .finques-filter__inner { grid-template-columns: 1fr 1fr; }
    .finques-filter__actions { grid-column: 1 / -1; justify-content: stretch; }
    .finques-filter__actions .btn { flex: 1; justify-content: center; }
}

.finques-results { padding: 48px 0 96px; background: var(--c-bg); }
.finques-results__count {
    color: var(--c-ink-soft);
    font-size: 0.92rem;
    margin: 0 0 24px 0;
    font-weight: 500;
}

.finques__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.finques__empty {
    background: #fff;
    border: 1px dashed var(--c-line);
    border-radius: var(--r-md);
    padding: 48px 32px;
    text-align: center;
    color: var(--c-ink-soft);
}

.property {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
    box-shadow: var(--shadow-1);
}
.property:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.property.is-disabled { opacity: 0.78; }

.property__thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #ece4d3;
    overflow: hidden;
}
.property__thumb img,
.property__thumb svg { width: 100%; height: 100%; object-fit: cover; }

.property__status,
.property__op {
    position: absolute;
    top: 14px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.property__status { left: 14px; color: #fff; background: rgba(15, 31, 51, 0.92); }
.property__status--available { background: rgba(72, 106, 58, 0.92); }
.property__status--sold      { background: rgba(154, 69, 51, 0.92); }
.property__status--rented    { background: rgba(178, 90, 37, 0.92); }
.property__op { right: 14px; background: rgba(255, 255, 255, 0.94); color: var(--c-ink); }

.property__body { padding: 18px 20px 22px; }
.property__location {
    color: var(--c-muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 6px 0;
    font-weight: 600;
}
.property__title {
    font-family: var(--f-serif);
    font-size: 1.22rem;
    margin: 0 0 8px 0;
    line-height: 1.3;
    color: var(--c-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.property__price {
    font-family: var(--f-serif);
    font-size: 1.4rem;
    color: var(--c-finques);
    font-weight: 600;
    margin: 0 0 14px 0;
    font-variant-numeric: tabular-nums;
}
.property__stats {
    list-style: none;
    margin: 0;
    padding: 14px 0 0 0;
    border-top: 1px solid var(--c-line-soft);
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.property__stats li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-ink-soft);
    font-size: 0.88rem;
}
.property__stats svg { width: 16px; height: 16px; color: var(--c-gold); }

/* ============================== 15b. PROPERTY DETAIL ============================== */
.finques-detail__crumbs {
    background: var(--c-finques-soft);
    border-bottom: 1px solid var(--c-line);
    padding: 14px 0;
    font-size: 0.9rem;
}
.finques-detail__crumbs .container {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.finques-detail__crumbs a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--c-finques);
    text-decoration: none;
    font-weight: 600;
}
.finques-detail__crumbs a:hover { color: var(--c-finques-2); }
.finques-detail__ref { color: var(--c-ink-soft); font-size: 0.86rem; letter-spacing: 0.04em; }
.finques-detail__ref strong { color: var(--c-ink); margin-left: 4px; }

.finques-detail { padding: 20px 0 80px; }
.finques-detail__inner { padding: 0 var(--gutter); }

.property-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 6px;
    margin-bottom: 28px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #ece4d3;
}
.property-gallery__main {
    position: relative;
    aspect-ratio: 16/10;
    background: var(--c-line-soft);
    overflow: hidden;
}
.property-gallery__main button.property-gallery__open {
    width: 100%; height: 100%;
    border: 0; padding: 0; background: transparent; cursor: zoom-in;
    display: block;
}
.property-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.property-gallery__main:hover img { transform: scale(1.03); }
.property-gallery__main--placeholder { display: grid; place-items: center; }
.property-gallery__main--placeholder svg { width: 100%; height: 100%; }

.property-gallery__count {
    position: absolute;
    left: 12px; bottom: 12px;
    background: rgba(15,31,51,0.85);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
}

.property-gallery__thumbs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.property-gallery__thumb {
    border: 0; padding: 0; background: transparent; cursor: zoom-in;
    aspect-ratio: 1.6/1; overflow: hidden;
}
.property-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.property-gallery__thumb:hover img { transform: scale(1.05); }

.property-gallery__status,
.property-gallery__op {
    position: absolute;
    top: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 2;
}
.property-gallery__status { left: 16px; color: #fff; background: rgba(72,106,58,0.95); }
.property-gallery__status--sold     { background: rgba(154,69,51,0.95); }
.property-gallery__status--rented   { background: rgba(178,90,37,0.95); }
.property-gallery__op { right: 16px; background: rgba(255,255,255,0.96); color: var(--c-ink); }

@media (max-width: 720px) {
    .property-gallery { grid-template-columns: 1fr; }
    .property-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Main grid: content + sticky aside ---------- */
.finques-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
@media (max-width: 980px) {
    .finques-detail__grid { grid-template-columns: 1fr; }
}

.finques-detail__head { margin-bottom: 22px; }
.finques-detail__head h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 600;
    margin: 4px 0 8px 0;
    line-height: 1.2;
}
.finques-detail__location {
    color: var(--c-finques);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    margin: 0;
}
.finques-detail__price {
    font-family: var(--f-serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    color: var(--c-finques);
    font-weight: 600;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.finques-detail__keystats {
    list-style: none;
    margin: 0 0 36px 0;
    padding: 18px 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 12px;
    background: var(--c-bg-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}
.finques-detail__keystats li {
    text-align: center;
    border-right: 1px solid var(--c-line-soft);
    padding: 4px 8px;
}
.finques-detail__keystats li:last-child { border-right: 0; }
.finques-detail__keystats strong {
    display: block;
    font-family: var(--f-serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1;
}
.finques-detail__keystats span {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
    font-weight: 600;
    margin-top: 6px;
}

.finques-detail__section {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-1);
}
.finques-detail__section h2 {
    font-family: var(--f-serif);
    font-size: 1.32rem;
    margin: 0 0 16px 0;
    font-weight: 600;
    color: var(--c-ink);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-line-soft);
}
.finques-detail__section .lead {
    color: var(--c-ink);
    font-size: 1.02rem;
    margin: 0 0 14px 0;
}
.finques-detail__section p {
    color: var(--c-ink-soft);
    line-height: 1.7;
}

.features-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 18px;
}
.feature {
    display: inline-flex;
    align-items: center; gap: 10px;
    color: var(--c-ink);
    font-size: 0.95rem;
    padding: 8px 0;
}
.feature__icon {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}
.feature.is-on .feature__icon { background: var(--c-success); color: #fff; }
.feature.is-on { color: var(--c-ink); }
.feature.is-off { color: var(--c-muted); text-decoration: line-through; }
.feature.is-off .feature__icon { background: var(--c-line-soft); color: var(--c-muted); }

/* Energy classification bar — compact staircase, A=28px → G=64px wide. */
.energy-bar {
    display: flex; flex-direction: column;
    gap: 2px;
    max-width: 220px;
    margin-top: 8px;
}
.energy-bar__cell {
    position: relative;
    color: #fff;
    font-weight: 700;
    font-size: 0.74rem;
    line-height: 1;
    padding: 5px 10px;
    width: var(--w);
    border-radius: 0 3px 3px 0;
    display: flex; align-items: center;
    transition: transform 180ms var(--ease);
}
.energy-bar__cell.is-active {
    transform: scale(1.06);
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    z-index: 1;
}
.energy-bar__cell.is-active::before {
    content: ''; position: absolute; inset: -1px;
    border: 1.5px solid var(--c-ink);
    border-radius: inherit;
    pointer-events: none;
}
.energy-bar__pointer {
    position: absolute;
    right: -9px; top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--c-ink);
}

.finques-detail__map {
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--c-line);
}
.finques-detail__map iframe { display: block; }

/* ---------- Sticky inquiry card ---------- */
.finques-detail__aside { position: sticky; top: 92px; }
@media (max-width: 980px) { .finques-detail__aside { position: static; } }

.inquiry-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 24px;
    box-shadow: var(--shadow-2);
    border-top: 4px solid var(--c-finques);
}
.inquiry-card.is-disabled { opacity: 0.92; }
.inquiry-card header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line-soft); }
.inquiry-card__price {
    font-family: var(--f-serif); font-size: 1.6rem; font-weight: 600;
    color: var(--c-finques);
    margin: 0 0 4px 0;
    font-variant-numeric: tabular-nums;
}
.inquiry-card h3 { font-family: var(--f-serif); font-size: 1.2rem; margin: 4px 0 6px 0; font-weight: 600; }
.inquiry-card__sub { color: var(--c-ink-soft); margin: 0; font-size: 0.92rem; }

.inquiry-card__disabled {
    text-align: center;
    padding: 18px 0 6px;
}
.inquiry-card__disabled strong {
    display: block;
    color: var(--c-finques-2);
    margin-bottom: 14px;
}

.inquiry-form { display: grid; gap: 10px; }
.inquiry-form label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--c-ink);
}
.inquiry-form input[type="text"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="email"],
.inquiry-form textarea {
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    background: #fff;
    font: inherit;
    color: var(--c-ink);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.inquiry-form input:focus,
.inquiry-form textarea:focus {
    outline: none;
    border-color: var(--c-finques);
    box-shadow: 0 0 0 3px rgba(184,85,64,0.18);
}
.inquiry-form textarea { resize: vertical; min-height: 76px; }

.inquiry-form__help {
    display: block;
    color: var(--c-muted);
    font-size: 0.78rem;
    margin: -4px 0 4px 0;
}
.inquiry-form__check {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--c-ink-soft);
    margin: 4px 0 8px 0;
}
.inquiry-form__check input { accent-color: var(--c-finques); width: 16px; height: 16px; }

.inquiry-form button[type="submit"] {
    margin-top: 6px;
    background: linear-gradient(180deg, #c66148 0%, #b85540 50%, #9c4533 100%);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 4px 0 #8a3d2c,
        0 8px 18px rgba(184, 85, 64, 0.30);
    text-shadow: 0 1px 0 rgba(0,0,0,0.20);
}
.inquiry-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 6px 0 #6b2e22,
        0 14px 28px rgba(184, 85, 64, 0.42);
}
.inquiry-form button[type="submit"]:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 1px 0 #6b2e22,
        0 4px 12px rgba(184, 85, 64, 0.30);
}

.inquiry-form__or {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-top: 12px;
    color: var(--c-ink-soft); font-size: 0.86rem;
}
.inquiry-form__or > span { color: var(--c-muted); letter-spacing: 0.4em; }
.inquiry-form__phone {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--c-finques); font-weight: 700; font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.inquiry-form__phone:hover { color: var(--c-finques-2); }

.inquiry-form__success {
    text-align: center;
    padding: 24px 8px 16px;
}
.inquiry-form__success-mark {
    display: grid; place-items: center;
    width: 68px; height: 68px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--c-success);
    color: #fff;
    box-shadow: 0 6px 14px rgba(72,106,58,0.30);
}
.inquiry-form__success p { color: var(--c-ink); margin: 0; font-size: 0.95rem; }

/* ---------- Lightbox ---------- */
.lightbox[hidden] { display: none !important; }
.lightbox {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(15, 31, 51, 0.94);
    display: grid; place-items: center;
    padding: 32px;
    animation: fade-in 200ms var(--ease) forwards;
}
.lightbox__stage { margin: 0; max-width: 100%; max-height: 100%; }
.lightbox__stage img {
    max-width: min(90vw, 1400px);
    max-height: 80vh;
    border-radius: var(--r-sm);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.lightbox__counter {
    text-align: center;
    color: rgba(255,255,255,0.7);
    margin-top: 12px;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    width: 48px; height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    display: grid; place-items: center;
    transition: background 120ms;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255,255,255,0.18); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev  { left:  28px; top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 28px; top: 50%; transform: translateY(-50%); }

@media (max-width: 540px) {
    .lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .lightbox__prev, .lightbox__next { width: 40px; height: 40px; }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
}

/* ============================== 15c. LEGAL PAGES ============================== */
.legal-page { padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 8vw, 100px); }
.legal-page__inner { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.legal-page__head {
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--c-line);
}
.legal-page__head h1 {
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    margin: 0 0 8px 0;
    font-weight: 600;
}
.legal-page__updated { color: var(--c-muted); font-size: 0.86rem; margin: 0; }
.legal-page__content {
    color: var(--c-ink);
    font-size: 1rem;
    line-height: 1.75;
}
.legal-page__content h2 {
    font-size: 1.18rem;
    margin: 32px 0 12px 0;
    color: var(--c-ink);
    font-family: var(--f-serif);
    font-weight: 600;
}
.legal-page__content h2:first-child { margin-top: 8px; }
.legal-page__content p,
.legal-page__content li {
    color: var(--c-ink-soft);
}
.legal-page__content ul {
    padding-left: 20px;
    margin: 0 0 16px 0;
}
.legal-page__content ul li { margin: 4px 0; }
.legal-page__content a {
    color: var(--c-gold-2);
    text-decoration: none;
    border-bottom: 1px solid rgba(181, 138, 54, 0.4);
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.legal-page__content a:hover { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.legal-page__content strong { color: var(--c-ink); }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 22px;
    font-size: 0.95rem;
}
.legal-table th, .legal-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--c-line-soft);
    vertical-align: top;
}
.legal-table thead th {
    background: var(--c-bg-2);
    color: var(--c-ink);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom-color: var(--c-line);
}

/* ============================== 15d. COOKIE CONSENT BANNER ============================== */
.cookie-banner[hidden] { display: none !important; }
.cookie-banner {
    position: fixed;
    left: 22px; right: 22px;
    bottom: 22px;
    z-index: 70;
    max-width: 640px;
    margin: 0 auto;
    background: #0c1a2a;
    color: #fff;
    border-radius: var(--r-md);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    border-top: 3px solid var(--c-gold);
    padding: 18px 22px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
}
.cookie-banner__copy strong {
    display: block;
    font-family: var(--f-serif);
    font-size: 1rem;
    margin-bottom: 4px;
    color: #fff;
    font-weight: 600;
}
.cookie-banner__copy p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
}
.cookie-banner__link {
    color: var(--c-gold);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
    white-space: nowrap;
}
.cookie-banner__link:hover { color: #fff; }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-banner__btn {
    border: 0;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cookie-banner__btn--reject {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.cookie-banner__btn--reject:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.cookie-banner__btn--accept {
    background: var(--c-gold);
    color: var(--c-ink);
}
.cookie-banner__btn--accept:hover { background: #cb9c40; }

/* "Més informació" rendered as a button (so it doesn't navigate away). */
.cookie-banner__link {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--c-gold);
    text-decoration: underline;
    text-decoration-color: rgba(181,138,54,0.4);
    text-underline-offset: 3px;
    font: inherit;
    font-weight: 600;
    padding: 0;
    margin-left: 4px;
    white-space: nowrap;
}
.cookie-banner__link:hover { color: #fff; text-decoration-color: #fff; }

@media (max-width: 720px) {
    .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; }
    .cookie-banner__inner { grid-template-columns: 1fr; gap: 12px; }
    .cookie-banner__actions { justify-content: stretch; flex-direction: column; }
    .cookie-banner__btn { width: 100%; }
}

/* ============================== 15e. COOKIE PREFERENCES MODAL ============================== */
.cookie-prefs[hidden] { display: none !important; }
.cookie-prefs__panel {
    width: min(700px, 100%);
    max-height: 92vh;
}
.cookie-prefs__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 18px 0 14px;
}
.cookie-prefs__cat {
    background: var(--c-bg-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    padding: 14px 16px;
}
.cookie-prefs__cat header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.cookie-prefs__cat h3 {
    font-family: var(--f-serif);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--c-ink);
}
.cookie-prefs__cat p {
    color: var(--c-ink-soft);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 4px 0;
}
.cookie-prefs__cat code {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.78rem;
    color: var(--c-gold-2);
    font-family: 'Inter', monospace;
    display: inline-block;
    margin-top: 4px;
}
.cookie-prefs__cat.is-essential { border-color: var(--c-success); }
.cookie-prefs__cat.is-disabled { opacity: 0.7; }
.cookie-prefs__pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--c-line);
    color: var(--c-ink-soft);
    flex-shrink: 0;
}
.cookie-prefs__pill.is-on  { background: var(--c-success); color: #fff; }
.cookie-prefs__pill.is-off { background: var(--c-line); color: var(--c-muted); }
.cookie-prefs__legal {
    margin: 4px 0 14px 0;
    font-size: 0.86rem;
}
.cookie-prefs__legal a {
    color: var(--c-gold-2);
    text-decoration: none;
    font-weight: 600;
}
.cookie-prefs__legal a:hover { color: var(--c-gold); }
.cookie-prefs__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid var(--c-line-soft);
}
.cookie-prefs__actions .btn { flex: 1 1 auto; min-width: 140px; justify-content: center; }
.cookie-prefs__actions .btn--primary { flex: 2 1 auto; }

@media (max-width: 540px) {
    .cookie-prefs__actions { flex-direction: column; }
    .cookie-prefs__actions .btn { width: 100%; }
}

/* ============================== 16. FOOTER ============================== */
.site-footer {
    background: #0c1a2a;
    color: #cbd2dc;
    padding: 64px 0 0;
    position: relative;
}
.site-footer::before {
    /* a thin gold accent strip across the top */
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--c-gold), var(--c-finques));
}
.site-footer h3 {
    color: #fff;
    font-family: var(--f-sans);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 14px 0;
}
.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
}
.site-footer__brand img { height: 50px; filter: brightness(0) invert(1) opacity(0.92); margin-bottom: 12px; }
.site-footer__brand p { color: rgba(255, 255, 255, 0.6); font-size: 0.92rem; max-width: 32ch; }

.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--c-gold); }
.site-footer__legal { list-style: none; padding: 0; margin: 0; }
.site-footer__legal li { margin-bottom: 8px; font-size: 0.92rem; }

.site-footer__base {
    max-width: var(--container);
    margin: 56px auto 0;
    padding: 22px var(--gutter);
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.site-footer__admin { display: inline-flex; align-items: center; gap: 6px; }
.site-footer__admin-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.site-footer__admin-link:hover {
    color: var(--c-ink);
    background: var(--c-gold);
    border-color: var(--c-gold);
}

@media (max-width: 720px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ============================== 17. ERROR PAGES ============================== */
.error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--c-bg);
    padding: 24px;
    margin: 0;
}
.error-card {
    max-width: 560px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 56px 40px;
    text-align: center;
    box-shadow: var(--shadow-3);
}
.error-card__code {
    color: var(--c-gold);
    font-family: var(--f-serif);
    font-size: 3.2rem;
    margin: 0 0 6px 0;
    line-height: 1;
}
.error-card__trace {
    text-align: left;
    background: var(--c-bg);
    border-radius: var(--r-sm);
    padding: 14px;
    margin-top: 24px;
    font-size: 0.78rem;
    overflow: auto;
    max-height: 320px;
    border: 1px solid var(--c-line);
}

/* ============================== 18. RESPONSIVE NAV ============================== */
@media (max-width: 820px) {
    .site-header__inner {
        grid-template-columns: auto 1fr;
        row-gap: 10px;
    }
    .site-nav {
        grid-column: 1 / -1;
        order: 3;
        justify-content: center;
        gap: 16px;
        font-size: 0.9rem;
        flex-wrap: wrap;
    }
    .site-header__actions { justify-self: end; }
}

/* ============================== 18b. NAV BURGER + MOBILE DRAWER ============================== */
.nav-burger {
    display: none;       /* Hidden on desktop; shown via media query below. */
    width: 42px; height: 42px;
    border: 1px solid var(--c-line);
    background: #fff;
    border-radius: var(--r-sm);
    cursor: pointer;
    padding: 0;
    align-items: center; justify-content: center;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}
.nav-burger span {
    display: block;
    width: 18px; height: 2px;
    background: var(--c-ink);
    border-radius: 1px;
    transition: transform 200ms var(--ease), opacity 160ms;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav[hidden] { display: none !important; }
.mobile-nav {
    display: none;       /* Replaced with grid in the @media block below. */
    background: #fff;
    border-top: 1px solid var(--c-line);
    padding: 12px var(--gutter) max(16px, env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    gap: 4px;
    animation: drawer-down 180ms var(--ease);
}
@keyframes drawer-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.mobile-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 8px;
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-line-soft);
    font-weight: 500;
    text-decoration: none;
    min-height: 48px;
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav__finques { color: var(--c-finques) !important; font-style: italic; }
.mobile-nav__phone {
    background: var(--c-gold);
    color: #fff !important;
    border-radius: var(--r-sm);
    margin-top: 6px;
    padding: 14px !important;
    border-bottom: 0 !important;
    justify-content: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Sticky CTA + cookie banner: keep clear of the iPhone home bar / Android nav. */
.sticky-cta { bottom: max(22px, env(safe-area-inset-bottom)); }
.cookie-banner { bottom: max(22px, env(safe-area-inset-bottom)); }

/* ============================== 19. MOBILE SWEEP — strong friendly defaults ============================== */
/* CTA 2026-05-06 — consolidate fixes so the whole site reads correctly on phones. */

/* Phone-only: enable the hamburger menu and hide the inline nav. */
@media (max-width: 720px) {
    .site-nav { display: none !important; }
    .nav-burger { display: inline-flex !important; }
    .mobile-nav:not([hidden]) { display: grid !important; }
}

/* Tablet (≤ 820px) ----------------------------------------------------- */
@media (max-width: 820px) {
    /* Logos: never let the wordmark overflow the brand link. */
    .brand__logo { height: 38px; }

    /* Brand-switch (Finques pill): only the icon on small screens. */
    .brand-switch__text { display: none; }
    .brand-switch { padding: 8px 12px; }

    /* Section heads: shrink heroes' inner paddings. */
    .hero { padding: clamp(60px, 8vw, 90px) var(--gutter) clamp(50px, 6vw, 80px); }
    .services-hero, .finques-hero {
        padding: clamp(50px, 7vw, 90px) var(--gutter) clamp(40px, 6vw, 70px);
    }

    /* Sticky CTA: smaller on tablets so it doesn't dominate. */
    .sticky-cta { font-size: 0.92rem; padding: 12px 18px 12px 14px; }

    /* Property detail: stack hero gallery thumbs as a strip. */
    .property-gallery { grid-template-columns: 1fr; }
    .property-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
    .finques-detail__keystats { grid-template-columns: repeat(2, 1fr); }
    .finques-detail__keystats li { border-right: 0; border-bottom: 1px solid var(--c-line-soft); padding-bottom: 12px; }
    .finques-detail__keystats li:last-child,
    .finques-detail__keystats li:nth-last-child(2) { border-bottom: 0; }

    /* Inquiry card: same width as content on small screens. */
    .finques-detail__aside { position: static !important; margin-top: 16px; }
    .inquiry-card { padding: 20px; }

    /* Modal panels: full-bleed feel without losing breathing room. */
    .modal__panel { width: min(560px, calc(100% - 16px)); padding: 22px 18px; max-height: 96vh; }
    .modal__header h2 { font-size: 1.16rem; }
    .modal__sub { font-size: 0.84rem; }

    /* Forms: bigger touch targets. */
    input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
    input[type="password"], select, textarea {
        font-size: 1rem; /* prevent iOS zoom on focus */
    }
    .btn { padding: 12px 18px; font-size: 0.95rem; }
    .btn--3d { padding: 16px 22px; }

    /* Footer columns: stack to 2 cols. */
    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
    .site-footer__brand { grid-column: 1 / -1; }
    .site-footer__base { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Phone (≤ 540px) ------------------------------------------------------ */
@media (max-width: 540px) {
    :root { --gutter: 16px; }

    /* Site header: brand pill smaller, lang switch slightly compact. */
    .site-header__inner { padding: 10px var(--gutter); gap: 12px; }
    .brand__logo { height: 34px; }
    .lang-switch__item { padding: 5px 9px; font-size: 0.7rem; }

    /* Hero: tighter typography. */
    .hero__title { font-size: clamp(2rem, 8vw, 2.6rem); margin-bottom: 14px; }
    .hero__sub   { font-size: 1rem; margin-bottom: 24px; }
    .hero__cta   { gap: 8px; }
    .hero__cta .btn { width: 100%; }
    .hero { padding: clamp(48px, 9vw, 80px) var(--gutter) clamp(40px, 7vw, 60px); }

    /* Section paddings shrink. */
    .services-summary, .finques-teaser, .values, .contact, .immigration,
    .imm-how, .imm-list, .finques-results { padding: 56px 0 !important; }
    .section-head { margin-bottom: 32px; }

    /* Cards: keep hover states usable, single column. */
    .services__grid,
    .imm-list__grid,
    .finques__grid { grid-template-columns: 1fr; }

    /* Property detail */
    .property-gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
    .finques-detail__section { padding: 18px 16px; }
    .finques-detail__head h1 { font-size: clamp(1.3rem, 6vw, 1.8rem); }
    .finques-detail__price { font-size: clamp(1.4rem, 5vw, 1.8rem); }

    /* Contact section */
    .contact__inner { gap: 24px; }
    .contact__details { grid-template-columns: 1fr; gap: 8px; }
    .contact-card { padding: 12px; }

    /* Finques teaser visual */
    .finques-teaser__inner { grid-template-columns: 1fr !important; gap: 20px; }
    .finques-teaser__visual { transform: none !important; }

    /* Footer */
    .site-footer__inner { grid-template-columns: 1fr; gap: 22px; padding-top: 8px; }
    .site-footer h3 { margin-bottom: 8px; }

    /* Sticky CTA: text shorter, larger touch area. */
    .sticky-cta { bottom: 14px; padding: 12px 16px; font-size: 0.9rem; }
    .sticky-cta span { display: inline; }

    /* Cookie banner stacks. */
    .cookie-banner__copy strong { font-size: 0.95rem; }
    .cookie-banner__copy p      { font-size: 0.82rem; }

    /* Lightbox controls smaller. */
    .lightbox__close, .lightbox__prev, .lightbox__next { width: 36px; height: 36px; font-size: 1.4rem; }

    /* Admin pages: keep the table responsive. */
    .admin-table--list { display: block; overflow-x: auto; }

    /* Headings tighten across the board. */
    h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
    h3 { font-size: 1.1rem; }
}

/* Very small (≤ 380px) ------------------------------------------------- */
@media (max-width: 380px) {
    .lang-switch__item { padding: 4px 7px; font-size: 0.66rem; }
    .property-gallery__thumbs { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
    }
    html { scroll-behavior: auto; }
}