/* ==========================================================================
   Dream City Real Estate — hoja de estilos principal
   Tokens tomados de assets/Guideline.pdf
   ========================================================================== */

:root {
    /* Colores */
    --color-title: #002991;      /* Títulos (Cinzel) */
    --color-body:  #515151;      /* Texto de desarrollo (Outfit) */

    /* Degradados oficiales */
    --grad-gold: linear-gradient(90deg, #925e08 0%, #c19436 33%, #f0c964 66%, #925e08 100%);
    --grad-blue: linear-gradient(90deg, #001e65 0%, #002a93 55%, #001849 100%);

    /* Tipografías */
    --font-title: 'Cinzel', serif;
    --font-body:  'Outfit', sans-serif;

    /* Espaciado entre secciones */
    --section-gap: 80px;

    /* Layout */
    --navbar-height: 72px;
    --container: 1560px;
}

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

html {
    scroll-behavior: auto;
}

body {
    font-family: var(--font-body);
    color: var(--color-body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Confirmación de encuesta en Home ---------- */
.survey-thanks-modal {
    position: fixed;
    z-index: 1500;
    top: calc(var(--navbar-height) + 20px);
    left: 50%;
    width: min(92vw, 460px);
    transform: translateX(-50%);
    filter: drop-shadow(0 18px 30px rgba(0, 25, 73, 0.2));
    animation: survey-thanks-enter 420ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.survey-thanks-modal.is-leaving {
    animation: survey-thanks-leave 280ms ease-in both;
}

.survey-thanks-modal__card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    padding: 18px 18px 19px;
    border: 1px solid rgba(193, 148, 54, 0.55);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
}

.survey-thanks-modal__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--grad-blue);
    box-shadow: 0 0 0 4px rgba(193, 148, 54, 0.18);
    font-size: 1.25rem;
    font-weight: 700;
}

.survey-thanks-modal__copy h2 {
    margin-bottom: 3px;
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    line-height: 1.3;
}

.survey-thanks-modal__copy p {
    color: var(--color-body);
    font-size: 0.9rem;
    line-height: 1.4;
}

.survey-thanks-modal__close {
    align-self: start;
    border: 0;
    background: transparent;
    color: #667085;
    cursor: pointer;
    font: 400 1.5rem/1 var(--font-body);
    transition: color 160ms ease, transform 160ms ease;
}

.survey-thanks-modal__close:hover,
.survey-thanks-modal__close:focus-visible {
    color: var(--color-title);
    transform: scale(1.08);
}

.survey-thanks-modal__timer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    transform-origin: left;
    background: var(--grad-gold);
    animation: survey-thanks-timer 5s linear both;
}

@keyframes survey-thanks-enter {
    from { opacity: 0; transform: translate(-50%, -18px) scale(0.97); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes survey-thanks-leave {
    to { opacity: 0; transform: translate(-50%, -12px) scale(0.98); }
}

@keyframes survey-thanks-timer {
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .survey-thanks-modal,
    .survey-thanks-modal.is-leaving,
    .survey-thanks-modal__timer {
        animation-duration: 1ms;
    }
}

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

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3, h4 {
    font-family: var(--font-title);
    color: var(--color-title);
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/*
 * Composición tipográfica global:
 * - títulos, etiquetas y acciones cortas equilibran todas sus líneas;
 * - texto de lectura prioriza una última línea visualmente limpia.
 */
button,
[role="button"],
legend,
.field__label,
.custom-filter-field > span,
.listings__caption,
.lomas-hero__eyebrow,
.lomas-option__title,
.lomas-option__cta,
.property-card__location,
.property-card__specs li,
.results-map__eyebrow,
.detail__share-label,
.news-card__share-label,
.contact__items li,
.footer__col > a {
    text-wrap: balance;
}

p,
blockquote,
figcaption,
.rich-text {
    text-wrap: pretty;
}

/* Línea dorada decorativa (bajo navbar y hero) */
.gold-line {
    height: 5px;
    background: var(--grad-gold);
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--grad-blue);
}

.navbar__inner {
    max-width: var(--container);
    margin: 0 auto;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

.navbar__nav {
    display: flex;
    align-items: center;
    gap: 44px;
}

/* El menú en español necesita más ancho por sus etiquetas más largas. */
@media (min-width: 1500px) {
    html[lang="es"] .navbar__inner {
        max-width: 1800px;
    }

    html[lang="es"] .navbar__nav {
        width: 100%;
        max-width: 1640px;
        justify-content: space-between;
        gap: clamp(10px, 0.9vw, 28px);
    }

    html[lang="es"] .navbar__link,
    html[lang="es"] .navbar__lang {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.navbar__link {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    padding: 6px 2px;
    position: relative;
    transition: color 0.25s ease;
}

.navbar__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--grad-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.navbar__link:hover::after,
.navbar__link--active::after {
    transform: scaleX(1);
}

.navbar__link:hover {
    color: #f0c964;
}

.navbar__dropdown {
    position: relative;
}

.navbar__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.navbar__modal-trigger {
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.navbar__dropdown-toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    transition: transform 0.25s ease;
}

.navbar__dropdown--active > .navbar__link::after,
.navbar__dropdown:focus-within > .navbar__link::after {
    transform: scaleX(1);
}

.navbar__dropdown-menu {
    position: absolute;
    top: calc(100% + 17px);
    left: 50%;
    width: 310px;
    padding: 9px;
    border: 1px solid rgba(240, 201, 100, 0.45);
    border-radius: 16px;
    background: rgba(3, 25, 73, 0.98);
    box-shadow: 0 22px 52px rgba(0, 12, 43, 0.3);
    transform: translate(-50%, -8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.navbar__dropdown-menu::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 18px;
}

.navbar__dropdown-menu a,
.navbar__dropdown-menu button {
    display: block;
    width: 100%;
    padding: 13px 15px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.navbar__dropdown-menu > * + * {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar__dropdown-menu span,
.navbar__dropdown-menu small {
    display: block;
}

.navbar__dropdown-menu span {
    font-family: var(--font-title);
    font-size: 0.92rem;
    letter-spacing: 0.025em;
}

.navbar__dropdown-menu small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.76rem;
}

.navbar__dropdown-menu a:hover,
.navbar__dropdown-menu a:focus-visible,
.navbar__dropdown-menu button:hover,
.navbar__dropdown-menu button:focus-visible,
.navbar__dropdown-menu a[aria-current="page"] {
    color: #f4d47c;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.navbar__dropdown:hover .navbar__dropdown-menu,
.navbar__dropdown:focus-within .navbar__dropdown-menu,
.navbar__dropdown.is-open .navbar__dropdown-menu {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

.navbar__dropdown.is-open .navbar__dropdown-toggle svg,
.navbar__dropdown:hover .navbar__dropdown-toggle svg {
    transform: rotate(180deg);
}

.navbar__link--qualified {
    border: 1px solid rgba(240, 201, 100, 0.72);
    border-radius: 999px;
    padding: 9px 18px;
    color: #f6d77e;
}

.navbar__link--qualified::after { display: none; }

.navbar__link--qualified:hover,
.navbar__link--qualified.navbar__link--active {
    color: #071b33;
    background: var(--grad-gold);
}

/* Selector de idioma */
.navbar__lang {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 1.125rem;
    margin-left: clamp(12px, 2vw, 32px);
    padding-bottom: 4px;
    border-bottom: 2px solid #fff;
}

.navbar__flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
}

/* Botón "VIP Benefits" (dorado, a la derecha del idioma) */
.navbar__vip {
    flex-shrink: 0;
    margin-left: clamp(8px, 1.2vw, 20px);
    padding: 9px 20px;
    border-radius: 8px;
    background: var(--grad-gold);
    background-size: 160% 100%;
    background-position: 0 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(80, 48, 0, 0.35);
    box-shadow: 0 4px 14px rgba(146, 94, 8, 0.35);
    transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.navbar__vip:hover,
.navbar__vip:focus-visible,
.navbar__vip--active {
    background-position: 100% 0;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(146, 94, 8, 0.5);
    outline: none;
}

/* Con el botón VIP el menú es más largo: los enlaces nunca se parten en dos
   líneas y el espacio entre ellos se adapta al ancho disponible. */
@media (min-width: 1101px) {
    .navbar__nav { gap: clamp(10px, 1.4vw, 36px); }
    html[lang="en"] .navbar__nav > * { flex-shrink: 0; }
    html[lang="en"] .navbar__link { white-space: nowrap; }
}

@media (max-width: 1280px) and (min-width: 1101px) {
    .navbar__link { font-size: 0.92rem; }
    .navbar__lang { margin-left: 4px; font-size: 0.92rem; }
    .navbar__vip { margin-left: 4px; padding: 7px 12px; font-size: 0.85rem; }
}

/* Botón hamburguesa (oculto en escritorio) */
.navbar__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
}

.navbar__toggle span {
    width: 26px;
    height: 2px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.home-fold {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(101vh - var(--navbar-height) - 5px);
    height: calc(101svh - var(--navbar-height) - 5px);
}

.hero {
    position: relative;
    height: min(calc(100vh - var(--navbar-height)), 48.7vw);
    min-height: 420px;
}

.home-fold .hero {
    height: auto;
    min-height: 0;
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__logo {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(200px, 18vw, 340px);
    filter: drop-shadow(0 4px 18px rgba(0, 24, 73, 0.35));
    animation: hero-logo-in 1.1s ease both;
}

@keyframes hero-logo-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.hero__line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* ==========================================================================
   FRANJA "WE TAKE CARE OF YOU"
   ========================================================================== */
.care {
    position: relative;
    background: linear-gradient(115deg, #001e65 0%, #002a93 48%, #001849 100%);
    text-align: center;
    padding: 27px 24px 33px;
    /* línea blanca entre la línea dorada del hero y el azul */
    /* border-top: 6px solid #fff; */
}

.care__script {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    color: #fff;
    display: inline-block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    padding: 0 34px 2px;
    margin-bottom: 10px;
}

.care__title {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
}

.care__wave {
    width: 110px;
    margin: 18px auto 0;
}

.care__line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* línea blanca entre el azul y la línea dorada de cierre */
    border-top: 6px solid #fff;
}

/* ==========================================================================
   BUSCADOR "FIND YOUR IDEAL PROPERTY"
   ========================================================================== */
.search {
    padding: var(--section-gap) 24px;
}

.search__card {
    max-width: 940px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #c19436;
    border-radius: 22px;
    box-shadow: 0 10px 40px rgba(0, 24, 73, 0.06);
    padding: 56px 48px 72px;
    text-align: center;
}

.search__title {
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.search__wave {
    width: 110px;
    margin: 14px auto 40px;
}

/* Tabs de operación */
.search__tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 44px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.search__tab {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-title);
    background: #fff;
    border: 1.5px solid var(--color-title);
    border-radius: 8px;
    padding: 15px 30px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.search__tab:hover {
    transform: translateY(-2px);
}

.search__tab.is-active {
    background: var(--grad-blue);
    border-color: transparent;
    color: #fff;
}

/* Abre el modal de asistencia de alquiler: se rellena al pasar el cursor */
.search__tab--rental:hover,
.search__tab--rental:focus-visible {
    background: var(--grad-blue);
    border-color: transparent;
    color: #fff;
}

.search__tab--rental:focus-visible {
    outline: 3px solid rgba(0, 41, 145, 0.15);
    outline-offset: 3px;
}

.search__custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 15px 30px;
    color: var(--color-title);
    background: #fff;
    border: 1.5px solid #c19436;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.search__custom:hover,
.search__custom:focus-visible {
    color: #fff;
    background: #c19436;
    box-shadow: 0 8px 22px rgba(193, 148, 54, 0.22);
    transform: translateY(-2px);
}

.search__custom:focus-visible {
    outline: 3px solid rgba(193, 148, 54, 0.3);
    outline-offset: 3px;
}

.search__clear-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 22px;
    color: #65718a;
    background: #f7f8fb;
    border: 1.5px solid #c6d1e7;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.search__clear-filter:hover,
.search__clear-filter:focus-visible {
    color: var(--color-title);
    background: #eef3ff;
    border-color: #8da3d1;
    transform: translateY(-2px);
}

.search__clear-filter:focus-visible {
    outline: 3px solid rgba(0, 41, 145, 0.15);
    outline-offset: 3px;
}

/* Campos + botón de búsqueda */
.search__fields {
    display: flex;
    justify-content: center;
}

.search__field select {
    appearance: none;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-body);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23515151' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center;
    border: 1px solid #8a8a8a;
    border-right: 0;
    height: 58px;
    width: 240px;
    padding: 0 44px 0 20px;
    cursor: pointer;
}

.search__field:first-child select {
    border-radius: 8px 0 0 8px;
}

.search__submit {
    display: grid;
    place-items: center;
    width: 70px;
    height: 58px;
    background: var(--grad-blue);
    border: 0;
    border-radius: 0 8px 8px 0;
    color: #fff;
    cursor: pointer;
    transition: filter 0.25s ease;
}

.search__submit:hover {
    filter: brightness(1.25);
}

.search__submit svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   MODAL BUSCADOR POR PASOS (Opción 2): Tipo → Ubicación
   ========================================================================== */
.opsearch {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.opsearch[hidden] { display: none; }

.opsearch__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 15, 45, 0.55);
    backdrop-filter: blur(3px);
}

.opsearch__box {
    position: relative;
    width: min(680px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px 44px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 20, 60, 0.35);
    animation: opsearch-in 0.25s ease;
}

@keyframes opsearch-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.opsearch__close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-title);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.opsearch__close:hover { background: #eef2fb; }

.opsearch__back {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-title);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.opsearch__back:hover { text-decoration: underline; }

.opsearch__intro {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #b08a3c;
    margin-bottom: 6px;
}

.opsearch__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-title);
    margin-bottom: 10px;
}

.opsearch__wave {
    display: block;
    width: 120px;
    margin: 0 auto 28px;
}

.opsearch__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.opsearch__option {
    flex: 0 1 180px;
    font-family: var(--font-body);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-title);
    background: #fff;
    border: 1.5px solid var(--color-title);
    border-radius: 10px;
    padding: 20px 14px;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, transform 0.15s ease, box-shadow 0.22s ease;
}

.opsearch__option:hover {
    background: var(--grad-blue);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 30, 101, 0.25);
}

.opsearch__option--all {
    flex-basis: 100%;
    border-style: dashed;
}

/* Zona sin inventario: abre el formulario de demanda en vez de los resultados */
.opsearch__option--request {
    border-style: dashed;
    border-color: #9fb1d5;
}

.opsearch__option--request small {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #7a879f;
}

.opsearch__option--request:hover small,
.opsearch__option--request:focus-visible small {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 560px) {
    .opsearch__box { padding: 44px 22px 32px; }
    .opsearch__option { flex-basis: 140px; }
}

/* Paso de demanda: los otros pasos son botones centrados, pero un formulario
   pide etiquetas a la izquierda y algo más de ancho. Si el navegador no soporta
   :has(), la caja se queda en su ancho normal y el formulario sigue usable. */
.opsearch__box:has(.opsearch__step--request:not([hidden])) {
    width: min(860px, 100%);
    text-align: left;
}

.opsearch__step--request [data-area-header] {
    text-align: center;
}

.opsearch__request-intro {
    max-width: 52ch;
    margin: 0 auto 4px;
    color: var(--color-body);
    font-size: 0.96rem;
}

.opsearch__step--request .opsearch__wave {
    margin-bottom: 20px;
}

/* Paso 3 del modal: rango de precio */
.opsearch__price {
    max-width: 420px;
    margin: 0 auto;
}

.opsearch__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.opsearch__submit {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--grad-blue);
    border: 0;
    border-radius: 10px;
    padding: 15px 46px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.22s ease;
}

.opsearch__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 30, 101, 0.25);
}

.opsearch__skip {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-body);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}

.opsearch__skip:hover { color: var(--color-title); }

/* ==========================================================================
   FILTRO PERSONALIZADO
   ========================================================================== */
.custom-filter-modal {
    position: fixed;
    inset: 0;
    z-index: 1010;
    display: grid;
    place-items: center;
    padding: 24px;
}

.custom-filter-modal[hidden] {
    display: none;
}

.custom-filter-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 15, 45, 0.64);
    backdrop-filter: blur(5px);
}

.custom-filter-modal__panel {
    position: relative;
    width: min(1120px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    padding: 44px 46px 38px;
    background:
        radial-gradient(circle at 100% 0, rgba(240, 201, 100, 0.14), transparent 28%),
        #fff;
    border: 1px solid rgba(193, 148, 54, 0.72);
    border-radius: 20px;
    box-shadow: 0 28px 85px rgba(0, 20, 60, 0.38);
    animation: custom-filter-in 0.28s ease both;
}

@keyframes custom-filter-in {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.custom-filter-modal__close {
    position: absolute;
    top: 16px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--color-title);
    background: rgba(238, 242, 251, 0.8);
    border: 0;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.custom-filter-modal__close:hover {
    background: #e2e8f7;
    /* transform: rotate(5deg); */
}

.custom-filter-modal__header {
    max-width: 700px;
    margin: 0 auto 32px;
    text-align: center;
}

.custom-filter-modal__eyebrow {
    margin-bottom: 6px;
    color: #a87618;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.custom-filter-modal__header h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    text-transform: uppercase;
}

.custom-filter-modal__header img {
    width: 92px;
    margin: 10px auto 12px;
}

.custom-filter-modal__header > p:last-child {
    font-size: 0.98rem;
}

.custom-filter-form__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 14px;
}

.custom-filter-field {
    min-width: 0;
}

.custom-filter-field--wide,
.custom-filter-field--segments {
    grid-column: span 2;
}

.custom-filter-field--price {
    grid-column: 1 / -1;
}

.custom-filter-field > span,
.custom-filter-field > legend {
    display: block;
    margin-bottom: 7px;
    color: #354361;
    font-size: 0.88rem;
    font-weight: 600;
}

.custom-filter-field--price {
    min-width: 0;
    border: 0;
}

.custom-filter-field--segments {
    margin: 0;
    padding: 0;
    border: 0;
}

.custom-filter-segments {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 48px;
    overflow: hidden;
    border: 1px solid #9aa6bd;
    border-radius: 10px;
}

.custom-filter-segments label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.custom-filter-segments label + label {
    border-left: 1px solid #9aa6bd;
}

.custom-filter-field .custom-filter-segments input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.custom-filter-segments span {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 46px;
    padding: 7px 5px;
    color: #354361;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.custom-filter-segments label:first-child span {
    border-radius: 8px 0 0 8px;
}

.custom-filter-segments label:last-child span {
    border-radius: 0 8px 8px 0;
}

.custom-filter-segments label:not(:has(input:disabled)):hover span {
    background: #f1f5ff;
}

.custom-filter-segments input:checked + span {
    color: var(--color-title);
    background: #eef4ff;
    box-shadow: inset 0 0 0 2px var(--color-title);
}

.custom-filter-segments input:focus-visible + span {
    outline: 3px solid rgba(0, 41, 145, 0.2);
    outline-offset: -3px;
}

.custom-filter-segments label:has(input:disabled) {
    cursor: not-allowed;
}

.custom-filter-segments input:disabled + span {
    color: #929bad;
    background: #f4f6fa;
}

.custom-filter-field--segments:has(.custom-filter-exact input:checked) .custom-filter-segments__plus {
    display: none;
}

.custom-filter-segments__plus {
    font-style: normal;
}

.custom-filter-exact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #52617c;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.custom-filter-field .custom-filter-exact input {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--color-title);
}

.custom-filter-exact:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-filter-field select,
.custom-filter-field input {
    width: 100%;
    height: 48px;
    padding: 0 42px 0 15px;
    color: #354361;
    background-color: #fff;
    border: 1px solid #c6d1e7;
    border-radius: 9px;
    font-family: var(--font-body);
    font-size: 0.94rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-filter-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23002991' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.custom-filter-field select:focus,
.custom-filter-field input:focus {
    outline: none;
    border-color: var(--color-title);
    box-shadow: 0 0 0 3px rgba(0, 41, 145, 0.1);
}

.custom-filter-field select:disabled {
    color: #7b8498;
    background-color: #f3f5f9;
    cursor: not-allowed;
}

.custom-filter-form__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e8edf6;
}

.custom-filter-form__count {
    margin-right: auto;
    color: #65718a;
    font-size: 0.9rem;
    font-weight: 500;
}

.custom-filter-form__reset,
.custom-filter-form__submit {
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 9px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.custom-filter-form__reset {
    color: var(--color-title);
    background: #fff;
    border: 1px solid #aab8d4;
}

.custom-filter-form__submit {
    color: #fff;
    background: var(--grad-blue);
    border: 0;
    box-shadow: 0 8px 20px rgba(0, 30, 101, 0.2);
}

.custom-filter-form__reset:hover,
.custom-filter-form__submit:hover {
    transform: translateY(-2px);
}

@media (max-width: 1100px) and (min-width: 821px) {
    .navbar__nav { gap: 10px; }
    .navbar__link { font-size: 1rem; }
    .navbar__link--qualified { padding: 8px 13px; }
    .navbar__lang { margin-left: 4px; font-size: 1rem; }
}

@media (min-width: 861px) {
    .custom-filter-form__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .custom-filter-form__grid > .custom-filter-field {
        grid-column: span 3;
    }

    .custom-filter-form__grid > .custom-filter-field--wide {
        grid-column: span 6;
    }

    .custom-filter-form__grid > .custom-filter-field--price,
    .custom-filter-form__grid > .custom-filter-field--segments {
        grid-column: span 4;
    }
}

/* ==========================================================================
   BUSCADOR POR RESIDENCIALES (modal del navbar)
   ========================================================================== */
.developments-modal {
    position: fixed;
    inset: 0;
    z-index: 1030;
    display: grid;
    place-items: center;
    padding: 24px;
}

.developments-modal[hidden] {
    display: none;
}

.developments-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(47, 89, 178, 0.2), transparent 38%),
        rgba(0, 12, 39, 0.76);
    backdrop-filter: blur(7px);
}

.developments-modal__panel {
    position: relative;
    width: min(1180px, 100%);
    max-height: 92vh;
    max-height: calc(100dvh - 48px);
    padding: 54px 46px 50px;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 255, 0.98)),
        #fff;
    border: 1px solid rgba(216, 173, 67, 0.82);
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0, 15, 55, 0.48);
    animation: custom-filter-in 0.28s ease both;
}

.developments-modal__panel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--grad-gold);
}

.developments-modal__close {
    position: absolute;
    top: 16px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--color-title);
    background: #edf1fa;
    border: 0;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.developments-modal__close:hover,
.developments-modal__close:focus-visible {
    color: #fff;
    background: var(--color-title);
    outline: none;
    transform: rotate(5deg);
}

.developments-modal__header {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
}

.developments-modal__header h2 {
    color: var(--color-title);
    font-size: clamp(1.85rem, 4vw, 2.7rem);
    text-transform: uppercase;
}

.developments-modal__header img {
    width: 108px;
    margin: 13px auto 0;
}

.developments-modal__categories {
    margin: 0 auto;
}

.developments-modal__category + .developments-modal__category {
    margin-top: 26px;
}

.developments-modal__category h3 {
    margin: 0 0 18px;
    color: #7e5b18;
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-align: center;
    text-transform: uppercase;
}

.developments-modal__rows {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.developments-modal__row {
    display: grid;
    place-items: center;
    flex: 0 1 calc(25% - 9px);
    min-width: 252px;
    min-height: 76px;
    padding: 14px 20px;
    color: #14284d;
    background: #fff;
    border: 1px solid #d5ddec;
    border-radius: 11px;
    box-shadow: 0 7px 18px rgba(7, 35, 82, 0.05);
    font-family: var(--font-body);
    font-size: 1.22rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* Los nombres de residencial siempre en una sola línea. */
.developments-modal__row > span {
    white-space: nowrap;
}

.developments-modal__row + .developments-modal__row {
    border: 1px solid #d5ddec;
}

.developments-modal__row:hover,
.developments-modal__row:focus-visible {
    color: #002991;
    background: #f3f6fc;
    border-color: #9fb1d5;
    outline: none;
}

/* Debajo de esto no caben 4 nombres en una línea (el más largo pide ~235px). */
@media (max-width: 1040px) {
    .developments-modal__panel {
        padding: 54px 34px 50px;
    }

    .developments-modal__row {
        flex-basis: calc(50% - 6px);
    }
}

/* Con los campos más grandes, tres columnas de contacto no entran antes de esto.
   Vale para los dos sitios donde vive el formulario: modal Properties y buscador. */
@media (max-width: 860px) {
    [data-developments-step="request"] .rental-form__grid,
    [data-developments-step="request"] .rental-form__contact .rental-form__grid,
    [data-developments-step="filters"] .rental-form__grid,
    [data-opsearch-step="request"] .rental-form__grid,
    [data-opsearch-step="request"] .rental-form__contact .rental-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    [data-developments-step="request"] .rental-form__actions,
    [data-opsearch-step="request"] .rental-form__actions {
        justify-content: stretch;
    }

    [data-developments-step="request"] .rental-form__submit,
    [data-opsearch-step="request"] .rental-form__submit {
        width: 100%;
    }
}
@media (max-width: 620px) {
    .developments-modal {
        padding: 12px;
    }

    .developments-modal__panel {
        padding: 44px 20px 28px;
    }

    .developments-modal__header {
        margin-bottom: 24px;
    }

    .developments-modal__row {
        flex-basis: 100%;
        min-width: 0;
        min-height: 62px;
        padding: 10px 14px;
    }
}

/* Bajada del paso 1 ("elige una zona") */
.developments-modal__header > p {
    max-width: 560px;
    margin: 14px auto 0;
    color: var(--color-body);
    font-size: 1.02rem;
    line-height: 1.55;
}

/* Cantidad de propiedades, debajo del nombre de la zona */
.developments-modal__count {
    margin-top: 5px;
    color: #7a879f;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.developments-modal__row:hover .developments-modal__count,
.developments-modal__row:focus-visible .developments-modal__count {
    color: #4a5f8a;
}

/* Zonas donde aún no hay inventario: se distinguen del resto con el borde
   discontinuo (igual que "All locations" en el buscador) porque no llevan a un
   listado, sino al formulario de demanda. */
.developments-modal__row--request {
    border-style: dashed;
    border-color: #b9c6de;
    background: #fbfcfe;
}

.developments-modal__count--request {
    color: var(--color-title);
    font-weight: 600;
}

/* Todavía no hay ninguna zona con propiedades publicadas */
.developments-modal__empty {
    margin: 0;
    padding: 26px 20px;
    color: var(--color-body);
    background: #f5f8ff;
    border: 1px dashed #c4d0e8;
    border-radius: 12px;
    text-align: center;
}

/* Salida al paso 2: zonas donde todavía no tenemos inventario */
.developments-modal__elsewhere {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f4;
    text-align: center;
}

.developments-modal__elsewhere p {
    margin: 0;
    color: var(--color-body);
    font-size: 1.2rem;
}

.developments-modal__elsewhere-btn {
    padding: 14px 34px;
    color: #002991;
    background: #fff;
    border: 1.5px solid #002991;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.developments-modal__elsewhere-btn:hover,
.developments-modal__elsewhere-btn:focus-visible {
    color: #fff;
    background: #002991;
    outline: none;
}

/* El mismo botón se usa como enlace en el paso de residenciales */
a.developments-modal__elsewhere-btn {
    display: inline-block;
    text-decoration: none;
}
/* Volver del formulario al listado de zonas */
.developments-modal__back {
    margin-bottom: 10px;
    padding: 0;
    color: #4a5f8a;
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.developments-modal__back:hover,
.developments-modal__back:focus-visible {
    color: #002991;
    outline: none;
}

/* El formulario reutiliza los estilos de .rental-form, pero el panel de este
   modal es más ancho: se centra para que las filas no queden enormes. */
[data-developments-step="request"] .rental-form,
[data-developments-step="request"] .rental-modal__success,
[data-developments-step="filters"] .rental-form {
    max-width: 780px;
    margin: 0 auto;
}

/* Tipografía más grande que en el modal de alquiler, que comparte estas clases.
   Todo va acotado al paso del formulario para no alterar aquel. */
[data-developments-step="request"] .developments-modal__back,
[data-developments-step="filters"] .developments-modal__back {
    font-size: 1.05rem;
}

[data-developments-step="request"] .developments-modal__header > p,
[data-developments-step="filters"] .developments-modal__header > p {
    max-width: 620px;
    font-size: 1.14rem;
}

[data-developments-step="request"] .rental-field > span,
[data-developments-step="filters"] .rental-field > span {
    margin-bottom: 9px;
    font-size: 1.05rem;
}

[data-developments-step="request"] .rental-field select,
[data-developments-step="request"] .rental-field input,
[data-developments-step="request"] .rental-field textarea,
[data-developments-step="filters"] .rental-field select,
[data-developments-step="filters"] .rental-field input {
    height: 54px;
    padding: 0 16px;
    font-size: 1.08rem;
}

[data-developments-step="request"] .rental-field textarea {
    height: auto;
    padding: 14px 16px;
}

[data-developments-step="request"] .rental-field select {
    padding-right: 46px;
}

[data-developments-step="request"] .rental-form__contact legend {
    font-size: 1.22rem;
    /* Cinzel 700 lo carga el layout público: es peso real, no negrita simulada */
    font-weight: 700;
}

[data-developments-step="request"] .rental-form__hint,
[data-developments-step="request"] .rental-form__privacy {
    font-size: 1rem;
}

[data-developments-step="request"] .rental-form__privacy {
    max-width: 460px;
}

[data-developments-step="request"] .rental-form__error {
    font-size: 1.02rem;
}

[data-developments-step="request"] .rental-form__submit {
    min-height: 54px;
    padding: 14px 36px;
    font-size: 1.05rem;
}

/* Coincide con la altura del submit para que Previous / Next se sientan iguales. */
[data-developments-step="request"] .rental-wizard__button {
    min-height: 54px;
}

[data-developments-step="request"] .rental-modal__success i {
    font-size: 3rem;
}

[data-developments-step="request"] .rental-modal__success h3 {
    font-size: 1.65rem;
}

[data-developments-step="request"] .rental-modal__success p {
    font-size: 1.14rem;
}
/* ==========================================================================
   ASISTENCIA DE ALQUILER
   ========================================================================== */
.rental-modal {
    position: fixed;
    inset: 0;
    z-index: 1020;
    display: grid;
    place-items: center;
    padding: 24px;
}

.rental-modal[hidden] {
    display: none;
}

.rental-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 15, 45, 0.64);
    backdrop-filter: blur(5px);
}

.rental-modal__panel {
    position: relative;
    width: min(880px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    padding: 44px 46px 38px;
    background:
        radial-gradient(circle at 100% 0, rgba(240, 201, 100, 0.14), transparent 28%),
        #fff;
    border: 1px solid rgba(193, 148, 54, 0.72);
    border-radius: 20px;
    box-shadow: 0 28px 85px rgba(0, 20, 60, 0.38);
    animation: custom-filter-in 0.28s ease both;
}

.rental-modal__close {
    position: absolute;
    top: 16px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--color-title);
    background: rgba(238, 242, 251, 0.8);
    border: 0;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rental-modal__close:hover {
    background: #e2e8f7;
}

.rental-modal__header {
    max-width: 620px;
    margin: 0 auto 30px;
    text-align: center;
}

.rental-modal__eyebrow {
    margin-bottom: 6px;
    color: #a87618;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.rental-modal__header h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    text-transform: uppercase;
}

.rental-modal__header img {
    width: 92px;
    margin: 10px auto 12px;
}

.rental-modal__header > p:last-child {
    font-size: 0.96rem;
}

.rental-modal__header[hidden],
.rental-form[hidden] {
    display: none;
}

.rental-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Honeypots de los formularios públicos de leads: se ocultan del
   visitante real y solo los bots llegados a rellenarlos los completan. */
.contact__honeypot,
.detail__honeypot,
.survey-fill__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.rental-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
}

.rental-field {
    min-width: 0;
}

.rental-field--notes {
    grid-column: 1 / -1;
}

.rental-field > span {
    display: block;
    margin-bottom: 7px;
    color: #354361;
    font-size: 0.88rem;
    font-weight: 600;
}

.rental-field select,
.rental-field input,
.rental-field textarea {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    color: #354361;
    background-color: #fff;
    border: 1px solid #c6d1e7;
    border-radius: 9px;
    font-family: var(--font-body);
    font-size: 0.94rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rental-field textarea {
    height: auto;
    padding: 12px 15px;
    resize: vertical;
}

.rental-field select {
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23002991' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.rental-field select:focus,
.rental-field input:focus,
.rental-field textarea:focus {
    outline: none;
    border-color: var(--color-title);
    box-shadow: 0 0 0 3px rgba(0, 41, 145, 0.1);
}

.rental-field input.is-invalid {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.rental-form__contact {
    margin-top: 26px;
    padding: 22px 0 0;
    border: 0;
    border-top: 1px solid #e8edf6;
}

.rental-form__contact legend {
    padding: 0;
    color: var(--color-title);
    font-family: var(--font-title);
    font-size: 1.02rem;
}

.rental-form__contact .rental-form__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}

.rental-form__hint {
    margin-top: 10px;
    color: #65718a;
    font-size: 0.84rem;
}

.rental-form__error {
    margin-top: 18px;
    padding: 11px 14px;
    color: #8c2f22;
    background: #fdeceb;
    border: 1px solid #f3c4bf;
    border-radius: 9px;
    font-size: 0.9rem;
}

.rental-form__error[hidden] {
    display: none;
}

.rental-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #e8edf6;
}

.rental-form__privacy {
    margin-right: auto;
    max-width: 420px;
    color: #65718a;
    font-size: 0.84rem;
}

.rental-form__submit {
    min-height: 48px;
    padding: 12px 30px;
    color: #fff;
    background: var(--grad-blue);
    border: 0;
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(0, 30, 101, 0.2);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.rental-form__submit:hover {
    transform: translateY(-2px);
}

.rental-form__submit[disabled] {
    opacity: 0.65;
    cursor: progress;
    transform: none;
}

/* ==========================================================================
   WIZARD DEL FORMULARIO "CUÉNTANOS QUÉ BUSCAS" (modal Properties)
   Reutiliza las clases .rental-form, .rental-field y .price-range existentes:
   aquí solo van el indicador, la navegación Previous / Next y su puesta a punto.
   ========================================================================== */
.rental-wizard__progress {
    margin: 0 0 22px;
    color: #7a879f;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.rental-wizard__navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #e8edf6;
}

.property-filter-wizard__error {
    margin: 18px 0 0;
    padding: 12px 14px;
    color: #8d1d2c;
    background: #fff4f5;
    border: 1px solid #efc7cd;
    border-radius: 9px;
    text-align: center;
}

.property-filter-wizard__error[hidden] {
    display: none;
}

.property-filter-wizard__summary-title {
    margin: 0 0 18px;
    color: var(--color-title);
    font-family: var(--font-title);
    font-size: 1.35rem;
    text-align: center;
}

.property-filter-wizard__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    background: #dfe6f2;
    border: 1px solid #dfe6f2;
    border-radius: 11px;
}

.property-filter-wizard__summary > div {
    min-width: 0;
    padding: 14px 16px;
    background: #fff;
}

.property-filter-wizard__summary dt {
    margin-bottom: 4px;
    color: #7a879f;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.property-filter-wizard__summary dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-title);
    font-weight: 600;
}

/* Dos columnas permanentes: ocultar un botón (hidden) nunca recoloca al otro,
   porque cada uno vive en su propio slot del grid. Previous = izquierda,
   Next / Submit = derecha. */
.rental-wizard__navigation-slot {
    display: flex;
    align-items: center;
    min-width: 0;
}

.rental-wizard__navigation-slot--previous {
    justify-content: flex-start;
}

.rental-wizard__navigation-slot--forward {
    justify-content: flex-end;
}

.rental-wizard__button {
    min-height: 48px;
    min-width: 170px;
    padding: 12px 30px;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    border-radius: 9px;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* Los botones se ocultan de verdad (no quedan deshabilitados): el atributo
   hidden se aplica igual porque ningún display propio lo pisa.
   Un botón disabled, en cambio, permanece visible y ocupa su slot exacto:
   el usuario siempre ve que existe el siguiente paso. */
.rental-wizard__button[hidden] {
    display: none;
}

.rental-wizard__button--previous {
    color: #002991;
    background: #fff;
    border: 1.5px solid #c6d1e7;
}

.rental-wizard__button--previous:hover,
.rental-wizard__button--previous:focus-visible {
    color: #002991;
    background: #f2f6ff;
    border-color: #002991;
    outline: none;
}

.rental-wizard__button--next {
    color: #fff;
    background: var(--grad-blue);
    border: 0;
    box-shadow: 0 8px 20px rgba(0, 30, 101, 0.2);
}

.rental-wizard__button--next:hover {
    transform: translateY(-2px);
}

.rental-wizard__button--next:focus-visible {
    outline: 2px solid #002991;
    outline-offset: 2px;
}

/* Next y Submit deshabilitados siguen ocupando su mismo slot (mismo espacio,
   ni se mueven ni se hace clic), pero se ve que aún no se puede avanzar. */
.rental-wizard__button--next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.rental-wizard__button--submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Durante el envío (fetch) el texto cambia a "Enviando…": otro cursor y el
   botón deja de recibir el puntero. */
.rental-wizard__button--submit.is-sending {
    opacity: 0.65;
    cursor: progress;
    pointer-events: none;
}

@media (max-width: 620px) {
    .rental-wizard__navigation {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .rental-wizard__navigation-slot,
    .rental-wizard__navigation-slot--previous,
    .rental-wizard__navigation-slot--forward {
        justify-content: stretch;
    }

    .rental-wizard__button {
        width: 100%;
        min-width: 0;
        padding: 12px 20px;
    }

    .property-filter-wizard__summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rental-modal__success {
    padding: 26px 0 6px;
    text-align: center;
}

.rental-modal__success[hidden] {
    display: none;
}

.rental-modal__success i {
    color: #2e9e63;
    font-size: 2.6rem;
}

.rental-modal__success h3 {
    margin: 14px 0 8px;
    color: var(--color-title);
    font-family: var(--font-title);
    font-size: 1.4rem;
}

.rental-modal__success p {
    max-width: 480px;
    margin: 0 auto 22px;
}

@media (max-width: 720px) {
    .rental-modal {
        padding: 12px;
    }

    .rental-modal__panel {
        padding: 36px 20px 26px;
    }

    .rental-form__grid,
    .rental-form__contact .rental-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rental-form__actions {
        justify-content: stretch;
    }

    .rental-form__submit {
        width: 100%;
    }
}

/* ---------- Concierge de propiedades ---------- */
.client-chat {
    position: fixed;
    right: 24px;
    bottom: 105px;
    z-index: 1600;
    font-family: var(--font-body);
}

.client-chat [hidden] {
    display: none !important;
}

.client-chat__launcher {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 8px 18px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 40px 40px 12px 40px;
    background: #001e65;
    color: #fff;
    box-shadow: 0 16px 36px rgba(0, 30, 101, 0.26);
    cursor: pointer;
    text-align: left;
    transition: transform 180ms ease, background 180ms ease;
}

.client-chat__launcher:hover,
.client-chat__launcher:focus-visible {
    transform: translateY(-3px);
    background: #002991;
    outline: none;
}

.client-chat__launcher-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    border-radius: 50%;
    background: #c19436;
}

.client-chat__launcher-mark svg {
    width: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.client-chat__launcher-copy {
    display: grid;
    line-height: 1.15;
}

.client-chat__launcher-copy strong {
    font-size: 0.92rem;
    font-weight: 600;
}

.client-chat__launcher-copy small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    font-weight: 700;
}

.client-chat__panel {
    width: min(432px, calc(100vw - 32px));
    height: min(700px, calc(100vh - 120px));
    height: min(700px, calc(100dvh - 120px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(0, 30, 101, 0.12);
    border-radius: 34px 34px 8px 34px;
    background: #fbfaf7;
    box-shadow: 0 28px 70px rgba(0, 25, 73, 0.28);
    animation: client-chat-enter 240ms ease-out both;
}

@keyframes client-chat-enter {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.client-chat__header {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    background: #001e65;
    color: #fff;
}

.client-chat__brand {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    overflow: hidden;
    border: 1px solid rgba(240, 201, 100, 0.65);
    border-radius: 50% 50% 50% 12px;
    background: #fff;
}

.client-chat__brand img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.client-chat__heading {
    min-width: 0;
    display: grid;
    flex: 1;
}

.client-chat__heading strong {
    overflow: hidden;
    font-family: var(--font-title);
    font-size: 0.98rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-chat__heading small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

.client-chat__heading i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #61d58a;
    box-shadow: 0 0 0 3px rgba(97, 213, 138, 0.15);
}

.client-chat__close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    font-size: 1.65rem;
    line-height: 1;
}

.client-chat__close:hover,
.client-chat__close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.client-chat__messages {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 22px 18px 16px;
    scroll-behavior: smooth;
}

.client-chat__message {
    display: flex;
    margin: 0 0 9px;
}

.client-chat__message--user {
    justify-content: flex-end;
}

.client-chat__bubble {
    /* Más ancho y tipografía algo menor: menos cortes y sin palabras huérfanas.
       text-wrap: balance reparte el texto en líneas de longitud pareja. */
    max-width: 92%;
    padding: 11px 14px;
    border-radius: 4px 18px 18px 18px;
    background: #fff;
    color: #343b47;
    box-shadow: 0 3px 14px rgba(0, 30, 101, 0.07);
    font-size: 1.15rem;
    line-height: 1.5;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.client-chat__message--user .client-chat__bubble {
    border-radius: 18px 4px 18px 18px;
    background: #002991;
    color: #fff;
    box-shadow: none;
}

/* Viven dentro del hilo de mensajes: las respuestas quedan pegadas a la
   pregunta y se leen como un solo bloque. */
.client-chat__controls {
    margin: 2px 0 4px;
    padding: 0 2px;
}

.client-chat__controls:empty {
    display: none;
}

.client-chat__controls--form {
    margin: 8px 0 4px;
    padding: 13px 14px;
    border: 1px solid rgba(0, 30, 101, 0.08);
    border-radius: 4px 18px 18px 18px;
    background: #fff;
    box-shadow: 0 3px 14px rgba(0, 30, 101, 0.07);
}

.client-chat__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}

.client-chat__choice,
.client-chat__text-button {
    border: 1px solid rgba(0, 41, 145, 0.25);
    border-radius: 999px;
    background: #fff;
    color: #002991;
    cursor: pointer;
    font: 500 0.86rem var(--font-body);
    padding: 8px 11px;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.client-chat__choice:hover,
.client-chat__choice:focus-visible,
.client-chat__text-button:hover,
.client-chat__text-button:focus-visible {
    border-color: #002991;
    background: #002991;
    color: #fff;
    outline: none;
}

.client-chat__budget {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.client-chat__budget label {
    min-width: 0;
    display: flex;
    align-items: center;
    border: 1px solid #dce2eb;
    border-radius: 8px;
    background: #fff;
}

.client-chat__budget label span {
    padding-left: 10px;
    color: #002991;
    font-size: 0.82rem;
    font-weight: 600;
}

.client-chat__budget input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    padding: 11px 8px;
    font: 0.9rem var(--font-body);
}

.client-chat__budget > button[type="submit"],
.client-chat__contact > button,
.client-chat__success-actions a {
    border: 0;
    border-radius: 8px;
    background: #002991;
    color: #fff;
    cursor: pointer;
    font: 600 0.84rem var(--font-body);
    padding: 11px 14px;
    text-align: center;
    text-decoration: none;
}

.client-chat__budget .client-chat__text-button {
    grid-column: 1 / -1;
    justify-self: start;
    border: 0;
    padding: 4px 2px;
}

.client-chat__budget .client-chat__text-button:hover,
.client-chat__budget .client-chat__text-button:focus-visible {
    background: transparent;
    color: #925e08;
}

.client-chat__results {
    display: grid;
    gap: 12px;
    margin: 14px 0;
}

.client-chat__property {
    display: grid;
    grid-template-columns: 112px 1fr;
    overflow: hidden;
    border: 1px solid rgba(0, 30, 101, 0.1);
    border-radius: 6px 20px 6px 20px;
    background: #fff;
}

.client-chat__property-image {
    min-height: 126px;
    overflow: hidden;
}

.client-chat__property-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.client-chat__property-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 11px 12px 8px;
}

.client-chat__property-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: #15213a;
    font-size: 0.84rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.client-chat__property-copy span,
.client-chat__property-copy small {
    overflow: hidden;
    margin-top: 4px;
    color: #707784;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-chat__property-copy b {
    margin-top: auto;
    padding-top: 6px;
    color: #925e08;
    font-size: 0.82rem;
}

.client-chat__property-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(0, 30, 101, 0.08);
}

.client-chat__property-actions a,
.client-chat__property-actions button {
    border: 0;
    background: transparent;
    color: #002991;
    cursor: pointer;
    font: 600 0.76rem var(--font-body);
    padding: 9px;
    text-align: center;
    text-decoration: none;
}

.client-chat__property-actions button {
    border-left: 1px solid rgba(0, 30, 101, 0.08);
    background: #f5f7fb;
}

.client-chat__contact {
    display: grid;
    gap: 9px;
}

.client-chat__contact > label:not(.client-chat__consent) {
    display: grid;
    gap: 4px;
}

.client-chat__contact label > span {
    color: #424955;
    font-size: 0.72rem;
    font-weight: 500;
}

.client-chat__contact input[type="text"],
.client-chat__contact input[type="email"],
.client-chat__contact input[type="tel"] {
    width: 100%;
    border: 1px solid #dce2eb;
    border-radius: 7px;
    outline: 0;
    padding: 9px 10px;
    font: 0.84rem var(--font-body);
}

.client-chat__contact input:focus {
    border-color: #002991;
    box-shadow: 0 0 0 2px rgba(0, 41, 145, 0.08);
}

.client-chat__contact > small {
    color: #747b87;
    font-size: 0.68rem;
}

.client-chat__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.client-chat__consent input {
    margin-top: 2px;
    accent-color: #002991;
}

.client-chat__consent span {
    line-height: 1.35;
}

.client-chat__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.client-chat__form-error {
    color: #a42121;
    font-size: 0.74rem;
    line-height: 1.35;
}

.client-chat__contact > button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.client-chat__success-actions {
    display: grid;
    gap: 8px;
}

.client-chat__success-actions a {
    background: #178b48;
}

.client-chat__success-actions button {
    border: 0;
    background: transparent;
    color: #002991;
    cursor: pointer;
    font: 600 0.8rem var(--font-body);
    padding: 6px;
}

.client-chat__note {
    padding: 9px 18px 11px;
    border-top: 1px solid rgba(0, 30, 101, 0.08);
    background: #fbfaf7;
    color: #858b95;
    font-size: 0.64rem;
    text-align: center;
}

@media (max-width: 1024px) {
    body.modal-open .client-chat__launcher {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .client-chat {
        right: 16px;
        bottom: 90px;
    }

    .client-chat__launcher {
        width: 62px;
        min-height: 62px;
        padding: 6px;
        gap: 0;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .client-chat__launcher-mark {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .client-chat__launcher-copy {
        display: none;
    }

    .client-chat__panel {
        position: fixed;
        inset: 10px;
        width: auto;
        height: auto;
        border-radius: 26px 26px 8px 26px;
    }

    .client-chat__messages {
        padding: 18px 14px 12px;
    }

    .client-chat__controls--form {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-chat__panel {
        animation: none;
    }

    .client-chat__messages {
        scroll-behavior: auto;
    }
}

@media (max-width: 860px) {
    .custom-filter-modal__panel {
        padding: 42px 26px 30px;
    }

    .custom-filter-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .custom-filter-modal {
        align-items: end;
        padding: 0;
    }

    .custom-filter-modal__panel {
        max-height: 94vh;
        padding: 42px 20px 24px;
        border-radius: 20px 20px 0 0;
    }

    .custom-filter-modal__header {
        margin-bottom: 24px;
    }

    .custom-filter-form__grid {
        grid-template-columns: 1fr;
    }

    .custom-filter-field--wide,
    .custom-filter-field--price,
    .custom-filter-field--segments {
        grid-column: auto;
    }

    .custom-filter-form__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .custom-filter-form__count {
        margin-right: 0;
        text-align: center;
    }

    .custom-filter-form__reset,
    .custom-filter-form__submit {
        width: 100%;
    }
}

/* ==========================================================================
   SLIDER DE RANGO DE PRECIO (dos manijas) — buscador y listado
   ========================================================================== */
.price-range {
    width: 100%;
    text-align: left;
}

.price-range__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
}

.price-range__label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b08a3c;
}

.price-range__currency {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-title);
    background: #edf2ff;
    border-radius: 999px;
    padding: 4px 8px;
}

.price-range__values {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 9px;
    margin-bottom: 14px;
}

.price-range__field {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.price-range__field-label {
    color: #6b7280;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
}

.price-range__value {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    color: #73809a;
    background: #fff;
    border: 1px solid #c6d1e7;
    border-radius: 9px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.price-range__value:focus-within {
    border-color: var(--color-title);
    box-shadow: 0 0 0 3px rgba(0, 41, 145, 0.1);
}

.price-range__value input,
.custom-filter-field .price-range__value input {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0 0 0 4px;
    color: #263653;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
}

.price-range__value input:focus,
.custom-filter-field .price-range__value input:focus {
    outline: 0;
    box-shadow: none;
}

.price-range__separator {
    /* Centrado respecto al campo, no al bloque con su etiqueta. */
    display: flex;
    align-items: center;
    height: 42px;
    color: #9ba7bc;
}

.price-range__slider {
    --price-slider-edge: 4px;
    --price-slider-thumb-size: 39px;
    --price-slider-thumb-radius: 19.5px;
    position: relative;
    height: 76px;
    margin-top: 4px;
    padding: 0;
}

.price-range__slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111827;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.price-range__track,
.price-range__fill {
    position: absolute;
    top: 48px;
    transform: translateY(-50%);
    height: 9px;
    border-radius: 999px;
}

.price-range__track {
    left: calc(var(--price-slider-edge) + var(--price-slider-thumb-radius));
    right: calc(var(--price-slider-edge) + var(--price-slider-thumb-radius));
    background: #d1d5db;
}

.price-range__fill {
    left: calc(var(--price-slider-edge) + var(--price-slider-thumb-radius));
    right: calc(var(--price-slider-edge) + var(--price-slider-thumb-radius));
    height: 20px;
    background: #064be8;
    will-change: clip-path;
}

.price-range__input {
    position: absolute;
    top: 28.5px;
    left: var(--price-slider-edge);
    width: calc(100% - (var(--price-slider-edge) * 2));
    height: 39px;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Los inputs generales del modal tienen fondo, borde y padding. El rango debe
   permanecer transparente para que las dos capas y sus manijas sean visibles. */
.custom-filter-field .price-range__input {
    position: absolute;
    width: calc(100% - (var(--price-slider-edge) * 2));
    height: 39px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.custom-filter-field .price-range__input:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

.price-range__input--min { z-index: 3; }
.price-range__input--max { z-index: 2; }

.price-range__input::-webkit-slider-runnable-track {
    background: none;
    border: none;
}

.price-range__input::-moz-range-track {
    background: none;
    border: none;
}

.price-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: var(--price-slider-thumb-size);
    height: var(--price-slider-thumb-size);
    border-radius: 50%;
    background: #d1d1d1;
    border: 1px solid #c8c8c8;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(15, 23, 42, 0.28);
}

.price-range__input::-moz-range-thumb {
    pointer-events: auto;
    width: var(--price-slider-thumb-size);
    height: var(--price-slider-thumb-size);
    border-radius: 50%;
    background: #d1d1d1;
    border: 1px solid #c8c8c8;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(15, 23, 42, 0.28);
}

.price-range__input:focus { outline: none; }

.price-range__input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(6, 75, 232, 0.2), 0 2px 3px rgba(15, 23, 42, 0.28);
}

.price-range__input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(6, 75, 232, 0.2), 0 2px 3px rgba(15, 23, 42, 0.28);
}

.price-range__input:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(0, 41, 145, 0.18);
}

.price-range__input:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(0, 41, 145, 0.18);
}

/* ==========================================================================
   CABECERA DE SECCIÓN (título + onda + texto)
   ========================================================================== */
.section-head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 56px;
    padding: 0 24px;
}

.section-head__title {
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    letter-spacing: 0.02em;
}

.section-head__wave {
    width: 110px;
    margin: 14px auto 26px;
}

.section-head__text {
    font-size: clamp(1.15rem, 1.35vw, 1.3rem);
    font-weight: 400;
    line-height: 1.55;
}

@media (min-width: 769px) {
    .section-head--popular {
        max-width: var(--container);
    }

    .section-head__text--single-line {
        white-space: nowrap;
    }
}

/* ==========================================================================
   MOST POPULAR PROPERTIES
   ========================================================================== */
.popular {
    padding: 0 24px var(--section-gap);
}

.popular__grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

/* ---------- Card de propiedad ---------- */
.property-card {
    background: #fff;
    border: 1px solid #9db4e0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.property-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 24, 73, 0.14);
}

.property-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    /* El media nunca crece ni se encoge: la altura la fija el aspect-ratio,
       no la imagen (si no, las fotos verticales estiran la card). */
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
}

.property-card__media-link {
    position: absolute;
    inset: 0;
    display: block;
}

.property-card__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.property-card__recommendation {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: clamp(18px, 2.3vw, 28px);
    color: #fff;
    background:
        linear-gradient(180deg, rgba(0, 19, 56, 0.25) 0%, rgba(0, 19, 56, 0.93) 58%, #001338 100%);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.property-card__recommendation::before {
    content: '';
    width: 42px;
    height: 2px;
    margin-bottom: 2px;
    background: #d7b46a;
}

.property-card__recommendation-kicker {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #f1d99f;
}

.property-card__recommendation-text {
    font-family: var(--font-body);
    font-size: clamp(0.76rem, 0.86vw, 0.9rem);
    line-height: 1.45;
    text-wrap: pretty;
}

.property-card__recommendation-hint {
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
}

.property-card__recommendation-toggle {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: #d7b46a;
    color: #001f63;
    font: 800 1.35rem/1 var(--font-body);
    box-shadow: 0 5px 16px rgba(0, 19, 56, 0.3);
    cursor: pointer;
}

@media (hover: hover) {
    .property-card__media--recommended:hover .property-card__recommendation,
    .property-card__media-link:focus-visible ~ .property-card__recommendation {
        opacity: 1;
        transform: translateY(0);
    }

    .property-card__media--recommended:hover img,
    .property-card__media-link:focus-visible img {
        transform: scale(1.045);
        filter: saturate(0.82);
    }

    .property-card__media--recommended:hover .property-card__price,
    .property-card__media-link:focus-visible .property-card__price {
        opacity: 0;
    }
}

.property-card__price {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 62%;
    background: var(--grad-blue);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 400;
    padding: 8px 18px;
    border-radius: 10px 0 0 0;
    z-index: 1;
    transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .property-card__media img,
    .property-card__recommendation,
    .property-card__price {
        transition: none;
    }
}

/* En móvil el motivo se consulta bajo demanda para no cubrir la fotografía. */
@media (hover: none), (max-width: 768px) {
    .property-card__recommendation-toggle {
        display: grid;
        place-items: center;
    }

    .property-card__media--recommended.is-recommendation-open .property-card__recommendation {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .property-card__media--recommended.is-recommendation-open .property-card__price {
        opacity: 0;
    }

    .property-card__media--recommended.is-recommendation-open .property-card__recommendation-toggle {
        background: #fff;
    }
}

/* Piso del apartamento: pill sobre la foto, arriba a la izquierda
   (el precio ocupa la esquina inferior derecha). */
.property-card__floor {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(0, 30, 101, 0.88);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 19, 56, 0.25);
}

.property-card__floor svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.property-card__price strong {
    font-weight: 700;
}

.property-card__price small {
    font-size: 0.68em;
    font-weight: 300;
}

.property-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px 20px;
    flex: 1;
}

/* Título corto: máximo 2 líneas, con ellipsis. El min-height reserva las dos
   líneas siempre para que todas las cards alineen los bloques de abajo. */
.property-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.property-card__title a {
    transition: color 0.2s ease;
}

.property-card:hover .property-card__title a {
    color: #1257c0;
}

.property-card__meta {
    display: flex;
    gap: 12px;
}

.property-card__location,
.property-card__status {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 8px;
}

.property-card__location {
    color: #fff;
    background: var(--color-title);
    border: 1px solid var(--color-title);
}

.property-card__location svg {
    width: 15px;
    height: 15px;
}

.property-card__location--link {
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.property-card__location--link:hover,
.property-card__location--link:focus {
    background: #1257c0;
    border-color: #1257c0;
    color: #fff;
}

.property-card__status {
    color: #fff;
    background: #157f3d;
}

/* Color del badge según el estado */
.property-card__status--reserved { background: #b8860b; }
.property-card__status--sold     { background: #b02a2a; }
.property-card__status--hidden   { background: #6b7280; }

.property-card__specs {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.property-card__specs--two {
    grid-template-columns: repeat(2, 1fr);
}

.property-card__specs li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    border: 1px solid #9db4e0;
    border-radius: 9px;
    padding: 13px 7px 11px;
    text-align: center;
}

.property-card__specs img {
    width: 33px;
    height: 33px;
    object-fit: contain;
    margin-bottom: 4px;
}

.property-card__specs strong {
    color: var(--color-title);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.3;
    min-height: 2.6em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.property-card__specs-item--area strong {
    font-size: 0.79rem;
    min-height: 3.4em;
}

.property-card__specs small {
    font-size: 0.83rem;
    color: var(--color-body);
}

.property-card__cta {
    margin-top: auto;
    display: block;
    text-align: center;
    background: var(--color-title);
    color: #fff;
    font-weight: 500;
    font-size: 1.05rem;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.25s ease;
}

.property-card__cta:hover {
    background: #0d47a1;
}

/* Acciones al pie de la card: el botón de interiores solo aparece en las
   tarjetas que traen galería (proyectos exclusivos de Vista Lomas). */
.property-card__actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.property-card__actions .property-card__cta {
    margin-top: 0;
}

.property-card__interiors {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--color-title);
    border-radius: 8px;
    background: #fff;
    color: var(--color-title);
    font: inherit;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.property-card__interiors svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.property-card__interiors:hover,
.property-card__interiors:focus-visible {
    background: var(--color-title);
    color: #fff;
}

.results__grid .property-card__interiors {
    font-size: 0.9rem;
    padding: 8px 10px;
}

/* ==========================================================================
   BANNER "INVEST IN YOUR DREAM"
   ========================================================================== */
/* ==========================================================================
   BANDA DE ASISTENCIA DE ALQUILER (home, tras las propiedades recomendadas)
   ========================================================================== */
.rental-band {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--section-gap);
    background: var(--grad-blue);
}

.rental-band__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 30px 24px;
}

.rental-band__icon {
    display: block;
    width: 92px;
    color: #e0b45c;
}

.rental-band__icon svg {
    display: block;
    width: 100%;
    height: auto;
}

.rental-band__eyebrow {
    margin-bottom: 8px;
    color: #e0b45c;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.rental-band__title {
    margin-bottom: 10px;
    color: #fff;
    font-family: var(--font-title);
    font-size: clamp(1.3rem, 2.1vw, 2rem);
    line-height: 1.2;
    text-transform: uppercase;
    text-wrap: balance;
}

.rental-band__text {
    max-width: 62ch;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.02rem;
}

.rental-band__cta {
    padding: 16px 30px;
    color: var(--color-title);
    background: #e0b45c;
    border: 0;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.rental-band__cta:hover,
.rental-band__cta:focus-visible {
    background: #f0c964;
    box-shadow: 0 10px 26px rgba(0, 12, 43, 0.35);
    transform: translateY(-2px);
}

.rental-band__cta:focus-visible {
    outline: 3px solid rgba(240, 201, 100, 0.45);
    outline-offset: 3px;
}

/* Ola dorada decorativa de la esquina inferior derecha */
.rental-band__wave {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: clamp(160px, 16vw, 250px);
    pointer-events: none;
}

@media (max-width: 1180px) {
    .rental-band__inner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 22px 26px;
    }

    .rental-band__icon {
        width: 74px;
    }

    .rental-band__cta {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 720px) {
    .rental-band__inner {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 18px;
        padding: 32px 20px;
        text-align: center;
    }

    .rental-band__icon {
        width: 62px;
    }

    .rental-band__text {
        font-size: 0.96rem;
    }

    .rental-band__cta {
        justify-self: stretch;
        width: 100%;
    }

    .rental-band__wave {
        opacity: 0.5;
    }
}

.invest {
    padding: 0 24px var(--section-gap);
}

.invest__banner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 48% 52%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 24, 73, 0.18);
}

.invest__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 70px 48px;
    background: radial-gradient(circle at 32% 38%, #0035b0 0%, #002a93 45%, #001849 100%);
}

/* Separador dorado vertical entre panel y foto */
.invest__panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #925e08, #c19436, #f0c964, #925e08);
}

.invest__title {
    width: clamp(260px, 26vw, 440px);
}

.invest__logo {
    width: clamp(170px, 15vw, 260px);
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
}

.invest__media {
    min-height: 560px;
}

.invest__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-card__specs strong.property-card__spec-value--detailed {
    font-size: 0.78rem;
    line-height: 1.25;
}

/* ==========================================================================
   EXCLUSIVE PROJECTS — signature editorial page
   ========================================================================== */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.signature-projects {
    --signature-blue: #062b78;
    --signature-gold: #c59634;
    --signature-title-size: clamp(1.75rem, 3.2vw, 2.6rem);
    --signature-copy-size: clamp(1.15rem, 1.35vw, 1.3rem);
    overflow: hidden;
    background: #fff;
}

.signature-projects__intro {
    display: grid;
    justify-items: center;
    padding: clamp(68px, 7vw, 108px) 24px clamp(62px, 6vw, 94px);
    text-align: center;
}

.signature-projects__eyebrow {
    margin-bottom: 20px;
    color: var(--signature-gold);
    font-size: clamp(0.7rem, 0.8vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.signature-projects__intro h1 {
    font-size: var(--signature-title-size);
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.signature-projects__wave {
    width: clamp(108px, 10vw, 158px);
    margin: 24px auto 25px;
}

.signature-projects__lede {
    max-width: 670px;
    color: #181818;
    font-size: var(--signature-copy-size);
    line-height: 1.55;
}

.signature-projects__showcase {
    container-type: inline-size;
}

.signature-project {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: clamp(420px, 38vw, 580px);
    border-block: 5px solid var(--signature-gold);
    background: var(--signature-blue);
}

.signature-project__copy {
    display: grid;
    place-items: center;
    padding: clamp(50px, 6vw, 100px);
    color: #fff;
}

.signature-project__copy-inner {
    width: min(100%, 480px);
}

.signature-project__copy h2 {
    margin-bottom: 24px;
    color: #fff;
    font: 500 var(--signature-title-size)/1.15 var(--font-title);
    letter-spacing: 0.02em;
}

.signature-project__copy p {
    max-width: 450px;
    margin-bottom: 31px;
    color: rgba(255, 255, 255, 0.94);
    font-size: var(--signature-copy-size);
    line-height: 1.48;
}

.signature-project__button,
.signature-projects__contact-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 16px;
    border: 1px solid var(--signature-gold);
    border-radius: 8px;
    color: var(--signature-gold);
    font-size: var(--signature-copy-size);
    font-weight: 600;
    line-height: 1;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.signature-project__button {
    min-height: 58px;
    padding: 16px 28px;
    border-width: 2px;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(1, 20, 57, 0.24);
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.signature-project__button:hover,
.signature-project__button:focus-visible {
    background: var(--signature-gold);
    color: #041e54;
    transform: translateY(-2px);
}

.signature-project__button span:last-child {
    font-size: 1.45rem;
    line-height: 0;
}

.signature-project__media {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
}

.signature-project__media::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 55%, rgba(1, 29, 74, 0.12));
    content: '';
    pointer-events: none;
}

.signature-project__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.2, 0.65, 0.25, 1);
}

.signature-project__media:hover img,
.signature-project__media:focus-visible img {
    transform: scale(1.025);
}

.signature-project--vista .signature-project__media img {
    object-position: 51% 56%;
}

.signature-project--lionsgate .signature-project__media img {
    object-position: 51% center;
}

.signature-projects__breath {
    height: clamp(72px, 8vw, 132px);
    background: #fff;
}

.signature-projects__contact {
    display: grid;
    justify-items: center;
    padding: clamp(86px, 9vw, 140px) 24px clamp(100px, 10vw, 158px);
    text-align: center;
}

.signature-projects__contact h2 {
    font-size: var(--signature-title-size);
    line-height: 1.15;
    text-transform: uppercase;
}

.signature-projects__contact p {
    margin: 27px 0 29px;
    color: #171717;
    font-size: var(--signature-copy-size);
    line-height: 1.55;
}

.signature-projects__contact-button {
    min-width: 166px;
    border-color: var(--signature-blue);
    color: var(--signature-blue);
}

.signature-projects__contact-button:hover,
.signature-projects__contact-button:focus-visible {
    background: var(--signature-blue);
    color: #fff;
    transform: translateY(-2px);
}

@container (max-width: 760px) {
    .signature-project {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .signature-project__copy {
        min-height: 340px;
        padding: 52px clamp(24px, 8vw, 54px);
    }

    .signature-project__media {
        aspect-ratio: 4 / 3;
    }

    .signature-project__button {
        min-height: 44px;
        min-width: 166px;
        padding: 10px 16px;
        border-width: 1px;
        border-radius: 8px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .signature-project__button span:last-child {
        font-size: 1.15rem;
    }
}

@media (max-width: 520px) {
    .signature-projects__intro {
        padding-block: 58px 54px;
    }

    .signature-projects__eyebrow {
        margin-bottom: 16px;
        font-size: 0.66rem;
    }

    .signature-projects__wave {
        margin-block: 20px;
    }

    .signature-project__copy {
        min-height: 320px;
    }

    .signature-project__copy h2 {
        margin-bottom: 18px;
    }

    .signature-project__copy p {
        margin-bottom: 25px;
    }

    .signature-projects__breath {
        height: 38px;
    }

    .signature-projects__contact {
        padding-block: 74px 90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .signature-project__media img,
    .signature-project__button,
    .signature-projects__contact-button {
        transition-duration: 1ms;
    }
}


/* ==========================================================================
   EXPLORE OUR LISTINGS
   ========================================================================== */
.listings {
    padding: 0 24px var(--section-gap);
}

.listings__grid {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.listings__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.listings__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 24px;
    background: #082d78;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 24, 73, 0.13);
    isolation: isolate;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.listings__media {
    height: clamp(300px, 32vw, 620px);
    overflow: hidden;
}

.listings__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.listings__card:hover .listings__media img {
    transform: scale(1.035);
}

.listings__item--featured {
    gap: clamp(30px, 3.5vw, 48px);
}

.listings__item--featured .listings__media {
    width: 100%;
    height: auto;
    aspect-ratio: 2.55 / 1;
}

.listings__item--featured .listings__featured-content {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 14px;
    min-height: clamp(74px, 6vw, 92px);
    padding: 20px 28px 24px;
    border-top: 3px solid #c79b35;
    background: #082d78;
    color: #fff;
    text-align: center;
}

/* Botón visible dentro de la tarjeta: sin él los usuarios no notaban que era
   un enlace, sobre todo en móvil, donde no hay hover. No es <a> porque toda
   la tarjeta ya lo es. */
.listings__featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 24px;
    border: 1.5px solid #e0b45c;
    border-radius: 999px;
    color: #f4d47c;
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.listings__featured-cta svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease;
}

.listings__card:hover .listings__featured-cta,
.listings__card:focus-visible .listings__featured-cta {
    color: #082d78;
    background: #e0b45c;
    border-color: #e0b45c;
}

.listings__card:hover .listings__featured-cta svg {
    transform: translateX(3px);
}

.listings__card:focus-visible {
    outline: 3px solid #c79b35;
    outline-offset: 4px;
}

.listings__featured-title {
    font-family: var(--font-title);
    font-size: clamp(1.45rem, 2.1vw, 2.25rem);
    font-weight: 400;
    letter-spacing: 0.055em;
    line-height: 1.1;
    text-transform: uppercase;
    text-wrap: balance;
    transition: letter-spacing 0.35s ease;
}

.listings__item--featured .listings__card:hover {
    box-shadow: 0 24px 58px rgba(0, 24, 73, 0.2);
    transform: translateY(-3px);
}

.listings__item--featured .listings__card:hover .listings__featured-title {
    letter-spacing: 0.075em;
}

.listings__quick-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.listings__quick-actions .search__tab,
.listings__quick-actions .search__custom {
    min-width: 200px;
    min-height: 58px;
    padding: 17px 34px;
    border-radius: 7px;
    font-size: 0.94rem;
    letter-spacing: 0.045em;
}

.listings__quick-actions .search__tab:focus-visible {
    outline: 3px solid rgba(0, 41, 145, 0.22);
    outline-offset: 3px;
}

.listings__caption {
    display: block;
    text-align: center;
    background: var(--grad-blue);
    border-top: 4px solid transparent;
    border-image: var(--grad-gold) 1;
    color: #fff;
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 2vw, 1.9rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 20px 24px;
}

.listings__caption-label {
    display: block;
}

.listings__search {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 136px;
    padding: 12px 20px;
    border: 1px solid rgba(240, 201, 100, 0.88);
    border-radius: 999px;
    background: linear-gradient(110deg, #925e08, #f0c964 52%, #a16c13);
    color: #071b42;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.listings__search svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease;
}

.listings__search:hover,
.listings__search:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 11px 26px rgba(0, 0, 0, 0.26);
}

.listings__search:hover svg,
.listings__search:focus-visible svg {
    transform: translateX(3px);
}

.listings__card:focus-visible,
.listings__search:focus-visible {
    outline: 3px solid #f0c964;
    outline-offset: 4px;
}

/* Nombre de proyecto sobre la caption (ej. "Lions Gate") */
.listings__caption-name {
    position: relative;
    display: table;
    margin: 0 auto 12px;
    font-size: 1.05em;
    background: linear-gradient(90deg, #925e08 0%, #c19436 22%, #f0c964 50%, #c19436 78%, #925e08 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 30px 10px;
}

/* Subrayado dorado con puntas afiladas */
.listings__caption-name::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: calc(100% + 30px);
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #c19436 18%, #f0c964 50%, #c19436 82%, transparent 100%);
    clip-path: polygon(0 50%, 4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%);
}

@media (max-width: 640px) {
    .listings {
        padding-right: 16px;
        padding-left: 16px;
    }

    .listings__grid {
        gap: 44px;
    }

    .listings__card {
        border-radius: 18px;
    }

    .listings__item--featured .listings__media {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .listings__item--featured .listings__media img {
        object-position: center;
    }

    .listings__item--featured .listings__featured-content {
        min-height: 68px;
        padding: 16px 18px 18px;
    }

    .listings__featured-title {
        font-size: clamp(1.05rem, 5.6vw, 1.45rem);
    }

    .listings__quick-actions {
        width: 100%;
        gap: 12px;
    }

    .listings__quick-actions .search__tab,
    .listings__quick-actions .search__custom {
        width: min(100%, 280px);
        min-height: 52px;
        padding: 14px 22px;
    }

    .listings__search {
        width: min(100%, 220px);
    }
}

/* ==========================================================================
   VISTA LOMAS CONDOS — dos colecciones, una experiencia visual
   ========================================================================== */
.page-vista-lomas { background: #fff; }
.page-vista-lomas .navbar > .gold-line {
    height: 7px;
    background: #15985b;
}
.page-vista-lomas .navbar__link::after {
    height: 3px;
    background: #22b573;
}
.page-vista-lomas .navbar__link:hover { color: #62d39a; }

.page-vista-lomas main {
    min-height: calc(100vh - var(--navbar-height) - 7px);
    min-height: calc(100svh - var(--navbar-height) - 7px);
    display: grid;
    grid-template-rows: auto 1fr;
}

.lomas-hero {
    position: relative;
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 18px 24px 14px;
    background: #fff;
}

.lomas-hero::before,
.lomas-hero::after {
    content: none;
}

.lomas-hero__content {
    position: relative;
    z-index: 1;
    width: min(950px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lomas-hero__eyebrow,
.lomas-residences__head > span,
.lomas-option__kicker {
    color: #657e68;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.lomas-hero__logo {
    width: clamp(126px, 14vw, 193px);
    max-height: 102px;
    margin: 12px 0 0;
    object-fit: contain;
}

.lomas-hero__intro {
    max-width: 620px;
    margin-top: 0;
    color: #56655b;
    font-size: clamp(.98rem, 1.4vw, 1.12rem);
    font-weight: 300;
    line-height: 1.75;
}

.lomas-hero__scroll {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 38px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(23, 58, 42, .42);
    color: #173a2a;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.lomas-hero__scroll svg { width: 17px; }

.lomas-residences {
    scroll-margin-top: var(--navbar-height);
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 24px 20px;
    background: #fff;
}

.lomas-residences__head {
    max-width: 720px;
    margin: 0 auto clamp(48px, 6vw, 78px);
    text-align: center;
}
.lomas-residences__head h2 {
    margin-top: 15px;
    color: #173a2a;
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    line-height: 1.15;
}
.lomas-residences__head p { margin-top: 18px; color: #647067; line-height: 1.7; }

.lomas-options {
    width: min(1240px, 100%);
    min-height: 0;
    flex: 1;
    margin: 0 auto 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(22px, 3vw, 42px);
}

.lomas-option {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(180px, 1fr) auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #9ab5ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 24, 73, .12);
    color: var(--color-body);
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.lomas-option:hover,
.lomas-option:focus-visible { box-shadow: 0 16px 40px rgba(0, 24, 73, .12); }
.lomas-option:focus-visible { outline: 2px solid #002991; outline-offset: 4px; }

.lomas-option__media {
    position: relative;
    display: block;
    height: auto;
    overflow: hidden;
    background: #e8edf7;
}
.lomas-option__media img { width: 100%; height: 100%; object-fit: cover; }
.lomas-option__content { display: flex; flex-direction: column; gap: 11px; padding: clamp(16px, 1.7vw, 22px); }
.lomas-option__title {
    min-height: 2.4em;
    color: var(--color-title);
    font-family: var(--font-title);
    font-size: clamp(1.05rem, 1.45vw, 1.34rem);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}

.lomas-option__meta { display: flex; gap: 12px; }
.lomas-option__location,
.lomas-option__status {
    flex: 1;
    min-height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 600;
}
.lomas-option__location { border: 1px solid var(--color-title); color: var(--color-title); }
.lomas-option__location svg { width: 15px; height: 15px; }
.lomas-option__status { background: #168a46; color: #fff; }

.lomas-option__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lomas-option__facts > span {
    min-width: 0;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 5px;
    border: 1px solid #a9bce9;
    border-radius: 8px;
    text-align: center;
}
.lomas-option__facts img,
.lomas-option__parking-icon { width: 22px; height: 22px; object-fit: contain; color: var(--color-title); }
.lomas-option__facts b { color: var(--color-title); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.lomas-option__facts small { color: var(--color-body); font-size: .66rem; line-height: 1.15; }

.lomas-option__cta {
    display: block;
    margin-top: auto;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--color-title);
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    text-align: center;
}

.lomas-residences__footer {
    width: min(1240px, 100%);
    margin: auto auto 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    padding-top: 0;
    color: #6b746d;
    font-size: .82rem;
    line-height: 1.55;
}
.lomas-residences__footer a { color: #1f5034; font-weight: 600; white-space: nowrap; }

.lomas-gallery[hidden] { display: none; }
.lomas-gallery { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; }
.lomas-gallery__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .52); }
.lomas-gallery__dialog { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; background: #0b0b0b; box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.lomas-gallery__header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 20px 17px 30px; color: #fff; }
.lomas-gallery__header span { color: #a4a4a4; font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.lomas-gallery__header h2 { margin-top: 3px; color: #f4f0e7; font-family: 'Cinzel', serif; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 500; }
.lomas-gallery__close { width: 48px; height: 48px; display: grid; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.lomas-gallery__close:hover { background: rgba(255,255,255,.12); }
.lomas-gallery__close svg { width: 20px; }

.lomas-gallery__stage { position: relative; min-height: 0; flex: 1; overflow: hidden; background: #000; }
.lomas-gallery__stage img { width: 100%; height: min(66vh, 680px); display: block; object-fit: contain; }
.lomas-gallery__arrow { position: absolute; top: 50%; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(0,0,0,.58); color: #fff; cursor: pointer; backdrop-filter: blur(7px); }
.lomas-gallery__arrow:hover { border-color: #fff; background: rgba(0,0,0,.85); }
.lomas-gallery__arrow svg { width: 24px; }
.lomas-gallery__arrow--prev { left: 22px; }
.lomas-gallery__arrow--next { right: 22px; }
.lomas-gallery__counter { position: absolute; right: 24px; bottom: 18px; padding: 7px 11px; background: rgba(5,13,8,.68); color: #fff; font-size: .68rem; letter-spacing: .14em; backdrop-filter: blur(5px); }

.lomas-gallery__thumbs { display: flex; gap: 9px; overflow-x: auto; padding: 13px 18px 15px; background: #0b0b0b; scrollbar-width: thin; scrollbar-color: #737373 transparent; }
.lomas-gallery__thumb { width: 88px; height: 58px; flex: 0 0 auto; overflow: hidden; padding: 0; border: 2px solid transparent; background: #242424; opacity: .5; cursor: pointer; }
.lomas-gallery__thumb:hover { opacity: .8; }
.lomas-gallery__thumb.is-active { border-color: #c7d7c8; opacity: 1; }
.lomas-gallery__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }

@media (max-width: 860px) {
    .page-vista-lomas main { min-height: 0; display: block; }
    .lomas-hero { min-height: 220px; padding: 34px 20px 32px; }
    .lomas-hero__logo { margin: 16px 0 0; }
    .lomas-residences { display: block; padding: 45px 24px 70px; }
    .lomas-options { grid-template-columns: 1fr; max-width: 610px; margin: 0 auto; }
    .lomas-option { height: auto; display: block; }
    .lomas-option__media { height: auto; aspect-ratio: 16 / 11; }
    .lomas-option__content { padding: 26px 24px; }
    .lomas-option__content > strong { font-size: clamp(1.55rem, 5vw, 2.1rem); }
    .lomas-residences__footer { margin-top: 40px; align-items: flex-end; }
}

@media (max-width: 600px) {
    .lomas-residences { padding-right: 14px; padding-left: 14px; }
    .lomas-option__media { aspect-ratio: 4 / 3; }
    .lomas-option__content { padding: 26px 22px 28px; }
    .lomas-option__facts { grid-template-columns: 1fr 1.35fr .65fr; }
    .lomas-option__facts b { font-size: .78rem; }
    .lomas-option__facts small { font-size: .64rem; }
    .lomas-gallery { padding: 0; }
    .lomas-gallery__dialog { width: 100%; height: 100%; max-height: none; }
    .lomas-gallery__header { min-height: 78px; padding: 13px 14px 13px 20px; }
    .lomas-gallery__stage img { height: calc(100vh - 165px); }
    .lomas-gallery__arrow { width: 44px; height: 44px; }
    .lomas-gallery__arrow--prev { left: 12px; }
    .lomas-gallery__arrow--next { right: 12px; }
    .lomas-gallery__thumbs { display: none; }
}

.page-vista-lomas *,
.page-vista-lomas *::before,
.page-vista-lomas *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* ==========================================================================
   LIONSGATE — An Extraordinary Private Retreat
   Identidad propia: borgoña profundo + acentos dorados, sobre la base del
   lenguaje visual de Dream City. La página comparte navbar/footer/helpers y
   solo evoluciona el token de color de la línea y los elementos exclusivos.
   ========================================================================== */
.page-lionsgate {
    --lionsgate-wine: #8b2c2c;
    --lionsgate-wine-deep: #732323;
    --lionsgate-gold: #b1914a;
    background: #fff;
}

.page-lionsgate .navbar > .gold-line {
    height: 7px;
    background: linear-gradient(90deg, #6d2222 0%, #8b2c2c 28%, #b1914a 58%, #8b2c2c 82%, #6d2222 100%);
}

.page-lionsgate .navbar__link::after {
    height: 3px;
    background: var(--lionsgate-gold);
}

.page-lionsgate .navbar__link:hover { color: #e4bd86; }

.lionsgate-brand {
    display: grid;
    justify-items: center;
    padding: clamp(66px, 7vw, 108px) 24px clamp(56px, 6vw, 88px);
    text-align: center;
}

.lionsgate-brand__eyebrow {
    margin-bottom: 18px;
    color: var(--lionsgate-wine);
    font-size: clamp(0.72rem, 1vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.lionsgate-brand__title {
    color: var(--lionsgate-wine-deep);
    font-size: clamp(2.2rem, 5.4vw, 4rem);
    line-height: 1.08;
    letter-spacing: 0.04em;
}

.lionsgate-brand__lede {
    max-width: 660px;
    margin-top: 22px;
    color: #181818;
    font-size: clamp(1.224rem, 1.68vw, 1.464rem);
    font-weight: 300;
    line-height: 1.6;
}

.lionsgate-line {
    height: 6px;
    background: var(--lionsgate-gold);
}

.lionsgate-hero {
    display: block;
    width: 100%;
    background: #fff;
}

.lionsgate-hero__image {
    width: 100%;
    height: clamp(320px, 52vw, 820px);
    object-fit: cover;
    object-position: center;
}

/* ── The Lionsgate Experience ─────────────────────────────── */
.lionsgate-experience {
    padding: clamp(100px, 10vw, 140px) clamp(24px, 4vw, 64px);
    background: #fff;
}

.lionsgate-experience__intro,
.lionsgate-experience__highlights {
    max-width: var(--container);
    margin-inline: auto;
}

.lionsgate-experience__eyebrow {
    margin-bottom: clamp(20px, 2.6vw, 34px);
    color: var(--lionsgate-wine);
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 0.95vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.lionsgate-experience__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    align-items: start;
    gap: clamp(32px, 6vw, 96px);
}

.lionsgate-experience__title {
    color: var(--lionsgate-wine-deep);
    font-size: clamp(2.1rem, 4.2vw, 3.6rem);
    font-weight: 500;
    line-height: 1.18;
    text-wrap: balance;
}

.lionsgate-experience__lede {
    align-self: end;
    color: #5a5a5a;
    font-size: clamp(1.2rem, 1.32vw, 1.38rem);
    font-weight: 300;
    line-height: 1.7;
    max-width: 42ch;
    text-wrap: pretty;
}

.lionsgate-experience__rule {
    height: 1px;
    max-width: var(--container);
    margin: clamp(48px, 6vw, 80px) auto clamp(36px, 4.5vw, 56px);
    background: linear-gradient(90deg, var(--lionsgate-gold) 0 120px, rgba(177, 145, 74, 0.22) 120px 100%);
}

.lionsgate-experience__highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vw, 64px);
    list-style: none;
}

.lionsgate-experience__highlight {
    border-top: 1px solid rgba(139, 44, 44, 0.35);
    padding-top: clamp(14px, 1.6vw, 20px);
}

.lionsgate-experience__highlight-title {
    margin-bottom: 8px;
    color: var(--lionsgate-wine-deep);
    font-family: var(--font-title);
    font-size: clamp(0.95rem, 1.25vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lionsgate-experience__highlight-text {
    color: #6a6a6a;
    font-size: clamp(1.2rem, 1.32vw, 1.38rem);
    font-weight: 300;
    line-height: 1.55;
    max-width: 34ch;
    text-wrap: pretty;
}

@media (max-width: 860px) {
    .lionsgate-experience__grid {
        grid-template-columns: 1fr;
        gap: clamp(20px, 3vw, 28px);
    }

    .lionsgate-experience__title {
        font-size: clamp(1.85rem, 5vw, 2.6rem);
    }

    .lionsgate-experience__lede {
        max-width: 60ch;
    }
}

@media (max-width: 640px) {
    .lionsgate-experience {
        padding: clamp(80px, 12vw, 110px) 22px;
    }

    .lionsgate-experience__rule {
        margin: clamp(40px, 8vw, 52px) 0 clamp(28px, 5vw, 36px);
    }

    .lionsgate-experience__highlights {
        grid-template-columns: 1fr;
        gap: clamp(24px, 6vw, 36px);
    }
}

.lionsgate-gallery {
    padding: clamp(52px, 6vw, 88px) 0 0;
    overflow: hidden;
}

.lionsgate-gallery__head {
    max-width: 720px;
    margin: 0 auto clamp(24px, 3vw, 42px);
    padding: 0 24px;
    text-align: center;
}

.lionsgate-gallery__eyebrow {
    margin-bottom: 10px;
    color: var(--lionsgate-wine);
    font-size: clamp(0.72rem, 1vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.lionsgate-gallery__head h2 {
    color: var(--lionsgate-wine-deep);
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    line-height: 1.15;
}

.lionsgate-gallery__empty {
    padding-bottom: clamp(40px, 5vw, 80px);
    color: var(--color-body);
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
}

.lionsgate-slider {
    position: relative;
    width: min(calc(100% - clamp(132px, 12vw, 220px)), 1760px);
    margin: 0 auto;
    outline: none;
}

.lionsgate-slider__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 2.12 / 1;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.lionsgate-slider:focus-visible .lionsgate-slider__viewport {
    outline: 1px solid var(--lionsgate-gold);
    outline-offset: 6px;
}

.lionsgate-slider__track {
    position: absolute;
    inset: 0;
}

.lionsgate-slider.is-dragging .lionsgate-slider__viewport {
    cursor: grabbing;
}

.lionsgate-slider.is-dragging .lionsgate-slider__slide {
    transition: none;
}

.lionsgate-slider__slide {
    position: absolute;
    top: 0;
    left: 11%;
    z-index: 0;
    width: 78%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #ece7df;
    box-shadow: 0 14px 28px rgba(37, 25, 19, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(var(--lionsgate-drag-x, 0px), 0, 0) scale(0.9);
    transform-origin: center;
    transition:
        transform 560ms cubic-bezier(0.2, 0.72, 0.2, 1),
        opacity 280ms ease;
}

.lionsgate-slider__slide.is-prev,
.lionsgate-slider__slide.is-next {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform;
}

.lionsgate-slider__slide.is-prev {
    transform: translate3d(calc(-35% + var(--lionsgate-drag-x, 0px)), 0, 0) scale(0.58, 0.86);
}

.lionsgate-slider__slide.is-next {
    transform: translate3d(calc(35% + var(--lionsgate-drag-x, 0px)), 0, 0) scale(0.58, 0.86);
}

.lionsgate-slider__slide.is-active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(var(--lionsgate-drag-x, 0px), 0, 0);
    box-shadow: 0 22px 36px rgba(37, 25, 19, 0.28);
    will-change: transform;
    cursor: pointer;
}

.lionsgate-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

.lionsgate-slider__controls {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    pointer-events: none;
}

.lionsgate-slider__arrow {
    --lionsgate-arrow-size: clamp(58px, 4.6vw, 76px);
    position: absolute;
    top: 50%;
    display: inline-grid;
    align-items: center;
    place-items: center;
    width: var(--lionsgate-arrow-size);
    min-width: var(--lionsgate-arrow-size);
    max-width: var(--lionsgate-arrow-size);
    height: var(--lionsgate-arrow-size);
    min-height: var(--lionsgate-arrow-size);
    max-height: var(--lionsgate-arrow-size);
    padding: 0;
    border: 1px solid rgba(196, 157, 82, 0.82);
    border-radius: 0;
    overflow: hidden;
    background: rgba(76, 22, 25, 0.94);
    color: #fffaf0;
    box-shadow:
        0 12px 30px rgba(37, 25, 19, 0.3),
        inset 0 0 0 5px rgba(255, 255, 255, 0.06);
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.lionsgate-slider__arrow--prev {
    left: calc(-1 * clamp(60px, 4.8vw, 90px));
}

.lionsgate-slider__arrow--next {
    right: calc(-1 * clamp(60px, 4.8vw, 90px));
}

.lionsgate-slider__arrow svg {
    width: 52%;
    height: auto;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lionsgate-slider__arrow:hover,
.lionsgate-slider__arrow:focus-visible {
    border-color: var(--lionsgate-wine-deep);
    background: var(--lionsgate-gold);
    color: var(--lionsgate-wine-deep);
    box-shadow:
        0 16px 36px rgba(37, 25, 19, 0.38),
        0 0 0 5px rgba(196, 157, 82, 0.2);
    outline: none;
    transform: translateY(-50%) scale(1.08);
}

.lionsgate-slider__arrow:active {
    transform: translateY(-50%) scale(0.96);
}

.lionsgate-lightbox[hidden] {
    display: none;
}

.lionsgate-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: clamp(88px, 10vh, 112px) clamp(28px, 5vw, 96px) clamp(28px, 5vh, 56px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 30%),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.075), transparent 34%),
        linear-gradient(180deg, rgba(17, 19, 22, 0.88), rgba(5, 6, 8, 0.94));
    -webkit-backdrop-filter: blur(30px) saturate(0.42) brightness(0.58);
    backdrop-filter: blur(30px) saturate(0.42) brightness(0.58);
    cursor: default;
    animation: lionsgate-lightbox-in 220ms ease-out both;
}

.lionsgate-lightbox__image {
    display: block;
    width: auto;
    max-width: min(92vw, 1680px);
    height: auto;
    max-height: calc(100dvh - 156px);
    object-fit: contain;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.72),
        0 0 0 6px rgba(255, 255, 255, 0.035),
        0 1px 0 rgba(255, 255, 255, 0.12);
    cursor: default;
    animation: lionsgate-lightbox-image-in 320ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.lionsgate-lightbox__close {
    position: fixed;
    top: max(22px, env(safe-area-inset-top));
    right: max(28px, env(safe-area-inset-right));
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 12px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid rgba(198, 161, 91, 0.72);
    border-radius: 3px;
    background: rgba(76, 22, 25, 0.76);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.lionsgate-lightbox__close svg {
    width: 22px;
    height: 22px;
    transition: transform 180ms ease;
}

.lionsgate-lightbox__close:hover {
    border-color: rgba(198, 161, 91, 0.92);
    background: rgba(105, 30, 34, 0.94);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.lionsgate-lightbox__close:hover svg {
    transform: rotate(90deg);
}

.lionsgate-lightbox__close:focus-visible {
    border-color: var(--lionsgate-gold);
    background: rgba(76, 22, 25, 0.96);
    color: #fff;
    outline: 2px solid rgba(198, 161, 91, 0.5);
    outline-offset: 3px;
}

body.lionsgate-lightbox-open {
    overflow: hidden;
}

@keyframes lionsgate-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lionsgate-lightbox-image-in {
    from { opacity: 0; transform: scale(0.975); }
    to { opacity: 1; transform: scale(1); }
}

.lionsgate-contact {
    display: grid;
    justify-items: center;
    padding: clamp(34px, 4vw, 64px) 24px clamp(54px, 6vw, 92px);
    text-align: center;
}

.lionsgate-contact h2 {
    color: var(--lionsgate-wine-deep);
    font-family: var(--font-title);
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
}

.lionsgate-contact p {
    margin: clamp(18px, 2vw, 26px) 0 clamp(24px, 2.6vw, 34px);
    color: #585858;
    font-size: clamp(1.2rem, 1.32vw, 1.38rem);
    font-weight: 300;
    line-height: 1.6;
}

.lionsgate-contact__button {
    display: inline-grid;
    min-width: 199.2px;
    min-height: 55.2px;
    place-items: center;
    border: 1px solid var(--lionsgate-wine);
    border-radius: 2px;
    background: var(--lionsgate-wine-deep);
    color: #fff;
    font-size: 0.984rem;
    font-weight: 600;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.lionsgate-contact__button:hover,
.lionsgate-contact__button:focus-visible {
    background: transparent;
    color: var(--lionsgate-gold);
    outline: none;
    transform: translateY(-2px);
}

.lionsgate-back {
    display: grid;
    justify-items: center;
    padding: clamp(18px, 2.5vw, 32px) 24px clamp(64px, 7vw, 108px);
}

.lionsgate-back__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 57.6px;
    padding: 14.4px 26.4px;
    border: 1px solid var(--lionsgate-wine);
    border-radius: 2px;
    background: var(--lionsgate-wine-deep);
    color: #fff;
    font-size: 1.14rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.lionsgate-back__icon {
    width: 24px;
    height: 24px;
    transition: transform 180ms ease;
}

.lionsgate-back__link:hover,
.lionsgate-back__link:focus-visible {
    border-color: var(--lionsgate-wine-deep);
    background: transparent;
    color: var(--lionsgate-wine-deep);
    box-shadow: 0 10px 24px rgba(76, 22, 25, 0.18);
    outline: none;
    transform: translateY(-2px);
}

.lionsgate-back__link:hover .lionsgate-back__icon {
    transform: translateX(-4px);
}

@media (max-width: 860px) {
    .lionsgate-hero__image { height: clamp(280px, 60vw, 460px); }
}

@media (max-width: 520px) {
    .lionsgate-brand { padding-block: 52px 44px; }
    .lionsgate-brand__eyebrow { margin-bottom: 14px; }
    .lionsgate-gallery { padding: 44px 0 0; }
    .lionsgate-hero__image { height: clamp(240px, 82vw, 380px); }
    .lionsgate-slider { width: calc(100% - 12px); }
    .lionsgate-slider__viewport { aspect-ratio: 16 / 11; }
    .lionsgate-slider__slide {
        left: 7%;
        width: 86%;
    }
    .lionsgate-slider__slide.is-prev {
        transform: translate3d(calc(-31.2% + var(--lionsgate-drag-x, 0px)), 0, 0) scale(0.54, 0.84);
    }
    .lionsgate-slider__slide.is-next {
        transform: translate3d(calc(31.2% + var(--lionsgate-drag-x, 0px)), 0, 0) scale(0.54, 0.84);
    }
    .lionsgate-slider__controls {
        position: relative;
        inset: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        padding: 18px 16px 42px;
    }
    .lionsgate-slider__arrow {
        --lionsgate-arrow-size: 50px;
        position: relative;
        top: auto;
        transform: none;
    }
    .lionsgate-slider__arrow--prev { left: auto; }
    .lionsgate-slider__arrow--next { right: auto; }
    .lionsgate-slider__arrow:hover,
    .lionsgate-slider__arrow:focus-visible { transform: scale(1.08); }
    .lionsgate-slider__arrow:active { transform: scale(0.96); }
    .lionsgate-lightbox {
        padding: calc(76px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
    }
    .lionsgate-lightbox__image {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        box-shadow: 0 20px 52px rgba(0, 0, 0, 0.58);
    }
    .lionsgate-lightbox__close {
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        min-height: 46px;
        padding-inline: 16px 14px;
    }
    .lionsgate-contact { padding: 24px 22px 64px; }
    .lionsgate-back { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .lionsgate-slider__slide {
        transition-duration: 1ms;
    }

    .lionsgate-contact__button {
        transition-duration: 1ms;
    }

    .lionsgate-back__link,
    .lionsgate-back__icon {
        transition-duration: 1ms;
    }

    .lionsgate-lightbox__close,
    .lionsgate-lightbox__close svg {
        transition-duration: 1ms;
    }

    .lionsgate-lightbox,
    .lionsgate-lightbox__image {
        animation-duration: 1ms;
    }
}

/* ==========================================================================
   LATEST NEW (BLOG)
   ========================================================================== */
.news {
    padding: 0 24px var(--section-gap);
}

.news__grid {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.news-card {
    background: #f7f7f7;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 24, 73, 0.12);
}

.news-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--grad-blue);
}

.news-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.news-card:hover .news-card__media img {
    transform: scale(1.05);
}

.news-card__badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--grad-gold);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(0, 24, 73, 0.25);
}

.news-card__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 26px 26px;
    flex: 1;
}

.news-card__date {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
    padding-bottom: 8px;
    border-bottom: 1px solid #1a1a1a;
    align-self: flex-start;
}

.news-card__title {
    font-family: var(--font-body);
    font-size: 1.45rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.25;
}

.news-card__excerpt {
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.5;
}

.news-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.news-card__share {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid #e2e2e2;
}

.news-card__share-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #58647a;
}

.news-card__share-actions {
    display: flex;
    gap: 8px;
}

.news-card__share .detail__share-button {
    width: 34px;
    height: 34px;
}

.news-card__share .detail__share-button svg {
    width: 16px;
    height: 16px;
}

.news-card__share-feedback {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    color: #158447;
    font-size: 0.72rem;
    font-weight: 600;
}

.news-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
}

.news-card__avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--grad-blue);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.news-card__more {
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    transition: color 0.25s ease;
}

.news-card__more:hover {
    color: var(--color-title);
}

/* Listado del blog: primera tarjeta destacada en horizontal */
.news--blog {
    padding-top: 56px;
}

.news--blog .news-card__title a {
    transition: color 0.2s ease;
}

.news--blog .news-card__title a:hover {
    color: var(--color-title);
}

.news-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    background: #f7f7f7;
}

.news-card--featured .news-card__media {
    aspect-ratio: auto;
    min-height: 380px;
    max-height: 480px;
}

.news-card--featured .news-card__body {
    justify-content: center;
    gap: 18px;
    padding: clamp(28px, 4vw, 52px);
}

.news-card--featured .news-card__title {
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    color: var(--color-title);
    line-height: 1.2;
}

.news-card--featured .news-card__excerpt {
    font-size: 1.1rem;
    line-height: 1.65;
}

.news-card--featured .news-card__footer {
    margin-top: 8px;
}

@media (max-width: 1080px) {
    .news-card--featured {
        grid-template-columns: 1fr;
    }

    .news-card--featured .news-card__media {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    .news-card--featured .news-card__body {
        padding: 24px 26px 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-card__media img {
        transition: none;
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background: linear-gradient(115deg, #001e65 0%, #002a93 48%, #001849 100%);
    color: #fff;
    padding: 64px 24px 28px;
}

.footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.footer__brand img {
    width: clamp(200px, 16vw, 290px);
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.3));
}

.footer__heading {
    font-family: var(--font-body);
    font-size: 1.35rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 22px;
}

.footer__col a {
    display: block;
    color: #e8ecf7;
    font-size: 1.02rem;
    font-weight: 300;
    padding: 7px 0;
    transition: color 0.25s ease;
}

.footer__col a:hover {
    color: #f0c964;
}

.footer__social {
    display: flex;
    gap: 26px;
}

.footer__social a {
    padding: 0;
}

.footer__social svg,
.footer__social .fa-brands {
    width: 30px;
    height: 30px;
}

.footer__social .fa-brands {
    display: block;
    font-size: 30px;
    line-height: 1;
    text-align: center;
}

.footer__copy {
    max-width: var(--container);
    margin: 48px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.9rem;
    font-weight: 300;
    color: #c9d2ea;
    text-align: center;
}

/* ==========================================================================
   PÁGINAS INTERNAS (cabecera común, botones, formularios)
   ========================================================================== */
.page-head {
    padding-top: var(--section-gap);
}

.page-head .section-head {
    margin-bottom: 0;
}

.btn-primary {
    display: inline-block;
    background: var(--grad-blue);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    border: 0;
    border-radius: 8px;
    padding: 15px 42px;
    cursor: pointer;
    transition: filter 0.25s ease, transform 0.15s ease;
}

.btn-primary:hover {
    filter: brightness(1.3);
    transform: translateY(-2px);
}

.btn-gold {
    display: inline-block;
    background: var(--grad-gold);
    color: #001849;
    font-weight: 600;
    font-size: 1.05rem;
    border-radius: 8px;
    padding: 15px 42px;
    transition: filter 0.25s ease, transform 0.15s ease;
}

.btn-gold:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* Campos de formulario */
.field {
    display: block;
}

.field__label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-title);
    margin-bottom: 7px;
}

.field input,
.field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-body);
    background: #fff;
    border: 1px solid #8a8a8a;
    border-radius: 8px;
    padding: 14px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea {
    resize: vertical;
    min-height: 130px;
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-title);
    box-shadow: 0 0 0 3px rgba(0, 41, 145, 0.12);
}

/* Mensajes flash */
.flash {
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 0.98rem;
}

.flash--success {
    background: #e8f5ec;
    color: #157f3d;
    border: 1px solid #157f3d;
}

.flash--error {
    background: #fdecec;
    color: #b02a2a;
    border: 1px solid #b02a2a;
}

/* ==========================================================================
   PROPERTIES (listado con filtros)
   ========================================================================== */
.properties-workspace {
    width: min(calc(100% - 48px), var(--container));
    margin: 48px auto 0;
}

.properties-workspace.has-map {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(380px, 0.92fr);
    grid-template-areas:
        "filters map"
        "results map";
    align-items: start;
    gap: 38px 28px;
    margin-bottom: clamp(56px, 7vw, 104px);
}

.filters {
    grid-area: filters;
    min-width: 0;
    padding: 0;
}

.filters__card {
    width: 100%;
    max-width: none;
    margin: 0;
    background: #fff;
    border: 1px solid #c19436;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0, 24, 73, 0.06);
    padding: 32px 32px 36px;
}

.properties-workspace:not(.has-map) .filters__card {
    max-width: 940px;
    margin-inline: auto;
}

.filters__card .search__tabs {
    margin-bottom: 0;
}

/* Filtro de precio del listado */
.filters__price {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    max-width: 560px;
    margin: 28px auto 0;
    padding-top: 24px;
    border-top: 1px solid #eef0f6;
}

.filters__apply {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--grad-blue);
    border: 0;
    border-radius: 10px;
    padding: 12px 28px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.22s ease;
}

.filters__apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 30, 101, 0.25);
}

.filters__price.is-live .filters__apply {
    display: none;
}

.filters__price.is-auto-applying .filters__apply,
.custom-filter-form.is-auto-applying .custom-filter-form__submit {
    opacity: 0.72;
    pointer-events: none;
}

.filters__price.is-auto-applying .filters__apply::after,
.custom-filter-form.is-auto-applying .custom-filter-form__submit::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 9px;
    vertical-align: -1px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #fff;
    border-radius: 50%;
    animation: filter-submit-spin 0.65s linear infinite;
}

@keyframes filter-submit-spin {
    to { transform: rotate(360deg); }
}

.results {
    transition: opacity 0.2s ease;
}

.results[aria-busy="true"] {
    opacity: 0.48;
    pointer-events: none;
}

.filters__clear {
    max-width: 560px;
    margin: 12px auto 0;
    font-size: 0.9rem;
    text-align: right;
}

.filters__clear a {
    color: var(--color-body);
    text-decoration: underline;
}

.filters__clear a:hover { color: var(--color-title); }

@media (max-width: 560px) {
    .filters__price {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .filters__clear { text-align: center; }
}

.results {
    grid-area: results;
    min-width: 0;
    padding: 0 0 var(--section-gap);
    scroll-margin-top: calc(var(--navbar-height) + 30px);
}

.results__count {
    margin: 0 0 24px;
    font-size: 1.05rem;
    color: var(--color-body);
}

/* Listado + mapa de propiedades */
.results__layout {
    width: 100%;
    margin: 0;
    display: block;
}

.results__grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.properties-workspace.has-map .results__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Variante compacta: conserva el lenguaje visual de las cards del home. */
.results__grid .property-card__media {
    aspect-ratio: 16 / 10;
}

.results__grid .property-card__price {
    width: auto;
    min-width: 58%;
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    padding: 7px 14px;
}

.results__grid .property-card__body {
    gap: 11px;
    padding: 14px 13px 15px;
}

.results__grid .property-card__title {
    font-size: 0.94rem;
}

.results__grid .property-card__meta {
    gap: 7px;
}

.results__grid .property-card__location,
.results__grid .property-card__status {
    min-width: 0;
    font-size: 0.79rem;
    padding: 7px 6px;
}

.results__grid .property-card__location {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.results__grid .property-card__floor {
    top: 9px;
    left: 9px;
    padding: 5px 10px;
    font-size: 0.75rem;
}

.results__grid .property-card__specs {
    gap: 8px;
}

.results__grid .property-card__specs li {
    padding: 9px 5px 8px;
}

.results__grid .property-card__specs img {
    width: 26px;
    height: 26px;
    margin-bottom: 1px;
}

.results__grid .property-card__specs small {
    font-size: 0.74rem;
}

.results__grid .property-card__cta {
    font-size: 0.92rem;
    padding: 9px;
}

.results-map {
    grid-area: map;
    position: sticky;
    top: calc(var(--navbar-height) + 22px);
    min-width: 0;
    margin: 0;
}

.results-map__sticky {
    overflow: hidden;
    border: 1px solid #9db4e0;
    border-radius: 18px;
    background: #f7f9fd;
    box-shadow: 0 18px 45px rgba(0, 24, 73, 0.12);
}

.results-map__head {
    min-height: 68px;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(157, 180, 224, 0.7);
    background: linear-gradient(120deg, #fff 0%, #eef4ff 100%);
}

.results-map__eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #9b6a13;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.results-map__head h2 {
    font-size: clamp(1.15rem, 1.55vw, 1.45rem);
}

.results-map__total {
    flex: 0 0 auto;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--grad-blue);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 41, 145, 0.22);
}

.results-map__canvas {
    position: relative;
    z-index: 0;
    width: 100%;
    height: clamp(460px, calc(100vh - var(--navbar-height) - 190px), 680px);
    min-height: 460px;
    background: #e8eef5;
}

.results-map__canvas.is-empty {
    display: grid;
    place-items: center;
    padding: 40px;
    text-align: center;
}

.results-map__reset {
    position: absolute;
    z-index: 1000;
    top: 12px;
    right: 12px;
    padding: 8px 14px;
    border: 1px solid rgba(0, 41, 145, 0.18);
    border-radius: 999px;
    background: #fff;
    color: #002991;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.16);
}

.results-map__reset:hover,
.results-map__reset:focus-visible {
    background: #002991;
    color: #fff;
}

.results-map__hint {
    padding: 10px 18px 12px;
    color: #667085;
    font-size: 0.78rem;
    text-align: center;
}

.property-map-marker {
    display: grid;
    place-items: center;
    width: 100%;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 8px;
    background: #b31322;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 5px 13px rgba(80, 0, 8, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}

.property-map-marker::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 9px;
    height: 9px;
    background: inherit;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateX(-50%) rotate(45deg);
}

.property-map-marker.is-active {
    z-index: 2;
    background: var(--color-title);
    transform: translateY(-3px) scale(1.08);
}

.property-map-marker.is-selected {
    z-index: 2;
    background: var(--color-title);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 7px 18px rgba(0, 41, 145, 0.34);
}

.results__grid .property-card[hidden],
.pagination[hidden] {
    display: none;
}

.results__grid.is-map-filtered .property-card:not([hidden]) {
    animation: map-filter-card-in 0.28s ease both;
}

.properties-workspace.has-map .results,
.properties-workspace.has-map .results__grid {
    overflow-anchor: none;
}

@keyframes map-filter-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.property-map-leaflet-popup .leaflet-popup-content-wrapper {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(0, 41, 145, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 48px rgba(6, 24, 58, 0.22);
}

.property-map-leaflet-popup .leaflet-popup-content {
    width: 328px !important;
    margin: 0;
    font-family: var(--font-body);
}

.property-map-leaflet-popup .leaflet-popup-tip {
    box-shadow: 4px 4px 10px rgba(6, 24, 58, 0.12);
}

.property-map-leaflet-popup .leaflet-popup-close-button {
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #50617d;
    font: 22px/1 var(--font-body);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.property-map-leaflet-popup .leaflet-popup-close-button:hover,
.property-map-leaflet-popup .leaflet-popup-close-button:focus-visible {
    background: #e8eefb;
    color: var(--color-title);
    transform: rotate(6deg);
    outline: none;
}

.property-map-popup {
    width: 100%;
    color: var(--color-body);
}

.property-map-popup__header {
    min-height: 58px;
    padding: 15px 52px 13px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e7ebf3;
    background: linear-gradient(115deg, #f5f8ff 0%, #fff 72%);
}

.property-map-popup__location {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--color-title);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.property-map-popup__count {
    flex: 0 0 auto;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--color-title);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}

.property-map-popup__list {
    padding: 4px 12px;
    overscroll-behavior: contain;
}

.property-map-popup.is-expanded .property-map-popup__list {
    max-height: 310px;
    overflow-y: auto;
    scrollbar-color: #a9b5c9 transparent;
    scrollbar-width: thin;
}

.property-map-popup__item {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    min-height: 78px;
    padding: 9px 6px;
    border-bottom: 1px solid #edf0f5;
    border-radius: 9px;
    transition: background 0.18s ease, transform 0.18s ease;
}

.property-map-popup__item:last-child {
    border-bottom-color: transparent;
}

.property-map-popup__item:hover,
.property-map-popup__item:focus-visible {
    background: #f3f6fc;
    transform: translateX(2px);
    outline: none;
}

.property-map-popup__item img {
    width: 78px;
    height: 58px;
    border-radius: 9px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(15, 35, 70, 0.12);
}

.property-map-popup__copy {
    min-width: 0;
}

.property-map-popup__item strong,
.property-map-popup__item span {
    display: block;
}

.property-map-popup__item strong {
    color: var(--color-title);
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.79rem;
    font-weight: 600;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.property-map-popup__item span {
    margin-top: 5px;
    color: #9b6a13;
    font-size: 0.76rem;
    font-weight: 700;
}

.property-map-popup__item .property-map-popup__arrow {
    margin: 0;
    color: #8d9ab0;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    transition: color 0.18s ease, transform 0.18s ease;
}

.property-map-popup__item:hover .property-map-popup__arrow,
.property-map-popup__item:focus-visible .property-map-popup__arrow {
    color: var(--color-title);
    transform: translateX(2px);
}

.property-map-popup__remaining {
    width: calc(100% - 24px);
    margin: 4px 12px 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: 9px;
    background: #eef3ff;
    color: var(--color-title);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.property-map-popup__remaining:hover,
.property-map-popup__remaining:focus-visible {
    background: var(--color-title);
    color: #fff;
    transform: translateY(-1px);
    outline: none;
}

@media (max-width: 480px) {
    .property-map-leaflet-popup .leaflet-popup-content {
        width: min(300px, calc(100vw - 56px)) !important;
    }

    .property-map-popup__item {
        grid-template-columns: 68px minmax(0, 1fr) 12px;
        gap: 9px;
    }

    .property-map-popup__item img {
        width: 68px;
        height: 54px;
    }
}

@media (max-width: 1120px) {
    .properties-workspace.has-map {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "filters"
            "map"
            "results";
        gap: 36px;
    }

    .results-map {
        position: static;
        margin: 0;
    }

    .results-map__canvas {
        height: 480px;
        min-height: 0;
    }

    .properties-workspace.has-map .results__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .properties-workspace {
        width: calc(100% - 28px);
        margin-top: 32px;
    }

    .filters__card {
        padding: 24px 18px 28px;
    }

    .results {
        padding: 0 0 var(--section-gap);
    }

    .results__grid,
    .properties-workspace.has-map .results__grid {
        grid-template-columns: 1fr;
        max-width: 430px;
        margin-inline: auto;
    }

    .results-map__canvas {
        height: 390px;
    }

    .results-map__hint {
        display: none;
    }
}

.results__empty {
    max-width: 560px;
    margin: 40px auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.results__empty img {
    width: 110px;
    opacity: 0.8;
}

.results__empty p {
    font-size: 1.2rem;
    font-weight: 400;
}

/* Aviso grande cuando no hay inventario para la operación buscada. */
.results__notice {
    max-width: 680px;
    margin: clamp(32px, 6vw, 64px) auto;
    padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
    border: 1px solid rgba(196, 151, 74, 0.32);
    border-radius: 6px 34px 6px 34px;
    background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);
    box-shadow: 0 18px 48px rgba(0, 25, 73, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.results__notice img {
    width: 96px;
    opacity: 0.85;
}

.results__notice h2 {
    margin: 0;
    color: var(--color-title);
    font-family: var(--font-title);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.25;
    text-wrap: balance;
}

.results__notice p {
    margin: 0;
    max-width: 52ch;
    font-size: 1.05rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.results__notice-actions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.results__notice-whatsapp,
.results__notice-contact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 999px;
    padding: 14px 26px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.results__notice-whatsapp {
    background: #25d366;
    color: #06331a;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.3);
}

.results__notice-whatsapp i {
    font-size: 1.3rem;
}

.results__notice-whatsapp:hover,
.results__notice-whatsapp:focus-visible {
    background: #1fbb59;
    transform: translateY(-1px);
}

.results__notice-contact {
    border: 1px solid rgba(0, 41, 145, 0.28);
    background: #fff;
    color: var(--color-title);
}

.results__notice-contact:hover,
.results__notice-contact:focus-visible {
    background: var(--color-title);
    color: #fff;
}

.results__similar {
    margin-top: clamp(2rem, 5vw, 4.5rem);
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid rgba(196, 151, 74, .32);
}

.results__similar-head {
    max-width: 620px;
    margin-bottom: 1.5rem;
}

.results__similar-head span {
    display: block;
    margin-bottom: .35rem;
    color: #925e08;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.results__similar-head h2 {
    margin: 0;
    color: var(--color-title);
    font-family: var(--font-title);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.results__similar-head p {
    margin: .6rem 0 0;
    color: var(--color-body);
    line-height: 1.6;
}

.properties-workspace.has-map .results__similar-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 48px;
}

.pagination__page {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border: 1px solid var(--color-title);
    border-radius: 8px;
    color: var(--color-title);
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.pagination__page:hover {
    background: rgba(0, 41, 145, 0.08);
}

.pagination__page--current {
    background: var(--grad-blue);
    border-color: transparent;
    color: #fff;
}

.pagination__page--direction {
    width: auto;
    padding-inline: 16px;
    gap: 7px;
}

/* Paginación pública: controles limpios, sin efectos decorativos. */
.pagination--properties {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
    gap: 8px;
    border: 0;
    background: transparent;
}

.pagination--top {
    margin-top: 0;
    margin-bottom: 28px;
}

.pagination--bottom {
    margin-top: 44px;
}

.pagination--properties .pagination__numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.pagination--properties .pagination__page {
    border-color: rgba(0, 41, 145, .28);
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    transition: none;
}

.pagination--properties a.pagination__page:hover {
    border-color: var(--color-title);
    background: rgba(0, 41, 145, .05);
    color: var(--color-title);
}

.pagination--properties .pagination__page--current {
    border-color: transparent;
    background: var(--color-title);
    color: #fff;
}

.pagination--properties .pagination__page--direction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 106px;
    white-space: nowrap;
    border-color: rgba(0, 41, 145, .4);
    color: #00206f;
}

.pagination--properties .pagination__page--disabled {
    border-color: rgba(81, 81, 81, .2);
    background: #f7f7f7;
    color: rgba(81, 81, 81, .48);
    cursor: default;
    user-select: none;
}

.pagination--properties .pagination__page:focus-visible {
    outline: 2px solid rgba(0, 41, 145, .55);
    outline-offset: 3px;
}

@media (max-width: 620px) {
    .pagination--properties {
        width: 100%;
        border-radius: 14px;
    }

    .pagination--properties .pagination__numbers {
        order: -1;
        width: 100%;
    }

    .pagination--properties .pagination__page--direction {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
}

/* ==========================================================================
   DETALLE DE PROPIEDAD
   ========================================================================== */
.detail {
    padding: 48px 24px var(--section-gap);
}

.detail__wrap {
    max-width: 1360px;
    margin: 0 auto;
}

.detail__back {
    margin-bottom: 24px;
}

.detail__back a {
    color: var(--color-title);
    font-weight: 500;
    transition: color 0.2s ease;
}

.detail__back a:hover {
    color: #c19436;
}

.detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.detail__main,
.detail__side {
    min-width: 0;
}

/* Galería */
/* Espacio lateral para las flechas; las miniaturas usan el mismo para alinearse */
.detail__gallery-stage {
    position: relative;
    padding: 0 44px;
}

.detail__gallery-main {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 14px 44px rgba(0, 24, 73, 0.14);
}

/* Flechas FUERA de la imagen (en el espacio lateral), no la tapan */
.detail__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--color-title);
    background: #fff;
    border: 1.5px solid var(--color-title);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 20, 60, 0.12);
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.detail__nav svg { width: 20px; height: 20px; }
.detail__nav--prev { left: 4px; }
.detail__nav--next { right: 4px; }

.detail__nav:hover {
    background: var(--grad-blue);
    border-color: transparent;
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

@media (max-width: 560px) {
    .detail__gallery-stage { padding: 0 40px; }
    .detail__gallery-thumbs { padding: 0 40px; }
    .detail__nav { width: 34px; height: 34px; }
    .detail__nav svg { width: 17px; height: 17px; }
}

.detail__gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail__gallery-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
    padding: 0 44px; /* mismo espacio que la imagen para alinear bordes */
}

.detail__thumb {
    width: 110px;
    aspect-ratio: 16 / 10;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: none;
    opacity: 0.75;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.detail__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail__thumb.is-active,
.detail__thumb:hover {
    opacity: 1;
    border-color: #c19436;
}

/* Descripción */
.detail__description {
    margin-top: 40px;
}

.detail__description h2 {
    font-size: 1.7rem;
    margin-bottom: 16px;
}

.detail__description p {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.7;
}

/* Contenido con formato (negrita, viñetas) de la descripción */
.rich-text {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.7;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}
.rich-text > * { max-width: 100%; }
.rich-text p { margin-bottom: 14px; }
.rich-text strong, .rich-text b { font-weight: 700; }
.rich-text ul {
    list-style: disc;
    margin: 12px 0 12px 24px;
}
.rich-text ol {
    list-style: decimal;
    margin: 12px 0 12px 24px;
}
.rich-text li { margin: 6px 0; }
.rich-text h2,
.rich-text h3 {
    color: var(--color-title);
    font-family: var(--font-title);
    line-height: 1.3;
    margin: 28px 0 12px;
}
.rich-text h2 { font-size: 1.55rem; }
.rich-text h3 { font-size: 1.25rem; }
.rich-text blockquote {
    border-left: 4px solid #c19436;
    color: #59647b;
    font-size: 1.08rem;
    line-height: 1.7;
    margin: 22px 0;
    padding: 8px 0 8px 20px;
}

/* Columna lateral */
.detail__side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: calc(var(--navbar-height) + 24px);
}

.detail__card {
    background: #fff;
    border: 1px solid #c19436;
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 10px 40px rgba(0, 24, 73, 0.06);
}

.detail__badges {
    display: flex;
    gap: 12px;
}

.detail__badges .property-card__location,
.detail__badges .property-card__status {
    flex: 0 1 auto;
    padding: 8px 16px;
}

.detail__title {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    line-height: 1.25;
}

.detail__price {
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-title);
}

.detail__price small {
    font-size: 0.55em;
    font-weight: 300;
}

/* Fila de etiquetas informativas bajo el precio (piso, amueblada) */
.detail__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.detail__pills .property-card__status--furnished {
    margin-top: 0;
}

/* Etiqueta "Floor": pill azul con el piso del apartamento */
.property-card__status--floor {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    width: fit-content;
    flex: 0 0 auto;
    padding: 6px 21px;
    font-size: 1.11rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--color-title);
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
}

.property-card__status--floor svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

/* Etiqueta "Furnished": pill verde informativa bajo el precio */
.property-card__status--furnished {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    flex: 0 0 auto;
    margin: 12px 0 0;
    padding: 6px 21px;
    font-size: 1.11rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: #157f3d;
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
}

.detail__share {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    margin-top: 24px;
    border-top: 1px solid rgba(0, 41, 145, 0.12);
    border-bottom: 1px solid rgba(0, 41, 145, 0.12);
}

.detail__share-label {
    margin-right: auto;
    color: #58647a;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail__share-actions {
    display: flex;
    gap: 8px;
}

.detail__share-button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #d7deeb;
    border-radius: 50%;
    background: #fff;
    color: var(--color-title);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.detail__share-button svg {
    width: 18px;
    height: 18px;
}

.detail__share-button:hover,
.detail__share-button:focus-visible {
    transform: translateY(-2px);
    border-color: #c19436;
    box-shadow: 0 5px 14px rgba(0, 41, 145, 0.12);
    outline: none;
}

.detail__share-button--whatsapp:hover,
.detail__share-button--whatsapp:focus-visible {
    border-color: #25d366;
    background: #25d366;
    color: #fff;
}

.detail__share-button--facebook:hover,
.detail__share-button--facebook:focus-visible {
    border-color: #1877f2;
    background: #1877f2;
    color: #fff;
}

.detail__share-check-icon { display: none; }
.detail__share-button--copy.is-copied {
    border-color: #158447;
    background: #158447;
    color: #fff;
}
.detail__share-button--copy.is-copied .detail__share-copy-icon { display: none; }
.detail__share-button--copy.is-copied .detail__share-check-icon { display: block; }

.detail__share-feedback {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    color: #158447;
    font-size: 0.75rem;
    font-weight: 600;
}

.detail__meta {
    font-size: 1rem;
}

.detail__meta strong {
    color: var(--color-title);
}

/* Formulario de interés */
.detail__form {
    background: #fff;
    border: 1px solid #9db4e0;
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail__form h2 {
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-title);
}

.detail__form .btn-primary {
    align-self: stretch;
    text-align: center;
}

/* Lightbox (imágenes a pantalla completa) */
.detail__gallery-main {
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 12, 42, 0.94);
    display: grid;
    place-items: center;
    animation: lightbox-in 0.25s ease;
}

.lightbox[hidden] {
    display: none;
}

@keyframes lightbox-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox__img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.lightbox__close {
    position: absolute;
    top: 18px;
    right: 26px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 2;
}

.lightbox__close:hover {
    color: #f0c964;
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 2;
}

.lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #f0c964;
}

.lightbox__nav--prev { left: 26px; }
.lightbox__nav--next { right: 26px; }

.lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 6px 18px;
}

@media (max-width: 640px) {
    .lightbox__nav {
        width: 44px;
        height: 44px;
    }

    .lightbox__nav--prev { left: 10px; }
    .lightbox__nav--next { right: 10px; }
}

/* ==========================================================================
   BLOG (artículo) — cabecera editorial + portada enmarcada
   ========================================================================== */
.reading-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1200;
    height: 3px;
    pointer-events: none;
}

.reading-progress span {
    display: block;
    height: 100%;
    background: var(--grad-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.12s linear;
}

.article {
    padding-bottom: var(--section-gap);
    background:
        radial-gradient(1200px 420px at 50% 0, rgba(193, 148, 54, 0.08), transparent 70%),
        #fff;
}

/* Cabecera: volver, meta, título, entradilla */
.article__hero {
    max-width: 880px;
    margin: 0 auto;
    padding: 44px 24px 36px;
    text-align: center;
}

.article__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    padding: 8px 16px 8px 12px;
    border: 1px solid #d7deeb;
    border-radius: 999px;
    color: var(--color-title);
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}

.article__back:hover,
.article__back:focus-visible {
    gap: 12px;
    border-color: transparent;
    background: var(--grad-blue);
    color: #fff;
    outline: none;
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #5f6b80;
}

.article__meta .news-card__author {
    font-size: 0.95rem;
}

.article__meta .news-card__avatar {
    width: 34px;
    height: 34px;
    font-size: 0.72rem;
}

.article__meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c19436;
}

.article__title {
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    line-height: 1.18;
    letter-spacing: 0.01em;
}

.article__wave {
    width: 96px;
    margin: 18px auto 0;
    display: block;
}

.article__lead {
    max-width: 680px;
    margin: 22px auto 0;
    font-size: clamp(1.08rem, 1.5vw, 1.25rem);
    font-weight: 300;
    line-height: 1.65;
    color: #4a5468;
}

/* Portada: tamaño contenido, marco dorado desplazado */
.article__cover {
    position: relative;
    width: min(100% - 48px, 1080px);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    max-height: min(62vh, 600px);
}

.article__cover::before {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 1.5px solid #c19436;
    border-radius: 22px;
    opacity: 0.55;
    pointer-events: none;
}

.article__cover img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    background: var(--grad-blue);
    box-shadow: 0 24px 60px rgba(0, 24, 73, 0.18);
}

/* Cuerpo + lateral */
.article__layout {
    max-width: 1240px;
    margin: 0 auto;
    padding: 72px 24px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 72px;
    align-items: start;
}

.article__layout--solo {
    grid-template-columns: minmax(0, 1fr);
}

.article__main {
    min-width: 0;
    max-width: 720px;
    width: 100%;
    justify-self: center;
}

.article__side {
    min-width: 0;
    position: sticky;
    top: calc(var(--navbar-height) + 24px);
}

/* Tipografía de lectura */
.article__body {
    font-size: 1.14rem;
    line-height: 1.8;
    color: #3f4757;
    overflow-wrap: break-word;
}

.article__body p {
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    margin-bottom: 22px;
}

.article__body--dropcap > p:first-child::first-letter {
    float: left;
    margin: 6px 12px 0 0;
    font-family: var(--font-title);
    font-size: 3.6em;
    font-weight: 600;
    line-height: 0.8;
    color: #c19436;
}

.article__body h2,
.article__body h3 {
    margin: 42px 0 14px;
    line-height: 1.3;
}

.article__body h2 {
    position: relative;
    padding-top: 18px;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
}

.article__body h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--grad-gold);
}

.article__body h3 {
    font-size: 1.25rem;
}

.article__body ul,
.article__body ol {
    margin: 16px 0 22px 22px;
}

.article__body li {
    margin: 8px 0;
    padding-left: 4px;
}

.article__body li::marker {
    color: #c19436;
}

.article__body blockquote {
    position: relative;
    margin: 34px 0;
    padding: 22px 26px 22px 30px;
    border-left: 4px solid #c19436;
    border-radius: 0 14px 14px 0;
    background: #faf6ee;
    color: #3d4a66;
    font-size: 1.18rem;
    font-style: italic;
    line-height: 1.7;
}

.article__body a {
    color: var(--color-title);
    text-decoration: underline;
    text-decoration-color: rgba(193, 148, 54, 0.6);
    text-underline-offset: 3px;
}

/* Cierre del artículo */
.article__end {
    margin-top: 44px;
}

.article__end-wave {
    display: block;
    width: 72px;
    margin: 0 auto 26px;
}

.article__share {
    margin-top: 0;
    padding: 16px 20px;
    border: 1px solid rgba(0, 41, 145, 0.1);
    border-radius: 16px;
    background: #f7f8fb;
}

.article__share .detail__share-feedback {
    right: 20px;
}

/* Cabecera del aside "Más Artículos" */
.article__side-head {
    margin-bottom: 20px;
}

.article__side-title {
    font-size: 1.25rem;
    line-height: 1.2;
}

.article__side-wave {
    width: 64px;
    margin: 10px 0 0;
}

/* ---------- Carrusel lateral ---------- */
.side-carousel {
    position: relative;
}

.side-carousel__viewport {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0, 24, 73, 0.1);
}

.side-carousel__track {
    display: flex;
    transition: transform 0.5s ease;
}

.side-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.side-carousel__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--grad-blue);
}

.side-carousel__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.side-carousel__slide:hover .side-carousel__media img {
    transform: scale(1.05);
}

.side-carousel__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #f7f7f7;
    flex: 1;
}

.side-carousel__date {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a57a22;
}

.side-carousel__title {
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
}

.side-carousel__title a {
    transition: color 0.2s ease;
}

.side-carousel__title a:hover {
    color: var(--color-title);
}

.side-carousel__excerpt {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.side-carousel__more {
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-title);
    transition: letter-spacing 0.2s ease;
}

.side-carousel__more:hover {
    letter-spacing: 0.02em;
}

.side-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.side-carousel__arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--color-title);
    background: #fff;
    color: var(--color-title);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.side-carousel__arrow:hover {
    background: var(--grad-blue);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08);
}

.side-carousel__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.side-carousel__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #c3cbdd;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.side-carousel__dot.is-active {
    width: 22px;
    border-radius: 999px;
    background: var(--grad-gold);
}

@media (max-width: 1100px) {
    .article__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 64px;
        padding-top: 60px;
    }

    .article__side {
        position: static;
        width: 100%;
        max-width: 720px;
        justify-self: center;
    }

    .side-carousel__viewport {
        max-width: 520px;
        margin: 0 auto;
    }

    .side-carousel__nav {
        max-width: 520px;
        margin-inline: auto;
    }

    .article__side-head {
        text-align: center;
    }

    .article__side-wave {
        margin-inline: auto;
    }
}

@media (max-width: 640px) {
    .article__hero {
        padding: 28px 16px 26px;
    }

    .article__back {
        margin-bottom: 22px;
    }

    .article__title {
        font-size: clamp(1.4rem, 6.6vw, 1.8rem);
        overflow-wrap: break-word;
    }

    .article__meta {
        gap: 8px 10px;
        font-size: 0.88rem;
    }

    .article__cover {
        width: calc(100% - 32px);
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .article__cover::before {
        inset: 10px -8px -10px 8px;
        border-radius: 16px;
    }

    .article__cover img {
        border-radius: 14px;
    }

    .article__layout {
        padding: 48px 16px 0;
        gap: 52px;
    }

    .article__body {
        font-size: 1.06rem;
        line-height: 1.75;
    }

    .article__body--dropcap > p:first-child::first-letter {
        font-size: 3.1em;
    }

    .article__share {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .article__share .detail__share-label {
        width: 100%;
        margin-right: 0;
    }

    .article__share .detail__share-feedback {
        position: static;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reading-progress span,
    .side-carousel__media img {
        transition: none;
    }
}

/* Página de error */
.error-cta {
    text-align: center;
    padding: 40px 24px var(--section-gap);
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact {
    padding: var(--section-gap) 24px;
}

.contact__wrap {
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #c19436;
    box-shadow: 0 10px 40px rgba(0, 24, 73, 0.08);
}

.contact__info {
    background: linear-gradient(160deg, #002a93 0%, #001849 100%);
    color: #fff;
    padding: 48px 36px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact__logo {
    width: 190px;
    align-self: center;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.3));
}

.contact__items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contact__items li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.1rem;
    font-weight: 300;
}

.contact__items a {
    transition: color 0.2s ease;
}

.contact__items a:hover {
    color: #f0c964;
}

.contact__items svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #f0c964;
}

.contact__social h4 {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 14px;
}

.contact__social .footer__social a {
    color: #fff;
}

.contact__social .footer__social a:hover {
    color: #f0c964;
}

.contact__form {
    background: #fff;
    padding: 64px 60px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.contact__form-title {
    font-size: 2.1rem;
    text-align: left;
}

.contact__form .field__label {
    font-size: 1.15rem;
}

.contact__form .field input,
.contact__form .field textarea {
    font-size: 1.12rem;
    padding: 17px 19px;
}

.contact__form .field textarea {
    min-height: 180px;
}

.contact__form .btn-primary {
    font-size: 1.15rem;
    padding: 17px 54px;
}

.contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact__form .btn-primary {
    align-self: flex-start;
}

/* ==========================================================================
   ABOUT US
   ========================================================================== */
.about-story {
    padding: var(--section-gap) 24px 0;
}

.about-story__wrap {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.about-story__body h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    margin-bottom: 22px;
}

.about-story__body p {
    font-weight: 400;
    line-height: 1.65;
    margin-bottom: 16px;
}

.about-leadership {
    padding: var(--section-gap) 24px 0;
}

/* Foto de grupo recortada sobre fondo blanco: sin marco ni sombra */
.about-leadership__photo {
    max-width: 980px;
    margin: 0 auto;
}

.about-leadership__photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Foto de todo el equipo, sobre "Por qué elegirnos". También viene recortada
   sobre blanco, así que va sin marco; más ancha que la de liderazgo porque
   son muchas más personas y si no las caras quedan diminutas. */
.about-group {
    padding: var(--section-gap) 24px 0;
}

.about-group__photo {
    max-width: 1240px;
    margin: 0 auto;
}

.about-group__photo img {
    display: block;
    width: 100%;
    height: auto;
}

.about-team {
    padding: var(--section-gap) 24px 0;
}

.about-team__head {
    margin-bottom: 64px;
}

.about-team__head .section-head__text {
    max-width: 940px;
}

.about-team__grid {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 72px;
}

.team-card {
    grid-column: span 3;
    text-align: center;
}

.team-card:nth-child(-n + 3) {
    grid-column: span 4;
}

.team-card:nth-child(1) {
    transform: translateX(15%);
}

.team-card:nth-child(3) {
    transform: translateX(-15%);
}

.team-card__portrait {
    width: clamp(160px, 13vw, 190px);
    aspect-ratio: 1;
    margin: 0 auto 15px;
    padding: 5px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--grad-gold);
    transition: transform 280ms ease, box-shadow 280ms ease;
}

.team-card:hover .team-card__portrait {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 41, 145, 0.14);
}

.team-card__portrait img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center 25%;
}

.team-card h3 {
    font-size: clamp(1.08rem, 1.6vw, 1.35rem);
    line-height: 1.2;
}

.team-card__role {
    min-height: 0.5em;
    margin-top: 3px;
    color: #a36813;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
}

.team-card__divider {
    position: relative;
    display: block;
    width: min(100%, 210px);
    height: 2px;
    margin: 12px auto 10px;
    border-radius: 999px;
    background: var(--grad-gold);
}

.team-card__divider::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    content: '';
    background: var(--grad-gold);
    transform: translate(-50%, -50%) rotate(45deg);
}

.team-card__bio {
    max-width: 245px;
    margin: 0 auto;
    color: #202020;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.35;
}

.about-values {
    padding: var(--section-gap) 16px 0;
}

.about-values__grid {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.value-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid #9db4e0;
    border-radius: 16px;
    padding: 40px 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 24, 73, 0.12);
}

.value-card__icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--grad-blue);
    color: #f0c964;
}

.value-card__icon i {
    font-size: 1.9rem;
}

.value-card h3 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 3.9em;
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-title);
    margin-bottom: 12px;
}

.value-card p {
    flex: 1;
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.55;
    min-height: 4.65em;
}

.about-cta {
    padding: var(--section-gap) 24px;
}

.about-cta__banner {
    max-width: var(--container);
    margin: 0 auto;
    background: radial-gradient(circle at 30% 40%, #0035b0 0%, #002a93 45%, #001849 100%);
    border-radius: 24px;
    padding: 64px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    box-shadow: 0 18px 50px rgba(0, 24, 73, 0.18);
}

.about-cta__banner h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Menú hamburguesa: desde 1100px, porque con el botón VIP el menú completo ya no cabe en una línea. */
@media (max-width: 1100px) {
    .navbar__inner {
        justify-content: flex-start;
    }

    .navbar__toggle {
        display: flex;
    }

    .navbar__nav {
        position: absolute;
        top: calc(var(--navbar-height) + 5px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--grad-blue);
        padding: 12px 24px 20px;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
    }

    .navbar__nav.is-open {
        max-height: calc(100svh - var(--navbar-height) - 5px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .navbar__link {
        padding: 14px 0;
        width: 100%;
    }

    .navbar__dropdown {
        width: 100%;
    }

    .navbar__dropdown-toggle {
        justify-content: space-between;
    }

    .navbar__dropdown-menu {
        position: static;
        width: 100%;
        max-height: 0;
        padding: 0 0 0 14px;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .navbar__dropdown:hover .navbar__dropdown-menu,
    .navbar__dropdown:focus-within .navbar__dropdown-menu {
        transform: none;
    }

    .navbar__dropdown.is-open .navbar__dropdown-menu {
        max-height: 190px;
        padding-bottom: 9px;
    }

    .navbar__dropdown[data-dreamcity-menu].is-open .navbar__dropdown-menu {
        max-height: 540px;
    }

    .navbar__dropdown-menu a,
    .navbar__dropdown-menu button {
        padding: 10px 12px;
    }

    .navbar__dropdown-menu > * + * {
        border-top: 0;
    }

    .navbar__link--qualified {
        width: auto;
        padding: 10px 18px;
        margin-top: 8px;
    }

    .navbar__lang {
        margin: 16px 0 0;
    }

    .navbar__vip {
        margin: 18px 0 4px;
    }
}

@media (max-width: 820px) {
    .hero__logo {
        width: clamp(170px, 40vw, 260px);
    }

    .search__card {
        padding: 40px 22px 48px;
    }

    .search__fields {
        flex-direction: column;
        gap: 14px;
    }

    .search__field select {
        width: 100%;
        border-right: 1px solid #8a8a8a;
        border-radius: 8px;
    }

    .search__field:first-child select {
        border-radius: 8px;
    }

    .search__submit {
        width: 100%;
        border-radius: 8px;
    }

}

@media (max-width: 1280px) {
    .popular__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .popular__grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

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

    .invest__panel {
        padding: 56px 32px;
        gap: 36px;
    }

    /* En columna, el separador dorado pasa a horizontal */
    .invest__panel::after {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: 5px;
        background: var(--grad-gold);
    }

    .invest__media {
        min-height: 300px;
        max-height: 380px;
    }
}

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

    .detail__side {
        position: static;
    }

    .contact__wrap {
        grid-template-columns: 1fr;
    }

    .contact__form {
        padding: 36px 24px;
    }

    .contact__row {
        grid-template-columns: 1fr;
    }

    .about-team__grid {
        max-width: 720px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 58px 36px;
    }

    .team-card,
    .team-card:nth-child(-n + 3) {
        grid-column: span 1;
    }

    .team-card:nth-child(1),
    .team-card:nth-child(3) {
        transform: none;
    }

    .team-card:last-child {
        grid-column: 1 / -1;
    }

    .about-values__grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .value-card {
        grid-column: 1;
    }

    .value-card h3 {
        min-height: 0;
    }
}

@media (max-width: 1080px) {
    .news__grid {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer__brand {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

@media (max-width: 560px) {
    .about-team {
        padding-right: 18px;
        padding-left: 18px;
    }

    .about-team__head {
        margin-bottom: 48px;
    }

    .about-team__grid {
        max-width: 360px;
        grid-template-columns: 1fr;
        row-gap: 52px;
    }

    .team-card,
    .team-card:nth-child(-n + 3),
    .team-card:last-child {
        grid-column: 1;
    }

    .team-card__portrait {
        width: 176px;
    }

    .team-card__role {
        min-height: 0;
    }

    .footer__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer__col a {
        padding: 9px 0;
    }

    .footer__social {
        justify-content: center;
    }
}

/* ==========================================================================
   CONTACTO - MÓVIL (hasta ~380px, cubre 321px)
   ========================================================================== */
@media (max-width: 380px) {
    .contact {
        padding: var(--section-gap) 14px;
    }

    .contact__wrap {
        border-radius: 16px;
    }

    .contact__info {
        padding: 36px 22px;
        gap: 28px;
    }

    .contact__logo {
        width: 150px;
    }

    .contact__items {
        gap: 18px;
    }

    .contact__items li {
        font-size: 0.95rem;
        gap: 10px;
    }

    .contact__items svg {
        width: 18px;
        height: 18px;
    }

    .contact__items a,
    .contact__items span {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .contact__social h4 {
        font-size: 1rem;
        text-align: center;
    }

    .contact__social .footer__social {
        justify-content: center;
    }

    .contact__form {
        padding: 30px 18px;
        gap: 20px;
    }

    .contact__form-title {
        font-size: 1.5rem;
    }

    .contact__form .field__label {
        font-size: 1rem;
    }

    .contact__form .field input,
    .contact__form .field textarea {
        font-size: 1rem;
        padding: 14px 15px;
    }

    .contact__form .field textarea {
        min-height: 150px;
    }

    .contact__row {
        gap: 20px;
    }

    .contact__form .btn-primary {
        width: 100%;
        text-align: center;
        font-size: 1.05rem;
        padding: 16px 24px;
    }
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    width: 69px;
    height: 69px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.85rem;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: translateY(-3px) scale(1.04);
    background: #1fb959;
    outline: none;
}

@media (max-width: 560px) {
    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 62px;
        height: 62px;
        font-size: 1.65rem;
    }
}

/* ==========================================================================
   FAQ - ACORDEÓN
   ========================================================================== */
.faq-hero {
    height: 7.2rem;
    background: #002a6e;
}

.content-section {
    padding: 100px 0;
    background: #fff;
}

.faq-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
}

.faq-head {
    text-align: center;
}

.section-title.decorated-title {
    color: #0d2c54;
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    letter-spacing: 0.02em;
    font-weight: 600;
}

.section-title.decorated-title::after {
    content: "";
    display: block;
    width: 170px;
    height: 4px;
    margin: 18px auto 0;
    background: #d4af37;
    border-radius: 2px;
}

.section-logo {
    display: block;
    width: 180px;
    margin: 26px auto 0;
}

.section-description {
    max-width: 900px;
    margin: 14px auto 0;
    color: #555;
    font-size: 1.2rem;
    line-height: 1.8;
}

.faq-accordion {
    list-style: none;
    max-width: 980px;
    margin: 54px auto 0;
    border: 1px solid rgba(0, 52, 145, 0.14);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 38px rgba(0, 42, 110, 0.08);
}

.faq-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 52, 145, 0.12);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 30px;
    border: 0;
    background: #fff;
    color: #0d2c54;
    font-family: var(--font-body);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.faq-question:hover,
.faq-question:focus-visible {
    color: #003491;
    background: #f8faff;
    outline: none;
}

.faq-icon {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0, 52, 145, 0.18);
    border-radius: 4px;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: #003491;
    transition: background 0.2s ease, transform 0.25s ease;
}

.faq-icon::before {
    transform: translate(-50%, -50%);
}

.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}

.faq-answer__inner {
    padding: 0 30px 28px;
    color: #555;
    font-size: 1.06rem;
    line-height: 1.75;
}

.faq-answer__inner p + p {
    margin-top: 14px;
}

.faq-item.is-open .faq-question {
    color: #003491;
    background: #f8faff;
}

.faq-item.is-open .faq-icon {
    background: #003491;
    border-color: #003491;
    transform: rotate(45deg);
}

.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after {
    background: #fff;
}

/* ---------- Banner final ---------- */
.wide-banner {
    padding: 80px 0;
    background: #fff;
    text-align: center;
}

.wide-banner .banner-title {
    color: #003491;
    font-family: var(--font-title);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.wide-banner img {
    display: block;
    width: 150px;
    margin: 18px auto 20px;
}

.wide-banner .banner-subtitle {
    max-width: 720px;
    margin: 0 auto 34px;
    color: #555;
    font-size: 1.2rem;
    line-height: 1.6;
}

.btn-outline-light {
    display: inline-block;
    padding: 15px 42px;
    border: 2px solid #003491;
    border-radius: 8px;
    color: #003491;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    background: #003491;
    color: #fff;
    border-color: #003491;
    transform: translateY(-2px);
    outline: none;
}

@media (max-width: 991.98px) {
    .content-section {
        padding: 80px 0;
    }

    .faq-accordion {
        margin-top: 42px;
    }

    .faq-question {
        padding: 22px 24px;
    }

    .faq-answer__inner {
        padding: 0 24px 24px;
    }
}

@media (max-width: 575.98px) {
    .section-description {
        font-size: 1.05rem;
    }

    .faq-question {
        padding: 20px 18px;
        gap: 16px;
        font-size: 1rem;
    }

    .faq-icon {
        width: 30px;
        height: 30px;
    }

    .faq-answer__inner {
        padding: 0 18px 22px;
        font-size: 0.98rem;
    }
}

/* ==========================================================================
   VIP BENEFITS
   ========================================================================== */
.vip-head {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--section-gap) 24px 36px;
    text-align: center;
}

.vip-head__title {
    display: inline-block;
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    background: linear-gradient(100deg, #925e08 0%, #c19436 30%, #f0c964 55%, #c19436 75%, #925e08 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 1px rgba(0, 24, 73, 0.18));
}

.vip-head__wave {
    display: block;
    width: 110px;
    height: auto;
    margin: 16px auto 22px;
}

.vip-head__text {
    max-width: 680px;
    margin: 0 auto;
    font-size: clamp(1.05rem, 1.3vw, 1.22rem);
    line-height: 1.6;
}

/* La imagen ya trae las ondas azules y el fondo recortado */
.vip-hero {
    width: 100%;
    margin: 0 auto;
}

.vip-hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Beneficios ----------
   Abiertos a todo el ancho (sin tarjetas) y con columnas muy separadas. */
.vip-benefits {
    max-width: 1840px;
    margin: 0 auto;
    padding: 72px clamp(24px, 5.5vw, 110px) 24px;
}

.vip-group + .vip-group {
    margin-top: clamp(56px, 5vw, 84px);
}

.vip-group__title {
    position: relative;
    display: inline-block;
    margin-bottom: 36px;
    padding-bottom: 12px;
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0d1f4d;
}

.vip-group__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0d1f4d 0%, #c19436 55%, rgba(240, 201, 100, 0) 100%);
}

.vip-group__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px clamp(40px, 6vw, 120px);
}

.vip-benefit {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.vip-benefit__number {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--grad-blue);
    color: #fff;
    font-family: var(--font-title);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c19436, 0 8px 18px rgba(0, 24, 73, 0.22);
    transition: transform 0.25s ease;
}

.vip-benefit:hover .vip-benefit__number {
    transform: scale(1.08);
}

.vip-benefit__text {
    min-width: 0;
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.6;
    color: #1f2a44;
}

.vip-benefit__title {
    font-weight: 600;
    color: #0d1f4d;
}

/* ---------- Llamada a la acción ---------- */
.vip-cta {
    max-width: 1248px;
    margin: 0 auto;
    padding: 72px 24px var(--section-gap);
    text-align: center;
}

.vip-cta__media img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 40px rgba(0, 24, 73, 0.16));
}

.vip-cta__title {
    margin-top: 48px;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.vip-cta__wave {
    display: block;
    width: 110px;
    height: auto;
    margin: 14px auto 20px;
}

.vip-cta__text {
    max-width: 640px;
    margin: 0 auto 28px;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.6;
}

.vip-cta__button {
    min-width: 200px;
}

@media (max-width: 1024px) {
    .vip-group__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .vip-head {
        padding: 56px 16px 28px;
    }

    .vip-benefits {
        padding: 44px 16px 8px;
    }

    .vip-group + .vip-group {
        margin-top: 48px;
    }

    .vip-group__title {
        display: block;
        margin-bottom: 22px;
    }

    .vip-group__list {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .vip-benefit {
        gap: 16px;
    }

    .vip-benefit__number {
        width: 50px;
        height: 50px;
        font-size: 1.35rem;
    }

    .vip-benefit__text {
        font-size: 1.06rem;
    }

    .vip-cta {
        padding: 56px 16px var(--section-gap);
    }

    .vip-cta__title {
        margin-top: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vip-benefit__number,
    .navbar__vip {
        transition: none;
    }
}

/* ==========================================================================
   VIDEO VISTA LOMAS
   ========================================================================== */
.video-page {
    padding: 64px 24px var(--section-gap);
    background:
        radial-gradient(1100px 460px at 50% 0, rgba(193, 148, 54, 0.1), transparent 70%),
        #fff;
}

.video-page__head {
    max-width: 820px;
    margin: 0 auto 44px;
    text-align: center;
}

.video-page__title {
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.video-page__wave {
    display: block;
    width: 110px;
    height: auto;
    margin: 16px auto 20px;
}

.video-page__text {
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    line-height: 1.6;
}

/* Reproductor enmarcado */
.video-player {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
}

.video-player::before {
    content: "";
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 1.5px solid #c19436;
    border-radius: 22px;
    opacity: 0.55;
    pointer-events: none;
}

.video-player__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    background: #001849;
    box-shadow: 0 26px 64px rgba(0, 24, 73, 0.22);
    /* contain y no cover: el video se ve siempre entero. Con cover, en pantalla
       completa en celulares (pantallas ~20:9, más alargadas que el video 16:9)
       se recortaba arriba y abajo. */
    object-fit: contain;
}

/* Pantalla completa: ocupa toda la pantalla sin bordes redondeados y con
   franjas negras (no azul) si la proporción no coincide con la del video. */
.video-player__media:fullscreen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    object-fit: contain;
}

.video-player__media:-webkit-full-screen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    object-fit: contain;
}

.video-player__media:focus {
    outline: none;
}

/* Botón de reproducción sobre la portada */
.video-player__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(0, 24, 73, 0.05) 30%, rgba(0, 24, 73, 0.55) 100%);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.35s ease, visibility 0.35s;
}

.video-player.is-playing .video-player__play {
    opacity: 0;
    visibility: hidden;
}

.video-player__play-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(72px, 9vw, 104px);
    height: clamp(72px, 9vw, 104px);
    border-radius: 50%;
    /* Degradado radial simétrico: el brillo queda centrado y no "empuja" la flecha hacia un lado */
    background: radial-gradient(circle at 50% 28%, #f8dc86 0%, #e4b752 36%, #c19436 62%, #8f5c08 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 34px rgba(0, 24, 73, 0.4);
    transition: transform 0.25s ease;
}

.video-player__play-icon::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2px solid rgba(240, 201, 100, 0.7);
    border-radius: 50%;
    animation: video-pulse 2.2s ease-out infinite;
}

/* El triángulo del SVG ya está centrado por su centro óptico (centroide en x=12),
   así que no necesita desplazamiento extra. */
.video-player__play-icon svg {
    width: 44%;
    height: 44%;
    filter: drop-shadow(0 1px 1px rgba(80, 48, 0, 0.35));
}

.video-player__play:hover .video-player__play-icon,
.video-player__play:focus-visible .video-player__play-icon {
    transform: scale(1.08);
}

.video-player__play:focus-visible {
    outline: 3px solid #f0c964;
    outline-offset: 4px;
}

.video-player__play-label {
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(0, 24, 73, 0.55);
    backdrop-filter: blur(6px);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.video-player__play-label small {
    font-size: 0.9em;
    opacity: 0.8;
}

@keyframes video-pulse {
    0%   { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* Acciones bajo el video */
.video-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 64px auto 0;
}

.video-page__actions .btn-gold:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.video-page__share {
    max-width: 560px;
    margin: 36px auto 0;
    padding: 14px 20px;
    border: 1px solid rgba(0, 41, 145, 0.1);
    border-radius: 16px;
    background: #f7f8fb;
}

.video-page__share .detail__share-feedback {
    right: 20px;
}

@media (max-width: 640px) {
    .video-page {
        padding: 40px 16px 64px;
    }

    .video-page__head {
        margin-bottom: 32px;
    }

    .video-player::before {
        inset: 10px -8px -10px 8px;
        border-radius: 16px;
    }

    .video-player__media,
    .video-player__play {
        border-radius: 14px;
    }

    .video-player__play {
        gap: 12px;
    }

    .video-player__play-label {
        font-size: 0.88rem;
        padding: 6px 14px;
    }

    .video-page__actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 48px;
    }

    .video-page__actions a {
        text-align: center;
    }

    .video-page__share {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .video-page__share .detail__share-label {
        width: 100%;
        margin-right: 0;
    }

    .video-page__share .detail__share-feedback {
        position: static;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-player__play-icon::after {
        animation: none;
    }
}