@charset "UTF-8";

/* =============================================
   ESTILOS EXCLUSIVOS DE VISITAR PROPIEDAD
   (comunes como footer, navbar, btn-whats-home,
    dis-footer, circulo, etc. están en style.css)
============================================= */

.page-header { border-bottom: none !important; }

/* =============================================
   FICHA DE PROPIEDAD
============================================= */
.tam-texto-desc-prop {
    font-size: 21px;
}

.h4-naranja {
    background: #FF6900;
    color: white !important;
    border-radius: 8px;
    padding-inline: 20px;
    margin-left: 20px;
    height: 30px;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    font-size: 28px;
}

.tam-iconos {
    width: 15px;
}

.texto-info-inmueble {
    text-align: left;
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* =============================================
   CARRUSEL
============================================= */
.cont-propiedad {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

.carro-wrapper {
    position: relative;
    max-width: 720px;
    margin-inline: auto;
}

.carro-arrow {
    font-size: 55px;
    color: red;
}

.tam-imagen-carro {
    width: 100%;
    border: 5px solid #b8b2b8;
    border-radius: 8px;
}

.dim-video {
    width: 100%;
    height: 410px;
}

/* =============================================
   CARACTERÍSTICAS (iconos)
============================================= */
.div-caract-icono {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}

.caract-item {
    width: calc(33.33%);
    box-sizing: border-box;
    padding: 0 4px;
}

.caract-direccion {
    width: 100%;
}

/* =============================================
   MAPA RESPONSIVO
============================================= */
.mapa-container {
    text-align: center;
}

.mapa-container iframe {
    width: 100% !important;
    max-width: 600px;
    height: 300px;
    border: 0;
}

/* =============================================
   FORMULARIO DE CONSULTA
============================================= */
.input-form-inm {
    width: 80%;
    margin-bottom: 15px;
    border-color: #FF6900;
    border-radius: 5px;
}

.centrar-input-form-cons {
    text-align: center;
}

.btn-enviar-con-mail {
    padding: 9px 15px !important;
    font-size: 15px !important;
}

/* =============================================
   MENSAJE DE AGRADECIMIENTO
============================================= */
.alinear-parrafo {
    text-align: center;
    font-size: 30px;
    color: #FF6900;
}

/* =============================================
   MAPA DUPLICADO (show/hide por breakpoint)
   .mapa-col        → dentro de grupo-izq  → solo desktop
   .mapa-col-mobile → dentro de grupo-der  → solo mobile/tablet
============================================= */
.mapa-col-mobile { display: none; }   /* oculto por defecto (desktop usa grupo-izq) */

/* =============================================
   RESPONSIVE — DESKTOP (≥ 992px)
   CSS Grid: 2 columnas, 2 filas.
   Evita el espacio blanco entre carrusel y mapa
   cuando la ficha naranja es más alta que el carrusel.
============================================= */
@media (min-width: 992px) {

    /* Dos columnas independientes en altura:
       grupo-izq (carrusel + mapa) y grupo-der (ficha + formulario).
       Con flex cada columna crece de forma independiente → no hay espacio
       vacío entre carrusel y mapa sin importar la altura de la ficha. */
    .layout-prop {
        display: flex !important;
        align-items: flex-start;
        gap: 20px;
    }

    .grupo-izq {
        flex: 7;
        min-width: 0;
    }

    .grupo-der {
        flex: 4;
        min-width: 0;
    }

    /* Anula max-width/width que Bootstrap puede aplicar a .col-N dentro de los grupos */
    .grupo-izq > [class*="col-"],
    .grupo-der > [class*="col-"] {
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
    }

    /* Mapa al mismo ancho que las imágenes del carrusel */
    .mapa-col iframe {
        max-width: 720px;
    }
}

/* =============================================
   RESPONSIVE — TABLET (601px – 991px)
============================================= */
@media (min-width: 601px) and (max-width: 991px) {

    .col-7,
    .col-4 {
        max-width: 100% !important;
        width: 100% !important;
    }

    .row {
        flex-direction: column !important;
    }

    .tam-imagen-carro {
        width: 100%;
        max-width: 560px;
    }

    .dim-video {
        width: 100%;
        height: auto;
    }

    .h4-naranja {
        font-size: 20px;
        height: auto;
        line-height: 1.5 !important;
    }

    .alinear-parrafo {
        font-size: 22px;
    }
}

/* =============================================
   RESPONSIVE — MOBILE (≤ 600px)
============================================= */
@media (max-width: 600px) {

    .page-header { padding-bottom: 0.1px !important; }
    html.rd-navbar-fixed-linked .page { padding-top: 0px !important; }

    .col-7 {
        max-width: 100% !important;
        margin-top: 10px !important;
    }

    .col-4 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .row {
        flex-direction: column !important;
    }

    .tam-imagen-carro {
        width: 100%;
    }

    .dim-video {
        width: 100%;
        height: auto;
    }

    .h4-naranja {
        font-size: 10px;
        width: auto;
        text-align: center;
        height: 20px;
        margin-left: 0;
        top: 6px;
        line-height: 1.7 !important;
    }

    .h4-barrio {
        font-size: 12px;
        text-align: center;
        width: 100%;
        position: static;
    }

    .borde-mobile {
        border: 2px solid #ffffff;
    }

    /* flex-direction:column viene de .row — lo revertimos solo aquí.
       margin negativo de .row también se anula para evitar desborde. */
    .div-caract-icono {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .caract-item {
        width: 50% !important;
        box-sizing: border-box;
        padding: 0 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
    }

    .caract-direccion {
        width: 100% !important;
    }

    .mapa-container iframe {
        height: 220px;
    }

    h2 {
        font-size: 14px !important;
    }

    .alinear-parrafo {
        font-size: 15px;
    }

    /* Navbar mobile */
    .mobile-whatsap { display: block !important; }
    .ico-what-mobile { font-size: 25px !important; }
    .button-sm { padding: 10px 15px !important; }
    .btn-wrap {
        margin-top: 27px !important;
        margin-left: 0 !important;
        text-align: center;
    }
    .btn-wrap-whatsap { margin-left: auto !important; }

    .rd-navbar-fixed .rd-nav-item:hover .rd-nav-link,
    .rd-navbar-fixed .rd-nav-item.focus .rd-nav-link,
    .rd-navbar-fixed .rd-nav-item.active .rd-nav-link,
    .rd-navbar-fixed .rd-nav-item.opened .rd-nav-link {
        border-radius: 15px;
        background: #f3f3f3 !important;
        font-weight: 550;
        font-size: 15px;
    }
}

/* =============================================
   MAPA SHOW/HIDE — mobile/tablet (≤ 991px)
   Oculta el mapa de grupo-izq (desktop) y muestra
   el duplicado de grupo-der para respetar el orden:
   carrusel → ficha → mapa → formulario
============================================= */
@media (max-width: 991px) {
    .mapa-col        { display: none; }
    .mapa-col-mobile { display: block; }
}