/* ==========================================================================
   INMO21 — UNIFIED STYLESHEET (presentacion)
   All page styles consolidated into a single file.
   ========================================================================== */

/* =============================================
   CSS CUSTOM PROPERTIES
   ============================================= */
:root {
    --navy: #152C4A;
    --navy-dark: #0F1F35;
    --navy-light: #1E3B5E;
    --gold: #D4952B;
    --gold-hover: #C0841F;
    --gold-light: #E8A83E;
    --bg-light: #F4F5F9;
    --bg-white: #FFFFFF;
    --text-dark: #1A1A2E;
    --text-body: #4A4A5A;
    --text-muted: #7A7A8A;
    --border: #E2E4EA;
    --green-wa: #25D366;
    --green: #1B8F5A;
    --red-tag: #E74C3C;
    /* Ajuste de border-radius para un look más cuadrado/moderno según la imagen */
    --radius-sm: 44px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* =============================================
   GLOBAL RESETS & BASE
   ============================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    background: var(--bg-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

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

/* Ajuste del ancho del container */
.container,
.im-footer .uk-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* =============================================
   NAVBAR
   ============================================= */
.im-navbar {
    background: var(--bg-white);
    height: 75px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.im-navbar .uk-container,
.im-navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 75px;
    /* Ajustado a la altura del navbar */
    margin: 0 auto;
    /* Asegura centrado */
    max-width: 1280px;
    padding: 0 24px;
}

.im-navbar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px !important;
    width: 121.5px !important;
    flex-shrink: 0;
    /* Evita que el logo se deforme */
}

.im-navbar-logo svg,
.im-navbar-logo img {
    height: 100%;
    width: auto;
}

.im-navbar-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    /* MODIFICACIÓN AQUÍ */
    margin-left: auto;
    margin-right: 0 !important;
}

.im-navbar-nav li a {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.im-navbar-nav li a:hover {
    color: var(--gold);
}

/* Estilo del enlace de usuario */
.im-navbar-nav .im-user-link {
    display: flex !important;
    align-items: center;
}

/* Tamaño del icono SVG */
.im-user-link .im-user-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px;
}

/* Hamburger toggle — hidden on desktop */
.im-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 1010;
    -webkit-tap-highlight-color: transparent;
}

.im-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-dark);
    /* Color oscuro para que se vea en fondo blanco */
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.2s;
}

.im-hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.im-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.im-hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav styles */
@media (max-width: 768px) {
    .im-navbar {
        height: 68px;
        /* Mantenemos una buena altura para el header */
    }

    .im-navbar .uk-container,
    .im-navbar .container {
        height: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .im-navbar-logo svg,
    .im-navbar-logo img {
        height: 34px !important;
        /* Logo proporcionado */
    }

    .im-hamburger {
        display: flex;
        margin-right: -8px;
        /* Alineación fina con el borde derecho */
    }

    /* Contenedor del menú desplegable */
    .im-navbar-nav {
        display: none;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--bg-white);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        /* Padding general del contenedor para que nada toque los bordes */
        padding: 10px 24px 32px;
        border-top: 1px solid var(--border);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        z-index: 1005;
    }

    .im-navbar-nav.open {
        display: flex;
    }

    .im-navbar-nav li {
        border-bottom: 1px solid var(--border);
    }

    /* El último elemento (el botón) no lleva borde y tiene espacio extra arriba */
    .im-navbar-nav li:last-child {
        border-bottom: none;
        padding-top: 24px;
    }

    /* Estilo de los enlaces normales */
    .im-navbar-nav li a {
        padding: 18px 0;
        /* Padding vertical generoso, horizontal 0 porque el padre ya tiene */
        font-size: 16px;
        font-weight: 600;
        color: var(--text-dark);
        width: 100%;
        display: block;
    }

    /* Estilo específico para el botón dorado en móvil */
    .im-navbar-nav li a.im-btn-gold {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 14px 24px;
        border-radius: var(--radius-sm);
        font-size: 15px;
        font-weight: 700;
        color: #fff !important;
        width: 100%;
        box-shadow: 0 4px 12px rgba(212, 149, 43, 0.2);
    }
}

/* =============================================
   BUTTONS
   ============================================= */
.im-btn-gold {
    background: var(--gold);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;

}

.im-btn-gold:hover {
    background: var(--gold-hover);
    transform: translateY(-1px);
}

.im-btn-gold-outline {
    background: transparent;
    color: var(--gold) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--gold);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.im-btn-gold-outline:hover {
    background: var(--gold);
    color: #fff !important;
}

.im-btn-submit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: var(--gold);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(212, 149, 43, 0.25);
    margin-top: 4px;
}

.im-btn-submit:hover {
    background: var(--gold-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(212, 149, 43, 0.3);
}

.im-btn-submit:active {
    transform: translateY(0);
}

.im-btn-whatsapp {
    width: 100%;
    height: 46px;
    background: var(--green-wa);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 5px;
}

.im-btn-whatsapp:hover {
    background: #1db954;
}

.im-btn-whatsapp svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.im-btn-details {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: var(--gold);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.im-btn-details:hover {
    background: var(--gold-hover);
    color: #ffffff;
}

.im-btn-read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    border: 2px solid var(--border);
    padding: 7px 14px;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
}

.im-btn-read:hover {
    border-color: var(--navy);
    color: var(--navy);
}

/* =============================================
   BREADCRUMB
   ============================================= */
.im-breadcrumb {
    padding: 20px 0 0;
}

.im-breadcrumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.im-breadcrumb ul li {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.im-breadcrumb ul li a {
    color: var(--text-muted);
    transition: color 0.2s;
}

.im-breadcrumb ul li a:hover {
    color: var(--navy);
}

.im-breadcrumb ul li:not(:last-child)::after {
    content: '/';
    color: var(--text-muted);
    margin-left: 2px;
}

.im-breadcrumb ul li:last-child {
    font-weight: 600;
    color: var(--text-body);
}

/* =============================================
   FORM ELEMENTS
   ============================================= */
.im-form-group {
    margin-bottom: 20px;
}

.im-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 7px;
}

.im-form-input-wrap {
    position: relative;
}

.im-form-input {
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: 4px;
    background: var(--bg-light);
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    transition: box-shadow 0.2s, background 0.2s, border-color 0.2s;
    outline: none;
}

.im-form-input::placeholder {
    color: #B0B3BC;
}

.im-form-input:focus {
    background: #fff;
    box-shadow: 0 0 0 2px var(--navy);
}

.im-form-input.has-icon {
    padding-right: 48px;
}

.im-form-textarea {
    min-height: 90px;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background: #fff;
    transition: border-color 0.2s;
    width: 100%;
    resize: vertical;
    line-height: 1.5;
}

.im-form-textarea:focus {
    outline: none;
    border-color: var(--navy);
}

.im-form-textarea::placeholder {
    color: #b0b3ba;
}

.im-toggle-pw {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: color 0.2s;
}

.im-toggle-pw:hover {
    color: var(--text-dark);
}

.im-toggle-pw svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Checkbox rows */
.im-form-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
}

.im-form-checkbox-row input[type="checkbox"] {
    display: none;
}

/* 1. Resetear el checkbox original */
.im-form-cb-box {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #ffffff !important;
    border: 2px solid #00008b !important;
    /* Borde azul oscuro */
    border-radius: 3px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
    display: inline-block !important;
    position: relative !important;
}

/* 2. Estilo cuando está marcado (Azul oscuro + Check blanco) */
.im-form-cb-box:checked {
    background-color: #00008b !important;
    /* Fondo azul oscuro */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Esto fuerza el tamaño de letra que vos quieras */
span.wpcf7-list-item-label {
    font-size: 12px !important;
    /* Proba con 15px, suele ser el ideal */
    line-height: 1.4 !important;
    /* Esto evita que se vea "achicado" o pegoteado */
    color: #444 !important;
    /* Aseguramos que el color sea bien legible */
}

.im-form-checkbox-row input[type="checkbox"]:checked+.im-form-cb-box,
.im-form-checkbox-row input:checked+.im-form-cb-box {
    background: var(--navy);
    border-color: var(--navy);
}

.im-form-checkbox-row input[type="checkbox"]:checked+.im-form-cb-box svg,
.im-form-checkbox-row input:checked+.im-form-cb-box svg {
    display: block;
}

.im-form-cb-box svg {
    display: none;
    width: 12px;
    height: 12px;
    stroke: #fff;
    stroke-width: 3;
}

.im-form-cb-text {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* =============================================
   HERO SECTION (home)
   ============================================= */
.im-hero {
    position: relative;
    height: 420px;
    background: #1a3a5c;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 40px;
}

.im-hero-bg {
    position: absolute;
    inset: 0;
    background: url('../images/home/banner-home.png') center/cover no-repeat;
    z-index: 0;
}

.im-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(21, 44, 74, 0.15) 0%, rgba(21, 44, 74, 0.45) 100%);
}

.im-hero-search {
    position: relative;
    z-index: 1;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 32px 36px 28px;
    box-shadow: var(--shadow-lg);
    width: 800px;
    max-width: 92vw;
    /* Corregido: Layout inline para los campos */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.im-hero-search h2 {
    font-size: 21px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 4px;
    line-height: 1.3;
    flex: 0 0 100%;
}

.im-hero-search p {
    font-size: 16px;
    font-weight: 500;
    font-family: sans-serif;
    color: #111111;
    margin: 0 0 20px;
    flex: 0 0 100%;
}

.im-search-tabs {
    display: flex;
    gap: 0px;
    margin-bottom: 0;
    margin-right: 16px;
}

.im-search-tab {
    padding: 10px 24px;
    border-radius: 0px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.2s;
}

.im-search-tab {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.2s;
}

.im-search-tabs .im-search-tab:first-child {
    border-radius: 8px 0 0 8px;
}

.im-search-tabs .im-search-tab:last-child {
    border-radius: 0 8px 8px 0;
}

.im-search-tab.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.im-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
}

.im-search-select {
    flex: 1;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-body);
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A7A8A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.im-search-btn {
    height: 44px;
    width: 150px;
    padding: 0 32px;
    background: var(--gold);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.im-search-btn:hover {
    background: var(--gold-hover);
}

/* =============================================
   SECTION: GESTION (home) - SOLUCIÓN EXACTA
   ============================================= */
.im-gestion {
    margin-top: 5vh;
    padding: 20px 0;
    background-color: var(--navy);
    position: relative;
    /* ANCLA PRINCIPAL PARA LA FOTO */
    overflow: hidden;
}

/* El grid mantiene el texto a la izquierda */
.im-gestion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Texto a la izq, derecha vacía */
    gap: 56px;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
    position: static;
    /* CAMBIO CLAVE: Libera a la imagen para que toque el borde del monitor */
}

/* Nuevo: Le damos el poder de estar por encima de la foto solo al bloque de texto */
.im-gestion-content {
    position: relative;
    z-index: 2;
    /* Texto por encima de todo */
    max-width: 100%;
    /* Ajusta este valor si necesitas más o menos espacio */
}

.im-gestion-content h2 {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.25;
}

.im-gestion-content>p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    margin: 0 0 24px;
}

.im-gestion-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.im-gestion-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 1.5;
}

.im-gestion-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: var(--gold);
    margin-top: 6px;
}

/* --- LA MAGIA PARA QUE NO SEA UN RECUADRO --- */
.im-gestion-img {
    position: absolute;
    height: 102%;
    top: 0;
    right: 0;
    bottom: 0;
    /* En vez de un % fijo, hacemos que empiece JUSTO a la mitad de la pantalla
       y ocupe todo el lado derecho. Esto evita el hueco. */
    left: 43%;
    z-index: 1;
    /* Por debajo del texto */

    /* El fundido: desde la izquierda (0%) empieza transparente y 
       se vuelve sólido rápidamente (15%) para tapar el corte. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%);
}

.im-gestion-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Pegamos la foto a la izquierda del contenedor de la imagen, 
       así la gente se acerca más al texto en monitores muy anchos */
    object-position: center left;
}

/* =============================================
   MÓVILES
   ============================================= */
@media (max-width: 960px) {
    .im-gestion {
        padding-bottom: 0;

    }

    .im-gestion-grid {
        grid-template-columns: 1fr;
        /* Una sola columna */
        padding: 0 24px 40px;
        /* Espacio antes de la foto */
    }

    .im-gestion-img {
        position: relative;
        /* Vuelve a su lugar natural abajo */
        width: 100%;
        left: 0;
        /* Reiniciamos el left que le dimos en desktop */
        height: 380px;

        /* En móvil, el fundido va de arriba hacia abajo */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
        display: none;
    }
}

/* =============================================
   SECTION HEADER (shared)
   ============================================= */
.im-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.im-section-header h2 {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
}

.im-section-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body);
    border: 2px solid var(--border);
    border-radius: 30px;
    padding: 8px 18px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.im-section-link:hover {
    border-color: var(--navy);
    color: var(--navy);
}

/* =============================================
   SECTION: PROPIEDADES DESTACADAS (home)
   ============================================= */
.im-properties {
    padding: 64px 0 72px;
    background: var(--bg-white);
    /* Corregido: Fondo blanco */
}

.im-prop-tabs {
    display: flex;
    gap: 0px;
    /* Muy importante para que estén pegados */
    margin-bottom: 24px;
}

/* 1. Estilos base para AMBOS botones (estado inactivo por defecto) */
.im-prop-tab {
    padding: 12px 15px;
    /* Tu tamaño original */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    /* Fondo blanco para el inactivo */
    color: var(--navy);
    /* Texto oscuro para el inactivo */
    border: 1px solid var(--border);
    /* Borde gris/suave */
}

/* 2. Redondear solo las esquinas exteriores */
.im-prop-tabs .im-prop-tab:first-child {
    border-radius: 8px 0 0 8px;
    /* Izquierda redondeada */
}

.im-prop-tabs .im-prop-tab:last-child {
    border-radius: 0 8px 8px 0;
    /* Derecha redondeada */
    margin-left: -1px;
    /* TRUCO: Evita que el borde en el medio se sume y se vea el doble de grueso */
}

/* 3. Estilos del botón ACTIVO */
.im-prop-tab.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    /* El borde también se pinta de azul */
    position: relative;
    z-index: 1;
    /* TRUCO: Hace que el botón azul pase por encima del borde gris del otro botón */
}

/* =============================================
   PROPERTY CARDS (shared across pages)
   ============================================= */
.im-prop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.im-prop-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.25s, box-shadow 0.25s;
    border: 1px solid var(--border);
}

.im-prop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.im-prop-card-img {
    position: relative;
    width: 100%;
    /* Mantenemos la proporción 16:9 sin importar el ancho */
    aspect-ratio: 16 / 9;
    /* Eliminamos el height fijo de 200px */
    overflow: hidden;
    background: #d0d5dd;
}

.im-prop-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Elimina espacios residuales debajo de la imagen */
    transition: transform 0.4s;
}

.im-prop-card:hover .im-prop-card-img img {
    transform: scale(1.05);
}

.im-prop-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--red-tag);
    /* Corregido: Etiqueta roja */
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.im-prop-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    box-shadow: none;
}

.im-prop-arrows:hover {
    background: none;
}

.im-prop-arrows.left {
    left: 8px;
}

.im-prop-arrows.right {
    right: 8px;
}

.im-prop-card-body {
    padding: 18px 18px 20px;
}

.im-prop-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.im-prop-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
}

.im-prop-icons {
    display: flex;
    gap: 8px;
}

.im-prop-icons button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    transition: color 0.2s;
}

.im-prop-icons button:hover {
    color: var(--gold);
}

.im-prop-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 2px;
}

.im-prop-location {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 14px;
}

.im-prop-features {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.im-prop-feature {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

.im-prop-feature svg {
    width: 15px;
    height: 15px;
    stroke: var(--text-muted);
}

/* Carousel Arrows for whole section */
.im-carousel-wrapper {
    position: relative;
}

.im-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.im-carousel-arrow:hover {
    border-color: var(--navy);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.im-carousel-arrow.left {
    left: -23px;
}

.im-carousel-arrow.right {
    right: -23px;
}

/* =============================================
   SECTION: SERVICIOS (home)
   ============================================= */
.im-services {
    padding: 64px 0 72px;
    background: var(--bg-light);
    /* Corregido: Fondo gris claro */
}

.im-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.im-service-card {
    display: flex;
    gap: 20px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.2s, box-shadow 0.2s;
    align-items: flex-start;
}

.im-service-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 20px rgba(212, 149, 43, 0.1);
}

.im-service-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.im-service-icon.blue {
    background: linear-gradient(135deg, #1E3B5E, #2A5078);
}

.im-service-icon.gold-bg {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
}

.im-service-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 8px;
}

.im-service-content p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 16px;
}

.im-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 7px 16px;
    transition: all 0.2s;
}

.im-link-arrow:hover {
    border-color: var(--navy);
    color: var(--navy);
}

/* =============================================
   SECTION: NOTICIAS (home)
   ============================================= */
.im-news {
    padding: 64px 0 72px;
    background: var(--bg-white);
    /* Corregido: Fondo blanco */
}

.im-news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.im-news-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: transform 0.25s;
}

.im-news-card:hover {
    transform: translateY(-3px);
}

.im-news-card-img {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: #c8cdd5;
}

.im-news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.im-news-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.im-news-badge.guia {
    background: var(--red-tag);
    /* Corregido: Guía es rojo */
    color: #fff;
}

.im-news-badge.noticia {
    background: #00BCD4;
    /* Corregido: Noticia es cyan/azul claro */
    color: #fff;
}

.im-news-card-body {
    padding: 16px 16px 20px;
}

.im-news-date {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 0 6px;
    font-weight: 500;
}

.im-news-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.im-news-excerpt {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================
   SECTION: CTA / COMO GESTIONAMOS (home)
   ============================================= */
.im-cta-section {
    background: var(--bg-light);
    /* Corregido: Fondo claro */
    position: relative;
    overflow: hidden;
}

.im-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

.im-cta-content {
    padding: 64px 48px 48px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.im-cta-content h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--navy);
    /* Corregido: Texto oscuro */
    margin: 0 0 16px;
    line-height: 1.25;
}

.im-cta-content p {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0 0 28px;
}

.im-cta-stats {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-top: 32px;
    border-top: 2px solid var(--border);
}

.im-cta-stat {
    display: flex;
    align-items: flex-start;
}

.im-cta-stat>div {
    margin-top: 20px;
    display: flex;
    flex-direction: row !important;
    /* ACÁ ESTÁ LA CLAVE: deshace mi error */
    align-items: center;
    /* Centra todo verticalmente con el número gigante */
    gap: 6px;
    /* Espacio entre el +de, el 25 y el años */
}

.im-cta-stat-prefix {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
}

.im-cta-stat-number {
    font-size: 48px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1;
}

.im-cta-stat-unit {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
}

/* 3. Mantenemos el +de, el 25 y el 'años' en la misma línea */
.im-cta-stat-prefix,
.im-cta-stat-number,
.im-cta-stat-unit {
    display: inline-block;
    vertical-align: baseline;
    /* Esto los alinea por su base perfectamente */
}

/* 4. EL TRUCO: Obligamos a la etiqueta a romper la línea y ponerse abajo */
.im-cta-stat-label {
    display: block !important;
    /* Rompe la línea */
    margin-left: 0 !important;
    /* Le quitamos el margin-left que traía de tu CSS original */
    margin-top: 4px;
    /* Un pequeño respiro con el número */
    line-height: 1.2;
    font-size: 12px;
}

.im-cta-image {
    position: relative;
}

.im-cta-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================
   SECTION: NEWSLETTER (home)
   ============================================= */
.im-newsletter {
    /* Corregido: Fondo con imagen oscura */
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('../images/home/foto-newsletter.png') center/cover no-repeat;
    padding: 50px 0;
    width: 100%;
}

.im-newsletter-inner {
    display: flex;
    align-items: center;
    gap: 48px;
}

.im-newsletter h2 {
    font-size: 32px;
    font-weight: 400;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    width: 310px;
    min-width: auto;
    ;

    /* 2. Dibuja la línea */
    border-right: 2px solid rgba(255, 255, 255, 0.4);

    /* 3. El truco del Padding: 
       15px arriba, 40px derecha, 15px abajo, 0 izquierda.
       Esto hace que la línea crezca 15px hacia arriba y 15px hacia abajo! */
    padding: 15px 25px 60px 0;
}

.im-newsletter-form-wrapper {
    flex: 1;
}

.im-newsletter-form-wrapper p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 10px;
    font-weight: 500;
}

.im-newsletter-form {
    display: flex;
    gap: 10px;
}

.im-newsletter-input {
    flex: 1;
    height: 46px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: var(--text-dark);
    outline: none;
}

.im-newsletter-input::placeholder {
    color: var(--text-muted);
}

.im-newsletter-btn {
    height: 46px;
    padding: 0 28px;
    background: var(--gold);
    /* Corregido: Botón dorado */
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.im-newsletter-btn:hover {
    background: var(--gold-hover);
}

/* =============================================
   FOOTER (shared across all pages)
   ============================================= */
.im-footer {
    background: #071A2B;
    padding: 48px 0 0;

    /* --- EL TRUCO PARA ROMPER EL CONTENEDOR --- */
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.im-footer-grid {
    display: grid;
    grid-template-columns: 0.9fr 0.1fr 0.1fr 0.1fr;
    gap: 24px;
    padding-bottom: 40px;
    align-items: start;
}

.im-footer-logo svg {
    height: 44px;
    margin-bottom: 20px;
}

.im-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.im-footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.im-footer-contact li a {
    color: #ffffff;
    /* Fuerza el color blanco */
    text-decoration: none;
    /* Asegura que no tengan subrayado */
    transition: color 0.2s ease;
    /* Transición suave para el hover */
}

.im-footer-contact li svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    min-width: 16px;
    color: #ffffff;
}

.im-footer h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
}

.im-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.im-footer-links li a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.2s;
}

.im-footer-links li a:hover {
    color: #fff;
}

.im-footer-col-last {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 10px;
    align-items: center;
}

.im-footer-col-last>a.im-btn-gold-gestion {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: start;
    margin: 0;
}

.im-footer-col-last>h5 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.im-footer-col-last>.im-footer-social {
    grid-column: 2;
    grid-row: 2;
}

.im-footer h5 {
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.im-footer-social {
    display: flex;
    gap: 12px;
}

.im-footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s, background 0.2s;
    background: transparent;
}

.im-footer-social a:hover {
    color: var(--gold);
    background: transparent;
}

.im-footer-social a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.im-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 0;
}

.im-footer-bottom p {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.6;
    margin: 0;
}

/* Mobile responsiveness for footer */
@media (max-width: 768px) {
    .im-footer-grid {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 20px;
    }

    .im-footer-col-last {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 0;
        row-gap: 12px;
        align-items: start;
    }

    .im-footer-col-last>a.im-btn-gold-gestion,
    .im-footer-col-last>h5,
    .im-footer-col-last>.im-footer-social {
        grid-column: 1;
        grid-row: auto;
        justify-self: stretch;
    }

    .im-footer-col-last>a.im-btn-gold-gestion {
        width: 100%;
        max-width: fit-content;
    }
}

/* =============================================
   CATALOGO — PAGE HEADER
   ============================================= */
/* Oculta el navbar específicamente en la página de producto */
.single-product .im-sidebar {
    display: none !important;
}

.im-page-header {
    padding: 12px 0 24px;
}

.im-page-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--navy);
    margin: 0;
    line-height: 1.3;
}


/* Aplicar estilo de inputs al textarea de Contact Form 7 */
textarea.wpcf7-form-control.wpcf7-textarea.im-form-textarea {
    background-color: #f4f6f8;
    /* Cambia este código si tus otros inputs tienen otro gris/blanco */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px;
    width: 100%;
    font-family: inherit;
    resize: vertical;
    /* Para que el usuario pueda estirarlo si quiere */
    box-sizing: border-box;
    /* Importante para que el padding no rompa el ancho */
}

/* Para que se vea igual cuando haces clic (foco) */
textarea.wpcf7-form-control.wpcf7-textarea.im-form-textarea:focus {
    border-color: #d4af37;
    /* Ajusta este color al de tu marca (el dorado/mostaza) */
    outline: none;
}

/* =============================================
   CATALOGO — TOOLBAR
   ============================================= */
.im-toolbar {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
    border: 2px solid var(--border);
    margin-bottom: 10vh;
    width: 100%;
}

.im-toolbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (max-width: 768px) {
    .im-toolbar {
        border: none;
        /* Elimina el borde */
        margin-bottom: 24px;
        /* Le saca los 10vh gigantes y vuelve a un margen normal (si no querés nada de margen, ponele 0) */
        width: auto;
        /* Le saca el 100% forzado */
    }

    /* Apila el selector y los botones de vista */
    .im-toolbar-right {
        flex-direction: column;
        /* Pone un elemento debajo del otro */
        align-items: flex-start;
        /* Los alinea a la izquierda (puedes usar 'stretch' si quieres que ocupen todo el ancho o 'center' para centrarlos) */
        width: 100%;
        gap: 16px;
        /* Le da un poco de respiro/espacio entre el select y los botones */
    }

    /* Opcional: Forzamos a que el selector ocupe todo el ancho para que se vea mejor en celular */
    .im-sort-select {
        width: 100%;
    }
}

/* =============================================
   CATALOGO — TOOLBAR TABS (Reemplazar este bloque)
   ============================================= */
.im-toolbar-tabs {
    display: flex;
    gap: 0;
    /* Pegamos los botones */
    /* Eliminamos el padding y el background gris que tenía antes el contenedor */
}

/* Estilos base para AMBOS botones (estado inactivo por defecto) */
.im-toolbar-tab {
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    /* Fondo blanco */
    color: var(--navy);
    /* Letra azul oscuro */
    border: 1.5px solid var(--border);
    /* Borde gris sutil */
}

/* Redondear solo las esquinas exteriores */
.im-toolbar-tabs .im-toolbar-tab:first-child {
    border-radius: 8px 0 0 8px;
    /* Redondea izquierda */
}

.im-toolbar-tabs .im-toolbar-tab:last-child {
    border-radius: 0 8px 8px 0;
    /* Redondea derecha */
    margin-left: -1.5px;
    /* TRUCO: Monta un botón sobre otro para que el borde del medio no se vea doble */
}

/* Estilos del botón ACTIVO */
.im-toolbar-tab.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    /* El borde se vuelve azul */
    position: relative;
    z-index: 1;
    /* TRUCO: Hace que el botón activo pase por encima y tape el borde gris del inactivo */
    box-shadow: none;
    /* Quitamos la sombra que tenía tu código viejo */
}

.im-toolbar-count {
    font-size: 13px;
    color: var(--text-body);
    font-weight: 500;
    margin: 0;
    line-height: 1;
    /* Lo iguala a la altura de los botones */
}

.im-toolbar-count strong {
    font-weight: 700;
}

.im-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.im-toolbar-right .woocommerce-ordering {
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.im-sort-select {
    height: 40px;
    padding: 0 36px 0 14px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-body);
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A7A8A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    min-width: 240px;
}

.im-view-toggle {
    display: flex;
    gap: 4px;
}

.im-view-btn {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 2px solid var(--border);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
}

.im-view-btn.active {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.im-view-btn:not(.active):hover {
    border-color: var(--text-muted);
}

/* =============================================
   CATALOGO — LAYOUT (Sidebar + Grid)
   ============================================= */
.im-listing-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: start;
}

/* =============================================
   CATALOGO — SIDEBAR FILTERS
   ============================================= */
.im-sidebar {
    position: sticky;
    top: 92px;
    height: 95%;
    margin-bottom: 20%;
}

.im-save-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    cursor: pointer;
    margin-bottom: 16px;
    transition: color 0.2s;
}

.im-save-search:hover {
    color: var(--gold-hover);
}

.im-save-search svg {
    width: 16px;
    height: 16px;
}

.im-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.im-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-body);
    cursor: default;
    transition: border-color 0.2s;
}

.im-filter-tag:hover {
    border-color: var(--text-muted);
}

.im-filter-tag-close {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
}

.im-filter-tag-close:hover {
    color: #e74c3c;
}

.im-clear-all {
    display: flex;
    /* Cambiado de inline-flex a flex para que ocupe el 100% del ancho */
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;

    /* --- LÍNEA SEPARADORA --- */
    margin-bottom: 24px;
    padding-bottom: 16px;
    /* Espacio entre el texto y la línea */
    border-bottom: 1px solid var(--border);
    /* La línea gris */

    background: none;
    border-top: none;
    /* Nos aseguramos de no tener bordes arriba */
    border-left: none;
    border-right: none;
    transition: color 0.2s;
    width: 100%;
    /* Forzamos a que la línea vaya de lado a lado del sidebar */
}

.im-clear-all:hover {
    color: #e74c3c;
}

.im-filter-group {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.im-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.im-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0;
    margin-bottom: 16px;
    user-select: none;
}

.im-filter-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.im-filter-header svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted);
    transition: transform 0.3s;
}

.im-filter-group.collapsed .im-filter-header svg {
    transform: rotate(-180deg);
}

.im-filter-group.collapsed .im-filter-body {
    display: none;
}

.im-filter-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.im-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.im-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-body);
    cursor: pointer;
    flex: 1;
    user-select: none;
    padding-left: 8px;
}

.im-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: #fff;
    border: 1px solid grey;
}

.im-checkbox-row input[type="checkbox"] {
    display: none;
}

.im-checkbox-row input[type="checkbox"]:checked+.im-checkbox-label .im-checkbox {
    background: var(--navy);
    border-color: var(--navy);
}

.im-checkbox-row input[type="checkbox"]:checked+.im-checkbox-label .im-checkbox svg {
    display: block;
}

.im-checkbox svg {
    display: none;
    width: 12px;
    height: 12px;
    stroke: #fff;
    stroke-width: 3;
}

.im-checkbox-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    min-width: 30px;
    text-align: right;
}

/* =============================================
   CATALOGO — PAGINATION
   ============================================= */
.im-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 36px;
    padding-bottom: 16px;
}

.im-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid var(--border);
    background: #fff;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.2s;
}

.im-page-btn:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.im-page-btn.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.im-page-btn.arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* =============================================
   DETALLE — LAYOUT
   ============================================= */
.im-detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 10px;
    padding: 24px 0 0;
    align-items: start;
}

.im-detail-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.im-detail-right {
    position: sticky;
    top: 84px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* =============================================
   DETALLE — GALLERY
   ============================================= */
.im-gallery-main {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #c8cdd5;
    cursor: pointer;
}

.im-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* NUEVO BOTÓN DE PLAY (Estilo rectángular transparente) */
.im-gallery-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 70px;
    border-radius: 16px;
    background: transparent;
    border: 4px solid rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

.im-gallery-play:hover {
    transform: translate(-50%, -50%) scale(1.05);
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* Ocultamos el SVG anterior y creamos el triángulo con CSS puro */
.im-gallery-play svg {
    display: none;
}

.im-gallery-play::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 24px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
    margin-left: 6px;
    /* Centrado visual del triángulo */
}

/* CONTENEDOR DE MINIATURAS */
.im-gallery-thumbs {
    display: flex;
    gap: 6px;
    /* Espaciado sutil como en la imagen */
    margin-top: 6px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* MINIATURAS */
.im-gallery-thumb {
    flex: 1;
    /* Fuerza a que todas ocupen exactamente el mismo ancho */
    min-width: 0;
    aspect-ratio: 16/10;
    /* Un poco más anchas */
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    /* Quitamos el borde para un look más limpio */
    background: #d0d5dd;
    transition: opacity 0.2s;
}

.im-gallery-thumb:not(.active):hover {
    opacity: 0.8;
    /* Efecto hover sutil */
}

.im-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* FLECHAS DE NAVEGACIÓN SUPERPUESTAS */
.im-thumb-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 44px;
    border-radius: 0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: none;
    transform: none;
    /* Anulamos el translateY(-50%) original */
    color: #fff;
    /* Color para heredar al SVG */
    transition: background 0.2s;
}

.im-thumb-arrow.left {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
}

.im-thumb-arrow.right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
}

.im-thumb-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.im-thumb-arrow svg {
    stroke: currentColor;
    /* Tomará el color blanco definido arriba */
    width: 28px;
    height: 28px;
}

/* =============================================
   DETALLE — SIDEBAR CONTACT
   ============================================= */
.im-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.im-sidebar-action-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
}

.im-sidebar-action-link:hover {
    color: var(--gold-hover);
}

.im-sidebar-action-link svg {
    width: 16px;
    height: 16px;
}

.im-contact-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 18px 24px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
}

.im-contact-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 20px;
}

.im-contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* =============================================
   DETALLE — PROPERTY INFO
   ============================================= */
.im-prop-info {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 28px 32px;
    box-shadow: var(--shadow-card);
    margin-top: 28px;
}

.im-prop-badge-detail {
    display: inline-block;
    background: var(--red-tag);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 12px;
}

.im-prop-info h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 4px;
    line-height: 1.3;
}

.im-prop-info .im-location {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.im-prop-info .im-price {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-dark);
    margin: 0;
}

.im-features-row {
    display: flex;
    gap: 0;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.im-feature-item {
    flex: 1;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
}

.im-feature-icon {
    width: 60px;
    height: 60px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.im-feature-icon svg {
    width: 30px;
    height: 30px;
    stroke: var(--navy);
    stroke-width: 1.5;
    fill: none;
}

.im-feature-item:hover .im-feature-icon {
    border-color: var(--gold);
}

.im-feature-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-body);
    text-align: center;
}

/* =============================================
   DETALLE — DESCRIPTION
   ============================================= */
.im-description {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 28px 32px;
    box-shadow: var(--shadow-card);
    margin-top: 24px;
}

.im-description h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 16px;
}

.im-description p {
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.75;
    margin: 0 0 12px;
}

.im-description p:last-child {
    margin-bottom: 0;
}

/* =============================================
   DETALLE — UBICACION / MAP
   ============================================= */
.im-ubicacion {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 28px 32px;
    box-shadow: var(--shadow-card);
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

.im-ubicacion h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 10px;
}

.im-ubicacion-address {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.im-ubicacion-address svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold);
    min-width: 18px;
}

.im-map-container {
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 360px;
    background: #dce3ea;
    position: relative;
    z-index: 1;
}

.im-map-container iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    /* Elimina espacios en blanco residuales */
    border: none !important;
}

#detailMap {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* =============================================
   DETALLE — ZONA
   ============================================= */
.im-zona {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 28px 32px;
    box-shadow: var(--shadow-card);
    margin-top: 24px;
}

.im-zona h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 6px;
}

.im-zona>p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 20px;
}

.im-zona-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.im-zona-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body);
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.im-zona-tab.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.im-zona-tab:not(.active):hover {
    border-color: var(--navy);
    color: var(--navy);
}

.im-zona-tab svg {
    width: 16px;
    height: 16px;
}

.im-zona-tab.active svg {
    stroke: #fff;
}

.im-zona-tab:not(.active) svg {
    stroke: var(--text-muted);
}

.im-zona-content {
    display: none;
}

.im-zona-content.active {
    display: block;
}

.im-zona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}

.im-zona-col h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 12px;
}

.im-zona-item {
    margin-bottom: 12px;
}

.im-zona-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body);
    margin: 0 0 2px;
}

.im-zona-item-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
}

.im-zona-item-meta svg {
    width: 12px;
    height: 12px;
    stroke: var(--text-muted);
}

/* =============================================
   DETALLE — SIMILARES
   ============================================= */
.im-similares {
    margin-top: 40px;
    padding-bottom: 12px;
}

.im-similares h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 24px;
}

.im-sim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* =============================================
   SERVICIOS — PAGE LAYOUT
   ============================================= */
.im-page-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    padding-top: 24px;
    padding-bottom: 60px;
    align-items: start;
}

.im-main-col {
    min-width: 0;
}

.im-sidebar-col {
    position: sticky;
    top: 80px;
    align-self: start;
}

/* =============================================
   SERVICIOS — HERO IMAGE
   ============================================= */
.im-hero-img {
    border-radius: 4px;
    overflow: hidden;
    background: #dde0e5;
    margin-bottom: 0;
}

.im-hero-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================
   SERVICIOS — MISION
   ============================================= */
.im-mision {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 40px 0 36px;
    border-bottom: 1px solid var(--border);
}

.im-mision-badge {
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.im-mision-badge .years-num {
    font-size: 54px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -2px;
}

.im-mision-badge .years-text {
    font-size: 24px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    font-style: italic;
    margin-top: -2px;
}

.im-mision-content {
    flex: 1;
}

.im-mision-content h2 {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 12px;
    line-height: 1.35;
}

.im-mision-content p {
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.8;
    margin: 0;
}

/* =============================================
   SERVICIOS — SERVICE BLOCKS
   ============================================= */
.im-servicios-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-dark);
    padding: 40px 0 28px;
    margin: 0;
}

.im-servicio-block {
    padding: 32px 0;
}

.im-servicio-block+.im-servicio-block {
    border-top: 1px solid var(--border);
}

.im-servicio-inner {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: start;
}

.im-servicio-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.im-servicio-images .img-wrap {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: #dde0e5;
}

.im-servicio-images .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.im-servicio-content h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 2px;
    line-height: 1.3;
}

.im-servicio-content .subtitle {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-body);
    margin: 0 0 12px;
}

.im-servicio-content .desc {
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.75;
    margin: 0 0 18px;
}

.im-servicio-content .incluye-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 12px;
}

.im-servicio-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.im-servicio-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.5;
}

.im-servicio-list li::before {
    content: '';
    width: 7px;
    height: 7px;
    min-width: 7px;
    background: var(--gold);
    transform: rotate(45deg);
    border-radius: 1px;
}

.im-servicio-section-alt {
    background: var(--bg-light);
    margin-left: -24px;
    margin-right: calc(-24px - 32px - 340px);
    padding-left: 24px;
    padding-right: calc(24px + 32px + 340px);
}

/* =============================================
   SERVICIOS — CTA BANNER
   ============================================= */
.im-cta-banner {
    position: relative;
    padding: 72px 0;
    background: url('../images/servicios/foto-final.png') center/cover no-repeat;
    text-align: center;
}

.im-cta-banner h2 {
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.3;
}

.im-cta-banner p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 28px;
    font-weight: 500;
}

.im-cta-banner .im-btn-gold {
    font-size: 15px;
    padding: 14px 36px;
}

/* =============================================
   LOGIN / REGISTRO — AUTH LAYOUT
   ============================================= */
.im-auth-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 28px 0 72px;
    align-items: start;
    min-height: calc(100vh - 64px - 48px - 260px);
}

.im-auth-left {
    max-width: 520px;
}

.im-auth-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.im-auth-right-img {
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    max-width: 560px;
    background: #1a2a3f;

    /* --- LA SOLUCIÓN --- */
    height: auto;
    /* Dejamos que la altura se adapte automáticamente */
    /* (Borramos el height: 80vh y el aspect-ratio: 4/5 que tenías antes) */
}

.im-auth-right-img img {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    display: block;
}

/* Auth tabs */
.im-auth-tabs {
    display: inline-flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1.5px solid var(--border);
    margin-bottom: 28px;
}

.im-auth-tab {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: #fff;
    color: var(--text-body);
    font-family: 'Inter', sans-serif;
    position: relative;
}

.im-auth-tab:first-child {
    border-right: 1.5px solid var(--border);
}

.im-auth-tab.active {
    background: var(--navy);
    color: #fff;
}

.im-auth-tab:not(.active):hover {
    background: var(--bg-light);
}

/* Auth title */
.im-auth-title {
    font-size: 30px;
    font-weight: 900;
    color: var(--text-dark);
    margin: 0 0 28px;
    line-height: 1.2;
}

/* Toggle switch */
.im-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.im-toggle input {
    display: none;
}

.im-toggle-track {
    width: 40px;
    height: 22px;
    background: #D0D3DA;
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.im-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.im-toggle input:checked+.im-toggle-track {
    background: var(--navy);
}

.im-toggle input:checked+.im-toggle-track::after {
    transform: translateX(18px);
}

.im-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-body);
}

/* Form row */
.im-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.im-forgot-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-body);
    transition: color 0.2s;
}

.im-forgot-link:hover {
    color: var(--navy);
}

/* Auth bottom link */
.im-auth-bottom {
    text-align: center;
    margin-top: 24px;
    font-size: 13.5px;
    color: var(--text-body);
}

.im-auth-bottom a {
    font-weight: 700;
    color: var(--text-dark);
    border-bottom: 1.5px solid var(--text-dark);
    transition: color 0.2s, border-color 0.2s;
}

.im-auth-bottom a:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* Privacy text */
.im-privacy-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.im-privacy-text a {
    color: var(--text-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.im-privacy-text a:hover {
    color: var(--gold);
}

/* Auth checkbox (login/register) */
label.im-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 24px;
    user-select: none;
}

label.im-checkbox input {
    display: none;
}

.im-checkbox-box {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-top: 1px;
}

/* 1. Asegúrate de que el SVG esté oculto por defecto */
.im-checkbox-box svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
    stroke-width: 3;
    fill: none;
    opacity: 0;
    /* Oculto */
    transition: opacity 0.15s;
    display: block;
    /* Para evitar espacios extraños */
}

/* 2. El selector CORRECTO para mostrarlo */
/* Importante: quita el punto antes de 'label' si es la etiqueta */
label.im-checkbox input:checked~.im-checkbox-box svg {
    opacity: 1;
    /* Se muestra al marcar */
}

/* 3. Estilo del cuadro cuando está marcado */
label.im-checkbox input:checked~.im-checkbox-box {
    background: var(--navy);
    border-color: var(--navy);
}

/* Modifica esta parte en tu CSS */
body.page-login-registro label.im-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

body.page-login-registro .im-checkbox-box {
    margin: 0;
}

body.page-login-registro .im-checkbox-text {
    line-height: 1.4;
    flex: 1;
    /* Permite que el texto crezca */
    white-space: normal;
}

body.page-login-registro .im-checkbox-text a {
    color: var(--text-dark);
}

.im-checkbox-text {
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.5;
}

.im-checkbox-text a {
    color: var(--text-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.im-checkbox-text a:hover {
    color: var(--gold);
}

/* Auth panels */
.im-auth-panel {
    display: none;
}

.im-auth-panel.active {
    display: block;
}


/* =============================================
   AJUSTE DE CAJA DE FORMULARIO (LOGIN/REGISTRO)
   ============================================= */
form.woocommerce-form-login,
form.woocommerce-form-register {
    height: auto !important;
    /* LA MAGIA: display flex en columna obliga a la caja a estirarse hasta el último elemento */
    display: flex;
    flex-direction: column;
    padding-bottom: 32px !important;
    /* Volvemos a un padding normal, solo para dar un poco de aire al final */
    margin-bottom: 24px !important;
}

/* Arreglamos los márgenes internos para que el texto de privacidad no empuje de más */
.im-privacy-text {
    margin-bottom: 24px !important;
    /* Separa el texto del botón */
}

.im-btn-submit {
    margin-bottom: 0 !important;
    margin-top: auto;
    /* Empuja el botón suavemente hacia el fondo de la caja */
    position: relative !important;
}

/* =============================================
   CONTRASENA — STEP PANELS
   ============================================= */
.im-page-title {
    font-size: 30px;
    font-weight: 900;
    color: var(--navy);
    margin: 0 0 8px;
    line-height: 1.2;
}

.im-subtitle {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 10px;
    line-height: 1.45;
}

.im-body-text {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0 0 24px;
}

.im-step {
    display: none;
}

.im-step.active {
    display: block;
    animation: fadeUp 0.35s ease-out;
}

.im-success-icon {
    width: 56px;
    height: 56px;
    background: rgba(27, 143, 90, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.im-success-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.im-email-masked {
    font-weight: 700;
    color: var(--text-dark);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   SCROLLBAR CUSTOM
   ============================================= */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: #c1c5ce;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a5ae;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1200px) {
    .im-prop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1060px) {
    .im-detail-layout {
        grid-template-columns: 1fr;
    }

    .im-detail-right {
        position: static;
        order: -1;
    }

    .im-sidebar-actions {
        align-items: flex-start;
    }

    .im-sim-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 960px) {
    .im-gestion-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .im-prop-grid {
        grid-template-columns: 1fr 1fr;
    }

    .im-news-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .im-services-grid {
        grid-template-columns: 1fr;
    }

    .im-cta-grid {
        grid-template-columns: 1fr;
    }

    .im-cta-content {
        padding: 48px 20px;
    }

    .im-cta-image {
        min-height: 280px;
    }

    .im-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .im-newsletter-inner {
        flex-direction: column;
        gap: 16px;
    }

    .im-listing-layout {
        grid-template-columns: 1fr;
    }

    .im-sidebar {
        position: static;
        order: -1;
    }

    .im-toolbar {
        flex-direction: column;
        align-items: flex-start;

    }

    .im-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .im-page-layout {
        grid-template-columns: 1fr;
    }

    .im-sidebar-col {
        position: static;
        order: -1;
    }

    .im-servicio-section-alt {
        margin-right: -24px;
        padding-right: 24px;
    }

    .im-auth-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .im-auth-right {
        justify-content: center;
    }

    .im-auth-right-img {
        max-width: 480px;
        aspect-ratio: 16/10;
    }

    .im-auth-left {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .im-features-row {
        gap: 8px;
    }

    .im-feature-item {
        min-width: 70px;
    }

    .im-sim-grid {
        grid-template-columns: 1fr;
    }

    .im-zona-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .im-servicio-inner {
        grid-template-columns: 1fr;
    }

    .im-servicio-images {
        max-width: 280px;
    }

    .im-mision {
        flex-direction: column;
        gap: 16px;
    }

    .im-mision-badge {
        flex-direction: row;
        gap: 8px;
        align-items: baseline;
    }

    .im-cta-banner h2 {
        font-size: 22px;
    }

    .im-cta-banner p {
        font-size: 14px;
    }

    .im-auth-right {
        display: none;
    }

    .im-auth-title,
    .im-page-title {
        font-size: 24px;
    }
}

@media (max-width: 640px) {
    .im-prop-grid {
        grid-template-columns: 1fr;
    }

    .im-news-grid {
        grid-template-columns: 1fr;
    }

    .im-footer-grid {
        grid-template-columns: 1fr;
    }

    .im-hero {
        height: 380px;
        padding-bottom: 24px;
    }

    .im-hero-search {
        padding: 24px 20px;
        flex-direction: column;
        align-items: stretch;
    }

    .im-search-tabs {
        margin-bottom: 12px;
        margin-right: 0;
        width: 100%;
    }

    .im-search-tabs .im-search-tab {
        flex: 1;
    }

    .im-search-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .im-search-select,
    .im-search-btn {
        width: 100%;
    }

    .im-cta-stats {
        flex-direction: column;
        gap: 16px;
    }

    .im-carousel-arrow {
        display: none;
    }

    .im-sort-select {
        min-width: auto;
        flex: 1;
    }

    .im-gallery-thumbs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .im-gallery-thumb {
        min-width: 100px;
        flex: none;
    }
}

@media (max-width: 480px) {
    .im-auth-tabs {
        width: 100%;
    }

    .im-auth-tab {
        flex: 1;
        text-align: center;
        padding: 12px 16px;
    }
}

/* =============================================
   BLOG — LAYOUT
   ============================================= */
.im-blog-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    padding-bottom: 60px;
    align-items: start;
}

.im-blog-main {
    min-width: 0;
}

.im-blog-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
}

/* =============================================
   BLOG — FEATURED ARTICLE
   ============================================= */
.im-featured {
    margin-bottom: 36px;
}

.im-featured-img {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #dde0e5;
    margin-bottom: 16px;
}

.im-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.im-tag {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;
}

.im-tag-guia {
    background: var(--red-tag);
}

.im-tag-noticia {
    background: #00BCD4;
}

.im-tag-static {
    position: static;
}

.im-featured-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.im-featured h2 {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-dark);
    margin: 0 0 10px;
    line-height: 1.3;
}

.im-featured p {
    font-size: 13.5px;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0 0 16px;
}

.im-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.im-btn-outline:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.im-btn-outline-sm {
    padding: 7px 14px;
    font-size: 12px;
}

/* =============================================
   BLOG — SIDEBAR: NOTICIAS POPULARES
   ============================================= */
.im-popular-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--text-dark);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
}

.im-popular-item {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.im-popular-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.im-popular-item .date {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.im-popular-item h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 6px;
    line-height: 1.4;
}

.im-popular-item .read-more {
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

.im-popular-item .read-more:hover {
    color: var(--gold-hover);
}

/* =============================================
   BLOG — ARTICLE LIST
   ============================================= */
.im-article-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.im-article-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--border);
    align-items: start;
}

.im-article-card:first-child {
    border-top: 2px solid var(--border);
}

.im-article-card-img {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #dde0e5;
    /* Agregamos esto para asegurar que el contenido dentro se alinee al centro */
    display: flex;
    justify-content: center;
    align-items: center;
}

.im-article-card-img img {
    width: 100% !important;
    height: 100% !important;
    /* object-fit cover ya está bien, pero object-position asegura el centro */
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    /* Por si acaso el tema le aplica algún margen extra al ser img */
    margin: 0 !important;
    padding: 0 !important;
}

.im-article-card-body .date {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.im-article-card-body h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 8px;
    line-height: 1.35;
}

.im-article-card-body p {
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0 0 14px;
}

/* =============================================
   BLOG DETALLE — ARTICLE CONTENT
   ============================================= */
.im-detail-hero {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #dde0e5;
    margin-bottom: 20px;
}

.im-detail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.im-detail-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.im-detail-main h1 {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-dark);
    margin: 0 0 14px;
    line-height: 1.3;
}

.im-detail-lead {
    font-size: 15px;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0 0 24px;
    font-weight: 500;
}

.im-detail-main .body-text {
    font-size: 13.5px;
    color: var(--text-body);
    line-height: 1.8;
    margin: 0 0 20px;
}

.im-detail-main h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 32px 0 14px;
    line-height: 1.35;
}

.im-detail-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 28px 0;
}

.im-detail-images figure {
    margin: 0;
}

.im-detail-images .img-wrap {
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #dde0e5;
}

.im-detail-images .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.im-detail-images figcaption {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 8px;
}

.im-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 36px 0;
}

/* =============================================
   BLOG DETALLE — RELATED ARTICLES
   ============================================= */
.im-related-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-dark);
    margin: 0 0 24px;
}

.im-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.im-related-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: box-shadow 0.2s, transform 0.2s;
}

.im-related-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
}

.im-related-card-img {
    position: relative;
    aspect-ratio: 4/3;
    background: #dde0e5;
    overflow: hidden;
}

.im-related-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.im-related-card-body {
    padding: 16px;
}

.im-related-card-body .date {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.im-related-card-body h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 6px;
    line-height: 1.4;
}

.im-related-card-body p {
    font-size: 12px;
    color: var(--text-body);
    line-height: 1.6;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================
   BLOG DETALLE — SIDEBAR ACTIONS
   ============================================= */
.im-sidebar-action {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    padding: 0;
}

.im-sidebar-action:hover {
    color: var(--gold-hover);
}

.im-sidebar-action svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.im-detail-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
}

/* =============================================
   BLOG — RESPONSIVE
   ============================================= */
@media (max-width: 960px) {
    .im-blog-layout {
        grid-template-columns: 1fr;
    }

    .im-blog-sidebar {
        position: static;
        order: -1;
    }

    .im-detail-sidebar {
        position: static;
        order: -1;
    }

    .im-newsletter h2 {
        width: 100%;
        /* Deja de forzar los dos renglones */
        border-right: none;
        /* Saca la línea vertical */
        padding: 0;
        /* Saca el "aire" artificial que le dimos a la línea */
        margin-bottom: 12px;
        /* Le da un poco de espacio hacia abajo antes del texto */
        text-align: center;
        /* Lo centra para que quede prolijo en el celular */
    }
}

@media (max-width: 700px) {
    .im-article-card {
        grid-template-columns: 1fr;
    }

    .im-article-card-img {
        max-width: 320px;
    }

    .im-featured h2 {
        font-size: 20px;
    }

    .im-detail-images {
        grid-template-columns: 1fr;
    }

    .im-related-grid {
        grid-template-columns: 1fr;
    }

    .im-detail-main h1 {
        font-size: 21px;
    }
}

/* ==========================================================================
   CUSTOM STYLES FOR "FAVORITOS" PAGE
   ========================================================================== */

/* Sidebar Menu */
.account-sidebar-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.account-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-menu-item {
    border-bottom: 1px solid var(--border);
}

.account-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: color 0.2s;
}

.account-menu-link:hover {
    color: var(--navy);
}

.account-menu-link-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-menu-link-content svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.account-menu-link>svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-muted);
    transition: transform 0.3s;
}

.account-menu-item.active .account-menu-link>svg {
    transform: rotate(180deg);
}

.account-submenu {
    list-style: none;
    padding: 0 0 20px 32px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.account-submenu a {
    font-size: 14px;
    color: var(--text-body);
    transition: color 0.2s;
    display: block;
}

.account-submenu a:hover {
    color: var(--navy);
}

.account-submenu a.active {
    color: var(--navy);
    font-weight: 600;
}

/* Favorites List & Horizontal Cards */
.favorites-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.favorite-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.favorite-item>.im-checkbox-row {
    margin: 0;
}

.im-prop-card-horizontal {
    display: flex;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
    flex: 1;
    transition: box-shadow 0.2s, transform 0.2s;
}

.im-prop-card-horizontal:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.im-prop-card-horizontal .im-prop-card-img {
    position: relative;
    width: 280px;
    min-width: 280px;
    height: 200px;
    background: #d0d5dd;
}

.im-prop-card-horizontal .im-prop-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.im-prop-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: var(--red-tag);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.im-prop-card-horizontal .im-prop-card-body {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.im-prop-card-horizontal .im-prop-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}

.im-prop-card-horizontal .im-prop-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.im-prop-card-horizontal .im-prop-location {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.im-prop-features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.im-prop-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-body);
    font-weight: 500;
}

.im-prop-feature svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.5;
}

/* Responsive */
@media (max-width: 960px) {
    .im-listing-layout {
        grid-template-columns: 1fr;
    }

    .im-sidebar {
        position: static;
        margin-bottom: 32px;
    }

    .im-prop-card-horizontal {
        flex-direction: column;
    }

    .im-prop-card-horizontal .im-prop-card-img {
        width: 100%;
        min-width: 100%;
        height: 220px;
    }

    .favorite-item {
        align-items: flex-start;
    }

    .favorite-item>.im-checkbox-row {
        margin-top: 20px;
    }
}

@media (max-width: 640px) {
    .im-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .im-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .im-toolbar-left {
        flex-wrap: wrap;
    }
}



/* =============================================
   CAROUSEL FUNCTIONALITY FIXES (OVERFLOW)
   ============================================= */
.im-carousel-wrapper>.im-prop-grid,
.im-carousel-wrapper>.im-news-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.im-carousel-wrapper>.im-prop-grid::-webkit-scrollbar,
.im-carousel-wrapper>.im-news-grid::-webkit-scrollbar {
    display: none;
}

.im-carousel-wrapper>.im-prop-grid>* {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 250px;
    scroll-snap-align: start;
}

.im-carousel-wrapper>.im-news-grid>* {
    flex: 0 0 calc(25% - 16px);
    min-width: 300px;
    scroll-snap-align: start;
}

@media (max-width: 1060px) {

    .im-carousel-wrapper>.im-prop-grid>*,
    .im-carousel-wrapper>.im-news-grid>* {
        flex: 0 0 calc(50% - 12px);
    }
}

@media (max-width: 640px) {

    .im-carousel-wrapper>.im-prop-grid>*,
    .im-carousel-wrapper>.im-news-grid>* {
        flex: 0 0 100%;
        min-width: 100%;
    }
}

.im-btn-gold-gestion {
    background: var(--gold);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin-right: 8vw;
}

.im-footer .im-btn-gold-gestion {
    margin-right: 0;
    margin-top: 0;
    justify-self: start;
}

.im-footer-grid {
    align-items: start;
}

.im-btn-gold-gestion:hover {
    background: var(--gold-hover);
    transform: translateY(-1px);
}

.im-properties-similares {
    padding: 64px 0 72px;
    background: var(--bg-white);
    width: 70%;
    box-sizing: border-box;
    /* Corregido: fondo blanco */
}

.im-btn-submit-detalle {
    width: fit-content;
    padding: 14px 32px;
    border: none;
    border-radius: 8px;
    background: var(--gold);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(212, 149, 43, 0.25);
    margin-top: 4px;
}

.im-btn-submit-detalle:hover {
    background: var(--gold-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(212, 149, 43, 0.3);
}

.im-btn-submit-detalle:active {
    transform: translateY(0);
}

/* Color gris para el corazón (estado normal) */
.im-fav-btn svg {
    stroke: #808080 !important;
}

/* Opcional: Color más oscuro al pasar el mouse (hover) */
.im-fav-btn:hover svg {
    stroke: #555555 !important;
}


/* =============================================
   VISTA LISTA (CATALOGO LISTA)
   ============================================= */
.im-prop-list-view {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.im-prop-card-list {
    display: flex;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s, box-shadow 0.25s;

    /* ACÁ ESTÁ LA MAGIA: Fijamos el alto exacto */
    height: 230px;
}

.im-prop-card-list:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Aseguramos que el contenedor de la imagen respete ese alto */
.im-prop-card-list .im-prop-card-img {
    width: 300px;
    min-width: 300px;
    height: 100%;
    position: relative;
}

.im-prop-card-list .im-prop-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Espaciado del cuerpo de la tarjeta */
.im-prop-card-list .im-prop-card-body {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

/* Header con la línea divisoria (Precio, Título, Iconos) */
.im-prop-card-list .im-prop-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.im-prop-card-list .im-prop-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 4px;
}

.im-prop-card-list .im-prop-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px 0;
}

.im-prop-card-list .im-prop-location {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Estilo para los botones de compartir/corazón */
.im-prop-card-list .im-prop-actions {
    display: flex;
    gap: 8px;
}

.im-prop-card-list .im-prop-actions button {
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #A0A5B1;
    /* Gris suave de la imagen */
    transition: all 0.2s;
}

.im-prop-card-list .im-prop-actions button:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Footer de la tarjeta (Características y Botón principal) */
.im-prop-card-list .im-prop-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.im-prop-card-list .im-prop-features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    border-top: none;
    /* Esto saca la línea extra */
    padding-top: 0;
    /* Esto quita el espacio que dejaba la línea */
    margin-bottom: 0;
    /* Alinea mejor los íconos con el botón dorado */
}

/* Cambiar el radio del botón y pegarlo a la derecha en la vista de lista */
.im-prop-card-list .im-btn-gold {
    border-radius: 8px;
    /* El radio que ajustaste antes */
    margin-right: 0;
    /* Le saca el margen global que lo empujaba al centro */
    margin-left: auto;
    /* Lo empuja con fuerza hacia la derecha */
    align-self: flex-end;
    /* Por si el texto de la izquierda ocupa dos líneas, mantiene el botón abajo */
}

/* ADAPTACIÓN MÓVIL */
@media (max-width: 768px) {
    .im-prop-card-list {
        flex-direction: column;
        /* IMPORTANTE: Reiniciamos el alto para que en celular no quede aplastado */
        height: auto;
    }

    .im-prop-card-list .im-prop-card-img {
        width: 100%;
        min-width: 100%;
        height: 220px;
    }

    .im-prop-card-list .im-prop-card-body {
        padding: 20px;
    }

    .im-prop-card-list .im-prop-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .im-prop-card-list .im-prop-card-footer .im-btn-gold {
        width: 100%;
        justify-content: center;
    }
}