@charset "UTF-8";


/* MAPA ESPACIOS INTERACTIVO */


	.path-el-recinto #bloque-tit {
		font-family: "FKRomanStandard";
		font-weight: 400;
		color: #FFF;
	}

	.path-el-recinto #bloque-tit h2 {
		font-size: 65px;
		line-height: 65px; 
		letter-spacing: -1.95px;
	}

	.path-el-recinto #bloque-tit h3 {
		font-size: 32px;
		line-height: 38px; 
		letter-spacing: -0.96px;
	}

	#map-container {
		position: relative;
		background-color: #000;
		/* width: 820px; */
		height: 550px;
		width: 100%;
	}




/* Custom para el ul desplegable de Plantas */

.custom-select {
    position: relative;
    width: 100px;
    font-family: sans-serif;
}

.custom-select .selected {
    cursor: pointer;
	font-family: "FKGroteskNeue";
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: -0.54px;
	height: 33px;
	background: #000;
	color: #FFF;
	border-radius: 9px 9px 0 0;
   padding: 2px 15px 2px 15px;
	margin: 0;
	border: 0;
	padding-right: 20px;
	width: max-content;
	position: relative;
}



.custom-select .options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0 0 10px 0;
  background: #000;
  display: none;
  z-index: 1000;
  border-radius: 0 0 6px 6px;
  width: max-content;
}

.custom-select.open .options {
  	display: block;
	border: 1px solid #6a6a6a;
}

.custom-select .options li {
  font-family: "FKGroteskNeue";
  padding: 2px 15px 2px 15px;
  cursor: pointer;
  color:#FFF;
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.54px;
}



.custom-select .options li.active {
  font-weight: 700;
}

.custom-select .options li:hover {
  	color: #FF6131;
}










    /* Menús */
	#map-container #floor-menu {
		position: absolute;
		top: -43px;
		right: 18%;
		z-index: 10;
		font-family: 'FKGroteskNeue';
		font-size: 18px;
		line-height: 26px;
		letter-spacing: -0.54px;
	}

	#map-container #poi-menu {
		position: absolute;
		/* top: 10px; */
		top: -43px;
		z-index: 10;
		right: 0;
		font-family: 'FKGroteskNeue';
		max-width: 180px;
		font-size: 18px;
		line-height: 26px;
		letter-spacing: -0.54px;
	}

    #map-container #poi-menu p{
      margin: 0;
    }

	#map-container #poi-list {
		background: #000;
		margin: 0;
  		padding: 0 0 10px 0;
		list-style: none;
		color: #FFF;
		max-width: 160px;
	}

    #map-container #poi-list.hidden {
      display: none;
    }
	  
	#map-container #poi-list li {
	  font-family: "FKGroteskNeue";
  	  padding: 2px 15px 2px 15px;
	  cursor: pointer;
	  color:#FFF;
	  margin-top: 4px;
	  margin-bottom: 4px;
	  font-size: 18px;
	  line-height: 26px;
	  letter-spacing: -0.54px;
	}
	  
	#map-container #poi-list li:hover {
		color: #FF6131;
    }








    /* Mapas */



	.path-el-recinto .block-block-content291bbf63-ec79-406c-9fd9-1a7c5eae407a #bloque {
			background-color: #000;
			display: flex;
			justify-content: center;
			margin-left: -8px;
			margin-right: -8px;
			padding: 40px 25px;
		    width: 100%;
	}

	.path-el-recinto .block-block-content291bbf63-ec79-406c-9fd9-1a7c5eae407a #bloque .field--name-body {
		    width: 100%;
	} 


    #map-container #map {
      position: relative;
      height: 100%;
      background-color: #d0e0f0;
	  width: 820px;
	  margin: auto;
    }

    #map-container .floor {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
	  background-color: #000;
    }

    #map-container .floor.active {
      display: block;
    }

    #map-container .poi {
      position: absolute;
      cursor: pointer;
    }

    #map-container .poi span {
      display: none;
      margin-left: 10px;
    }

	#map-container .poi a.icon {
		width: 40px;
	    height: 40px;
		display: inline-block;
		padding: 4px 12px;
		border-radius: 10px;
		color: #000;
		border: 1px solid #000;
		text-align: center;
		font-family: "FK Grotesk Neue";
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 33px;
		letter-spacing: -0.48px;
		margin-left: 8px;
		background: #fff url(../../images/esfera.png) no-repeat center center;
	}

	#map-container .poi a.icon:hover {
		background: #fff url(../../images/esfera-orange.png) no-repeat center center;
	}

	#map-container .poi a.icon span {
		color:#000;
		display: block;
		width: 24px;
		height: 24px;
		padding-left: 1px;
	}

	#map-container .poi a.icon span:hover {
		color: #000;
		display: block;
		background: #FF6131;
		border-radius: 12px;
	}

	#map-container .poi-title a.titulo {
		padding: 4px 12px;
		border-radius: 10px;
		background: #FFF;
		color: #000;
		border: 1px solid #000;
		text-align: center;
		font-family: "FK Grotesk Neue";
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 33px;
		letter-spacing: -0.48px;
		height: 40px;
		display: inline-block;
		width: fit-content;
	}

	#map-container .poi-title a:hover {
		text-decoration: none !important;
		color: #FF6131;
	}
	  
	#map-container #poi-toggle {
		font-family: "FKGroteskNeue";
		font-size: 18px;
		font-weight: 700;
		line-height: 26px;
		letter-spacing: -0.54px;
		height: 33px;
		background: #000;
		color: #FFF;
		border-radius: 9px 9px 0 0;
		margin: 0;
		border: 0;
       padding: 2px 15px 2px 15px;
	}
	  
	#map-container .poi-title {

	}

    #map-container a .poi-title {
      text-decoration: none;
      color: #FFF;
    }

    #map-container .poi-title a:hover {
      text-decoration: underline;
    }

    #map-container .poi-title a:hover + .icon {
      display: inline-block;
      cursor: pointer;
    }

    #map-container .poi.active span {
      display: inline-block;
    }
	  
	#floor-selector {
		background-color: #000;
		color: #FFF;
		border-radius: 9px 9px 0 0;
   	    padding: 5px 10px;
		border: 0;
		cursor: pointer;
	}	  

	#floor-selector option{
		cursor: pointer;
	}	  

	#floor-selector:focus,
	#floor-selector:active {
		box-shadow: none;
		box-shadow: 0;
		border: 0;
	}



	/* Flecha hacia abajo */
	.custom-select .selected::after {
		content: '';
		position: absolute;
		right: 0;
		top: 18px;
		transform: translateY(-50%);
		border: 6px solid transparent;
		border-top-color: #FFF;
		pointer-events: none;
	}	

	#map-container #poi-toggle::after {
		content: '';
		position: absolute;
		right: -4px;
		top: 21px;
		transform: translateY(-50%);
		border: 6px solid transparent;
		border-top-color: #FFF;
		pointer-events: none;
	}





/* Vistas */
	#map-container #vista-menu {
		position: absolute;
		z-index: 10;
		top: 15px;
	}

	#map-container button {
		margin: 0 2px;
		background: #FFF;
		color: #000;
		border-radius: 10px;
		font-family: "FKRomanStandard";
		
		text-align: center;
		font-size: 16px;
		
		font-weight: 500;
		line-height: 28px; 
		letter-spacing: -0.48px;
	}

	#map-container button:hover {
		background: #FF6131;
		color: #000;
	}







/* -------------------------------- */
/* IMÁGENES DE CADA PLANTA    Norte /Sur / Este / Oeste*/ 
/* -------------------------------- */

.floor[data-floor="4"][data-vista="A"] { background-image: url("../../images/plantas/piso-4-A.jpg"); }
.floor[data-floor="4"][data-vista="B"] { background-image: url("../../images/plantas/piso-4-B.jpg"); }
.floor[data-floor="4"][data-vista="C"] { background-image: url("../../images/plantas/piso-4-C.jpg"); }
.floor[data-floor="4"][data-vista="D"] { background-image: url("../../images/plantas/piso-4-D.jpg"); }

.floor[data-floor="3"][data-vista="A"] { background-image: url("../../images/plantas/piso-3-A.jpg"); }
.floor[data-floor="3"][data-vista="B"] { background-image: url("../../images/plantas/piso-3-B.jpg"); }
.floor[data-floor="3"][data-vista="C"] { background-image: url("../../images/plantas/piso-3-C.jpg"); }
.floor[data-floor="3"][data-vista="D"] { background-image: url("../../images/plantas/piso-3-D.jpg"); }

.floor[data-floor="2"][data-vista="A"] { background-image: url("../../images/plantas/piso-2-A.jpg"); }
.floor[data-floor="2"][data-vista="B"] { background-image: url("../../images/plantas/piso-2-B.jpg"); }
.floor[data-floor="2"][data-vista="C"] { background-image: url("../../images/plantas/piso-2-C.jpg"); }
.floor[data-floor="2"][data-vista="D"] { background-image: url("../../images/plantas/piso-2-D.jpg"); }

.floor[data-floor="1"][data-vista="A"] { background-image: url("../../images/plantas/piso-1-A.jpg"); }
.floor[data-floor="1"][data-vista="B"] { background-image: url("../../images/plantas/piso-1-B.jpg"); }
.floor[data-floor="1"][data-vista="C"] { background-image: url("../../images/plantas/piso-1-C.jpg"); }
.floor[data-floor="1"][data-vista="D"] { background-image: url("../../images/plantas/piso-1-D.jpg"); }

.floor[data-floor="0"][data-vista="A"] { background-image: url("../../images/plantas/piso-0-A.jpg"); }
.floor[data-floor="0"][data-vista="B"] { background-image: url("../../images/plantas/piso-0-B.jpg"); }
.floor[data-floor="0"][data-vista="C"] { background-image: url("../../images/plantas/piso-0-C.jpg"); }
.floor[data-floor="0"][data-vista="D"] { background-image: url("../../images/plantas/piso-0-D.jpg"); }

.floor[data-floor="-1"][data-vista="A"] { background-image: url("../../images/plantas/piso--1-A.jpg"); }
.floor[data-floor="-1"][data-vista="B"] { background-image: url("../../images/plantas/piso--1-B.jpg"); }
.floor[data-floor="-1"][data-vista="C"] { background-image: url("../../images/plantas/piso--1-C.jpg"); }
.floor[data-floor="-1"][data-vista="D"] { background-image: url("../../images/plantas/piso--1-D.jpg"); }

.floor[data-floor="-2"][data-vista="A"] { background-image: url("../../images/plantas/piso--2-A.jpg"); }
.floor[data-floor="-2"][data-vista="B"] { background-image: url("../../images/plantas/piso--2-B.jpg"); }
.floor[data-floor="-2"][data-vista="C"] { background-image: url("../../images/plantas/piso--2-C.jpg"); }
.floor[data-floor="-2"][data-vista="D"] { background-image: url("../../images/plantas/piso--2-D.jpg"); }

/* -------------------------------------- */
/* COORDENADAS DE LOS PUNTOS */
/* ------------------------------------- */

/* Ejemplo de coordenadas por planta y vista */
/* Puedes ajustar left y top según tu mapa */

/* PLANTA 4 */
.floor[data-floor="4"] .poi[data-poi="4-1"] { left:50%; top:60%; }
.floor[data-floor="4"] .poi[data-poi="4-2"] { left:80%; top:50%; }

.floor[data-floor="4"][data-vista="B"] .poi[data-poi="4-1"] { left:30%; top:80%; }
.floor[data-floor="4"][data-vista="B"] .poi[data-poi="4-2"] { left:50%; top:60%; }

.floor[data-floor="4"][data-vista="C"] .poi[data-poi="4-1"] { left:70%; top:40%; }
.floor[data-floor="4"][data-vista="C"] .poi[data-poi="4-2"] { left:80%; top:30%; }

.floor[data-floor="4"][data-vista="D"] .poi[data-poi="4-1"] { left:40%; top:70%; }
.floor[data-floor="4"][data-vista="D"] .poi[data-poi="4-2"] { left:60%; top:40%; }

/* PLANTA 3 */
.floor[data-floor="3"] .poi[data-poi="3-1"] { left:50%; top:60%; }
.floor[data-floor="3"] .poi[data-poi="3-2"] { left:80%; top:50%; }

.floor[data-floor="3"][data-vista="B"] .poi[data-poi="3-1"] { left:30%; top:80%; }
.floor[data-floor="3"][data-vista="B"] .poi[data-poi="3-2"] { left:50%; top:60%; }

.floor[data-floor="3"][data-vista="C"] .poi[data-poi="3-1"] { left:70%; top:40%; }
.floor[data-floor="3"][data-vista="C"] .poi[data-poi="3-2"] { left:80%; top:30%; }

.floor[data-floor="3"][data-vista="D"] .poi[data-poi="3-1"] { left:40%; top:70%; }
.floor[data-floor="3"][data-vista="D"] .poi[data-poi="3-2"] { left:60%; top:40%; }

/* PLANTA 2 */
.floor[data-floor="2"] .poi[data-poi="2-1"] { left:50%; top:60%; }
.floor[data-floor="2"] .poi[data-poi="2-2"] { left:80%; top:50%; }

.floor[data-floor="2"][data-vista="B"] .poi[data-poi="2-1"] { left:30%; top:80%; }
.floor[data-floor="2"][data-vista="B"] .poi[data-poi="2-2"] { left:50%; top:60%; }

.floor[data-floor="2"][data-vista="C"] .poi[data-poi="2-1"] { left:70%; top:40%; }
.floor[data-floor="2"][data-vista="C"] .poi[data-poi="2-2"] { left:80%; top:30%; }

.floor[data-floor="2"][data-vista="D"] .poi[data-poi="2-1"] { left:40%; top:70%; }
.floor[data-floor="2"][data-vista="D"] .poi[data-poi="2-2"] { left:60%; top:40%; }

/* PLANTA 1 */
.floor[data-floor="1"] .poi[data-poi="1-1"] { left:50%; top:60%; }
.floor[data-floor="1"] .poi[data-poi="1-2"] { left:80%; top:50%; }

.floor[data-floor="1"][data-vista="B"] .poi[data-poi="1-1"] { left:30%; top:80%; }
.floor[data-floor="1"][data-vista="B"] .poi[data-poi="1-2"] { left:50%; top:60%; }

.floor[data-floor="1"][data-vista="C"] .poi[data-poi="1-1"] { left:70%; top:40%; }
.floor[data-floor="1"][data-vista="C"] .poi[data-poi="1-2"] { left:80%; top:30%; }

.floor[data-floor="1"][data-vista="D"] .poi[data-poi="1-1"] { left:40%; top:70%; }
.floor[data-floor="1"][data-vista="D"] .poi[data-poi="1-2"] { left:60%; top:40%; }

/* PLANTA 0 */
.floor[data-floor="0"] .poi[data-poi="0-1"] { left:50%; top:60%; }
.floor[data-floor="0"] .poi[data-poi="0-2"] { left:80%; top:50%; }

.floor[data-floor="0"][data-vista="B"] .poi[data-poi="0-1"] { left:30%; top:80%; }
.floor[data-floor="0"][data-vista="B"] .poi[data-poi="0-2"] { left:50%; top:60%; }

.floor[data-floor="0"][data-vista="C"] .poi[data-poi="0-1"] { left:70%; top:40%; }
.floor[data-floor="0"][data-vista="C"] .poi[data-poi="0-2"] { left:80%; top:30%; }

.floor[data-floor="0"][data-vista="D"] .poi[data-poi="0-1"] { left:40%; top:70%; }
.floor[data-floor="0"][data-vista="D"] .poi[data-poi="0-2"] { left:60%; top:40%; }

/* PLANTA -1 */
.floor[data-floor="-1"] .poi[data-poi="-1-1"] { left:50%; top:60%; }
.floor[data-floor="-1"][data-vista="B"] .poi[data-poi="-1-1"] { left:30%; top:80%; }
.floor[data-floor="-1"][data-vista="C"] .poi[data-poi="-1-1"] { left:70%; top:40%; }
.floor[data-floor="-1"][data-vista="D"] .poi[data-poi="-1-1"] { left:40%; top:70%; }

/* PLANTA -2 */
.floor[data-floor="-2"] .poi[data-poi="-2-1"] { left:50%; top:60%; }
.floor[data-floor="-2"][data-vista="B"] .poi[data-poi="-2-1"] { left:30%; top:80%; }
.floor[data-floor="-2"][data-vista="C"] .poi[data-poi="-2-1"] { left:70%; top:40%; }
.floor[data-floor="-2"][data-vista="D"] .poi[data-poi="-2-1"] { left:40%; top:70%; }