/*
Theme Name: Depropiedades Max
Theme URI: https://depropiedades.com.co
Author: Depropiedades
Author URI: https://depropiedades.com.co
Description: CRM y sitio de Depropiedades, arquitectura Max. Modelo de CONTACTO + OPORTUNIDAD + INTERES, un solo motor de kanban de cinco etapas, proxima accion obligatoria y bandeja Requiere Atencion. La migracion es ADITIVA: el tema anterior (Depropiedades) sigue instalado y funcional como respaldo; volver a el es cambiar de tema. Base original: Representación de apartamentos en Bogotá Norte, con inventario, fichas editoriales, registro de agentes y CRM integrado. Sistema tipográfico de dos familias: Playfair Display itálica y Lato.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Uso privado de Depropiedades
Text Domain: depropiedades
Tags: real-estate, custom-colors, custom-logo, custom-menu, editor-style, translation-ready
*/

/* ═══════════════════════════════════════════════════════════════════════════
   DEPROPIEDADES · HOJA DE ESTILO PRINCIPAL
   ---------------------------------------------------------------------------
   COMO LEER ESTE ARCHIVO
   Las capas estan en orden historico y GANA LA ULTIMA. Si algo se ve distinto
   de lo que dice una regla de arriba, buscar mas abajo antes de editar.

     base .......... variables, reset, nav, hero, tarjetas, ficha, formularios
     v8 a v11 ...... capas antiguas; varias ya estan anuladas por v13
     v12 ........... hero editorial y limpieza del buscador
     v13 ........... SISTEMA TIPOGRAFICO DEFINITIVO  (final del archivo)
     v13.1 ......... tarjeta: ubicacion con chincheta e iconos de specs
     v13.2 ......... logo, isotipo y fotos rotativas del hero
     v13.3 ......... ficha: tabla de especificaciones y titulos de seccion

   SISTEMA
     Color .... navy #0B1A2E, blanco, dos grises. El color lo pone la foto.
     Letra .... Playfair Display italica (hero, logo, cierre) + Lato (todo lo demas)
     Forma .... esquinas rectas, sin sombras, filetes de 1 px
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --dp-navy: #0B1A2E;
    --dp-accent: #2EA3F2;
    --dp-green: #25D366;
    --dp-white: #FFFFFF;
    --dp-gray-50: #F9FAFB;
    --dp-gray-100: #F3F4F6;
    --dp-gray-200: #E5E7EB;
    --dp-gray-300: #D1D5DB;
    --dp-gray-500: #6B7280;
    --dp-gray-700: #374151;
    --dp-gray-900: #111827;
    --dp-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dp-font-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --dp-radius: 12px;
    --dp-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --dp-shadow-lg: 0 10px 40px rgba(0,0,0,0.1);
    --dp-max-width: 1200px;
}

/* CRM Depropiedades */
.dp-crm-page {
    background: #f6f8fb;
}
.dp-crm-login-page {
    background: var(--dp-navy);
}
.dp-crm-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--dp-navy);
}
.dp-crm-login-card {
    width: 100%;
    max-width: 380px;
    border-radius: 16px;
    padding: 36px 32px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.dp-crm-login-logo { margin-bottom: 24px; display: flex; justify-content: center; }
.dp-crm-login-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dp-crm-login-logo img { max-height: 44px; width: auto; display: block; }
.dp-crm-login-logo strong { font-size: 24px; color: #fff; }
.dp-crm-login-logo span { color: var(--dp-accent); }
.dp-crm-login h1 { font-size: 24px; line-height: 1.2; color: #fff; margin-bottom: 8px; text-align: center; }
.dp-crm-login p { color: #a8b8cc; margin-bottom: 26px; text-align: center; font-size: 13.5px; }
.dp-crm-login label { display: block; font-size: 11px; font-weight: 800; color: #a8b8cc; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.dp-crm-login input[type="text"],
.dp-crm-login input[type="password"] {
    width: 100%;
    height: 46px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 14px;
    background: #fff;
    color: var(--dp-navy);
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 16px;
    transition: box-shadow .15s, border-color .15s;
}
.dp-crm-login input[type="text"]:focus,
.dp-crm-login input[type="password"]:focus {
    outline: none;
    border-color: var(--dp-accent);
    box-shadow: 0 0 0 3px rgba(46,163,242,.3);
}
.dp-crm-login .forgetmenot { color: #a8b8cc; font-size: 13px; margin-bottom: 22px; display: flex; align-items: center; gap: 6px; }
.dp-crm-login .forgetmenot label { display: inline; font-size: 13px; font-weight: 400; text-transform: none; color: #a8b8cc; margin: 0; }
.dp-crm-login .button {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--dp-accent);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s;
}
.dp-crm-login .button:hover { background: #1c8fd9; }
.dp-crm-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 260px 1fr;
    background: #f6f8fb;
    color: var(--dp-navy);
}
.dp-crm-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    background: var(--dp-navy);
    color: #fff;
    overflow-y: auto;
}
.dp-crm-nav { flex-shrink: 0; }
.dp-crm-brand { display: flex; align-items: center; min-height: 44px; margin-bottom: 28px; }
.dp-crm-brand img { max-height: 38px; width: auto; }
.dp-crm-brand strong { color: #fff; font-size: 22px; }
.dp-crm-brand span { color: var(--dp-accent); }
.dp-crm-nav { display: grid; gap: 6px; }
.dp-crm-nav a {
    display: block;
    padding: 11px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    font-weight: 700;
}
.dp-crm-nav a.active,
.dp-crm-nav a:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.dp-crm-user {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 16px;
    display: grid;
    gap: 8px;
    font-size: 13px;
}
.dp-crm-user a { color: var(--dp-accent); font-weight: 800; }
.dp-crm-logout-btn {
    display: block;
    text-align: center;
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(46,163,242,0.15);
    border: 1px solid rgba(46,163,242,0.4);
    color: var(--dp-accent) !important;
    font-weight: 800 !important;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.dp-crm-logout-btn:hover {
    background: var(--dp-accent);
    color: #fff !important;
}
.dp-crm-main {
    padding: 34px;
}
.dp-crm-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}
.dp-crm-kicker {
    display: inline-block;
    color: var(--dp-accent);
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(46,163,242,0.1);
}
.dp-crm-top h1,
.dp-crm-panel h2,
.dp-crm-roadmap h2 {
    color: var(--dp-navy);
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.dp-crm-greeting {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.dp-crm-live-clock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dp-gray-500);
    font-size: 22px;
    font-weight: 800;
}
.dp-crm-live-clock span + span::before {
    content: "·";
    margin-right: 8px;
    color: var(--dp-gray-300);
}
.dp-crm-top p,
.dp-crm-roadmap p {
    color: var(--dp-gray-500);
    margin: 6px 0 0;
}
.dp-crm-daily-phrase {
    max-width: 760px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--dp-gray-200);
    border-left: 4px solid var(--dp-accent);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11,26,46,0.04);
}
.dp-crm-daily-phrase strong {
    display: block;
    color: var(--dp-navy);
    font-size: 14px;
    margin-bottom: 4px;
}
.dp-crm-daily-phrase p {
    margin: 0;
    color: var(--dp-gray-700);
}
.dp-crm-daily-phrase details {
    margin-top: 12px;
}
.dp-crm-daily-phrase summary {
    cursor: pointer;
    color: var(--dp-accent);
    font-size: 12px;
    font-weight: 900;
}
.dp-crm-daily-phrase textarea {
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--dp-gray-200);
    border-radius: 8px;
    padding: 10px;
    resize: vertical;
}
.dp-crm-daily-phrase button {
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    padding: 9px 12px;
    background: var(--dp-navy);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}
.dp-crm-actions {
    display: flex;
    gap: 10px;
}
.dp-crm-actions a,
.dp-crm-panel-head a,
.dp-crm-row-actions a {
    border: 1px solid var(--dp-gray-200);
    border-radius: 8px;
    padding: 10px 14px;
    background: #fff;
    color: var(--dp-navy);
    font-size: 13px;
    font-weight: 800;
}
.dp-crm-actions a.primary {
    background: var(--dp-accent);
    border-color: var(--dp-accent);
    color: #fff;
}
.dp-crm-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.dp-crm-metrics article,
.dp-crm-panel,
.dp-crm-roadmap {
    background: #fff;
    border: 1px solid var(--dp-gray-200);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(11,26,46,0.05);
    transition: box-shadow .2s ease;
}
.dp-crm-panel {
    position: relative;
}
.dp-crm-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--dp-navy), var(--dp-accent));
    opacity: 0.85;
}
.dp-crm-metrics article {
    padding: 20px;
}
.dp-crm-metrics span {
    display: block;
    color: var(--dp-gray-500);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}
.dp-crm-metrics strong {
    display: block;
    color: var(--dp-navy);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1;
    overflow-wrap: anywhere;
}
.dp-crm-metrics small {
    display: block;
    color: var(--dp-gray-500);
    margin-top: 8px;
}
.dp-crm-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
}
.dp-crm-grid--single {
    grid-template-columns: 1fr;
    margin-top: 18px;
}
.dp-crm-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.dp-crm-insights .dp-crm-panel-head > strong {
    border-radius: 999px;
    padding: 7px 11px;
    background: var(--dp-gray-50);
    color: var(--dp-navy);
    font-size: 12px;
}
.dp-crm-insight-main {
    margin: 0 0 14px;
    color: var(--dp-navy);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 900;
    line-height: 1.15;
}
.dp-crm-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.dp-crm-insight-grid span {
    border: 1px solid var(--dp-gray-100);
    border-radius: 8px;
    padding: 11px;
    color: var(--dp-navy);
    background: var(--dp-gray-50);
    font-size: 13px;
    font-weight: 800;
}
.dp-crm-insight-grid strong,
.dp-crm-insight-grid small {
    display: block;
}
.dp-crm-insight-grid strong {
    margin-bottom: 4px;
    color: var(--dp-gray-500);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.dp-crm-insight-grid small {
    margin-top: 3px;
    color: var(--dp-gray-500);
}
.dp-crm-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.dp-crm-board-card {
    display: flex;
    min-height: 104px;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--dp-gray-200);
    border-radius: 10px;
    background: #fff;
    color: var(--dp-navy);
    text-decoration: none;
    box-shadow: 0 8px 26px rgba(11,26,46,0.04);
}
.dp-crm-board-card.is-active,
.dp-crm-board-card:hover {
    border-color: var(--dp-blue);
    box-shadow: 0 14px 34px rgba(46,163,242,0.14);
}
.dp-crm-board-card span {
    color: var(--dp-gray-500);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
    text-transform: uppercase;
}
.dp-crm-board-card strong {
    font-size: 30px;
    line-height: 1;
}
.dp-crm-panel {
    padding: 20px;
}
.dp-crm-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}
.dp-crm-list {
    display: grid;
    gap: 10px;
}
.dp-crm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid var(--dp-gray-100);
}
.dp-crm-row:first-child { border-top: 0; }
.dp-crm-row strong {
    display: block;
    color: var(--dp-navy);
    font-size: 14px;
}
.dp-crm-row span {
    display: block;
    color: var(--dp-gray-500);
    font-size: 12px;
    margin-top: 3px;
}
.dp-crm-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.dp-crm-row-actions em {
    border-radius: 999px;
    padding: 5px 9px;
    background: #e8f4fe;
    color: #0878be;
    font-style: normal;
    font-size: 11px;
    font-weight: 900;
}
.dp-crm-empty {
    color: var(--dp-gray-500);
    margin: 0;
}
.dp-crm-filter-panel {
    margin-bottom: 18px;
}
.dp-crm-filter-panel p {
    margin: 5px 0 0;
    color: var(--dp-gray-500);
}
.dp-crm-filters,
.dp-crm-bulk-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
}
.dp-crm-bulk-actions {
    grid-template-columns: minmax(220px, 320px) auto 1fr;
    margin-bottom: 14px;
}
.dp-crm-filters label,
.dp-crm-bulk-actions label {
    color: var(--dp-gray-500);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dp-crm-filters select,
.dp-crm-filters input,
.dp-crm-bulk-actions select {
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--dp-gray-200);
    border-radius: 8px;
    padding: 11px 12px;
    color: var(--dp-navy);
    background: #fff;
    font: inherit;
}
.dp-crm-filters button,
.dp-crm-bulk-actions button,
.dp-crm-filters a {
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid var(--dp-navy);
    padding: 11px 18px;
    font-weight: 900;
    text-decoration: none;
}
.dp-crm-filters button,
.dp-crm-bulk-actions button {
    background: var(--dp-navy);
    color: #fff;
}
.dp-crm-filters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dp-navy);
    background: #fff;
}
.dp-crm-table-wrap {
    overflow-x: auto;
}
.dp-crm-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}
.dp-crm-table th {
    padding: 12px 10px;
    border-bottom: 1px solid var(--dp-gray-200);
    color: var(--dp-gray-500);
    font-size: 11px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}
.dp-crm-table td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--dp-gray-100);
    color: var(--dp-navy);
    vertical-align: top;
}
.dp-crm-table td strong,
.dp-crm-table td small {
    display: block;
}
.dp-crm-table td small {
    margin-top: 4px;
    color: var(--dp-gray-500);
}
.dp-crm-table em,
.dp-crm-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    border-radius: 999px;
    padding: 5px 10px;
    background: #e8f4fe;
    color: #0878be;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.dp-crm-type-badge.is-owner {
    background: #ecfdf5;
    color: #047857;
}
.dp-crm-table a {
    color: var(--dp-navy);
    font-weight: 900;
}
.dp-crm-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.dp-crm-page-link {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dp-gray-200);
    border-radius: 8px;
    color: var(--dp-navy);
    font-weight: 900;
    text-decoration: none;
}
.dp-crm-page-link.is-current,
.dp-crm-page-link:hover {
    border-color: var(--dp-navy);
    background: var(--dp-navy);
    color: #fff;
}
.dp-crm-alert {
    margin-bottom: 18px;
    border: 1px solid #b7e4c7;
    border-left: 4px solid #25D366;
    border-radius: 8px;
    padding: 13px 15px;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    font-weight: 800;
}
.dp-crm-lead-workspace {
    display: grid;
    gap: 18px;
}
.dp-crm-lead-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 30px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--dp-navy) 0%, #16304f 100%);
    box-shadow: 0 16px 40px rgba(11,26,46,0.22);
    position: relative;
    overflow: hidden;
}
.dp-crm-lead-head::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(46,163,242,0.18) 0%, rgba(46,163,242,0) 70%);
    pointer-events: none;
}
.dp-crm-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: color .15s;
}
.dp-crm-back:hover { color: #fff; }
.dp-crm-lead-head h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.dp-crm-lead-head p,
.dp-crm-muted {
    color: rgba(255,255,255,0.62);
    font-size: 13px;
}
.dp-crm-muted { color: var(--dp-gray-500); }
.dp-crm-lead-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dp-crm-lead-actions.inline {
    justify-content: flex-start;
    margin-top: 16px;
}
.dp-crm-lead-actions a,
.dp-crm-send-selected,
.dp-crm-lead-grid button {
    border: 1px solid var(--dp-gray-200);
    border-radius: 8px;
    padding: 10px 14px;
    background: #fff;
    color: var(--dp-navy);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}
.dp-crm-lead-actions a.primary,
.dp-crm-send-selected,
.dp-crm-lead-grid button {
    background: var(--dp-accent);
    border-color: var(--dp-accent);
    color: #fff;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.dp-crm-lead-actions a:hover,
.dp-crm-send-selected:hover,
.dp-crm-lead-grid button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11,26,46,0.15);
}
.dp-crm-lead-actions button[type="submit"] {
    background: var(--dp-navy) !important;
    border-color: var(--dp-navy) !important;
    color: #fff !important;
}
.dp-crm-send-selected {
    display: inline-flex;
    margin: 14px 0 0 10px;
    text-decoration: none;
}
.dp-crm-lead-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 18px;
}
.dp-crm-lead-grid label {
    display: block;
    margin: 14px 0 6px;
    color: var(--dp-navy);
    font-size: 12px;
    font-weight: 900;
}
.dp-crm-lead-grid input[type="datetime-local"],
.dp-crm-lead-grid input[type="text"],
.dp-crm-lead-grid input[type="url"],
.dp-crm-lead-grid select,
.dp-crm-lead-grid textarea {
    width: 100%;
    border: 1.5px solid var(--dp-gray-200);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    color: var(--dp-navy);
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dp-crm-lead-grid input[type="datetime-local"]:focus,
.dp-crm-lead-grid input[type="text"]:focus,
.dp-crm-lead-grid input[type="url"]:focus,
.dp-crm-lead-grid select:focus,
.dp-crm-lead-grid textarea:focus {
    outline: none;
    border-color: var(--dp-accent);
    box-shadow: 0 0 0 3px rgba(46,163,242,0.15);
}
.dp-crm-lead-grid textarea {
    resize: vertical;
}
.dp-crm-lead-grid input[readonly] {
    background: var(--dp-gray-100);
    color: var(--dp-gray-500);
    cursor: not-allowed;
}
.dp-crm-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}
.dp-crm-lead-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.dp-crm-lead-facts div {
    border: 1px solid rgba(11,26,46,0.08);
    border-radius: 10px;
    padding: 12px;
    background: linear-gradient(180deg, var(--dp-gray-50), #fff);
}
.dp-crm-lead-facts strong,
.dp-crm-lead-facts span {
    display: block;
}
.dp-crm-lead-facts strong {
    color: var(--dp-accent);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.dp-crm-lead-facts span {
    margin-top: 4px;
    color: var(--dp-navy);
    font-size: 14px;
    font-weight: 800;
}
.dp-crm-lead-request {
    margin-top: 14px;
    color: var(--dp-gray-700);
}
.dp-crm-flow {
    display: grid;
    gap: 10px;
}
.dp-crm-flow strong {
    color: var(--dp-navy);
    font-size: 15px;
}
.dp-crm-flow p {
    margin: -4px 0 8px;
    color: var(--dp-gray-500);
}
.dp-crm-owner-steps {
    gap: 8px;
}
.dp-crm-owner-steps strong {
    display: block;
}
.dp-owner-message-text {
    min-height: 154px;
    margin-top: 10px;
    background: var(--dp-gray-50);
    line-height: 1.55;
}
.dp-crm-owner-process {
    grid-column: 1 / -1;
}
.dp-crm-owner-check {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px !important;
    border: 1px solid var(--dp-gray-100);
    border-radius: 8px;
    padding: 12px;
    background: var(--dp-gray-50);
    color: var(--dp-navy);
    font-size: 14px !important;
    font-weight: 900;
}
.dp-crm-owner-check input {
    margin-top: 2px;
}
.dp-crm-owner-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.dp-owner-contact-history {
    margin-top: 18px;
    border-top: 1px solid var(--dp-gray-100);
    padding-top: 16px;
}
.dp-owner-contact-history h3 {
    margin: 0 0 12px;
    color: var(--dp-navy);
    font-size: 15px;
}
.dp-owner-contact-item {
    border: 1px solid var(--dp-gray-100);
    border-radius: 8px;
    padding: 12px;
    background: var(--dp-gray-50);
}
.dp-owner-contact-item + .dp-owner-contact-item {
    margin-top: 10px;
}
.dp-owner-contact-item strong,
.dp-owner-contact-item span,
.dp-owner-contact-item small {
    display: block;
}
.dp-owner-contact-item strong {
    color: var(--dp-navy);
    font-size: 14px;
}
.dp-owner-contact-item span,
.dp-owner-contact-item small,
.dp-owner-contact-item p {
    margin: 4px 0 0;
    color: var(--dp-gray-500);
    font-size: 12px;
}
.dp-crm-activity-log {
    grid-column: 1 / -1;
}
.dp-crm-activity-item {
    border: 1px solid var(--dp-gray-100);
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}
.dp-crm-activity-item + .dp-crm-activity-item {
    margin-top: 10px;
}
.dp-crm-activity-item strong,
.dp-crm-activity-item span {
    display: block;
}
.dp-crm-activity-item strong {
    color: var(--dp-navy);
    font-size: 14px;
}
.dp-crm-activity-item span,
.dp-crm-activity-item p {
    margin: 4px 0 0;
    color: var(--dp-gray-500);
    font-size: 12px;
}
.dp-crm-lead-properties {
    grid-column: 1 / -1;
}
.dp-crm-lead-property-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.dp-crm-lead-property {
    position: relative;
    overflow: hidden;
    border: 1.5px solid var(--dp-gray-200);
    border-radius: 12px;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dp-crm-lead-property:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(11,26,46,0.1);
}
.dp-crm-lead-property.is-selected {
    border-color: var(--dp-accent);
    box-shadow: 0 12px 30px rgba(46,163,242,0.18);
}
.dp-crm-lead-property img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: var(--dp-navy);
}
.dp-crm-property-placeholder {
    width: 100%;
    height: 150px;
    background: var(--dp-navy);
}
.dp-crm-lead-property label {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--dp-gray-200);
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.94);
    font-size: 12px;
}
.dp-crm-lead-property h3,
.dp-crm-lead-property p,
.dp-crm-lead-property div {
    margin: 0;
    padding-left: 13px;
    padding-right: 13px;
}
.dp-crm-lead-property h3 {
    padding-top: 13px;
    color: var(--dp-navy);
    font-size: 15px;
    line-height: 1.25;
}
.dp-crm-lead-property p {
    padding-top: 7px;
    color: var(--dp-gray-500);
    font-size: 12px;
}
.dp-crm-lead-property div {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 13px;
}
.dp-crm-lead-property a {
    border: 1px solid var(--dp-gray-200);
    border-radius: 7px;
    padding: 7px 9px;
    color: var(--dp-navy);
    font-size: 12px;
    font-weight: 800;
}
.dp-crm-roadmap {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    margin-top: 18px;
    padding: 24px;
}
.dp-crm-roadmap ul {
    margin: 0;
    padding-left: 18px;
    color: var(--dp-gray-700);
}
.dp-crm-roadmap li { margin-bottom: 8px; }
.dp-crm-ops-grid {
    margin-top: 18px;
}
.dp-crm-contact-grid,
.dp-crm-security-list {
    display: grid;
    gap: 10px;
}
.dp-crm-contact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px;
    border: 1px solid var(--dp-gray-100);
    border-radius: 8px;
    background: #fff;
}
.dp-crm-contact-card strong {
    display: block;
    color: var(--dp-navy);
    font-size: 14px;
}
.dp-crm-contact-card span {
    display: block;
    margin-top: 3px;
    color: var(--dp-gray-500);
    font-size: 12px;
}
.dp-crm-contact-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.dp-crm-contact-actions a {
    border: 1px solid var(--dp-gray-200);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--dp-navy);
    font-size: 12px;
    font-weight: 800;
}
.dp-crm-security-item {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--dp-gray-100);
    border-radius: 8px;
}
.dp-crm-security-item > span {
    display: inline-flex;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
}
.dp-crm-security-item.ok > span {
    background: #dcfce7;
    color: #166534;
}
.dp-crm-security-item.warn > span {
    background: #fef3c7;
    color: #92400e;
}
.dp-crm-security-item strong {
    display: block;
    color: var(--dp-navy);
    font-size: 14px;
}
.dp-crm-security-item small,
.dp-crm-panel-note {
    color: var(--dp-gray-500);
    font-size: 12px;
}
.dp-crm-panel-note {
    margin: 14px 0 0;
}
@media (max-width: 980px) {
    .dp-crm-app { grid-template-columns: 1fr; }
    .dp-crm-sidebar { position: static; height: auto; }
    .dp-crm-metrics,
    .dp-crm-insights,
    .dp-crm-insight-grid,
    .dp-crm-grid,
    .dp-crm-roadmap,
    .dp-crm-lead-grid,
    .dp-crm-edit-grid,
    .dp-crm-owner-fields { grid-template-columns: 1fr; }
    .dp-crm-lead-property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dp-crm-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dp-crm-filters,
    .dp-crm-bulk-actions { grid-template-columns: 1fr; }
    .dp-crm-top { flex-direction: column; }
    .dp-crm-lead-head { flex-direction: column; padding: 22px; }
    .dp-crm-lead-head h2 { font-size: 26px; }
    .dp-crm-lead-actions { justify-content: flex-start; width: 100%; }
    .dp-crm-lead-actions a,
    .dp-crm-lead-actions button { flex: 1 1 auto; text-align: center; }
    .dp-crm-lead-facts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .dp-crm-board { grid-template-columns: 1fr; }
    .dp-crm-panel { padding: 16px; }
    .dp-crm-lead-property-grid { grid-template-columns: 1fr; }
    .dp-crm-lead-head { padding: 18px; border-radius: 14px; }
    .dp-crm-lead-head h2 { font-size: 22px; }
    .dp-crm-edit-grid { gap: 10px; }
    .dp-crm-lead-grid label { margin: 12px 0 6px; }
    .dp-crm-lead-grid input[type="datetime-local"],
    .dp-crm-lead-grid input[type="text"],
    .dp-crm-lead-grid input[type="url"],
    .dp-crm-lead-grid select,
    .dp-crm-lead-grid textarea,
    .dp-crm-lead-actions a,
    .dp-crm-lead-actions button,
    .dp-crm-lead-grid button { min-height: 44px; font-size: 16px; }
}

/* Tarjetas de KPI / dashboard reutilizables en varias pestanas del CRM (Dashboard, Aliados, etc.) */
.dp-dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.dp-dash-kpi{background:#fff;border-radius:14px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.06);position:relative;overflow:hidden}
.dp-dash-kpi::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--dp-accent-color,#2EA3F2)}
.dp-dash-kpi .dp-dash-kpi-icon{font-size:20px;margin-bottom:8px;display:block}
.dp-dash-kpi .dp-dash-kpi-num{font-size:30px;font-weight:800;color:#0B1A2E;line-height:1}
.dp-dash-kpi .dp-dash-kpi-label{font-size:12px;color:#64748b;margin-top:6px;font-weight:600}
.dp-dash-kpi .dp-dash-kpi-sub{font-size:11px;color:#94a3b8;margin-top:2px}
a.dp-dash-kpi{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
a.dp-dash-kpi:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.1)}
.dp-dash-grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:start;margin-bottom:20px}
.dp-dash-card{background:#fff;border-radius:14px;padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.dp-dash-card h3{margin:0 0 4px;font-size:16px;font-weight:800;color:#0B1A2E}
.dp-dash-card p.dp-dash-sub{margin:0 0 16px;font-size:12px;color:#94a3b8}
.dp-dash-agenda-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #f1f5f9}
.dp-dash-agenda-item:last-child{border-bottom:none}
.dp-dash-agenda-time{font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;white-space:nowrap}
.dp-dash-agenda-time.vencido{background:#fee2e2;color:#dc2626}
.dp-dash-agenda-time.hoy{background:#dbeafe;color:#1d4ed8}
.dp-dash-agenda-name{font-weight:700;color:#0f172a;font-size:13px}
.dp-dash-agenda-actions a{font-size:12px;font-weight:700;text-decoration:none;padding:6px 12px;border-radius:6px;margin-left:6px}
.dp-dash-agenda-actions a.wa{background:#25D366;color:#fff}
.dp-dash-agenda-actions a.ver{background:#f1f5f9;color:#0f172a}
.dp-dash-agenda-empty{padding:20px 0;text-align:center;color:#94a3b8;font-size:13px}
.dp-dash-funnel-row{margin-bottom:14px}
.dp-dash-funnel-label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#334155;margin-bottom:6px}
.dp-dash-funnel-track{background:#f1f5f9;border-radius:999px;height:14px;overflow:hidden}
.dp-dash-funnel-fill{height:100%;border-radius:999px}
.dp-dash-rank-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.dp-dash-rank-row:last-child{border-bottom:none}
.dp-dash-rank-pos{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#0B1A2E;color:#fff;font-size:11px;font-weight:800;margin-right:10px}
@media(max-width:900px){.dp-dash-kpis{grid-template-columns:repeat(2,1fr)}.dp-dash-grid2{grid-template-columns:1fr}}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--dp-font); color: var(--dp-gray-900); background: var(--dp-white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.dp-container { max-width: var(--dp-max-width); margin: 0 auto; padding: 0 24px; }
.dp-section { padding: 64px 0; }
.dp-section-title,
.dp-section-tag { text-align: center; }
.dp-section-tag { display: block; }

/* NAV */
.dp-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: var(--dp-navy);
    display: flex; align-items: center; gap: 24px;
    padding: 0 32px; height: 64px;
    transition: box-shadow 0.3s;
}
.dp-nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.dp-nav-logo { font-size: 20px; font-weight: 700; color: var(--dp-white); letter-spacing: -0.5px; display: flex; align-items: center; }
.dp-nav-logo span { color: var(--dp-accent); }
.dp-nav-logo .custom-logo-link, .dp-nav-logo .custom-logo-link img { display: block; }
.custom-logo-link img { max-height: 36px; width: auto; }
.dp-nav-links { list-style: none; display: flex; gap: 20px; margin-left: auto; }
.dp-nav-links a { color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.dp-nav-links a:hover { color: var(--dp-white); }
.dp-nav-links a.dp-nav-login {
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    padding: 7px 12px;
    color: var(--dp-white);
}
.dp-nav-links a.dp-nav-login:hover {
    border-color: var(--dp-accent);
    color: var(--dp-white);
}
.dp-nav-zone { color: rgba(255,255,255,0.66); font-size: 12px; white-space: nowrap; }
.dp-nav-cta {
    background: var(--dp-accent); color: var(--dp-white);
    padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
    transition: opacity 0.2s; white-space: nowrap;
}
.dp-nav-cta:hover { opacity: 0.9; }

/* PROPIETARIOS */
.dp-owners-page {
    background: #fff;
    color: var(--dp-navy);
}
.dp-owners-wrap {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}
.dp-owners-kicker {
    display: block;
    color: var(--dp-accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.dp-owners-hero {
    min-height: 86vh;
    display: flex;
    align-items: center;
    padding: 120px 0 72px;
    background-color: var(--dp-navy);
    background-image:
        linear-gradient(90deg, rgba(11,26,46,0.92), rgba(11,26,46,0.70)),
        var(--dp-owner-hero-image, linear-gradient(135deg, #10213a, #071223));
    background-size: cover;
    background-position: center;
    color: #fff;
}
.dp-owners-hero h1 {
    max-width: 820px;
    margin: 0;
    color: #fff;
    font-size: clamp(44px, 7vw, 86px);
    font-weight: 300;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    line-height: 0.98;
}
.dp-owners-hero .dp-owners-btn {
    margin-top: 34px;
}
.dp-owners-hero p {
    max-width: 690px;
    margin: 24px 0 30px;
    color: rgba(255,255,255,0.72);
    font-size: 21px;
    line-height: 1.45;
}
.dp-owners-btn,
.dp-owners-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 52px;
    border: 0;
    border-radius: 8px;
    padding: 0 24px;
    background: var(--dp-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}
.dp-owners-demand,
.dp-owners-criteria,
.dp-owners-method,
.dp-owners-commitment,
.dp-owners-sold,
.dp-owners-perception,
.dp-owners-zones,
.dp-owners-form-section {
    padding: 108px 0;
}
.dp-owners-two,
.dp-owners-form-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 54px;
    align-items: center;
}
.dp-owners-page h2 {
    margin: 0 auto;
    color: var(--dp-navy);
    font-size: clamp(32px, 4.5vw, 58px);
    line-height: 1.05;
    text-align: center;
}
.dp-owners-criteria h2,
.dp-owners-method h2,
.dp-owners-sold h2,
.dp-owners-form-section h2 {
    max-width: 860px;
}
.dp-owner-highlight {
    color: var(--dp-accent);
}
.dp-owners-page p {
    color: var(--dp-gray-500);
    font-size: 18px;
}
.dp-owners-demand-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.dp-owners-demand-grid article,
.dp-owners-method-list div,
.dp-owners-form-card {
    border: 1px solid var(--dp-gray-200);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(11,26,46,0.06);
}
.dp-owners-demand-grid article {
    min-height: 138px;
    padding: 22px;
}
.dp-owners-demand-grid span {
    display: block;
    margin-bottom: 12px;
    color: var(--dp-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.dp-owners-demand-grid strong {
    display: block;
    color: var(--dp-navy);
    font-size: 23px;
    line-height: 1.2;
}
.dp-owners-criteria {
    text-align: center;
    background: #fff;
}
.dp-owners-buyers {
    padding: 104px 0;
    text-align: center;
    background: var(--dp-gray-50);
}
.dp-owners-buyers h2 {
    max-width: 980px;
    margin: 0 auto;
}
.dp-owners-criteria h2,
.dp-owners-criteria p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.dp-owners-pill-grid,
.dp-owners-zone-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 34px auto;
}
.dp-owners-pill-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
}
.dp-owners-pill-grid span,
.dp-owners-zone-grid span {
    border: 1px solid var(--dp-gray-200);
    border-radius: 999px;
    padding: 10px 16px;
    background: #fff;
    color: var(--dp-navy);
    font-size: 14px;
    font-weight: 900;
}
.dp-owners-pill-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 18px 44px rgba(11,26,46,0.045);
}
.dp-owners-locations-title {
    margin: 44px 0 0;
    color: var(--dp-navy);
    font-size: 20px;
    font-weight: 900;
    text-align: center;
}
.dp-owners-zone-grid--navy span {
    border-color: var(--dp-navy);
    background: var(--dp-navy);
    color: #fff;
}
.dp-owners-method {
    position: relative;
    overflow: hidden;
    background-color: var(--dp-navy);
    background-image:
        linear-gradient(90deg, rgba(11,26,46,0.94), rgba(11,26,46,0.76)),
        var(--dp-owner-method-image, linear-gradient(135deg, #10213a, #071223));
    background-size: cover;
    background-position: center;
    color: #fff;
}
.dp-owners-method h2 {
    color: #fff;
    max-width: 920px;
}
.dp-owners-method-list {
    display: grid;
    gap: 12px;
}
.dp-owners-method-list--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 42px;
}
.dp-owners-method-list div {
    padding: 26px 24px;
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}
.dp-owners-method-list strong,
.dp-owners-method-list span {
    display: block;
}
.dp-owners-method-list strong {
    margin-bottom: 5px;
    color: #fff;
}
.dp-owners-method .dp-owner-highlight {
    color: #56bdf7;
}
.dp-owners-method-list span {
    color: rgba(255,255,255,0.68);
    font-size: 14px;
    line-height: 1.45;
}
.dp-owners-commitment {
    text-align: center;
    background: #fff;
}
.dp-owners-commitment .dp-owners-wrap {
    max-width: 1280px;
    border: 1px solid var(--dp-gray-200);
    border-left: 4px solid var(--dp-accent);
    border-radius: 10px;
    padding: 76px 84px;
    box-shadow: 0 28px 70px rgba(11,26,46,0.055);
}
.dp-owners-commitment h2 {
    max-width: 1120px;
    margin: 22px auto 22px;
    font-size: clamp(42px, 5vw, 86px);
    line-height: 1.06;
}
.dp-owners-commitment p {
    max-width: 1040px;
    margin: 0 auto;
    font-size: clamp(20px, 2vw, 29px);
    line-height: 1.45;
}
.dp-owners-section-head {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}
.dp-owners-sold {
    background: var(--dp-gray-50);
}
.dp-owners-sold-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.dp-owners-sold-grid article {
    overflow: hidden;
    border: 1px solid rgba(11,26,46,0.08);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(11,26,46,0.06);
}
.dp-owners-sold-img {
    min-height: 210px;
    background:
        linear-gradient(135deg, rgba(11,26,46,0.10), rgba(46,163,242,0.16)),
        var(--dp-gray-100);
    background-size: cover;
    background-position: center;
}
.dp-owners-sold-grid article > div:last-child {
    padding: 18px;
}
.dp-owners-sold-grid span {
    display: block;
    margin-bottom: 8px;
    color: var(--dp-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.dp-owners-sold-grid h3 {
    margin: 0 0 8px;
    color: var(--dp-navy);
    font-size: 20px;
    line-height: 1.2;
}
.dp-owners-sold-grid p {
    margin: 0;
    font-size: 14px;
}
.dp-owners-sold-grid--photos article {
    box-shadow: 0 18px 44px rgba(11,26,46,0.08);
}
.dp-owners-sold-grid--photos .dp-owners-sold-img {
    min-height: 380px;
}
.dp-owners-visual-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.dp-owners-visual-grid article {
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    border-radius: 10px;
    overflow: hidden;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(11,26,46,0.04), rgba(11,26,46,0.78)),
        linear-gradient(135deg, #f3f6f9, #dce7ef);
    background-size: cover;
    background-position: center;
}
.dp-owners-visual-grid span {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}
.dp-owners-zones {
    text-align: center;
    background: #fff;
}
.dp-owners-form-section {
    background: #fff;
}
.dp-owners-form-card {
    padding: 34px;
    box-shadow: 0 24px 64px rgba(11,26,46,0.055);
}
.dp-owners-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.dp-owners-field.full,
.dp-owners-form p,
.dp-owners-submit,
.dp-owners-success {
    grid-column: 1 / -1;
}
.dp-owners-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--dp-navy);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.dp-owners-field input,
.dp-owners-field select,
.dp-owners-field textarea {
    width: 100%;
    border: 1px solid var(--dp-gray-200);
    border-radius: 6px;
    padding: 15px 14px;
    background: #fff;
    color: var(--dp-navy);
    font: inherit;
}
.dp-owners-field textarea {
    resize: vertical;
}
.dp-owners-form p {
    margin: 0;
    color: var(--dp-gray-500);
    font-size: 12px;
    line-height: 1.5;
}
.dp-owners-success {
    text-align: center;
    padding: 42px 12px;
}
.dp-owners-success h3 {
    color: var(--dp-navy);
    font-size: 28px;
    margin-bottom: 8px;
}

/* UNETE AL EQUIPO: grid de herramientas + toggle agente/agencia */
.dp-unete-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 10px;
}
.dp-unete-feature-card {
    background: #fff;
    border: 1px solid var(--dp-gray-200);
    border-radius: 14px;
    padding: 26px 24px;
    box-shadow: 0 18px 44px rgba(11,26,46,0.055);
}
.dp-unete-feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(46,163,242,0.12);
    color: var(--dp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.dp-unete-feature-card h3 {
    color: var(--dp-navy);
    font-size: 18px;
    margin: 0 0 8px;
}
.dp-unete-feature-card p {
    color: var(--dp-gray-500);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}
.dp-unete-toggle {
    grid-column: 1 / -1;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--dp-gray-100);
    margin-bottom: 4px;
}
.dp-unete-toggle-opt {
    flex: 1;
    text-align: center;
    padding: 11px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: var(--dp-gray-500);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.dp-unete-toggle-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dp-unete-toggle-opt.is-active {
    background: var(--dp-navy);
    color: #fff;
}
.dp-unete-whatsapp-row {
    display: flex;
    gap: 8px;
}
.dp-unete-whatsapp-row select {
    flex: 0 0 90px;
}
.dp-unete-whatsapp-row input {
    flex: 1;
}
@media (max-width: 900px) {
    .dp-unete-features { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .dp-owners-two,
    .dp-owners-form-grid,
    .dp-owners-demand-grid,
    .dp-owners-sold-grid,
    .dp-owners-visual-grid,
    .dp-owners-form {
        grid-template-columns: 1fr;
    }
    .dp-owners-hero { min-height: 74vh; }
    .dp-owners-buyers,
    .dp-owners-demand,
    .dp-owners-criteria,
    .dp-owners-method,
    .dp-owners-commitment,
    .dp-owners-sold,
    .dp-owners-perception,
    .dp-owners-zones,
    .dp-owners-form-section { padding: 62px 0; }
    .dp-owners-commitment .dp-owners-wrap { padding: 42px 24px; }
    .dp-owners-commitment h2 { font-size: 36px; }
    .dp-owners-commitment p { font-size: 18px; }
    .dp-owners-pill-grid { grid-template-columns: 1fr; }
    .dp-owners-pill-grid span { min-height: 84px; }
    .dp-owners-method-list--three { grid-template-columns: 1fr; }
    .dp-owners-sold-grid--photos .dp-owners-sold-img { min-height: 240px; }
    .dp-owners-form-card { padding: 22px; }
}

/* HERO */
.dp-hero {
    background: var(--dp-navy); color: var(--dp-white);
    text-align: center; padding: 140px 24px 80px;
}
/* .dp-hero h1 se define en el bloque v12 del final (Playfair italica). */
.dp-hero-sub { color: rgba(255,255,255,0.6); font-size: 16px; max-width: 520px; margin: 0 auto 32px; }
.dp-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* BUTTONS */
.dp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 10px; font-size: 15px;
    font-weight: 600; cursor: pointer; transition: all 0.2s; border: none;
}
.dp-btn-accent { background: var(--dp-accent); color: white; }
.dp-btn-accent:hover { opacity: 0.9; }
.dp-btn-outline { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.3); }
.dp-btn-outline:hover { border-color: white; }
.dp-btn-outline-navy { background: transparent; color: var(--dp-navy); border: 1px solid var(--dp-gray-300); }
.dp-btn-outline-navy:hover { border-color: var(--dp-navy); background: var(--dp-gray-50); }
.dp-btn-whatsapp { background: var(--dp-green); color: white; }
.dp-btn-whatsapp:hover { opacity: 0.9; }
.dp-btn-pdf {
    background: var(--dp-gray-100); color: var(--dp-gray-700);
    padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500;
    cursor: pointer; border: 1px solid var(--dp-gray-200); transition: all 0.2s;
}
.dp-btn-pdf:hover { background: var(--dp-gray-200); }

.dp-premium-section { background: var(--dp-gray-50); padding-top: 40px; }
.dp-section-lead {
    text-align: center;
    color: var(--dp-gray-500);
    max-width: 620px;
    margin: 0 auto 36px;
    font-size: 15px;
}
/* La seccion de barrios salio de la portada: ahora los barrios rotan en la linea
   bajo el titular del hero. Estos estilos quedan por si se quiere volver a usar. */
.dp-barrios-premium { background: var(--dp-white); }
.dp-barrio-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    max-width: 920px;
    margin: 0 auto;
}
.dp-barrio-grid span {
    border: 1px solid var(--dp-gray-200);
    border-radius: 8px;
    padding: 14px 12px;
    text-align: center;
    color: var(--dp-navy);
    background: var(--dp-white);
    font-size: 14px;
    font-weight: 600;
}
.dp-advisory-premium { background: var(--dp-navy); color: var(--dp-white); }
.dp-advisory-premium .dp-section-title,
.dp-advisory-premium .dp-section-tag { color: var(--dp-white); }
.dp-advisory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 980px;
    margin: 0 auto;
}
.dp-advisory-grid div {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 24px;
    background: rgba(255,255,255,0.04);
}
.dp-advisory-grid strong { display: block; margin-bottom: 8px; font-size: 18px; }
.dp-advisory-grid p { color: rgba(255,255,255,0.68); margin: 0; font-size: 14px; }

@media (max-width: 900px) {
    .dp-barrio-grid { grid-template-columns: repeat(2, 1fr); }
    .dp-advisory-grid { grid-template-columns: 1fr; }
}

/* PROPERTY GRID */
.dp-properties-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dp-property-card {
    background: var(--dp-white); border-radius: var(--dp-radius);
    overflow: hidden; box-shadow: var(--dp-shadow);
    transition: transform 0.2s, box-shadow 0.2s; display: block; position: relative;
}
.dp-property-card:hover { transform: translateY(-4px); box-shadow: var(--dp-shadow-lg); }
.dp-property-img { width: 100%; height: 220px; object-fit: cover; background: var(--dp-gray-100); }
.dp-property-body { padding: 20px; }
.dp-property-zone { font-size: 12px; font-weight: 600; color: var(--dp-accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.dp-property-price { font-size: 22px; font-weight: 700; color: var(--dp-gray-900); }
.dp-property-specs { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.dp-property-spec { font-size: 13px; color: var(--dp-gray-500); }
.dp-property-spec strong { color: var(--dp-gray-700); }
.dp-property-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 12px; border-radius: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dp-badge-venta { background: var(--dp-accent); color: white; }
.dp-badge-arriendo { background: #F59E0B; color: white; }
.dp-property-title { font-size: 15px; font-weight: 600; color: var(--dp-gray-900); margin: 6px 0 4px; line-height: 1.3; }
.dp-property-btn {
    display: block; text-align: center; margin-top: 14px;
    padding: 10px; border-radius: 8px;
    background: var(--dp-navy); color: white;
    font-size: 13px; font-weight: 600;
    transition: opacity 0.2s;
}
.dp-property-btn:hover { opacity: 0.85; }
.dp-property-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}
.dp-property-actions .dp-property-btn { margin-top: 0; }
.dp-share-pick {
    border: 1px solid rgba(255,255,255,0.55);
    background: var(--dp-white);
    color: var(--dp-navy);
    border: 1px solid var(--dp-gray-200);
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.dp-share-pick.active {
    background: var(--dp-accent);
    border-color: var(--dp-accent);
    color: #fff;
}
.dp-share-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 120%);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dp-navy);
    color: #fff;
    border-radius: 999px;
    padding: 10px 12px 10px 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.28);
    transition: transform 0.24s ease;
}
.dp-share-bar.active { transform: translate(-50%, 0); }
.dp-share-phone {
    width: 150px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    padding: 9px 12px;
    font-size: 12px;
    outline: none;
}
.dp-share-phone::placeholder { color: rgba(255,255,255,0.64); }
.dp-share-clear,
.dp-share-wa {
    border: 0;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.dp-share-clear { background: rgba(255,255,255,0.12); color: #fff; }
.dp-share-wa { background: var(--dp-green); color: #fff; }

/* FICHA */
.dp-ficha { padding-top: 64px; padding-bottom: 100px; }
.dp-ficha-gallery { max-width: 1000px; margin: 0 auto; }
.dp-ficha-hero-slider { position: relative; overflow: hidden; border-radius: 0 0 var(--dp-radius) var(--dp-radius); }
.dp-ficha-hero-track { display: block; }
.dp-ficha-hero-slide { margin: 0; }
.dp-ficha-hero-slide:not(:first-child) { display: none; }
.dp-ficha-gallery img { width: 100%; max-height: 560px; object-fit: cover; border-radius: 0 0 var(--dp-radius) var(--dp-radius); }
.dp-ficha-hero-hint { display: none; }
.dp-ficha-content { max-width: 720px; margin: 40px auto 0; padding: 0 24px; }
.dp-ficha-type { font-size: 13px; font-weight: 600; color: var(--dp-accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.dp-ficha-title { font-size: 26px; font-weight: 800; color: var(--dp-navy); letter-spacing: -0.5px; margin: 0 0 10px; line-height: 1.25; }
.dp-ficha-price { font-size: 36px; font-weight: 800; color: var(--dp-gray-900); letter-spacing: -1px; }
.dp-ficha-admin { font-size: 14px; color: var(--dp-gray-500); margin-top: 8px; }
.dp-ficha-badges-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.dp-ficha-badge-card {
    display: flex; align-items: center; gap: 10px;
    background: var(--dp-gray-50); border: 1px solid var(--dp-gray-200); border-radius: 10px;
    padding: 10px 16px;
}
.dp-ficha-badge-card--activo { background: var(--dp-navy); border-color: var(--dp-navy); }
.dp-ficha-badge-card--activo .dp-ficha-badge-icon { background: #fff; color: var(--dp-navy); }
.dp-ficha-badge-card--activo .dp-ficha-badge-label { color: rgba(255,255,255,.65); }
.dp-ficha-badge-card.dp-ficha-badge-card--activo strong { color: #fff; }
.dp-ficha-badge-icon {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    background: var(--dp-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.dp-ficha-badge-icon svg { width: 16px; height: 16px; }
.dp-ficha-badge-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--dp-gray-500); font-weight: 700; }
.dp-ficha-badge-card strong { display: block; font-size: 14px; color: var(--dp-navy); font-weight: 800; }

.dp-ficha-tabs {
    display: flex; gap: 8px; overflow-x: auto; white-space: nowrap;
    margin: 0 0 32px; padding-bottom: 10px; border-bottom: 1px solid var(--dp-gray-200);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dp-ficha-tabs::-webkit-scrollbar { display: none; }
.dp-ficha-tabs a {
    flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--dp-gray-700);
    text-decoration: none; padding: 8px 14px; border-radius: 999px; transition: all .15s;
}
.dp-ficha-tabs a:hover { background: var(--dp-gray-100); color: var(--dp-navy); }
/* El nav principal es "position:fixed" (64px), asi que los saltos de #ancla necesitan este
   colchon para no quedar tapados justo debajo de el. */
#dp-sec-descripcion, #dp-sec-amenidades, #dp-sec-video360, #dp-sec-fotos, #dp-sec-planos, #dp-sec-ubicacion {
    scroll-margin-top: 90px;
}
html { scroll-behavior: smooth; }
.dp-ficha-specs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px; margin-bottom: 32px; padding-bottom: 32px;
    border-bottom: 1px solid var(--dp-gray-200);
}
.dp-ficha-spec { text-align: center; padding: 20px 12px; background: var(--dp-accent); border-radius: 10px; }
.dp-ficha-spec-icon { margin-bottom: 6px; opacity: 0.9; }
.dp-ficha-spec-icon svg { width: 24px; height: 24px; }
.dp-ficha-spec-value { font-size: 26px; font-weight: 800; color: white; }
.dp-ficha-spec-label { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
.dp-ficha-details { margin-bottom: 32px; }
.dp-ficha-detail { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--dp-gray-100); }
.dp-ficha-detail-label { font-size: 14px; color: var(--dp-gray-500); }
.dp-ficha-detail-value { font-size: 14px; font-weight: 600; }
.dp-ficha-desc { margin-bottom: 40px; }
.dp-ficha-desc p { color: var(--dp-gray-700); font-size: 16px; line-height: 1.8; margin: 0 0 18px; text-align: justify; text-justify: inter-word; }
.dp-ficha-desc p:last-child { margin-bottom: 0; }
.dp-ficha-desc p strong { color: var(--dp-navy); font-weight: 700; }
.dp-ficha-map { border-radius: var(--dp-radius); overflow: hidden; height: 300px; }
.dp-ficha-map iframe { width: 100%; height: 100%; border: 0; }
.dp-ficha-map-label { text-align: center; font-size: 12px; color: var(--dp-gray-500); margin-top: 8px; }

/* GALLERY GRID */
.dp-gallery-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px; margin-bottom: 40px; border-radius: var(--dp-radius); overflow: hidden;
}
.dp-gallery-grid img { width: 100%; height: 180px; object-fit: cover; cursor: pointer; transition: opacity 0.2s; }
.dp-gallery-grid img:hover { opacity: 0.85; }
.dp-gallery-grid img:first-child { grid-column: 1 / 3; grid-row: 1 / 3; height: 100%; }

/* PLANOS: formato grande (1 a 5 imagenes), no miniatura como las demas galerias */
.dp-planos-grid-grande {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px; margin-bottom: 40px;
}
.dp-planos-grid-grande img {
    width: 100%; height: 440px; object-fit: contain; background: var(--dp-gray-50);
    border: 1px solid var(--dp-gray-200); border-radius: var(--dp-radius); cursor: pointer;
    padding: 12px; box-sizing: border-box; transition: opacity 0.2s;
}
.dp-planos-grid-grande img:hover { opacity: 0.85; }

/* FORMA DE PAGO */
.dp-forma-pago-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.dp-forma-pago-item { background: var(--dp-gray-50); border: 1px solid var(--dp-gray-200); border-radius: var(--dp-radius); padding: 18px; text-align: center; }
.dp-forma-pago-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--dp-gray-500); margin-bottom: 8px; }
.dp-forma-pago-item strong { font-size: 22px; color: var(--dp-navy); }

/* LIGHTBOX */
.dp-lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.95); align-items: center; justify-content: center;
}
.dp-lightbox.active { display: flex; }
.dp-lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }
.dp-lightbox-close {
    position: absolute; top: 20px; right: 24px;
    color: white; font-size: 32px; cursor: pointer;
    background: none; border: none; font-weight: 300;
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
}
.dp-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: white; font-size: 36px; cursor: pointer;
    background: rgba(255,255,255,0.1); border: none; border-radius: 50%;
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.dp-lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.dp-lightbox-prev { left: 16px; }
.dp-lightbox-next { right: 16px; }
.dp-lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: 14px; }

/* AMENIDADES */
.dp-amenidades {
    background: linear-gradient(135deg, var(--dp-navy) 0%, #1a2d4a 100%);
    border-radius: var(--dp-radius); padding: 32px;
    margin-bottom: 40px; color: white;
}
.dp-amenidades h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.dp-amenidades-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.dp-amenidad-item {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 14px 12px; text-align: center; font-size: 13px;
    font-weight: 500; transition: background 0.2s;
}
.dp-amenidad-item:hover { background: rgba(255,255,255,0.15); }
.dp-amenidad-item--icono { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px 14px; }
.dp-amenidad-icono { width: 26px; height: 26px; color: var(--dp-accent); }
.dp-amenidad-icono svg { width: 100%; height: 100%; }

/* AGENT */
.dp-agent {
    display: flex; align-items: center; gap: 20px;
    padding: 24px; background: var(--dp-gray-50);
    border-radius: var(--dp-radius); margin-top: 16px;
}
.dp-agent-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dp-agent-name { font-size: 16px; font-weight: 700; margin: 0; }
.dp-agent-role { font-size: 13px; color: var(--dp-gray-500); margin: 2px 0 8px; }
.dp-agent-links { display: flex; gap: 12px; flex-wrap: wrap; }
.dp-agent-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--dp-accent); }
.dp-agent-link:hover { text-decoration: underline; }

/* CTA BAR */
.dp-cta-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: var(--dp-white); border-top: 1px solid var(--dp-gray-200);
    padding: 12px 24px; display: flex; gap: 12px; justify-content: center;
}
.dp-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 32px; border-radius: 10px; font-size: 15px;
    font-weight: 600; transition: opacity 0.2s;
}
.dp-cta-whatsapp { background: var(--dp-green); color: white; }
.dp-cta-calendar { background: var(--dp-navy); color: white; }

/* FOOTER */
.dp-footer {
    background: var(--dp-navy); color: rgba(255,255,255,0.6);
    text-align: center; padding: 48px 24px; font-size: 14px;
}
.dp-footer a { color: rgba(255,255,255,0.8); transition: color 0.2s; }
.dp-footer a:hover { color: white; }
.dp-footer-logo { font-size: 24px; font-weight: 700; color: white; margin-bottom: 12px; }
.dp-footer-logo span { color: var(--dp-accent); }
.dp-footer-logo img { max-height: 40px; width: auto; margin: 0 auto; }
/* El pie usa el isotipo (sello): mas alto que el logotipo, con aire propio. */
.dp-footer-logo .dp-footer-iso {
    height: auto;
    max-height: 96px;
    max-width: none;
    width: auto;
    margin: 0 auto 14px;
    object-fit: contain;
}
@media (max-width: 640px) {
    .dp-footer-logo .dp-footer-iso { max-height: 76px; }
}
.dp-footer-simple {
    background: var(--dp-navy);
    color: #fff;
    padding: 46px 0;
}
.dp-footer-simple .dp-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.dp-footer-simple__brand {
    color: #fff;
    font-size: clamp(34px, 5vw, 68px);
    font-weight: 300;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    letter-spacing: 0;
    line-height: 0.98;
}
.dp-footer-simple__links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 18px;
}
.dp-footer-simple__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.dp-footer-simple__links a:hover {
    color: var(--dp-accent);
}

/* ARCHIVE */
.dp-archive-header { background: var(--dp-navy); color: white; text-align: center; padding: 120px 24px 48px; }
.dp-archive-header h1 { font-size: 32px; font-weight: 800; }

/* BREADCRUMBS (SEO + navegacion interna) */
.dp-breadcrumbs { background: var(--dp-gray-50); border-bottom: 1px solid var(--dp-gray-200); padding: 76px 24px 10px; font-size: 12.5px; }
.dp-breadcrumbs .dp-container { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dp-breadcrumbs a { color: var(--dp-gray-500); text-decoration: none; }
.dp-breadcrumbs a:hover { color: var(--dp-accent); }
.dp-breadcrumbs span[aria-current] { color: var(--dp-gray-700); font-weight: 600; }
.dp-breadcrumb-sep { color: var(--dp-gray-300); }
.dp-breadcrumbs ~ .dp-ficha { padding-top: 0; }
.dp-breadcrumbs ~ .dp-archive-header { padding-top: 40px; }

/* BLOG / NOTICIAS */
.dp-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dp-blog-card {
    background: var(--dp-white); border-radius: var(--dp-radius);
    overflow: hidden; box-shadow: var(--dp-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.dp-blog-card:hover { transform: translateY(-4px); box-shadow: var(--dp-shadow-lg); }
.dp-blog-card-img { width: 100%; height: 200px; object-fit: cover; }
.dp-blog-card-body { padding: 20px; }
.dp-blog-card-meta { font-size: 12px; color: var(--dp-gray-500); margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.dp-blog-card-title { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.dp-blog-card-title a { color: var(--dp-gray-900); transition: color 0.2s; }
.dp-blog-card-title a:hover { color: var(--dp-accent); }
.dp-blog-card-excerpt { font-size: 14px; color: var(--dp-gray-500); line-height: 1.5; margin-bottom: 12px; }
.dp-blog-card-link { font-size: 13px; font-weight: 600; color: var(--dp-accent); }

/* ARTICLE */
.dp-article { padding-top: 64px; }
.dp-article-header { position: relative; max-width: 900px; margin: 0 auto; }
.dp-article-hero-img { width: 100%; height: 400px; object-fit: cover; border-radius: 0 0 var(--dp-radius) var(--dp-radius); }
.dp-article-header-content { max-width: 720px; margin: -60px auto 0; padding: 32px; background: white; border-radius: var(--dp-radius); box-shadow: var(--dp-shadow-lg); position: relative; z-index: 2; }
.dp-article-meta { font-size: 13px; color: var(--dp-gray-500); margin-bottom: 12px; display: flex; gap: 6px; align-items: center; }
.dp-article-title { font-size: clamp(24px, 4vw, 36px); font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; color: var(--dp-gray-900); }
.dp-article-body {
    max-width: 720px; margin: 40px auto; padding: 0 24px;
    font-size: 16px; line-height: 1.9; color: var(--dp-gray-700);
}
.dp-article-body h2 { font-size: 24px; font-weight: 700; margin: 40px 0 16px; color: var(--dp-gray-900); }
.dp-article-body h3 { font-size: 20px; font-weight: 600; margin: 32px 0 12px; color: var(--dp-gray-900); }
.dp-article-body p { margin-bottom: 20px; text-align: justify; text-justify: inter-word; }
.dp-article-body img { border-radius: var(--dp-radius); margin: 24px 0; }
.dp-article-body blockquote {
    border-left: 4px solid var(--dp-accent); padding: 16px 24px;
    margin: 24px 0; background: var(--dp-gray-50); border-radius: 0 8px 8px 0;
    font-style: italic; color: var(--dp-gray-700);
}
.dp-article-body ul, .dp-article-body ol { margin: 16px 0; padding-left: 24px; }
.dp-article-body li { margin-bottom: 8px; }
.dp-article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--dp-gray-200); }
.dp-article-tag {
    padding: 6px 14px; border-radius: 20px; font-size: 13px;
    background: var(--dp-gray-100); color: var(--dp-gray-700);
    font-weight: 500; transition: background 0.2s;
}
.dp-article-tag:hover { background: var(--dp-gray-200); }
.dp-article-share {
    max-width: 720px; margin: 32px auto; padding: 0 24px;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.dp-share-btn {
    padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
    background: var(--dp-gray-100); color: var(--dp-gray-700); transition: background 0.2s;
}
.dp-share-btn:hover { background: var(--dp-gray-200); }
.dp-share-wa { background: var(--dp-green); color: white; }
.dp-share-wa:hover { opacity: 0.9; background: var(--dp-green); }
.dp-article-related {
    max-width: 900px; margin: 48px auto; padding: 48px 24px 0;
    border-top: 1px solid var(--dp-gray-200);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .dp-nav { padding: 0 16px; gap: 12px; }
    .dp-nav-links, .dp-nav-zone { display: none; }
    .dp-properties-grid { grid-template-columns: 1fr; }
    .dp-hero { padding: 120px 20px 60px; }
    .dp-footer-simple .dp-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .dp-footer-simple__links {
        justify-content: flex-start;
    }
    .dp-ficha-price { font-size: 28px; }
    .dp-ficha-gallery {
        max-width: none;
        width: 100%;
    }
    .dp-ficha-hero-slider {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
    }
    .dp-ficha-hero-slider::-webkit-scrollbar { display: none; }
    .dp-ficha-hero-track {
        display: flex;
    }
    .dp-ficha-hero-slide,
    .dp-ficha-hero-slide:not(:first-child) {
        display: block;
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
    .dp-ficha-hero-slide img {
        height: 360px;
        max-height: 360px;
        min-height: 360px;
        border-radius: 0;
    }
    .dp-ficha-hero-hint {
        position: absolute;
        right: 14px;
        bottom: 14px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 7px 11px;
        background: rgba(11,26,46,0.78);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
    }
    .dp-ficha-specs { grid-template-columns: repeat(3, 1fr); }
    .dp-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .dp-gallery-grid img { height: 140px; }
    .dp-gallery-grid img:first-child { grid-column: 1 / -1; grid-row: auto; height: 220px; }
    .dp-amenidades-grid { grid-template-columns: repeat(2, 1fr); }
    .dp-agent { flex-direction: column; text-align: center; }
    .dp-agent-links { justify-content: center; }
    .dp-blog-grid { grid-template-columns: 1fr; }
    .dp-article-hero-img { height: 250px; }
    .dp-article-header-content { margin: -40px 16px 0; padding: 24px; }
    .dp-article-body { padding: 0 16px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .dp-properties-grid { grid-template-columns: repeat(2, 1fr); }
    .dp-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
    .dp-ficha-hero-slide img {
        height: 300px;
        max-height: 300px;
        min-height: 300px;
    }
}

/* PRINT */
@media print {
    @page { margin: 0; }
    body { margin: 0; padding: 0; }
    .dp-nav, .dp-footer, .dp-cta-bar, .dp-btn-pdf, .dp-lightbox,
    [style*="position:fixed"] { display: none !important; }
    /* La ficha PDF es un documento para el cliente: se quitan las propiedades similares (son un
       enlace para seguir navegando la web, no tienen sentido en un PDF) y cualquier boton que solo
       funcione con JavaScript en la pagina viva (descargar PDF, agendar visita con modal, y el
       enlace interno "eres aliado?" que no debe llegarle a un cliente final). */
    .dp-ficha-pdf-actions, .dp-agenda-visita { display: none !important; }
    .dp-ficha { padding-top: 0; padding-bottom: 0; }
    .dp-print-header {
        display: flex !important;
        align-items: center; justify-content: space-between;
        background: #0B1A2E !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
        color: white; padding: 20px 32px;
    }
    .dp-print-header img { max-height: 32px; width: auto; }
    .dp-print-header span { font-size: 12px; color: rgba(255,255,255,0.6); }
    .dp-ficha-gallery img { max-height: 350px; object-fit: cover; border-radius: 0; break-inside: avoid; page-break-inside: avoid; }
    .dp-ficha-content { padding: 0 32px; margin-top: 16px; }
    .dp-ficha-title { font-size: 16px; letter-spacing: 0.07em; }
    .dp-ficha-price { font-size: 28px; }
    /* Bloque tipo/titulo/precio/zona/administracion: nunca se parte a la mitad entre paginas. */
    .dp-ficha-header-block { break-inside: avoid; page-break-inside: avoid; }
    /* Que un titulo (ej. "Fotos", "Sobre esta propiedad") nunca quede solo al final de una pagina
       con su contenido empezando en la siguiente: se pega al bloque que sigue. */
    .dp-ficha-content h2 { break-after: avoid; page-break-after: avoid; }
    .dp-ficha-specs { gap: 8px; break-inside: avoid; page-break-inside: avoid; }
    .dp-ficha-spec { background: #2EA3F2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: white !important; padding: 12px 8px; break-inside: avoid; page-break-inside: avoid; }
    .dp-ficha-spec-value { color: white !important; font-size: 20px; }
    .dp-ficha-spec-label { color: rgba(255,255,255,0.8) !important; }
    .dp-ficha-details { break-inside: avoid; page-break-inside: avoid; margin-bottom: 20px; }
    .dp-ficha-detail { break-inside: avoid; page-break-inside: avoid; }
    .dp-ficha-desc { margin-bottom: 20px; }
    /* Si la descripcion es muy larga y de todas formas tiene que partirse entre paginas, que
       sea entre parrafos completos, nunca a la mitad de un parrafo. */
    .dp-ficha-desc p { break-inside: avoid; page-break-inside: avoid; }
    .dp-amenidades { background: #0B1A2E !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; page-break-inside: avoid; }
    .dp-amenidad-item { background: rgba(255,255,255,0.1) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: white !important; break-inside: avoid; page-break-inside: avoid; }
    .dp-agent { break-inside: avoid; }
    /* GALERIA: esto es lo mas importante para que el PDF no "se coma" fotos. Cada foto es una
       unidad atomica: si no cabe completa en el espacio que queda de la pagina, se empuja entera
       a la pagina siguiente, nunca se corta a la mitad. El contenedor si puede partirse ENTRE
       fotos (break-inside normal en el grid), solo cada <img> individual esta protegida. */
    .dp-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .dp-gallery-grid img { height: 120px; cursor: default; break-inside: avoid; page-break-inside: avoid; }
    .dp-ficha-map { height: 200px; break-inside: avoid; page-break-inside: avoid; }
    .dp-video-recorrido { break-inside: avoid; page-break-inside: avoid; }
    /* Tarjeta del agente (solo ficha cliente): se conserva el color de fondo de los botones de
       Llamar/WhatsApp/Instagram para que sigan siendo legibles y utilizables si el PDF se abre en
       un lector digital (los enlaces tel:/wa.me/instagram siguen siendo clicables en el PDF). */
    .dp-agent-card-v2 { break-inside: avoid; page-break-inside: avoid; margin-top: 20px; margin-bottom: 24px; background: var(--dp-gray-50) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .dp-agent-v2-btn--call, .dp-agent-v2-btn--wa, .dp-agent-v2-btn--ig { background: #0B1A2E !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}



/* ===== V8 NUEVOS ESTILOS ===== */

/* Badges de terraza/balcon en tarjetas del home: envueltas en un contenedor con flex para que
   quepan varias una al lado de la otra sin superponerse (antes cada una tenia su propia posicion
   absoluta fija, asi que una segunda insignia quedaba encima de la primera). */
.dp-property-badges-extra {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dp-property-badge-terraza, .dp-property-badge-balcon, .dp-property-badge-coleccion, .dp-property-badge-destacado {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.dp-property-badge-terraza, .dp-property-badge-balcon {
    background: rgba(255,255,255,0.92);
    color: var(--dp-navy);
}
.dp-property-badge-coleccion {
    background: var(--dp-navy);
    color: #fff;
}
.dp-property-badge-destacado {
    background: #F59E0B;
    color: #fff;
}

/* Botón "Ver más propiedades" solo en móvil */
.dp-ver-mas-mobile {
    display: none;
    text-align: center;
    margin-top: 32px;
}
@media (max-width: 768px) {
    .dp-ver-mas-mobile {
        display: block;
    }
}

/* Bloque Agenda una Visita en ficha */
.dp-agenda-visita {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #f0f9f0 0%, #e8f5e9 100%);
    border: 1px solid #c8e6c9;
    border-radius: 12px;
    padding: 28px 24px;
    margin-bottom: 40px;
}
.dp-agenda-visita-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.dp-agenda-visita-text {
    flex: 1;
}
.dp-agenda-visita-text h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dp-navy);
    margin: 0 0 4px;
}
.dp-agenda-visita-text p {
    font-size: 14px;
    color: var(--dp-gray-500);
    margin: 0;
}
.dp-agenda-visita-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .dp-agenda-visita {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px 20px;
    }
    .dp-agenda-visita-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Botón Video Recorrido */
.dp-video-recorrido {
    text-align: center;
    margin-bottom: 40px;
}
.dp-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    color: white;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(131, 58, 180, 0.3);
}
.dp-video-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(131, 58, 180, 0.4);
    color: white;
}

/* BARRA INFERIOR FIJA - Franja azul oscuro completa */
.dp-cta-bar,
.dp-cta-bar * {
    all: unset;
}
.dp-cta-bar {
    display: none !important;
}
.dp-cta-bar-v8 {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dp-navy);
    padding: 0;
    margin: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
.dp-cta-agendar-v8 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    margin: 0;
    color: white !important;
    font-family: var(--dp-font);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: 0.3px;
    text-align: center;
    background: transparent;
    border: none;
    cursor: pointer;
}
.dp-cta-agendar-v8:hover {
    color: white !important;
    background: rgba(255,255,255,0.05);
}
.dp-cta-agendar-v8 svg {
    flex-shrink: 0;
}

/* Ocultar WhatsApp flotante de plugins */
.wa-float-btn,
.joinchat,
.joinchat__button,
[class*="whatsapp-float"],
[class*="wa_btn"],
#wa-widget,
.wa-chat-btn-fixed,
a[href*="wa.me"][style*="position: fixed"],
a[href*="wa.me"][style*="position:fixed"],
div[class*="WhatsApp"],
.whatsapp-fixed,
.btn-whatsapp-fixed {
    display: none !important;
}

@media print {
    .dp-cta-bar-v8 { display: none !important; }
}

/* V8 - Etiqueta VENDIDO - franja roja sobre la foto */
.dp-vendido-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}
.dp-vendido-badge {
    display: block;
    width: 100%;
    background: #0B1A2E;
    color: white;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 12px 0;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 4px 15px rgba(11,26,46,0.5);
}

/* === v8.1: Hero con foto de fondo === */
.dp-hero--photo {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px 80px;
    overflow: hidden;
}
/* La fotografia va en su propia capa, debajo del velo y del contenido. Sin border-radius,
   sin filtros: la arquitectura se muestra como la tomo el fotografo. */
.dp-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.dp-hero-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 1;
}
.dp-hero--photo .dp-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.dp-hero--photo h1 {
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.dp-hero--photo .dp-hero-sub {
    color: rgba(255,255,255,0.85);
}
@media(max-width:768px) {
    .dp-hero--photo { min-height: 75vh; padding: 100px 16px 60px; }
}

/* === v8.1: Iconos SVG en specs (overridden by v11 pro max) === */
.dp-property-spec {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* === v10: Requerimientos cards === */
.dp-req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.dp-req-card {
    background: #fff;
    border: 1px solid var(--dp-gray-100);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.dp-req-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.dp-req-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.dp-req-tipo {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dp-navy);
}
.dp-req-zona {
    font-size: 0.85rem;
    color: var(--dp-gray-400);
    background: var(--dp-gray-50);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.dp-req-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.dp-req-spec {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    color: var(--dp-gray-500);
}
.dp-req-budget {
    font-weight: 600;
    color: var(--dp-gold, #c9a84c);
    font-size: 1rem;
}
.dp-req-notas {
    font-size: 0.85rem;
    color: var(--dp-gray-400);
    font-style: italic;
    line-height: 1.4;
}
.dp-req-cta {
    margin-top: auto;
    text-align: center;
    font-size: 0.9rem;
    padding: 10px 16px;
}
@media (max-width: 640px) {
    .dp-req-grid { grid-template-columns: 1fr; }
}

/* === v10.1: Requerimiento image + archive === */
.dp-req-card {
    flex-direction: row;
    padding: 0;
    overflow: hidden;
}
.dp-req-img {
    flex: 0 0 180px;
    min-height: 200px;
    overflow: hidden;
}
.dp-req-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dp-req-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
/* Card without image keeps vertical layout */
.dp-req-card:not(:has(.dp-req-img)) {
    flex-direction: column;
    padding: 24px;
}
.dp-req-card:not(:has(.dp-req-img)) .dp-req-body {
    padding: 0;
}
@media (max-width: 640px) {
    .dp-req-card { flex-direction: column; }
    .dp-req-img { flex: none; height: 180px; }
}
/* Archive requerimientos page */
.dp-archive-req-header {
    background: var(--dp-navy);
    color: #fff;
    text-align: center;
    padding: 56px 24px 40px;
}
.dp-archive-req-header h1 {
    font-size: 2rem;
    margin: 0 0 8px;
}
.dp-archive-req-header p {
    opacity: 0.7;
    margin: 0;
    font-size: 1.1rem;
}
.dp-archive-req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    padding: 40px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* === v12: Hero editorial =========================================================
   Una sola idea por encima del buscador: el titular y, debajo, la linea de zonas.
   Nada mas. El aire entre los tres bloques (titular / zonas / buscador) es parte
   del diseno: no reducirlo.
   La tipografia del titular se define abajo, en el bloque final (Playfair italica).
   Aqui solo queda lo que no es tipografia. */
.dp-hero h1 {
    text-wrap: balance;
}
.dp-hero-zonas {
    font-family: 'Lato', var(--dp-font), sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.66);
    /* el tracking anade aire a la derecha: se compensa para que quede optico-centrada */
    text-indent: 0.34em;
    margin: 22px 0 40px;
}
@media (max-width: 640px) {
    .dp-hero-zonas { font-size: 10px; letter-spacing: 0.26em; text-indent: 0.26em; margin: 18px 0 30px; }
}
/* Isotipo bajo la linea de zonas del hero: centrado. El alto lo fija el Personalizador
   (Isotipo -> "Alto del isotipo en el hero"), inline en front-page.php. */
.dp-hero-isotipo {
    display: block;
    margin: 4px auto 0;
    height: 64px; /* respaldo si no hay valor en el Personalizador */
    width: auto;
    max-width: 70vw;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.35));
}
@media (max-width: 640px) {
    .dp-hero-isotipo { max-height: 88px; } /* tope en movil aunque el ajuste sea mayor */
}

/* === v11: Sección Contacto + Formulario === */
.dp-contacto-section {
    background: var(--dp-navy);
    color: var(--dp-white);
    padding: 0;
}
.dp-contacto-wrap {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 520px;
}

/* Info izquierda */
.dp-contacto-info {
    padding: 64px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dp-contacto-tag {
    font-size: 12px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.66);
    text-transform: uppercase;
    margin-bottom: 20px;
}
.dp-contacto-titulo {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1.2;
    color: var(--dp-white);
    margin: 0 0 24px;
}
.dp-contacto-ig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: rgba(255,255,255,0.7);
    transition: all 0.2s;
    margin-bottom: 40px;
}
.dp-contacto-ig:hover {
    color: var(--dp-white);
    border-color: var(--dp-white);
}
.dp-contacto-datos {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.dp-contacto-dato-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.66);
    margin-bottom: 4px;
}
.dp-contacto-dato a {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    transition: color 0.2s;
}
.dp-contacto-dato a:hover {
    color: var(--dp-white);
}

/* Formulario derecha */
.dp-contacto-form-wrap {
    background: linear-gradient(135deg, rgba(11,26,46,0.92) 0%, rgba(20,40,70,0.95) 100%);
    padding: 64px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,0.06);
}
.dp-contacto-form-titulo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.66);
    margin: 0 0 32px;
}
.dp-contacto-radios {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 36px;
}
.dp-contacto-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    transition: color 0.2s;
}
.dp-contacto-radio:hover {
    color: var(--dp-white);
}
.dp-contacto-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s;
    flex-shrink: 0;
}
.dp-contacto-radio input[type="radio"]:checked {
    border-color: var(--dp-accent);
}
.dp-contacto-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dp-accent);
}
.dp-contacto-radio input[type="radio"]:checked + span {
    color: var(--dp-white);
}
.dp-contacto-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
}
.dp-contacto-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.dp-contacto-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.66);
    margin-bottom: 8px;
}
.dp-contacto-field input,
.dp-contacto-field select,
.dp-contacto-field textarea {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 14px 16px;
    font-family: var(--dp-font);
    font-size: 14px;
    color: var(--dp-white);
    transition: border-color 0.2s, background 0.2s;
    outline: none;
}
.dp-contacto-field input::placeholder,
.dp-contacto-field textarea::placeholder {
    color: rgba(255,255,255,0.52);
}
.dp-contacto-field input:focus,
.dp-contacto-field select:focus,
.dp-contacto-field textarea:focus {
    border-color: var(--dp-accent);
    background: rgba(255,255,255,0.12);
}
.dp-contacto-field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.55) 50%), linear-gradient(135deg, rgba(255,255,255,0.55) 50%, transparent 50%);
    background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.dp-contacto-field select option {
    background: var(--dp-navy);
    color: var(--dp-white);
}
.dp-contacto-field textarea {
    resize: vertical;
    min-height: 100px;
}
.dp-contacto-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    color: var(--dp-white);
    font-family: var(--dp-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    align-self: flex-end;
}
.dp-contacto-submit:hover {
    background: var(--dp-white);
    color: var(--dp-navy);
    border-color: var(--dp-white);
}
.dp-contacto-success {
    text-align: center;
    font-size: 16px;
    color: #25D366;
    font-weight: 600;
    padding: 40px 0;
}

/* Footer mínimo */
.dp-footer {
    background: #070f1a;
    color: rgba(255,255,255,0.66);
    text-align: center;
    padding: 24px;
    font-size: 13px;
}

/* Responsive contacto */
@media (max-width: 768px) {
    .dp-contacto-wrap {
        grid-template-columns: 1fr;
    }
    .dp-contacto-info {
        padding: 48px 24px 32px;
        text-align: center;
        align-items: center;
    }
    .dp-contacto-datos {
        align-items: center;
    }
    .dp-contacto-form-wrap {
        padding: 32px 24px 48px;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
    .dp-contacto-row {
        grid-template-columns: 1fr;
    }
    .dp-contacto-submit {
        width: 100%;
    }
}

/* ========================================
   v11 PRO: SEARCH BAR + FILTERS
   ======================================== */
/* Filtros de categoría fuera del hero */
.dp-category-filters {
    background: var(--dp-white);
    padding: 24px 0 8px;
    border-bottom: 1px solid var(--dp-gray-200);
}
.dp-category-filters .dp-search-filters {
    justify-content: center;
}
.dp-category-filters .dp-filter-btn {
    background: var(--dp-gray-100);
    color: var(--dp-gray-700);
    border: 1px solid var(--dp-gray-200);
}
.dp-category-filters .dp-filter-btn:hover {
    background: var(--dp-gray-200);
    color: var(--dp-gray-900);
}
.dp-category-filters .dp-filter-btn.active {
    background: var(--dp-navy);
    color: white;
    border-color: var(--dp-navy);
}
.dp-category-filters .dp-filter-oportunidad.active {
    background: #F59E0B;
    border-color: #F59E0B;
    color: white;
}
.dp-tag-filter-sep {
    width: 1px;
    align-self: stretch;
    background: var(--dp-gray-200);
    margin: 2px 4px;
}
.dp-tag-filter-btn {
    background: var(--dp-gray-100);
    color: var(--dp-gray-700);
    border: 1px solid var(--dp-gray-200);
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--dp-font);
}
.dp-tag-filter-btn:hover {
    background: var(--dp-gray-200);
    color: var(--dp-gray-900);
}
.dp-tag-filter-btn.active {
    background: var(--dp-navy);
    color: white;
    border-color: var(--dp-navy);
}

/* LEGACY - kept for reference */
.dp-search-section {
    background: var(--dp-navy);
    padding: 0 0 24px;
    margin-top: -1px;
}
.dp-search-bar {
    max-width: 900px;
    margin: 0 auto;
}
.dp-search-filters {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dp-filter-btn {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 8px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--dp-font);
    text-decoration: none;
    display: inline-block;
}
.dp-filter-btn:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}
.dp-filter-btn.active {
    background: var(--dp-accent);
    color: white;
    border-color: var(--dp-accent);
}
.dp-filter-oportunidad.active {
    background: #F59E0B;
    border-color: #F59E0B;
}
.dp-search-fields {
    display: flex;
    gap: 8px;
    align-items: center;
}
.dp-search-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    color: white;
    font-size: 14px;
    font-family: var(--dp-font);
    appearance: none;
    -webkit-appearance: none;
}
.dp-search-input option {
    background: var(--dp-navy);
    color: white;
}
.dp-search-submit {
    padding: 12px 28px;
    background: var(--dp-accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: var(--dp-font);
    white-space: nowrap;
}
.dp-search-submit:hover { opacity: 0.9; }

/* Badge Oportunidad */
.dp-badge-oportunidad {
    background: #F59E0B !important;
    color: white !important;
}

/* Spin animation */
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   v11 PRO: RESPONSIVE SEARCH
   ======================================== */
@media (max-width: 768px) {
    .dp-search-fields {
        flex-direction: column;
    }
    .dp-search-input,
    .dp-search-submit {
        width: 100%;
    }
    .dp-filter-btn {
        padding: 6px 16px;
        font-size: 13px;
    }
}

/* ========================================
   v11 PRO MAX: ICONOS SVG EN PROPERTY CARDS
   ======================================== */
.dp-property-specs--icons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 0 16px;
    align-items: center;
}
.dp-spec-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--dp-gray-500);
    white-space: nowrap;
    min-width: 0;
    line-height: 1;
}
.dp-spec-icon svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--dp-navy);
}
.dp-spec-icon strong {
    font-weight: 700;
    color: var(--dp-navy);
}

/* ========================================
   v11 PRO MAX: SECCIÓN AGENTES HOMEPAGE
   ======================================== */
.dp-agentes-section {
    padding: 64px 0;
    background: var(--dp-white);
}
.dp-agentes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}
.dp-agente-card {
    text-align: center;
    cursor: pointer;
    padding: 28px 20px;
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--dp-gray-50);
}
.dp-agente-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}
.dp-agente-foto-wrap {
    width: 280px;
    height: 350px;
    margin: 0 auto 20px;
    border-radius: 16px;
    overflow: hidden;
}
.dp-agente-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dp-agente-foto--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-gray-200);
    color: var(--dp-gray-500);
    font-size: 40px;
    font-weight: 700;
    width: 100%;
    height: 100%;
}
.dp-agente-nombre {
    font-size: 16px;
    font-weight: 700;
    color: var(--dp-navy);
    margin-bottom: 4px;
}
.dp-agente-role {
    font-size: 13px;
    color: var(--dp-gray-500);
    margin-bottom: 12px;
}
.dp-agente-links {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.dp-agente-wa,
.dp-agente-ig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s, opacity 0.2s;
    background: var(--dp-navy);
    color: white;
}
.dp-agente-wa:hover,
.dp-agente-ig:hover {
    opacity: 0.8;
}
.dp-agente-wa svg,
.dp-agente-ig svg {
    display: block;
}

/* AGENTE MODAL */
.dp-agente-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}
.dp-agente-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1;
}
.dp-agente-modal-content {
    position: relative;
    z-index: 2;
    background: white;
    border-radius: 16px;
    padding: 40px 32px;
    max-width: 900px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.dp-agente-modal-close {
    position: absolute;
    top: 16px; right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--dp-gray-500);
    line-height: 1;
}
.dp-agente-modal-close:hover {
    color: var(--dp-navy);
}

/* ========================================
   v11 PRO MAX: TARJETA AGENTE V2 (single)
   ======================================== */
.dp-agent-card-v2 {
    display: flex;
    gap: 28px;
    align-items: center;
    background: var(--dp-gray-50);
    border-radius: 16px;
    padding: 28px;
    margin-top: 32px;
    margin-bottom: 80px;
}
.dp-agent-v2-photo-col {
    flex-shrink: 0;
    width: 160px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
}
.dp-agent-v2-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dp-agent-v2-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-gray-200);
    color: var(--dp-gray-500);
    font-size: 48px;
    font-weight: 700;
    width: 100%;
    height: 100%;
}
.dp-agent-v2-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--dp-navy);
    margin-bottom: 4px;
}
.dp-agent-v2-role {
    font-size: 14px;
    color: var(--dp-gray-500);
    margin-bottom: 16px;
}
.dp-agent-v2-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.dp-agent-v2-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.1s;
}
.dp-agent-v2-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.dp-agent-v2-btn--call {
    background: var(--dp-navy);
    color: white;
}
.dp-agent-v2-btn--wa {
    background: var(--dp-navy);
    color: white;
}
.dp-agent-v2-btn--ig {
    background: var(--dp-navy);
    color: white;
}
.dp-agent-v2-datos-texto {
    margin: 10px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--dp-gray-700);
    line-height: 1.6;
}

@media (max-width: 760px) {
    .dp-share-bar {
        width: calc(100% - 24px);
        flex-wrap: wrap;
        justify-content: space-between;
        border-radius: 12px;
    }
    .dp-share-bar > span { width: 100%; }
    .dp-share-phone { flex: 1 1 140px; min-width: 0; }
}

/* BADGE OPORTUNIDAD */
.dp-badge-oportunidad {
    background: #f59e0b !important;
    color: #000 !important;
}
.dp-filter-oportunidad.active {
    background: #f59e0b;
    color: #000;
}

/* ========================================
   v11 PRO MAX: RESPONSIVE ADDITIONS
   ======================================== */
@media (max-width: 768px) {
    .dp-agentes-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 400px;
    }
    .dp-agente-foto-wrap {
        width: 200px;
        height: 250px;
    }
    .dp-agente-card {
        padding: 20px 16px;
    }
}
/* ========================================
   v3: HAMBURGER MENU (mobile)
   ======================================== */
.dp-nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.dp-nav-hamburger span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--dp-accent);
    border-radius: 999px;
    margin: 3px 0;
    transition: transform 0.3s, opacity 0.3s, background 0.2s;
}
.dp-nav-hamburger:hover span,
.dp-nav-hamburger:focus-visible span {
    background: #48B8FF;
}
.dp-nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.dp-nav-hamburger.active span:nth-child(2) { opacity: 0; }
.dp-nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

@media (max-width: 768px) {
    .dp-nav-hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; }
    .dp-nav-links {
        display: none !important;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--dp-navy);
        flex-direction: column;
        padding: 16px 24px 24px;
        gap: 0;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        border-top: 1px solid rgba(255,255,255,0.1);
        z-index: 999;
    }
    .dp-nav-links.open { display: flex !important; }
    .dp-nav-links li { list-style: none; }
    .dp-nav-links a {
        display: block;
        padding: 14px 0;
        font-size: 16px;
        color: rgba(255,255,255,0.85);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .dp-nav-links a.dp-nav-login {
        display: inline-flex;
        width: auto;
        margin-top: 10px;
        padding: 10px 16px;
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: 999px;
    }
    .dp-nav-links li:last-child a { border-bottom: none; }
}

/* ========================================
   v3: HERO SEARCH BAR
   ======================================== */
.dp-hero-search {
    max-width: 520px;
    margin: 12px auto 0;
    position: relative;
    z-index: 5;
}
.dp-hero-search-wrap {
    position: relative;
}
.dp-hero-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dp-gray-400);
    pointer-events: none;
    z-index: 2;
}
.dp-hero-search-input {
    width: 100%;
    padding: 16px 20px 16px 48px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-family: var(--dp-font);
    background: rgba(255,255,255,0.95);
    color: var(--dp-gray-900);
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    outline: none;
    transition: box-shadow 0.2s;
}
.dp-hero-search-input:focus {
    box-shadow: 0 4px 32px rgba(0,0,0,0.25);
}
.dp-hero-search-input::placeholder {
    color: var(--dp-gray-400);
}
.dp-hero-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    max-height: 280px;
    overflow-y: auto;
    z-index: 10;
}
.dp-hero-search-dropdown.open {
    display: block;
}
.dp-hero-search-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    font-size: 15px;
    color: var(--dp-gray-700);
    transition: background 0.15s;
    text-decoration: none;
}
.dp-hero-search-option:hover {
    background: var(--dp-gray-100);
    color: var(--dp-navy);
}
.dp-hero-search-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--dp-gray-500);
    background: var(--dp-gray-100);
    padding: 2px 8px;
    border-radius: 10px;
}
.dp-hero-search-option.dp-hidden {
    display: none;
}

/* ========================================
   v3: CONTACTO CON FOTO DE FONDO
   ======================================== */
.dp-contacto-section--photo .dp-contacto-form-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}
.dp-contacto-section--photo .dp-contacto-form-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dp-overlay-color, rgba(11, 26, 46, 0.82));
    z-index: 0;
}
.dp-contacto-section--photo .dp-contacto-form-wrap > * {
    position: relative;
    z-index: 1;
}

/* ========================================
   v3: AGENT CARD VERTICAL LAYOUT
   ======================================== */
.dp-agent-card-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--dp-gray-50);
    border-radius: 16px;
    padding: 32px 28px;
    margin-top: 32px;
    margin-bottom: 80px;
    max-width: 400px;
}
.dp-agent-v2-photo-col {
    width: 200px;
    height: 250px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}
.dp-agent-v2-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
@media (max-width: 768px) {
    .dp-agent-card-v2 {
        max-width: 100%;
        padding: 24px 20px;
    }
    .dp-agent-v2-photo-col {
        width: 180px;
        height: 225px;
    }
}

/* ============================================================
   CRM SISTEMA: Funnel, Agenda, Productivity
   ============================================================ */

/* Funnel */
.dp-crm-funnels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.dp-crm-funnel-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0ea5e9;
    margin: 0 0 12px;
}
.dp-crm-funnel-stages {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dp-crm-funnel-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 8px;
    text-decoration: none;
    color: #1e293b;
    border-right: 1px solid #f1f5f9;
    transition: background 0.15s;
    position: relative;
}
.dp-crm-funnel-stage:last-child { border-right: none; }
.dp-crm-funnel-stage:hover { background: #f8fafc; }
.dp-crm-funnel-stage.is-empty { opacity: 0.5; }
.dp-crm-funnel-stage.is-lost { color: #dc2626; }
.dp-crm-funnel-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0ea5e9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.dp-crm-funnel-stage.is-lost .dp-crm-funnel-icon { background: #dc2626; }
.dp-crm-funnel-stage.is-empty .dp-crm-funnel-icon { background: #cbd5e1; }
.dp-crm-funnel-label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}
.dp-crm-funnel-stage strong {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}
.dp-crm-funnel-stage.is-lost strong { color: #dc2626; }

/* Agenda */
.dp-crm-agenda {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.dp-crm-agenda-group h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 16px 0 8px;
    padding: 0 16px;
}
.dp-crm-agenda-group:first-child h4 { margin-top: 0; }
.dp-crm-agenda-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
}
.dp-crm-agenda-item:hover { background: #f8fafc; }
.dp-crm-agenda-item strong { flex: 1; font-size: 14px; }
.dp-crm-agenda-item span {
    font-size: 12px;
    color: #64748b;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 4px;
}
.dp-crm-agenda-item small { font-size: 12px; color: #94a3b8; min-width: 60px; text-align: right; }
.dp-crm-agenda--late { border-left: 3px solid #dc2626; }
.dp-crm-agenda--late small { color: #dc2626; font-weight: 600; }

/* Today counter */
.dp-crm-today-counter { text-align: center; }
.dp-crm-today-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px;
}
.dp-crm-today-stats article {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dp-crm-today-stats strong {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
}
.dp-crm-today-stats span {
    font-size: 12px;
    color: #64748b;
}

/* 4-metric layout */
.dp-crm-metrics--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.dp-crm-metric--urgent {
    border-left: 3px solid #dc2626 !important;
}
.dp-crm-metric--urgent strong {
    color: #dc2626 !important;
}

/* Save button */
.dp-crm-btn-save {
    background: #0f172a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.dp-crm-btn-save:hover { background: #1e293b; }

/* Alert variants */
.dp-crm-alert--ok { border-left-color: #22c55e; }
.dp-crm-alert--error { border-left-color: #dc2626; }

/* Overdue in table */
.dp-crm-overdue { color: #dc2626; font-weight: 600; }

/* Responsive funnel */
@media (max-width: 900px) {
    .dp-crm-funnels { grid-template-columns: 1fr; }
    .dp-crm-agenda { grid-template-columns: 1fr; }
    .dp-crm-metrics--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .dp-crm-funnel-stages { flex-wrap: wrap; }
    .dp-crm-funnel-stage { min-width: 60px; }
}

/* ========================================
   PROYECTOS INMOBILIARIOS — hero carrusel
   ======================================== */
.dp-proyectos-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--dp-navy);
    color: #fff;
}
.dp-proyectos-hero-track { position: absolute; inset: 0; }
.dp-proyectos-hero-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}
.dp-proyectos-hero-slide.active { opacity: 1; pointer-events: auto; }
.dp-proyectos-hero-media {
    width: 100%; height: 100%;
    object-fit: cover;
}
.dp-proyectos-hero-media--img {
    background-size: cover;
    background-position: center;
}
.dp-proyectos-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,26,46,.35) 0%, rgba(11,26,46,.55) 55%, rgba(11,26,46,.92) 100%);
    z-index: 1;
}
.dp-proyectos-hero-content {
    position: relative;
    z-index: 2;
    padding: 48px var(--dp-container-pad, 24px) 64px;
    max-width: 640px;
}
.dp-proyectos-hero-content h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    margin: 10px 0 6px;
    color: #fff;
}
.dp-proyectos-hero-tag { color: rgba(255,255,255,.85); font-size: 15px; margin: 0 0 20px; }
.dp-proyectos-hero-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    padding: 14px;
    backdrop-filter: blur(6px);
}
.dp-proyectos-hero-form input[type="text"] {
    flex: 1 1 160px;
    min-width: 140px;
    padding: 12px 14px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-family: var(--dp-font);
}
.dp-proyectos-hero-form button { flex: 0 0 auto; border: none; cursor: pointer; }
.dp-proyectos-hero-error {
    background: #fef2f2; color: #991b1b;
    padding: 8px 12px; border-radius: 8px;
    font-size: 12px; margin-top: 10px; max-width: 420px;
}
.dp-proyectos-hero-dots {
    position: absolute;
    z-index: 2;
    right: 24px; bottom: 24px;
    display: flex; gap: 8px;
}
.dp-proyectos-hero-dot {
    width: 10px; height: 10px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.6);
    background: rgba(255,255,255,.25);
    cursor: pointer; padding: 0;
}
.dp-proyectos-hero-dot.active { background: #fff; }
@media (max-width: 640px) {
    .dp-proyectos-hero { min-height: 620px; }
    .dp-proyectos-hero-content { padding: 32px 16px 48px; }
    .dp-proyectos-hero-form { flex-direction: column; }
    .dp-proyectos-hero-form input[type="text"], .dp-proyectos-hero-form button { width: 100%; }
}

/* ASISTENTE DE BUSQUEDA (widget flotante) */
.dp-asistente {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    font-family: var(--dp-font);
}
.dp-asistente-bubble {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 0;
    background: var(--dp-navy);
    color: #fff;
    box-shadow: 0 10px 30px rgba(11,26,46,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.dp-asistente-bubble:hover { transform: translateY(-2px); background: #16304f; }
.dp-asistente-icon-close { display: none; }
.dp-asistente.is-open .dp-asistente-icon-chat { display: none; }
.dp-asistente.is-open .dp-asistente-icon-close { display: block; }
.dp-asistente-panel {
    position: absolute;
    right: 0;
    bottom: 74px;
    width: 400px;
    max-width: calc(100vw - 40px);
    max-height: min(620px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--dp-shadow-lg);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.dp-asistente.is-open .dp-asistente-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.dp-asistente-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 16px 18px;
    background: var(--dp-navy);
    color: #fff;
    flex-shrink: 0;
}
.dp-asistente-header strong { display: block; font-size: 15px; }
.dp-asistente-header span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.6); }
.dp-asistente-cerrar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.dp-asistente-cerrar:hover { background: rgba(255,255,255,0.24); }
.dp-asistente-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--dp-gray-50);
}
.dp-asistente-msg {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.45;
}
.dp-asistente-msg--bot {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--dp-gray-200);
    color: var(--dp-navy);
    border-bottom-left-radius: 3px;
}
.dp-asistente-msg--user {
    align-self: flex-end;
    background: var(--dp-accent);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.dp-asistente-msg--error {
    align-self: flex-start;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.dp-asistente-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--dp-gray-200);
    border-radius: 12px;
}
.dp-asistente-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--dp-gray-300);
    animation: dpAsistenteTyping 1.1s infinite ease-in-out;
}
.dp-asistente-typing span:nth-child(2) { animation-delay: .15s; }
.dp-asistente-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dpAsistenteTyping {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
.dp-asistente-resultados {
    align-self: stretch;
    display: grid;
    gap: 8px;
}
.dp-asistente-propiedad {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--dp-gray-200);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.dp-asistente-propiedad:hover { border-color: var(--dp-accent); transform: translateY(-1px); }
.dp-asistente-propiedad img {
    width: 68px; height: 68px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--dp-gray-100);
}
.dp-asistente-propiedad-info strong {
    display: block;
    color: var(--dp-navy);
    font-size: 13.5px;
    line-height: 1.35;
}
.dp-asistente-propiedad-info span {
    display: block;
    margin-top: 3px;
    color: var(--dp-gray-500);
    font-size: 12.5px;
}
.dp-asistente-cta-lead {
    align-self: center;
    margin-top: 4px;
    min-height: 40px;
    border: 1px solid var(--dp-navy);
    border-radius: 999px;
    padding: 8px 18px;
    background: #fff;
    color: var(--dp-navy);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
}
.dp-asistente-cta-lead:hover { background: var(--dp-navy); color: #fff; }
.dp-asistente-lead-form {
    padding: 14px 16px;
    background: #fff;
    border-top: 1px solid var(--dp-gray-200);
    display: grid;
    gap: 8px;
}
.dp-asistente-lead-form p {
    margin: 0 0 2px;
    color: var(--dp-gray-500);
    font-size: 12px;
}
.dp-asistente-lead-form input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--dp-gray-200);
    border-radius: 8px;
    padding: 0 12px;
    font: inherit;
    font-size: 15px;
    box-sizing: border-box;
}
.dp-asistente-lead-form input:focus { outline: none; border-color: var(--dp-accent); }
.dp-asistente-lead-form button[type="submit"] {
    height: 46px;
    border: 0;
    border-radius: 8px;
    background: var(--dp-green);
    color: #fff;
    font-weight: 800;
    font-size: 14.5px;
    cursor: pointer;
}
.dp-asistente-lead-cancelar {
    border: 0;
    background: none;
    color: var(--dp-gray-500);
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
}
.dp-asistente-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-top: 1px solid var(--dp-gray-200);
    flex-shrink: 0;
}
.dp-asistente-input-row input {
    flex: 1;
    height: 46px;
    border: 1px solid var(--dp-gray-200);
    border-radius: 999px;
    padding: 0 16px;
    font: inherit;
    font-size: 15px;
}
.dp-asistente-input-row input:focus { outline: none; border-color: var(--dp-accent); }
.dp-asistente-enviar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@keyframes dpAsistenteListening {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.35); }
    50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}
.dp-asistente-enviar {
    background: var(--dp-navy);
    color: #fff;
}
/* En pantallas chicas el panel deja de ser una cajita flotante que "no cabe" y pasa a ser una
   pantalla completa (como cualquier app de chat): mas facil de leer, de tocar y de cerrar. */
@media (max-width: 640px) {
    .dp-asistente { right: 14px; bottom: 14px; }
    .dp-asistente-panel {
        position: fixed;
        inset: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        transform: translateY(100%);
        transition: transform .22s ease;
    }
    .dp-asistente.is-open .dp-asistente-panel {
        transform: translateY(0);
    }
    .dp-asistente-header { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
    .dp-asistente-cerrar { width: 38px; height: 38px; }
    .dp-asistente-body { padding: 18px; gap: 12px; }
    .dp-asistente-msg { font-size: 15px; max-width: 92%; }
    .dp-asistente-input-row { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
html.dp-asistente-lock,
html.dp-asistente-lock body {
    overflow: hidden;
    height: 100%;
}

/* BANNER PUBLICITARIO (propiedades y noticias) */
.dp-banner-ad {
    position: relative;
    max-width: 100%;
    margin: 32px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dp-banner-ad-label {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    background: rgba(11,26,46,0.72);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
}
.dp-banner-ad a { display: block; }
.dp-banner-ad img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}

/* BUSCADOR IA DEL HERO */
.dp-hero-ia-buscador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(620px, 100%);
    margin: 0 auto;
}
/* Un solo campo blanco sobre la fotografia. Sin degradados ni animacion: todo el
   movimiento del hero viene de la imagen, no del formulario. */
.dp-hero-ia-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 8px 8px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 22px 60px rgba(0,0,0,0.38);
}
.dp-hero-ia-spark {
    flex-shrink: 0;
    color: var(--dp-accent);
    opacity: .85;
}
.dp-hero-ia-form input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--dp-navy);
    font-size: 14.5px;
    font-family: var(--dp-font);
}
.dp-hero-ia-form input:focus { outline: none; }
.dp-hero-ia-form input::placeholder { color: var(--dp-gray-500); }
.dp-hero-ia-submit {
    flex-shrink: 0;
    height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 0 22px;
    background: var(--dp-navy);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease;
}
.dp-hero-ia-submit:hover { background: #16304f; }
@media (max-width: 640px) {
    .dp-hero-ia-form { flex-wrap: wrap; padding: 10px 14px; border-radius: 22px; }
    .dp-hero-ia-form input { width: 100%; order: 1; height: 40px; }
    .dp-hero-ia-spark { order: 0; }
    .dp-hero-ia-submit { order: 3; flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v13 — SISTEMA TIPOGRAFICO DEFINITIVO
   ---------------------------------------------------------------------------
   Dos familias, cuatro roles:

     1. HERO ............ Playfair Display italica, peso 400, cuerpo grande.
                          Es el UNICO titular del sitio en Playfair. Junto con
                          el logo, es todo el uso de la serif: por eso pesa.
     2. TITULOS ......... Lato mayuscula, peso 900, navy. Encabezan secciones.
     3. PROPIEDADES ..... Lato mayuscula, peso 900, navy. El nombre de un
                          apartamento se escribe igual en la grilla y en la
                          ficha; cambia el cuerpo, no el tratamiento.
     4. AGENTES ......... Lato mayuscula, peso 700, navy. Un punto por debajo:
                          la persona acompana a la propiedad, no la encabeza.

   Todo lo demas (texto, datos, etiquetas, navegacion, botones) va en Lato.
   Este es el ultimo bloque del archivo, asi que gana sobre las capas viejas
   (v8, v10, v11) sin tener que borrarlas una por una.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO — Playfair italica ─────────────────────────────────────────── */
.dp-hero h1,
.dp-owners-hero h1 {
    font-family: var(--dp-font-titulo);
    font-style: italic;
    /* 500 en vez de 400: sobre fotografia el trazo fino de Playfair se adelgaza aun mas
       y el velo se lo come. Es medio punto, lo justo para que tenga cuerpo sin perder
       el aire del titular. */
    font-weight: 500;
    font-size: clamp(32px, 5.2vw, 60px);
    line-height: 1.08;
    letter-spacing: 0.005em;
    text-transform: none;
    text-indent: 0;
    max-width: 15ch;
    margin: 0 auto;
    color: #fff;
    text-wrap: balance;
}
.dp-owners-hero h1 { max-width: 820px; margin: 0; }
@media (max-width: 640px) {
    .dp-hero h1 { font-size: clamp(28px, 8vw, 36px); max-width: 18ch; }
}

/* El logo y la firma del pie son el otro momento de serif del sitio. */
.dp-nav-logo,
.dp-footer-simple__brand {
    font-family: var(--dp-font-titulo);
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ── 2. TITULOS DE SECCION — Lato mayuscula negrilla navy ───────────────── */
.dp-section-title,
.dp-ficha-desc h2,
.dp-amenidades h3 {
    font-family: var(--dp-font);
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--dp-navy);
}
.dp-section-title {
    font-size: clamp(20px, 2.5vw, 31px);
    line-height: 1.32;
    letter-spacing: 0.07em;
}
/* "Criterio Inmobiliario en Bogota" cierra el sitio y es el eco del titular
   que lo abre: mismo tratamiento exacto que el hero -- Playfair italica,
   peso 400, mismo tracking. Solo baja de cuerpo porque vive en una columna,
   no a todo el ancho de la pagina. */
.dp-contacto-titulo {
    font-family: var(--dp-font-titulo);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: 0.005em;
    text-transform: none;
    color: #fff;
}
.dp-ficha-desc h2,
.dp-amenidades h3 {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.13em;
}
@media (max-width: 640px) {
    .dp-section-title { letter-spacing: 0.05em; line-height: 1.36; }
}

/* ── 3. NOMBRES DE PROPIEDAD — Lato mayuscula negrilla navy ─────────────── */
.dp-property-title,
.dp-ficha-title,
.dp-blog-card-title,
.dp-blog-card-title a {
    font-family: var(--dp-font);
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--dp-navy);
}
/* En la tarjeta se repite decenas de veces: cuerpo pequeno y tracking amplio
   para que la columna de nombres se lea pareja de arriba a abajo. */
.dp-property-title {
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin: 10px 0 4px;
}
/* En la ficha es el nombre principal: sube de cuerpo y se limita el ancho
   para que no forme un bloque macizo de mayusculas. */
.dp-ficha-title {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.44;
    letter-spacing: 0.09em;
    max-width: 24ch;
    margin: 0 0 10px;
}
.dp-blog-card-title {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
@media (max-width: 767px) {
    .dp-ficha-title { font-size: 16.5px; letter-spacing: 0.075em; }
    .dp-property-title { font-size: 12.5px; letter-spacing: 0.085em; }
}

/* ── 4. NOMBRES DE AGENTE — Lato mayuscula, un punto menos de peso ──────── */
.dp-agente-nombre,
.dp-agent-v2-name {
    font-family: var(--dp-font);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dp-navy);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.14em;
}

/* ── Antetitulos, etiquetas y datos ─────────────────────────────────────── */
.dp-section-tag,
.dp-ficha-type,
.dp-property-zone,
.dp-ficha-spec-label,
.dp-agente-role,
.dp-agent-v2-role,
.dp-contacto-tag,
.dp-contacto-dato-label,
.dp-contacto-field label,
.dp-ficha-detail-label {
    font-family: var(--dp-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}
.dp-section-tag { font-size: 10px; }
.dp-property-zone { font-size: 9.5px; }
.dp-agente-role, .dp-agent-v2-role { font-size: 9.5px; letter-spacing: 0.2em; }

/* Las cifras se alinean en columna: ancho de digito fijo en todo el sitio. */
.dp-property-price,
.dp-ficha-price,
.dp-ficha-spec-value,
.dp-ficha-detail-value,
.dp-spec-icon {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.dp-ficha-price { font-family: var(--dp-font); font-weight: 400; }
.dp-property-price { font-family: var(--dp-font); font-weight: 700; }

/* ── Navegacion y botones ───────────────────────────────────────────────── */
.dp-nav-links a {
    font-family: var(--dp-font);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.dp-btn,
.dp-property-btn,
.dp-hero-ia-submit,
.dp-owners-btn,
.dp-filter-btn,
.dp-tag-filter-btn {
    font-family: var(--dp-font);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.dp-hero-ia-submit { font-size: 10.5px; letter-spacing: 0.18em; }

/* ── Texto corrido: Lato Light con aire ─────────────────────────────────── */
.dp-hero-zonas { font-family: var(--dp-font); }
/* Lato 300 se ve lavado fuera de una pantalla retina: 400 mantiene el aire pero
   se lee sin esfuerzo. El aire lo pone el interlineado, no la delgadez del trazo. */
.dp-ficha-desc,
.dp-section-lead,
.dp-hero-sub {
    font-weight: 400;
    line-height: 1.78;
}
.dp-ficha-desc { max-width: 62ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   v13.1 — TARJETA: UBICACION E ICONOS
   La ficha rapida de cada propiedad: ciudad y barrio con chincheta arriba,
   y abajo area / habitaciones / banos / parqueaderos con iconos de linea.
   Los iconos son SVG en linea que heredan el color: nada de fuentes de iconos
   ni PNG que se vean borrosos en pantalla retina.
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-property-zone {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--dp-gray-500);
}
.dp-property-zone svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    opacity: .75;
    /* la chincheta no lleva el tracking de la mayuscula que va al lado */
    margin-right: 1px;
}

.dp-property-specs--icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--dp-gray-200);
}
.dp-spec-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-family: var(--dp-font);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--dp-gray-500);
    font-variant-numeric: tabular-nums;
}
.dp-spec-icon svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: var(--dp-navy);
    opacity: .55;
}
.dp-spec-icon strong {
    font-weight: 700;
    color: var(--dp-navy);
}

/* Texto solo para lectores de pantalla: "3" sin mas no dice si son banos o
   habitaciones, asi que la etiqueta viaja escondida junto a cada cifra. */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* iPhone: la fila de cuatro iconos no cabe en una linea de 320-390 px, asi que
   se reparte en dos columnas iguales en vez de romperse de forma despareja. */
@media (max-width: 420px) {
    .dp-property-specs--icons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px 10px;
    }
    .dp-spec-icon { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v13.2 — LOGO, ISOTIPO Y FOTOS DEL HERO
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Logo de la barra: se adapta al PNG que suba el cliente ──
   Se limita por ALTO, no por ancho, para que un logo horizontal y uno cuadrado
   ocupen el mismo espacio optico dentro de la barra de 64 px. */
.dp-nav-logo img,
.dp-nav-logo .custom-logo {
    height: 42px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: block;
}
@media (max-width: 640px) {
    .dp-nav-logo img,
    .dp-nav-logo .custom-logo { height: 32px; max-width: 180px; }
}

/* Logo del pie: mismo criterio, un punto mas grande porque tiene aire alrededor. */
.dp-footer-logo img {
    height: 40px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    margin: 0 auto 14px;
}
@media (max-width: 640px) {
    .dp-footer-logo img { height: 32px; }
}

/* ── Isotipo, arriba a la derecha ── */
.dp-nav-isotipo {
    width: auto;
    margin-left: 26px;
    opacity: .92;
    object-fit: contain;
    flex-shrink: 0;
}
/* En movil desaparece: la barra ya tiene logo y menu, y el tercer elemento la
   aprieta justo donde menos espacio hay. */
@media (max-width: 940px) {
    .dp-nav-isotipo { display: none; }
}

/* ── Fotos del hero apiladas ──
   Todas ocupan la misma capa; solo cambia la opacidad. El cruce de 1,2 s es lento
   a proposito: una transicion rapida entre fotos de arquitectura se siente como
   carrusel de portal, no como una firma. */
.dp-hero-fotos {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.dp-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 1200ms ease-in-out;
}
.dp-hero-photo.is-visible { opacity: 1; }

/* Sin JavaScript (o con el bloqueado) al menos la primera foto se ve. */
.no-js .dp-hero-photo:first-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .dp-hero-photo { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v13.3 — FICHA DE PROPIEDAD
   Fuera las ocho cajas de color con numeros de 26 px en peso 800: leian como
   panel de control y repetian datos que ya estaban en la tabla de abajo.
   Ahora hay UNA tabla de filetes y una sola escala de titulos de seccion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Antetitulo de cada bloque de la ficha. Mismo tratamiento en todos: filete
   arriba, Lato mayuscula negrilla navy. Sustituye los style="font-size:22px"
   sueltos que habia escritos a mano bloque por bloque. */
.dp-ficha-sec-label {
    display: block;
    font-family: var(--dp-font);
    font-weight: 900;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dp-navy);
    margin: 46px 0 0;
    padding-top: 30px;
    border-top: 1px solid var(--dp-gray-200);
}

/* La narrativa manda: va primero y con ancho de lectura, no de contenedor. */
.dp-ficha-desc {
    margin: 34px 0 0;
    max-width: 62ch;
}
.dp-ficha-desc p {
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--dp-gray-700);
    margin: 0 0 18px;
}
.dp-ficha-desc p:last-child { margin-bottom: 0; }

/* Tabla de especificaciones: etiqueta a la izquierda, valor a la derecha con
   ancho de digito fijo para que la columna quede alineada de arriba a abajo. */
.dp-ficha-tabla {
    margin: 20px 0 0;
    max-width: 620px;
}
.dp-spec-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--dp-gray-100);
}
.dp-spec-fila:last-child { border-bottom: 0; }
.dp-spec-fila dt {
    font-family: var(--dp-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dp-gray-500);
    margin: 0;
}
.dp-spec-fila dd {
    margin: 0;
    font-size: 15.5px;
    font-weight: 400;
    text-align: right;
    color: var(--dp-navy);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Amenidades: etiquetas de un solo filete, sin relleno ni color. */
.dp-amenidades-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 20px;
}
.dp-amenidad-item {
    display: inline-block;
    font-size: 13.5px;
    color: var(--dp-gray-700);
    border: 1px solid var(--dp-gray-200);
    padding: 7px 14px;
    background: none;
    border-radius: 0;
}

/* En la ficha impresa la tabla se mantiene entera y sin colores de fondo. */
@media print {
    .dp-ficha-sec-label { margin-top: 24px; padding-top: 14px; font-size: 11px; }
    .dp-ficha-tabla { max-width: none; }
    .dp-spec-fila { padding: 7px 0; break-inside: avoid; page-break-inside: avoid; }
    .dp-spec-fila dt { font-size: 9px; }
    .dp-spec-fila dd { font-size: 12px; }
    .dp-amenidad-item { font-size: 11px; padding: 4px 9px; }
    .dp-ficha-desc p { font-size: 12px; line-height: 1.6; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v13.4 — DISTINTIVO DE CIUDAD EN EL CRM
   Bogota y Medellin son dos operaciones separadas. Este sello va arriba de la
   barra lateral para que nadie dude de que informacion esta mirando.
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-crm-ciudad {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.34);
    font-family: var(--dp-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
}
/* La direccion general ve las dos: se marca distinto para que se note que es
   una vista combinada y no la de una ciudad concreta. */
.dp-crm-ciudad--todas {
    border-style: dashed;
    color: rgba(255,255,255,0.66);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v13.5 — NORMALIZACION DEL SITIO PUBLICO
   ---------------------------------------------------------------------------
   Las paginas interiores (propietarios, vendedores, compradores, arrendadores,
   arrendatarios, proyectos, referidos) se construyeron antes del sistema actual
   y arrastran esquinas redondeadas, sombras y cian corporativo.
   En vez de editar doce archivos a mano -- que es frajil y se vuelve a
   desincronizar -- se normalizan aqui por familia de componente. Una sola capa,
   un solo lugar donde revisar si algo se ve raro.

   OJO: esta capa NO toca el CRM. El panel interno usa tarjetas redondeadas y
   color a proposito: es una herramienta de trabajo, no una pieza de marca.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Forma: esquinas rectas en todo lo que es marca ── */
.dp-owners-field input,
.dp-owners-field select,
.dp-owners-field textarea,
.dp-owners-pill-grid span,
.dp-owners-form-card,
.dp-owners-method-list li,
.dp-owners-sold-img,
.dp-lead-fast__row input,
.dp-lead-fast__row select,
.dp-lead-fast__row textarea,
.dp-req-grid > div,
.dp-py-card,
.dp-py-amenidad,
.dp-referidos-card,
.dp-blog-card,
.dp-blog-card-img,
.dp-agente-card,
.dp-agente-foto,
.dp-agent-v2-photo,
.dp-property-card,
.dp-property-img,
.dp-gallery-grid img,
.dp-ficha-map,
.dp-banner-ad,
.dp-banner-ad img,
.dp-amenidad-item,
.dp-barrio-grid span {
    border-radius: 0;
}

/* ── Sin sombras: la profundidad la da el espacio, no el desenfoque ── */
.dp-property-card,
.dp-blog-card,
.dp-agente-card,
.dp-owners-form-card,
.dp-referidos-card,
.dp-py-card,
.dp-req-grid > div {
    box-shadow: none;
}
.dp-property-card:hover,
.dp-blog-card:hover,
.dp-agente-card:hover {
    box-shadow: none;
    transform: none;
}

/* ── Color: el cian sale de los elementos de marca ──
   Se conserva solo en el icono del buscador del hero, que es el unico lugar
   donde funciona como acento puntual sobre blanco. */
.dp-section-tag,
.dp-ficha-type,
.dp-property-zone,
.dp-owners-eyebrow,
.dp-py-eyebrow,
.dp-referidos-eyebrow,
.dp-blog-card-meta {
    color: var(--dp-gray-500);
}
.dp-blog-card-title a:hover,
.dp-property-card a:hover .dp-property-title {
    color: var(--dp-navy);
}
.dp-badge-venta {
    background: var(--dp-navy);
    color: #fff;
}
/* El ambar de Tailwind sale: en una marca navy no tiene sitio. */
.dp-badge-arriendo,
.dp-property-badge-destacado {
    background: var(--dp-navy);
    color: #fff;
}
.dp-property-badge,
.dp-property-badge-coleccion,
.dp-property-badge-destacado,
.dp-property-badge-terraza,
.dp-property-badge-balcon {
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: var(--dp-font);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ── UNA sola etiqueta sobre la foto ──
   Una tarjeta podia mostrar Coleccion + Destacado + Terraza + Balcon a la vez:
   cuatro etiquetas tapando la arquitectura, que es el activo. Se conserva la
   primera segun jerarquia y las demas bajan a las especificaciones, donde de
   verdad se comparan. Se hace en CSS para no tocar cinco plantillas.  */
.dp-property-badges-extra > * { display: none; }
.dp-property-badges-extra > .dp-property-badge-coleccion:first-child,
.dp-property-badges-extra > .dp-property-badge-destacado:first-child,
.dp-property-badges-extra > .dp-property-badge-terraza:first-child,
.dp-property-badges-extra > .dp-property-badge-balcon:first-child { display: inline-block; }
.dp-property-badges-extra {
    right: auto;
    left: 16px;
    bottom: 14px;
}

/* ── Los botones de las paginas interiores entran al sistema ── */
.dp-owners-btn,
.dp-py-btn,
.dp-referidos-btn,
.dp-lead-fast__submit {
    border-radius: 0;
    font-family: var(--dp-font);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: none;
}

/* ── Formularios de las paginas interiores: casillas blancas de un hilo ── */
.dp-owners-field input,
.dp-owners-field select,
.dp-owners-field textarea,
.dp-lead-fast__row input,
.dp-lead-fast__row select,
.dp-lead-fast__row textarea {
    background: #fff;
    border: 1px solid var(--dp-gray-200);
    box-shadow: none;
}
.dp-owners-field input:focus,
.dp-owners-field select:focus,
.dp-owners-field textarea:focus,
.dp-lead-fast__row input:focus,
.dp-lead-fast__row select:focus,
.dp-lead-fast__row textarea:focus {
    border-color: var(--dp-navy);
    outline: 2px solid rgba(11,26,46,.12);
    outline-offset: 0;
}

/* ── Los titulos con tamano escrito a mano en el HTML no se pueden ganar
   desde CSS sin !important. Se usa solo aqui, y solo para los titulos: es la
   unica forma de unificar sin reescribir doce plantillas. ── */
.dp-section .dp-container > h2[style],
.dp-owners-section h2[style],
.dp-py-section h2[style] {
    font-family: var(--dp-font) !important;
    font-weight: 900 !important;
    font-size: clamp(20px, 2.5vw, 31px) !important;
    line-height: 1.32 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--dp-navy) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v14 — LOS VALORES EXACTOS DE LAS VISTAS PREVIAS APROBADAS
   ---------------------------------------------------------------------------
   Esta capa lleva al tema, valor por valor, lo que se aprobo en las tres
   maquetas: portada, ficha y tarjeta. Va al final del archivo, asi que gana
   sobre todo lo anterior. Si algo se ve distinto a la maqueta, la diferencia
   esta aqui o no esta en ninguna parte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── NAVEGACION ─────────────────────────────────────────────────────────── */
.dp-nav {
    gap: 36px;
    padding: 0 40px;
    height: 68px;
    box-shadow: none;
}
.dp-nav-links { gap: 30px; }
.dp-nav-links a {
    font-weight: 600;
    color: rgba(255,255,255,0.72);
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.dp-nav-links a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.dp-nav-login {
    color: rgba(255,255,255,0.5) !important;
    border-left: 1px solid rgba(255,255,255,0.18);
    padding-left: 30px !important;
}
@media (max-width: 940px) { .dp-nav { padding: 0 20px; } }

/* La barra es fija: el contenido necesita el mismo hueco que su alto. */
body { padding-top: 68px; }
.dp-hero, .dp-hero--photo { margin-top: -68px; }
.dp-hero-content { padding-top: 68px; }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.dp-hero {
    min-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 110px 24px 90px;
}
.dp-hero--photo { min-height: 82vh; padding: 110px 24px 90px; }
@media (max-width: 640px) {
    .dp-hero, .dp-hero--photo { min-height: 74vh; padding: 90px 18px 64px; }
}
.dp-hero-overlay { background: #000; }

/* Buscador: el unico elemento redondeado del sistema, a proposito. */
.dp-hero-ia-form {
    gap: 10px;
    padding: 8px 8px 8px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 22px 60px rgba(0,0,0,0.38);
}
.dp-hero-ia-form input { height: 44px; font-size: 14.5px; }
.dp-hero-ia-form input::placeholder { color: #78818E; }
.dp-hero-ia-submit {
    height: 44px;
    border-radius: 999px;
    padding: 0 26px;
    background: var(--dp-navy);
    font-size: 10.5px;
    letter-spacing: 0.18em;
}
.dp-hero-ia-submit:hover { background: var(--dp-navy); opacity: .86; }
@media (max-width: 640px) {
    .dp-hero-ia-form { flex-wrap: wrap; border-radius: 20px; padding: 12px; }
    .dp-hero-ia-form input { width: 100%; order: 1; }
    .dp-hero-ia-spark { order: 0; }
    .dp-hero-ia-submit { order: 2; width: 100%; }
}

/* ── FILTROS: subrayado, no pildoras ────────────────────────────────────── */
.dp-category-filters {
    border-bottom: 1px solid var(--dp-gray-200);
    background: var(--dp-white);
    padding: 0;
}
.dp-search-filters {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    padding: 22px 0;
    justify-content: flex-start;
}
.dp-category-filters .dp-filter-btn,
.dp-category-filters .dp-tag-filter-btn,
.dp-filter-btn,
.dp-tag-filter-btn {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    font-family: var(--dp-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dp-ink-faint) !important;
    border-bottom: 1px solid transparent !important;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.dp-filter-btn:hover, .dp-tag-filter-btn:hover { color: var(--dp-navy) !important; }
.dp-filter-btn.active, .dp-tag-filter-btn.active {
    color: var(--dp-navy) !important;
    border-bottom-color: var(--dp-navy) !important;
}
.dp-tag-filter-sep { width: 1px; height: 15px; background: var(--dp-rule); display: inline-block; }

/* ── SECCIONES ──────────────────────────────────────────────────────────── */
.dp-section { padding: 88px 0; }
@media (max-width: 860px) { .dp-section { padding: 62px 0; } }
.dp-container { max-width: 1240px; padding: 0 40px; }
@media (max-width: 860px) { .dp-container { padding: 0 22px; } }

/* En la maqueta el encabezado de seccion va alineado a la izquierda, no centrado:
   el texto centrado obliga al ojo a buscar el inicio de cada linea. */
.dp-section-tag, .dp-section-title, .dp-section-lead { text-align: left; }
.dp-section-title { max-width: 60ch; }
.dp-section-lead { max-width: 54ch; margin-left: 0; margin-right: 0; }
.dp-section-tag { margin-bottom: 0; }
.dp-premium-section .dp-section-lead,
.dp-agentes-section .dp-section-lead { margin-bottom: 48px; }

/* ── TARJETA (anatomia del preview) ─────────────────────────────────────── */
.dp-properties-grid {
    display: grid;
    /* auto-fill, no auto-fit: ver la capa v14.4 al final del archivo. */
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 48px 30px;
}
@media (max-width: 620px) { .dp-properties-grid { grid-template-columns: 1fr; gap: 40px; } }

.dp-card {
    display: block;
    position: relative;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
}
.dp-card:hover { transform: none; box-shadow: none; }

.dp-card-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--dp-navy);
}
.dp-card-photo {
    position: absolute;
    inset: 0;
    transition: transform 900ms cubic-bezier(.16,.68,.3,1);
}
.dp-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-card-photo--vacia { background: var(--dp-navy); }
.dp-card:hover .dp-card-photo { transform: scale(1.035); }

.dp-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,26,46,0.55) 0%, rgba(11,26,46,0) 42%);
    pointer-events: none;
}
.dp-card-mark {
    position: absolute;
    left: 16px;
    bottom: 14px;
    font-family: var(--dp-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    background: none;
    padding: 0;
    border-radius: 0;
}
/* Codigo de referencia (DP-N): contrapeso discreto de la etiqueta VENTA. */
.dp-card-code {
    position: absolute;
    right: 16px;
    bottom: 14px;
    font-family: var(--dp-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.72);
}
.dp-card-pick {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11,26,46,0.34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    opacity: 0;
    transition: opacity .25s ease;
    padding: 0;
    font-size: 0;
}
.dp-card:hover .dp-card-pick,
.dp-card-pick:focus-visible { opacity: 1; }
.dp-card-pick.active { background: #fff; color: var(--dp-navy); opacity: 1; }
/* En pantalla tactil no hay "pasar el mouse": el boton se queda visible. */
@media (hover: none) { .dp-card-pick { opacity: .9; } }

.dp-card-body { padding: 16px 2px 0; }
.dp-card-zone {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-family: var(--dp-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dp-gray-500);
}
.dp-card-zone svg { flex-shrink: 0; width: 12px; height: 12px; opacity: .75; }
.dp-card-title {
    font-family: var(--dp-font);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin: 10px 0 0;
    color: var(--dp-navy);
    /* Tope de 2 lineas en la tarjeta: el titulo completo queda en la ficha. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dp-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}
.dp-card-price {
    font-family: var(--dp-font);
    font-size: 17px;
    font-weight: 700;
    color: var(--dp-navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Vendida: la foto en gris. La operacion cerrada se muestra como prueba de
   gestion, no como oferta, y el gris lo dice sin una sola palabra. */
.dp-card--vendida .dp-card-photo { filter: grayscale(1); opacity: .78; }

.dp-grid-vacia {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--dp-gray-500);
    padding: 60px 0;
}

/* ── BOTON "VER TODAS" ──────────────────────────────────────────────────── */
.dp-premium-section .dp-btn,
.dp-btn-outline-navy {
    display: inline-block;
    padding: 16px 40px !important;
    border: 1px solid var(--dp-navy) !important;
    background: transparent !important;
    color: var(--dp-navy) !important;
    border-radius: 0 !important;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    transition: background .2s ease, color .2s ease;
}
.dp-premium-section .dp-btn:hover,
.dp-btn-outline-navy:hover {
    background: var(--dp-navy) !important;
    color: #fff !important;
}

/* ── AGENTES ────────────────────────────────────────────────────────────── */
.dp-agentes-grid {
    display: grid;
    /* auto-fill, no auto-fit: ver la capa v14.4 al final del archivo. */
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 34px;
}
.dp-agente-card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    text-align: left;
}
.dp-agente-foto-wrap { margin: 0; }
.dp-agente-foto {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    border: 0;
}
.dp-agente-nombre { margin-top: 16px; text-align: left; }
.dp-agente-role { margin-top: 5px; text-align: left; }
.dp-agente-links { justify-content: flex-start; }

/* ── CONTACTO ───────────────────────────────────────────────────────────── */
.dp-contacto-section { padding: 92px 0; }
.dp-contacto-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}
@media (max-width: 860px) {
    .dp-contacto-wrap { grid-template-columns: 1fr; gap: 48px; padding: 0 22px; }
}
.dp-contacto-form-wrap { background: none; padding: 0; border: 0; border-radius: 0; }
.dp-contacto-field input,
.dp-contacto-field select,
.dp-contacto-field textarea {
    padding: 13px 15px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 0;
    font-family: var(--dp-font);
    font-size: 14.5px;
}
.dp-contacto-field input::placeholder,
.dp-contacto-field textarea::placeholder { color: rgba(255,255,255,0.42); }
.dp-contacto-field input:focus,
.dp-contacto-field select:focus,
.dp-contacto-field textarea:focus {
    outline: none;
    border-color: rgba(255,255,255,0.7);
}
.dp-contacto-field select option { background: var(--dp-navy); color: #fff; }
.dp-contacto-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 620px) { .dp-contacto-row { grid-template-columns: 1fr; } }
.dp-contacto-form button[type="submit"],
.dp-contacto-form .dp-btn {
    width: 100%;
    margin-top: 8px;
    padding: 17px;
    background: #fff;
    color: var(--dp-navy);
    border: 0;
    border-radius: 0;
    font-family: var(--dp-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
}
.dp-contacto-form button[type="submit"]:hover { opacity: .88; }

/* ── PIE ────────────────────────────────────────────────────────────────── */
.dp-footer { background: #060E19; padding: 40px 0; }

/* ── FICHA: galeria del preview ─────────────────────────────────────────── */
.dp-galeria { background: var(--dp-navy); }
/* Alto por viewport, no aspect-ratio: combinar proporcion con max-height hace que
   el navegador encoja el ANCHO para respetarla, y la foto deja de ocupar pantalla.
   Aqui manda el alto y la imagen recorta a lo ancho. */
.dp-galeria-principal {
    position: relative;
    width: 100%;
    height: clamp(300px, 64vh, 760px);
    overflow: hidden;
    background: var(--dp-navy);
}
@media (max-width: 640px) { .dp-galeria-principal { height: clamp(260px, 46vh, 420px); } }
.dp-galeria-foto {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 500ms ease;
}
.dp-galeria-foto.is-activa { opacity: 1; }
.dp-galeria-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dp-galeria-contador {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    background: rgba(11,26,46,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: 7px 13px;
    font-family: var(--dp-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
}
.dp-galeria-hint {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(11,26,46,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    padding: 7px 13px;
    font-family: var(--dp-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 300ms ease;
}
.dp-galeria-hint svg { flex: none; opacity: 0.85; }
.dp-galeria-hint.is-oculto { opacity: 0; }
@media (max-width: 640px) { .dp-galeria-hint { left: 14px; bottom: 14px; } }
.dp-galeria-descargar {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #fff;
    background: rgba(11,26,46,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.22);
    transition: background 180ms ease;
}
.dp-galeria-descargar:hover { background: rgba(11,26,46,0.92); }
@media (max-width: 640px) { .dp-galeria-descargar { right: 14px; top: 14px; } }
.dp-galeria-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    background: rgba(11,26,46,0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.dp-galeria-flecha:hover { background: rgba(11,26,46,0.8); }
.dp-galeria-flecha.prev { left: 0; }
.dp-galeria-flecha.next { right: 0; }

.dp-galeria-tira {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    background: var(--dp-navy);
    padding: 2px 0;
    scrollbar-width: none;
}
.dp-galeria-tira::-webkit-scrollbar { display: none; }
.dp-galeria-tira button {
    flex: 0 0 auto;
    width: 132px;
    aspect-ratio: 3 / 2;
    border: 0;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    background: none;
    opacity: .48;
    transition: opacity .25s ease;
    overflow: hidden;
}
.dp-galeria-tira button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-galeria-tira button:hover { opacity: .8; }
.dp-galeria-tira button[aria-current="true"] { opacity: 1; }
@media (max-width: 640px) {
    .dp-galeria-tira button { width: 96px; }
    /* En movil se pasa con el dedo: las flechas tapan foto y no aportan. */
    .dp-galeria-flecha { display: none; }
}

/* ── FICHA: cuerpo ──────────────────────────────────────────────────────── */
.dp-ficha { padding-top: 0; padding-bottom: 0; }
.dp-ficha-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 46px 28px 60px;
    background: var(--dp-white);
}
@media (min-width: 900px) { .dp-ficha-content { padding: 46px 56px 60px; } }
.dp-ficha-header-block { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
.dp-ficha-price {
    font-size: 25px;
    margin: 22px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--dp-gray-200);
}
.dp-ficha-admin {
    display: block;
    font-family: var(--dp-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dp-gray-500);
    margin-top: 8px;
}

/* ── FICHA: cierre con el agente ────────────────────────────────────────── */
.dp-cierre { background: var(--dp-navy); color: #fff; margin-top: 60px; }
.dp-cierre-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 56px 28px 60px;
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 40px;
    align-items: start;
}
@media (min-width: 900px) { .dp-cierre-inner { padding: 60px 56px 64px; } }
@media (max-width: 700px) { .dp-cierre-inner { grid-template-columns: 1fr; gap: 28px; } }
.dp-cierre-foto {
    aspect-ratio: 4 / 5;
    background: #22364C;
    position: relative;
    overflow: hidden;
}
.dp-cierre-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .dp-cierre-foto { max-width: 168px; } }
.dp-cierre-inicial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dp-font-titulo);
    font-style: italic;
    font-size: 48px;
    color: rgba(255,255,255,0.6);
}
.dp-cierre-eyebrow {
    font-family: var(--dp-font);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
.dp-cierre-nombre {
    font-family: var(--dp-font);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.14em;
    margin: 14px 0 0;
    color: #fff;
}
.dp-cierre-cargo {
    font-family: var(--dp-font);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
    margin: 6px 0 0;
}
.dp-cierre-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.dp-cierre-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 26px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: var(--dp-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dp-cierre-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.dp-cierre-btn--solido { background: #fff; color: var(--dp-navy); border-color: #fff; }
.dp-cierre-btn--solido:hover { background: rgba(255,255,255,0.88); color: var(--dp-navy); }
.dp-cierre-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* La barra fija de "Agenda visita" ya no hace falta: la accion vive en el cierre,
   que es donde la persona llega despues de leer. Una barra pegada abajo tapando
   contenido es lenguaje de aplicacion, no de firma. */
.dp-ficha > div[style*="position:fixed"][style*="bottom:0"] { display: none; }

@media print {
    .dp-cierre { display: none; }
    .dp-galeria-flecha, .dp-galeria-contador, .dp-galeria-tira, .dp-galeria-hint, .dp-galeria-descargar { display: none; }
    .dp-galeria-principal { height: 260px; }
}

/* ── PUBLICAR UNA PROPIEDAD (propietarios / vendedores) ─────────────────────
   Misma anatomia que la ficha: banda navy arriba con el titular, cuerpo blanco
   de 820 px, y el formulario con casillas de un solo hilo. Antes esta pagina
   tenia su propio mundo visual -- degradados, tarjetas con sombra y botones
   redondeados -- y era justo la pagina donde un propietario decide si confiarle
   su apartamento a la firma. ── */
.dp-owners-hero {
    background: var(--dp-navy);
    min-height: auto;
    padding: 120px 28px 88px;
    text-align: left;
}
.dp-owners-hero .dp-container,
.dp-owners-hero > div { max-width: 1240px; margin: 0 auto; padding: 0; }
.dp-owners-hero p { color: rgba(255,255,255,0.78); font-weight: 400; }

.dp-owners-section { padding: 88px 0; }
.dp-owners-section .dp-container { max-width: 1240px; padding: 0 40px; }
@media (max-width: 860px) {
    .dp-owners-section { padding: 62px 0; }
    .dp-owners-section .dp-container { padding: 0 22px; }
    .dp-owners-hero { padding: 100px 22px 64px; }
}

/* Las tres promesas: retícula de filetes, como los barrios de la portada. */
.dp-owners-pill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--dp-gray-200);
    border: 1px solid var(--dp-gray-200);
}
.dp-owners-pill-grid span {
    background: var(--dp-white);
    padding: 26px 20px;
    text-align: center;
    font-family: var(--dp-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dp-gray-700);
    border: 0;
    border-radius: 0;
    min-height: 0;
}

/* El formulario: mismo tratamiento que el de contacto, sobre blanco. */
.dp-owners-form-card {
    background: var(--dp-white);
    border: 1px solid var(--dp-gray-200);
    border-radius: 0;
    box-shadow: none;
    padding: 40px;
    max-width: 820px;
    margin: 0 auto;
}
@media (max-width: 640px) { .dp-owners-form-card { padding: 26px 20px; } }
.dp-owners-field { margin-bottom: 20px; }
.dp-owners-field label {
    display: block;
    font-family: var(--dp-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dp-gray-500);
    margin-bottom: 9px;
}
.dp-owners-field input,
.dp-owners-field select,
.dp-owners-field textarea {
    width: 100%;
    padding: 13px 15px;
    background: #fff;
    color: var(--dp-navy);
    border: 1px solid var(--dp-gray-200);
    border-radius: 0;
    font-family: var(--dp-font);
    font-size: 14.5px;
    box-shadow: none;
}
.dp-owners-field input:focus,
.dp-owners-field select:focus,
.dp-owners-field textarea:focus {
    border-color: var(--dp-navy);
    outline: 2px solid rgba(11,26,46,.12);
    outline-offset: 0;
}
.dp-owners-btn,
.dp-owners-form-card button[type="submit"] {
    width: 100%;
    padding: 17px !important;
    background: var(--dp-navy) !important;
    color: #fff !important;
    border: 1px solid var(--dp-navy) !important;
    border-radius: 0 !important;
    font-family: var(--dp-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: opacity .2s ease;
}
.dp-owners-btn:hover { opacity: .88; }
/* El de la banda navy va invertido, para que se lea sobre azul. */
.dp-owners-hero .dp-owners-btn {
    width: auto;
    background: #fff !important;
    color: var(--dp-navy) !important;
    border-color: #fff !important;
    padding: 16px 40px !important;
}

/* Las propiedades vendidas como prueba: mismo tratamiento que la grilla. */
.dp-owners-sold-grid--photos { gap: 30px; }
.dp-owners-sold-img { border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; min-height: 0; }
.dp-owners-method-list li { border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   v14.1 — TINTA, GRISES Y LOS ULTIMOS SIETE PUNTOS DE LA MAQUETA
   ---------------------------------------------------------------------------
   La v14 trajo las medidas. Esta capa trae el COLOR, que es donde quedaba la
   diferencia real al comparar el tema contra la maqueta pixel por pixel:

     tinta ......... la maqueta escribe en navy (#0B1A2E), no en gris casi negro
                     (#111827). Toda la pagina esta escrita en el color de la
                     marca; el gris neutro la enfriaba sin que se notara por que.
     dos grises .... la maqueta separa gris de texto (#4A5765) y gris de
                     etiqueta (#8A93A0). El tema los tenia colapsados en uno
                     solo (#6B7280), asi que un dato y una etiqueta pesaban
                     igual. Ahora la jerarquia se ve.
     filete ........ #E3E7EC en vez de #E5E7EB. Un punto mas frio, para que la
                     linea no se vea beige al lado del navy.

   Los tokens nuevos NO reemplazan a --dp-gray-*: esos siguen sirviendo al CRM
   y a las paginas heredadas. Se agregan al lado y solo los componentes
   editoriales apuntan a ellos.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --dp-ink: #0B1A2E;        /* texto: el navy de la marca */
    --dp-ink-soft: #4A5765;   /* parrafos, datos, especificaciones */
    --dp-ink-faint: #8A93A0;  /* etiquetas, ubicacion, cargos, filtros apagados */
    --dp-rule: #E3E7EC;       /* filete de 1 px */
    --dp-paper: #FAFBFC;      /* fondo de pagina */
}

body {
    color: var(--dp-ink);
    line-height: 1.65;
    background: var(--dp-paper);
}
/* El CRM es herramienta, no vitrina: conserva exactamente la tinta que tenia.
   Si se le cambia el color de fondo al sistema de trabajo diario sin pedirlo,
   la gente cree que se rompio algo. */
.dp-crm-page, .dp-crm-login-page { color: var(--dp-gray-900); line-height: 1.6; }

/* ── Secciones: blancas, como en la maqueta ─────────────────────────────── */
.dp-premium-section,
.dp-agentes-section,
.dp-premium-news { background: var(--dp-white); }

/* ── Encabezado de seccion ──────────────────────────────────────────────── */
.dp-section-tag {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--dp-ink-faint);
    line-height: 1.65;
}
.dp-section-title { margin: 14px 0 0; }
.dp-section-lead {
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--dp-ink-soft);
    margin-top: 14px;
    max-width: 54ch;
}
.dp-premium-section .dp-section-lead,
.dp-agentes-section .dp-section-lead,
.dp-premium-news .dp-section-lead { margin-bottom: 48px; }

/* ── Filtros ────────────────────────────────────────────────────────────── */
.dp-filter-btn,
.dp-tag-filter-btn { color: var(--dp-ink-faint) !important; line-height: 1.65; }
.dp-filter-btn.active,
.dp-tag-filter-btn.active,
.dp-filter-btn:hover,
.dp-tag-filter-btn:hover { color: var(--dp-ink) !important; }
.dp-tag-filter-sep { background: var(--dp-rule); }

/* ── Tarjeta ────────────────────────────────────────────────────────────── */
.dp-card-zone { color: var(--dp-ink-faint); }
.dp-card-title { color: var(--dp-ink); }
.dp-card-price { color: var(--dp-ink); }
.dp-spec-icon { color: var(--dp-ink-soft); }
.dp-spec-icon strong { color: var(--dp-ink); }
.dp-spec-icon svg { color: var(--dp-ink); }
.dp-property-specs--icons { border-top-color: var(--dp-rule); }
/* El "+" era texto y necesitaba peso; ahora es un SVG y el peso no hace nada. */
.dp-card-pick { font-weight: 400; }

/* La excepcion de 620 px sobraba -- a ese ancho la rejilla ya devuelve una sola
   columna -- y ademas apretaba el aire vertical de 48 a 40. */
@media (max-width: 620px) {
    .dp-properties-grid { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 48px 30px; }
}

/* ── Agentes ────────────────────────────────────────────────────────────── */
/* El tope de 1100 px venia de la version anterior, cuando las fichas de agente
   eran cajas grises centradas. Ahora la fila de agentes es del mismo ancho que
   la rejilla de propiedades: las dos empiezan y terminan en la misma vertical. */
.dp-agentes-grid { max-width: none; margin: 0; }
.dp-agente-nombre { color: var(--dp-ink); }
.dp-agente-role { color: var(--dp-ink-faint); font-weight: 600; }

/* ── Agentes: la foto llena la columna ──────────────────────────────────── */
/* Venia con caja fija de 280x350 y esquina redonda de 16 px: un retrato del
   tamano de un carnet, centrado, sin relacion con el ancho de su columna. En la
   maqueta el retrato ocupa TODA la columna en proporcion 4:5, igual que la
   fotografia de una propiedad ocupa toda la suya. Es la misma regla aplicada a
   personas y a arquitectura: la imagen manda, el marco desaparece. */
.dp-agente-foto-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--dp-navy);
}
.dp-agente-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dp-agente-role { margin-bottom: 0; }
@media (max-width: 620px) {
    .dp-agente-foto-wrap { width: 100%; height: auto; }
    .dp-agentes-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 34px; max-width: none; }
    .dp-agente-card { padding: 0; }
}

/* La fila de especificaciones respira con el interlineado del cuerpo. */
.dp-spec-icon { line-height: 1.65; }

/* ── Fila de filtros: alineada a la izquierda ───────────────────────────── */
/* La v14 puso justify-content:flex-start en .dp-search-filters, pero una regla
   mas antigua y mas especifica (.dp-category-filters .dp-search-filters) seguia
   centrandola. Se corrige con la misma especificidad, no con !important: el
   filtro tiene que arrancar en la misma vertical que el titulo de la seccion y
   que el borde izquierdo de la primera tarjeta. Tres elementos, una sola linea. */
.dp-category-filters .dp-search-filters { justify-content: flex-start; }

/* ── Antetitulo de seccion ──────────────────────────────────────────────── */
/* En la maqueta que se aprobo, "SELECCION" se ve en cuerpo 16,5 regular con
   tracking amplio -- no como la micro-etiqueta de 9,5 px en negrilla. (En el
   codigo de la maqueta la clase .eyebrow pedia 9,5/700, pero .section-head p la
   sobreescribia; lo que quedo en pantalla, y lo que se aprobo, es esto.) Se
   respeta lo aprobado: la linea grande y serena respira mejor sobre el titulo
   en mayuscula 900 y no compite con el, porque su peso es regular.
   Volver a la micro-etiqueta es cambiar dos numeros de este bloque. */
.dp-section-tag {
    font-size: 16.5px;
    font-weight: 400;
    letter-spacing: 0.24em;
    line-height: 1.75;
    color: var(--dp-ink-soft);
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v14.2 — FICHA: EL CUERPO, IGUAL QUE LA MAQUETA
   ---------------------------------------------------------------------------
   La v14 trajo la galeria y el cierre navy. Faltaba el cuerpo: encabezado,
   narrativa, tabla de especificaciones y amenidades. Todo con los mismos
   valores de la maqueta aprobada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Encabezado: chincheta → nombre → precio ────────────────────────────── */
.dp-ficha-header-block {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}
.dp-ficha-zona {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-family: var(--dp-font);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
}
.dp-ficha-zona svg { width: 12px; height: 12px; opacity: .75; flex-shrink: 0; }

.dp-ficha-title {
    font-family: var(--dp-font);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--dp-navy);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.44;
    letter-spacing: 0.09em;
    max-width: 24ch;
    margin: 14px 0 0;
}

.dp-ficha-price {
    font-family: var(--dp-font);
    font-size: 25px;
    font-weight: 400;
    color: var(--dp-ink);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    margin: 22px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--dp-rule);
}
/* Administracion y equivalencia en dolares: dos notas al pie del precio, no dos
   lineas mas de la ficha. Van en el mismo bloque para que se lean como una sola
   respuesta a "cuanto cuesta". */
.dp-ficha-price small {
    display: block;
    font-family: var(--dp-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
    margin-top: 8px;
}

/* ── Narrativa ──────────────────────────────────────────────────────────── */
.dp-ficha-desc { margin: 40px 0 0; max-width: 62ch; }
.dp-ficha-desc p {
    font-size: 16.5px;
    line-height: 1.8;
    color: #333E4C;
    margin: 0 0 18px;
}
.dp-ficha-desc p:last-child { margin-bottom: 0; }

/* ── Rotulos de seccion dentro de la ficha ──────────────────────────────── */
.dp-ficha-sec-label {
    display: block;
    font-family: var(--dp-font);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dp-navy);
    margin: 50px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--dp-rule);
}

/* ── Tabla de especificaciones ──────────────────────────────────────────── */
/* Las clases reales son .dp-ficha-tabla / .dp-spec-fila -- las escribe
   dp_ficha_specs_tabla() en functions.php. Los valores ya eran los de la
   maqueta; lo que faltaba era el color: filete #EFF2F5 (mas frio que el gris-100
   que tenia) y etiqueta #78828F. Y el ancho: la tabla ocupa toda la columna de
   la ficha, no 620 px sueltos dentro de 708. */
.dp-ficha-tabla { max-width: none; }
.dp-spec-fila { border-bottom: 1px solid #EFF2F5; }
.dp-spec-fila dt { color: #78828F; }
.dp-spec-fila dd { color: var(--dp-ink); }

/* ── Amenidades: filetes, no pastillas ──────────────────────────────────── */
.dp-amenidades-grid {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.dp-amenidad-item {
    display: inline-block;
    font-size: 13.5px;
    color: #333E4C;
    background: none;
    border: 1px solid var(--dp-rule);
    border-radius: 0;
    padding: 7px 14px;
}

/* ── Mapa ───────────────────────────────────────────────────────────────── */
.dp-ficha-map { margin-top: 20px; border-radius: 0; }
.dp-ficha-map-label { margin-top: 10px; font-size: 12.5px; color: var(--dp-ink-faint); }

/* ── Texto alineado a la izquierda, nunca justificado ───────────────────── */
/* La narrativa venia justificada con text-justify:inter-word. En una columna
   angosta eso abre "rios" de espacio blanco entre palabras: cada linea estira
   los espacios hasta cuadrar el margen derecho, y el parrafo se lee a saltos.
   Ninguna revista de arquitectura justifica una columna de este ancho. La
   maqueta va con bandera derecha -- borde izquierdo firme, derecho libre -- que
   es como se compone el texto cuando la lectura importa mas que la simetria. */
.dp-ficha-desc p,
.dp-article-body p {
    text-align: left;
    text-justify: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v14.3 — SOLICITUD DE VISITA
   ---------------------------------------------------------------------------
   El agendamiento propio, con los valores de la maqueta aprobada. Es la unica
   pieza del sitio que se comporta como una aplicacion, y por eso mismo es la que
   mas tiene que parecerse al resto: navy, esquinas rectas, filetes de 1 px,
   mayusculas espaciadas. Un calendario con esquinas redondas y azul de sistema
   habria delatado que el resto es fachada.
   ═══════════════════════════════════════════════════════════════════════════ */

.dp-visita-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 14, 25, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}
.dp-visita-overlay[hidden] { display: none; }

.dp-visita {
    position: relative;
    background: var(--dp-navy);
    color: #fff;
    width: 100%;
    max-width: 480px;
    padding: 40px 38px 36px;
    margin: auto;
}
@media (max-width: 520px) { .dp-visita { padding: 32px 24px 30px; } }

.dp-visita-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 0;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: color .2s ease;
}
.dp-visita-cerrar:hover { color: #fff; }

.dp-visita-step {
    margin: 0;
    font-family: var(--dp-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
/* La pregunta va en Playfair italica: es el mismo tono con el que abre el sitio.
   Quien pide una visita esta en el momento mas importante de su recorrido, y esa
   pregunta tiene que sonar a persona, no a formulario. */
.dp-visita h3 {
    font-family: var(--dp-font-titulo);
    font-style: italic;
    font-weight: 400;
    font-size: 27px;
    line-height: 1.18;
    letter-spacing: 0;
    text-transform: none;
    margin: 12px 0 0;
    color: #fff;
}
.dp-visita-prop {
    margin: 20px 0 0;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    font-size: 13px;
    color: rgba(255,255,255,0.72);
}
.dp-visita-prop b {
    display: block;
    color: #fff;
    font-weight: 400;
    font-size: 14.5px;
    margin-bottom: 3px;
}
.dp-visita-label {
    display: block;
    margin: 28px 0 12px;
    font-family: var(--dp-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
}

/* ── Los siete dias ─────────────────────────────────────────────────────── */
.dp-visita-dias {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.dp-visita-dias::-webkit-scrollbar { display: none; }
.dp-visita-dia {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 11px 6px 10px;
    background: transparent;
    color: rgba(255,255,255,0.82);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 0;
    cursor: pointer;
    text-align: center;
    font-family: var(--dp-font);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dp-visita-dia:hover { border-color: rgba(255,255,255,0.55); }
.dp-visita-dia .dow {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 5px;
}
.dp-visita-dia .num {
    display: block;
    font-size: 17px;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}
.dp-visita-dia[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--dp-navy); }
.dp-visita-dia[aria-pressed="true"] .dow { color: #5A6572; }

/* ── Las tres franjas ───────────────────────────────────────────────────── */
.dp-visita-franjas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dp-visita-franja {
    padding: 13px 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 0;
    cursor: pointer;
    color: rgba(255,255,255,0.86);
    font-family: var(--dp-font);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dp-visita-franja:hover { border-color: rgba(255,255,255,0.55); }
.dp-visita-franja .t { display: block; font-size: 13.5px; font-weight: 400; }
.dp-visita-franja .h {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.dp-visita-franja[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--dp-navy); }
.dp-visita-franja[aria-pressed="true"] .h { color: #5A6572; }

/* ── Nombre y WhatsApp ──────────────────────────────────────────────────── */
.dp-visita-field { margin-top: 14px; }
.dp-visita-field input {
    width: 100%;
    padding: 13px 15px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 0;
    font-family: var(--dp-font);
    font-size: 14.5px;
}
.dp-visita-field input::placeholder { color: rgba(255,255,255,0.42); }
.dp-visita-field input:focus { outline: none; border-color: rgba(255,255,255,0.7); }
/* Campo trampa para robots: fuera de la pantalla, nunca display:none -- muchos
   robots saben ignorar lo que esta oculto asi. */
.dp-visita-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.dp-visita-send {
    width: 100%;
    margin-top: 24px;
    padding: 16px;
    background: #fff;
    color: var(--dp-navy);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-family: var(--dp-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: opacity .18s ease;
}
.dp-visita-send:hover { opacity: .88; }
.dp-visita-send[disabled] { opacity: .32; cursor: not-allowed; }

.dp-visita-error {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #FFC9C9;
}
.dp-visita-error[hidden] { display: none; }
.dp-visita-fine {
    margin-top: 16px;
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.55);
}
.dp-visita-legal {
    margin-top: 14px;
    font-size: 10.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.4);
}
.dp-visita-legal a { color: rgba(255,255,255,0.7); text-decoration: underline; }

/* ── Paso 2: la confirmacion ────────────────────────────────────────────── */
.dp-visita-done[hidden] { display: none; }
.dp-visita-done .dp-visita-rule {
    width: 34px;
    height: 1px;
    background: rgba(255,255,255,0.4);
    margin: 22px 0;
}
.dp-visita-done > p {
    font-size: 14.5px;
    color: rgba(255,255,255,0.78);
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}
.dp-visita-done > p b { color: #fff; font-weight: 400; }
.dp-visita-agent {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}
.dp-visita-agent b { display: block; color: #fff; font-weight: 400; font-size: 14px; margin-bottom: 2px; }
.dp-visita-av {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    background: linear-gradient(150deg, #46586B 0%, #22364C 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--dp-font-titulo);
    font-style: italic;
    font-size: 18px;
    color: #fff;
}
.dp-visita-wa {
    display: inline-block;
    margin-top: 22px;
    font-family: var(--dp-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.28);
    padding-bottom: 3px;
    transition: color .2s ease, border-color .2s ease;
}
.dp-visita-wa:hover { color: #fff; border-bottom-color: #fff; }

/* ── Los siete días caben, no se cortan ─────────────────────────────────── */
/* En la maqueta la fila de dias se desplaza a lo ancho, y el septimo dia queda
   partido contra el borde. Un elemento cortado no se lee como "hay mas": se lee
   como un error de maquetacion, y en una marca que vende criterio eso cuesta.
   Siete columnas iguales: la semana completa a la vista, sin desplazar nada y
   sin agregar flechas ni degradados. El desplazamiento queda solo como red de
   seguridad en pantallas muy angostas. */
.dp-visita-dias {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    overflow-x: visible;
    padding-bottom: 0;
}
.dp-visita-dia { min-width: 0; padding: 11px 2px 10px; }
.dp-visita-dia .dow { letter-spacing: 0.1em; }
@media (max-width: 340px) {
    .dp-visita-dias { display: flex; overflow-x: auto; }
    .dp-visita-dia { flex: 0 0 auto; min-width: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v14.4 — LA REJILLA NO SE ESTIRA CUANDO HAY POCO INVENTARIO
   ---------------------------------------------------------------------------
   Con una sola propiedad publicada, la tarjeta ocupaba los 1.160 px de ancho de
   la página. Con un solo agente, el retrato llegaba a medir 1.160 × 1.450 px.
   No era un error de medidas: era auto-fit.

     auto-fit  .... crea las columnas que caben y despues COLAPSA las vacias,
                    asi que el unico elemento se reparte todo el ancho.
     auto-fill .... crea las columnas que caben y las DEJA, vacias incluidas.
                    El unico elemento ocupa una columna y conserva su tamano.

   Una letra de diferencia y dos comportamientos opuestos. auto-fit sirve cuando
   se quiere que el contenido llene el espacio; aqui se quiere lo contrario: que
   una propiedad se vea igual de bien que doce, en el mismo tamano, alineada al
   borde izquierdo de la rejilla como el primero de una fila que va a crecer.
   Ese hueco a la derecha no es un vacio: es la promesa de que viene mas.

   Ademas se pone un techo por columna. Sin el, en una pantalla de 27 pulgadas
   tres tarjetas se estirarian hasta deformar la proporcion 4:3 de la fotografia.
   ═══════════════════════════════════════════════════════════════════════════ */

.dp-properties-grid {
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    justify-content: start;
}
@media (max-width: 620px) {
    .dp-properties-grid { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 48px 30px; }
}
/* Nota: NO hace falta un techo por columna. El contenedor ya esta limitado a
   1.240 px, asi que en una pantalla de 27 pulgadas la rejilla mide lo mismo que
   en un portatil -- tres columnas de 366 px. Un techo de 400 px aqui hacia lo
   contrario de lo que parecia: bajaba a DOS columnas y dejaba 330 px vacios. */

.dp-agentes-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    justify-content: start;
}
@media (max-width: 620px) {
    .dp-agentes-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 34px; max-width: none; }
}

/* En movil una sola columna es lo correcto: la tarjeta a todo el ancho del
   telefono no se ve grande, se ve como una fotografia a pagina completa. */
@media (max-width: 560px) {
    .dp-properties-grid { grid-template-columns: 1fr; }
    .dp-agentes-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── Acciones del pie de la ficha ───────────────────────────────────────── */
/* Cuatro acciones en una fila de filetes, alineadas a la izquierda como todo lo
   demas de la ficha. Antes eran dos botones grises centrados con esquina
   redondeada -- lo unico de la pagina que seguia pareciendo un formulario web.
   El WhatsApp del asesor va primero porque es la accion que mas se usa: quien
   termino de leer la ficha ya decidio, y lo siguiente que quiere es escribirle
   a una persona. */
/* Rejilla de dos por dos, no una fila que se desborda.
   Las cuatro etiquetas suman 711 px en una columna de 708: en fila quedaba una
   accion huerfana en el segundo renglon, que es justo lo que se ve como error.
   Se podia recortar "WhatsApp con Diego" a "WhatsApp", pero el nombre es lo que
   dice que del otro lado hay una persona y no una linea de empresa -- eso no se
   negocia por 76 px. Dos columnas iguales: los cuatro iconos quedan alineados en
   vertical y el bloque se lee como un menu, no como algo que no cupo. */
.dp-ficha-pdf-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    text-align: left;
    margin: 40px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--dp-rule);
}
.dp-ficha-pdf-actions .dp-btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 14px 22px;
    background: none;
    border: 1px solid var(--dp-rule);
    border-radius: 0;
    color: var(--dp-navy);
    font-family: var(--dp-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dp-ficha-pdf-actions .dp-btn-pdf:hover {
    background: var(--dp-navy);
    border-color: var(--dp-navy);
    color: #fff;
}
.dp-ficha-pdf-actions .dp-btn-pdf svg { flex-shrink: 0; }
/* El WhatsApp va en navy solido: es la accion principal de las cuatro, y una
   sola pieza llena en la fila basta para decirlo. Nada de verde. */
.dp-ficha-pdf-actions .dp-btn-pdf--wa {
    background: var(--dp-navy);
    border-color: var(--dp-navy);
    color: #fff;
}
.dp-ficha-pdf-actions .dp-btn-pdf--wa:hover { background: var(--dp-navy); opacity: .86; color: #fff; }
/* La nota de aliados ocupa el ancho completo, debajo de las cuatro. */
.dp-ficha-pdf-actions > p {
    grid-column: 1 / -1;
    margin: 4px 0 0 !important;
    font-size: 11.5px;
    color: var(--dp-ink-faint);
}
.dp-ficha-pdf-actions > p a { color: var(--dp-ink-soft); }
@media (max-width: 560px) {
    /* En telefono las cuatro se apilan a todo el ancho y el texto se centra: un
       boton de 22 px de padding partido en dos lineas se ve roto, no compacto. */
    .dp-ficha-pdf-actions { grid-template-columns: 1fr; }
    .dp-ficha-pdf-actions .dp-btn-pdf { justify-content: center; }
}
.dp-ficha-pdf-actions > p a {
    color: var(--dp-ink-soft);
    text-decoration: underline;
    text-decoration-color: var(--dp-rule);
    text-underline-offset: 3px;
}
.dp-ficha-pdf-actions > p a:hover { color: var(--dp-navy); text-decoration-color: var(--dp-navy); }
/* La referencia interna: dato de archivo, no titular. Alineada a la izquierda con
   el resto de las notas al pie de la ficha. */
.dp-ficha-ref {
    margin: 6px 0 0;
    font-family: var(--dp-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
}

/* ── Agente sin foto: navy, no un hueco gris ────────────────────────────── */
/* La caja gris clara con una letra gris rompía la fila: dos retratos oscuros y
   un vacío del color del fondo. Con el navy de la marca y la inicial en Playfair
   itálica -- el mismo tratamiento del cierre de la ficha -- la ausencia de foto
   se lee como una decisión y no como un error de carga. Sigue faltando la foto,
   pero la página no se cae mientras llega. */
.dp-agente-foto--placeholder {
    background: var(--dp-navy);
    color: rgba(255,255,255,0.9);
    font-family: var(--dp-font-titulo);
    font-style: italic;
    font-weight: 400;
    font-size: 48px;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v14.5 — HERO MÁS DELGADO · TARJETA Y FICHA CON EL DATO QUE MIRA EL COMPRADOR
   ---------------------------------------------------------------------------
   1. El titular del hero baja de peso 500 a 400. Para que el trazo fino de
      Playfair no se lo coma el velo de la foto, una sombra suave detrás.
   2. La tarjeta gana la línea de administración y una etiqueta bajo cada
      icono (área / alcobas / baños / parq.), y chips de terraza / balcón en
      el cuerpo — nunca sobre la foto.
   3. La ficha estrena una tira de iconos con los cuatro datos de cabecera,
      justo bajo el precio, y una línea de terraza / balcón. La tabla de
      especificaciones pierde esos datos y se queda con el detalle fino.
   Gana la última capa: esto va al final del archivo a propósito.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Hero ──────────────────────────────────────────────────────────── */
.dp-hero h1,
.dp-owners-hero h1 {
    font-weight: 400;
    letter-spacing: 0.012em;
    text-shadow: 0 1px 30px rgba(11, 26, 46, 0.42);
}
@media (max-width: 640px) {
    .dp-hero h1 { text-shadow: 0 1px 18px rgba(11, 26, 46, 0.5); }
}

/* ── 2 · Tarjeta ───────────────────────────────────────────────────────── */
.dp-card-adm {
    margin: 4px 0 0;
    font-family: var(--dp-font);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--dp-ink-soft);
}

.dp-property-specs.dp-property-specs--icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 6px;
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--dp-rule);
    flex-wrap: nowrap;
}
.dp-property-specs--icons .dp-spec-icon {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    white-space: nowrap;
    line-height: 1.2;
}
.dp-spec-icon-top {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--dp-font);
    font-size: 13px;
    font-weight: 400;
    color: var(--dp-ink);
    font-variant-numeric: tabular-nums;
}
.dp-spec-icon-top strong { font-weight: 700; color: var(--dp-ink); }
.dp-property-specs--icons .dp-spec-icon svg {
    width: 14px; height: 14px;
    color: var(--dp-ink-soft);
    opacity: 1;
    flex-shrink: 0;
}
.dp-spec-lbl {
    font-family: var(--dp-font);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
}
/* Tarjeta: solo icono + numero, sin la etiqueta debajo (queda para lectores de
   pantalla vía .screen-reader-text y el tooltip title). */
.dp-property-specs--icons .dp-spec-lbl { display: none; }
@media (max-width: 440px) {
    .dp-property-specs.dp-property-specs--icons {
        grid-template-columns: 1fr 1fr;
        gap: 13px 8px;
    }
}

.dp-card-amen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.dp-card-amen span {
    font-family: var(--dp-font);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
    border: 1px solid var(--dp-rule);
    padding: 4px 10px;
}

/* ── 3 · Ficha: tira de iconos + línea de terraza / balcón ─────────────── */
.dp-ficha-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--dp-rule);
    margin: 26px 0 0;
}
.dp-ficha-strip-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
    border-right: 1px solid var(--dp-rule);
}
.dp-ficha-strip-cell:last-child { border-right: 0; }
.dp-ficha-strip-cell svg {
    width: 20px; height: 20px;
    color: var(--dp-ink-soft);
    margin-bottom: 9px;
}
.dp-ficha-strip-cell .v {
    font-family: var(--dp-font);
    font-weight: 900;
    font-size: 19px;
    line-height: 1;
    color: var(--dp-navy);
    font-variant-numeric: tabular-nums;
}
.dp-ficha-strip-cell .l {
    margin-top: 7px;
    font-family: var(--dp-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
}
@media (max-width: 560px) {
    .dp-ficha-strip { grid-template-columns: 1fr 1fr; }
    .dp-ficha-strip-cell:nth-child(2) { border-right: 0; }
    .dp-ficha-strip-cell:nth-child(1),
    .dp-ficha-strip-cell:nth-child(2) { border-bottom: 1px solid var(--dp-rule); }
}

.dp-ficha-amen-linea {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-family: var(--dp-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
}
.dp-ficha-amen-linea svg { color: var(--dp-ink-soft); flex-shrink: 0; }

/* La descripción arranca con más aire después de la tira / línea nueva. */
.dp-ficha-strip + .dp-ficha-amen-linea + .dp-ficha-desc,
.dp-ficha-strip + .dp-ficha-desc { margin-top: 40px; }

/* ── v14.5 · añadido: asesor compacto arriba + otras propiedades ──────────── */

.dp-ficha-agente-mini {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0 0;
    padding: 16px 0 0;
}
.dp-ficha-agente-mini-foto {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    overflow: hidden;
    background: var(--dp-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dp-ficha-agente-mini-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-ficha-agente-mini-foto span {
    font-family: var(--dp-font-titulo);
    font-style: italic;
    font-size: 26px;
    color: rgba(255,255,255,0.9);
    line-height: 1;
}
.dp-ficha-agente-mini-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dp-ficha-agente-mini-eyebrow {
    font-family: var(--dp-font);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
}
.dp-ficha-agente-mini-nombre {
    font-family: var(--dp-font);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13.5px;
    color: var(--dp-navy);
}
.dp-ficha-agente-mini-cargo {
    font-family: var(--dp-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
}
.dp-ficha-agente-mini-wa {
    flex: 0 0 auto;
    font-family: var(--dp-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dp-navy);
    text-decoration: underline;
    text-decoration-color: var(--dp-rule);
    text-underline-offset: 4px;
    white-space: nowrap;
}
.dp-ficha-agente-mini-wa:hover { text-decoration-color: var(--dp-navy); }
@media (max-width: 520px) {
    .dp-ficha-agente-mini { flex-wrap: wrap; gap: 12px; }
    .dp-ficha-agente-mini-wa { width: 100%; }
}

.dp-ficha-similares { margin-top: 8px; }
.dp-ficha-similares-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    margin-top: 22px;
}
@media (max-width: 820px) {
    .dp-ficha-similares-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 22px; }
}
@media (max-width: 520px) {
    .dp-ficha-similares-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media print {
    .dp-ficha-similares, .dp-ficha-agente-mini { display: none !important; }
}

/* ── v14.5 · añadido: el título de la ficha en una línea cuando quepa ─────── */
/* Quitaba el `max-width: 24ch` que lo metía a la fuerza en ~330 px y lo partía
   en tres. Ahora usa el ancho de la columna, con tracking e interlínea más
   ajustados: un nombre normal entra en una línea; uno muy largo, en dos
   parejas, nunca tres. */
.dp-ficha-title {
    max-width: none;
    letter-spacing: 0.04em;
    line-height: 1.22;
    font-size: clamp(16px, 2.6vw, 24px);
    text-wrap: balance;
    overflow-wrap: normal;
}
@media (max-width: 767px) {
    .dp-ficha-title { letter-spacing: 0.03em; line-height: 1.25; }
}

/* ── v14.5 · añadido: la galería de la ficha llena la pantalla ───────────── */
/* La foto principal ocupa todo el ancho y una franja alta de la ventana, y
   llena el marco sin bordes (object-fit: cover). El marco no cambia de alto al
   pasar de una foto a otra. Con fotos horizontales de la misma proporción el
   recorte es mínimo. */
.dp-galeria-principal { height: clamp(360px, 78vh, 900px); }
@media (max-width: 640px) { .dp-galeria-principal { height: clamp(300px, 56vh, 520px); } }
.dp-galeria-foto img { object-fit: cover; }

/* ── v14.6 · Galería de la ficha: solo la foto, se cambia deslizando ──────────
   Se quitó la tira de miniaturas (en el HTML). En móvil también se ocultan las
   flechas: la foto se pasa con el dedo. En escritorio quedan flechas + contador. */
@media (max-width: 767px) {
    .dp-galeria-flecha { display: none; }
    .dp-galeria-principal { touch-action: pan-y; cursor: grab; }
}
.dp-galeria-tira { display: none; }

/* ── v14.7 · Iconos de tarjeta + terraza/balcón en negrilla + admin en la ficha ──── */

/* Chips de terraza / balcón en la tarjeta: icono + texto en negrilla, legible. */
.dp-card-amen span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--dp-ink-soft);
}
.dp-card-amen span svg { width: 13px; height: 13px; color: var(--dp-ink); flex: 0 0 auto; }
.dp-card-amen span strong { font-weight: 800; color: var(--dp-ink); letter-spacing: inherit; }

/* Iconos de especificaciones de la tarjeta y de la tira de la ficha: un poco más grandes. */
.dp-spec-icon svg,
.dp-property-specs--icons .dp-spec-icon svg { width: 16px; height: 16px; }
.dp-ficha-strip-cell svg { width: 18px; height: 18px; }

/* Administración DENTRO de la ficha: renglón propio bajo el precio, más grande. */
.dp-ficha-adm {
    margin: 6px 0 0;
    font-family: var(--dp-font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--dp-ink-soft);
}
.dp-ficha-adm strong { font-weight: 800; color: var(--dp-ink); font-size: 16px; }

/* ── v14.8 · Móvil: buscador del hero en columna + foto del cierre centrada ──── */

/* Hero: en móvil la franja de texto ocupa todo el ancho y el botón va debajo,
   también a todo el ancho. Sin fila compartida ni recortes. */
@media (max-width: 767px) {
    .dp-hero-ia-form {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
        border-radius: 16px;
    }
    .dp-hero-ia-form .dp-hero-ia-spark { display: none; }
    .dp-hero-ia-form input {
        width: 100%;
        height: 48px;
        order: 1;
        text-align: left;
    }
    .dp-hero-ia-submit {
        width: 100%;
        order: 2;
        height: 46px;
        border-radius: 12px;
    }
}

/* Ficha · banda de cierre: en móvil la foto del asesor va centrada, y el texto
   también, como una tarjeta. */
@media (max-width: 700px) {
    .dp-cierre-inner { justify-items: center; text-align: center; }
    .dp-cierre-foto { margin-left: auto; margin-right: auto; }
    .dp-cierre-acciones { width: 100%; }
}

/* ── v14.9 · Iconos: render nítido y consistente en celular ─────────────────── */
.dp-spec-icon svg,
.dp-property-specs--icons .dp-spec-icon svg,
.dp-spec-icon-top svg,
.dp-card-amen span svg,
.dp-ficha-strip-cell svg,
.dp-card-zone svg,
.dp-ficha-zona svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -2px;
    shape-rendering: geometricPrecision;
}
.dp-ficha-strip-cell svg { width: 17px; height: 17px; }

@media (max-width: 400px) {
    .dp-property-specs.dp-property-specs--icons { gap: 12px 6px; }
    .dp-spec-icon-top { font-size: 12.5px; gap: 4px; }
}

/* ── v15 · Filtros de la portada: Lato mayúscula, siempre ───────────────────
   "Todas / Colección Depropiedades / Terraza / Balcón / Destacado" deben
   leerse en Lato, en mayúscula, con el espaciado de las etiquetas del sistema.
   Va al final y con !important para ganarle a cualquier regla anterior. */
.dp-category-filters .dp-search-filters .dp-tag-filter-btn,
.dp-category-filters .dp-tag-filter-btn,
.dp-search-filters .dp-tag-filter-btn,
.dp-tag-filter-btn,
.dp-filter-btn {
    font-family: var(--dp-font) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    font-style: normal !important;
}

/* ── v16 · Tarjeta de propiedad como caja UX ───────────────────────────────────
   Toda la info de la propiedad va dentro de un contenedor con borde: en el
   celular queda claro donde empieza y termina cada tarjeta y que TODA es un
   solo boton (foto + datos van al mismo enlace). Sin sombras (regla de marca):
   la separacion la da el filete de 1px. */
.dp-card {
    background: var(--dp-white);
    border: 1px solid var(--dp-gray-200);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s ease;
}
.dp-card:hover,
.dp-card:focus-visible,
.dp-card:active { border-color: var(--dp-navy); }
.dp-card-frame { border-radius: 0; }
.dp-card-body { padding: 16px 18px 20px; }
.dp-card-amen { margin-top: 12px; }

.dp-properties-grid { gap: 22px; }
@media (min-width: 621px) and (max-width: 1024px) {
    .dp-properties-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 620px) {
    .dp-properties-grid { grid-template-columns: 1fr; gap: 16px; }
    .dp-card:active { background: var(--dp-gray-50); }
    /* En pantalla tactil el "+" de seleccionar-para-compartir estorba el toque
       de la tarjeta y confunde: solo se muestra en escritorio. */
    .dp-card-pick { display: none !important; }
}

/* ── v17 · Antiguedad al lado del precio ──────────────────────────────────────
   La fila del precio ahora lleva la antiguedad a la derecha (mismo renglon,
   .dp-card-meta ya reparte con space-between). Etiqueta discreta: Lato
   mayuscula pequena, gris, para que el precio siga mandando. */
.dp-card-age {
    font-family: var(--dp-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dp-gray-500);
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ── v18 · Velocidad + texto justificado + la visita es EL llamado a la accion ──
   Tres pedidos del cliente en un bloque, todo aditivo. */

/* 1. TEXTO JUSTIFICADO. Reemplaza la decision anterior de "bandera derecha". En
      columna angosta la justificacion abre rios de espacio: se compensa con
      guionado automatico (el <html lang="es"> activa el diccionario). */
.dp-ficha-desc p,
.dp-article-body p {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* 2. LA VISITA, LLAMADO A LA ACCION. En la fila de acciones de la ficha el boton
      "Solicitar visita" ocupa todo el ancho arriba, en navy solido; es la unica
      pieza llena de la fila. WhatsApp baja a filete (accion secundaria). */
.dp-ficha-pdf-actions .dp-btn-pdf--visita {
    grid-column: 1 / -1;
    background: var(--dp-navy);
    border-color: var(--dp-navy);
    color: #fff;
    padding: 17px 26px;
    font-size: 11.5px;
    letter-spacing: 0.2em;
}
.dp-ficha-pdf-actions .dp-btn-pdf--visita:hover {
    background: var(--dp-navy);
    border-color: var(--dp-navy);
    color: #fff;
    opacity: .9;
}
.dp-ficha-pdf-actions .dp-btn-pdf--visita svg { width: 17px; height: 17px; }
.dp-ficha-pdf-actions .dp-btn-pdf--wa {
    background: none;
    border-color: var(--dp-rule);
    color: var(--dp-navy);
}
.dp-ficha-pdf-actions .dp-btn-pdf--wa:hover {
    background: var(--dp-navy);
    border-color: var(--dp-navy);
    color: #fff;
    opacity: 1;
}

/* 3. VELOCIDAD. content-visibility deja que el navegador se salte el layout y el
      pintado de lo que aun no se ve; el sitio abre antes. contain-intrinsic-size
      reserva el alto aproximado para que la barra de scroll no salte. */
.dp-ficha-similares,
.dp-cierre,
.dp-ficha-map {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}
/* Al imprimir (boton "Ficha PDF") no se salta nada: todo visible y sin alto
   reservado. */
@media print {
    .dp-ficha-similares,
    .dp-cierre,
    .dp-ficha-map {
        content-visibility: visible;
        contain-intrinsic-size: auto;
    }
}
/* Fondo neutro bajo cada foto mientras decodifica: se percibe como carga
   instantanea en vez de un hueco blanco. */
.dp-galeria-foto img,
.dp-card-photo img { background: var(--dp-gray-100); }

/* ── v19 · "Otras propiedades" va DESPUES de la banda navy del broker ─────────
   Antes las similares cerraban la columna blanca y la banda del asesor quedaba
   de ultimo. Ahora la banda del broker (foto + botones) va primero y las
   similares en un bloque blanco propio debajo. */
.dp-ficha-cola {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 28px 56px;
    background: var(--dp-white);
}
@media (min-width: 900px) { .dp-ficha-cola { padding: 0 56px 64px; } }
.dp-ficha-cola .dp-ficha-similares { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLICAR  ·  landing de venta (/publicar/) — reemplaza a Propietarios
   Sistema: navy, papel, tinta. Angulo recto, filetes de 1px, sin sombras,
   sin acento de color. Playfair italica solo en el titular del hero.
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-pub {
    background: var(--dp-paper);
    color: var(--dp-ink);
}
.dp-pub-wrap {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
}
.dp-pub section,
.dp-pub-commit,
.dp-pub-demand,
.dp-pub-criteria,
.dp-pub-method,
.dp-pub-sold,
.dp-pub-form-section {
    padding: 96px 0;
}
.dp-pub-kicker {
    display: block;
    margin-bottom: 16px;
    color: var(--dp-ink-faint);
    font-family: var(--dp-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.dp-pub-kicker--light { color: rgba(255,255,255,0.6); }

.dp-pub h2 {
    margin: 0;
    color: var(--dp-navy);
    font-family: var(--dp-font);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 300;
    line-height: 1.25;
}
.dp-pub p { color: var(--dp-ink-soft); font-size: 17px; line-height: 1.6; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.dp-pub-hero {
    padding: 128px 0 96px;
    background-color: var(--dp-navy);
    background-image:
        linear-gradient(90deg, rgba(11,26,46,0.92), rgba(11,26,46,0.72)),
        var(--dp-pub-hero-image, none);
    background-size: cover;
    background-position: center;
    color: var(--dp-white);
}
.dp-pub-hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
}
.dp-pub-hero--solo .dp-pub-hero__inner { grid-template-columns: 1fr; max-width: 820px; }
.dp-pub-hero .dp-pub-kicker { color: rgba(255,255,255,0.62); }
.dp-pub-hero h1 {
    margin: 0;
    max-width: 14ch;
    color: var(--dp-white);
    font-family: var(--dp-font-titulo);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.02;
}
.dp-pub-lead {
    max-width: 46ch;
    margin: 24px 0 32px;
    color: rgba(255,255,255,0.74) !important;
    font-size: 19px !important;
}
.dp-pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 32px;
    background: var(--dp-white);
    color: var(--dp-navy);
    border: 1px solid var(--dp-white);
    font-family: var(--dp-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background 180ms ease, color 180ms ease;
}
.dp-pub-btn:hover { background: transparent; color: var(--dp-white); }

/* ── Reel vertical (video self-hosted 9:16) ──────────────────────────────── */
.dp-publicar-reel {
    position: relative;
    justify-self: end;
    width: 300px;
    max-width: 78vw;
    margin: 0;
}
.dp-publicar-reel__v {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: var(--dp-navy);
    border: 1px solid rgba(255,255,255,0.16);
    cursor: pointer;
}
.dp-publicar-reel__embed {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: var(--dp-navy);
    border: 1px solid rgba(255,255,255,0.16);
}
.dp-publicar-reel__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.dp-publicar-reel__sound {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(11,26,46,0.72);
    color: var(--dp-white);
    border: 1px solid rgba(255,255,255,0.22);
    cursor: pointer;
    transition: background 180ms ease;
}
.dp-publicar-reel__sound:hover { background: rgba(11,26,46,0.92); }
.dp-publicar-reel figcaption {
    margin-top: 12px;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}

/* ── Compromiso comercial ────────────────────────────────────────────────── */
.dp-pub-commit { background: var(--dp-white); }
.dp-pub-commit .dp-pub-wrap {
    max-width: 900px;
    padding-left: 32px;
    border-left: 2px solid var(--dp-navy);
}
.dp-pub-commit__line {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 300 !important;
    font-size: clamp(26px, 3.4vw, 40px) !important;
    line-height: 1.25;
}
.dp-pub-commit p { margin: 20px 0 0; max-width: 62ch; }

/* ── Demanda ─────────────────────────────────────────────────────────────── */
.dp-pub-demand { background: var(--dp-paper); text-align: center; }
.dp-pub-demand__line {
    max-width: 24ch;
    margin: 0 auto;
    color: var(--dp-navy) !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 300;
    line-height: 1.3;
}
.dp-pub-demand__line strong { font-weight: 900; }

/* ── Criterios de admisión ───────────────────────────────────────────────── */
.dp-pub-criteria { background: var(--dp-white); }
.dp-pub-criteria h2 { margin-bottom: 40px; }
.dp-pub-crit {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--dp-rule);
}
.dp-pub-crit__row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 32px;
    padding: 24px 0;
    border-bottom: 1px solid var(--dp-rule);
}
.dp-pub-crit__label {
    color: var(--dp-ink-faint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-top: 4px;
}
.dp-pub-crit__row p { margin: 0; color: var(--dp-ink); }
.dp-pub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-pub-chip {
    padding: 8px 16px;
    background: var(--dp-navy);
    color: var(--dp-white);
    border: 1px solid var(--dp-navy);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.dp-pub-chip.dp-pub-chip--soft {
    background: var(--dp-white);
    color: var(--dp-ink-soft);
    border-color: var(--dp-rule);
}
.dp-pub-zonas { display: grid; gap: 20px; }
.dp-pub-zonas__tag {
    display: block;
    margin-bottom: 10px;
    color: var(--dp-ink-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.dp-pub-opt {
    color: var(--dp-ink-faint);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Cómo trabajamos ─────────────────────────────────────────────────────── */
.dp-pub-method {
    background: var(--dp-navy);
    color: var(--dp-white);
}
.dp-pub-method h2 { color: var(--dp-white); margin-bottom: 48px; }
.dp-pub-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.16);
    border-left: 1px solid rgba(255,255,255,0.16);
}
.dp-pub-step {
    padding: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.16);
    border-right: 1px solid rgba(255,255,255,0.16);
}
.dp-pub-step__n {
    display: block;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
}
.dp-pub-step strong {
    display: block;
    margin-bottom: 8px;
    color: var(--dp-white);
    font-size: 18px;
    font-weight: 700;
}
.dp-pub-step__d {
    display: block;
    color: rgba(255,255,255,0.68);
    font-size: 15px;
    line-height: 1.55;
}

/* ── Propiedades vendidas ────────────────────────────────────────────────── */
.dp-pub-sold { background: var(--dp-paper); }
.dp-pub-sold__head { margin-bottom: 40px; }
.dp-pub-sold__head h2 {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 300;
    font-size: clamp(24px, 3vw, 34px);
    margin-top: 12px;
}
.dp-pub-sold__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.dp-pub-sold__img {
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--dp-rule);
}

/* ── Formulario ──────────────────────────────────────────────────────────── */
.dp-pub-form-section { background: var(--dp-white); }
.dp-pub-form-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: start;
}
.dp-pub-form-intro h2 {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 300;
    font-size: clamp(24px, 3vw, 36px);
    margin: 12px 0 16px;
}
.dp-pub-form-intro p { max-width: 40ch; }
/* Foto del equipo: bajo el texto y al lado del formulario; en celular, despues del formulario. */
.dp-pub-form-grid { grid-template-areas: "intro card" "foto card"; }
.dp-pub-form-intro { grid-area: intro; }
.dp-pub-form-card { grid-area: card; }
.dp-pub-form-foto { grid-area: foto; margin: 0; }
.dp-pub-form-foto img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--dp-rule);
}
.dp-pub-form-card {
    padding: 40px;
    background: var(--dp-white);
    border: 1px solid var(--dp-rule);
}
.dp-pub-field { margin-bottom: 20px; }
.dp-pub-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--dp-ink-faint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.dp-pub-field input,
.dp-pub-field select {
    width: 100%;
    padding: 13px 15px;
    background: var(--dp-white);
    color: var(--dp-ink);
    border: 1px solid var(--dp-rule);
    border-radius: 0;
    font-family: var(--dp-font);
    font-size: 15px;
}
.dp-pub-field input:focus,
.dp-pub-field select:focus {
    outline: none;
    border-color: var(--dp-navy);
}
.dp-pub-field input::placeholder { color: var(--dp-ink-faint); }
.dp-pub-form-note {
    margin: 0 0 8px;
    color: var(--dp-ink-faint) !important;
    font-size: 13px !important;
}
.dp-pub-form .dp-pub-submit,
.dp-pub-form button[type="submit"] {
    width: 100%;
    margin-top: 12px;
    padding: 17px;
    background: var(--dp-navy);
    color: var(--dp-white);
    border: 1px solid var(--dp-navy);
    border-radius: 0;
    font-family: var(--dp-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 180ms ease;
}
.dp-pub-form .dp-pub-submit:hover { opacity: 0.88; }
.dp-pub-success h3 {
    margin: 0 0 8px;
    color: var(--dp-navy);
    font-size: 20px;
    font-weight: 700;
}
.dp-pub-success p { margin: 0; }

/* ── El equipo ───────────────────────────────────────────────────────────── */
.dp-pub-team { background: var(--dp-paper); }
.dp-pub-team h2 { margin-bottom: 40px; }
.dp-pub-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.dp-pub-team__card {
    padding: 28px;
    background: var(--dp-white);
    border: 1px solid var(--dp-rule);
}
.dp-pub-team__foto {
    width: 132px;
    height: 132px;
    margin-bottom: 18px;
    border: 1px solid var(--dp-rule);
    border-radius: 50%;
    background-color: var(--dp-paper);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dp-ink-faint);
    font-size: 42px;
    font-weight: 300;
}
.dp-pub-team__card h3 {
    margin: 0 0 4px;
    color: var(--dp-navy);
    font-size: 17px;
    font-weight: 700;
}
.dp-pub-team__card p {
    margin: 0 0 16px;
    color: var(--dp-ink-faint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.dp-pub-team__links { display: flex; gap: 10px; }
.dp-pub-team__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--dp-navy);
    border: 1px solid var(--dp-rule);
    transition: background 180ms ease, color 180ms ease;
}
.dp-pub-team__links a:hover { background: var(--dp-navy); color: var(--dp-white); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dp-pub section,
    .dp-pub-commit,
    .dp-pub-demand,
    .dp-pub-criteria,
    .dp-pub-method,
    .dp-pub-sold,
    .dp-pub-team,
    .dp-pub-form-section { padding: 64px 0; }
    .dp-pub-hero { padding: 104px 0 64px; }
    .dp-pub-hero__inner,
    .dp-pub-form-grid { grid-template-columns: 1fr; gap: 40px; }
    .dp-publicar-reel { justify-self: center; width: 260px; }
    .dp-pub-steps { grid-template-columns: 1fr; }
    .dp-pub-sold__grid { grid-template-columns: 1fr 1fr; }
    .dp-pub-team__grid { grid-template-columns: 1fr 1fr; }
    .dp-pub-crit__row { grid-template-columns: 1fr; gap: 12px; }
    .dp-pub-form-card { padding: 28px; }
    .dp-pub-form-grid { grid-template-areas: "intro" "card" "foto"; }
    .dp-pub-form-foto { max-width: 440px; }
}
@media (max-width: 520px) {
    .dp-pub-sold__grid { grid-template-columns: 1fr; }
    .dp-pub-team__grid { grid-template-columns: 1fr; }
}

/* Sello del pie (solo /publicar/): segundo logo, debajo. El de la cabecera no cambia. */
.dp-footer .dp-footer-logo--sello { margin-bottom: 10px; }
.dp-footer .dp-footer-logo--sello img,
.dp-footer .dp-footer-logo--sello .dp-sello {
    display: block;
    max-height: 112px;
    height: auto;
    width: auto;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .dp-footer .dp-footer-logo--sello img,
    .dp-footer .dp-footer-logo--sello .dp-sello { max-height: 88px; }
}

/* ── Tarjeta · quien representa o selecciono la propiedad ─────────────── */
.dp-card-agent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dp-rule);
}
.dp-card-agent-foto {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
.dp-card-agent-foto--ini {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-navy);
    color: var(--dp-white);
    font-family: var(--dp-font);
    font-size: 12px;
    font-weight: 700;
}
.dp-card-agent-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dp-card-agent-rol {
    font-family: var(--dp-font);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dp-ink-faint);
}
.dp-card-agent-nombre {
    font-family: var(--dp-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--dp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Codigo DP-N en la ficha: fuera del H1, tenue, al final de la linea de ubicacion (v2026.08.31.115). */
.dp-ficha-zona .dp-ficha-code { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--dp-rule, rgba(11,26,46,.14)); font-size: 11px; letter-spacing: .14em; color: var(--dp-ink-faint, #8a94a3); font-weight: 700; }