/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Jersey+10&family=Oswald:wght@200..700&family=Playwrite+AR+Guides&family=Smythe&family=Tiny5&display=swap');


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

html,
body{
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:Arial, Helvetica, sans-serif;
}

/* ===== SLIDER ===== */

.slider{
  display:flex;
  width:400vw;
  height:100vh;
  transition:transform 0.5s ease-in-out;
}

.slide{
  width:100vw;
  height:100vh;
  flex-shrink:0;
  position:relative;
}

/* ===== IMÁGENES ===== */

.bg{
  width:100%;
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  background-color: #F7E7D0;
}

.portada{
  background-image:url("images/portada.jpg");
}

.contraportada{
  background-image:url("images/contraportada.jpg");
}

/* ===== VIDEO ===== */

.video-container{
  width:100%;
  height:100%;
  overflow:hidden;
}

.video-container video{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ===== MAPA ===== */

.map-slide{

  width:100%;
  height:100%;

  background-color: #F7E7D0;

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

  gap:20px;

  padding:20px;

}

.map-slide h1{
  color:black;
  font-size:3rem;
  text-align:center;
  font-family: "Smythe", system-ui;

}

.map-frame{

  width:80%;
  height:60%;

  border:none;

  border-radius:20px;

  box-shadow:0 10px 30px rgba(49, 49, 49, 0);

}

.maps-btn{

  background:white;

  color:black;

  text-decoration:none;

  padding:15px 25px;

  border-radius:10px;

  font-weight:bold;

  transition:0.3s;

  opacity:0.4;


}

.maps-btn:hover{
  opacity:0.4;
}

/* ===== FLECHAS ===== */


.arrow{

  position:fixed;

  top:50%;

  transform:translateY(-50%);

  z-index:9999;

  border:none;

  background:rgba(0,0,0,0.15);

  backdrop-filter:blur(6px);

  -webkit-backdrop-filter:blur(6px);

  color:white;

  width:60px;
  height:60px;

  border-radius:50%;

  cursor:pointer;

  font-size:2rem;

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

  transition:0.3s;

  transition: opacity 0.4s ease;


}

.arrow:hover{
  background:rgba(0,0,0,0.35);
}



.left{
  left:20px;
}

.right{
  right:20px;
}

/* ===== MÓVIL ===== */

@media(max-width:768px){

  .arrow{
    width:45px;
    height:45px;
    font-size:1.4rem;
  }

  .map-slide h1{
    font-size:2rem;
    font-family: "Smythe", system-ui;

  }

  .map-frame{
    width:95%;
    height:50%;
  }

}


p{
  font-family: "Oswald", sans-serif;
}