/* =====================================================
   CAPITER - Hoja de estilos
   Paleta azul corporativa
   ===================================================== */

:root {
    /* Nueva paleta corporativa Capiter */
    --azul-900: #131A59;
    --azul-800: #1a2470;
    --azul-700: #0d3d80;
    --azul-600: #006fa0;
    --azul-500: #0082B3;
    --azul-100: #ddf0f8;
    --azul-050: #f0f8fc;
    --acento:   #0082B3;
    --gris-900: #1a1a1a;
    --gris-700: #4a4a4a;
    --gris-500: #8a8a8a;
    --gris-200: #e2e6ea;
    --gris-100: #f4f6f8;
    --blanco:   #ffffff;
    --rojo:     #c0392b;
    --verde:    #27ae60;
    --shadow-sm: 0 2px 8px rgba(19,26,89,.08);
    --shadow-md: 0 8px 24px rgba(19,26,89,.14);
    --shadow-lg: 0 16px 48px rgba(0,130,179,.18);
    --shadow-color: 0 8px 32px rgba(0,130,179,.20);
    --radius:   8px;
    --radius-lg: 14px;
    --max:     1200px;
    --transition: .28s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--gris-900);
    background: var(--blanco);
    line-height: 1.6;
    font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: var(--azul-700); text-decoration: none; transition: color .2s; }
a:hover { color: var(--azul-500); }

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

/* ---------- TOPBAR ---------- */
.topbar {
    background: var(--azul-900);
    color: #cfdcec;
    font-size: 14px;
}
.topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 16px;
    flex-wrap: wrap;
}
.topbar a { color: #cfdcec; }
.topbar a:hover { color: #fff; }
.topbar-left span,
.topbar-right span { margin-right: 16px; }

/* ---------- HEADER ---------- */
.header {
    background: var(--blanco);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    /* Necesario para que el nav móvil se ancle correctamente */
    isolation: isolate;
}
.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 24px;
}
.logo {
    font-size: 26px;
    font-weight: 800;
    color: var(--azul-800);
    letter-spacing: -.5px;
    display: flex;
    align-items: center;
}
.logo span { color: var(--acento); }
.logo-img {
    height: 58px;
    width: auto;
    display: block;
    object-fit: contain;
}

.nav {
    display: flex;
    gap: 4px;
    align-items: center;
}
.nav a {
    padding: 10px 14px;
    color: var(--gris-900);
    font-weight: 500;
    border-radius: 6px;
}
.nav a:hover,
.nav a.active {
    background: var(--azul-100);
    color: var(--azul-800);
}
.nav .btn { margin-left: 8px; }

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
}
.menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--azul-800);
    margin: 5px 0;
    border-radius: 2px;
}

/* ---------- BOTONES ---------- */
.btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 15px;
    border: 0;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .2s;
    text-align: center;
    line-height: 1.2;
}
.btn-primary {
    background: var(--azul-700);
    color: #fff !important;
}
.btn-primary:hover {
    background: var(--azul-800);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn-outline {
    background: transparent;
    color: var(--azul-700) !important;
    border: 2px solid var(--azul-700);
}
.btn-outline:hover {
    background: var(--azul-700);
    color: #fff !important;
}
.btn-acento {
    background: var(--acento);
    color: #fff !important;
}
.btn-acento:hover {
    background: #d98e10;
}
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-vender,
.nav a.btn-vender,
.nav a.btn.btn-vender {
    background: var(--azul-500) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 9px 18px;
    font-weight: 700;
    border: none;
}
.btn-vender:hover,
.nav a.btn-vender:hover {
    background: var(--azul-700) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,130,179,.35);
}
.btn-danger {
    background: var(--rojo);
    color: #fff !important;
}
.btn-danger:hover { background: #8e2a20; }

/* ---------- HERO ---------- */
.hero {
    position: relative;
    background:
        linear-gradient(135deg, rgba(10,44,82,.55), rgba(19,26,89,.48)),
        url('../../uploads/oficina-interior-01.jpg') center/cover no-repeat;
    color: #fff;
    padding: 110px 0 100px;
    text-align: center;
}
.hero h1 {
    font-size: clamp(28px, 5vw, 52px);
    margin: 0 0 18px;
    line-height: 1.15;
    font-weight: 800;
}
.hero p {
    font-size: clamp(16px, 2vw, 20px);
    max-width: 760px;
    margin: 0 auto 32px;
    opacity: .95;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Hero pequeño para subpáginas */
.subhero {
    background: linear-gradient(135deg, var(--azul-900) 0%, var(--azul-500) 100%);
    color: #fff;
    padding: 90px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Ondas decorativas de fondo */
.subhero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 10% 50%, rgba(255,255,255,.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 90% 20%, rgba(255,255,255,.04) 0%, transparent 70%);
    pointer-events: none;
}
.subhero::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat bottom / cover;
}
.subhero .container { position: relative; z-index: 1; }
.subhero h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 4.5vw, 48px);
    font-weight: 800;
    animation: heroUp .65s .1s ease both;
}
.subhero p {
    margin: 0;
    opacity: .9;
    font-size: clamp(15px, 2vw, 19px);
    animation: heroUp .65s .25s ease both;
}

/* ---------- SECTION ---------- */
section { padding: 80px 0; }
section.compact { padding: 56px 0; }
.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}
.section-head .eyebrow {
    display: inline-block;
    color: var(--azul-700);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.section-head h2 {
    margin: 0 0 14px;
    font-size: clamp(24px, 3.5vw, 36px);
    color: var(--azul-900);
}
.section-head p { color: var(--gris-700); font-size: 17px; margin: 0; }

.bg-light { background: var(--azul-050); }

/* ---------- GRID SERVICIOS ---------- */
.grid {
    display: grid;
    gap: 24px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
    border: 1px solid var(--gris-200);
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.card-icon {
    width: 56px;
    height: 56px;
    background: var(--azul-100);
    color: var(--azul-700);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 18px;
}
.card h3 {
    margin: 0 0 10px;
    color: var(--azul-900);
    font-size: 20px;
}
.card p { margin: 0; color: var(--gris-700); }

/* ---------- ABOUT ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.about-grid img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.about-grid h2 { margin-top: 0; color: var(--azul-900); }
.checklist { list-style: none; padding: 0; margin: 24px 0; }
.checklist li {
    padding: 8px 0 8px 32px;
    position: relative;
}
.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--azul-700);
    color: #fff;
    text-align: center;
    line-height: 22px;
    font-size: 13px;
    font-weight: 700;
}

/* ---------- CTA BAND ---------- */
.cta-band {
    background: linear-gradient(135deg, var(--azul-800), var(--azul-600));
    color: #fff;
    padding: 56px 0;
    text-align: center;
}
.cta-band h2 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 32px); }
.cta-band p { margin: 0 0 22px; opacity: .9; }

/* ---------- INMUEBLES ---------- */
.filters {
    background: #fff;
    padding: 22px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 36px;
    display: grid;
    grid-template-columns: repeat(5, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.filters label {
    display: block;
    font-size: 13px;
    color: var(--gris-700);
    margin-bottom: 6px;
    font-weight: 600;
}
.filters select,
.filters input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gris-200);
    border-radius: 6px;
    font: inherit;
    background: #fff;
}

.inmuebles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.inmueble-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gris-200);
    transition: transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
}
.inmueble-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.inmueble-thumb {
    aspect-ratio: 16 / 10;
    background: var(--azul-100) center/cover no-repeat;
    position: relative;
}
.inmueble-thumb .badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--azul-700);
    color: #fff;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.inmueble-thumb .badge.alquiler { background: var(--acento); }
.inmueble-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.inmueble-body h3 {
    margin: 0 0 8px;
    color: var(--azul-900);
    font-size: 18px;
}
.inmueble-body .precio {
    color: var(--azul-700);
    font-size: 22px;
    font-weight: 800;
    margin: 6px 0 12px;
}
.inmueble-body .direccion {
    color: var(--gris-500);
    font-size: 14px;
    margin-bottom: 14px;
}
.inmueble-meta {
    display: flex;
    gap: 14px;
    color: var(--gris-700);
    font-size: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--gris-200);
}
.inmueble-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Detalle inmueble */
.detalle-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}
.detalle-img {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: var(--radius-lg);
    background: var(--azul-100) center/cover no-repeat;
    box-shadow: var(--shadow-md);
}
.detalle-info {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 100px;
}
.detalle-info .precio {
    font-size: 30px;
    color: var(--azul-700);
    font-weight: 800;
    margin: 0 0 10px;
}
.detalle-info ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.detalle-info ul li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gris-200);
    font-size: 15px;
}
.detalle-info ul li:last-child { border-bottom: 0; }

/* ---------- FEATURES BAR (ficha inmueble) ---------- */
.features-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    background: var(--azul-050);
    border: 1px solid var(--azul-100);
    border-radius: var(--radius-lg);
    padding: 22px 18px;
    margin-top: 28px;
}
.feature {
    text-align: center;
    padding: 6px 4px;
}
.feature-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: var(--shadow-sm);
}
.feature-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--azul-900);
    line-height: 1.1;
}
.feature-label {
    color: var(--gris-700);
    font-size: 13px;
    margin-top: 4px;
}

/* ---------- CARACTERÍSTICAS / EXTRAS ---------- */
.caracs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.carac {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--gris-900);
    transition: border-color .2s, transform .15s;
}
.carac:hover {
    border-color: var(--azul-500);
    transform: translateY(-1px);
}
.carac-icon {
    font-size: 22px;
    width: 36px;
    height: 36px;
    background: var(--azul-100);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.carac-label { font-weight: 600; }

/* ---------- MAPA ---------- */
.inmueble-map {
    width: 100%;
    height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gris-200);
    background: var(--azul-050);
    position: relative;
    z-index: 1;
}
.map-loader, .map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-700);
    font-size: 15px;
}
.map-empty { color: var(--gris-500); }

/* Badge inline (en la tarjeta de info lateral) */
.badge-inline {
    display: inline-block;
    background: var(--azul-700);
    color: #fff;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 14px;
}
.badge-inline.alquiler { background: var(--acento); }

/* ---------- EXTRAS (admin: checkboxes con iconos) ---------- */
.extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
.extra-toggle {
    display: flex !important;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid var(--gris-200);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    margin: 0 !important;
    font-weight: 500;
}
.extra-toggle:hover { border-color: var(--azul-500); }
.extra-toggle input {
    width: 18px !important;
    height: 18px;
    margin: 0 !important;
    accent-color: var(--azul-700);
    cursor: pointer;
}
.extra-toggle .extra-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    background: var(--azul-100);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.extra-toggle input:checked ~ .extra-label,
.extra-toggle:has(input:checked) {
    color: var(--azul-900);
}
.extra-toggle:has(input:checked) {
    border-color: var(--azul-700);
    background: var(--azul-050);
}

/* ---------- FORMULARIOS ---------- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-row { grid-column: 1 / -1; }
form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gris-700);
    margin-bottom: 14px;
}
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form input[type="password"],
form input[type="file"],
form select,
form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--gris-200);
    border-radius: 6px;
    font: inherit;
    margin-top: 4px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: var(--azul-500);
    box-shadow: 0 0 0 3px rgba(44, 124, 176, .15);
}
form textarea { min-height: 140px; resize: vertical; }

.alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 15px;
    border: 1px solid;
}
.alert-success { background: #e8f6ef; border-color: #b8e0c8; color: #1d6d3e; }
.alert-danger  { background: #fbeae9; border-color: #f1c0bd; color: #9c2a20; }
.alert-info    { background: var(--azul-100); border-color: #c8def0; color: var(--azul-800); }

/* ---------- CONTACTO ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 50px;
}
.contact-info h3 { color: var(--azul-900); margin-top: 0; }
.contact-block {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    align-items: flex-start;
}
.contact-block .icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--azul-100);
    color: var(--azul-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex: 0 0 auto;
}
.contact-block strong { display: block; color: var(--azul-900); }

/* ---------- FOOTER ---------- */
.footer {
    background: var(--azul-900);
    color: #c8d4e3;
    padding: 60px 0 0;
}
.footer .grid-4 { gap: 36px; }
.footer h4 {
    color: #fff;
    margin: 0 0 16px;
    font-size: 16px;
    letter-spacing: .3px;
}
.footer a { color: #c8d4e3; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { padding: 5px 0; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 40px;
    padding: 18px 0;
    text-align: center;
    font-size: 14px;
    color: #98a6ba;
}

/* ---------- AUTH (login) ---------- */
.auth-body {
    background: linear-gradient(135deg, var(--azul-800), var(--azul-600));
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.auth-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-lg);
    max-width: 420px;
    width: 100%;
}
.auth-card h1 {
    margin: 0 0 6px;
    color: var(--azul-900);
    text-align: center;
}
.auth-card .sub {
    color: var(--gris-700);
    text-align: center;
    margin: 0 0 28px;
}

/* ---------- ADMIN ---------- */
.admin-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--gris-100);
}
.admin-sidebar {
    background: var(--azul-900);
    color: #d1ddee;
    padding: 24px 16px;
}
.admin-sidebar .logo { color: #fff; margin-bottom: 32px; padding: 0 6px; }
.admin-sidebar .logo span { color: var(--acento); }
.admin-sidebar a {
    display: block;
    color: #c8d4e3;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-weight: 500;
}
.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.admin-main {
    padding: 28px 36px;
}
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.admin-topbar h1 { margin: 0; color: var(--azul-900); font-size: 24px; }

.table {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.table th, .table td {
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gris-200);
    font-size: 15px;
}
.table th {
    background: var(--azul-100);
    color: var(--azul-900);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.table tbody tr:hover { background: var(--azul-050); }
.table .thumb {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--gris-200);
}
.table .actions { display: flex; gap: 8px; }

.empty {
    text-align: center;
    padding: 80px 30px;
    background: #fff;
    border-radius: var(--radius-lg);
    color: var(--gris-700);
    box-shadow: var(--shadow-sm);
}
.empty p { font-size: 16px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .inmuebles-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid, .contact-grid, .detalle-grid { grid-template-columns: 1fr; }
    .detalle-info { position: static; }
    .filters { grid-template-columns: repeat(2, 1fr); }
    .filters .btn { grid-column: 1 / -1; }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        padding: 14px 18px;
        display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    }
    .admin-sidebar .logo { width: 100%; margin: 0 0 8px; }
    .admin-sidebar a { padding: 8px 12px; }
}
@media (max-width: 720px) {
    .features-bar { grid-template-columns: repeat(2, 1fr); padding: 16px 12px; }
    .feature-icon { width: 44px; height: 44px; font-size: 20px; }
    .feature-num { font-size: 18px; }
    .caracs-grid { grid-template-columns: 1fr; }
    .inmueble-map { height: 280px; }
    .menu-toggle { display: block; }
    .nav {
        display: none !important;
        position: fixed;
        top: 64px; left: 0; right: 0;
        background: #fff;
        flex-direction: column;
        padding: 12px 16px 20px;
        box-shadow: 0 8px 24px rgba(0,0,0,.15);
        gap: 2px;
        z-index: 9999;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    .nav.open { display: flex !important; }
    .nav a { width: 100%; box-sizing: border-box; }
    /* Desactivar animación de entrada en móvil para que los items sean visibles al instante */
    .nav > * { animation: none !important; opacity: 1 !important; transform: none !important; }
    .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
    .inmuebles-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    section { padding: 56px 0; }
    .hero { padding: 80px 0 70px; }
    .topbar { display: none; }
}

/* =====================================================
   ABOUT IMAGEN STACK (index.php)
   ===================================================== */
.about-img-stack {
    position: relative;
}
.about-img-main {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: block;
}
.about-img-secondary {
    position: absolute;
    bottom: -28px;
    right: -28px;
    width: 52%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 4px solid #fff;
    display: block;
}
@media (max-width: 980px) {
    .about-img-secondary { display: none; }
    .about-img-stack { margin-bottom: 0; }
}

/* =====================================================
   GALERÍA OFICINA (index.php)
   ===================================================== */
.oficina-gallery {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.oficina-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.oficina-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.oficina-gallery-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: transform .3s, filter .3s;
}
.oficina-gallery-grid img:hover {
    transform: scale(1.03);
    filter: brightness(1.08);
}
@media (max-width: 720px) {
    .oficina-gallery { grid-template-columns: 1fr; }
    .oficina-gallery-main { aspect-ratio: 16/9; overflow: hidden; }
    .oficina-gallery-main img { height: 100%; }
}

/* =====================================================
   BREADCRUMB
   ===================================================== */
.breadcrumb-bar {
    background: var(--azul-050);
    border-bottom: 1px solid var(--gris-200);
    padding: 10px 0;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gris-500);
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--azul-600); }
.breadcrumb a:hover { color: var(--azul-800); }
.breadcrumb span:last-child { color: var(--gris-700); font-weight: 500; }

/* =====================================================
   DETALLE INMUEBLE - REDISEÑO
   ===================================================== */
.detalle-section { padding: 48px 0 64px; }

.detalle-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.detalle-titulo {
    font-size: clamp(22px, 3.5vw, 34px);
    color: var(--azul-900);
    margin: 0 0 6px;
    line-height: 1.2;
}
.detalle-ubicacion {
    color: var(--gris-700);
    font-size: 15px;
    margin: 0;
}
.detalle-header-right { text-align: right; flex-shrink: 0; }
.detalle-precio-top {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    color: var(--azul-700);
    line-height: 1.1;
    margin-bottom: 8px;
}
.detalle-precio-top small { font-size: 16px; font-weight: 500; }

.badge-pill {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--azul-700);
    color: #fff;
}
.badge-pill.alquiler { background: var(--acento); }
.badge-pill.venta { background: var(--verde); }

/* Layout 2 columnas */
.detalle-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 36px;
    align-items: start;
}
@media (max-width: 980px) {
    .detalle-layout { grid-template-columns: 1fr; }
    .detalle-sidebar { position: static !important; }
    .detalle-header { flex-direction: column; }
    .detalle-header-right { text-align: left; }
}

/* --- GALERÍA --- */
.galeria-wrap { margin-bottom: 24px; }
.galeria-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--gris-200);
    aspect-ratio: 16/10;
    box-shadow: var(--shadow-md);
}
.galeria-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .3s;
}
.badge-galeria {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--verde);
    color: #fff;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.badge-galeria.alquiler { background: var(--acento); }
.galeria-prev, .galeria-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    color: #fff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 2;
}
.galeria-prev { left: 12px; }
.galeria-next { right: 12px; }
.galeria-prev:hover, .galeria-next:hover { background: rgba(0,0,0,.7); }
.galeria-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.galeria-thumb {
    width: 80px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 3px solid transparent;
    flex-shrink: 0;
    transition: border-color .15s, transform .15s;
}
.galeria-thumb:hover { transform: scale(1.05); }
.galeria-thumb.active { border-color: var(--azul-600); }

/* --- FICHA FEATURES (barra de íconos) --- */
.ficha-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    background: var(--azul-050);
    border: 1px solid var(--azul-100);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    margin-bottom: 32px;
}
.ficha-feature {
    text-align: center;
    padding: 6px 4px;
}
.ficha-feature-icon {
    font-size: 26px;
    margin-bottom: 6px;
    line-height: 1;
}
.ficha-feature-val {
    font-size: 17px;
    font-weight: 800;
    color: var(--azul-900);
    line-height: 1.2;
}
.ficha-feature-lab {
    font-size: 12px;
    color: var(--gris-500);
    margin-top: 3px;
}

/* --- BLOQUES DE CONTENIDO --- */
.detalle-bloque {
    margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--gris-200);
}
.detalle-bloque:last-child { border-bottom: 0; }
.detalle-bloque-titulo {
    font-size: 20px;
    color: var(--azul-900);
    margin: 0 0 18px;
    font-weight: 700;
}
.detalle-descripcion {
    color: var(--gris-700);
    font-size: 16px;
    line-height: 1.75;
}
.detalle-mapa-aviso {
    font-size: 14px;
    color: var(--gris-500);
    margin: 0 0 12px;
}

/* --- EXTRAS LISTA --- */
.extras-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 10px;
}
.extra-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gris-900);
    transition: border-color .15s;
}
.extra-item:hover { border-color: var(--azul-400, var(--azul-500)); }
.extra-item-icon {
    font-size: 20px;
    width: 34px;
    height: 34px;
    background: var(--azul-100);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- CERTIFICADO ENERGÉTICO --- */
.cert-energetico {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 420px;
}
.cert-bar {
    display: flex;
    align-items: center;
    height: 34px;
    border-radius: 0 6px 6px 0;
    padding: 0 14px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    position: relative;
    transition: filter .2s;
}
.cert-bar span { flex-shrink: 0; }
.cert-bar.cert-active {
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
    filter: brightness(1.05);
    outline: 3px solid rgba(0,0,0,.3);
    outline-offset: 1px;
}
.cert-marker {
    position: absolute;
    left: calc(100% + 10px);
    white-space: nowrap;
    background: var(--azul-900);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* --- SIDEBAR --- */
.detalle-sidebar {
    position: sticky;
    top: 100px;
}
.sidebar-card {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.sidebar-precio {
    font-size: 32px;
    font-weight: 800;
    color: var(--azul-700);
    line-height: 1.1;
    margin-bottom: 8px;
}
.sidebar-precio small { font-size: 16px; font-weight: 500; }
.sidebar-ficha {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    border-top: 1px solid var(--gris-200);
    padding-top: 14px;
}
.sidebar-ficha li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--gris-200);
    font-size: 14px;
}
.sidebar-ficha li:last-child { border-bottom: 0; }
.sidebar-ficha li span { color: var(--gris-500); }
.sidebar-ficha li strong { color: var(--gris-900); font-weight: 600; }
.sidebar-btns { display: flex; flex-direction: column; }
.sidebar-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--gris-200);
    font-size: 13px;
    color: var(--gris-500);
}
.sidebar-share a {
    color: var(--gris-700);
    transition: color .2s, transform .15s;
    display: flex;
}
.sidebar-share a:hover { color: var(--azul-600); transform: scale(1.15); }

/* WhatsApp button */
.btn-whatsapp {
    background: #25d366;
    color: #fff !important;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: background .2s, transform .15s;
}
.btn-whatsapp:hover { background: #1da851; transform: translateY(-1px); }

/* --- CALCULADORA HIPOTECA --- */
.sidebar-card-titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--azul-900);
    margin: 0 0 16px;
}
.hipoteca-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-700);
    margin-bottom: 12px;
}
.hipoteca-form input[type="number"],
.hipoteca-form input[type="range"] {
    width: 100%;
    margin-top: 4px;
}
.hipoteca-form input[type="range"] {
    accent-color: var(--azul-600);
    cursor: pointer;
}
.hipo-range-val {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--azul-700);
    font-weight: 700;
    margin-top: -6px;
}
.hipoteca-result {
    background: var(--azul-050);
    border: 1px solid var(--azul-100);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    font-size: 14px;
    color: var(--gris-700);
    margin: 14px 0 10px;
}
.hipoteca-result strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--azul-700);
    margin-top: 4px;
}

@media (max-width: 720px) {
    .detalle-header { gap: 12px; }
    .ficha-features { grid-template-columns: repeat(3, 1fr); }
    .cert-marker { display: none; }
    .galeria-thumb { width: 60px; height: 44px; }
}

/* =====================================================
   ABOUT IMAGEN STACK (index.php)
   ===================================================== */
.about-img-stack {
    position: relative;
    padding-bottom: 36px;
}
.about-img-main {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: block;
}
.about-img-secondary {
    position: absolute;
    bottom: 0;
    right: -24px;
    width: 50%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 4px solid #fff;
    display: block;
}
@media (max-width: 980px) {
    .about-img-secondary { display: none; }
    .about-img-stack { padding-bottom: 0; }
}

/* =====================================================
   GALERÍA OFICINA (index.php)
   ===================================================== */
.oficina-gallery {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 420px;
}
.oficina-gallery-main {
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.oficina-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.oficina-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.oficina-gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: transform .3s, filter .3s;
}
.oficina-gallery-grid img:hover {
    transform: scale(1.04);
    filter: brightness(1.08);
}
@media (max-width: 860px) {
    .oficina-gallery { grid-template-columns: 1fr; height: auto; }
    .oficina-gallery-main { aspect-ratio: 16/9; }
    .oficina-gallery-grid { grid-template-columns: repeat(4, 1fr); height: 90px; }
}
@media (max-width: 560px) {
    .oficina-gallery-grid { grid-template-columns: repeat(2, 1fr); height: auto; }
    .oficina-gallery-grid img { aspect-ratio: 1; height: auto; }
}

/* =====================================================
   BREADCRUMB
   ===================================================== */
.breadcrumb-bar {
    background: var(--azul-050);
    border-bottom: 1px solid var(--gris-200);
    padding: 10px 0;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gris-500);
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--azul-600); }
.breadcrumb a:hover { color: var(--azul-800); text-decoration: underline; }
.breadcrumb span:last-child { color: var(--gris-700); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

/* =====================================================
   DETALLE INMUEBLE — NUEVO LAYOUT
   ===================================================== */
.detalle-section { padding: 40px 0 64px; }

.detalle-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.detalle-titulo {
    font-size: clamp(20px, 3.5vw, 32px);
    color: var(--azul-900);
    margin: 0 0 6px;
    line-height: 1.2;
    font-weight: 800;
}
.detalle-ubicacion {
    color: var(--gris-700);
    font-size: 15px;
    margin: 0;
}
.detalle-header-right { text-align: right; flex-shrink: 0; }
.detalle-precio-top {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: var(--azul-700);
    line-height: 1.1;
    margin-bottom: 8px;
}
.detalle-precio-top small { font-size: 16px; font-weight: 500; }

.badge-pill {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--azul-700);
    color: #fff;
}
.badge-pill.alquiler { background: var(--acento); }
.badge-pill.venta    { background: var(--verde); }

/* --- LAYOUT PRINCIPAL --- */
.detalle-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 980px) {
    .detalle-layout   { grid-template-columns: 1fr; }
    .detalle-sidebar  { position: static !important; }
    .detalle-header   { flex-direction: column; }
    .detalle-header-right { text-align: left; }
}

/* --- GALERÍA DE FOTOS --- */
.galeria-wrap { margin-bottom: 20px; }
.galeria-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--gris-200);
    aspect-ratio: 16 / 10;
    box-shadow: var(--shadow-md);
}
.galeria-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .25s;
}
.badge-galeria {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--verde);
    color: #fff;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    z-index: 2;
}
.badge-galeria.alquiler { background: var(--acento); }
.galeria-prev,
.galeria-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.40);
    color: #fff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 2;
}
.galeria-prev { left: 12px; }
.galeria-next { right: 12px; }
.galeria-prev:hover,
.galeria-next:hover { background: rgba(0,0,0,.68); }
.galeria-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.galeria-thumbs::-webkit-scrollbar { height: 4px; }
.galeria-thumbs::-webkit-scrollbar-thumb { background: var(--gris-200); border-radius: 4px; }
.galeria-thumb {
    width: 80px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 3px solid transparent;
    flex-shrink: 0;
    transition: border-color .15s, transform .15s;
}
.galeria-thumb:hover  { transform: scale(1.06); }
.galeria-thumb.active { border-color: var(--azul-600); }

/* --- FICHA FEATURES --- */
.ficha-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    background: var(--azul-050);
    border: 1px solid var(--azul-100);
    border-radius: var(--radius-lg);
    padding: 18px 14px;
    margin-bottom: 28px;
}
.ficha-feature { text-align: center; padding: 4px 2px; }
.ficha-feature-icon { font-size: 24px; margin-bottom: 5px; line-height: 1; }
.ficha-feature-val  { font-size: 16px; font-weight: 800; color: var(--azul-900); line-height: 1.2; }
.ficha-feature-lab  { font-size: 11px; color: var(--gris-500); margin-top: 3px; }

/* --- BLOQUES --- */
.detalle-bloque {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--gris-200);
}
.detalle-bloque:last-child { border-bottom: 0; margin-bottom: 0; }
.detalle-bloque-titulo {
    font-size: 19px;
    color: var(--azul-900);
    margin: 0 0 16px;
    font-weight: 700;
}
.detalle-descripcion { color: var(--gris-700); font-size: 16px; line-height: 1.75; }
.detalle-mapa-aviso  { font-size: 14px; color: var(--gris-500); margin: 0 0 10px; }

/* --- EXTRAS --- */
.extras-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    gap: 10px;
}
.extra-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gris-900);
    transition: border-color .15s;
}
.extra-item:hover { border-color: var(--azul-500); }
.extra-item-icon {
    font-size: 18px;
    width: 32px;
    height: 32px;
    background: var(--azul-100);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- CERTIFICADO ENERGÉTICO --- */
.cert-energetico { display: flex; flex-direction: column; gap: 5px; max-width: 400px; }
.cert-bar {
    display: flex;
    align-items: center;
    height: 34px;
    border-radius: 0 6px 6px 0;
    padding: 0 14px;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    position: relative;
}
.cert-bar span { flex-shrink: 0; }
.cert-bar.cert-active {
    outline: 3px solid rgba(0,0,0,.28);
    outline-offset: 1px;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.cert-marker {
    position: absolute;
    left: calc(100% + 10px);
    white-space: nowrap;
    background: var(--azul-900);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* --- SIDEBAR --- */
.detalle-sidebar { position: sticky; top: 90px; }
.sidebar-card {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
}
.sidebar-precio {
    font-size: 30px;
    font-weight: 800;
    color: var(--azul-700);
    line-height: 1.1;
    margin-bottom: 8px;
}
.sidebar-precio small { font-size: 15px; font-weight: 500; }
.sidebar-ficha {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    border-top: 1px solid var(--gris-200);
    padding-top: 12px;
}
.sidebar-ficha li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--gris-200);
    font-size: 14px;
}
.sidebar-ficha li:last-child { border-bottom: 0; }
.sidebar-ficha li span    { color: var(--gris-500); }
.sidebar-ficha li strong  { color: var(--gris-900); font-weight: 600; }
.sidebar-btns { display: flex; flex-direction: column; }
.sidebar-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gris-200);
    font-size: 13px;
    color: var(--gris-500);
}
.sidebar-share a {
    color: var(--gris-600, #666);
    transition: color .2s, transform .15s;
    display: flex;
}
.sidebar-share a:hover { color: var(--azul-600); transform: scale(1.15); }

/* WhatsApp */
.btn-whatsapp {
    background: #25d366;
    color: #fff !important;
    border: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: background .2s, transform .15s, box-shadow .15s;
}
.btn-whatsapp:hover { background: #1da851; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* --- CALCULADORA --- */
.sidebar-card-titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--azul-900);
    margin: 0 0 14px;
}
.hipoteca-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-700);
    margin-bottom: 10px;
    cursor: default;
}
.hipoteca-form input[type="number"],
.hipoteca-form input[type="range"] {
    width: 100%;
    margin-top: 4px;
    display: block;
}
.hipoteca-form input[type="range"]  { accent-color: var(--azul-600); cursor: pointer; }
.hipo-range-val {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--azul-700);
    font-weight: 700;
    margin-top: -4px;
}
.hipoteca-result {
    background: var(--azul-050);
    border: 1px solid var(--azul-100);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--gris-700);
    margin: 12px 0 8px;
}
.hipoteca-result strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--azul-700);
    margin-top: 4px;
}

/* --- RESPONSIVE DETALLE --- */
@media (max-width: 720px) {
    .detalle-section { padding: 24px 0 48px; }
    .ficha-features  { grid-template-columns: repeat(3, 1fr); }
    .cert-marker     { display: none; }
    .galeria-thumb   { width: 60px; height: 44px; }
    .extras-lista    { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   MODAL DE CONTACTO
   ===================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 28, 52, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .25s;
    backdrop-filter: blur(3px);
}
.modal-overlay.modal-visible {
    opacity: 1;
}
.modal-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(10, 28, 52, .22);
    width: 100%;
    max-width: 540px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 36px 32px 28px;
    position: relative;
    transform: translateY(20px);
    transition: transform .25s;
}
.modal-overlay.modal-visible .modal-box {
    transform: translateY(0);
}
.modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: var(--gris-100);
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-700);
    transition: background .15s, color .15s;
}
.modal-close:hover {
    background: var(--gris-200);
    color: var(--gris-900);
}
.modal-head {
    margin-bottom: 22px;
}
.modal-icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.modal-head h2 {
    margin: 0 0 4px;
    font-size: 22px;
    color: var(--azul-900);
}
.modal-head p {
    margin: 0;
    font-size: 14px;
    color: var(--gris-500);
}
.modal-head p strong {
    color: var(--gris-900);
}
.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.modal-form-grid label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-700);
    margin-bottom: 0;
}
.modal-form-grid label input,
.modal-form-grid label textarea {
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px;
    border: 1px solid var(--gris-200);
    border-radius: 7px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.modal-form-grid label input:focus,
.modal-form-grid label textarea:focus {
    outline: none;
    border-color: var(--azul-500);
    box-shadow: 0 0 0 3px rgba(44, 124, 176, .15);
}
.modal-form-grid textarea { resize: vertical; min-height: 100px; }
.modal-full { grid-column: 1 / -1; }
.modal-error-msg {
    background: #fbeae9;
    border: 1px solid #f1c0bd;
    color: #9c2a20;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    margin-bottom: 12px;
}
.modal-exito {
    text-align: center;
    padding: 20px 0 10px;
}
.modal-exito-icon { font-size: 48px; margin-bottom: 12px; }
.modal-exito h3 { margin: 0 0 8px; color: var(--azul-900); font-size: 20px; }
.modal-exito p  { margin: 0; color: var(--gris-700); }

@media (max-width: 560px) {
    .modal-box { padding: 28px 18px 22px; }
    .modal-form-grid { grid-template-columns: 1fr; }
    .modal-head h2 { font-size: 19px; }
}

/* =====================================================
   DROPDOWN MENU
   ===================================================== */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    color: var(--gris-900);
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.nav-dropdown-toggle:hover,
.nav-dropdown.active .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
    background: var(--azul-100);
    color: var(--azul-800);
}
.dropdown-arrow {
    transition: transform .2s;
    flex-shrink: 0;
}
.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown.is-open .dropdown-arrow {
    transform: rotate(180deg);
}
.dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(19,26,89,.18);
    border: 1px solid var(--gris-200);
    padding: 8px;
    min-width: 280px;
    z-index: 200;
    /* Usar opacity+visibility para evitar el hueco que hace desaparecer el menú */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.dropdown-menu-sm { min-width: 200px; }
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
/* Puente invisible para evitar que el hueco corte el hover */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}
.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--gris-900);
    font-weight: 400;
    transition: background .15s;
    text-decoration: none;
}
.dropdown-menu a:hover,
.dropdown-menu a.active {
    background: var(--azul-050);
    color: var(--azul-800);
}
.dropdown-menu a strong { display: block; font-size: 14px; font-weight: 600; color: var(--azul-900); }
.dropdown-menu a small  { display: block; font-size: 12px; color: var(--gris-500); margin-top: 1px; }
.dm-icon {
    width: 36px;
    height: 36px;
    background: var(--azul-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* Mobile dropdown */
@media (max-width: 720px) {
    .nav-dropdown { width: 100%; }
    .nav-dropdown-toggle { width: 100%; justify-content: space-between; }
    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--azul-050);
        padding: 4px 0 4px 16px;
        min-width: 0;
        display: none;
        animation: none;
    }
    .nav-dropdown.is-open .dropdown-menu { display: block; }
    .nav-dropdown:hover .dropdown-menu   { display: none; }
    .nav-dropdown.is-open:hover .dropdown-menu { display: block; }
}

/* =====================================================
   PÁGINAS DE SERVICIO — estilos comunes
   ===================================================== */
.servicio-hero {
    padding: 80px 0 70px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.servicio-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,44,82,.55);
    z-index: 0;
}
.servicio-hero .container { position: relative; z-index: 1; }
.servicio-hero-icon {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,.15);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 20px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
}
.servicio-hero h1 {
    font-size: clamp(28px, 5vw, 48px);
    margin: 0 0 14px;
    font-weight: 800;
}
.servicio-hero p {
    font-size: clamp(16px, 2vw, 20px);
    margin: 0 auto;
    max-width: 640px;
    opacity: .92;
}
.servicio-hero-links {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* Stats bar */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--gris-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 0;
}
.stat-item {
    background: #fff;
    padding: 28px 20px;
    text-align: center;
}
.stat-num {
    font-size: 36px;
    font-weight: 800;
    color: var(--azul-700);
    line-height: 1;
    margin-bottom: 6px;
}
.stat-lab { font-size: 13px; color: var(--gris-500); }

/* Proceso pasos */
.proceso-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    position: relative;
}
.proceso-steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--azul-100);
    z-index: 0;
}
.paso {
    text-align: center;
    padding: 20px 16px;
    position: relative;
    z-index: 1;
}
.paso-num {
    width: 56px;
    height: 56px;
    background: var(--azul-700);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    margin: 0 auto 16px;
    border: 4px solid #fff;
    box-shadow: var(--shadow-sm);
}
.paso h4 { margin: 0 0 8px; color: var(--azul-900); font-size: 16px; }
.paso p  { margin: 0; color: var(--gris-700); font-size: 14px; line-height: 1.5; }

/* Beneficios */
.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.beneficio-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gris-200);
    border-top: 4px solid var(--azul-600);
    transition: transform .25s, box-shadow .25s;
}
.beneficio-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.beneficio-icon {
    font-size: 32px;
    margin-bottom: 14px;
}
.beneficio-card h3 { margin: 0 0 10px; color: var(--azul-900); font-size: 18px; }
.beneficio-card p  { margin: 0; color: var(--gris-700); font-size: 15px; line-height: 1.6; }

/* Servicios incluidos grid */
.incluidos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.incluido-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--gris-200);
    transition: border-color .15s;
}
.incluido-item:hover { border-color: var(--azul-500); }
.incluido-check {
    width: 30px;
    height: 30px;
    background: var(--azul-700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}
.incluido-item strong { display: block; font-size: 15px; color: var(--azul-900); margin-bottom: 3px; }
.incluido-item p { margin: 0; font-size: 13px; color: var(--gris-700); line-height: 1.4; }

/* FAQ */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
    border-bottom: 1px solid var(--gris-200);
}
.faq-question {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 18px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--azul-900);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-question::after {
    content: '+';
    font-size: 22px;
    color: var(--azul-600);
    flex-shrink: 0;
    transition: transform .2s;
    font-weight: 300;
}
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer {
    display: none;
    padding: 0 0 18px;
    color: var(--gris-700);
    font-size: 15px;
    line-height: 1.7;
}
.faq-item.open .faq-answer { display: block; }

/* Otras páginas de servicio (nav lateral) */
.otros-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.otro-servicio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--gris-200);
    color: var(--gris-900);
    font-weight: 600;
    font-size: 15px;
    transition: background .15s, border-color .15s;
}
.otro-servicio:hover {
    background: var(--azul-050);
    border-color: var(--azul-500);
    color: var(--azul-800);
}
.otro-servicio span { font-size: 22px; }

@media (max-width: 860px) {
    .beneficios-grid { grid-template-columns: 1fr 1fr; }
    .proceso-steps::before { display: none; }
}
@media (max-width: 560px) {
    .beneficios-grid { grid-template-columns: 1fr; }
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
   ANIMACIONES Y MOVIMIENTO - Capiter v2
   ===================================================== */

/* --- Fade-in on scroll (Intersection Observer) --- */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .65s var(--transition), transform .65s var(--transition);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity .65s var(--transition), transform .65s var(--transition);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .65s var(--transition), transform .65s var(--transition);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* --- Stagger children --- */
.stagger > *:nth-child(1) { transition-delay: .05s; }
.stagger > *:nth-child(2) { transition-delay: .12s; }
.stagger > *:nth-child(3) { transition-delay: .19s; }
.stagger > *:nth-child(4) { transition-delay: .26s; }
.stagger > *:nth-child(5) { transition-delay: .33s; }
.stagger > *:nth-child(6) { transition-delay: .40s; }

/* --- Mejorar tarjetas de inmueble --- */
.prop-card {
    transition: transform var(--transition), box-shadow var(--transition);
}
.prop-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-color) !important;
}
.prop-card .prop-img img {
    transition: transform .5s var(--transition);
}
.prop-card:hover .prop-img img {
    transform: scale(1.05);
}

/* --- Botones con efecto ripple/glow --- */
.btn {
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn-primary:hover, .btn-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,130,179,.40);
}
.btn-acento:hover, .btn-acento:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,130,179,.45);
}

/* --- Stats bar con números animados --- */
.stat-num {
    background: linear-gradient(135deg, var(--azul-500), var(--azul-900));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Beneficio cards mejoradas --- */
.beneficio-card {
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid transparent;
}
.beneficio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-color);
    border-color: var(--azul-100);
}
.beneficio-icon {
    transition: transform var(--transition);
}
.beneficio-card:hover .beneficio-icon {
    transform: scale(1.2) rotate(-5deg);
}

/* --- Service cards hover --- */
.service-card {
    transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-color);
}
.service-icon {
    transition: transform var(--transition);
}
.service-card:hover .service-icon {
    transform: scale(1.15);
}

/* --- Header mejorado con sombra dinámica --- */
.header {
    transition: box-shadow var(--transition);
    box-shadow: 0 2px 12px rgba(19,26,89,.10);
}
.header.scrolled {
    box-shadow: 0 4px 24px rgba(19,26,89,.18);
}

/* --- Nav links: hover limpio sin raya --- */
.nav > a:not(.btn):hover,
.nav > a:not(.btn).active {
    background: var(--azul-100);
    color: var(--azul-800);
}

/* --- Hero con partículas animadas --- */
/* hero-content y hero-img definidos en sección de carga */

/* --- Sección de pasos con hover --- */
.paso {
    transition: transform var(--transition), box-shadow var(--transition);
}
.paso:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.paso-num {
    transition: transform var(--transition), background var(--transition);
}
.paso:hover .paso-num {
    transform: scale(1.15);
    background: var(--azul-900);
}

/* --- FAQ con transición suave --- */
.faq-question {
    transition: color var(--transition), background var(--transition);
}
.faq-item:hover .faq-question {
    color: var(--azul-500);
}
.faq-answer {
    transition: max-height .4s ease, padding .3s ease, opacity .3s ease;
}

/* --- Otro servicio links --- */
.otro-servicio {
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.otro-servicio:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-color);
    border-color: var(--azul-500) !important;
}

/* --- CTA band con gradiente animado --- */
.cta-band {
    background: linear-gradient(135deg, var(--azul-900) 0%, var(--azul-500) 100%);
    background-size: 200% 200%;
    animation: gradientMove 6s ease infinite;
}
@keyframes gradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Incluido items hover --- */
.incluido-item {
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
    border-radius: var(--radius);
    padding: 12px;
}
.incluido-item:hover {
    background: var(--azul-050);
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);
}

/* --- Logo pulse on hover --- */
.logo { transition: color var(--transition); }
.logo:hover { color: var(--azul-500); }

/* --- Topbar con gradiente sutil --- */
.topbar {
    background: linear-gradient(90deg, var(--azul-900) 0%, #1a2470 100%);
}

/* --- Badges de estado inmueble --- */
.badge-estado {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 10;
    padding: 5px 14px 5px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    animation: badgePulse 2s ease-in-out infinite;
}
.badge-reservado {
    background: linear-gradient(90deg, #131A59, #1a2470);
}
.badge-vendido {
    background: linear-gradient(90deg, #c0392b, #e74c3c);
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
    50%       { box-shadow: 0 4px 16px rgba(0,0,0,.40); }
}

/* --- Smooth pulse para whatsapp btn --- */
.btn-whatsapp {
    animation: waPulse 3s ease-in-out infinite;
}
@keyframes waPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(37,211,102,.3); }
    50%       { box-shadow: 0 6px 24px rgba(37,211,102,.55); }
}

/* --- Gallery thumbnail hover --- */
.gallery-thumb {
    transition: opacity var(--transition), transform var(--transition), border-color var(--transition);
}
.gallery-thumb:hover:not(.active) {
    opacity: .85;
    transform: scale(1.06);
}

/* --- Servicio hero icon bounce --- */
.servicio-hero-icon {
    animation: iconBounce 2.5s ease-in-out infinite;
}
@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* --- Number counter shake on enter --- */
.stat-item { transition: transform var(--transition); }
.stat-item:hover { transform: scale(1.05); }


/* =====================================================
   ANIMACIONES DE CARGA (on-load, sin scroll)
   ===================================================== */

/* --- Topbar desliza desde arriba --- */
.topbar {
    animation: slideDownFade .5s ease both;
}

/* --- Header entra con delay --- */
.header {
    animation: slideDownFade .5s .1s ease both;
}
@keyframes slideDownFade {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* --- Hero index: contenido y imagen --- */
.hero-content {
    animation: heroUp .75s .15s cubic-bezier(.22,.68,0,1.2) both;
}
.hero-img {
    animation: heroRight .75s .3s cubic-bezier(.22,.68,0,1.2) both;
}

/* --- Servicio hero: elementos en cascada --- */
.servicio-hero .servicio-hero-icon {
    animation: heroPop .6s .1s cubic-bezier(.34,1.56,.64,1) both;
}
.servicio-hero h1 {
    animation: heroUp .65s .22s ease both;
}
.servicio-hero > .container > p,
.servicio-hero p {
    animation: heroUp .65s .36s ease both;
}
.servicio-hero-links {
    animation: heroUp .65s .5s ease both;
}

@keyframes heroUp {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroPop {
    from { opacity: 0; transform: scale(.5) rotate(-10deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- Stats bar: entrada escalonada --- */
.stats-bar .stat-item:nth-child(1) { animation: statUp .55s .3s ease both; }
.stats-bar .stat-item:nth-child(2) { animation: statUp .55s .42s ease both; }
.stats-bar .stat-item:nth-child(3) { animation: statUp .55s .54s ease both; }
.stats-bar .stat-item:nth-child(4) { animation: statUp .55s .66s ease both; }
@keyframes statUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Grid de cards en el listado inmobiliaria --- */
.inmuebles-grid .inmueble-card:nth-child(1)  { animation: cardFade .5s .2s ease both; }
.inmuebles-grid .inmueble-card:nth-child(2)  { animation: cardFade .5s .32s ease both; }
.inmuebles-grid .inmueble-card:nth-child(3)  { animation: cardFade .5s .44s ease both; }
.inmuebles-grid .inmueble-card:nth-child(4)  { animation: cardFade .5s .56s ease both; }
.inmuebles-grid .inmueble-card:nth-child(5)  { animation: cardFade .5s .68s ease both; }
.inmuebles-grid .inmueble-card:nth-child(6)  { animation: cardFade .5s .80s ease both; }
.inmuebles-grid .inmueble-card:nth-child(n+7){ animation: cardFade .5s .90s ease both; }
@keyframes cardFade {
    from { opacity: 0; transform: translateY(30px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* --- Sección sobre nosotros / about --- */
.about-text > * {
    animation: heroUp .7s ease both;
}
.about-text > *:nth-child(1) { animation-delay: .1s; }
.about-text > *:nth-child(2) { animation-delay: .22s; }
.about-text > *:nth-child(3) { animation-delay: .34s; }
.about-text > *:nth-child(4) { animation-delay: .46s; }

/* --- Logo pop al cargar --- */
.logo {
    animation: logoPop .6s .05s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes logoPop {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: scale(1); }
}

/* --- Nav links entran escalonados --- */
.nav > * {
    animation: navFadeIn .45s ease both;
}
.nav > *:nth-child(1) { animation-delay: .18s; }
.nav > *:nth-child(2) { animation-delay: .26s; }
.nav > *:nth-child(3) { animation-delay: .34s; }
.nav > *:nth-child(4) { animation-delay: .42s; }
.nav > *:nth-child(5) { animation-delay: .50s; }
.nav > *:nth-child(6) { animation-delay: .58s; }
@keyframes navFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Proceso steps en cascada (al entrar en viewport) --- */
.proceso-steps .paso {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .55s ease, transform .55s ease;
}
.proceso-steps.animated .paso:nth-child(1) { opacity:1; transform:none; transition-delay:.0s; }
.proceso-steps.animated .paso:nth-child(2) { opacity:1; transform:none; transition-delay:.12s; }
.proceso-steps.animated .paso:nth-child(3) { opacity:1; transform:none; transition-delay:.24s; }
.proceso-steps.animated .paso:nth-child(4) { opacity:1; transform:none; transition-delay:.36s; }

/* --- Beneficios grid stagger --- */
.beneficios-grid .beneficio-card {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s ease, transform .55s ease;
}
.beneficios-grid.animated .beneficio-card:nth-child(1) { opacity:1; transform:none; transition-delay:.0s; }
.beneficios-grid.animated .beneficio-card:nth-child(2) { opacity:1; transform:none; transition-delay:.14s; }
.beneficios-grid.animated .beneficio-card:nth-child(3) { opacity:1; transform:none; transition-delay:.28s; }

/* --- Section heads fade in --- */
.section-head {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
.section-head.animated { opacity: 1; transform: none; }

/* --- Incluidos grid stagger --- */
.incluidos-grid .incluido-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .45s ease, transform .45s ease;
}
.incluidos-grid.animated .incluido-item:nth-child(1) { opacity:1; transform:none; transition-delay:.00s; }
.incluidos-grid.animated .incluido-item:nth-child(2) { opacity:1; transform:none; transition-delay:.08s; }
.incluidos-grid.animated .incluido-item:nth-child(3) { opacity:1; transform:none; transition-delay:.16s; }
.incluidos-grid.animated .incluido-item:nth-child(4) { opacity:1; transform:none; transition-delay:.24s; }
.incluidos-grid.animated .incluido-item:nth-child(5) { opacity:1; transform:none; transition-delay:.32s; }
.incluidos-grid.animated .incluido-item:nth-child(6) { opacity:1; transform:none; transition-delay:.40s; }
.incluidos-grid.animated .incluido-item:nth-child(7) { opacity:1; transform:none; transition-delay:.48s; }
.incluidos-grid.animated .incluido-item:nth-child(8) { opacity:1; transform:none; transition-delay:.56s; }

/* --- CTA band entra con zoom sutil --- */
.cta-band {
    animation: none; /* se gestiona con IntersectionObserver */
}
.cta-band .container {
    opacity: 0;
    transform: scale(.97);
    transition: opacity .7s ease, transform .7s ease;
}
.cta-band.animated .container { opacity: 1; transform: scale(1); }


/* =====================================================
   AUTO SCROLL REVEAL — aplicado por JS a toda la web
   ===================================================== */

/* Estado inicial: invisible */
[data-sr] {
    opacity: 0;
    will-change: opacity, transform;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(.22,.68,0,1.1);
    transition-duration: .7s;
}

/* Variantes de entrada */
[data-sr="up"]    { transform: translateY(40px); }
[data-sr="left"]  { transform: translateX(-40px); }
[data-sr="right"] { transform: translateX(40px); }
[data-sr="scale"] { transform: scale(.88); }
[data-sr="fade"]  { transform: none; }

/* Estado visible */
[data-sr].sr-visible {
    opacity: 1;
    transform: none;
}

/* Delays escalonados para grupos */
[data-sr-delay="1"] { transition-delay: .05s; }
[data-sr-delay="2"] { transition-delay: .13s; }
[data-sr-delay="3"] { transition-delay: .21s; }
[data-sr-delay="4"] { transition-delay: .29s; }
[data-sr-delay="5"] { transition-delay: .37s; }
[data-sr-delay="6"] { transition-delay: .45s; }
[data-sr-delay="7"] { transition-delay: .53s; }
[data-sr-delay="8"] { transition-delay: .61s; }

/* Imágenes con efecto extra de desenfoque */
img[data-sr] {
    filter: blur(4px);
    transition-duration: .9s;
}
img[data-sr].sr-visible {
    filter: blur(0);
}


/* =====================================================
   ANIMACIONES PÁGINAS INTERIORES
   ===================================================== */

/* --- Grids alternados (servicios.php, comunidades.php) ---
   La imagen y el texto entran desde lados opuestos */
.grid.grid-2 > img,
.grid.grid-2 > div > img {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity .75s ease, transform .75s ease;
}
.grid.grid-2 > div {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity .75s ease, transform .75s ease;
}
/* Secciones con imagen a la izquierda (fila invertida) */
.grid.grid-2 > img:first-child {
    transform: translateX(-50px);
}
.grid.grid-2 > img:first-child ~ div {
    transform: translateX(50px);
}
/* Activación */
.grid.grid-2.sr-grid > img,
.grid.grid-2.sr-grid > div {
    opacity: 1;
    transform: none;
}
.grid.grid-2.sr-grid > img { transition-delay: .1s; }
.grid.grid-2.sr-grid > div { transition-delay: .2s; }

/* --- Cards de comunidades / servicios --- */
.card {
    opacity: 0;
    transform: translateY(28px) scale(.97);
    transition: opacity .55s ease, transform .55s ease;
}
.card.sr-visible {
    opacity: 1;
    transform: none;
}

/* --- Contact blocks --- */
.contact-block {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity .5s ease, transform .5s ease;
}
.contact-block.sr-visible {
    opacity: 1;
    transform: none;
}
.contact-block:nth-child(1) { transition-delay: .05s; }
.contact-block:nth-child(2) { transition-delay: .13s; }
.contact-block:nth-child(3) { transition-delay: .21s; }
.contact-block:nth-child(4) { transition-delay: .29s; }
.contact-block:nth-child(5) { transition-delay: .37s; }

/* --- Formulario de contacto --- */
.contact-grid > div:first-child {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity .7s ease, transform .7s ease;
}
.contact-grid > div.contact-info {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity .7s .15s ease, transform .7s .15s ease;
}
.contact-grid > div:first-child.sr-visible,
.contact-grid > div.contact-info.sr-visible {
    opacity: 1;
    transform: none;
}

/* --- Checklist items --- */
.checklist li {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .4s ease, transform .4s ease;
}
.checklist.sr-list li { opacity: 1; transform: none; }
.checklist.sr-list li:nth-child(1) { transition-delay: .00s; }
.checklist.sr-list li:nth-child(2) { transition-delay: .07s; }
.checklist.sr-list li:nth-child(3) { transition-delay: .14s; }
.checklist.sr-list li:nth-child(4) { transition-delay: .21s; }
.checklist.sr-list li:nth-child(5) { transition-delay: .28s; }
.checklist.sr-list li:nth-child(6) { transition-delay: .35s; }

/* --- Inmobiliaria: barra de filtros --- */
.filtros-bar {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity .5s ease, transform .5s ease;
    animation: heroUp .6s .3s ease both;
}

/* --- Inmueble detalle: secciones internas --- */
.detalle-features-bar {
    opacity: 0;
    animation: heroUp .6s .2s ease both;
}
.detalle-body > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.detalle-body > *.sr-visible { opacity: 1; transform: none; }

/* --- Sidebar sticky (ficha inmueble) --- */
.detalle-sidebar > * {
    opacity: 1;
    transform: none;
}


/* =====================================================
   ICONOS SVG PLACEHOLDER
   ===================================================== */
.icon-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    margin-bottom: 16px;
}
.icon-img-sm {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}
/* Contenedor icono en cards */
.card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Icono en dropdown */
.dm-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--azul-100);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dm-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Icono en beneficio card */
.beneficio-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.beneficio-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition);
}
.beneficio-card:hover .beneficio-icon img { transform: scale(1.12); }

/* Icono héroe servicio */
.servicio-hero-icon {
    font-size: 0 !important; /* ocultar emoji si queda residual */
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.servicio-hero-icon img {
    width: 80px;
    height: 80px;
    filter: brightness(0) invert(1); /* blanco para sobre fondo oscuro */
}

/* =====================================================
   BLOQUES AZUL OSCURO (bg-deep)
   ===================================================== */
.bg-deep {
    background: var(--azul-900);
    color: #fff;
}
.bg-deep h2, .bg-deep h3, .bg-deep h4 { color: #fff; }
.bg-deep p, .bg-deep li, .bg-deep small { color: rgba(255,255,255,.82); }
.bg-deep .eyebrow { color: var(--azul-500); }
.bg-deep a:not(.btn) { color: rgba(255,255,255,.85); }
.bg-deep a:not(.btn):hover { color: #fff; }
/* Cards sobre fondo oscuro */
.bg-deep .card,
.bg-deep .beneficio-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
}
.bg-deep .card:hover,
.bg-deep .beneficio-card:hover {
    background: rgba(255,255,255,.12);
    border-color: var(--azul-500);
}
.bg-deep .card h3,
.bg-deep .beneficio-card h3 { color: #fff; }
.bg-deep .card p,
.bg-deep .beneficio-card p { color: rgba(255,255,255,.75); }
/* Checklist sobre oscuro */
.bg-deep .checklist li::before { color: var(--azul-500); }
.bg-deep .checklist li { color: rgba(255,255,255,.85); }
/* Paso sobre oscuro */
.bg-deep .paso { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.bg-deep .paso:hover { background: rgba(255,255,255,.1); }
.bg-deep .paso h4, .bg-deep .paso p { color: rgba(255,255,255,.85); }
.bg-deep .paso-num { background: var(--azul-500); }

/* Línea decorativa entre secciones */
.bg-deep + section,
section + .bg-deep {
    position: relative;
}


/* Stats sobre fondo oscuro */
[style*="background:var(--azul-900)"] .stat-num,
.bg-deep .stat-num {
    background: linear-gradient(135deg, #fff, var(--azul-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[style*="background:var(--azul-900)"] .stat-lab,
.bg-deep .stat-lab {
    color: rgba(255,255,255,.7);
}
[style*="background:var(--azul-900)"] .stat-item,
.bg-deep .stat-item {
    border-color: rgba(255,255,255,.12);
}

/* Grid alternado sobre bg-deep */
.bg-deep .grid.grid-2 > div h2,
.bg-deep .grid.grid-2 > div h3 { color: #fff; }
.bg-deep .grid.grid-2 > div .eyebrow { color: var(--azul-500); }
.bg-deep .grid.grid-2 > div p { color: rgba(255,255,255,.8); }
.bg-deep .grid.grid-2 > div ul li { color: rgba(255,255,255,.8); }

/* Card icon sobre bg-deep: fondo blanco translúcido */
.bg-deep .card-icon {
    background: rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 8px;
}


/* ═══════════════════════════════════════════════
   ABOUT MODERN (bg-deep, "Sobre Capiter")
   ═══════════════════════════════════════════════ */
.about-modern {
    position: relative;
    overflow: hidden;
    padding: 90px 0 80px;
}

/* Fondo de puntos decorativos */
.about-modern-bg-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    pointer-events: none;
}

.about-modern-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

/* ── Columna imagen ── */
.about-modern-img-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.about-modern-frame {
    position: relative;
}

.about-modern-img-main {
    width: 100%;
    border-radius: 18px;
    display: block;
    object-fit: cover;
    aspect-ratio: 4/3;
    border: 2px solid rgba(0,130,179,.35);
    box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 6px rgba(0,130,179,.10);
}

/* Imagen flotante superpuesta */
.about-modern-img-float {
    position: absolute;
    bottom: -28px;
    right: -28px;
    width: 46%;
    border-radius: 12px;
    border: 3px solid var(--azul-900);
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    object-fit: cover;
    aspect-ratio: 4/3;
    outline: 2px solid rgba(0,130,179,.4);
}

/* Línea de acento vertical */
.about-modern-accent-line {
    position: absolute;
    top: 18px;
    left: -14px;
    width: 4px;
    height: 60%;
    background: linear-gradient(to bottom, var(--azul-500), transparent);
    border-radius: 4px;
}

/* Mini stats bajo imagen */
.about-modern-mini-stats {
    display: flex;
    gap: 16px;
    margin-top: 16px; /* compensate float overlap */
}

.about-mini-stat {
    flex: 1;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 18px 20px;
    text-align: center;
    backdrop-filter: blur(6px);
}

.about-mini-num {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    background: linear-gradient(135deg,#fff 40%,var(--azul-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-mini-num small {
    font-size: 1.1rem;
}

.about-mini-lab {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .8px;
    -webkit-text-fill-color: rgba(255,255,255,.62);
}

/* ── Columna texto ── */
.about-modern-text-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.about-modern-eyebrow {
    color: var(--azul-500) !important;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 14px;
    background: rgba(0,130,179,.18);
    padding: 4px 14px;
    border-radius: 30px;
    border: 1px solid rgba(0,130,179,.3);
}

.about-modern-h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    color: #fff;
    margin: 0 0 20px;
    line-height: 1.2;
    position: relative;
    padding-left: 18px;
}

.about-modern-h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    background: linear-gradient(to bottom, var(--azul-500), rgba(0,130,179,.3));
    border-radius: 4px;
}

.about-modern-lead {
    color: rgba(255,255,255,.78);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 28px;
}

/* Checklist adaptada a fondo oscuro */
.about-modern-checklist {
    margin-bottom: 28px;
}

/* Extra stats row */
.about-modern-extra-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
    width: 100%;
}

.about-extra-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.75);
    font-size: 14px;
}

.about-extra-ico {
    font-size: 18px;
}

.about-extra-stat strong {
    color: #fff;
}

.about-modern-cta {
    margin-top: 4px;
    font-size: 16px;
    padding: 14px 32px;
    letter-spacing: .3px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .about-modern-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .about-modern-img-float {
        right: -12px;
        bottom: -16px;
        width: 40%;
    }
    .about-modern-h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 600px) {
    .about-modern {
        padding: 60px 0;
    }
    .about-modern-mini-stats {
        flex-direction: column;
    }
    .about-modern-img-float {
        display: none;
    }
    .about-modern-extra-stats {
        flex-direction: column;
        gap: 14px;
    }
}

/* ═══════════════════════════════════════════════
   FIX: Icono servicio-hero + Stats sobre fondo oscuro
   ═══════════════════════════════════════════════ */

/* ── Icono: mostrar SVG con fondo glass, sin filtro destructivo ── */
.servicio-hero-icon {
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.18) !important;
    border: 2px solid rgba(255,255,255,.30) !important;
    border-radius: 24px !important;
    padding: 14px !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
}
.servicio-hero-icon img {
    width: 100% !important;
    height: 100% !important;
    filter: none !important;   /* eliminar brightness/invert que destruía el icono */
    display: block !important;
}

/* ── Stats: celdas transparentes cuando la barra es oscura ── */
[style*="background:var(--azul-900)"] .stats-bar {
    background: rgba(255,255,255,.08);
}
[style*="background:var(--azul-900)"] .stat-item,
.bg-deep .stat-item {
    background: transparent !important;
    border-color: rgba(255,255,255,.12);
}

/* ── Iconos SVG en "Otros servicios" ── */
.otro-servicio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.otro-servicio img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   CARDS SERVICIOS — hover mejorado (igual que beneficio-card)
   ═══════════════════════════════════════════════ */
.card {
    transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1), border-color .28s !important;
}
.card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 40px rgba(0,130,179,.22) !important;
    border-color: var(--azul-500) !important;
}
.card:hover .card-icon {
    background: var(--azul-500);
    transition: background .28s;
}
.card:hover .card-icon img {
    transform: scale(1.12);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.card-icon img {
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════
   POLÍTICA DE COOKIES — página legal
   ═══════════════════════════════════════════════ */
.legal-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 0 60px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--gris-700);
}
.legal-content h2 {
    color: var(--azul-900);
    font-size: 1.4rem;
    margin: 40px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--azul-100);
}
.legal-content h3 {
    color: var(--azul-700);
    font-size: 1.1rem;
    margin: 28px 0 10px;
}
.legal-content p { margin-bottom: 16px; }
.legal-content ul { padding-left: 22px; margin-bottom: 16px; }
.legal-content ul li { margin-bottom: 8px; }
.cookies-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 14px;
}
.cookies-table th {
    background: var(--azul-900);
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
}
.cookies-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--gris-200);
}
.cookies-table tr:nth-child(even) td { background: var(--gris-50); }

/* ═══════════════════════════════════════════════
   BANNER DE COOKIES
   ═══════════════════════════════════════════════ */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--azul-900);
    color: rgba(255,255,255,.9);
    padding: 18px 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.25);
    transform: translateY(100%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
#cookie-banner.visible {
    transform: translateY(0);
}
#cookie-banner .container {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
#cookie-banner p {
    flex: 1;
    min-width: 240px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}
#cookie-banner p a {
    color: var(--azul-500);
    text-decoration: underline;
}
.cookie-banner-btns {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
#btn-accept-cookies {
    background: var(--azul-500);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
#btn-accept-cookies:hover { background: #0095cc; }
#btn-reject-cookies {
    background: transparent;
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.3);
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
}
#btn-reject-cookies:hover {
    border-color: rgba(255,255,255,.6);
    color: #fff;
}
@media (max-width: 600px) {
    #cookie-banner .container { flex-direction: column; align-items: flex-start; }
    .cookie-banner-btns { width: 100%; }
    #btn-accept-cookies, #btn-reject-cookies { flex: 1; text-align: center; }
}

/* ═══════════════════════════════════════════════
   CHECKBOX POLÍTICA DE PRIVACIDAD
   ═══════════════════════════════════════════════ */
.privacy-check {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--azul-050, #f0f8fd);
    border: 1px solid var(--azul-100, #c8e8f5);
    border-radius: 10px;
}
.check-label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px !important;
    color: var(--gris-700) !important;
    font-weight: 400 !important;
    margin: 0 !important;
}
.check-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    margin-top: 2px;
    accent-color: var(--azul-500);
    cursor: pointer;
    border-radius: 4px;
}
.check-label span { line-height: 1.5; }
.check-label a {
    color: var(--azul-500);
    font-weight: 600;
    text-decoration: underline;
}
.check-label a:hover { color: var(--azul-700); }

/* ═══════════════════════════════════════════════
   CALCULADORA DE HIPOTECA — rediseño moderno
   ═══════════════════════════════════════════════ */
.hipoteca-calc {
    background: linear-gradient(145deg, var(--azul-900) 0%, #1a2d6e 100%) !important;
    border: none !important;
    color: #fff !important;
    overflow: hidden;
    position: relative;
}
.hipoteca-calc::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 130px;
    height: 130px;
    background: rgba(0,130,179,.18);
    border-radius: 50%;
    pointer-events: none;
}
.hipoteca-calc .sidebar-card-titulo {
    color: #fff !important;
    font-size: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Labels */
.hipoteca-calc .hipoteca-form label {
    color: rgba(255,255,255,.75) !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Inputs numéricos */
.hipoteca-calc .hipoteca-form input[type="number"] {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 8px;
    color: #fff;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 600;
    transition: border-color .2s, background .2s;
    margin-top: 6px;
}
.hipoteca-calc .hipoteca-form input[type="number"]:focus {
    outline: none;
    border-color: var(--azul-500);
    background: rgba(255,255,255,.15);
}
.hipoteca-calc .hipoteca-form input[type="number"]::placeholder { color: rgba(255,255,255,.4); }

/* Range slider */
.hipoteca-calc .hipoteca-form input[type="range"] {
    accent-color: var(--azul-500);
    height: 4px;
    margin-top: 8px;
    cursor: pointer;
}
.hipoteca-calc .hipo-range-val {
    color: var(--azul-500) !important;
    font-size: 13px !important;
    font-weight: 700;
}

/* Resultado */
.hipoteca-calc .hipoteca-result {
    background: rgba(0,130,179,.25) !important;
    border: 1px solid rgba(0,130,179,.5) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    text-align: center;
    color: rgba(255,255,255,.85) !important;
    font-size: 13px !important;
    margin: 16px 0 10px !important;
    position: relative;
}
.hipoteca-calc .hipoteca-result::before {
    content: '🏦';
    display: block;
    font-size: 22px;
    margin-bottom: 4px;
}
.hipoteca-calc .hipoteca-result strong {
    display: block !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-top: 4px !important;
    letter-spacing: -.5px;
}
.hipoteca-calc p {
    color: rgba(255,255,255,.45) !important;
    font-size: 11px !important;
    text-align: center;
    margin: 0 !important;
}

/* Desglose capital / entrada */
.hipo-desglose {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}
.hipo-desglose-item {
    flex: 1;
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,.6);
}
.hipo-desglose-item strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    margin-bottom: 2px;
}