/* Fuentes texto */
@font-face {
    font-family: 'robotobold';
    src: url('../fonts/roboto-bold-webfont.eot');
    src: url('../fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('../fonts/poppins-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-bold-webfont.ttf') format('truetype'),
         url('../fonts/roboto-bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'poppinsregular';
    src: url('../fonts/poppins-regular-webfont.eot');
    src: url('../fonts/poppins-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('../fonts/poppins-regular-webfont.woff') format('woff'),
         url('../fonts/poppins-regular-webfont.ttf') format('truetype'),
         url('../fonts/poppins-regular-webfont.svg#poppinsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Variables*/
:root{
    --fuentePrincipal: 'robotobold';
    --fuenteSecundaria:  'poppinsregular';
    --blanco:#fff;
    --negro:#000;
    --primario:rgb(0, 76, 184);
    --secundario:#0071c2;
    --azulOscuroFondos:rgba(111, 163, 236, 0.2);
}
/* Globales y utilidadaes*/
html{                                          
    font-size: 62.5%;
    box-sizing: border-box;
}    
*,
*::before,
*::after{
   box-sizing: inherit;
}
body{
    background-color: #f1f1f1;
    line-height: 1.5;
    font-size: 1.8rem;
    font-family: var(--fuenteSecundaria);
    z-index: 0;
    position: relative;
}
h1,h2,h3{
    margin: 0;
    padding: 0;
    color: #0071c2;
    font-family: var(--fuentePrincipal);
}
h1{
    font-size: 2.5rem;
}
h2{
    font-size: 2.2rem;
}
h3{
    font-size: 1.8rem;
}
p{
    margin: 0;
    padding: 0;
    font-size: 1.6rem;  
}
img{
    width: 100%;
    height: 100%;
    display: block;  
    object-fit: cover;
}
a{
    text-decoration: none; 
    font-size: 1.8rem;
    color: #fff; 
    font-family: var(--fuentePrincipal)
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.contenedor{
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
}
.separador{
    display: block; 
    height: 15px;
    width: 80%;
    box-shadow: 0 5px 5px -5px rgba(0,0,0,.3),
                0 -5px 5px -5px rgba(255,255,255,.8);                         
}
.bordes-heading{
    border-bottom: 2px solid var(--secundario);
    margin-bottom: 2rem; 
}
.separacion{
  padding: 5rem 0;
}
.sombras{
    box-shadow:rgba(0, 0, 0, 0.04) -16px 0px 20px -16px inset, 
    rgba(0, 0, 0,  0.04) -16px 0px 10px -16px inset, 
    rgba(0, 0, 0, 0.02) -16px 0px 4px -16px inset;
}



/* PAGINA INICIO */

/* HEADER */

.header{
    background-color:var(--primario);
    position: fixed; 
    top: 0;
    width: 100%;
    z-index: 99; 
}
@media(min-width:992px) {
    .header{
       position: static;
    }
} 

.header .barra-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;   
}
.logo{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .5rem;
    
}
.logo-img{
  background-image: url('../img/globo3.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 6rem; 
  height: 6rem;
  border-radius: 50%;
}
.nombre-agencia{
    color: #fff;
}
.texto-stroke{
    color: #004cb8;
    -webkit-text-stroke: 1px #f1f1f1;
} 
.barras{ 
   display: none;
   flex-direction: column;   
}
.btn-close{
    color: var(--blanco);
    background-color: var(--blanco);
    border-radius: 50%;
}
.desplegable-contenedor{
   background-color: var(--primario);
}
.desplegable-contenedor h3{
   color: var(--blanco);
}
.desplegable-contenedor .nav-link{
   padding: 1.4rem 1rem;
   font-size: 1.4rem;
}
.desplegable-body li{
   border-bottom: 1px solid rgba(255,255,255,0.3);
   position: relative;
}

.desplegable-body li::after{
   content: '';
   position:absolute;
   display: block;
   left: 50%;
   height: 3px;
   width: 0px;
   transition: all .3s;
   
}
.desplegable-body li:hover::after{
   width: 100%;
   left: 0;
   right: 0;
   background-color: #fff;
}
.boton-cerrar{
    background: url('../img/x-lg.svg');
    background-repeat: no-repeat;
    background-size: cover;
}

@media(min-width:992px){
    #menu-offcanvas{
       display: none;
    }
     .barras{
        display: flex;
     }
}
.hide{
   display: none;
}
.show{
   display: flex;
}

.barra-navegacion{
    display: flex;
    justify-content:left;
    align-items: center;
    gap: 2rem;
    background-color: var(--blanco);  
}
.barra-navegacion .link{
    transition-duration: .3s;
    font-weight: 700;
    color: var(--primario); 
    padding: 1rem 4rem 1rem 1rem;
    transition: .3s ease-in-out;
    position: relative;
    z-index: 1;
}
.link:nth-child(1){
    margin-left: 2rem;
    padding: 1rem
}
.link.active{
  background-color:var(--primario);
  color: var(--blanco); 
}

.barra-navegacion .link:hover{
   color: var(--blanco);
}
.barra-navegacion .link:before{
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  background-color: var(--primario);
  top: 0;
  left: 0;
  z-index: -1;
}
.barra-navegacion .link:hover::before{
  height: 100%;
  width: 100%;
  transition-duration: .3s;
  transition-timing-function:linear;
}
.barra-navegacion .link:after{
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 0px;
  height: 0px;
  background-color: var(--primario);
  top: 11px;
  right: 6px;   
}
.link-inicio::after{
  display: none;
}

.link-destinos::after{
    background-image: url(../img/globe.svg);
}
.link-hoteles::after{
    background-image: url(../img/building.svg);
}
.link-vuelos::after{
    background-image: url(../img/airplane.svg);
}
.link-experiencias:after{
    background-image: url(../img/images.svg);
}
.link-contacto::after{
    background-image: url(../img/head.svg);
}
.barra-navegacion .link:hover::after{
  transition: .5s;
  transition-delay: .2s;
  width: 18px;
  height: 18px; 
}

.barra-usuario{
    display: flex;
    align-items: center;
    gap: 4rem; 
    color: var(--blanco); 
    position: relative;
}
.barra-usuario::after{
  content: '';
  position: absolute;
  height: 2rem;
  width: .1rem;
  background-color: var(--blanco);
  top: 0;
  right: 29%;
}
.barra-usuario::before{
  content: '';
  position: absolute;
  height: 2rem;
  width: .1rem;
  background-color: var(--blanco);
  top: 0;
  left: 29%;
}
.usuario a,
.tel-info{
  color: #f1f1f1;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--fuentePrincipal);
}
.icono-usuario,
.icono-telefono{
   width: 2rem;
   height: 2rem;
}



/* MAIN */

.slider-inicio img{
   height: 50rem;
     
}
#carousel .tipo-contenido{
    bottom:8%;
    color: var(--secundario);
    font-weight: bold;
    text-align: center;
    width: 50%;    
}

@media(min-width:768px){
    #carousel .tipo-contenido{
        left: 40%;
        color: var(--primario);
    }
}
#carousel .tipo-contenido.fin-semana,
#carousel .tipo-contenido.rutas,
#carousel .tipo-contenido.ciudades{
    bottom:5%;
    left: 25%;
    color: var(--blanco);
    text-align: center;
    width: 50%;    
}

@media(min-width:768px){
    #carousel .tipo-contenido,
    #carousel .tipo-contenido.fin-semana,
    #carousel .tipo-contenido.rutas,
    #carousel .tipo-contenido.ciudades{
        bottom:20%;
        left: 20%;
        width: 80%;
   }  
}
.carousel-control-next,
.carousel-control-prev{
  color: transparent;
  opacity: 0;
}
.tipo-titulo{
    text-align: start;
    font-size: 3.5rem;
    color: var(--blanco);
}
@media(min-width:768px){
    .tipo-titulo{
        font-size: 4.5rem;
        text-align: center;
    }
}
.tipo-texto{
   font-size: 2rem;
   margin-top: 1rem;
   text-align: start;
}
@media(min-width:768px){
    .tipo-texto{
        font-size: 2.5rem;
        text-align: center;
    }
}
.tipo-link{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--blanco);
    padding: 1rem;
    font-size: 1.8rem;
    background-color: rgba(0, 76, 184,.2);
    color: var(--blanco);
    width: 20rem;
    height: 5rem;
    margin: 2rem auto 0 0;
    text-transform: uppercase;
    border-radius: 5px;
    position: relative; 
    transition: .3s ease-in-out all;  
}

@media(min-width:768px){
    .tipo-link{
        margin: 2rem auto 0 auto;
    }
}

.tipo-link:hover{
    background-color:rgba(0, 76, 184,.8);
    color: var(--blanco);
}
.tipo-link span{
    transition: .4s ease-in-out all;
    position: absolute;
    left:30px;
}
.tipo-link:hover span{
    left: 15px;
}
.tipo-link .tipo-icono svg{
    width: 25px;
    height: 25px;
}
.tipo-link .tipo-icono svg{
    transition: .4s ease-in-out all;
    position: absolute;
    right:40px;
    top: 12px;
    opacity: 0;  
}
.tipo-link:hover .tipo-icono svg{    
    right: 15px;
    opacity: 1;
}



/* Destinos-iniciales */

.destino-imagen{
  height: 100%;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,.4);
  position: relative;
  border-radius:.5rem; 
} 

.destino-titulo{
    position: absolute;
    top: 5px;
    left: 8px;
    color: var(--blanco);
    font-size: 2.4rem;
    border-radius:1rem;
    -webkit-text-stroke: 1px rgba(0,0,0,.8);
    z-index: 2;
    text-shadow: 3px 3px 3px black;
    
}
.destino-precio{
   display: block;
   font-size: 2rem
}
.precio{
   font-size: 2.5rem;
   color: var(--blanco);
   -webkit-text-stroke: .5px rgba(0, 76, 184,1);
}
.destino-imagen img{
    border-radius:.5rem;
    transition: .3s ease;   
}
.destino-imagen img:hover{
   transform: scale(1.05);
}

.destinos-grid{
    display: grid;
    grid-template-columns: repeat(1,1fr); 
    gap: 2rem;
}
@media(min-width:768px){
    .destinos-grid{
        grid-template-columns: repeat(2,1fr); 
       
    }
    .destino:last-child{
        grid-column: 1/3;
        min-height: 60%;
    }
}

@media(min-width:992px){
    .destinos-grid{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(3,25rem);
      
      }                                                              
      .destinos-grid .destino:nth-child(1){
         grid-column: 1/3;
      }
      .destinos-grid .destino:nth-child(5){
         grid-column: 2/4;
      }
      .destinos-grid .destino:nth-child(9){
         grid-column: 3/5;
      }
      
}

/* Experiencias */


.experiencias-grid{
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 2rem;
  text-align: center;
}
@media(min-width:768px){
  .experiencias-grid{
    grid-template-columns: repeat(2,1fr);
  }
}
@media(min-width:992px){
  .experiencias-grid{
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
  }
  .experiencia-img{
    height: 40rem;
  }
  .experiencia:nth-child(1){
       grid-column: 1/3;
       grid-row: 1/3;        
  }
  .experiencia:nth-child(3){
       grid-column: 1/2;
       grid-row: 2/3;        
  }
  .experiencia:nth-child(4){
     grid-column: 2/4;
     grid-row: 2/3;
  }
}
@media(min-width:1200px){
    .experiencias-grid{
      grid-template-rows: repeat(1,1fr);
      grid-template-columns: repeat(4,1fr);
    }
    .experiencia-img{
      height: 20rem;
    }
    .experiencia:nth-child(1){
        grid-column: 1/2;          
    }
    .experiencia:nth-child(3){
        grid-column: 3/4; 
        grid-row: 1/2;         
    }
    .experiencia:nth-child(4){
        grid-column: 4/5; 
        grid-row: 1/2;         
    }
}


.experiencias h2{
    border-bottom: 2px solid var(--secundario)    
}
.experiencia{
   border-radius: 10px;
}
.experiencia .experiencia-img{
    overflow: hidden;
    
}
.experiencia img{
    transition: all .5s ease-in-out;
    border: 1px solid var(--secundario); 
    border-radius: 5px;
}
.experiencia img:hover{
    transform: scale(1.1);   
}
.experiencia .link{
   display: block;
   color: var(--secundario);
   font-weight: bold;
   font-size: 1.8rem;
   padding: 1rem 0;
   border: 1px solid #004cb8;
   border-radius: 5px;
   transition: .3s all ease-in-out;
}
.experiencia .link:hover{
   background-color: #004cb8;
   color: var(--blanco);
}



/*Testimoniales-comentarios*/
.testimonial-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .07);
    transition: .5s;
}
.owl-item .testimonial-item,
.testimonial-item * {
    transition: .5s;
}
.owl-item.center .testimonial-item,
.testimonial-item:hover {
    background: var(--primario);
}
.owl-item.center .testimonial-item *,
.testimonial-item:hover * {
    color: #FFFFFF !important;
}
.testimonial-item img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 100px;
}
.testimonial-item span{
   background-image: url('../img/star-fill.svg');
   background-repeat: repeat-x;
   background-position: center;
   width: 8rem;
   height: 5rem;
   display: block;
   
}
.testimonial-carousel .owl-nav {
    position: absolute;
    top: -100px;
    right: 0;
    display: flex;
}
.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin-left: 15px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primario);
    border-radius: 55px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .15);
    font-size: 25px;
    transition: .5s;
}
.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--primario);
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .testimonial-carousel .owl-nav {
        top: -80px;
        right: auto;
        left: 85%;
        transform: translateX(-50%);
    }

    .testimonial-carousel .owl-nav .owl-prev,
    .testimonial-carousel .owl-nav .owl-next {
        margin: 0 7px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

/* Mensaje cookies */
.aviso-cookies{
    display: none; 
    padding: 1.5rem;
    position: fixed;
    font-size: 1.4rem;
    background-color: var(--blanco);
    bottom: 0;
    left: 0;
    z-index: 3;
    box-shadow: 0px 5px 20px 10px var(--primario); 
    animation-name: animacionCookies;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;   
}
@keyframes  animacionCookies {
  0%{
     opacity: 0;
     transform:translateY(10rem);
  }
  100%{
     opacity: 1;
     transfomr:translateY(0rem)
  }
}
.aviso-cookies.activo{
    display: block;    
}
.fondo-aviso-cookies{
    display :none;
    background-color: rgba(0,0,0,.7);
    position: fixed;
    z-index: 2;
    width: 100vw;
    height:100vh;
    top: 0;
    left: 0;
}
.fondo-aviso-cookies.activo{
    display: block;
}


/* FOOTER */
.footer{
    background-color: var(--primario);
    padding: 2.5rem 0 1.5rem 0;
    margin-top: 5rem;
}
.titulo-redes h3{
    position: relative;
    max-width: 50rem;
}
.titulo-redes h3::after{
   content: '';
   width: 6rem;
   height: .1rem;
   background-color: rgb(217, 206, 206);
   position: absolute;
   top: 12px;
   right: 34px;
}
.titulo-redes h3::before{
   content: '';
   width: 6rem;
   height: .1rem;
   background-color: rgb(217, 206, 206);
   position: absolute;
   top: 12px;
   left:34px;
}
.titulo-redes h3{
    color:var(--blanco);
    text-align: center;
    border-right: 30px;
    margin: 0 auto 3rem auto;
} 
.redes{
    padding: 1rem 0;
    background-color: #fff;  
}
.menu-redes span{
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
display: block;
}
.menu-redes img{
    width: 3.5rem;
    height: 3.5rem;
    transition: transform;
    transition-duration:.3s;
}
.menu-redes img:hover{
    transform:scale(1.2);
    background-color: var(--blanco);
    border-radius: 50%;
}
.menu-politicas{
    margin-top: 2rem;
}
.menu-politicas a{
    color: var(--blanco);
    font-size: 1.2rem;
    padding: .5rem;
}
@media (min-width: 768px) { 
    .menu-politicas a{
        font-size: 1.6rem;
    }
}
.menu-politicas a:hover{
    text-decoration: underline;
    color: var(--terciario)      
}
.navegacion-politicas{
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin-top: 2rem; 
}
.navegacion-politicas a{
   font-size: 14px;
}
@media(min-width:576px){
    .navegacion-politicas a{
        font-size: 18px;
     }
}


.navegacion-politicas a:hover{
   text-decoration: underline;
   color:rgb(170, 185, 205);
}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    
}


/* PAGINA DESTINOS */

/* slider destinos */

 [class^="swiper-button-"] {
    transition: all 0.3s ease;
}
.swiper-slide {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.swiper-container {
    height: 50rem;
    width: 100%;
    transition: opacity 0.6s ease, transform 0.3s ease;
}
.swiper-container.nav-slider {
    width: 20%;
    padding-left: 5px;
}
.swiper-container.nav-slider .swiper-slide {
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
    opacity: 1;
}
.swiper-container.nav-slider .swiper-slide .content {
    width: 100%;
}
.swiper-container.nav-slider .swiper-slide .content .title {
    font-size: 20px;
}
.swiper-container:hover .swiper-button-prev, .swiper-container:hover .swiper-button-next {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}
.swiper-container.loading {
    opacity: 0;
    visibility: hidden;
}
.swiper-slide {
    overflow: hidden;
}
.swiper-slide .slide-bgimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.swiper-slide .content {
    position: absolute;
    top: 42%;
    left: 0;
    width: 50%;
    padding-left: 5%;
    color: #fff;
    
}
@media(max-width:576px){
   .swiper-slide .content {
    padding-left: 20%;
    width: 70%;   
}
}
.swiper-slide .content .title {
    font-size: 2.6em;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 5px 5px 5px black;
}
@media(max-width:576px){
    .swiper-slide .content .title {
      font-size: 3rem;
    }
}
.swiper-slide .content .caption {
    display: block;
    font-size: 2rem;
    line-height: 1.4;
    transform: translateX(50px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.7s ease;
    background-color: rgba(0, 0, 0,.3);
    padding: 1rem;
    border-radius: 5px;
}
@media(max-width:576px){
    .swiper-slide .content .caption{
        font-size: 1.5rem;
    }
}
.swiper-slide .content .caption.show {
    transform: translateX(0);
    opacity: 1;
}
[class^="swiper-button-"] {
    width: 44px;
    opacity: 0;
    visibility: hidden;
}
.swiper-button-prev {
    transform: translateX(50px);
}
.swiper-button-next {
    transform: translateX(-50px);
}


/* Seccion destinos */
.nacionales,
.internacional,
.islas{
    border-radius: 5px;
    border: 1px solid rgba(0,76,184,.4);
    box-shadow: 0px 0px 10px -3px var(--primario);
}
.destinos .internacional{
  background-color: var(--primario);
}
.destino-heading{
    position: relative;
    padding-left: 1rem; 
    font-size: 2rem; 
}
.card-body:hover{
    background-color: var(--azulOscuroFondos);
    transition: .5s;
}

.titulo-header{
   font-size: 2rem;
}
.ciudad-titulo{
  font-size: 1.6rem;
  color: var(--secundario);
  font-weight: bold; 
  
}
.ciudad-texto{
  font-size: 1.3rem;
  position: relative;
}
.ciudad-texto::after{
 position: absolute;
 content: '';
 width: 100%;
 height: 2px;
 background-color: #f1f1f1;
 bottom: -15px;
 left: 0;
}
.precios-contenido p{
   color: var(--primario);
}
.destino-heading::before{
   content: '';
   position: absolute;
   width: .2rem;
   height: 2.5rem;
   background-color: var(--primario);
   top: 0;
   left: 0;
}
.internacional .destino-heading::before{
   background-color: var(--blanco);
}
.btn-reservas,
.btn-mas{
   background-color: var(--blanco);
   border: 1px solid var(--primario);
   border-radius: 5px;
   padding: 1rem ;
   color: var(--primario);
   text-transform: uppercase;
   font-size: 1.3rem;
}

@media(max-width:470px){
   .internacional .btn-mas{
      font-size: .9rem;
   }
}

.btn-reservas:hover,
.btn-mas:hover{
   background-color: var(--primario);
   color: var(--blanco);
   transition: .5s ease-in-out;
}
.internacional .btn-mas:hover{
   background-color: var(--primario);
   color: var(--blanco);
   border: 1px solid var(--blanco);
}
.precios i::before{
    color: var(--primario);
}
.btn-reservas:hover i::before{
  color: var(--blanco);
}
.lugares{
  margin-top: 0;
}

/* PAGINA HOTEL+VUELO */
.hero{
    height: 50rem;
    width: 100%;
    position: relative;
}
.hero-texto{
   display: none;
}
@media (min-width: 992px) { 
    .hero-texto{
        display: block;
        position: absolute;
        bottom: 80px;
        right: 200px;
        font-size: 2.8rem;
     }
     
}


/*formulario-inicio*/
.formulario-inicial form{
    background-color: var(--primario);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0; 
  }
  .formulario-inicial .form-group{
    position: relative;
  }
  .formulario-inicial input{
     padding: 2rem 1rem 1rem 1.2rem;
  }
  .form-group .texto-input{
    color: var(--primario);
    position: absolute;
    top: 5px;
    left: 12px;
    font-size: 1.3rem;
  }
  .icono-avion,
  .icono-geo{
      position: absolute;
      top: 20px;
      right: 11px;
      font-size: 1.6rem; 
  }
  @media(min-width:992px){
      .boton-buscar{
        max-width:15%;
       
      }
  }
 /*  seccion hoteles */


@media(max-width:400px){
   .hoteles-contenedor h2{ 
    font-size:1.6rem ;
  }
}
@media(min-width:400px) and (max-width:5768px){
   .hoteles-contenedor h2{ 
    font-size:2rem ;
  }
}

.hotel{
    box-shadow: 0 0 30px rgba(0,0,0,.4);
    border-radius: 1rem;
}
 

 .hotel-slider{
   border-radius: 1rem;
 
}

.hotel-slider img{
    height: 36rem;
    background-color: red;
    
}
.iconos-hotel{
   display: flex;
   align-items: center;
   gap: 2rem;
}
.nota-texto{
   background-color: var(--primario);
   color: var(--blanco);
   padding: .5rem;
   border-radius: .5rem;
}

.star-hotel{
    background-image: url('../img/star-fill.svg');
    background-repeat: repeat-x;
    background-position: center;
    width: 8rem;
    height: 5rem;
    display: block;
    position: relative;
}
.star-hotel:after{
   content: '';
   border: .1px solid #cdd1db;
   height: 3rem;
   position: absolute;
   right: -10px;
   bottom: 9px;
}
.contenido-2{
  position: relative;
}
.contenido-2::before{
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: -16px;
    bottom: 0px;
    width: 16px;
    box-shadow:rgba(0, 0, 0, 0.04) -16px 0px 20px -16px inset, 
    rgba(0, 0, 0,  0.04) -16px 0px 10px -16px inset, 
    rgba(0, 0, 0, 0.02) -16px 0px 4px -16px inset;
}
.info-coste .titulo{
  color: var(--primario);
}


/* PAGINA EXPERIENCIAS */


.parent {
	 width: 100%;
	 height: 50rem; 
     position: relative;    	 
}
 svg {
	 position: absolute;
	 z-index: 1;
	 width: 100%;
	 height: 50rem;
}

.boton{
    position: absolute;
	 z-index: 50;
	 width: 40px;
	 overflow: hidden;
	 height: 40px;
	 border: none;
	 border-radius: 50%;
	 background: #fff;
	 cursor: pointer;
	 -webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
	 -moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
	 box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);
}
.boton.left {
	 margin-left: 12%;
	 margin-top: 368px;
	 border: 1px solid #849494;
	 background-color: transparent;
	 transition: 0.5s;
}
.left:hover {
	 background-color: #fff;
}
svg {
    position: absolute;
    z-index: 1;
    width: 500%;
    height: 100%;

}

 circle {
	 stroke: rgba(0, 0, 0, .5);
	 fill: none;
	 transition: 0.3s;
}

 #svg2 circle {
	 transition-timing-function: linear;

}
 #Capa_1 {
	 position: absolute;
	 width: 16px;
	 height: 16px;
	 transform: translate(-7px, -8px);
}
 #Capa_2 {
	 position: absolute;
	 width: 16px;
	 height: 16px;
	 transform: translate(-9px, -8px);
}

 .circle1 {
	 transition-delay: 0.05s;
}
 .circle2 {
	 transition-delay: 0.1s;
}
 .circle3 {
	 transition-delay: 0.15s;
}
 .circle4 {
	 transition-delay: 0.2s;
}
 .circle5 {
	 transition-delay: 0.25s;
}
 .circle6 {
	 transition-delay: 0.3s;
}
 .circle7 {
	 transition-delay: 0.35s;
}
 .circle8 {
	 transition-delay: 0.4s;
}
 .circle9 {
	 transition-delay: 0.45s;
     
}
 .slide1 {
	 background-image: url('../img/ruta1.jpg');
}
 .slide2 {
	 background-image: url('../img/comida.jpg');
}
 .slide3 {
	 background-image: url('../img/escorial.jpg');
}
 .slide4 {
	 background-image: url('../img/pueblo.jpg');
}
 .slider-exp {
	 width: 400%;
	 height: 100%;
	 overflow: hidden;
     position: relative;
}
 .slide1, .slide2, .slide3, .slide4 {
	 position: absolute;
	 background-position: center;
	 background-size: cover;
	 color: #fff;
	 font-size: 62px;
	 text-align: center;
     padding-top: 150px;
	 width: 25%;
	 height: 100%;
	 z-index: 10;
	 transition: 1.4s;
     text-shadow: 5px 5px 5px black;
}
 .tran {
	 transform: scale(1.3);
}
 .up1 {
	 z-index: 20;
}
 .up2 {
	 z-index: 40;
}
 .steap {
	 stroke-width: 0;
}
 .streak {
	 stroke-width: 82px;
}


/* Seccion experiencias */

.experiencias-contenedor{
    margin-top: 10rem;
    background-color: #f4efef;  
}
.exp{
   opacity: 0;
   transform: scale(.9);
   transition: .7s ease-in-out;
 
}
.exp-info{
    position: relative;
}
.exp-info::after{
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: 0;
    color: var(--primario);
    background-color: var(--secundario);
}

.exp.rutas::before,
.exp.monumentos::before{
    top: -15px;
    right: 0px;
}
.exp.gastronomia::before,
.exp.pueblos::before{
    top: -15px;
    left: 0px;
}
.exp-titulo{
    position: relative;
}
.exp-titulo::before{
    content: '';
    position: absolute;
    width: .2rem;
    height: 2.5rem;
    background-color: var(--primario);
    top: 0;
    left: 0;
}

.exp-info:hover{
    background-color: var(--azulOscuroFondos);
    transition: .5s;
}
.exp-img{
    overflow: hidden;  
}
.exp img{
    transition-duration: .3s;
}
.exp img:hover{
    transform: scale(1.05);
}
.exp.izq{
    transform: translateX(-100px);
}
.exp.der{
    transform: translateX(100px);
}
.exp.show{
    opacity: 1;
    transform: scale(1) translateX(0px);
 }


/* PAGINA CONTACTO */

.formulario-contacto{
   box-shadow: 0 0 30px rgba(0,0,0,.4);
}
/* Mapa web */
.mapa-contenedor{ 
   box-shadow: 0 0 30px rgba(0,0,0,.4);
   height: 50rem;      
}

.vias-contacto{
    box-shadow: 0 0 30px rgba(0,0,0,.4);

}
.vias-contacto i{
   color: var(--primario);
   font-size: 3rem;
}

/* Cuenta y login */
.cuenta-contenido{
  margin:15rem auto 32rem auto;  
}
.login-usuario{
    margin:15rem auto 32rem auto;    
}
@media(min-width:992px){
    .cuenta-contenido{
        margin:5rem auto 32rem auto; 
    }
    .login-usuario{
        margin:5rem auto 32rem auto; 
    }
      
}