/* Corrección: Evita que "Destacadas" se salga por la derecha */
.TituloResultados {
    width: 100%;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #0b3f62;
    color: white;
    text-align: center;
    box-sizing: border-box; /* <--- ESTO EVITA EL DESFASE */
}
/* =======================================================
   SISTEMA DE GRID PARA LAS FICHAS (PC)
   ======================================================= */
#divResultados,
#divResultadoDestacadas {
    display: grid !important;
    /* Forzamos estrictamente a 3 columnas, sin importar cuántos elementos haya */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: max-content !important; /* Para que todas las filas midan lo necesario */
    gap: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    align-items: stretch !important; /* Para que todas las fichas de un renglón midan lo mismo de alto */
}

    #divResultados > *,
    #divResultadoDestacadas > * {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        /* OJO: Esto evita que un hijo rebelde intente abarcar 2 columnas */
        grid-column: span 1 !important;
    }

    /* === EL EXORCISMO PARA RENGOLONES FANTASMA === */
    /* Si ASP.NET o algún script inyectó un div con clase "row" o contenedor intermedio, 
   esto hace que visualmente desaparezca y el Grid se aplique directo a las fichas hijas */
    #divResultados > div:not(.FichaGeneral):not(.ficha-inmueble)
     {
        display: contents !important;
    }


/* =======================================================
   ESTILOS PARA PRECIOS DE PROPIEDADES
   ======================================================= */
.divPrecio {
    width: 100%;
    padding: 5px;
    display: flex;
    justify-content: start;
}

    .divPrecio .precio {
        border: 1px solid #0b3f62;
        outline: none;
        border-radius: 25px;
    }

.precio::placeholder {
    color: #0139aa;
}

.seleccionPrecios {
    position: relative;
    left: -85px;
    top: -5px;
    display: none;
    border: thin solid #0b3f62;
    border-radius: 8px;
    height: 350px;
    width: 400px;
    background-color: white;
    -webkit-box-shadow: 4px 4px 6px 0px rgba(140,127,140,0.6);
    -moz-box-shadow: 4px 4px 6px 0px rgba(140,127,140,0.6);
    box-shadow: 4px 4px 6px 0px rgba(140,127,140,0.6);
}

.inputPrecio {
    outline: none;
    outline-color: #c1ccd5;
    border-width: thin;
    border-color: #c1ccd5;
    border: 1px solid #c1ccd5;
    padding: 10px;
    height: 25px;
}

.inputMinimo {
    border-radius: 8px 0 0 8px;
}

.inputMaximo {
    border-radius: 0 8px 8px 0;
    position: relative;
    left: -1px;
}

.textoPrecio {
    border-radius: 25px;
    outline: none;
    padding: 10px 10px 10px 37px;
    position: relative;
    left: -50px;
    width: 250px;
    font-size: 16px;
    color: #0139aa;
}




/* RESPONSIVO: Tablets (iPads, etc. entre 769px y 1024px) */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    #divResultados,
    #divResultadoDestacadas {
        grid-template-columns: repeat(2, 1fr); /* 2 Columnas */
    }
}


/* =======================================================
   REGLAS PARA DISPOSITIVOS MÓVILES (Celulares y Tablets hasta 992px)
   ======================================================= */
@media screen and (max-width: 992px) {


    /* =======================================================
       1. CONTENEDORES PRINCIPALES Y AJUSTES DE ANCHO
       ======================================================= */

    /* El formulario general NO debe tener padding para que el carrusel toque las orillas */
    #frmCarrurel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        /*overflow-x: hidden !important;*/
    }

    /* Forzamos a que el contenedor de la búsqueda crezca a lo alto y no corte el contenido */
    .BarraBusqueda,
    .BarraBusquedaContenido {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 10px !important; /* Pequeño respiro a los lados */
        height: auto !important; /* <--- ESTO HARÁ APARECER LA BARRA EN EL MOTO G */
        /*overflow: visible !important;*/ /* <--- ESTO EVITA QUE SE ESCONDA LA MITAD DE ABAJO */
    }

    /* Contenedor de las fichas de propiedades */
    .divResultados {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
    }

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

    /* =======================================================
       2. BARRA SUPERIOR (LOGO, REDES, IDIOMA, MENÚ, CONTACTO)
       ======================================================= */
    .BannerSuperior {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        padding: 10px 0 !important;
    }

        .BannerSuperior > div:first-child {
            display: flex !important;
            justify-content: center !important;
            width: 100% !important;
            margin: 0 !important;
        }

    #login,
    .IconoInicio {
        display: none !important;
    }

    /* Contenedor de Banderas y Botones */
    .divBanderas {
        display: flex;
        flex-direction: column !important; /* FORZAMOS apilamiento vertical en lugar de wrap */
        align-items: center !important;
        width: 100% !important;
        margin: 10px 0 0 0 !important;
        padding: 0 !important;
        gap: 15px; /* Espacio vertical entre redes y botones */
    }

        /* Redes Sociales: Centrado absoluto */
        .divBanderas > div:nth-child(1) {
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            margin: 0 !important;
            padding: 0 !important;
            gap: 20px !important;
        }



    /* Contenedor de Idioma, Hamburguesa y Contáctanos */
    #btnIdiomaCompleto,
    #menu-hamburguesa,
    #contacto {
        position: relative !important;
        margin: 0 4px !important;
        display: inline-flex !important; /* Mejor soporte en iOS que solo flex */
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important;
    }

    #btnIdiomaCompleto {
        width: auto !important;
        min-width: auto !important;
        padding: 0 14px !important; /* Un poco más de padding lateral para igualar proporciones */
        border-radius: 25px !important;
        box-sizing: border-box !important;
    }

        #btnIdiomaCompleto span {
            margin: 0 6px !important;
            font-size: 13px !important;
            line-height: 1 !important;
        }

    #idioma-arriba {
        display: none !important;
    }

    #idioma-abajo {
        display: inline-block !important;
    }

    #menu-hamburguesa {
        width: 24px !important; /* Igualamos un poco el ancho visual del icono */
        padding: 0 !important;
    }

    /* === CORRECCIÓN DEL BOTÓN CONTÁCTANOS === */
    /* === CORRECCIÓN DEL BOTÓN CONTÁCTANOS === */
    #contacto {
        position: relative !important; /* Nos permite moverlo manualmente */
        top: 5px !important; /* <--- Empujón hacia abajo. Si necesitas bajarlo más, súbelo a 3px o 4px */
        box-sizing: border-box !important;
        padding: 0 !important;
    }

        #contacto a {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 32px !important;
            padding: 0 14px !important;
            margin: 0 !important;
            border-radius: 25px !important;
            box-sizing: border-box !important;
        }

        #contacto span {
            font-size: 12px !important;
            line-height: 1 !important;
            margin: 0 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
        }

    /* EFECTO SCROLL */
    .header-scrolled #btnIdiomaCompleto,
    .header-scrolled #menu-hamburguesa,
    .header-scrolled #contacto,
    .header-scrolled .contactanos-link,
    .header-scrolled .IconoInicio,
    .header-scrolled .divBanderas > div:nth-child(1) {
        display: none !important;
    }

    .header-scrolled .divBanderas {
        margin-top: 0 !important;
        padding: 0 !important;
        height: 0px !important;
    }

  
    /* =======================================================
       3. BARRA DE BÚSQUEDA (CORREGIDO PARA TODAS LAS PANTALLAS)
       ======================================================= */
    /* Ajuste de los botones "Rentar | Comprar | Desarrollos" */
    .botones-buscar {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 0 5px 0 !important;
        box-sizing: border-box !important;
    }

    .BotonFiltro, .BotonFiltroAncho {
        flex: 1 !important;
        width: 32% !important; /* Le damos 32% para dejar margen de respiración */
        text-align: center !important;
        padding: 8px 0 !important; /* Quitamos padding lateral para evitar que crezcan de más */
        font-size: 13px !important;
        margin: 0 1% !important; /* Usamos porcentajes para el margen */
        box-sizing: border-box !important;
    }

    /* Contenedor del Dropdown, Textbox y Lupa */
    .barra-buscar.fondoBusquedaAvanzada {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        padding: 5px !important;
        margin: 0 !important;
        background-color: #e9ecef !important;
    }

    /* Dropdowns (Tipo de inmueble) */
    select[id*="ddlRenta"],
    select[id*="ddlVenta"],
    select[id*="ddlDesarrollo"] {
        flex: 0 1 33% !important; /* Permitimos que se encoja (shrink) si es necesario (0 1) */
        width: 33% !important;
        max-width: 33% !important;
        font-size: 13px !important;
        padding: 5px 2px !important;
        margin: 0 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    /* Input Text (Ubicación de búsqueda) */
    input[id*="txtUbicacion"] {
        flex: 0 1 48% !important; /* Permitimos que se encoja (shrink) */
        width: 48% !important;
        max-width: 48% !important;
        font-size: 13px !important;
        padding: 5px 4px !important;
        margin: 0 1% !important; /* Separación con porcentaje, nunca fijo en píxeles */
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    /* Botón Buscar Lupa */
    a[id*="lnkBuscar"] {
        flex: 0 1 15% !important; /* Permitimos que se encoja (shrink) */
        width: 15% !important;
        max-width: 15% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .btnBuscar {
        width: 100% !important;
        height: 32px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 4px !important;
    }

        .btnBuscar img {
            width: 18px !important;
            height: 18px !important;
            padding: 0 !important;
            margin: 0 !important;
        }


    /* =======================================================
       5. SECCIÓN CONTÁCTANOS (BANNER, FORMULARIO Y MAPA)
       ======================================================= */
    #seccion-contacto,
    .contactanos-container,
    .contactanos-body {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .contactanos-container .banner {
            width: 100% !important;
            height: auto !important;
            object-fit: cover;
        }

    .contactanos-form {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    .left-form,
    .contactanos-derecha {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .form-group,
    .form-control,
    #txtMensaje {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    .contactanos-derecha {
        margin-top: 30px !important;
    }

    #mapa,
    .mapa,
    gmp-map {
        width: 100% !important;
        max-width: 100% !important;
        height: 250px !important;
        margin: 0 auto !important;
    }

    .direccion table {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 20px !important;
    }

        .direccion table td {
            word-break: break-word !important;
            font-size: 14px !important;
        }
    /* El contenedor extra que envuelve a las destacadas */
    #divDestacadas {
        width: 100% !important;
        max-width: 100vw !important; /* Que no rebase el ancho de la pantalla */
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* Si algo intenta salirse del padre, lo oculta para no crear huecos blancos a la derecha */
    }

    #divResultados,
    #divResultadoDestacadas {
        grid-template-columns: 1fr !important; /* 1 Columna */
        gap: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 10px !important; /* Un poco de respiro lateral */
        padding-right: 10px !important;
    }

        #divResultados > *,
        #divResultadoDestacadas > * {
            width: 100% !important;
            max-width: 100vw !important; /* Evita que crezca más allá de la pantalla del celular */
            margin: 0 !important;
            box-sizing: border-box !important;
        }

        /* OJO: Aquí le indicamos que SOLO aplique el 100% a la FOTO PRINCIPAL, NO a los iconos */
        /* Necesitas apuntar a la clase específica que tenga tu imagen grande. 
       Suponiendo que tus imágenes grandes tengan una clase como .img-foto-principal o estén directo en un contenedor de portada. 
       Si no tienen clase, hacemos esto para excluir iconos pequeños: */
        #divResultadoDestacadas img,
        #divResultados img {
            max-width: 100% !important; /* Evita desborde horizontal */
            height: auto !important;
            /* BORRAMOS width: 100% !important; para no agrandar los iconos */
        }

}

/* =======================================================
   SISTEMA DE GRID PARA LAS FICHAS (Sustituye al C#)
   DEBE ESTAR FUERA DE CUALQUIER MEDIA QUERY
   ======================================================= */
/* Grid Base para PC: 3 columnas */
#divResultados,
#divResultadoDestacadas {
    display: grid !important;
    /* Esto le dice a las 3 columnas que midan exactamente lo mismo */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

    /* Hacemos que cada ficha respete su espacio en el grid y no se estire */
    #divResultados > *,
    #divResultadoDestacadas > * {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

/* RESPONSIVO: Tablets (iPads, etc. entre 769px y 1024px) */
@media screen and (max-width: 1024px) and (min-width: 993px) {
    #divResultados,
    #divResultadoDestacadas {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 Columnas */
    }
}

/* RESPONSIVO: Celulares (iPhone, Motorola) */
@media screen and (max-width: 992px) {
    #divResultados,
    #divResultadoDestacadas {
        grid-template-columns: 1fr !important; /* 1 Columna */
        gap: 15px !important;
    }
}

@media screen and (max-width: 768px) {
    /* 1. Limpiamos los contenedores padres para que no empujen nada */
    section,
    #divDestacadas {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Cambiamos de Grid a Columna Flex (Es 100% a prueba de desbordes) */
    #divResultados,
    #divResultadoDestacadas {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 10px !important; /* Espacio de 10px a los lados para que no pegue en el borde */
        margin: 0 !important;
        gap: 20px !important; /* Espacio entre las fichas hacia abajo */
    }

    /* Evitamos doble margen si las destacadas están dentro de divDestacadas */
    #divDestacadas #divResultadoDestacadas {
        padding: 0 !important;
    }

    /* 3. Obligamos a las fichas a encogerse al tamaño del celular, ignorando cualquier ancho fijo */
    #divResultados > *,
    #divResultadoDestacadas > *,
    .FichaGeneral,
    .ficha-inmueble {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

        /* 4. Hacemos que las fotos grandes se adapten, pero SIN afectar a los íconos pequeños */
        .FichaGeneral img,
        .ficha-inmueble img {
            max-width: 100% !important; /* Si la foto es enorme, se encoge. Si el icono es chiquito, se queda chiquito. */
            height: auto !important;
        }
}