/* =========================================================
   DM — RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    :root { --nav-width: calc(100vw - 40px); }

    .site-header { padding-top: 16px; }

    .floating-nav {
        min-height: 58px;
        padding: 9px 13px;
    }

    .nav-links { gap: 18px; }
    .nav-link { font-size: 9px; letter-spacing: .08em; }

    .section-intro { grid-template-columns: 62px minmax(0,1fr); gap: 20px; }
    .masterplan-stage,
    .mvp-cta-block { margin-left: 62px; }
    .masterplan-stage { min-height: 520px; }
    .masterplan-image-wrap { min-height: 500px; }
    .masterplan-image { height: 500px; }
}

@media (max-width: 720px) {
    .nav-links { display: none; }
    .menu-toggle { display: block; }

    .mobile-nav {
        width: var(--nav-width);
        margin: 8px auto 0;
        display: flex;
        flex-direction: column;
        background: linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,255,255,.22));
        border: 1px solid rgba(255,255,255,.62);
        box-shadow: 0 18px 48px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.70);
        backdrop-filter: blur(22px) saturate(140%);
        -webkit-backdrop-filter: blur(22px) saturate(140%);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 250ms ease, visibility 250ms ease, transform 350ms var(--dm-ease);
        pointer-events: auto;
    }

    .mobile-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-link {
        position: relative;
        padding: 18px 20px;
        color: var(--dm-black);
        text-decoration: none;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(0,0,0,.07);
    }

    .mobile-link:last-child { border-bottom: 0; }

    .mobile-link::after {
        content: "";
        position: absolute;
        left: 20px;
        bottom: 0;
        width: 24px;
        height: 1px;
        background: var(--dm-gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 300ms var(--dm-ease);
    }

    .mobile-link:hover::after { transform: scaleX(1); }

    .interactive-architecture {
        min-height: auto;
        margin-top: 0;
        padding-top: 110px;
        padding-bottom: 80px;
    }

    .section-shell { width: var(--nav-width); }

    .section-intro {
        display: block;
        margin-bottom: 34px;
    }

    .section-number { margin-bottom: 10px; }

    .section-title-wrap {
        max-width: none;
        padding-left: 18px;
    }

    .section-title-wrap h1 { font-size: clamp(44px, 12vw, 68px); }
    .section-lead { font-size: 15px; line-height: 1.55; }

    .masterplan-stage,
    .mvp-cta-block {
        margin-left: 0;
    }

    .masterplan-stage {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .masterplan-image-wrap { min-height: 390px; }
    .masterplan-image { height: 390px; }

    .inventory-card,
    .lot-card {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
    }

    .inventory-card { margin-top: -60px; }

    .mvp-cta-block {
        flex-direction: column;
        align-items: stretch;
        margin-top: 65px;
        gap: 28px;
    }

    .mvp-button { min-width: 0; width: 100%; }

    .placeholder-section {
        min-height: 80vh;
        padding: 120px 7vw 70px;
    }

    .section-marker { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 420px) {
    :root { --nav-width: calc(100vw - 24px); }

    .floating-nav { padding-left: 10px; padding-right: 10px; }

    .brand {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .brand-mark { width: 29px; height: 29px; }
    .interactive-architecture { padding-top: 100px; }
    .section-title-wrap { padding-left: 14px; }
    .masterplan-image-wrap,
    .masterplan-image { height: 320px; min-height: 320px; }
}


/* =========================================================
   MASTERPLAN INTERACTIVO — RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {
    .amenity-hotspot {
        width: 36px;
        height: 36px;
    }

    .hotspot-dot {
        width: 10px;
        height: 10px;
        border-width: 1.5px;
    }

    .amenity-preview {
        left: 50% !important;
        top: 50% !important;
        width: min(280px, calc(100% - 28px));
        transform: translate(-50%, -50%) translateY(8px);
    }

    .amenity-preview.is-visible {
        transform: translate(-50%, -50%) translateY(0);
    }

    .masterplan-mvp-hint {
        min-width: 0;
        width: calc(100% - 28px);
        max-width: 340px;
        bottom: 14px;
        font-size: 7px;
    }
}

/* =========================================================
   CASAS — RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    .casas-shell {
        padding-top: 90px;
        padding-bottom: 86px;
    }

    .casas-feature {
        grid-template-columns: 104px minmax(0, 1fr);
        min-height: 0;
    }

    .casas-house-index {
        grid-row: 1 / span 2;
        padding-right: 12px;
    }

    .casas-index-item {
        min-height: 88px;
        grid-template-columns: 22px minmax(0,1fr);
        padding-left: 8px;
    }

    .casas-index-item img {
        display: none;
    }

    .casas-index-copy small {
        display: none;
    }

    .casas-house-index-note {
        padding-left: 8px;
    }

    .casas-visual {
        min-height: 420px;
    }

    .casas-visual img[data-house-image] {
        min-height: 420px;
    }

    .casas-isometric-card {
        width: 100%;
        margin: -2px 0 4px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .casas-info {
        grid-column: 2;
        min-height: 0;
        padding: 30px 22px 24px;
    }

    .casas-info h3 {
        margin-top: 16px;
        font-size: 34px;
    }

    .casas-description {
        font-size: 13px;
    }

    .casas-stats {
        margin-top: 32px;
    }

    .casas-view-cta {
        width: 100%;
        margin-top: 18px;
    }

    .casas-documentation {
        padding-top: 72px;
    }

    .casas-documentation-heading {
        display: block;
        margin-bottom: 32px;
    }

    .casas-documentation-heading h3 {
        font-size: clamp(32px, 9vw, 48px);
    }

    .casas-documentation-note {
        max-width: 100%;
        margin-top: 22px;
        font-size: 12px;
    }

    .casas-pack {
        min-height: 175px;
        grid-template-columns: 28px minmax(0,1fr) 18px;
        gap: 12px;
        padding: 23px 16px 25px;
    }

    .casas-pack-content h4 {
        font-size: 20px;
    }

    .casas-pack-content span {
        font-size: 11px;
    }

    .casas-custom {
        display: block;
        margin-top: 24px;
        padding-top: 22px;
    }

    .casas-custom strong {
        font-size: 22px;
    }

    .casas-custom-cta {
        width: 100%;
        margin-top: 20px;
    }
}


/* =========================================================
   ARCHVIZ — RESPONSIVE
   ========================================================= */

@media (max-width: 720px) {
    .archviz-section,
    .archviz-carousel {
        min-height: 100vh;
    }

    .archviz-carousel::after {
        background:
            linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 35%, rgba(0,0,0,.62) 100%);
    }

    .archviz-copy {
        left: 24px;
        right: 24px;
        top: auto;
        bottom: 120px;
        transform: none;
        width: auto;
        gap: 12px;
    }

    .archviz-heading-line {
        gap: 12px;
        margin-bottom: 14px;
        align-items: center;
    }

    .archviz-section-number {
        min-width: 28px;
        height: 21px;
        padding: 0 6px;
        font-size: 8px;
    }

    .archviz-eyebrow {
        margin-bottom: 14px;
        font-size: 8px;
        letter-spacing: .15em;
    }

    .archviz-copy h2 {
        font-size: clamp(42px, 12vw, 66px);
    }

    .archviz-lead {
        margin-top: 20px;
        font-size: 13px;
        line-height: 1.55;
        max-width: 100%;
    }

    .archviz-tour-cta {
        margin-top: 20px;
        min-height: 46px;
    }

    .archviz-meta {
        right: 24px;
        bottom: 48px;
        gap: 14px;
        font-size: 7px;
    }

    .archviz-project-company {
        font-size: 6px;
    }

    .archviz-counter {
        padding-left: 14px;
    }

    .archviz-control {
        top: auto;
        bottom: 80px;
        width: 40px;
        height: 40px;
        margin-top: 0;
    }

    .archviz-prev { left: 24px; }
    .archviz-next { right: 24px; }

    .archviz-progress {
        left: 24px;
        right: 24px;
        bottom: 22px;
    }
}


/* =========================================================
   INTRO — RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {
    .brand-intro {
        height: 110vh;
    }

    .brand-intro-logo {
        width: min(86vw, 640px);
    }

    .brand-intro-caption {
        bottom: 42px;
        font-size: 8px;
        letter-spacing: .16em;
    }

    .brand-intro-scroll {
        font-size: 7px;
    }
}

@media (max-width: 480px) {
    .brand-intro {
        height: 108vh;
    }

    .brand-intro-logo {
        width: 90vw;
    }

    .brand-intro-caption {
        bottom: 38px;
        text-align: center;
    }
}

/* =========================================================
   MVP SHOWCASE — RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {
    .mvp-showcase {
        height: 100svh;
        margin-top: -100svh;
    }

    .mvp-showcase-copy {
        padding: 100px 22px 38px;
        align-items: flex-end;
    }

    .mvp-showcase-number {
        display: none;
    }

    .mvp-showcase-eyebrow {
        max-width: 300px;
        margin-bottom: 12px;
        line-height: 1.5;
    }

    .mvp-showcase-copy h1 {
        font-size: clamp(42px, 12vw, 66px);
        font-weight: 600;
        line-height: .91;
        letter-spacing: -.055em;
    }

    .mvp-showcase-lead {
        margin: 20px 0 22px;
        color: rgba(255,255,255,.78);
        font-size: 13px;
        line-height: 1.55;
        max-width: 100%;
    }

    .mvp-showcase-cta {
        min-width: 175px;
        padding: 14px 15px;
    }

}

@media (max-width: 900px) {
    .clients-section {
        padding-top: 64px;
        padding-bottom: 74px;
    }

    .clients-quote {
        max-width: 720px;
        margin-bottom: 42px;
        font-size: clamp(20px, 3vw, 27px);
    }

    .clients-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 720px) {
    .clients-section {
        padding: 56px 22px 62px;
    }

    .clients-quote {
        margin-bottom: 34px;
        font-size: clamp(19px, 5.2vw, 24px);
        line-height: 1.42;
    }

    .clients-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-top: 24px;
    }

    .client-logo {
        min-height: 66px;
        padding: 6px 8px;
    }

    .client-logo img {
        width: min(100%, 150px);
        height: 52px;
    }
}

@media (max-width: 420px) {
    .clients-section {
        padding-left: 18px;
        padding-right: 18px;
    }
}


.casas-specs { letter-spacing: .10em; }


@media (max-width: 720px) {
    .casas-feature {
        display: block;
    }

    .casas-house-index {
        display: block;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(0,0,0,.10);
    }

    .casas-house-index-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .casas-index-item {
        min-height: 72px;
        grid-template-columns: 22px minmax(0,1fr);
        border-left: 0;
        border-bottom: 2px solid transparent;
        padding: 8px 8px 9px;
    }

    .casas-index-item:hover,
    .casas-index-item.is-active {
        border-left-color: transparent;
        border-bottom-color: var(--dm-gold);
    }

    .casas-index-item img { display: none; }
    .casas-index-copy small { display: none; }
    .casas-house-index-note { display: none; }

    .casas-visual { min-height: 330px; }
    .casas-visual img[data-house-image] { min-height: 330px; }

    .casas-isometric-card {
        width: 100%;
        margin: -2px 0 4px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .casas-isometric-head,
    .casas-isometric-foot {
        padding: 0;
    }

    .casas-isometric-head strong,
    .casas-isometric-foot span {
        font-size: 7px;
    }

    .casas-isometric-card img {
        height: 150px;
    }

    .casas-info {
        padding: 24px 18px 20px;
    }

    .casas-info h3 {
        margin-top: 14px;
        font-size: 31px;
    }

    .casas-stats {
        margin-top: 28px;
        padding: 20px 0 18px;
    }
}

/* =========================================================
   V24 — CASAS · RESPONSIVE FINAL
   ========================================================= */
@media (max-width: 760px) {
    .casas-feature {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .casas-house-index {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
    }

    .casas-house-index-viewport { overflow: hidden; min-width: 0; }
    .casas-house-index-list {
        display: flex;
        flex-direction: row;
        height: 72px;
        overflow: hidden;
        gap: 0;
    }
    .casas-index-item {
        flex: 0 0 20%;
        width: 20%;
        min-height: 72px;
        height: 72px;
        padding: 8px 5px;
        grid-template-columns: 20px minmax(0,1fr);
        border-left: 0;
        border-bottom: 2px solid transparent;
    }
    .casas-index-copy strong { font-size: 7px; }
    .casas-index-copy small { display: none; }

    .casas-house-index-controls {
        display: flex;
        align-items: center;
        height: 72px;
        margin: 0;
        border: 0;
        gap: 2px;
    }
    .casas-house-index-controls button {
        width: 24px;
        height: 30px;
        padding: 0;
        border: 1px solid rgba(54,54,54,.10);
        background: rgba(255,255,255,.50);
        color: #363636;
        font: inherit;
        cursor: pointer;
    }
    .casas-house-index-controls span,
    .casas-house-index-note { display: none; }

    .casas-visual,
    .casas-visual img[data-house-image] {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
    }

    .casas-visual img[data-house-image] { object-fit: cover; }

    .casas-info {
        grid-column: auto;
        padding: 26px 22px 24px;
    }

    .casas-unit-switch,
    .house-detail-unit-switch { margin-top: 4px; }
}


/* V24.2 — filtros y controles en responsive */
@media(max-width:900px){
    .casas-catalog-tools{width:var(--nav-width);max-width:var(--nav-width);flex-wrap:wrap!important}
    .casas-catalog-tools .casas-search{min-width:100%!important;flex-basis:100%!important}
}
@media(max-width:720px){
    .casas-catalog-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:24px}
    .casas-catalog-tools label{display:grid!important;gap:5px;align-items:stretch}
    .casas-catalog-tools .casas-search{grid-column:1/-1}
    .casas-catalog-tools input,.casas-catalog-tools select{width:100%;height:40px!important}
    .casas-filter-reset{width:100%}
    .casas-unit-switch button,.house-detail-unit-switch button{min-width:100px!important}
}


@media (max-width: 900px) {
    .casas-catalog-tools {
        width: 100% !important;
        max-width: none !important;
    }
}
@media (max-width: 720px) {
    .casas-catalog-tools.is-visible {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .casas-catalog-tools label span {
        font-size: 9px !important;
    }
    .casas-catalog-tools input,
    .casas-catalog-tools select {
        font-size: 10px !important;
    }
}


/* V24.5 — selector métrico/imperial compacto también en responsive */
@media (max-width:560px) {
    .casas-unit-switch button,
    .house-detail-unit-switch button {
        min-width:74px !important;
        width:74px !important;
        height:29px !important;
        padding:0 6px !important;
        font-size:8px !important;
    }
}


/* =========================================================
   V27 — INTRO MOBILE · CONTROLES SIN SOLAPAR LA CONSULTA
   ========================================================= */
@media (max-width: 480px) {
    .brand-intro-caption {
        left: 18px;
        bottom: 70px;
        transform: none;
        align-items: flex-start;
        text-align: left;
    }

    .brand-intro-arrow {
        left: 18px;
        bottom: 20px;
        transform: none;
    }

    .brand-intro-arrow:hover {
        transform: translateY(4px);
    }

    .consult-bubble {
        right: 12px !important;
        bottom: 12px !important;
    }
}

@media (max-width: 360px) {
    .consult-bubble {
        padding-right: 9px !important;
        gap: 8px !important;
    }

    .consult-bubble-copy {
        min-width: 118px !important;
    }

    .consult-bubble-copy b {
        font-size: 10px !important;
    }

    .consult-online-message {
        font-size: 8px !important;
    }
}


/* V26.4.5 — MOBILE: separar navegación de la burbuja personal */
@media (max-width: 720px) {
    .brand-intro-caption {
        bottom: 108px !important;
    }

    .brand-intro-arrow {
        bottom: 58px !important;
    }
}

@media (max-width: 420px) {
    .brand-intro-caption {
        bottom: 116px !important;
    }

    .brand-intro-arrow {
        bottom: 66px !important;
    }
}

/* Safari's dynamic browser bars change vh while scrolling. Keep the intro and
   the overlapping showcase on the same stable viewport height. */
@media (max-width: 700px) {
    .brand-intro { height: 108svh; }
    .brand-intro-stage { height: 100svh; }
    .mvp-showcase { height: 100svh; margin-top: -100svh; }
    .brand-intro-arrow { width: 44px; height: 44px; touch-action: manipulation; }
}

/* Keep entry controls above the overlapping showcase, including after reload. */
.brand-intro-controls {
    position: fixed;
    inset: 0 0 auto;
    height: 100svh;
    z-index: 950;
    pointer-events: none;
}
.brand-intro-controls[hidden] { display: none; }
.brand-intro-controls .brand-intro-caption { pointer-events: auto; cursor: pointer; }
@media (max-width: 800px) {
    .brand-intro-controls .brand-intro-caption,
    .brand-intro-controls .brand-intro-arrow {
        left: 50% !important;
        transform: translateX(-50%) !important;
        align-items: center;
        text-align: center;
    }
}