html {scroll-behavior:smooth;}
body {background:#fff; text-align:center; overflow-x:hidden; font-family:Arial, Helvetica, sans-serif;}

* {text-decoration:none; margin:0; padding:0; box-sizing:border-box;}	

a, img {transition:all 0.5s;}
a {color:#006f71; text-decoration:none;}
a:hover {color:#000;}

.inactivo {opacity:0.4 !important; pointer-events:none;}

:root {
  --colPrim:#78992b;
  --colSecu:#006f71;
  --colTerc:#2ACD93;
  --colCuat:#000000;
}

/*----- Apartado Obras -----*/

.contenedor {text-align:center; width:400px; top:45%; left:50%; transform:translate(-50%,-50%); position:fixed;}
.obrasImg img {width:40%; margin:5% auto;}
.obrasTxt {margin:20px 10px; color:#000; font:400 20px Arial, Helvetica, sans-serif; line-height:30px;}
.ruedasDentadas {width:170px; height:120px; margin:auto;}
.obrasRueda1 {width:100px; height:100px; margin:0; opacity:0.8; animation:aniRue1 10s linear infinite;}
.obrasRueda2 {width:75px; height:75px; margin:45px 0 0 95px; animation:aniRue2 10s linear infinite;}
.obrasRueda1, .obrasRueda2 {background:url(_images/ruedaNegra.svg) no-repeat center center; background-size:contain; position:absolute;}
@keyframes aniRue1 {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@keyframes aniRue2 {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(-360deg);}
}

/*----- Apartado Idiomas -----*/

.capaFlexBody, .fondoRecurso, .imgFondo, .logoWeb {width:100%; max-width:1500px;}
.fondoRecurso, .imgFondo, .logoWeb {height:35vh;}

.capaFlexBody {margin:auto; display:flex; justify-content:center; align-items:flex-start; flex-direction:row; flex-wrap:wrap;}

.imgFondo {overflow:hidden; position:absolute;}
.imgFondo img {width:100%; height:100%; object-fit:cover; object-position:center;}
.logoWeb {margin:0; padding:8px 0 5px 0; position:absolute;}
.logoWeb img {width:70px; height:auto; margin:auto; padding:7px; background:rgba(255,255,255,0.8);}

.recursoGeneral {
  width:auto; margin:-50px 0 30px 0; padding:5px 10px; font-size:20px; text-align:center; color:#000; 
  background:rgba(255,255,255,0.8); box-shadow:0 0 10px rgba(0,0,0,0.8); border:solid 2px #fff; border-radius:8px; z-index:10;
}
.recOlivos {margin:-75px 0 30px 0;}
.contRecurso {width:90%; margin:15px auto; padding:15px; border-radius:15px; border:solid 2px #ccc; background:#f5f5f5;}
.recursoTitulo {width:100%; margin-bottom:20px; font-size:1.3em; text-align:center; color:#000;}
.capaFlexIdiomas {display:flex; justify-content:center; align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:20px;}
.capaFlexIdiomas a {width:60px; height:50px; line-height:50px; font-size:20px; font-weight:600; background:#fff; border-radius:50px; box-shadow:0 0 10px rgba(0,0,0,0.2); transition:all 0.2s;}
.capaFlexIdiomas a:hover {box-shadow:0 0 4px rgba(0,0,0,0.5);}


/*----- Audioguías -----*/

#playerList {width:90%; margin:20px auto 40px auto;}
.playlist {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:15px;}
.playlist a {padding:10px; color:var(--colSecu); text-decoration:none; background:#fff; box-shadow:0 0 10px rgba(0, 0, 0, 0.2); line-height:40px; border-radius:10px; cursor:pointer;}
.playlist a:hover {background:var(--colSecu); color:#fff;}
.contTituloPista {width:100%; margin:20px 0 10px 0;}
#tituloPista {width:fit-content; margin:auto; padding:15px 20px; border:solid 1px #ccc; border-radius:8px; text-align:center; font-size:1.2rem;}



/* ---------------------------------------- RESPONSIVE ---------- RESPONSIVE ---------- RESPONSIVE ------------------------------------------ */

@media only screen and (max-width: 650px) {

  .contenedor {width:80%; top:50%;}
  .obrasImg img {width:34%;}
  .obrasTxt {margin:15px 10px; font-size:16px; line-height:24px;}
  .ruedasDentadas {width:125px; height:85px;}
  .obrasRueda1 {width:75px; height:75px; margin:0 0 0 0;}
  .obrasRueda2 {width:50px; height:50px; margin:36px 0 0 72px;}

}