@font-face {
    font-family:Montserrat-Bold;
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
}
:root
{
    --color_fondo_botones:#97257f;
    --color_fondo_botones_hover:#f09130;
}
#slider_inicio, #slider_inicio_1
{
    width: 100%;
    position: relative;
    overflow: hidden;
    /*border: 1px solid red;*/
    display: flex;
    align-items: center;
    justify-content:flex-end;
}
.cont_espacio_letras
{
    width: 30%;
    height: 70vh;
    /*border: 1px solid blue;*/
    display: flex;
    align-items:center;
    justify-content:center;
}
.cont_letras
{
    width: 70%;
    height: 100%;
    /*border: 1px solid green;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont_espacio_letras h3
{
    font-size: 60px;
    font-weight: 400;
    color: var(--color_fondo_botones);
    text-align: center;
    font-family:"Montserrat-Bold";
    /*border: 1px solid red;*/
}
.cont_espacio_letras img
{
    width:30px;
    height: 100%;
    /*border: 1px solid red;*/
}
#contenedor_imagenes, #contenedor_imagenes_2
{
    width: 80%;
    height: 75vh;
    /*border: 1px solid blue;*/
}
.imagen
{
    height: 100%;
    width: 70%;
    position: absolute;
    top:0px;
    right: 0px;
    object-fit:contain;
    object-position: center;
    display: none;
    /*border: 1px solid red;*/
}
.imagen2
{
    height: 100%;
    width: 60%;
    position: absolute;
    top:0px;
    right: 0px;
    object-fit:contain;
    object-position: center;
    display: none;
    /*border: 1px solid red;*/
}
/*---------------------------------------------------------*/
.cont_espacio_botones, .cont_espacio_botones_2
{
    z-index: 1;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 1px solid white;*/
}
.boton_iqz_producto
{
    position: absolute;
    left: 0px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /*border: 1px solid red;*/
    background-color: var(--color_fondo_botones);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
    
}
.boton_der_producto
{
    position: absolute;
    right: 0px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /*border: 1px solid red;*/
    background-color: var(--color_fondo_botones);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.5;
}
.boton_iqz_producto:hover, .boton_der_producto:hover
{
    opacity: 1;
    background-color: var(--color_fondo_botones_hover);
}
.cont_espacio_botones i
{
    font-size: 20px;
    color: white;
}
.cont_espacio_botones_2 i
{
    font-size: 20px;
    color: white;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
@media screen and (max-width:840px)
{
    /*tercera parte*/
    #slider_inicio
    {
        flex-direction: column;
    }
    .cont_espacio_letras
    {
        width: 100%;
        height: auto;
        /*border: 1px solid red;*/
    }
    #contenedor_imagenes
    {
        width: 100%;
        height: 65vh;
        /*border: 1px solid red;*/
    }
    .imagen
    {
        width: 100%;
    }
    .cont_espacio_letras
    {
        justify-content:center;
    }
    .cont_espacio_letras img
    {
        display: none;
    }
    .cont_espacio_letras h3
    {
        left: 0px;
        rotate: 0deg !important;
        font-size: 50px;
    }
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
@media screen and (max-width:570px)
{
    /*tercera parte*/
    .cont_espacio_letras h3
    {
        font-size: 30px;
    }
    #contenedor_imagenes
    {
        height: 40vh;
    }
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
@media screen and (max-width:395px)
{
    /*tercera pare*/
    .cont_espacio_letras h3
    {
        font-size: 25px;
    }
}































/* =========================================
   ESTILOS EXCLUSIVOS: SLIDER FONDO MORADO
   ========================================= */

/* 1. Fondo morado y contenedor principal relativo */
.seccion-morada-slider {
    background-color: var(--color_fondo_botones); /* Usa el morado #97257f que ya tienes */
    width: 100%;
    position: relative; /* Clave para poder encimar el texto */
    padding: 60px 0; /* Espacio arriba y abajo */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 2. Contenedor del Slider (Centro) */
.seccion-morada-izq {
    width: 100%;
    max-width: 1100px; /* Limita el ancho del slider para que no se estire de más */
    position: relative;
    z-index: 1;
}

/* Ajustamos el alto del contenedor de imágenes para este slider */
.seccion-morada-izq #slider_inicio_1, 
.seccion-morada-izq #contenedor_imagenes_2 {
    width: 100%;
    height: 70vh; /* Ajusta la altura del slider según el tamaño de tus fotos */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Botones a los extremos */
.seccion-morada-slider .cont_espacio_botones_2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centrado vertical perfecto */
    width: 100%;
    display: flex;
    justify-content: space-between; /* Manda un botón a la izquierda y otro a la derecha */
    padding: 0 20px; /* Margen para que no peguen en la orilla de la pantalla */
    pointer-events: none; /* Evita que el contenedor invisible bloquee clics en el centro */
    z-index: 5;
}

.seccion-morada-slider .boton_iqz_producto,
.seccion-morada-slider .boton_der_producto {
    pointer-events: auto; /* Reactiva los clics solo en los botones */
    position: static; /* Anulamos el absolute que traían del otro CSS */
    background-color: rgba(255, 255, 255, 0.4); /* Color más suave para los botones como en la foto */
}

/* 4. Texto flotante oscuro (Abajo a la derecha) */
.seccion-morada-texto {
    position: absolute;
    bottom: 10px; /* Distancia desde el suelo del contenedor morado */
    right: 5%; /* Distancia desde la orilla derecha */
    width: 90%;
    max-width: 750px; /* Ancho máximo de la caja de texto */
    background-color: rgba(0, 0, 0, 0.6); /* Cuadro oscuro semitransparente */
    padding: 15px;
    z-index: 10; /* Asegura que flote por encima de las fotos del slider */
}

.seccion-morada-texto p {
    color: #ffffff; /* Letras blancas para contrastar con el fondo oscuro */
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Responsive: Acomodar el texto en celulares para que no tape todo el slider */
@media screen and (max-width: 768px) {
    .seccion-morada-texto {
        position: relative; 
        bottom: auto;
        right: auto;
        /* max-width: z0%; */
        /* margin-bottom: 150px; */
        /* margin-top: 1000px;  */
        
    }
    
    .seccion-morada-izq #slider_inicio_1, 
    .seccion-morada-izq #contenedor_imagenes_2 {
        height: 50vh;
    }
}




/* =========================================
   NUEVO SLIDER TIPO "COVERFLOW" CON PREVIEWS
   ========================================= */

/* 1. Matar el marco de colores residual de tus otros CSS */
.contenedor_segunda_parte_b,
.seccion-morada-slider {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.contenedor_segunda_parte_b::before,
.contenedor_segunda_parte_b::after {
    display: none !important; 
}

/* 2. Contenedor de las fotos */
#contenedor_imagenes_2 {
    position: relative;
    width: 100%;
    height: 65vh;
    display: block; /* Quitamos el flex para anclar todo desde el puro centro */
    overflow: visible; 
}

/* 3. Anclar TODAS las imágenes al centro exacto */
#contenedor_imagenes_2 .imagen {
    display: block !important; 
    position: absolute !important;
    top: 50% !important;
    left: 50% !important; /* Forzamos a que nazcan en el centro de la pantalla */
    right: auto !important; /* MATAMOS el right:0 que venía de tu slider.css original */
    
    width: auto !important;
    max-width: 90% !important;
    height: auto !important;
    max-height: 90% !important;


    object-fit: contain !important;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    box-shadow: 0px 15px 35px rgba(0,0,0,0.4);
    
    /* Escala inicial chiquita y anclada al centro */
    transform: translate(-50%, -50%) scale(0.5); 
    transition: transform 0.6s ease, opacity 0.6s ease, z-index 0.6s;
}

/* 4. IMAGEN CENTRAL (Activa) */
#contenedor_imagenes_2 .imagen.activa {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    z-index: 10;
}

/* 5. IMAGEN PREVIA (Izquierda) */
#contenedor_imagenes_2 .imagen.prev {
    opacity: 0.4; 
    visibility: visible;
    /* -50% es el centro, le restamos 80% más para moverla a la izq = -130% */
    transform: translate(-130%, -50%) scale(0.85); 
    z-index: 5;
}

/* 6. IMAGEN SIGUIENTE (Derecha) */
#contenedor_imagenes_2 .imagen.next {
    opacity: 0.4; 
    visibility: visible;
    /* -50% es el centro, le sumamos 80% más para moverla a la der = 30% */
    transform: translate(30%, -50%) scale(0.85); 
    z-index: 5;
}

/* Ajustes para celulares */
@media screen and (max-width: 768px) {
    #contenedor_imagenes_2 .imagen {
        width: 55% !important;
    }
    /* Acercamos un poco más las imágenes en el celular */
    #contenedor_imagenes_2 .imagen.prev { transform: translate(-110%, -50%) scale(0.8); }
    #contenedor_imagenes_2 .imagen.next { transform: translate(10%, -50%) scale(0.8); }
}






































/* =========================================
   NUEVA SECCIÓN AMENIDADES
   ========================================= */

.nueva-seccion-amenidades {
    background-color: #e9eaec; /* Gris claro de fondo */
    padding: 60px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titulo-amenidades-top {
    color: #3f5581; /* Azul corporativo */
    font-size: 32px;
    margin-bottom: 40px;
    font-family: 'Montserrat-Bold', sans-serif;
}

.layout-amenidades {
    display: flex;
    width: 95%;
    max-width: 1400px;
    align-items: center;
    justify-content: space-between;
    
}

/* --- Columna Izquierda (Textos) --- */
.amenidades-textos {
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Si tienes la imagen de las líneas grises, puedes ponerla de fondo aquí: */
    /* background-image: url('../img/logo-puro.png');
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: left 50px bottom 10px; */
}

.titulos-h3 h3 {
    color: #3f5581;
    font-size: 32px;
    margin: 0;
    font-family: 'Montserrat-Bold', sans-serif;
    /* Por defecto, que tu JS se encargue de mostrar solo el activo */
}

.linea-azul {
    width: 40px;
    height: 4px;
    background-color: #3f5581;
    margin: 20px 0;
}

.textos-p {
    width: 100%;
    
    /* LA MAGIA: Fija la altura basándote en tu texto más largo */
    min-height: 150px; /* Súbele o bájale a este número hasta que deje de brincar */
    
    /* Opcional: Esto ayuda a que los textos más cortos no se queden pegados arriba, 
       sino que se centren bonito en el espacio disponible */
    display: flex;
    align-items: center; 
    justify-content: center;
}

.textos-p p {
    color: #666666;
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
    width: 100%; /* Para que el flex no apachurre el texto */
}

/* --- Columna Derecha (Slider) --- */
.amenidades-slider-der {
    width: 60%;
    position: relative; /* Clave para que los botones floten sobre la imagen */
}

.amenidades-slider-der #contenedor_imagenes {
    width: 100%;
    height: 50vh;
    min-height: 400px;
    box-shadow: 0px 15px 25px rgba(0,0,0,0.15); /* Sombra elegante */
    background-color: #ccc; /* Fondo temporal por si la imagen tarda en cargar */
}

/* Asegurar que la imagen del slider llene el contenedor */
.amenidades-slider-der #contenedor_imagenes img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Botones superpuestos --- */
.amenidades-slider-der .cont_espacio_botones {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    pointer-events: none; /* Para no bloquear clics en la imagen */
}

.amenidades-slider-der .boton_iqz_producto,
.amenidades-slider-der .boton_der_producto {
    pointer-events: auto; /* Reactiva los clics en el botón */
    width: 50px;
    height: 50px;
    background-color: rgba(160, 160, 160, 0.7); /* Gris transparente como en la foto */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
   
}

.amenidades-slider-der .boton_iqz_producto:hover,
.amenidades-slider-der .boton_der_producto:hover {
    background-color: rgba(100, 100, 100, 0.9);
}

.amenidades-slider-der .cont_espacio_botones i {
    color: #ffffff;
    font-size: 20px;
}

/* --- Responsive (Para celulares) --- */
@media screen and (max-width: 840px) {
    .layout-amenidades {
        flex-direction: column-reverse; /* Pone la imagen arriba y los textos abajo en celular */
    }
    .amenidades-slider-der, .amenidades-textos {
        width: 100%;
    }
    .amenidades-slider-der {
        margin-bottom: 30px;
    }
}