:root {
    --azul-pro: #00779b;
    --borde: #e5e7eb;
    --dark: #1a1a1a;
    --verde-tag: #bef264;
    --bg-light: #f8fafc;
}

body { background-color: var(--bg-light); margin: 0; padding: 0; }

/* Layout Global */
.main-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.main-flex { display: flex; gap: 30px; padding-bottom: 50px; }

/* Breadcrumb */
.breadcrumb-wrapper { padding: 20px 0; }
.breadcrumb-row { color: #64748b; font-size: 14px; }
.breadcrumb-row a { text-decoration: none; color: var(--azul-pro); font-weight: 600; }
.breadcrumb-separator { margin: 0 10px; }

/* Sidebar Filtros */
.filters-sidebar { width: 300px; flex-shrink: 0; background: #fff; padding: 25px; border-radius: 12px; border: 1px solid var(--borde); height: fit-content; position: sticky; top: 100px; }
.filter-section { margin-bottom: 25px; }
.filter-title { font-size: 16px; font-weight: 800; color: var(--dark); margin-bottom: 15px; }

/* Pills de Radio Buttons */
.pill-container { display: block; margin-bottom: 8px; cursor: pointer; }
.pill-container input { display: none; }
.pill-label { display: block; padding: 10px 15px; background: #f1f5f9; border-radius: 8px; font-size: 14px; color: #475569; font-weight: 600; transition: 0.3s; border: 1px solid transparent; }
.pill-container input:checked + .pill-label { background: #e0f2fe; color: var(--azul-pro); border-color: var(--azul-pro); }

.btn-reset-filters { width: 100%; padding: 12px; background: #fee2e2; color: #dc2626; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; margin-top: 10px; }

/* Contenido Principal */
.results-main { flex: 1; }
.results-header { margin-bottom: 30px; }
.results-header h1 { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin: 0; }
.results-header p { color: #94a3b8; margin-top: 5px; }

/* Flex de Propiedades */
/* Cambiamos de Grid a Flexbox */
.contenedor-propiedades { 
    display: flex; 
    flex-wrap: wrap; /* Para que las cajas bajen a la siguiente línea */
    gap: 25px; 
    justify-content: flex-start; /* Alinea las cajas a la izquierda */
}

/* Ajustamos el ancho de la Card */
.card-propiedad { 
    width: 330px; /* El ancho exacto que pediste */
    background: #fff; 
    border-radius: 12px; 
    border: 1px solid var(--borde); 
    overflow: hidden; 
    transition: 0.3s;
    flex-grow: 0; /* Evita que las cajas se estiren de más */
    flex-shrink: 0; /* Mantiene el tamaño fijo en 330px */
}

.card-propiedad:hover { 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    transform: translateY(-5px); 
}

/* RESPONSIVE: En móviles que ocupen todo el ancho */
@media (max-width: 768px) {
    .contenedor-propiedades {
        justify-content: center; /* Centra la caja en el celular */
    }
    .card-propiedad {
        width: 100%; /* En móvil se adapta al ancho de la pantalla */
        max-width: 400px;
    }
}

/* Estilos de las Cards */
.card-propiedad { background: #fff; border-radius: 12px; border: 1px solid var(--borde); overflow: hidden; transition: 0.3s; }
.card-propiedad:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); transform: translateY(-5px); }
.contenedor-foto { position: relative; height: 220px; }
.contenedor-foto img { width: 100%; height: 100%; object-fit: cover; }
.etiqueta-status {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #0000FF; /* Azul puro */
    color: #FFFFFF;    /* Letra blanca */
    padding: 4px 10px; /* Un poco más de aire para que se vea más pro */
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase; /* Opcional: queda muy bien en etiquetas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
    pointer-events: none;
}
.cuerpo-card { padding: 20px; border-bottom: 1px solid var(--borde); }
.precio-inmueble { font-size: 24px; font-weight: 800; color: var(--dark); margin-bottom: 5px; }
.tipo-op { font-size: 14px; font-weight: 400; color: #666; }
.titulo-inmueble { font-size: 18px; color: var(--azul-pro); font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.ubicacion-texto { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #333; font-weight: 500; }
.footer-detalles { display: flex; }
.item-det { flex: 1; padding: 12px 5px; text-align: center; border-right: 1px solid var(--borde); }
.item-det:last-child { border-right: none; }
.det-label { display: block; font-size: 11px; color: #888; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
.det-valor { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 17px; font-weight: 800; color: var(--dark); }
.det-valor svg { color: #444; }

/* --- MEJORAS DE CONTROL VISUAL (MÓVIL VS ESCRITORIO) --- */
.mobile-only-header { display: none !important; }
.mobile-filter-trigger { display: none; }

@media (max-width: 768px) {
    .main-flex { flex-direction: column; }
    
    .mobile-filter-trigger { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 10px; 
        background: var(--dark); 
        color: #fff; 
        padding: 15px; 
        border-radius: 10px; 
        margin-bottom: 20px; 
        cursor: pointer; 
        font-weight: 700; 
    }

    .filters-sidebar { 
        position: fixed; 
        left: -100%; 
        top: 0; 
        width: 100%; 
        height: 100%; 
        z-index: 2000; 
        transition: 0.4s; 
        padding: 0; 
        border-radius: 0;
        overflow-y: scroll;
    }

    .filters-sidebar.active { left: 0; }

    .mobile-only-header { 
        display: flex !important; 
        justify-content: space-between; 
        align-items: center; 
        padding: 20px; 
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .f-mobile-title { font-weight: 800; font-size: 1.2rem; color: var(--dark); }

    #formFiltros { padding: 20px; }
    
    .grid-propiedades { grid-template-columns: 1fr; }
}

/* Contenedor principal con un poco de aire */
.bienvenida-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Estilo del H1 Principal */
.main-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1e293b; /* Azul pizarra oscuro */
    margin-bottom: 25px; /* Espacio antes de la caja de bienvenida */
    letter-spacing: -1px;
    line-height: 1.2;
    text-align: center;
}

/* El toque de color en el span del H1 */
.main-title span {
    color: #2563eb; /* Tu azul principal moderno */
}

/* --- Ajuste extra para el contenedor --- */
.bienvenida-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ... mantén los estilos de .bienvenida-flex y .bienvenida-texto que te pasé antes ... */

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .main-title {
        font-size: 1.8rem;
        text-align: center;
    }
}

/* El Flexbox para alinear imagen y texto */
.bienvenida-flex {
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center; /* Centra verticalmente */
    gap: 40px; /* Espacio entre imagen y texto */
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f6;
}

/* Ajuste de la imagen */
.bienvenida-imagen {
    flex: 0 0 260px; /* Mantiene el ancho fijo de 260px */
}

.bienvenida-imagen img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
    object-fit: cover;
}

/* Ajuste del texto */
.bienvenida-texto {
    flex: 1; /* Toma el resto del espacio */
}

.titulo-bienvenida {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b; /* Color Dark moderno */
    margin-bottom: 10px;
}

.descripcion-p {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 15px;
}

.descripcion-p {
    font-size: 1.15rem;      /* Un poco más grande para destacar */
    color: #334155;          /* Un gris más oscuro (Slate 700) para mejor contraste */
    line-height: 1.7;        /* Más espacio entre líneas evita que el texto se vea amontonado */
    margin-bottom: 20px;     /* Más aire antes del siguiente elemento */
    max-width: 600px;        /* Evita que las líneas sean demasiado largas y cansen la vista */
}

/* Un toque extra para las negritas que pusimos en el HTML */
.descripcion-p strong {
    color: #1e293b;          /* Casi negro para que "Casas en Venta" resalte */
    font-weight: 700;
}

.cta-negrita {
    font-weight: 700;
    color: #0f172a;
    font-size: 1rem;
    margin-bottom: 25px;
}

/* Estilo del botón de acción 
.btn-registro {
    display: inline-block;
    background: #2563eb; 
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-registro:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
} */

.btn-registro {
    display: inline-block;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
    /* Un degradado de azul a violeta (muy profesional) */
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    border-radius: 12px; /* Bordes redondeados pero no circulares */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    cursor: pointer;
    /* La sombra que hace que "brille" */
    box-shadow: 0 10px 20px -10px rgba(37, 99, 235, 0.5);
    position: relative;
}

/* Efecto al pasar el mouse */
.btn-registro:hover {
    transform: scale(1.05) translateY(-3px); /* Crece un poquito y sube */
    box-shadow: 0 20px 30px -12px rgba(124, 58, 237, 0.6);
    filter: brightness(1.1); /* Brilla un poco más */
}

/* Efecto de click */
.btn-registro:active {
    transform: scale(0.95); /* Se hunde al presionarlo */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .bienvenida-flex {
        flex-direction: column; /* En móvil, la imagen arriba y el texto abajo */
        text-align: center;
        padding: 20px;
    }
    
    .bienvenida-imagen {
        flex: 0 0 auto;
        width: 100%;
        max-width: 260px;
    }
}


.contenedor-foto {
    background: #e2e8f0; /* Color gris mientras carga */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
}

.img-observe {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-observe.visible {
    opacity: 1;
}