/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color:black;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
:root{
  --colorPrimario: rgb(141, 124, 124);
  --colorOscuro: rgb(73, 67, 67);
  --colorSecundario: rgb(21, 59, 116);
  --colorFinal: #3282b8; /*COLOR VACACIONANDO*/
  /*--colorFinal: #2ca7c5; COLOR RESERVA*/ 
  /*--colorFinal: rgb(143, 6, 13); Propuesta 1*/
  /*--colorFinal: #3282b8;*/
  --colorBlanco: white;
  --focusBoton: #8b5605;
  --fuentePrimaria: 'Montserrat', sans-serif;
  --fuenteSecundaria: 'Roboto', sans-serif;;
  --fuenteOfertas: 'Bebas Neue', cursive;
  --fuenteOfertas2: 'Merriweather', serif;
  --fuenteEspecial: 'Pacifico', cursive;
  --colorFuente1: Black;
  --colorFuente2: white;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #6cb6e0;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html {
  box-sizing: border-box;
  max-width: 100%!important;
  overflow-x: hidden!important;
}

*, *::before, *, *::after {
  box-sizing: inherit;
}

body {
  /*background: #66999 url(img/estacion3.jpg) center center cover no-repeat fixed;*/
  /*background-image: url(../img/mision.jpeg);*/
  max-width: 100%!important;
  overflow-x: hidden!important;
  background-position: center center;
  background-size: cover;
  font-family: var(--fuenteOfertas2);
}


.sombra{
  -webkit-box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.75);
  box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.75);  
  border-radius: 10px;
}

.site-header{
  margin-bottom: 15px;
}
/** AQUI EMPIEZA NUESTRO CSS**/
.centrar-texto{
  text-align: center;
  color: var(--colorFuente2);
}
.fw-500 {
  font-size: 2rem;
}

.boton{
  color: white;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.8rem;
  padding: 1rem 3rem;
  margin-top: 3rem;
  
  text-align: center;
  border: none;
  
  flex: 0 0 100%;    
}



.boton-verde{
  background-color: var(--colorSecundario); 
    
}

.boton-agregar{
  background-color: white;
  color: var(--colorSecundario); 
  font-weight: bold;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  margin-top: 1rem;
  
  text-align: center;
  border: none;
 
  flex: 0 0 100%;   
  
}

.contenido-centrado{
  max-width: 800px;
  text-align: justify;
}

.contenedor{
  max-width: 1200px;
  margin: 0 auto 0 auto;
}

.contenedor-blanco{
  max-width: 1200px;
  margin: 10px auto 10px auto;
  background-color: white;
  padding: 20px;
}

.color-header{
  background-color: var(--colorSecundario)
}

.color-blanco{
  background-color: var(--colorBlanco);
}

.btn{
  font-size: 1.5rem;
  text-decoration: none;
}

.btn:hover{
  cursor: pointer;
}

.btn-editar{
  color: var(--colorSecundario);
}

.btn-borrar{
  color: var(--colorPrimario);
}

.img-logo{
  max-width: 50%;
  max-height: 50%;
}

.inicio p{
  font-family: var(--fuentePrimaria);
}

.fondo-login{
  background-color: rgba(46, 46, 209, 0.778);
}

.power{
  font-size: .8rem;
  font-family: var(--fuentePrimaria);
  text-decoration: none;
  color: black;
  text-align: center;
  margin: 0;
}

.power span{
  color: orangered;
  font-weight: bold;
}

.bg-final{
  background-color: var(--colorFinal);
}


.datos h2{
  font-family: var(--fuenteSecundaria);
  color: rgb(39, 95, 118);
  font-weight: bold;  
}

.datos p{
  font-family: var(--fuenteSecundaria);
  /*color: orangered;  */
  margin: 0;
}
.logafil{
  font-family: var(--fuenteSecundaria);
  background-color: var(--colorFinal);
  margin-top: 10px; 
  
}

.logafil label{
  text-align: left!important;
  color: white;
}

.logafil input{
  font-size: .8rem;
  width: 100%;
  height: 2rem;
  color: black;
}

@media screen and (min-width: 768px){
  .logafil{
    margin-top: 0; 
  }

  .logafil label{
    text-align: left!important;
    color: white;
  }

  .logafil input{
    font-size: .8rem;
    width: 15rem;
    height: 2rem;
    color: black;
  }
}

.btn-login input{
  color: black;
  font-weight: bold;
}

.logeado{
  font-family: var(--fuenteSecundaria);
}

.logeado p{
  font-size: 1rem;
}

.logeado a{
  font-size: 0.8rem!important;
  padding: 5px 20px;
  background-color: #82bde4;
}

.logeado img{
  border-radius: 50%;
  max-width: 50%;
  max-height: 50%;
}

.banner{
  font-family: var(--fuentePrimaria);
}
/*Index principal sección de ofertas*/
.ofertas{
 /*height: 20r;
 max-height: 100%;*/
}

.oferta1{
  
  overflow: hidden; /* Oculta el contenido que excede la altura */
  /*max-width: 100%;*/
  height: 25rem;
  max-height: 100%;
}
/*
.oferta1 img{
   
  --webkit-filter: brightness(.3);
  filter: brightness(.3);  
}
*/

.oferta2{
  background-color: rgb(185, 222, 243);
  /*max-width: 100%;*/
  max-height: 100%;
  height: 25rem;
  
  overflow: hidden; /* Oculta el contenido que excede la altura */
}



.oferta2 h2{
  font-size: 3rem;
  font-family: var(--fuentePrimaria);
}

.oferta2 p{
  font-size: 1.5rem;
  font-family: var(--fuentePrimaria);
  font-weight: bold;
}


/*
.paralax::before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;

  --webkit-filter: brightness(.4);
  filter: brightness(.4);

}
*/
.mensaje {
  /*position: relative;*/
  height: auto;
}

/*
.mensaje::before {
  background-image: url(../img/paralax.jpg);
  content: '';
}
*/

.mensaje  {
  background-image: url(../img/sierra.jpg);
  
}

.mensage{
  color: white;
  text-align: center;
  /*position: relative;*/
  font-family: var(--fuenteSecundaria);
  /*font-size: large;*/
  font-weight: bold;
  padding: 120px 0;
}

.mensage h2{
  font-size: 3rem;
}

.mensage p{
  font-size: 2rem;
}

.invitacion{
  background-color: rgb(248, 151, 170);
}

.imagen img{
  max-width: 100%;
  max-height: 100%;
  
}



.textop h2{
  text-align: center;
  font-family: var(--fuentePrimaria);
  font-size: 2rem;
  font-weight: bold;
}

@media screen and (min-width: 768px){
  .textop h2{
    font-size: 3.5rem;
  }
}

.textop p{
  text-align: center;
  font-family: var(--fuenteOfertas);
  font-size: 1.2rem;
  
}



.pedido a{
  padding: 1rem!important;
  /*background-color: rgb(127, 207, 7);*/
  color: black;
  border-style: solid;
  border-width: 2px;
  transform: 1s ease;
  font-weight: bold;
  text-decoration: none;
}

.whats a:hover{
  -webkit-transform: scale(2);
    transform: scale(2)
}
.pedido img{
  height: 30px;
  width: 40px;
}

.sociales ul {
  list-style: none;
  margin:0;
  padding:0;
}
.sociales ul li {
  position: relative;
  display: inline-block;
}
.sociales ul li a::before {
  font-family: 'FontAwesome';
  display: inline-block;
  vertical-align: top;
  padding: 0.4rem;
  content: '\f08e';
  -webkit-font-smoothing: antialiased;
  font-size: 2rem;
  color: black;
}
.sociales ul li a[href*="https://m.facebook.com/100086185569199/"]::before{
  content: '\f230';
}

.sociales ul li a[href*="https://vm.tiktok.com/ZMYFxs2cP/"]::before{
  content: '\e07b';
  
}

.sociales ul li a[href*="https://instagram.com/vacacionandolm?igshid=Zjc2"]::before{
  content: '\f16d';
}


.redes{
  font-weight: bold;
}

.paqs{
  height: auto;
}

.paqs p{
  color: #0f4c75;
}

.volver a{
  border-style: solid;
  font-family: var(--fuenteSecundaria);
  border-width: 2px;
  /*background-color: rgb(210, 72, 155);*/
  font-size: 2rem;
  color: black;
  
  text-decoration: none;
  
}

.header{
  /*
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(6,48,80,1) 18%, rgba(9,94,121,1) 35%, rgba(92,218,244,1) 82%);
  
  
  background-image: url(../img/header.jpg);
  background-repeat: repeat;
  background-size: 100% 100%;
  max-width: 100%;
  height: 100px;
  */

}

.header a{
  text-decoration: none;
  color: black;
  font-size: 2rem;
  font-family: var(--fuenteSecundaria);
  font-weight: bold;
}

/*Login del usuario*/

#contenedor {
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin: 0;
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
  width: 100%;
  height: 100%;
  background-color: #1b262c;
}

#central {
  max-width: 320px;
  width: 100%;
}

.titulo {
  font-size: 250%;
  color:#bbe1fa;
  text-align: center;
  margin-bottom: 20px;
}

.video{
  max-width: 50%;
  max-height: 50%;
}

.texto-video{
  font-family: var(--fuenteOfertas2);
}


#login {
  width: 100%;
  padding: 50px 30px;
  background-color: #3282b8;
  
  -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
  
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  
  box-sizing: border-box;
}

#login input {
  font-family: 'Overpass', sans-serif;
  font-size: 110%;
  color: #1b262c;
  
  display: block;
  width: 100%;
  height: 40px;
  
  margin-bottom: 10px;
  padding: 5px 5px 5px 10px;
  
  box-sizing: border-box;
  
  border: none;
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
}

#login input::placeholder {
  font-family: 'Overpass', sans-serif;
  color: #E4E4E4;
}

#login button {
  font-family: 'Overpass', sans-serif;
  font-size: 110%;
  color:#1b262c;
  width: 100%;
  height: 40px;
  border: none;
  
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  
  background-color: #bbe1fa;
  
  margin-top: 10px;
}

#login button:hover {
  background-color: #0f4c75;
  color:#bbe1fa;
}

.pie-form {
  font-size: 90%;
  text-align: center;    
  margin-top: 15px;
}

.pie-form a {
  display: block;
  text-decoration: none;
  color: #bbe1fa;
  margin-bottom: 3px;
}

.pie-form a:hover {
  color: #0f4c75;
}

.inferior {
  margin-top: 10px;
  font-size: 90%;
  text-align: center;
}

.inferior a {
  display: block;
  text-decoration: none;
  color: #bbe1fa;
  margin-bottom: 3px;
}

.inferior a:hover {
  color: #3282b8;
}

.cajausu{
  font-size: 1.2rem;
  color: blue;
  font-weight: bold;
}

.busqueda{
  font-family: var(--fuenteSecundaria);
  color: black;
}

.form-afil{
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin: 0;
  padding: 0;
  min-width: 40vw;
  min-height: 40vh;
  width: 100%;
  height: 100%;
  background-color: #1b262c;
}

.form-afil h2{
  font-weight: bold;
}

#cnt-afil {
  max-width: 800px;
  width: 100%;
}

#afilia {
  width: 100%;
  padding: 50px 30px;
  background-color: #3282b8;
  
  -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
  box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
  
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  
  
}

#afilia input {
  font-family: var(--fuentePrimaria);
  /*font-size: 110%;*/
  color: #1b262c;
  
  display: block;
  width: 80%;
  height: 40px;
  
  margin-bottom: 10px;
  padding: 5px 5px 5px 10px;
  
  box-sizing: border-box;
  
  border: none;
  
  
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  
}

#afilia input::placeholder {
  font-family: var(--fuentePrimaria);
  color: black;
}

#afilia button {
  font-family: var(--fuentePrimaria);
  /*font-size: 110%;*/
  color:#1b262c;
  width: 80%;
  height: 40px;
  border: none;
  
  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  
  background-color: #bbe1fa;
  
  margin-top: 10px;
}

.campos{
  background-color: #6cb6e0;
  font-family: var(--fuenteOfertas2);
}

.campos input{
  font-family: var(--fuenteOfertas2)!important;  
}


.btn-afil:hover {
  background-color: #0f4c75;
  color:#bbe1fa!important;
}

.paqs h2{
  font-family: var(--fuenteOfertas2);
}

/*
.destinos img{
  max-width: 80%;
  max-height: 80%;
}
*/
.proximo img{
  max-width: 100%;
  max-height: 100%;  
}

.menu{
  background-color: #bae1f8;
}

.menu a{
  font-family: var(--fuenteSecundaria);
  color: black!important;
  font-size: 1.2rem;
}



.navbar{
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

/*
.imgpaq img:hover{
  transform: scale(1.3);
  transition: 0.5s;
}
*/

.botones a, .botones input{
  font-family: var(--fuenteOfertas2);
  font-size: 1.2rem;
}

.botones {
  font-family: var(--fuenteOfertas2);
  font-size: 1.2rem;
}

.btn-info{
  background-color: #afd6f0;
}

.viaje{
  /*background-color: #6cb6e0;*/
  background-image: url(../img/granviaje.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
}

.viaje h2{
  align-items: center;
  color: white;
  font-family: var(--fuenteEspecial);
  font-size: 6rem;
  text-align: center;
}


/*CONTACTO*/
.contacto{
  display: block;
}

.cabecera h2{
  font-family: var(--fuenteOfertas2);
  font-size: 1.2rem;
  text-align: center;
}

.cabecera p{
  font-family: var(--fuenteOfertas2);
  font-size: 1.2rem;
}

.tel1, .tel2, .ubica, .correo{
    font-family: var(--fuenteOfertas2);
    font-size: 1.2rem;
    display: flex;
    
  }

.tel1 i, .tel2 i, .ubica i, .correo i{
  /*margin-top: 15px;*/
  margin-right: 10px;
}





@media only screen and (min-width: 768px){
  .contacto{
    display: flex;
  }

  .info-contacto{
    font-family: var(--fuenteOfertas2);
    flex-basis: calc(50% - 1rem);
    padding: 0 10px ;
    margin-top: 30px;
    margin-right: 15px;
    border-right: 1px solid rgba(7, 7, 242,0.3);
    max-height: 500px;
  }

  .info-contacto img{
    width: 100%;
    height: 100%;
  }

  .formulario{
    flex-basis: 40%;
    padding-left: 30px;
  }

  .cabecera h2{
    font-size: 2rem;
  }

  .cabecera p{
    font-size: 1.3rem;
  }

  .tel1, .tel2, .ubica, .correo{
    font-size: 1.3rem;
    
  }
  /*
  .tel1 i, .tel2 i, .ubica i, .correo i{
    margin-top: 25px;
    margin-right: 10px;
  }
  */
  
}

.formulario{
  width: 500px;
  max-width: 100%;
  margin: auto;
  margin-top: 40px;
  padding: 20px;
  box-shadow: 0 0 20px 1px rgba(0,0,0,0.3) ;
  position: relative;
  font-family: var(--fuenteOfertas2);
}

.formulario__titulo{
  text-align: center;
   margin-top: 0;
   color: rgba(0,0,0,0.7);

}

.formulario__input, .formulario__label,
.formulario__submit, .formulario__text, .formulario__label_text{
  display: block;
  width: 100%;
  font-size: 1.3em;
 
}


.formulario__input{
  border: 1px solid rgba(0,0,0,0.3);
  background: rgba(41,184,229,0.2);
  margin-bottom: 40px;
  padding: 20px;
}

.formulario__text{
  border: 1px solid rgba(0,0,0,0.3);
  background: rgba(41,184,229,0.2);
  margin-bottom: 20px;
  padding: 20px;
}

.formulario__input:focus{
  outline: 1px solid
  rgba(0,0,0,0.7);
}

.formulario__input:focus + .formulario__label{
  margin-top: -133px;
}

.formulario__input:focus + .formulario__label_text{
  margin-top: -157px;
}
.formulario__label{
  padding-left: 15px;
  position: absolute;
  margin-top: -90px;
  color: black;
  z-index: -20;
  transition: all  0.3s;
}

.formulario__label_text{
  padding-left: 15px;
  position: absolute;
  margin-top: -120px;
  color: black;
  z-index: -20;
  transition: all  0.3s;
}

.formulario__submit{
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
}

.fijar{
  margin-top: -133px;
}

.fijar:last-of-type{
  margin-top: -157px;
}

textarea{
  resize: none;
}

.politicas{
  font-family: var(--fuenteOfertas2)!important;
}

.politicas p{
  font-size: 1.1rem;
}

.datdeposito{
  background-color: rgb(197, 219, 253);
}
.datdeposito p{
  font-size: 0.8rem;
  font-weight: bold;
}

.flotante {
  display:scroll;
  position:fixed;
  bottom:320px;
  right:20px;
  font-family: var(--fuenteSecundaria);
  color: white;
  
}

.flotante a{
  font-size: 1.5rem!important;
}

.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

.formres label, .formres input{
  width: 50%;
  text-align: left;
  font-size: 1.2rem;
}

.formres{
  font-family: var(--fuenteSecundaria);
  font-weight: 700;
  
}
.conthab{
  border-right: 1px solid rgb(105, 104, 104);
}


.fotopkt img{
  max-width: 100%;
  max-height: 100%;
}

@media only screen and (min-width: 768px){
  .fotopkt img{
    max-width: 70%;
    max-height: 70%;
  }
}


@media only screen and (max-width: 768px){
    .video-responsive {
      overflow: hidden;
      position: relative;
      width:100%;
      height: 100%;
    }

    .video-responsive::after {
      padding-top: 56.25%;
      display: block;
      content: '';
    }

    .video-responsive video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
}

.contvideo{
  margin-bottom: 100px;
}

@media only screen and (min-width: 768px){
  .contvideo{
    margin-bottom: 0px;
  }
}

.opciones{
  position: absolute;
  z-index: 2;
  
}

#destino{
  width: 300px!important;
  max-width: 100%;
  /*width: 100%!important;*/
  padding: 0.575rem 0.125rem!important;
  /*font-size: 1rem!important;
  font-weight: 400!important;*/
  line-height: 1.5!important;
}

.select2 {
  font-family: var(--fuenteSecundaria);
}

.f-res{
  font-family: var(--fuenteSecundaria);
}

.f-res:hover{
  background-color: #ccdef3;
}

.hoteles h5{
  font-size: 1rem;
}

.bg-precios{
  background-color: rgb(137, 226, 55);
}

.prec-est{
  font-size: 0.8rem;
}

.mapa {
  height: 25rem;
}

#mapa2{
  height: 100%;
}


.letrerores p,a{
  font-family: var(--fuenteOfertas2);
  font-size: 1rem;
}

/*
#habitaciones{
  font-size: 1rem;
}

#dathotel a{
  font-size: 1rem;
}

#dathotel a:hover{
  background-color: var(--colorFinal);
}
*/
#dettabla{
  font-size: 1rem;
}

@media only screen and (max-width: 768px){
  #dettabla{
    font-size: 0.6rem;
  }
}

.mosthues{
  font-size: 0.7rem!important;
}

#mosthuesp{
  font-size: 0.7rem!important;
}

#superior a{
  font-family: var(--fuenteSecundaria);
  height: 40px;
  line-height: 40px;
}

.tarifas{
  font-family: var(--fuenteSecundaria);
}

/*
.table-striped tbody tr:nth-of-type(odd){
  background-color: #ecaf6a;
}

.table-striped tbody tr:nth-of-type(even){
  background-color: #f1f5ee;
  
}
*/

#datcheckin{
  border-right: 1px solid black;
}

.datosreserva{
  background-color: rgb(243, 241, 241);
}
.datosreserva p{
  font-family: var(--fuenteSecundaria);
  font-size: .8rem;
  /**/
}
/*.btnreservas:hover{
  background-color: var(--colorFinal);
}
*/

.btnreservas{
  font-size: 1.2rem!important;
}
.cont-registrarse{
  font-family: var(--fuenteSecundaria);
  font-size: 1.2rem;
}
 

.icono-reg i{
  border-radius: 50%;
  font-size: 2.2rem;
  color:  #04263d;
}

.bg-oscuro{
  background-color: #04263d;
}

.btnahora:hover{
  background-color: var(--colorFinal);
}

.btnahora{
  font-size: 1rem;
}

.coldestar{
  width: 40%;
}
.imgtar{
  width: 50%;
}

.imgtar:hover{
  cursor: pointer;
}

#muestraprecio{
  background-color: green;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 1.2rem;
}


#reservas:hover{
  cursor:pointer;
}

#btnreservar{
  background-color: rgb(241, 82, 82);
 
}

#btncotizar{
  background-color: rgb(88, 209, 140);
}

#btnmail{
  background-color: rgb(201, 90, 167);
  
}

#btnnuevo{
  background-color: rgb(96, 220, 224);
  
}

.carousel img {
  height: 100%;
   /* Ajusta la altura de las imágenes al 100% del contenedor */
  object-fit: contain; /* Ajusta las imágenes al tamaño del contenedor manteniendo la proporción, sin recortar */
}

.amav:hover{
  cursor: pointer;
}

.div-cuerpo{
  width: 600px;
}

.div-cuerpo img{
  max-width: 100%;
  height: auto;
}

.oficinas{
  font-family: var(--fuenteSecundaria);
  font-size: 1rem;
}

.menu-destinos:hover{
  cursor: pointer;
}

.menu-destinos img{
  max-width: 70px;
  max-height: 70px;
}

.menu-destinos p{
  font-size: 1.4rem;
  font-family: var(--fuenteEspecial);
}

.ofi-matriz{
  /*background-color: darkorange;*/
  padding: 5px;
  border: 5px solid rgb(61, 152, 236);
}

.ofi-ventas{
  /*background-color: chocolate;*/
  padding: 5px;
  border: 5px solid rgb(61, 152, 236);
}

.opc-destino:hover{
  background-color: #afd6f0;
}

.etiqueta{
  width: 200px;
}

.precios span{
  font-size: 3rem;
  font-family: var(--fuenteOfertas2);
}

/* Estilo del botón de WhatsApp */
.whats {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000; /* Asegúrate de que el botón esté sobrepuesto a otros elementos */
  width: 50px; /* Ajusta el tamaño del botón según sea necesario */
  height: 50px;
  background-color: #25D366; /* Color de fondo para el botón */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Sombra opcional */
}

.whats img {
  width: 70%; /* Ajusta el tamaño del icono dentro del botón */
  height: 70%;
}



.view-destinos {
  position: fixed;
  top: 0;
  left: 0;
  width: 25%; /* Ajusta este valor al ancho de tu columna */
  height: 100vh; /* Para que el aside ocupe toda la altura de la pantalla */
  overflow-y: auto; /* Para que el contenido del aside sea desplazable si es muy largo */
  background-color: white; /* Para asegurar que tenga un fondo sólido */
  z-index: 1000; /* Asegura que el aside esté por encima del contenido */
}

#loadingModal{
  font-family: var(--fuenteOfertas2);
}

.loader {
  width: 48px;
  height: 48px;
  border:10px solid #FFF;
  border-radius: 50%;
  position: relative;
  transform:rotate(45deg);
  box-sizing: border-box;
}
.loader::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  inset:-10px;
  border-radius: 50%;
  border:10px solid #FF3D00;
  animation: prixClipFix 2s infinite linear;
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}
  













/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}