*{
    font-family: "Mulish", serif;
    font-optical-sizing: auto;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
	background-color: white;
}
button {
    border: initial;
    background: initial;
    color: initial;
    padding: initial;
    margin: initial;
    text-decoration: initial;
}
a:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}
textarea {
    resize: none;
}
a:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}
h1{
	font-family: "Mulish", serif;
	font-size: 40px;
	font-weight: 600;
    margin-bottom: 50px;
}
h2{
    font-family: "Mulish", serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 50px;
}
h3{
    font-family: "Mulish", serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 50px;
}
h4{
    font-family: "Mulish", serif;
    font-size: 28px;
    font-weight: 600;
}
h5{
    font-family: "Mulish", serif;
    font-size: 22px;
    font-weight: 600;
}
p{
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 400;
}
h6{
    font-family: "Mulish", serif;
    font-size: 16px;
    font-weight: 600;
}
*:focus {
    outline: none;
}

.navbar-toggler .bi-list {
  color: white; /* Blanco */
  font-size: 32px; /* Tamaño */
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.whatsapp-container{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1;
    cursor: pointer;
    transition-duration: 0.3s;
}
.social-container{
    position: fixed;
    right: 0px;
    top: 50%;
    z-index: 1;
    cursor: pointer;
    transition-duration: 0.3s;
}
.social-container img{
    margin-bottom: 5px;
    border-radius: 8px 0px 0px 8px;
}
.whatsapp-container:hover{
    transform: scale(1.1);
}
.whatsapp-container img{
    cursor: pointer;
}
.menu {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 100px;
    background-color: rgba(44, 93, 241, 0);
    text-align: center;
    transition: background-color 0.3s ease;
}
.nav-item{
    display: inline-block;
}
.navbar-nav a{
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}
.nav-link-simple{
    padding: 5px 25px 5px 25px;
    margin: 0px 20px 0px 20px;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    transition-duration: 0.3s;
    opacity: 0;
}
#link-1{
    animation: 0.6s menuIn 1 ease-in-out;
    animation-fill-mode:forwards;
    animation-delay: 0.2s;
}
#link-2{
    animation: 0.6s menuIn 1 ease-in-out;
    animation-fill-mode:forwards;
    animation-delay: 0.4s;
}

#link-login{
    animation: 0.6s menuIn 1 ease-in-out;
    animation-fill-mode:forwards;
    animation-delay: 0.6s;
}
.navbar-brand{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: 0.6s menuIn 1 ease-in-out;
    animation-fill-mode:forwards;
    opacity: 0;
    margin: 0px 20px 0px 20px;
}
.navbar-brand img{
    height: 26px;
}
.masthead {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
}
#video-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Asegura que el video esté en el fondo */
}
.masthead-content{
    height: 100%;
    padding: 280px 600px 0px 50px;
}
.masthead h1{
    font-weight: 400;
    font-size: 48px;
    color: white;
    animation: 0.6s menuIn 1 ease-in-out;
    animation-fill-mode:forwards;
    animation-delay: 1s;
    opacity: 0;
}
.masthead button{
    background-color: #2C5DF1;
    border: solid 1px #2C5DF1;
    padding: 10px 35px 10px 35px;
    border-radius: 100px;
    color: white;
    font-size: 18px;
    transition-duration: 0.3s;
    animation: 0.6s menuIn 1 ease-in-out;
    animation-fill-mode:forwards;
    animation-delay: 1.3s;
    opacity: 0;
}
.masthead button:hover{
    border: solid 1px white;
}
.nosotros-container{
    padding: 100px 100px 100px 100px;
}
.resaltado {
    position: relative;
    display: inline-block;
    z-index: 2;
}
.resaltado::after {
    content: "";
    position: absolute;
    width: 140%; /* Ajusta el tamaño según la imagen */
    height: 140%;
    background: url('../img/lapiz.png') no-repeat center;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; /* Para que quede detrás del texto */
}
.resaltado-2{
    position: relative;
    display: inline-block;
    z-index: 2;
}
.resaltado-2::after {
    content: "";
    position: absolute;
    width: 120%; /* Ajusta el tamaño según la imagen */
    height: 120%;
    background: url('../img/lapiz.png') no-repeat center;
    background-size: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; /* Para que quede detrás del texto */
}
.nosotros-container button{
    background-color: #2C5DF1;
    padding: 10px 35px 10px 35px;
    border-radius: 100px;
    color: white;
    font-size: 22px;
    transition-duration: 0.3s;
}
.nosotros-container button:hover{
    box-shadow: 0 0.45em 0.45em -0.1em #B1C7FC;
    transform: translateY(-0.25em);
}
.asesor-container-wrapper{
    padding: 0px;
}
.asesor-container{
    height: 520px;
    padding: 0px 0px;
    background-color: #2C5DF1;
    border-radius: 1000px 30px 30px 1000px;
}
.asesor-texto{
    padding: 180px 80px 0px 80px;
    color: white;
    height: 520px;
}
.asesor-texto a{
    font-size: 20px;
    cursor: pointer;
    border: solid 2px white;
    padding: 15px 30px;
    border-radius: 100px;
    transition-duration: 0.3s;
}
.asesor-texto a:hover{
    background-color: white;
    color: #2C5DF1;
}
.asesor-img{
    background-image: url('../img/background/asesor-bg.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 1000px;
    box-shadow: 35px 0px 0px 0px rgba(98,147,237,0.80);
}
.proceso-container-wrapper{
    padding: 100px 80px;
    background-image: url('../img/proceso/proceso-bg.png');
    background-size: cover;
    background-position: center;
    background-color: #EAEAEA;
    margin: 100px 0px;
}
.proceso-container{
    padding: 0px 180px;
}
.proceso-card-row{
    overflow: hidden;
    position: relative;
}
.proceso-cards-wrapper {
    width: 100%;
    display: flex;
    transition: transform 0.5s ease;
    position: relative;
    white-space: nowrap;
    justify-content: center;
    margin: 0 auto;
}
.proceso-card{
    background-color: white;
    width: 450px;
    padding: 40px;
    text-align: center;
    transition: opacity 0.5s ease, transform 0.5s ease;
    flex-shrink: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    margin: 0 15px;
    overflow: hidden;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    border-radius: 30px;
}
.proceso-card img{
    height: 100px;
    margin-bottom: 25px;
}
.proceso-card h5{
    color: #2C5DF1;
}
.proceso-card p{
    font-size: 16px;
}
.proceso-card-hr{
    background-color: #2C5DF1;
    height: 2px;
    margin: 20px 0px;
}
.proceso-selector{
    padding: 10px 0;
    margin-bottom: 40px;
    text-align: center;
}
.proceso-selector i{
    font-size: 32px;
    cursor: pointer;
    margin: 0 20px;
}
.proceso-card-inactive{
    opacity: 1;
    transform: scale(1);
}
.proceso-card-inactive{
    opacity: 0.2;
    transform: scale(0.6);
}
.remates-container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.remates-text {
    padding: 40px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background-color: #6293ED;
    border-radius: 30px;
}
.remates-text h1, .remates-text h2 {
    color: white;
}
.remate-bullet {
    margin: 10px 0px;
}
.bullet-title {
    color: #EACA00;
    width: 100%;
    cursor: pointer;
}
.bullet-title i {
    float: right;
    font-size: 16px;
}
.bullet-hr {
    background-color: white;
    height: 1px;
    opacity: 0.6;
}
.bullet-body {
    color: white;
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease;
}
.remates-img-wrapper{
    padding: 60px 0px;
}
.remates-img {
    background-image: url('../img/background/remates-bg.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    border-radius: 0px 30px 30px 0px;
}
.alcance-container{
    padding: 120px 20px;
}
.alcance-text{
    padding: 80px 30px;
    height: 400px;
}
.alcance-map{
    width: 100%;
    height: 400px;
}
.map-img{
    width: 100%;
}
.icon-img{
    width: 20px;
    position: absolute;
}
#icon-gto{
    top: 230px;
    left: 264px;
    transform: scale(1.0);
    transition-duration: 0.3s;
    cursor: pointer;
}
#icon-gto:hover{
    transform: scale(1.4);
}
#icon-gto:hover{
    transform: scale(1.4);
}
#icon-gto::after {
    content: "Guanajuato";
    position: absolute;
    bottom: 30px; /* Ajusta la posición sobre el icono */
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: black;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
#icon-gto:hover::after {
    opacity: 1;
}
#icon-qro{
    top: 250px;
    left: 284px;
    transform: scale(1.0);
    transition-duration: 0.3s;
    cursor: pointer;
}
#icon-qro:hover{
    transform: scale(1.4);
}
#icon-bc{
    top: 5px;
    left: 28px;
    transform: scale(1.0);
    transition-duration: 0.3s;
    cursor: pointer;
}
#icon-bc:hover{
    transform: scale(1.4);
}
/* Tooltip flotante */
.tooltip {
    position: absolute;
    background-color: #2C5DF1;
    color: white;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(-5px);
    z-index: 9999;
    display: block;
    visibility: hidden;
}
.clientes-container{
    height: 400px;
    padding: 0px;
    border-radius: 30px;
    overflow: hidden;
    background-color: black;
    margin-bottom: 80px;
}
.cliente-slides {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cliente-slide {
    position: absolute;
    width: 100%;
    height: 400px;
    display: none; /* Ocultamos todos los slides */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.cliente-slide.active {
    display: block; /* Solo el activo será visible */
    opacity: 1;
    position: relative;
}
#cliente-slide-1 {
    background-image: url('../img/background/cliente-bg-1.jpg');
    background-size: cover;
    background-position: center;
}
#cliente-slide-2 {
    background-image: url('../img/background/cliente-bg-2.jpg');
    background-size: cover;
    background-position: center;
}

#cliente-slide-3 {
    background-image: url('../img/background/cliente-bg-3.jpg');
    background-size: cover;
    background-position: center;
}
.cliente-container {
    height: 100%;
    padding: 100px 200px;
}
.cliente-container p {
    font-size: 16px;
    color: white;
}
.estrella-row {
    width: 100%;
}
.bi-star-fill {
    color: #EACA00;
    font-size: 28px;
    margin: 20px 10px;
}
.video-container-wrapper{
    padding: 100px 0px;
    background-color: #EBF2FC;
}
.bi-arrow-left-circle-fill{
    color: #2C5DF1;
    margin-right: 20px;
    font-size: 44px;
}
.bi-arrow-right-circle-fill{
    color: #2C5DF1;
    margin-right: 20px;
    font-size: 44px;
}
.video-row-wrapper {
  overflow: hidden; /* Oculta el contenido que se sale del contenedor */
  position: relative;
  width: 100%;
}
.video-row {
  display: flex;
  margin: 40px 0px;
  padding: 0px 40px;
  transition: transform 0.5s ease; /* Animación suave al mover el slider */
}
.video-card {
  flex: 0 0 auto; /* Evita que los videos se ajusten al tamaño del contenedor */
  margin-right: 0px;
  margin-left: 0 px;
  overflow: hidden;
  border-radius: 20px;
  height: 600px;
  width: 380px;
  padding: 10px;
}
lite-tiktok{
    border-radius: 10px;
    height: 100%
}
.video-card video {
  height: 500px;
  width: 280px;
}
.slider-arrow {
  cursor: pointer;
  font-size: 2rem;
  margin: 0 10px;
}

.contacto-container-wrapper{
    background-image: url('../img/background/contacto-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0px;
    background-color: black;
    margin: 0px;
}
.form-control{
    height: 56px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    border: none;
    margin-bottom: 20px;
}
.form-group textarea{
    height: 260px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    border: none;
    margin-bottom: 20px;
}
.btnContacto{
    background-color: #2C5DF1;
    padding: 10px 30px;
    margin-right: 20px;
    color: white;
    height: 100%;
    border: none;
    border-radius: 100px;
}
footer{
    background-color: #2C5DF1;
    padding: 80px 0px;
}
footer .bi{
    margin-right: 10px;
}
footer p{
    color: white;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.social-wrapper .bi{
    color: white;
    font-size: 22px;
    margin-right: 20px;
    cursor: pointer;
}
.footer-hr{
    background-color: white;
    margin-top: 40px;
    margin-bottom: 40px;
}
.text-justify {
    text-align: justify;
}
.footer-qr{
    border-radius: 10px;
    height: 280px;
}
.footer-qr img{
    background-color: white;
    height: 80%;
    border-radius: 10px;
    margin-bottom: 10px;
}
.footer-qr h6{
    color: white;
}
.contacto-title{
    color: white;
    margin: 20px 0px;
}
.propiedades-container{
    padding: 80px 0px;
}
.propiedades-selectores{
    margin-bottom: 50px;
}
.propiedades-selectores button{
    margin: 0px 20px;
    padding: 10px 0px;
    width: 200px;
    border: solid 1px black;
    border-radius: 100px;
    background-color: white;
    transition-duration: 0.3s;
}
.propiedades-selectores button:hover{
    background-color: #2C5DF1;
    border: solid 1px #2C5DF1;
    color: white;
}
.propiedades-selectores button.active {
    background-color: #2c5df1;
    color: white;
    font-weight: bold;
}










@keyframes menuIn{
    0%{
        transform: translateY(-10px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}
@media (min-width:320px) and (max-width:1024px) {
    h1{
        font-family: "Mulish", serif;
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 50px;
    }
    h2{
        font-family: "Mulish", serif;
        font-size: 18px;
        font-weight: 400;
        text-transform: uppercase;
        margin-bottom: 50px;
    }
    h3{
        font-family: "Mulish", serif;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 50px;
    }
    h4{
        font-family: "Mulish", serif;
        font-size: 18px;
        font-weight: 600;
    }
    h5{
        font-family: "Mulish", serif;
        font-size: 22px;
        font-weight: 600;
    }
    p{
        font-family: 'Poppins', sans-serif;
        font-size: 16px;
        font-weight: 400;
    }
    .menu {
        display: none;
    }
    /* Botón hamburguesa */
    .hamburger {
        background: none;
        border: none;
        font-size: 30px;
        cursor: pointer;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1000;
    }
    .mobile-menu{
        background-color: #0047FF;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000; /* Asegura que siempre esté encima */

    }
    .bi-list{
        color: white;
    }
    /* Menú lateral oculto */
    .mobile-nav {
        position: fixed;
        top: 0;
        left: -250px; /* Se oculta fuera de pantalla */
        width: 250px;
        height: 100%;
        padding-top: 50px;
        transition: left 0.3s ease-in-out;
        z-index: 999;
        background-color: #0047FF;
    }
    /* Centrar el logo en el menú */
    .mobile-logo {
        text-align: center;
        padding: 20px 0;
    }
    .mobile-logo img{
        height: 25px;
    }
    /* Lista del menú */
    .mobile-nav ul {
        list-style: none;
        padding: 0;
        text-align: left;
        padding: 0px 20px;
    }

    .mobile-nav li {
        padding: 15px;
        border-bottom: 1px solid white;
    }

    .mobile-nav a {
        color: white;
        text-decoration: none;
        font-size: 18px;
        display: block;
    }

    /* Botón de cerrar */
    .close-btn {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 30px;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
    }

    /* Mostrar menú cuando esté activo */
    .mobile-nav.active {
        left: 0;
    }
    .masthead {
        position: relative;
        width: 100%;
        height: 650px;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.6);
    }
    #video-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1; /* Asegura que el video esté en el fondo */
    }
    .masthead-content{
        height: 100%;
        padding: 280px 0px 0px 50px;
    }
    .masthead h1{
        font-weight: 400;
        font-size: 28px;
        color: white;
        animation: 0.6s menuIn 1 ease-in-out;
        animation-fill-mode:forwards;
        animation-delay: 1s;
        opacity: 0;
    }
    .masthead button{
        background-color: #2C5DF1;
        border: solid 1px #2C5DF1;
        padding: 10px 35px 10px 35px;
        border-radius: 100px;
        color: white;
        font-size: 18px;
        transition-duration: 0.3s;
        animation: 0.6s menuIn 1 ease-in-out;
        animation-fill-mode:forwards;
        animation-delay: 1.3s;
        opacity: 0;
    }
    .nosotros-container{
        padding: 100px 10px;
    }
    .asesor-container-wrapper{
        padding: 0px 20px;
    }
    .asesor-container{
        background-color: rgba(44,93,241,1);
        border-radius: 1000px 1000px 30px 30px;
        padding: 0px 12px;
        height: 650px;
        margin-bottom: 40px;
        overflow: hidden;
    }
    .asesor-texto{
        padding: 10px 40px;
        color: white;
        height: 520px;
    }
    .asesor-texto a{
        font-size: 16px;
        cursor: pointer;
        border: solid 2px white;
        padding: 15px 30px;
        border-radius: 100px;
        transition-duration: 0.3s;
    }
    .asesor-texto a:hover{
        background-color: white;
        color: #2C5DF1;
    }
    .asesor-img{
        height: 400px;
        box-shadow: 35px 0px 0px 0px rgba(98,147,237,0.0);
        margin-bottom: 20px;
    }
    .proceso-container-wrapper{
        padding: 100px 0px;
        background-image: url('../img/proceso/proceso-bg-s.png');
        background-size: cover;
        background-position: center;
        background-color: #EAEAEA;
        margin: 0px 0px 0px 0px;
        overflow: hidden;
    } 
    .proceso-container{
        padding: 0px 20px;
    }
    .proceso-card-row{
        overflow: hidden;
        position: relative;
    }
    .proceso-cards-wrapper {
        width: 100%;
        display: flex;
        transition: transform 0.5s ease;
        position: relative;
        white-space: nowrap;
        justify-content: center;
        margin: 0 auto;
        padding: 0px 0px 0px 10px;
    }
    .proceso-card{
        background-color: white;
        width: 450px;
        padding: 40px;
        text-align: center;
        transition: opacity 0.5s ease, transform 0.5s ease;
        flex-shrink: 0;
        flex: 0 0 auto;
        box-sizing: border-box;
        margin: 0 15px;
        overflow: hidden;
        word-wrap: break-word;
        white-space: normal;
        overflow-wrap: break-word;
        border-radius: 10px;
        transform: scale(0.80);
    }
    .proceso-card img{
        height: 100px;
        margin-bottom: 0px;
    }
    .remates-container{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 80px 40px 0px 40px;
    }
    .remates-text {
        padding: 40px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        background-color: #6293ED;
        border-radius: 10px;
    }
    .remates-text h1, .remates-text h2 {
        color: white;
    }
    .remate-bullet {
        margin: 10px 0px;
    }
    .bullet-title {
        color: #EACA00;
        width: 100%;
        cursor: pointer;
    }
    .bullet-title i {
        float: right;
        font-size: 16px;
    }
    .bullet-hr {
        background-color: white;
        height: 1px;
        opacity: 0.6;
    }
    .bullet-body {
        color: white;
        overflow: hidden;
        height: 0;
        transition: height 0.3s ease;
    }
    .remates-img-wrapper{
        padding: 0px 20px;
    }
    .remates-img {
        background-image: url('../img/background/remates-bg.jpg');
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 250px;
        border-radius: 0px 0px 10px 10px;
    }
    .alcance-container{
        padding: 0px 40px 80px 40px;
    }
    .alcance-text{
        padding: 80px 0px;
        height: 380px;
    }
    .alcance-map{
        width: 80%;
        height: 300px;
    }
    .map-img{
        width: 100%;
    }
    .icon-img{
        width: 18px;
        position: absolute;
    }
    #icon-gto{
        top: 180px;
        left: 180px;
        transform: scale(1.0);
        transition-duration: 0.3s;
        cursor: pointer;
    }
    #icon-qro{
        top: 200px;
        left: 200px;
        transform: scale(1.0);
        transition-duration: 0.3s;
        cursor: pointer;
    }
    #icon-bc{
        top: 2px;
        left: 21px;
        transform: scale(1.0);
        transition-duration: 0.3s;
        cursor: pointer;
    }
    .clientes-container{
        height: 300px;
        padding: 0px 20px;
        border-radius: 0px;
        overflow: hidden;
        background-color: white;
        margin-bottom: 0px;
    }
    .cliente-slides {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .cliente-slide {
        position: absolute;
        width: 100%;
        height: 300px;
        display: none; /* Ocultamos todos los slides */
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        border-radius: 10px;
    }
    .cliente-container {
        height: 100%;
        padding: 20px 40px;
    }
    .cliente-container p {
        font-size: 16px;
        color: white;
    }
    .video-container-wrapper{
        padding: 100px 0px;
        background-color: #EBF2FC;
        margin-top: 80px;
    }
    .video-row-wrapper {
      overflow: hidden; /* Oculta el contenido que se sale del contenedor */
      position: relative;
      width: 100%;
      display: none;
    }
    .video-row {
      display: flex;
      margin: 40px 0px;
      padding: 0px 40px;
      transition: transform 0.5s ease; /* Animación suave al mover el slider */
    }
    .video-card {
      flex: 0 0 auto; /* Evita que los videos se ajusten al tamaño del contenedor */
      margin-right: 0px;
      margin-left: 0 px;
      overflow: hidden;
      border-radius: 20px;
      height: 600px;
      width: 350px;
      padding: 10px;
    }
    .propiedades-container {
    padding: 80px 15px;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
}

    .propiedades-selectores button{
        margin: 0px 5px;
        padding: 10px 0px;
        width: 132px;
        font-size: 16px;
        border: solid 1px black;
        border-radius: 100px;
        background-color: white;
        transition-duration: 0.3s;
    }
    .propiedad-card-wrapper{
        padding: 5px 20px;
    }
    .propiedad-card{
        background-color: #EAEAEA;
        padding: 10px;
        border-radius: 20px;
        cursor: pointer;
        transform: scale(1.0);
        transition-duration: 0.3s;
        min-height: 530px;
    }
    .propiedad-card:hover{
        transform: scale(1.0);
    }
    .propiedad-card-img{
        background-color: darkcyan;
        height: 180px;
        border-radius: 15px;
        padding: 0px;
        overflow: hidden;
    }
    .propiedad-card-img img{
        width: 100%;
        height: 100%;
    }
    .propiedad-card-info{
        padding-left: 0px;
        padding-top: 0px;
    }
    .propiedad-card-info p{
        margin-bottom: 5px;
    }
    .propiedad-ubicacion{
        font-size: 12px;
        margin-bottom: 20px;
    }
    .propiedad-remate{
        color: #2C5DF1;
        font-weight: 600;
    }
    .propiedad-hr{
        margin: 10px;
    }
    .propiedad-card button{
        background-color: #6293ED;
        padding: 5px 15px;
        border-radius: 100px;
        color: white;
        margin-top: 10px;
    }
    .propiedad-footer span{
        margin-right: 5px;
    }
    .propiedad-footer p{
        font-size: 16px;
    }
    .propiedad-footer-info{
        margin: 0px 5px;
    }
    .propiedad-footer-hr{
        background-color: #2C5DF1;
        height: 1px;
        margin: 0px 0px;
        display: none;
    }
    .propiedad-disponible{
        background-color: #DADBDF;
        height: 40px;
        border-radius: 10px;
        padding-top: 2px;
    }
    .propiedad-disponible p{
        margin: 0px 20px 0px 20px;
        font-weight: 600;
        font-size: 12px;
    }
    .poof{
        display: none;
    }
    .contacto-container-wrapper{
        background-image: url('../img/background/contacto-bg.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        padding: 120px 0px;
        background-color: black;
        margin: 0px;
        overflow: hidden;
    }
    .g-recaptcha{
        transform: scale(0.7);
    }
    .btnContacto{
        background-color: #2C5DF1;
        padding: 10px 30px;
        margin-right: 0px;
        color: white;
        height: 100%;
        border: none;
        border-radius: 100px;
    }
    footer img{
        margin-bottom: 40px;
    }
    .social-wrapper{
        justify-content: center;
        padding: 0px 0px 0px 30px;
    }
    .footer-qr{
        display: none;
    }


}
.modal-rembia {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
  }
  
  .modal-content {
    background-color: #fff;
    margin: 40px auto;
    padding: 30px;
    border-radius: 20px;
    max-width: 1230px; /* ancho tipo Zillow */
    width: 95%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    animation: fadeIn 0.3s ease-in-out;
    min-height: calc(100vh - 80px);

  }
  
  
  .cerrar-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .modal-galeria img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  
  .modal-detalles p {
    margin: 8px 0;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .mosaico-imagenes {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
  }
  
  .foto-grande {
    position: relative;
  }
  
  .foto-grande img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease-in-out; /* ✅ Transición suave */
  }
  
  .img-grande {
    position: relative; /* Importante: el contenedor debe ser relativo */
  }
  
  .btn-ver-mas-fotos {
    position: absolute;
    bottom: 20px;
    left: 15px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
  }
  
  .btn-ver-mas-fotos:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  .fotos-pequenas {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
  }
  
  .foto-chica img {
    width: 100%;
    height: 235px;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease-in-out; /* ✅ Transición suave */
  }

  /* Efecto hover */
.foto-grande img:hover,
.foto-chica img:hover {
  transform: scale(1.01); /* 🔥 Hace que "salte" un poquito */
}
.info-derecha {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 🔥 Centrar vertical */
    align-items: center;     /* 🔥 Centrar horizontal */
    gap: 5px;
}
.info-derecha h1,
.info-derecha p,
.info-derecha button {
  margin: 0; /* 🔥 Quitamos márgenes extra */
}

.info-derecha .ubicacion-propiedad {
    font-size: 22px; /* Más pequeño que la colonia */
    color: #888888;  /* Gris */
    margin-top: 4px; /* Un pequeño margen para que no esté pegado */
    text-align: center;
  }
  
  
  /* Responsive para celular */
/* ------------------------------------ */
/* 🌟 ESTILOS RESPONSIVE PARA MÓVIL 🌟 */
/* ------------------------------------ */
/* 🌟 Responsive SOLO para móviles - max-width: 768px 🌟 */
@media (max-width: 768px) {

    /* Bloque de imágenes principal */
    .mosaico-imagenes {
      display: block; /* ✅ Deja de ser grid */
    }
  
    .fotos-pequenas {
      display: none; /* ✅ Ocultamos las fotos chicas */
    }
  
    .foto-grande {
      width: 100%;
    }
  
    .foto-grande img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 12px;
    }
  
    /* Ajuste del contenedor de toda la información */
    .mosaico-info-contenedor {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  
    /* Contenedor de precio y colonia */
    .info-doble {
      flex-direction: column;
      gap: 10px;
    }
  
    .info-izquierda, .info-derecha {
      width: 100%;
      text-align: center;
    }
    .info-derecha {
        background-color: #ffffff; /* Fondo blanco */
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* Sombra elegante */
        margin-top: 10px; /* Separarlo un poquito del bloque anterior */
        margin-bottom: 10px;
      }
      
  
    .nombre-propiedad {
      font-size: 28px;
      margin-top: 10px;
    }
  
    .btn-contactar {
      width: 100%;
    }
  
    /* Ajustes de galería de fotos completa (cuando abren más fotos) */
    .modal-fotos-grid {
      display: block;
      padding: 15px;
    }
  
    .galeria-zillow {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  
    .grupo-fotos {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  
    .foto-grande,
    .fotos-chicas img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  
    .fotos-chicas {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  
    .galeria-lateral {
      display: none;
    }
  }
  
  
  
  
  /* Panel lateral */
  .galeria-lateral {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .galeria-lateral h3 {
    margin-bottom: 10px;
  }
  
  .precio-remate-lateral {
    font-size: 24px;
    font-weight: bold;
    color: #2e7d32;
    margin-bottom: 20px;
  }
  
  .btn-wapp {
    background-color: #25d366;
    color: white;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
  }
  
  .btn-wapp:hover {
    background-color: #1ebe5d;
  }
  
  /* Panel fijo solo en móvil */
  @media (max-width: 768px) {
    .panel-flotante-movil {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      border-top: 1px solid #ccc;
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1001;
      box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.15);
    }
  
    .info-flotante {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 12px;
    }
  
    .precio-box {
      background-color: #fff;
      border: 2px solid hwb(211 0% 0%);
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  
    .etiqueta-precio {
      font-size: 12px;
      color: #007BFF;
      margin: 0;
      font-weight: bold;
    }
  
    .precio-movil {
      font-weight: bold;
      font-size: 16px;
      color: #007BFF;
      margin: 0;
    }
  
    .btn-wapp-movil {
      background-color: #25d366;
      border: none;
      border-radius: 8px;
      padding: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  
    .btn-wapp-movil:hover {
      background-color: #1ebe5d;
    }
  
    .icono-wapp {
      width: 24px;
      height: 24px;
    }
    .panel-contacto-movil {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #ccc;
        padding: 10px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1001; /* Asegúrate que esté arriba de todo */
        box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.15);
      }
    
      .nombre-colonia-movil {
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
        margin-right: 10px;
        text-align: left;
      }
    
      .btn-contactar-movil {
        background-color: #2563eb;
        color: white;
        padding: 10px 16px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        flex-shrink: 0; /* 🔥 Evita que el botón se achique */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
      }
    
      .btn-contactar-movil:hover {
        background-color: #1d4ed8;
        box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
      }
      .nombre-colonia-movil {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; /* 🔥 ESTE es el nuevo para centrar horizontalmente */
        text-align: center; /* 🔥 También centramos el texto */
      }
      
      
      .colonia-movil {
        font-size: 16px;
        font-weight: 700; /* 🔥 Negritas */
        color: #1a1a1a; /* Color negro elegante */
      }
      
      .ubicacion-movil {
        font-size: 14px;
        font-weight: 400; /* 🔥 Normal */
        color: #888888; /* Gris clarito */
        margin-top: 2px; /* 🔥 Separarlo un poco de la colonia */
      }
      .info-derecha {
        display: none;
      }
      .columna-estatus {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        width: 100%; /* Opcional: para que no llegue al borde */
        margin: 0 auto; /* Centrar el contenedor */
        margin-top: 10px;
      }
      
    }
    
    /* 🌟 Que NO se vea en escritorio */
    @media (min-width: 769px) {
      .panel-contacto-movil {
        display: none;
      }
    }
  
  
  /* Oculta ese panel en escritorio */
  @media (min-width: 769px) {
    .panel-flotante-movil {
      display: none;
    }
  }
 /* Contenedor general de la info principal */
.info-principal {
    padding: 20px;
  }
  
  /* Fila de precio y nombre */
  .fila-precio-nombre {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .precio-remate, .nombre-propiedad {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
  }
  
  /* Valor comercial debajo */
  .valor-comercial {
    font-size: 14px;
    color: #888;
    margin: 8px 0 20px 0;
  }
  
  .valor-comercial .valor-tachado {
    text-decoration: line-through;
  }
  
  /* Bloque de estatus pequeño */
  .bloque-info {
    display: inline-block;
    background-color: #f7f7f7;
    border-radius: 12px;
    padding: 6px 10px;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  
  /* Estilo de la etiqueta azul */
  .estatus {
    background-color: #e6f2ff;
    color: #007bff;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
    display: inline-block;
  }
  /* Para pantallas normales (escritorio) */
.fila-precio-nombre {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Para pantallas pequeñas (celulares) */
  @media (max-width: 600px) {
    .fila-precio-nombre {
      flex-direction: column; /* ⬅️ Hace que se apilen verticalmente */
      align-items: flex-start; /* ⬅️ Alineados a la izquierda */
      gap: 10px; /* ⬅️ Espacio entre precio y nombre */
    }
  }
  .mosaico-con-info {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .columna-izquierda {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .columna-derecha {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .img-grande img, .img-chicas img {
    width: 100%;
    border-radius: 12px;
  }
  
  .precio-nombre {
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .contactar-agente {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  
  .btn-contactar {
    background-color: #2563eb;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: box-shadow 0.3s ease, background-color 0.3s ease; /* 🔥 transición suave */
  }
  
  /* 🔥 Hover elegante */
  .btn-contactar:hover {
    background-color: #1d4ed8; /* Un azul ligeramente más oscuro */
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); /* Sombra azul premium */
  }
  
  
  /* Responsive para mosaico también */
  @media (max-width: 768px) {
    .mosaico-con-info {
      flex-direction: column;
    }
  }
  /* Nuevo contenedor debajo del mosaico */
.info-doble {
    display: flex;
    gap: 20px;
    margin-top: 20px;
  }
  
  /* Parte izquierda: precio de remate */
  .info-izquierda {
    flex: 2;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between; /* 🔥 El texto y la imagen separados */
    align-items: center;
  }
  
  .texto-izquierda {
    display: flex;
    flex-direction: column; /* 🔥 Para que Precio y Valor estén uno abajo del otro */
    justify-content: center;
    align-items: flex-start; /* 🔥 Alineados a la izquierda */
    gap: 10px; /* 🔥 Separación entre precio y valor comercial */
  }
  
  .texto-izquierda .precio-remate {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
  }
  
  .texto-izquierda .valor-comercial {
    font-size: 22px;
    color: #888;
    margin: 0;
  }
  
  .valor-comercial .valor-tachado {
    text-decoration: line-through;
  }
  
  .contenedor-certificado {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .imagen-certificado {
    width: 150px;
    height: auto;
  }
  
  
  /* 🌟 Versión escritorio */
  /* Bloque de información extra */
  .info-extra {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 🧩 3 partes características, 1 parte estatus */
    gap: 20px;
    margin-top: 20px;
    padding-left: 20px; 
    max-width: 70%;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  
  /* Columna de características */
  .columna-caracteristicas {
    flex: 2;
    display: grid; /* ✅ Cambiamos flex a grid */
    grid-template-columns: 1fr 1fr 1fr; /* ✅ tres columnas */
    gap: 20px 40px; /* ✅ Espacio entre filas y columnas */
  }
  
  /* Cada característica */
  .caracteristica img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: transform 0.4s ease, opacity 0.4s ease; /* 🔥 Esto */
    opacity: 0.9; /* 🔥 Ligeramente más elegante */
  }
  
  /* 🔥 Opcional: Un efecto pequeño al pasar el cursor */
  .caracteristica img:hover {
    transform: scale(1.05);
    opacity: 1;
  }
  
  
  
  
  
  /* 🔥 Responsive para móvil */
  @media (max-width: 768px) {
    .columna-caracteristicas {
      grid-template-columns: 1fr;
    }
    .caracteristica.caracteristica-grande {
      grid-column: auto;
      justify-content: flex-start; /* 🔥 Alineado a la izquierda otra vez */
      text-align: left;
    }
  }
  
  
  
  /* Columna de estatus */
  .columna-estatus {
    display: flex;
    flex-direction: column;
    align-items: center; /* 🔥 Esto hace que se vaya a la derecha */
    justify-content: flex-start;
    gap: 10px;
    margin-top: 0px;
  }
  
  
  
  /* Título Estatus */
  .titulo-estatus {
    font-size: 24px; /* 🔥 Tamaño elegante para 'Estatus:' */
    font-weight: 600; /* Semi-bold */
    color: #333; /* Gris oscuro para elegancia */
    margin: 0;
  }
  
  /* Etiqueta Estatus */
  .etiqueta-estatus {
    background-color: #e6f2ff;
    color: #007bff;
    font-size: 18px; /* 🔥 Más pequeño */
    font-weight: 600;
    padding: 4px 10px; /* 🔥 Más compacto */
    border-radius: 30px; /* 🔥 Etiqueta redondeada tipo pill */
    display: inline-block;
    text-align: center;
    white-space: nowrap; /* 🔥 Evita que se parta en dos líneas */
    min-width: 120px; /* 🔥 Tamaño mínimo elegante */
   
  }
  .grupo-etiquetas {
    display: flex;
    flex-direction: column; /* 🔥 Hace que las etiquetas se acomoden verticalmente */
    gap: 8px; /* 🔥 Separación entre etiquetas */
    align-items: center; /* 🔥 Para que todas estén centradas */
  }
  
  
  
  
  /* Para móviles */
@media (max-width: 768px) {
    .info-extra {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  
    /* 🔁 Reordenar columnas en móvil */
    .columna-estatus {
      order: -1; /* 🥇 Estatus va primero */
      align-items: center;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 15px;
      margin-left: 0;
    }
  
    .titulo-estatus {
      font-size: 24px; /* 🔥 Más pequeño para móvil */
    }
  
    .etiqueta-estatus {
      font-size: 16px; /* 🔥 Botón más compacto */
      padding: 4px 10px; /* 🔥 Botoncito más pequeño */
      margin-top: 5px; /* 🔥 Ligero espacio entre "Estatus:" y la etiqueta */
    }
  
    .columna-caracteristicas {
      order: 1;
      align-items: center;
      text-align: center;
    }
  }
  
  
  
  
  
  
  
 /* 🌟 Ajustes SOLO en móvil */
@media (max-width: 768px) {
    .imagen-certificado {
      width: 130px; /* Más pequeño */
      margin-top: 5px; /* Espacio arriba */
      align-self: center; /* Centrado */
      display: block; /* Aseguramos que sea bloque */
    }
  
    .info-izquierda {
      flex-direction: column; /* 👈🏼 Esto es lo que falta */
      align-items: center; /* Centrar contenido */
      text-align: center; /* Opcional, pero hace que el precio y valor también estén centrados */
    }
    /* 🔥 Ajuste importante al contenedor del precio y valor */
  .texto-izquierda {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar texto dentro */
    text-align: center;
  }
  
  
  
  
  /* Parte derecha: nombre de colonia + botón */
  
  
  
  .info-derecha .nombre-propiedad {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
  }
  
  .btn-contactar {
    background-color: #2563eb;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
  }
  
  /* Responsive para móviles */
 
    .info-doble {
      flex-direction: column;
    }
    .info-derecha .nombre-propiedad {
      text-align: left;
    }
    
  }
  
 /* 🌟 Sección de Ubicación */
.seccion-ubicacion {
  margin-top: 40px;
  max-width: 67%; /* 🔥 Igual que .info-extra */
  padding-left: 0px;
  padding-right: 0px;
  
}

.titulo-ubicacion {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

/* Contenedor del mapa */
.mapa-ubicacion {
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 12px;
}

/* El iframe debe ocupar todo */
.mapa-ubicacion iframe {
  width: 100%;
  height: 250px;
  border: none;
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 🔥 Responsive solo para móviles */
@media (max-width: 768px) {
  .seccion-ubicacion {
    max-width: 100%; /* ✅ En móvil usar el 100% */
    padding-left: 0;
    padding-right: 0;
  }
}

/* 🌟 Sección Financiera */
.seccion-financiera {
  margin-top: 40px;
  padding: 20px;
  max-width: 67%;
  margin-left: auto;
  margin-right: auto;
}

.titulo-financiero {
  font-size: 28px;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 20px;
  text-align: center;
}

.contenedor-tarjetas-financieras {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.tarjeta-financiera {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Animaciones suaves para las tarjetas */
.tarjeta-financiera {
  opacity: 0; /* 🔥 Inicialmente oculto */
  transform: translateY(30px); /* 🔥 Ligeramente más abajo */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Cuando estén visibles */
.tarjeta-financiera.visible {
  opacity: 1;
  transform: translateY(0);
}


.subtitulo-financiero {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.porcentaje-descuento {
  font-size: 48px;
  font-weight: 700;
  color: #10b981; /* verde elegante */
  margin: 10px 0;
}

.texto-descuento {
  font-size: 16px;
  color: #555;
  text-align: center;
}

.disclaimer-financiero {
  font-size: 12px;
  color: #888;
  margin-top: 20px;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}



#grafica-proyeccion {
  width: 100% !important;
  max-width: 350px; /* 🔥 O el ancho que quieras */
  height: 200px !important; /* 🔥 Altura fija y razonable */
}

.canvas-proyeccion {
  width: 100% !important;
  max-width: 350px;
  height: 200px !important;
  
}

/* 🔥 MODAL SECUNDARIO "VER MAS FOTOS" */


.galeria-zillow {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.fila-foto-grande img {
  width: 100%;
  max-height: 700px; /* 🔥 Baja la altura máxima de la foto grande */
  object-fit: cover;
  border-radius: 12px;
}

.fila-fotos-chicas {
  display: flex;
  gap: 10px;
}

.fila-fotos-chicas img {
  width: 50%;
  max-height: 480px; /* 🔥 Aumentamos un poco la altura de las fotos chicas */
  object-fit: cover;
  border-radius: 12px;
}

/* 🌟 Responsive para móvil */
@media (max-width: 768px) {
  .fila-fotos-chicas {
    flex-direction: column;
  }

  .fila-fotos-chicas img {
    width: 100%;
    max-height: 250px; /* 🔥 Para móvil, un tamaño razonable */
  }

  .fila-foto-grande img {
    max-height: 250px; /* 🔥 También para móvil */
  }
}

/* 🔥 NUEVAS TARJETAS 20 DE ABRIL 2025 */
/* 🔥 La foto sigue full width */
.propiedad-img-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  aspect-ratio: 16/10; /* 🔥 Era más vertical, ahora es un poco más achatada */
}
.propiedad-img-container {
  position: relative; /* ✅ Aquí es donde debe ir */
  width: 100%;
  height: auto;
  overflow: hidden;
}


/* 📦 El contenedor general de la tarjeta */
.propiedad-card-nueva {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 450px; /* 🔥 Antes ocupaba más ancho, ahora limitamos */
}



/* ✨ Hover suave */
.propiedad-card-nueva:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* 🏡 Abajo de la imagen: 2 columnas */
.propiedad-info-container-nueva {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 16px;
  gap: 20px;
  border-top: 1px solid #e5e7eb; /* Línea horizontal arriba de las columnas */
}



/* 📊 Columna izquierda: precios */
.columna-precios {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.propiedad-precio-remate {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  color: #2C5DF1;
  font-weight: 800;
  margin: 0;
  align-items: center;
  text-align: center;
  justify-content: center;
}



.propiedad-precio-comercial {
  font-family: 'Inter', sans-serif;
  font-size: 18px; /* 🔥 Más pequeño */
  color: #666;
  text-decoration: line-through;
  margin-top: 4px;
  align-items: center;
  text-align: center;
  justify-content: center;
}


/* 📍 Columna derecha: nombre + ubicación */
.columna-informacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.divisor-columnas {
  width: 1px;
  background-color: #d1d5db; /* Un gris más visible */
  align-self: stretch; /* 🔥 Esta línea es la que hace que crezca automáticamente al 100% de alto */
}



.propiedad-titulo {
  font-size: 20px; /* 🔥 Subirlo un poco */
  font-weight: 800; /* Bold */
  color: #222; /* Más oscuro para jerarquía */
  margin: 0;
}


.propiedad-ubicacion-texto {
  font-size: 18px;
  color: #666;
  margin-top: 4px;
}


/* 🏷️ Estatus como etiqueta */
.propiedad-etiqueta-estatus {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #2563eb;
  color: white;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
}

/* 🔥 Corrección para que la gráfica no crezca infinitamente */
canvas {
  width: 100% !important;
  height: 250px !important;
  max-height: 350px;
  object-fit: contain;
  display: block;
}


.seccion-ubicacion iframe {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* 🔥 Vista móvil para tarjetas */
@media screen and (max-width: 768px) {
  .propiedad-card-wrapper {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .propiedad-card-nueva {
    flex-direction: column;
    display: flex;
    gap: 10px;
    border-radius: 12px;
    overflow: hidden;
  }

  .propiedad-img-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .propiedad-info-container-nueva {
    flex-direction: column;
    padding: 10px;
  }

  .columna-precios,
  .columna-informacion {
    width: 100%;
    text-align: center;
  }

  .divisor-columnas {
    display: none;
  }
}

/* Estilo base de los botones de ciudad */
.btn-ciudad {
  padding: 10px 16px;
  border: 2px solid #007bff;
  border-radius: 30px;
  background-color: #fff;
  color: #007bff;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.btn-ciudad:hover {
  background-color: #007bff;
  color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.btn-ciudad.active {
  background-color: #007bff;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Responsive: que no queden apretados en móvil */
#contenedor-ciudades {
  display: flex;
  justify-content: center;  /* ✅ CENTRA horizontalmente */
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}


/* 🔵 Contenedor de tarjetas por ciudad */
.grupo-ciudad {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.grupo-ciudad.activa {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 🔧 Ajusta a tu gusto */
}

/* 🔵 Estilo de cada tarjeta (en columna en móvil, 2x2 en escritorio) */
.propiedad-card-wrapper {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .propiedad-card-wrapper {
    width: 48%; /* 2 tarjetas por fila */
  }
}

@media (max-width: 768px) {
  .propiedad-card-wrapper {
    width: 100%; /* Solo una tarjeta por fila en móvil */
  }
}



/* PAGINACIÓN ELEGANTE */
.contenedor-paginacion {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
  margin-bottom: 60px; /* 🔧 Añadimos espacio hacia abajo */
  flex-wrap: wrap;
}


.pagina-btn {
  background-color: white;
  border: 2px solid #2c5df1;
  color: #2c5df1;
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 16px;
  margin: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.pagina-btn:hover {
  background-color: #2c5df1;
  color: white;
}

.pagina-btn.active {
  background-color: #2c5df1;
  color: white;
  font-weight: bold;
}




/* 🔵 Responsive para móvil */
@media (max-width: 768px) {
  .pagina-btn {
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 8px;
  }
  .propiedades-selectores {
    flex-wrap: wrap !important;
  }
    .propiedades-selectores .btn-estado {
    margin-bottom: 0.5rem;
  }
  

}

#contenedor-ciudades {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 12px;
}

/* Animación sexy para los botones de ciudad */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-ciudad {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}


#link-observatorio a {
  background-color: #0d6efd;
  color: white !important;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

#link-observatorio a:hover {
  background-color: #084298;
}

#link-observatorio {
    animation: 0.6s menuIn 1 ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 0.6s;
}