@charset "utf-8";
/*
 * Modern public theme — Urbanización La Rosa de Rodalí
 * Apple aesthetic — basado en MOCKUP_LANDING.jpg de new_ui/.
 * Paleta: grises + dos azules del admin. Blancos generosos.
 */

:root {
    --mp-blue:          #2C7BD6;   /* azul principal del logo formal */
    --mp-blue-hover:    #1E5BAA;
    --mp-blue-light:    #5AC8FA;   /* cyan accent del gradiente del logo */
    --mp-blue-grad:     linear-gradient(135deg, #5AC8FA 0%, #2C7BD6 60%, #1E4789 100%);

    --mp-dark:          #1D1D1F;
    --mp-darker:        #161618;
    --mp-footer-bg:     #232830;   /* dark navy/charcoal del footer del mockup */
    --mp-slate:         #374151;
    --mp-gray-900:      #111827;
    --mp-gray-700:      #374151;
    --mp-gray-600:      #4B5563;
    --mp-gray-500:      #6B7280;
    --mp-gray-400:      #9CA3AF;
    --mp-gray-300:      #D1D5DB;
    --mp-gray-200:      #E5E7EB;
    --mp-gray-100:      #F3F4F6;
    --mp-gray-50:       #F9FAFB;
    --mp-bg:            #FFFFFF;
    --mp-bg-alt:        #F5F5F7;
    --mp-card:          #FFFFFF;

    --mp-radius-sm:     8px;
    --mp-radius:        14px;
    --mp-radius-lg:     18px;

    --mp-shadow-sm:     0 1px 2px rgba(0,0,0,.04);
    --mp-shadow:        0 4px 16px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --mp-shadow-md:     0 10px 30px rgba(0,0,0,.08);

    --mp-font:          'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', helvetica, arial, sans-serif;

    --mp-page-max:      1180px;
}

/* ========================================================================== */
/* Reset legacy                                                                */
/* ========================================================================== */

body {
    margin: 0;
    background-color: var(--mp-bg) !important;
    background-image: none !important;
    font-family: var(--mp-font);
    color: var(--mp-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

a:link, a:visited {
    color: var(--mp-blue);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--mp-blue-hover); }

#contenedor_body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--mp-bg) !important;
    background-image: none !important;
    box-shadow: none;
    border-radius: 0;
}

/* ========================================================================== */
/* TOP — Logo formal centrado (sin sticky)                                     */
/* ========================================================================== */

.top {
    background: var(--mp-bg) !important;
    background-image: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 24px 10px !important;
    box-sizing: border-box;
    text-align: center;
    border-bottom: none;
    clear: both;
}

.top table { display: none !important; }

.mp-brand {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
}

.mp-brand-logo {
    width: auto;
    height: auto;
    max-width: 230px;
    display: block;
    margin: 0 auto;
}

.mp-brand:hover .mp-brand-logo { opacity: .92; }

/* ========================================================================== */
/* NAV — All caps, plana, separadores sutiles                                  */
/* ========================================================================== */

.menu {
    background: var(--mp-bg) !important;
    background-image: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    border-top: 1px solid var(--mp-gray-200);
    border-bottom: 1px solid var(--mp-gray-200);
    padding: 10px 0;
    margin: 0;
    max-width: none;
    clear: both;
}

#menuh, #menuhH {
    margin: 0;
    padding: 0;
    font-family: var(--mp-font);
    font-size: 12px;
    font-weight: 500;
}

#menuh ul, #menuhH ul {
    margin: 0;
    padding: 0 16px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 28px;
}

#menuh li, #menuhH li {
    list-style: none;
    float: none;
    margin: 0;
}

#menuh a, #menuhH a {
    display: inline-block;
    padding: 7px 16px;
    color: var(--mp-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 980px;
    transition: background-color .2s ease, background-image .2s ease, color .2s ease, box-shadow .2s ease;
    border: none;
    background: transparent;
    line-height: 1.2;
    font-weight: 500;
}

#menuh a:hover, #menuhH a:hover {
    color: #fff;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    box-shadow: 0 2px 8px rgba(44, 123, 214, 0.25);
}

#menuh a.is-active, #menuhH a.is-active {
    color: var(--mp-dark);
    font-weight: 700;
    background: transparent;
}

#menuh a.is-active:hover, #menuhH a.is-active:hover {
    color: #fff;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
}

#menuh a.mp-nav-admin, #menuhH a.mp-nav-admin {
    color: var(--mp-dark);
    font-weight: 700;
    letter-spacing: 1px;
}

#menuh a.mp-nav-admin:hover, #menuhH a.mp-nav-admin:hover {
    color: #fff;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
}

#menuh a#primero, #menuhH a#primero { border-left: none; }

/* ========================================================================== */
/* HERO IMAGE — contenida, con margen, esquinas suaves                         */
/* ========================================================================== */

.lr-hero-img-section {
    padding: 18px 24px 6px;
    background: var(--mp-bg);
    text-align: center;
}

.lr-hero-img {
    width: 100%;
    max-width: var(--mp-page-max);
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--mp-radius);
    object-fit: cover;
    aspect-ratio: 2 / 1;
    box-shadow: var(--mp-shadow);
}

/* ========================================================================== */
/* TAGLINE — Headline blue refinado                                            */
/* ========================================================================== */

.lr-tagline {
    padding: 28px 24px 14px;
    text-align: center;
    background: var(--mp-bg);
}

.lr-tagline h1 {
    font-family: var(--mp-font);
    font-size: clamp(22px, 3.4vw, 32px);
    font-weight: 500;
    margin: 0 auto;
    max-width: 880px;
    letter-spacing: -0.4px;
    line-height: 1.3;
    font-style: italic;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* ========================================================================== */
/* INFO — 2 columnas mapa + texto                                              */
/* ========================================================================== */

.lr-info {
    padding: 14px 24px 40px;
    background: var(--mp-bg);
}

.lr-info-grid {
    max-width: var(--mp-page-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 48px;
    align-items: stretch;
}

.lr-info-map {
    position: relative;
    min-height: 200px;
    border-radius: var(--mp-radius-sm);
    overflow: hidden;
    border: 1px solid var(--mp-gray-200);
    background: var(--mp-gray-100);
}

.lr-info-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.lr-info-text {
    font-family: var(--mp-font);
    font-size: 16px;
    line-height: 1.7;
    color: var(--mp-gray-700);
    letter-spacing: -0.1px;
}

.lr-info-text p {
    margin: 0 0 18px;
}

.lr-info-text p:last-child { margin-bottom: 0; }

/* ========================================================================== */
/* FOOTER — Dark navy compacto, solo Contacto + Direccion                      */
/* ========================================================================== */

.footer {
    background-color: var(--mp-footer-bg) !important;
    background-image: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 22px 24px 18px !important;
    box-sizing: border-box;
    border-top: none;
    color: #DCE0E5;
    clear: both;
}

.mp-footer-inner {
    max-width: 700px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
}

.mp-footer-col {
    text-align: left;
}

.h3_footer {
    font-family: var(--mp-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: none;
    letter-spacing: -0.1px;
    display: block;
    margin-bottom: 10px;
}

.footer .contacto {
    font-family: var(--mp-font) !important;
    font-size: 13px !important;
    color: #A8B0BA !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.7;
    background: transparent !important;
    margin: 0;
    padding: 0;
}

.desarrollo {
    background: var(--mp-footer-bg);
    font-family: var(--mp-font);
    font-size: 11px;
    color: #6B7280;
    text-align: center;
    padding: 10px 0 14px;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    border-top: 1px solid rgba(255,255,255,0.08);
    line-height: 1.5;
}

.desarrollo span {
    color: #6B7280;
}

/* ========================================================================== */
/* Componentes legacy heredados (la_urbanizacion, venta_de_lotes, etc.)        */
/* ========================================================================== */

.contenido {
    padding: 0;
    font-family: var(--mp-font);
    color: var(--mp-dark);
}

.h2_body {
    font-family: var(--mp-font) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--mp-dark) !important;
    padding: 0 0 6px !important;
    border-bottom: none !important;
    display: block;
    letter-spacing: -0.4px;
}

.txt_body {
    font-family: var(--mp-font) !important;
    font-size: 15px !important;
    color: var(--mp-gray-700) !important;
    line-height: 1.65;
}

.h2_box_casas {
    font-family: var(--mp-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--mp-dark) !important;
    letter-spacing: -0.2px;
}

.box_casas {
    background-color: var(--mp-card) !important;
    border-radius: var(--mp-radius);
    border: 1px solid var(--mp-gray-200);
    padding: 18px;
    box-shadow: var(--mp-shadow-sm);
}

.borde_img {
    border: 1px solid var(--mp-gray-200) !important;
    border-radius: var(--mp-radius-sm);
}

#lin_sep {
    background-color: var(--mp-gray-200) !important;
    margin: 32px auto !important;
    height: 1px !important;
}

/* ========================================================================== */
/* MODAL — Admin login overlay (Apple style)                                   */
/* ========================================================================== */

body.mp-modal-open { overflow: hidden; }

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

.mp-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: mp-modal-fade-in .25s ease-out;
}

@keyframes mp-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 24, 0.55);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    cursor: pointer;
}

.mp-modal-dialog {
    position: relative;
    background: var(--mp-card);
    border-radius: var(--mp-radius-lg);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35),
                0 8px 20px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 380px;
    padding: 32px 32px 28px;
    box-sizing: border-box;
    text-align: center;
    animation: mp-modal-pop .28s cubic-bezier(.2, 1, .35, 1);
}

@keyframes mp-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mp-modal-close {
    position: absolute;
    top: 10px; right: 14px;
    background: transparent;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--mp-gray-400);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
    font-family: -apple-system, system-ui, sans-serif;
}
.mp-modal-close:hover {
    background: var(--mp-gray-100);
    color: var(--mp-dark);
}

.mp-modal-head { margin-bottom: 22px; }

.mp-modal-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    display: block;
}

.mp-modal-head h2 {
    font-family: var(--mp-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--mp-dark);
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}

.mp-modal-sub {
    font-family: var(--mp-font);
    font-size: 13px;
    color: var(--mp-gray-500);
    margin: 0;
    letter-spacing: -0.1px;
}

.mp-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.mp-field { display: block; }

.mp-field-label {
    display: block;
    font-family: var(--mp-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--mp-gray-700);
    margin-bottom: 5px;
    letter-spacing: -0.1px;
}

.mp-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 13px;
    border: 1px solid var(--mp-gray-300);
    border-radius: 10px;
    font-family: var(--mp-font);
    font-size: 14px;
    color: var(--mp-dark);
    background: var(--mp-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mp-field input:focus {
    outline: none;
    border-color: var(--mp-blue);
    box-shadow: 0 0 0 4px rgba(44, 123, 214, 0.15);
}

.mp-modal-submit {
    margin-top: 6px;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    color: #fff;
    border: 0;
    border-radius: 980px;
    padding: 11px 0;
    font-family: var(--mp-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.1px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, filter .15s ease, background .2s ease;
    box-shadow: 0 4px 14px rgba(44, 123, 214, 0.3);
    position: relative;
    overflow: hidden;
    min-height: 42px;
}
.mp-modal-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(44, 123, 214, 0.4);
    filter: brightness(1.05);
}
.mp-modal-submit:active:not(:disabled) { transform: translateY(0); }
.mp-modal-submit:disabled { cursor: wait; }

/* === Estados del botón submit === */
.mp-modal-submit-label,
.mp-modal-spinner,
.mp-modal-check {
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, 1, .35, 1);
}
.mp-modal-submit-label {
    display: inline-block;
}
.mp-modal-spinner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    animation: mp-spin 0.7s linear infinite;
    opacity: 0;
    pointer-events: none;
}
.mp-modal-check {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 22px;
    height: 22px;
    opacity: 0;
    pointer-events: none;
}

/* Loading */
.mp-modal-submit.is-loading .mp-modal-submit-label { opacity: 0.25; }
.mp-modal-submit.is-loading .mp-modal-spinner {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Success */
.mp-modal-submit.is-success {
    background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.mp-modal-submit.is-success .mp-modal-submit-label { opacity: 0; }
.mp-modal-submit.is-success .mp-modal-spinner { opacity: 0; }
.mp-modal-submit.is-success .mp-modal-check {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Error */
.mp-modal-submit.is-error {
    background: linear-gradient(180deg, #F87171 0%, #DC2626 100%);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

@keyframes mp-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* === Mensaje de error inline === */
.mp-modal-error {
    margin: 0;
    padding: 10px 14px;
    background: #FEE2E2;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #B91C1C;
    font-family: var(--mp-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.1px;
    animation: mp-error-in .25s cubic-bezier(.2, 1, .35, 1);
}
@keyframes mp-error-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Shake del modal en error === */
@keyframes mp-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-9px); }
    30%      { transform: translateX(9px); }
    45%      { transform: translateX(-7px); }
    60%      { transform: translateX(7px); }
    75%      { transform: translateX(-4px); }
    90%      { transform: translateX(4px); }
}
.mp-modal-shake {
    animation: mp-shake .45s cubic-bezier(.36, .07, .19, .97) both;
}

@media (max-width: 480px) {
    .mp-modal-dialog { padding: 26px 22px 22px; }
    .mp-modal-logo { width: 56px; height: 56px; }
    .mp-modal-head h2 { font-size: 18px; }
}

/* ========================================================================== */
/* PAGINAS INTERNAS — wrapper comun                                            */
/* ========================================================================== */

.mp-page {
    max-width: var(--mp-page-max);
    margin: 0 auto;
    padding: 22px 24px 40px;
    box-sizing: border-box;
    font-family: var(--mp-font);
    color: var(--mp-dark);
}

.mp-page-head {
    text-align: center;
    margin-bottom: 22px;
}

.mp-page-head h1 {
    font-family: var(--mp-font);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.6px;
    line-height: 1.15;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.mp-page-sub {
    font-size: 15.5px;
    color: var(--mp-gray-500);
    margin: 0;
    letter-spacing: -0.1px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.mp-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--mp-gray-500);
    font-size: 15px;
}
.mp-empty p { margin: 0; line-height: 1.7; }

/* Botones genericos */
.mp-btn-primary,
.mp-btn-ghost {
    font-family: var(--mp-font);
    font-size: 14px;
    font-weight: 600;
    border-radius: 980px;
    padding: 11px 24px;
    border: 0;
    cursor: pointer;
    letter-spacing: -0.1px;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, background .15s ease, color .15s ease;
    display: inline-block;
}
.mp-btn-primary {
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(44, 123, 214, 0.3);
}
.mp-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(44, 123, 214, 0.4);
    filter: brightness(1.05);
}
.mp-btn-ghost {
    background: transparent;
    color: var(--mp-blue);
    border: 1px solid var(--mp-gray-300);
}
.mp-btn-ghost:hover {
    background: var(--mp-gray-50);
    border-color: var(--mp-blue);
}

/* Form grid generico (reusado en contacto y calculadora) */
.mp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.mp-field--span { grid-column: 1 / -1; }

.mp-field textarea,
.mp-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 13px;
    border: 1px solid var(--mp-gray-300);
    border-radius: 10px;
    font-family: var(--mp-font);
    font-size: 14px;
    color: var(--mp-dark);
    background: var(--mp-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
    resize: vertical;
}
.mp-field textarea:focus,
.mp-field select:focus {
    outline: none;
    border-color: var(--mp-blue);
    box-shadow: 0 0 0 4px rgba(44, 123, 214, 0.15);
}
.mp-field input[type=number] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 13px;
    border: 1px solid var(--mp-gray-300);
    border-radius: 10px;
    font-family: var(--mp-font);
    font-size: 14px;
    color: var(--mp-dark);
    background: var(--mp-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mp-field input[type=number]:focus {
    outline: none;
    border-color: var(--mp-blue);
    box-shadow: 0 0 0 4px rgba(44, 123, 214, 0.15);
}
.mp-field input:disabled {
    background: var(--mp-gray-50);
    color: var(--mp-gray-500);
    cursor: not-allowed;
}
.mp-field-label small {
    color: var(--mp-gray-400);
    font-weight: 400;
    margin-left: 2px;
}

.mp-form-hint {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--mp-gray-500);
    letter-spacing: -0.1px;
}

.mp-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    justify-content: flex-end;
}

.req { color: #EF4444; font-weight: 700; }

/* ========================================================================== */
/* CONTACTO — page con sidebar info + form                                     */
/* ========================================================================== */

.mp-contact-grid {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 32px;
    align-items: stretch;
}

.mp-contact-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Las 3 cards crecen proporcionalmente para ocupar el alto disponible */
.mp-contact-info .mp-info-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mp-info-card {
    background: var(--mp-card);
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius);
    padding: 18px 20px;
    box-shadow: var(--mp-shadow-sm);
    text-align: center;
}
.mp-info-card h3 {
    font-family: var(--mp-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 10px;
    text-align: center;
}
.mp-info-card p {
    margin: 0;
    font-size: 14px;
    color: var(--mp-dark);
    line-height: 1.6;
}
.mp-info-card .mp-info-sub {
    font-size: 12px;
    color: var(--mp-gray-500);
}
.mp-info-card--accent {
    background: linear-gradient(180deg, #EFF8FF 0%, #DBEAFE 100%);
    border-color: rgba(44, 123, 214, 0.2);
}

/* Lista de teléfonos con botón WhatsApp al lado */
.mp-phone-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mp-phone-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.mp-phone-num {
    color: var(--mp-dark) !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}
.mp-phone-num:hover { color: var(--mp-blue) !important; }

.mp-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #25D366;  /* verde WhatsApp oficial */
    color: #fff !important;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
    box-shadow: 0 2px 5px rgba(37, 211, 102, 0.35);
    flex-shrink: 0;
}
.mp-wa-btn:hover {
    background: #1FBA59;
    transform: scale(1.08);
    box-shadow: 0 3px 8px rgba(37, 211, 102, 0.5);
    color: #fff !important;
}
.mp-wa-btn svg { display: block; }

.mp-contact-form-wrap {
    background: var(--mp-card);
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius-lg);
    padding: 28px 30px;
    box-shadow: var(--mp-shadow-sm);
    display: flex;
    flex-direction: column;
}

.mp-contact-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px;
}

/* Campo Mensaje crece para ocupar el alto restante del form */
.mp-field--message {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 140px;
}
.mp-field--message textarea {
    flex: 1;
    min-height: 120px;
    resize: vertical;
}

.mp-contact-form .text-input.text-input,
.mp-contact-form input[type=text],
.mp-contact-form input[type=email],
.mp-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 13px;
    border: 1px solid var(--mp-gray-300);
    border-radius: 10px;
    font-family: var(--mp-font);
    font-size: 14px;
    color: var(--mp-dark);
    background: var(--mp-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mp-contact-form input:focus,
.mp-contact-form textarea:focus {
    outline: none;
    border-color: var(--mp-blue);
    box-shadow: 0 0 0 4px rgba(44, 123, 214, 0.15);
}

.mp-contact-sent {
    text-align: center;
    padding: 60px 30px;
    background: var(--mp-card);
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius-lg);
    box-shadow: var(--mp-shadow-sm);
    grid-column: 1 / -1;
}
.mp-contact-sent-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    color: #fff;
    margin: 0 auto 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(44, 123, 214, 0.3);
}
.mp-contact-sent h2 {
    font-family: var(--mp-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--mp-dark);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}
.mp-contact-sent p {
    font-size: 14px;
    color: var(--mp-gray-500);
    margin: 0;
}

/* ========================================================================== */
/* LA URBANIZACION — grid mapa + plano + texto                                 */
/* ========================================================================== */

.mp-urba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 32px;
}

.mp-urba-card {
    background: var(--mp-card);
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius);
    overflow: hidden;
    box-shadow: var(--mp-shadow-sm);
    display: flex;
    flex-direction: column;
}

.mp-urba-card-head {
    padding: 12px 18px;
    font-family: var(--mp-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--mp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--mp-gray-200);
    background: var(--mp-bg-alt);
}

.mp-urba-map {
    position: relative;
    flex: 1;
    min-height: 360px;
    background: var(--mp-gray-100);
}
.mp-urba-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.mp-urba-plano {
    padding: 14px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-urba-plano img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mp-radius-sm);
    display: block;
}

.mp-urba-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--mp-gray-700);
    line-height: 1.75;
    text-align: justify;
}
.mp-urba-text p { margin: 0 0 14px; }
.mp-urba-text p:last-child { margin-bottom: 0; }

/* ========================================================================== */
/* VENTA DE LOTES — flow Manzano > Lote > Detalle                              */
/* ========================================================================== */

.mp-lotes-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.mp-lotes-step {
    background: var(--mp-card);
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius);
    padding: 14px 14px 14px;
    box-shadow: var(--mp-shadow-sm);
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mp-step-num {
    position: absolute;
    top: -10px;
    left: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(44, 123, 214, 0.3);
}

.mp-step-label {
    display: block;
    font-family: var(--mp-font);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 4px 0 8px;
    padding-left: 32px;
}

.mp-step-box {
    font-family: var(--mp-font);
    color: var(--mp-dark);
    min-height: 0;
}

.mp-step-box * { font-family: inherit; }

/* Form interno del select de manzano/lote */
.mp-step-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mp-step-field { display: block; }
.mp-step-field-label {
    display: block;
    font-size: 12px;
    color: var(--mp-gray-500);
    font-weight: 500;
    margin-bottom: 4px;
    letter-spacing: -0.1px;
}
.mp-step-form select,
.mp-step-box select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--mp-gray-300);
    border-radius: 9px;
    font-family: var(--mp-font);
    font-size: 14px;
    background: var(--mp-bg);
    color: var(--mp-dark);
}
.mp-step-form select:focus,
.mp-step-box select:focus,
.mp-step-box input:focus {
    outline: none;
    border-color: var(--mp-blue);
    box-shadow: 0 0 0 3px rgba(44, 123, 214, 0.15);
}

.mp-step-next {
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    color: #fff;
    border: 0;
    border-radius: 980px;
    padding: 8px 16px;
    font-family: var(--mp-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -0.1px;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 3px 10px rgba(44, 123, 214, 0.28);
    align-self: stretch;
}
.mp-step-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(44, 123, 214, 0.38);
    filter: brightness(1.05);
}
.mp-step-next span { margin-left: 4px; }

.mp-step-empty {
    margin: 0;
    padding: 14px 4px;
    color: var(--mp-gray-500);
    font-size: 13px;
    line-height: 1.5;
}

/* Detalle del lote — paleta azul/gris */
.mp-lote-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mp-lote-dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    font-size: 13px;
}
.mp-lote-dl dt {
    color: var(--mp-gray-500);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.mp-lote-dl dt::after { content: ':'; margin-left: 2px; }
.mp-lote-dl dd {
    margin: 0;
    color: var(--mp-dark);
    font-weight: 600;
}
.mp-step-next--buy {
    align-self: flex-start;
    padding: 7px 14px;
    font-size: 12.5px;
}

.mp-lotes-plano {
    background: var(--mp-card);
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius);
    padding: 22px;
    box-shadow: var(--mp-shadow-sm);
}
.mp-lotes-plano-title {
    font-family: var(--mp-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 16px;
    text-align: center;
}
.mp-lotes-plano-img { text-align: center; }
.mp-lotes-plano-img img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow);
}

/* ========================================================================== */
/* VENTA DE CASAS — detalle + thumbs grid                                      */
/* ========================================================================== */

.mp-casas-detail {
    margin-bottom: 28px;
    min-height: 200px;
}

/* Detalle de casa — galería + info al lado, sin cards anidadas */
.mp-casa-card {
    background: transparent;
    margin: 0;
}

.mp-casa-card-head {
    text-align: center;
    margin-bottom: 18px;
}
.mp-casa-card-head h2 {
    font-family: var(--mp-font);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.4px;
    line-height: 1.2;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}
.mp-casa-tipo {
    font-weight: 500;
    font-size: 0.78em;
    opacity: 0.85;
}

.mp-casa-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.mp-casa-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mp-casa-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--mp-radius);
    background: var(--mp-gray-100);
    box-shadow: var(--mp-shadow);
}
.mp-casa-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .25s ease;
}

.mp-casa-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.mp-casa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: var(--mp-gray-300);
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, transform .12s ease;
}
.mp-casa-dot:hover { background: var(--mp-gray-500); }
.mp-casa-dot.is-active {
    background: var(--mp-blue);
    transform: scale(1.25);
}

.mp-casa-info {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mp-casa-section-title {
    font-family: var(--mp-font);
    font-size: 12px;
    font-weight: 700;
    color: var(--mp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin: 0 0 10px;
}

.mp-casa-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mp-casa-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    color: var(--mp-dark);
    line-height: 1.5;
}
.mp-casa-check {
    flex: 0 0 14px;
    margin-top: 4px;
    color: var(--mp-blue);
}

.mp-casa-empty {
    color: var(--mp-gray-500);
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

.mp-casa-loc {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mp-font);
    font-size: 13px;
}
.mp-casa-loc th {
    background: var(--mp-slate);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 8px 10px;
    text-align: left;
}
.mp-casa-loc td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mp-gray-200);
    color: var(--mp-dark);
}
.mp-casa-loc tr:last-child td { border-bottom: 0; }

.mp-casas-strip {
    background: var(--mp-bg-alt);
    border-radius: var(--mp-radius);
    padding: 22px;
}
.mp-casas-strip-title {
    font-family: var(--mp-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--mp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 16px;
}

.mp-casas-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.mp-casa-thumb {
    appearance: none;
    background: var(--mp-card);
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius);
    padding: 0;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    box-shadow: var(--mp-shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    display: flex;
    flex-direction: column;
}
.mp-casa-thumb:hover {
    transform: translateY(-2px);
    box-shadow: var(--mp-shadow);
    border-color: var(--mp-blue-light);
}
.mp-casa-thumb.is-active {
    border-color: var(--mp-blue);
    box-shadow: 0 0 0 3px rgba(44, 123, 214, 0.18), var(--mp-shadow);
}

.mp-casa-thumb-img {
    display: block;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--mp-gray-100);
}
.mp-casa-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s cubic-bezier(.2, 1, .35, 1);
}
.mp-casa-thumb:hover .mp-casa-thumb-img img { transform: scale(1.05); }

.mp-casa-thumb-label {
    display: block;
    padding: 10px 12px;
    font-family: var(--mp-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--mp-dark);
    letter-spacing: -0.1px;
    line-height: 1.3;
}
.mp-casa-thumb-label small {
    display: block;
    font-weight: 400;
    color: var(--mp-gray-500);
    font-size: 12px;
    margin-top: 2px;
}

/* ========================================================================== */
/* CALCULAR CUOTAS — card form + plan output                                   */
/* ========================================================================== */

.mp-calc-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 920px;
    margin: 0 auto;
}

.mp-calc-card {
    background: var(--mp-card);
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius-lg);
    padding: 28px 30px;
    box-shadow: var(--mp-shadow-sm);
}
.mp-calc-card-head {
    text-align: center;
    margin-bottom: 22px;
}
.mp-calc-card-head h2 {
    font-family: var(--mp-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--mp-dark);
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}
.mp-calc-card-head p {
    font-size: 13.5px;
    color: var(--mp-gray-500);
    margin: 0;
}

.mp-calc-plan:empty { display: none; }
.mp-calc-plan { padding: 0; }

/* ========================================================================== */
/* PLAN DE PAGOS — resumen + tabla                                             */
/* ========================================================================== */

.mp-plan {
    background: var(--mp-card);
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius-lg);
    box-shadow: var(--mp-shadow-sm);
    overflow: hidden;
}

.mp-plan-head {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--mp-gray-200);
    background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
}

.mp-plan-title {
    font-family: var(--mp-font);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: -0.3px;
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.mp-plan-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.mp-plan-stat {
    background: var(--mp-bg);
    border: 1px solid var(--mp-gray-200);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mp-plan-stat-label {
    font-family: var(--mp-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--mp-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mp-plan-stat-value {
    font-family: var(--mp-font);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--mp-dark);
    letter-spacing: -0.2px;
}

.mp-plan-stat--accent {
    background: linear-gradient(180deg, #5AC8FA 0%, #2C7BD6 100%);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(44, 123, 214, 0.25);
}
.mp-plan-stat--accent .mp-plan-stat-label { color: rgba(255,255,255,0.85); }
.mp-plan-stat--accent .mp-plan-stat-value { color: #fff; }

.mp-plan-table-wrap {
    max-height: 460px;
    overflow-y: auto;
    overflow-x: auto;
}

.mp-plan-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mp-font);
    font-size: 13.5px;
}

.mp-plan-table th {
    background: var(--mp-slate);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}

.mp-plan-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--mp-gray-100);
    color: var(--mp-dark);
}

.mp-plan-table tbody tr:nth-child(even) td {
    background: var(--mp-bg-alt);
}

.mp-plan-table tbody tr:hover td {
    background: #EFF6FF;
}

.mp-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.mp-plan-table th.mp-num { font-weight: 700; }

.mp-plan-note {
    margin: 0;
    padding: 12px 24px 16px;
    font-family: var(--mp-font);
    font-size: 12px;
    color: var(--mp-gray-500);
    border-top: 1px solid var(--mp-gray-100);
    text-align: center;
    line-height: 1.6;
    background: var(--mp-bg-alt);
}

/* ========================================================================== */
/* Responsive                                                                  */
/* ========================================================================== */

@media (max-width: 900px) {
    .top { padding: 10px 18px 8px !important; }
    .mp-brand-logo { max-width: 200px; }

    .menu { padding: 8px 0 !important; }
    #menuh ul, #menuhH ul { padding: 0 12px; gap: 4px 12px; }
    #menuh a, #menuhH a { font-size: 11.5px; letter-spacing: 0.6px; padding: 6px 12px; }

    .lr-hero-img-section { padding: 14px 14px 4px; }
    .lr-hero-img { aspect-ratio: 16 / 9; border-radius: 10px; }

    .lr-tagline { padding: 22px 18px 12px; }
    .lr-info { padding: 12px 18px 32px; }

    .lr-info-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .lr-info-map { min-height: 240px; }

    /* paginas internas */
    .mp-page { padding: 24px 16px 40px; }
    .mp-urba-grid { grid-template-columns: 1fr; gap: 16px; }
    .mp-urba-map { min-height: 280px; }
    .mp-contact-grid { grid-template-columns: 1fr; gap: 22px; }
    .mp-contact-form-wrap { padding: 22px 20px; }
    .mp-lotes-flow { grid-template-columns: 1fr; }
    .mp-casas-thumbs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .mp-casa-body { grid-template-columns: 1fr; gap: 20px; }
    .mp-calc-card { padding: 22px 20px; }
    .mp-form-grid { grid-template-columns: 1fr; }

    .footer { padding: 22px 18px 16px !important; }
    .mp-footer-inner { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
    .mp-brand-logo { max-width: 170px; }
    .lr-tagline h1 { font-size: 19px; }
    .lr-info-text { font-size: 15px; }
    .mp-form-actions { justify-content: stretch; flex-direction: column; }
    .mp-btn-primary, .mp-btn-ghost { width: 100%; }
}