:root { --slate-800: #1e293b; --slate-700: #475569; --primary-blue: #0f52ba; }
body { font-family: system-ui, -apple-system, sans-serif; color: var(--slate-800); background-color: #f8fafc; overflow-x: hidden; margin: 0; padding: 0; }
.glass-header { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.3); z-index: 1000; }

/* BLINDAJE CSS EXIGIDO POR EL ARQUITECTO: CAPAS ABSOLUTAS INVERTIDAS */
.hero-three-container { 
    position: relative; 
    width: 100%; 
    height: 85vh; 
    min-height: 550px; 
    background-color: #030712; 
    overflow: hidden; 
}

/* Capa Base 1: El carrusel de imágenes fijas de fondo */
.hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    filter: brightness(0.9) contrast(0.7); /* Oscurecimiento premium para resaltar letras blancas */
    transition: background-image 1.2s ease-in-out; /* Fundido suave de transicion */
}

/* 2. Asegurar que la barra de búsqueda tipo píldora capture los clics */
#formBuscadorPrincipalHero .input-group {
    position: relative !important;
    z-index: 99999 !important;
}

/* 3. Blindaje de la tarjeta del acordeón colapsable expandible */
#collapseFiltrosAvanzadosHero .card {
    position: relative !important;
    z-index: 99999 !important;
    /* Evitar que eventos fantasma del canvas interfieran con el scroll */
    pointer-events: auto !important; 
}

/* 4. Asegurar que el canvas de partículas se mantenga de fondo sin robar clicks */
#threeJsWebGLCanvas {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1 !important; /* Capa base trasera */
    pointer-events: none !important; /* PERMITIR QUE LOS CLICS ATRAVIESEN EL CANVAS */
}

/* Capa Superior 3: Contenido de Texto e Inputs */
.hero-overlay-content { 
    position: relative; 
    z-index: 5; /* Control supremo de impacto frontal */
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    pointer-events: none; 
}
.interactive-element { 
    pointer-events: auto; 
}

/* Mosaicos de Categorías (Estilo Corporativo TemplateMonster) */
.category-mosaic-card { height: 220px; background-size: cover; background-position: center; position: relative; border-radius: 12px; overflow: hidden; transition: transform 0.25s ease; cursor: pointer; }
.category-mosaic-card:hover { transform: translateY(-4px); }
.category-gradient { position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(to top, rgba(3,7,18,0.9) 0%, rgba(3,7,18,0.1) 100%); }

/* Swiper Responsivo */
.swiper { width: 100%; padding-bottom: 40px !important; }
.property-swiper-card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: border-color 0.2s; }
.property-swiper-card:hover { border-color: var(--primary-blue) !important; }
.font-monospace { font-family: monospace !important; }

.hover-text-primary:hover { color: var(--primary-blue) !important; transition: color 0.2s; }
.hover-link-footer { transition: all 0.2s ease; }
.hover-link-footer:hover { color: #fff !important; transform: translateX(3px); display: inline-block; }


/* 1. La Tarjeta Base con su Sombra Suave de Alta Fidelidad */
.tarjeta-inmueble-catalogo {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: 12px !important;
    /* Inyectamos un Shadow difuminado premium */
    box-shadow: 0 4px 18px rgba(30, 41, 59, 0.04) !important;
    /* Transición suave para la animación (RAM/GPU Speed) */
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    will-change: transform, box-shadow;
}

/* 2. La Animación Hover de Elevación Líquida (Efecto Lift) */
.tarjeta-inmueble-catalogo:hover {
    /* Eleva la tarjeta verticalmente 6 píxeles */
    transform: translateY(-6px);
    /* Intenisifica la sombra simulando la distancia del piso */
    box-shadow: 0 12px 24px rgba(30, 41, 59, 0.12) !important;
    border-color: rgba(15, 82, 186, 0.15) !important; /* Brillo sutil azul inHouse */
}

/* 3. Comportamiento en Dispositivos Móviles (UX Shield) */
@media (max-width: 767.98px) {
    /* En teléfonos deshabilitamos el traslado vertical porque no hay puntero (mouse), 
       pero mantenemos la sombra compacta y ampliamos el área de toque táctil */
    .tarjeta-inmueble-catalogo:hover {
        transform: none !important;
    }
    .tarjeta-inmueble-catalogo {
        box-shadow: 0 2px 10px rgba(30, 41, 59, 0.05) !important;
    margin-bottom: 1rem;
    }
}