/* Imagenes de la propiedad */

.propiedad_imagenes{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.imagen_principal{
    width: 70vw;
    height: 600px;

    object-fit: cover;
    object-position: center;

    border-radius: 10px;

    margin-top: 15px;
    margin-bottom: 15px;

    display: block;

    touch-action: pan-y;
    user-select: none;
}

/* Animación cambio de imagen */

.animacion-derecha {
    animation: entrarDerecha 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}


.animacion-izquierda {
    animation: entrarIzquierda 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}



@keyframes entrarDerecha {

    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


@keyframes entrarIzquierda {

    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}
.contenedor-imagen {
    overflow: hidden;
}

#imagenPrincipal {
    transition: opacity .4s ease;
}

.contenedor_miniaturas{
    width: 70vw;
    position: relative;
    margin: auto;
}

.miniaturas{

    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    display: flex;

    justify-content: flex-start; /* cambia esto */

    scroll-behavior: smooth;
    scrollbar-width: none;

    padding: 0 15px;

    box-sizing: border-box;

}

.miniaturas::-webkit-scrollbar{
    display: none;
}

.miniaturas-contenedor{
    display: flex;
    gap: 10px;
    width: max-content;
}

.miniaturas img{
    flex-shrink: 0;

    width: 180px;
    height: 120px;

    object-fit: cover;
    border-radius: 10px;
}

.boton{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

    background: rgba(18,37,72,.95);
    color: white;

    font-size: 22px;
    cursor: pointer;

    z-index: 100;
}

.boton:hover{
    background: #122548;
}

.boton_izquierda{
    left: -30px;
}

.boton_derecha{
    right: -30px;
}

/* Información de la propiedad */

.propiedad {
    width: 80%;
    margin: 60px auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    gap: 60px;
}

.propiedad h1 {
    color: #122548;

    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
}

.info_propiedad{
    flex: 1;
}

.info_propiedad h1{
    margin-bottom: 20px;
    border-bottom: 3px solid black;
    padding-bottom: 10px;
}

.descripcion_propiedad h2{
    margin-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
}
.descripcion_propiedad p{
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}
.ubicacion_precio{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;

    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 100;
}

.precio {
    color: #122548;
    font-weight: 800;
}

.caracteristicas{
    display: flex;
    gap: 80px;
}

.caracteristicas ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.caracteristicas li{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;

    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
}

.caracteristicas img{
    width: 24px;
    height: 24px;
}

/* Card del agente*/

.info_agente{
    width: 280px;
    background-color: #fff5e0;
    width: 280px;
    padding: 20px;    border-radius: 15px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

.info_agente img{
    
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

.info_agente h2{
    font-size: 24px;
    margin-bottom: 10px;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.info_agente .titulo{
    color: gray;
    margin-bottom: 10px;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.info_agente a{
    color: black;
    font-size: 18px;
    text-decoration: underline;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.info_agente p{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;

}

.info_agente .telefono{
    font-size: 22px;
    font-weight: bold;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.info_agente a:hover{
    color: #122548;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Imprimir */
.imprimir {
    display:block;
    width:180px;
    margin:20px auto;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    background: #122548;
    color: #fff5e0;
    font: inherit;
    cursor: pointer;
    transition: .3s;
}

.imprimir:hover {
    background: #17305e;
    color: gray;
}

/* Maps */

.maps h1{
    width: 100%;
    margin: 0 0 3.5rem;
    text-align: center;
    color: #122548;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
}

.maps {
    text-align: center;
    margin-bottom: 30px;
}

.form-contacto label{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    gap:8px;

    color:#122548;
    font-weight:600;
    font-family:'Montserrat', sans-serif;
    padding-bottom:8px;
}

.form-contacto input,
.form-contacto textarea{
    width:90%;

    padding:14px 16px;

    border:2px solid #d7ccb3;
    border-radius:12px;

    font-size:16px;
    font-family:'Montserrat', sans-serif;

    background:white;

    transition:.25s;
}

.form-contacto button{
    margin-top:10px;

    padding:15px;

    border:none;
    border-radius:30px;

    background:#122548;
    color:#fff5e0;

    font-size:16px;
    font-weight:700;
    font-family:'Montserrat', sans-serif;

    cursor:pointer;

    transition:.25s;
}

.form-contacto button:hover{
    background:#183462;
    transform:translateY(-2px);
}

.modal-exito{
    border:none;
    padding:0;
    border-radius:28px;
    background:transparent;
    width:min(90%,420px);
}

.modal-exito::backdrop{
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
}

.modal-exito-content{
    background:#fff5e0;
    color:#122548;
    padding:2.3rem;
    border-radius:28px;
    text-align:center;
    box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.modal-exito-icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;
    background:#122548;
    color:#fff5e0;

    font-size:2.4rem;
}

.modal-exito-content h2{
    margin:0;
    color:#122548;
}

.modal-exito-content p{
    margin:15px 0 25px;
    line-height:1.6;
    color:#122548;
}

.modal-exito-content button{
    padding:12px 32px;

    border:none;
    border-radius:999px;

    background:#122548;
    color:#fff5e0;

    cursor:pointer;
    font-family:'Montserrat',sans-serif;
    transition:.25s;
}

.modal-exito-content button:hover{
    background:#17305e;
    transform:scale(1.05);
}

.miniatura-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    pointer-events: none; /* Evita interferir con el clic de la miniatura */
}

.miniatura-item .icono-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}

/* ==========================================================================
   CORRECCIÓN PARA VIDEOS EN PREVISUALIZACIONES Y MINIATURAS
   ========================================================================== */

/* 1. Asegura que el video dentro de las tarjetas de previsualización ocupe su espacio correctamente */
.card-imagen-thumb video.img-preview-src {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 2. Aplica las mismas dimensiones de las miniaturas de imágenes a las miniaturas de video */
.miniatura-item {
    flex-shrink: 0;
    width: 180px;
    height: 120px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

/* Contenedor del video principal para que soporte el ícono flotante de pausa */
.contenedor-video-principal {
    position: relative;
    width: 70vw;
    height: 600px;
    margin: 15px auto;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

@media (max-width: 768px) {
    .contenedor-video-principal {
        width: 95%;
        height: 260px;
    }
}

/* El video principal ocupa todo su contenedor */
.contenedor-video-principal video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    cursor: pointer;
}

/* Ícono central de pausa (triángulo) */
.overlay-pausa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    pointer-events: none; /* Para que los clics atraviesen el ícono y vayan al video */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* Se muestra cuando el video está pausado */
.contenedor-video-principal.pausado .overlay-pausa {
    opacity: 1;
}

/* 3. Ajuste responsive para las miniaturas en dispositivos móviles */
@media (max-width: 768px) {
    .miniatura-item {
        width: 120px;
        height: 80px;
    }
}

/* Responsive - Teléfono */

@media (max-width: 768px){

    /* Imágenes */

    .imagen_principal{
        width:95%;
        height:260px;

        transition: transform .3s ease;
    }

    .contenedor_miniaturas{
        width: 95%;
    }

    .miniaturas{
        gap: 8px;
    }

    .miniaturas img{
        width: 120px;
        height: 80px;
    }

    .boton{
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .boton{
        display: none;
    }

    /* Información */

    .propiedad {
            width: 80%;
            margin: 60px auto;
            display: flex;
            flex-direction: column; 
            justify-content: flex-start;
            align-items: center;
            gap: 60px;
        }

    .info_propiedad h1{
        font-size: 1.8rem;
        text-align: center;
    }

    .ubicacion_precio{
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
        font-size: 1.1rem;
    }

    .caracteristicas{
        flex-direction: column;
        gap: 20px;
    }

    .caracteristicas li{
        font-size: 1rem;
        margin-bottom: 14px;
    }

    .caracteristicas img{
        width: 22px;
        height: 22px;
    }

    /* Card del agente */

    .info_agente{
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }

    .info_agente img{
        width: 120px;
        height: 120px;
    }

    .info_agente h2{
        font-size: 1.4rem;
    }

    .info_agente a,
    .info_agente p{
        font-size: 1rem;
    }

    .info_agente .telefono{
        font-size: 1.2rem;
    }

    /* Botón imprimir */

    .imprimir{
        width: 170px;
        padding: 10px 18px;
    }

    /* Maps */

    .maps h1{
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .maps iframe{
        width: 95%;
        height: 300px;
    }

}