/* -------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------*/
/* ------------------------   ESTILOS GLOBALES    --------------------------*/
/* -------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------*/

@font-face {/*Tipografía chula de los Títulos*/
    font-family: 'Catalish';
    src: url('../fonts/catalish-huntera.ttf');
    src: url('../fonts/catalish-huntera.ttf') format('embedded-opentype'),
    url('../fonts/catalish-huntera.ttf') format('ttf'),
    url('../fonts/catalish-huntera.ttf') format('truetype'),
    url('../fonts/catalish-huntera.ttf') format('svg');
}


:root {/* LLAMADAS DE LA WEB */
/* Paleta de colores de esta web */
    --Azul: #0b84a7;
    --Marron: #e8b282f5;
    --Blanco: #ffffff;
    --Negro: #353535;
/* Tipografias de esta web */
    --Titulos: "Catalish", serif;
    --Parrafos: "Roboto", sans-serif;
}


body {/*DECORACIÓN BASE*/
    background: var(--Blanco);/*color de fondo*/
    font-family: var(--Parrafos);/*tipografia de los textos de base*/
    line-height: 2;/*gran interlineado de los textos en general*/
    text-align: justify;/*todos los textos justificados (a menos qe se indique lo contrario)*/
}


/* COLOR DE LETRA Y FONDO PA CUANDO SE SEÑALE EL TEXTO*/
::-moz-selection {background: var(--Azul); color: var(--Marron); text-shadow: none}
::selection {background: var(--Azul); color: var(--Marron); text-shadow: none}


/*BARRA DE DESPLAZAMIENTO PERSONALIZADA*/
body::-webkit-scrollbar {width: 15px}/*Tamaño de la barra*/
body::-webkit-scrollbar-track {background: var(--Blanco)}/*Fondo de la barra */
body::-webkit-scrollbar-thumb {background: var(--Marron); border-radius: 10px; border: 1px solid var(--Marron)}/*Color barra*/
body::-webkit-scrollbar-thumb:hover {background: var(--Azul); border: 1px solid var(--Azul)}/*Color barra en hover*/


/*DECORACIÓN BÁSICA DE TEXTOS*/
h1, h2, h3{/*Decoracion Títulos*/
    font-family: var(--Titulos); font-weight: 400; color: var(--Azul); text-align: center; font-style: italic;
    line-height: 1.3;/*pequeño interlineado en títulos (x si caen de renglon)*/
}

h2 {font-size: 4rem; margin-bottom: 2rem; text-shadow: 1px 1px 5px #87878773;}

p {font-family: var(--Parrafos); line-height: 1.4; font-style: italic; font-size: 2rem; font-weight: 400;
color: var(--Negro); text-align: center; margin-bottom: 2rem}

a {font-size: 1.8rem; font-style: italic;}



/*CLASES PARA RECURRIR EL HTML*/
.contenedor {/*Contenedor de esta web*/
    max-width: 125rem;/*1.250px de ancho*/
    width: 100%;/*ESTO FUERZA LA ANCHURA EN CONFLICTOS CON DISPLAY:FLEX*/
    margin: 0 auto;/*centrada*/
    padding: 0 2rem; /*y con padding a los lados pal movil*/
    /*background-color: rgba(0, 111, 255, 0.4);*/
}

.top-grande {margin-top: 10rem; padding-top: 4rem;}/*Margen de arriba de cada Section web (con padding pal Scroll automatico)*/


.cursiva {font-style: italic}
.subrayado {text-decoration: underline}
.negrita {font-weight: bold; color: var(--Azul)}


/*ESTILO DE LOS BOTONES DE LA WEB*/

 /*1º estructura del botón <a>*/
 .boton {font-weight: 500; text-align: center; padding: 1rem 3rem; border-radius: 10px; color: var(--Blanco);
 background: var(--Marron); transition: background 0.3s ease; box-shadow: 6px 6px 20px rgb(79 128 164 / 50%);}

  .boton:hover {background: var(--Azul);}

    /*3º que el botón ocupe el 100%*/
    .btn-100 {display: block; width: 100%}

    /*3º o alinear botón al centro o la derecha (.boton debe estar envuelto por este <div>*/
    .padre-btn-centro {display: flex; justify-content: center}
    .padre-btn-derecha {display: flex; justify-content: flex-end}

/*4º en movil los botones se ponen al 100%*/
@media (max-width: 800px) {.boton {display: block; width: 100%}}

















/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------- 0. CABECERA (VÍDEO + MENU DE NAV) ---------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
.navegacion.superior .idiomas.movil {display: none}
.navegacion.secciones.movil {display: none}

.cabecera-video {position: relative; width: 100%; max-height: 80rem; overflow: hidden;
display: flex; justify-content: center; align-items: center}

.cabecera-video video {width: 100%; height: auto; display: block}

.navegacion, .texto-central {position: absolute; z-index: 2}

.navegacion {left: 0; right: 2rem; display: flex; justify-content: flex-end}

.navegacion.superior {top: 2rem; display: flex; flex-direction: column; align-items: flex-end}

.navegacion.superior .idiomas {display: flex; gap: 2rem}
.navegacion.secciones {bottom: 2rem; gap: 3rem}

.navegacion.superior .idiomas a {font-size: 1.6rem; font-weight: 400}
.navegacion.superior .mapa {font-size: 1.9rem; font-weight: 300}
.navegacion.secciones a {font-size: 2rem; font-weight: 400}

.navegacion a {color: var(--Blanco); transition: all 0.3s ease}
.navegacion a:hover {color: var(--Azul)}

.texto-central {top: 54%; left: 50%; transform: translate(-50%, -50%); position: absolute; text-align: center;
text-shadow: 0 0 5px rgb(79 128 164)}
.texto-central h1 {color: var(--Blanco); font-size: 4vw; letter-spacing: 1px;}
.texto-central h1 span {letter-spacing: -1px}
.texto-central p {color: var(--Blanco); font-size: 1.5vw; letter-spacing: 1px}

.navegacion .idiomaactual {color: var(--Azul)}


/*RESPONSIVE TABLET/MOVIL*/
@media (max-width: 800px) {
    .cabecera-video {max-height: none}

    .navegacion.superior {top: 1rem; right: 1rem}
    .navegacion.superior .idiomas.movil {display: flex; gap: 1rem}
    .navegacion.superior .idiomas.pc {display: none}

    .navegacion.secciones.pc {display: none}
    .navegacion.secciones.movil {display: flex; justify-content: space-between; padding: 0 1rem; width: 100%; bottom: 1rem}
    .navegacion.secciones.movil .separados {display: flex; flex-direction: column; text-shadow: 0 0 5px rgb(197 152 107 / 50%)}
    .navegacion.secciones.movil .separados.drcha {align-items: flex-end}

    .texto-central {top: 51%}
    .navegacion.superior .idiomas a {font-size: 1.6rem}
    .navegacion.superior .mapa {font-size: 1.9rem; font-weight: 400;}
    .navegacion.secciones a {font-size: 1.8rem; font-weight: 500; letter-spacing: 0.5px}
    .texto-central h1 {font-size: 3.3rem;}
    .texto-central p {font-size: 1.6rem; text-shadow: 0 0 5px rgb(149 126 105)}
}






/* --------------------------------------------------------------------------*/
/* ---------------------------  CABECERA MINI  ------------------------------*/
/* ---------- (El mini menú fixed que aparece cuando subes arriba) ----------*/
/* --------------------------------------------------------------------------*/

/*Funcionamiento básico*/
.menu-mini {position: fixed; width: 100%; z-index: 100; transition: top 0.4s ease; top: -100px; background: #e8b282f0;
    padding: 0.4rem 1.5rem; padding-bottom: 0.4rem; box-shadow: 0.10rem 0.20rem 2rem var(--Azul);
    display: flex; justify-content: space-between /*separación de Logo y Secciones*/
}

/*Estilos visuales*/
.menu-mini .secciones-pc {display: flex; justify-content: flex-end; gap: 3rem}
.menu-mini .secciones-pc a {color: var(--Blanco); font-size: 1.7rem; transition: all 0.3s ease}/*1º color del texto*/
.menu-mini .secciones-pc a:hover {color: var(--Azul)}/*2º color del texto al hacerle :hover*/
.menu-mini .secciones-pc .active {color: var(--Azul)}/*3º Cuando estás dentro de la sección, ese texto se colorea*/
.logo-mini h1 {font-size: 2.5rem; color: var(--Blanco); transition: all 0.3s ease}
.logo-mini h1:hover {color: var(--Azul)}

/*En anchura PC salen las letras de las secciones, y en Anchura Móvil salen los iconos*/
.menu-mini .secciones-movil {display: none}
@media (max-width: 800px) {
    .menu-mini .secciones-movil {display: flex; gap: 1.5rem}
    .menu-mini .secciones-pc {display: none}
    .logo-mini h1:hover {color: var(--Blanco)}/*Quito el hover del color del logo en movil, que se queda tatuado*/
}

.menu-mini .secciones-movil a {display: flex /*pa forzar sus alturas solo al 100%*/}
.menu-mini .secciones-movil svg {transition: all 0.3s ease; fill: var(--Blanco)}/*1º color del icono*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 2º NO cambia el color del icono al hacerle :hover (xqe en movil se qeda tatuado*/
.menu-mini .secciones-movil a.active svg {fill: var(--Azul)}/*3º Cuando estás dentro de la sección, ese svg se colorea*/

.menu-mini .secciones-movil .apartamento svg {width: 29px}
.menu-mini .secciones-movil .entorno svg {width: 36px}
.menu-mini .secciones-movil .disponibilidad svg {width: 29px}
.menu-mini .secciones-movil .contacto svg {width: 30px}













/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* -------------------------------------------- SECCIÓN 1 "APARTAMENTO" ---------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------*/
/* ------------------  BARRA DESPLAZABLE DE ICONOS  -------------------*/
/* --------------------------------------------------------------------*/

.contenedor-barra {margin-top: 3rem; margin-bottom: 3rem;}

.barra {/*background: red;*/ display: flex; gap: 4rem; width: 3160px;/*ANCHO BARRA*/
align-items: normal;/*PONER LA ALTURA QUE QUIERAS A CAJITAS*/
cursor: grab;/*icono mano en toda la barra*/}
.grabbing {cursor: grabbing !important}/*icono mano apretada al pulsar*/
.cajita {width: 160px}

.barra img {width: 120px; margin: 0 auto}
.cajita p {font-size: 1.8rem; text-align: center; margin-top: 0.8rem; margin-bottom: 0.8rem}

.contenedor-barra {width: 100%; position: relative}

/*HACE INVISIBLE SIEMPRE LA BARRA DE DESPLAZAMIENTO HORIZONTAL*/
html {overflow-x: hidden; overflow-y: auto; width: 100%}
body {min-width: 100%}

/*LÍNEA CON CÍRCULO QUE MUEVE LA BARRA*/
.linea {position: relative; height: 8px; margin-top: 1rem; background: var(--Marron)}

.circulo {position: absolute; top: -6px; width: 20px; height: 20px; 
background: var(--Azul); cursor: pointer; border-radius: 50%}

html, body {overflow-x: hidden}/*Previene desplazamiento horizontal en móviles*/

/*Evita arrastrar Texto e Imágenes de dentro (pa evitar conflicto con el arrastre*/
.barra * {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
.barra img {pointer-events: none; -webkit-user-drag: none; user-drag: none}


@media (max-width: 800px) {
    .barra img {width: 86px}
    .cajita p {font-size: 1.65rem; letter-spacing: -0.2px}
    .cajita {width: 135px}
    .barra {gap: 1.5rem; width: 2405px/*ANCHO BARRA*/}
    .circulo {width: 24px; height: 24px}
}


/* -----------------------------------------------------------------*/
/* --------------------------   GALERÍA    -------------------------*/
/* -----------------------------------------------------------------*/

/*1º ---------------------Las miniaturas de la Galería*/

.galeria-imagenes {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2rem; margin-top: 10rem}

@media (max-width: 800px) {
    .galeria-imagenes {grid-template-columns: 1fr 1fr !important}
}

/*Si hay imágenes más pequeñas, que se pongan al 100% como sus img compañeras*/
.galeria-imagenes img {height: 100%; object-fit: cover; transition: all 0.3s ease}



/*2º ----------------------El Pop-up*/

.modal {position: fixed; inset: 0; z-index: 101; background: #000000f2; padding: 3rem}

/*Pone la imagen abierta al 100% y centrada horiztalmente*/
.modal img {max-width: 100%; max-height: 100%; margin: 0 auto}

/*Responsive de la imagen abierta*/
@media (max-width: 1200px) {
    .modal {display: grid; place-items: center;}/*centra imagen verticalmente*/
    .modal img {padding-top: 0}/*corrige el error del centrado verticalmente*/
}

/*Que salga el cursor "mano" fingiendo que es un botón*/
.galeria-imagenes img:hover {cursor: pointer;}

/*Transición al abrir y cerrar la imagen*/
.modal {animation: fadeIn ease-in 0.5s}
.modal.fade-out {animation: fadeOut ease-in 0.5s;}

@keyframes fadeIn {
    0%{opacity: 0}
    100%{opacity: 1}
}

@keyframes fadeOut {
    100%{opacity: 0}
    0%{opacity: 1}
}

/*Bloquear Scroll*/
html.no-scroll {overflow: hidden;}

/*Efecto al hacer hover sobre las imágenes de las miniaturas*/
.galeria-imagenes img:hover {opacity: 0.7;}


/* --------------------3º Las Flechas para pasar imágenes del Pop-up */

.flecha {display: inline-block; width: 40px; height: 30px; z-index: 100;
    position: absolute; top: 48%; transform: translateY(-50%);
    background: transparent; cursor: pointer; /*background: red*/
}
.flecha:hover span {background: white}
.flecha span {display: block; width: 20px; height: 3px; background: gray;
    transition: all 0.4s ease;
}

/*Flecha izquierda*/
.flecha.izquierda {left: 7px; transform: rotate(-90deg)}

.flecha.izquierda span:nth-child(1) {transform: rotate(-45deg); position: absolute;
    margin-top: 12px; margin-left: 3px;
}

.flecha.izquierda span:nth-child(2) {transform: rotate(45deg);
    margin-top: 12px; margin-left: 16px;
}

/*Flecha derecha*/
.flecha.derecha {right: 7px; transform: rotate(-90deg)}

.flecha.derecha span:nth-child(1) {transform: rotate(45deg); position: absolute;
    margin-top: 15px; margin-left: 3px;
}

.flecha.derecha span:nth-child(2) {transform: rotate(-45deg);
    margin-top: 15px; margin-left: 16px;
}


/*4º ----------------------- El Botón X (finge cerrar el Pop-up)*/

.equis {position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
    cursor: pointer; /*background: red;*/
    border-radius: 50%; z-index: 100;
}

.equis span {display: block; width: 32px; height: 3px;/*cada línea del Botón X*/
    background: gray; transition: all 0.3s ease; border-radius: 10px
}

.equis:hover span {background: white;}

/* --- Animación de la transformación del Botón X (de --- a X) */
.equis span:nth-child(1) {transform: rotate(-45deg);
position: absolute; margin-top: 18px; margin-left: 4px;}

.equis span:nth-child(2) {transform: rotate(45deg);
position: absolute; margin-top: 17px; margin-left: 4px;}


/*5º ---------------------Botón pa poner la Galería en Pantalla Completa*/

.agrandar {position: absolute; top: 16px; right: 63px; cursor: pointer;
width: 25px; height: 25px; z-index: 100}

.agrandar span {display: block; position: absolute; width: 10px; height: 3px; background: gray; border-radius: 5px; transition: all 0.3s ease}
.agrandar span::after {content: ''; position: absolute; width: 3px; height: 10px;
background: gray; border-radius: 5px; transition: all 0.3s ease}

/*esquina arriba izquierda*/
.agrandar span:nth-child(1), .agrandar span:nth-child(1)::after 
{top: 0; left: 0}

/*esquina arriba derecha*/
.agrandar span:nth-child(2), .agrandar span:nth-child(2)::after 
{top: 0; right: 0}

/*esquina abajo izquierda*/
.agrandar span:nth-child(3), .agrandar span:nth-child(3)::after 
{bottom: 0; left: 0}

/*esquina abajo derecha*/
.agrandar span:nth-child(4), .agrandar span:nth-child(4)::after
{bottom: 0; right: 0}

/*:hover*/
.agrandar:hover span {background: white}
.agrandar:hover span::after {background: white}


/*6º --------------------TRANSICONES entre las imágenes del Pop-up*/

/* Contenedor para las imágenes en el modal */
.modal .image-container {position: relative; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center; overflow: hidden
}

/* Asegurarse de que las imágenes estén en el mismo lugar y con proporciones completas */
.modal img {position: absolute; max-width: 100%; max-height: 100%;
    object-fit: contain; transition: opacity 0.5s ease-in-out;
}

/* Animación de desvanecimiento para la imagen actual */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.modal img.fade-out {animation: fadeOut 500ms forwards}

/* Animación de aparición para la nueva imagen */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.modal img.fade-in {animation: fadeIn 0.5s forwards}


/*7º --------------------------Efecto Zoom al pinchar en foto*/

.modal img {transition: transform 0.3s ease;
cursor: url(../img/lupa-mas.png) 17 17, none
}

/*ESTE ES EL ZOOM QUE SE LE HARÁ (CASI EL DOBLE)*/
.modal img.zoomed {transform: scale(1.9);
cursor: url(../img/lupa-menos.png) 17 17, none}

/* Añade esta clase al CSS de tus imágenes para aplicar la transición de tamaño */
.zoomable {transition: transform 0.3s ease}

/* Esta clase se aplicará a la imagen cuando esté en estado de zoom */
.zoomed {transform: scale(1.9)}

/* Opcional: transiciones suaves para la imagen cuando se cambie entre imágenes */
.image-container {transition: opacity 0.3s ease}

/* Asegúrate de que las imágenes nuevas no sean visibles al principio */
.image-container img.fade-in {opacity: 0}

.image-container img.fade-in {opacity: 1}














/* -------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------- LAS 3 IMÁGENES EMOTIVAS (PARALLAX) y sus Textos -------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------------------------------*/
.frase-emotiva.movil {display: none}

.frase-emotiva {max-width: 70rem; margin: 14rem auto; margin-bottom: 2rem}
.frase-emotiva blockquote {font-size: 3.5rem; font-weight: 200; font-style: italic; text-align: right; line-height: 1.4; color: var(--Marron)}
.frase-emotiva blockquote:first-child {margin-right: 10rem}

@media (max-width: 800px) {
    .frase-emotiva.pc {display: none}
    .frase-emotiva.movil {display: block}
    .frase-emotiva.movil blockquote {font-size: 2.5rem}
    .frase-emotiva.movil blockquote:first-child {margin-right: 0}
    .frase-emotiva.movil blockquote span {display: block}
}

.parallax {height: 100vh;/*Ocupar el 100% de tu pantalla*/
background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover}

#parallax1 {background-image: url('../img/emotivas/emotiva1pc.jpg')}
#parallax2 {background-image: url('../img/emotivas/emotiva2pc.jpg')}
#parallax3 {background-image: url('../img/emotivas/emotiva3pc.jpg')}

@media (max-width: 800px) {/*Imágenes para Tablet*/
    #parallax1 {background-image: url('../img/emotivas/emotiva1tablet.jpg')}
    #parallax2 {background-image: url('../img/emotivas/emotiva2tablet.jpg')}
    #parallax3 {background-image: url('../img/emotivas/emotiva3tablet.jpg')}
}

@media (max-width: 500px) {/*Imágenes para Movil*/
    #parallax1 {background-image: url('../img/emotivas/emotiva1movil.jpg')}
    #parallax2 {background-image: url('../img/emotivas/emotiva2movil.jpg')}
    #parallax3 {background-image: url('../img/emotivas/emotiva3movil.jpg')}
}























/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------------------- SECCIÓN 2 "ENTORNO" -----------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
.mapainteractivo {margin-top: 2rem; margin-bottom: 5rem}
.textoentornoarriba.txt-movil {display: none}


/* ------------------------ BOTONES DE LA APP DEL MAPA INTERACTIVO*/
.botonesdearriba {display: flex; justify-content: space-between; }

.btn-mapa {display: flex; position: relative; z-index: 99; margin-bottom: -2rem}
.btn-mapa.abajo {justify-content: flex-end; margin-top: -2.5rem}

.btn-mapa a {background: var(--Marron); padding: 5px; width: 160px; text-align: center; color: var(--Blanco);
cursor: pointer; font-size: 1.6rem; margin-top: 5px; border-radius: 8px; box-shadow: 4px 4px 4px 2px rgb(0 0 0 / 50%)}
.btn-mapa a:hover {background: var(--Azul)}


/* ------------------------ ELEMENTOS BÁSICOS DEL MAPA*/
.padre {position: relative}/*preparo al padre*/

.cuadricula {position: absolute; inset: 0;/*y la pongo al 100% de lo qe ocupa el padre*/}

/*Que solo sea señalable la parte pintada del svg*/
.objeto svg {pointer-events:none}
.objeto polygon, .objeto path {pointer-events:auto}

.objeto svg {cursor: pointer; position: absolute; fill:red; opacity: 0}/*---0/0.5----------<<<<<<<<<<< PRUEBAS: PON Y QUITA OPACIDAD*/

article {background: rgb(232 178 130 / 88%); padding: 0.1rem 0.5rem; position: absolute; z-index: 100;
box-shadow: 0.10rem 0.20rem 1rem #000000; border-radius: 5px; padding-bottom: 0.5rem;
/*transform: translate(-50%, -50%);*/ /*He quitado que el punto de la coordenada sea el centro */
display: none}/*---none/block-------------------------------------<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< PRUEBAS: PON Y QUITA LOS TEXTOS*/

article p {font-size: 1.7rem; font-weight: 600; margin-bottom: -0.5rem}
article .mini {font-size: 1.4rem; font-weight: 400}

.bolas {display: block}/*LAS BOLAS EMPIEZAN VIENDOSE*/
.objetos {display: none}/*LOS OBJETOS EMPIEZAN NO VIENDOSE*/

.bolas div {position: absolute; width: 30px; height: 30px; background: var(--Marron);
border-radius: 100px; border: 3px solid var(--Negro)}

.bolas div span {width: 12px; height: 12px; background: white; position: absolute; border-radius: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%)}

.bolas div:hover {background: #000000d6; border: 3px solid white; cursor: pointer}
.bolas div:hover span {width: 8px; height: 8px}


/* ------------------------CADA BOLA QUE PULSAR (y posición de su Texto)*/
.bola article {width: max-content}

#bola1 {top: 20.5%; left: 45.6%}
#bola1 article {top: 137%; left: -80%}

#bola2 {top: 7%; left: 87%;}
#bola2 article {top: 129%; left: -320%}

#bola3 {top: 25%; left: 87%;}
#bola3 article {top: 130%; left: -184%}

#bola4 {top: 22%; left: 76%;}
#bola4 article {top: 130%; left: -116%}

#bola5 {top: 11%; left: 67.2%;}
#bola5 article {top: 128%; left: -395%}

#bola6 {top: 23.5%; left: 63.5%;}
#bola6 article {top: 128%; left: -395%}

#bola7 {top: 40.5%; left: 60.3%;}
#bola7 article {top: -32%; left: 132%}

#bola8 {top: 60%; left: 34%;}
#bola8 article {top: 128%; left: -61%}

#bola9 {top: 80%; left: 23%;}
#bola9 article {top: 128%; left: -61%}

#bola10 {top: 21%; left: 37%;}
#bola10 article {top: -212%; left: -175%}

#bola11 {top: 26%; left: 33.5%;}
#bola11 article {top: 124%; left: -314%}

#bola12 {top: 30%; left: 37%;}
#bola12 article {top: 125%; left: -178%}

#bola13 {top: 46%; left: 20%;}
#bola13 article {top: 125%; left: -178%}

#bola14 {top: 46%; left: 7%;}
#bola14 article {top: -226%; left: -178%}

#bola15 {top: 56%; left: 5%;}
#bola15 article {top: 124%; left: -145%}

#bola16 {top: 29%; left: 14%;}
#bola16 article {top: 124%; left: -145%}

#bola17 {top: 20%; left: 12.5%;}
#bola17 article {top: 110%; left: -145%}

#bola18 {top: 16.5%; left: 8.6%;}
#bola18 article {top: -196%; left: -145%}

#bola19 {top: 16%; left: 4%;}
#bola19 article {top: -130%; left: -211%}

#bola20 {top: 22.8%; left: 1.2%;}
#bola20 article {top: 122%; left: -72%}



/* ------------------------posicion del texto de CADA OBJETO QUE PULSAR (el objeto se pone solo)*/
#objeto1 article {top: 26.5%; left: 44%}
#objeto2 article {top: 13%; left: 83%}
#objeto3 article {top: 28%; left: 85%}
#objeto4 article {top: 29%; left: 74%}
#objeto5 article {top: 13.5%; left: 59%}
#objeto6 article {top: 27%; left: 56%}
#objeto7 article {top: 37%; left: 59%}
#objeto8 article {top: 63.5%; left: 30%}
#objeto9 article {top: 84%; left: 21%}
#objeto10 article {top: 17%; left: 33%}
#objeto11 article {top: 29%; left: 28%}
#objeto12 article {top: 33%; left: 32%}
#objeto13 article {top: 50%; left: 16%}
#objeto14 article {top: 38%; left: 3.5%}
#objeto15 article {top: 59%; left: 3%}
#objeto16 article {top: 30%; left: 12%}
#objeto17 article {top: 21.5%; left: 9%}
#objeto18 article {top: 11%; left: 8%}
#objeto19 article {top: 14%; left: 1%}
#objeto20 article {top: 28%; left: 0%}


/* ----------- COLOR DE LA BOLA DE "Apartamento" ESPECIAL*/
.bolas #bola1 {background: var(--Azul)}
#bola1 article {background: #ffffffd1}
#bola1 article p {color: var(--Azul);}
#objeto1 article {background: #ffffffd1}
#objeto1 article p {color: var(--Azul);}

/* --------- LAS IMÁGENES DE CADA SITIO QUE SE MUESTRAN ABAJO A LA DERECHA*/
.visor-zona {position: absolute; bottom: 0; right: 0; pointer-events: none; z-index: 50; width: 49%; transition: width 0.5s ease}
.visor-zona img {width: 100%; display:block; border-top-left-radius: 20%; box-shadow: 0 0 20px rgba(0,0,0,0.6);
transition: border-radius 0.5s ease}
.visor-zona.grande {width: 100%; pointer-events: auto/*Que el ratón NO atraviese la img y pulse los marcadores de atrás*/}
.visor-zona.grande img {border-radius: 0}

/* --------- AL PULSAR EN EL BOTÓN "AMPLIAR MAPA" SE METE DENTRO DEL POP-UP QUE ES ASÍ:*/
#popup {display: none; opacity: 0;/*Pop-up oculto al principio*/
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000000d6;/* Fondo semi-transparente */
    justify-content: center; align-items: center;
    padding: 4rem;/*Reduce un poco el mapa, ya qe se pone al 100%, pero no tenía en cuenta que no es 16:9 ni los botones de arriba y abajo*/
    transition: opacity 0.5s ease;/*Transición*/ z-index: 1000;
}

html.no-scroll {overflow: hidden}/* Desactiva scroll con el pop-up visible*/
#popup.show {display: flex; opacity: 1}/*mostrar pop-up con transición*/
#popup.show .popup-content {transform: scale(1)} /*Restaura tamaño original*/



/* --------- CAMBIOS DE MANEJO DEL MAPA INTERACTIVO EN TABLET Y MOVIL*/
@media (max-width: 800px) {

    .boton-agrandar-mapa {display: none}/*Agrandar en el Popup en Mapa no tiene sentido en móvil (ni girándolo)*/
    .mapainteractivo.contenedor {padding: 0}

    .textoentornoarriba.txt-pc {display: none}/*El texto ahora te informa que debes hacer zoom con los dedos*/
    .textoentornoarriba.txt-movil {display: block}

    .btn-mapa {margin-bottom: 1rem}/*Los botones se ponen más discretos*/
    .btn-mapa.abajo {margin-top: 0.5rem}
    .btn-mapa a {font-size: 1.2rem; width: 115px}
    .boton-marcadores {margin-left: 2rem}
    .boton-agrandar-img {margin-right: 2rem}

    .bolas div {width: 14px; height: 14px; border: 1px solid var(--Negro)}/*Las Bolas se ponen más discretas*/
    .bolas div:hover {border: 1px solid white}
    .bolas div span {width: 5px; height: 5px}
    .bolas div:hover span {width: 5px; height: 5px}

    article p {font-size: 1.2rem}/*El texto se pone más pequeño*/
    article .mini {font-size: 1rem}/*El texto se pone más pequeño*/
    
    /*La posición de algunos textos cambia también (para no salirse de la pantalla)*/
    #bola2 article {top: 133%; left: -850%}
    #bola19 article {left: -150%}
    #bola3 article {left: -352%}
    #bola7 article {left: -22%}

}






















/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------- SECCIÓN 3 "DISPONIBILIDAD" -------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
.txtsol {z-index: 99; position: relative}

/*----------------------------*/
/* ---------------- CALENDARIO*/
.calendar-container {max-width: 40rem; padding: 1rem; border-radius: 10px; margin: 0 auto;
background: white; text-align: center; box-shadow: 6px 6px 30px rgb(79 128 164 / 74%); margin-top: 4rem;
z-index: 99; position: relative;/*Pa poner el sol de fondo*/
}

.calendar-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem}

.calendar-header h2 {font-family: var(--Parrafos); font-weight: 700; margin-bottom: 0}

.calendar-header button {background: none; border: none; cursor: pointer; padding: 5px 10px;
font-size: 1.8rem; color: var(--Marron)}
.calendar-header button:hover {color: var(--Azul)}

.weekdays, .days {display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem}

.weekdays div {font-weight: bold; color:white; background: var(--Marron); border-radius: 0.5rem}

.days div {padding: 0.7rem; border-radius: 0.5rem; cursor: pointer; transition: 0.3s;
background: #fff; color: var(--Negro)}

.days div:hover {background: #f1f1f1}

.today {color: var(--Azul) !important; font-weight: 900 !important; border: 1px solid var(--Azul)}

@media (max-width: 500px) {.days div {padding: 0}}/*En Móvil (500px) los números se aprietan*/

/* Día con evento */
.event-day {background:#ff7578 !important; color:white; font-weight:bold; position:relative}

/* Texto de cada evento */
.event-day::after {content: attr(data-event); position:absolute; top: 65%; left: 50%; transform:translateX(-50%);
white-space:nowrap; opacity:0; pointer-events:none; transition:0.2s;
background:var(--Negro); color:white; padding:1rem; border-radius:5px; font-size:1.4rem;
}
.event-day:hover::after {opacity:1; z-index: 9}


/*----------------------------*/
/* ---------------- SOL DE FONDO*/
#disponibilidad {position: relative;}

.circulo-amarillo {position: absolute; z-index: 1; left: 53%; top: 2rem;
width: 35rem; height: 35rem; background-color: #fff3de; border-radius: 50%;
margin: 20px auto; box-shadow: 0 0 15px #FFC300;
background-image: radial-gradient(circle at bottom left,
    rgb(255 255 255) 50%,
    rgb(243 197 67) 124%
  );
box-shadow: 10px -10px 49px 1px rgba(243, 197, 67, 0.8);
}

#disponibilidad h1, #disponibilidad p {position: relative; z-index: 2}



















/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* --------------------------------------------- SECCIÓN 4 "CONTACTO" -----------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
.botones-contacto {display: flex; gap: 4rem}
@media (max-width: 800px) {.botones-contacto {flex-direction: column; gap: 3rem}}

/* ----Aspecto de la Caja Pop-up*/
.popup-container-contacto {
    display: none; opacity: 0;/*Pop-up oculto al principio*/
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #0b84a7e8;/* Fondo semi-transparente */
    justify-content: center; align-items: center; padding: 1.5rem;
    transition: opacity 0.5s ease;/*Transición*/ z-index: 1000;
}

.popup-content-contacto {
    background-color: white; text-align: center;
    padding: 20px; border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transform: scale(0.8); /* Comienza ligeramente escalado */
    transition: transform 0.3s ease;/*Transición*/
}

.popup-content-contacto button {border: none; cursor: pointer;
    margin: 10px 5px; padding: 5px 20px; border-radius: 10px;
    background-color: var(--Marron); color: white; font-size: 16px; margin-bottom: 0;
}
.popup-content-contacto button:hover {background-color: var(--Azul)}

html.no-scroll {overflow: hidden}/* Desactiva scroll con el pop-up visible*/

.popup-container-contacto.show {display: flex; opacity: 1}/*mostrar pop-up con transición*/

.popup-container-contacto.show .popup-content-contacto {transform: scale(1)} /*Restaura tamaño original*/

.popup-content-contacto p {margin-bottom: 1rem}
.popup-content-contacto p span {display: block}

@media (max-width: 500px) {.popup-content-contacto p span {display: inline}}



















/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* --------------------------------------------- SECCIÓN 5 "COMPARTIR" ----------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
.compartir-wp {margin-bottom: 14rem}
.compartir-wp p {color: var(--Blanco); margin-bottom: 0; font-size: 1.8rem; font-style: italic; font-weight: 500; padding: 1rem}











    














/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------- PIE DE PÁGINA --------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/

/*----- FONDO DE MAR CURVO CON TEXTO*/
footer.pie {position: relative; overflow: hidden}

footer.pie .imagen-mar {width: 100%; height: 30rem; object-fit: cover;
display: block; position: relative; z-index: 1}

footer.pie .ola-superior {position: absolute; top: 0; left: 0; width: 100%; height: 160px; z-index: 2}

footer.pie .ola-superior svg {width: 100%; height: 100%; display: block}

.pie .texto * {padding: 0 2rem; color: var(--Blanco); text-align: center; text-shadow: 0 0 5px rgb(79 128 164)}
.pie h1 {font-size: 4rem}
.pie p {font-weight: 400; font-size: 2rem; margin-top: -0.5rem; margin-bottom: -0.5rem}
.pie .registrado {font-weight: 300; font-size: 1.8rem}

.pie .enlace-jose {margin-top: 2.5rem; font-size: 1.6rem; font-style: normal}
.pie .enlace-jose a {padding: 0; font-size: 1.6rem; font-style: normal; font-weight: 500; text-decoration: underline}
.pie .enlace-jose a:hover {color: var(--Marron)}

@media (max-width: 800px) {
    footer.pie .imagen-mar {height: 20rem}
    footer.pie .ola-superior {height: 50px}
    .pie h1 {font-size: 2.5rem; margin-top: 1rem}
    .pie p {font-size: 1.6rem; margin-top: 0; margin-bottom: 0}
    .pie .enlace-jose, .pie .enlace-jose a {font-size: 1.4rem}
}

@media (max-width: 373px) {.pie h1 {margin-top: 0}}


/*----- BOTÓN FLECHA PA SUBIR ARRIBA*/
.subir {position: fixed; bottom: 0; right: 0; z-index:100; margin: 10px;padding: 10px; padding-left: 9px;
cursor: pointer; line-height: 1.5; border-radius: 100px; background: #ffffff80; display: none}

.subir:hover .flechas span {background:var(--Azul)}
.flechas {display: inline-block; width: 22px}
.flechas span {display: block; width: 20px; height: 3px; background:var(--Marron); transition: all 0.3s ease}
.flechas span:nth-child(1) {transform: rotate(-45deg); position: absolute; margin-top: -9px; margin-left: -5px;}
.flechas span:nth-child(2) {transform: rotate(45deg); margin-top: -9px; margin-left: 8px}





















/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------- COOKIES ----------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/

/*CARTEL DE LAS COOKIES*/
#cajacookies {background: #e8b282e8; padding: 10px; text-align: center; position: fixed; bottom: 0px; width: 100%;
z-index: 99; transition: transform 0.5s ease, opacity 0.5s ease; /* Transición para irse */}

#cajacookies a {color: var(--Negro); text-decoration: underline;}
#cajacookies a:hover {color: var(--Azul)}

#cajacookies p {font-size: 1.7rem; color: var(--Negro); margin-bottom: 0;}

#cajacookies button {background: var(--Blanco); color: var(--Negro); margin-left: 25px; border: 0px; padding: 6px 15px;
border-radius: 5px; font-size: 1.7rem}
          
#cajacookies button:hover {background:var(--Azul); color: var(--Blanco)}

@media screen and (max-width: 904px) {#cajacookies button {margin-top: 8px}}

#cajacookies.oculto {
    transform: translateY(100%); /*Lo mueve hacia abajo fuera de la pantalla*/
    opacity: 0; /*Desvanece el cartel*/
}


/*PÁGINA DE LAS COOKIES*/
.cookies {text-align: justify}
.cookies h2 {font-size: 2.5rem; font-weight: bold; margin-bottom: 1rem}
.cookies p {font-size: 1.8rem; margin-bottom: 5rem}
.cookies ul {margin-top: -3.5rem; margin-bottom: 5rem}
.cookies li {font-size: 1.7rem; margin-left: 4rem; margin-bottom: 1.5rem}
.cookies .titulo-epigrafe {font-size: 1.8rem; font-weight: 600}






















/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------- PAGINA NO EXISTE ----------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------*/
.cabecera-video.minivideo {max-height: 40rem}
.pag-noexiste {margin-top: 10rem; margin-bottom: 10rem}
.pag-noexiste h1 {margin-bottom: 2rem}