/*
* SECTIONS
*/
/* General Reset */

html  {
    overflow-x: hidden
    
     
}
body {
    overflow-x: hidden;
    background-color: #fafafa;
    
}




.main{
    padding-bottom: 2.25rem;
}

.cards--container{
    padding-inline: 14px;
}

.cards--container h3{
    font-size: 1.375rem;
    text-align: center;
}





/*
* SPECIAL SECTIONS
*/
.sp-initial-content{
    padding-top: 25px;
    padding-inline: 14px;
}









/* 
*  MODAL -- COVER
*/
.cover{
    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: #fff;
}

.d-none{
    display: none;
}

.show{
    display: flex !important;
}

.cover--main{
    width: 100%;

    background-color: #1b1b1b;
}

.cover--header{
    display: flex;

    color:white;

    align-items: baseline;
    justify-content: space-between;

    margin-block: 5px;
    padding-inline: 20px;
}

.cover--header img{
    width: 16px;
}

.cover--body{
    background-color: #fff;
    height: 100%;

    border-top-right-radius: 15px;
    border-top-left-radius: 15px;

    padding-top: 25px;
    padding-inline: 15px;
}

.search--input--container{
    position: relative;
}

.search--input{
    margin: 0;
    margin-bottom: 12px;
    padding: 21px 16px 7px 48px;
    background-color: rgb(255 255 255 / 0%);
    border-style: none;
    border-bottom: 2px solid rgb(255 255 255 / 0);

    border-radius: .25rem;
    border: 1px solid #d9d9d9;

    box-sizing: border-box;

    min-height: 52px;

    text-align: start;
    width: 100%;
}

.search--input:focus{
    outline: none;
    border: 1px solid #d9d9d9;
    border-bottom: 2px solid #34c759;
}

.search--input--icon{
    position: absolute;
    z-index: 999;
    top: 15px;
    left: 15px;

    width: 18px;
}

.search--input--label{
    position: absolute;
    z-index: 998;
    top: 8px;
    left: 47px;

    font-size: 11px;
    color:#7f7f7f;

    width: 50px;
}

.destination{
    color: red;
    box-sizing: border-box;
    padding: 16px 60px 15px 12px;
    border-bottom: 1px solid #cccccc;
}

.destination:hover{
    background-color: #f3f3f3;
}

.destination :nth-child(1){
    display: inline;
    font-size: 16px;
    font-weight: 700;

    margin-right: 5px;
}

.destination :nth-child(2){
    display: inline;
    font-size: 14px;
    margin-right: 5px;
}

.destination :nth-child(3){
    display: inline;
    font-size: 14px;
}





/*
* FORMS
*/
.passenger-selector{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;

    justify-content: space-between;
}

.passenger-btn{
    min-width: 95px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;

    justify-content: space-between;
}

.passenger-btn img{
    width: 25px;
    height: 25px;
}

.passenger-btn h1{
    font-size: 26px;
}






/*
* MAIN-CARD
*/
.main--card{
    padding-top: 16px;
back;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.main--card--header{
    display: flex;
    justify-content: center;
}

.main--card--header form{

    display: flex;
    justify-content: space-between;
    min-width: 14.6875rem;
    box-sizing: border-box;
    padding: 10px 18px;
    background-color: #fff;
    border-radius: 6.25rem;
    box-shadow: 0 0.125rem 0.75rem rgba(27,27,27,.15); 
}

.main--card--header form label{
    font-size: .875rem;
}

.main--card--body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
z-index: 10000;
    margin:0;
padding-bottom: 30px;
padding: 27px 27px;
    border-radius: 14px;
    background-color: #fff;
    margin-top: 0;
}

.cuadro {
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center; /* Centra el contenido de la tarjeta */
    align-items: center;
    margin-top: 0;
    padding: 20px 20px;
    border-radius: 5px;
    position: relative;
    border:.1px solid rgba(0, 0, 0, 0.3);
    
    min-width:30px ;
    height: 14px;
}

/* Contenedor de los elementos origen y destino */
.destinos {
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center;
    
   
    box-sizing: border-box;
    
    
    
}

/* Contenedor de Origen y Avión 1 alineados a la izquierda */
.desde {
   webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    justify-content: center; /* Alineación a la izquierda */
}

/* Contenedor de Origen y Avión 2 alineados al centro */
.hasta {
   webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center; /* Espacio entre los elementos */
    align-items: center;
    width: 100%;
    position: relative;
    box-sizing: border-box;
   
    
}

/* Contenedor para el texto de origen */
.origen {
   webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    height: 70px;
    
    
}
.linea-origen {
    background-color: red;
    padding-bottom: 3px;
    width: 1px;
}
/* Línea divisoria */
.linea-cuadro {
    width: .1px;
    height: 32px;
    background-color: #ccc;
    
   
    margin-left: 2.9rem;
    border:.1px solid #ccc;
}

/* Estilos de texto */
.origen1 {
    font-size: 11px;
     webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     padding-right: 4.5px;
    
    
    
}

.origen2 {
    font-size: 11px;
    color: #333;
    ; /* Ajusta el margen si es necesario */
   margin-right: 23px ;
   text-decoration: none;
     webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}

/* Ciudad debajo de Origen en negrita */
.ciudad {
    font-weight: bold;
    font-size: 16px; 
     webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   margin: 1px;
    color: #333;
    line-height:1.6rem;
}

/* Iconos */
.avion1 {
     height: 22px;
    
    padding-top:3px;
    width: 1.2rem;
    margin-right: 10px;
    
      webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
    
}

.avion2 {
    height: 22px;
    padding-top:3px;
    width: 1.2rem;
margin-right: 9px;
     /* Ajusta el margen según sea necesario */
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);   
}

/* Estilos del modal */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
      webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.modal-content {
     webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 10px;
    height: 100%;
}

.close {
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}
}

/* MAIN-INPUT-GROUP */

.main--input-group {
    position: relative;
    display: flex;
    flex-direction: row;
text-align: center;
    border-radius: .25lrem;
    border: 1px solid #d9d9d9;
    
}

.main--input-group .fd-icon{
    position: absolute;
    top: 0;
    left: 0;
    right: 14px;
    bottom: 0;
    margin: auto;
    /* Asegúrate de que la imagen no sea más grande que el contenedor */
    width: 20px;
    max-width: 100%;
    max-height: 100%;
}

.btn-ig{
    position: relative;
    margin: 0;
    padding: 21px 16px 7px 48px;
    background-color: rgb(255 255 255 / 0%);
    border-style: none;
    border-bottom: 2px solid rgb(255 255 255 / 0);
    cursor: pointer;

    text-align: start;
    width: 100%;
}

#btn-passengers{
    padding: 16px 21px 10px 48px !important;
}

.btn-ig:hover{
    border-bottom: 2px solid #34c759;
}


.btn-ig-icon{
    position: absolute;
    z-index: 999;
    top: 15px;
    left: 15px;

    width: 20px;
}

.btn-ig-label{
    position: absolute;
    z-index: 998;
    top: 8px;
    left: 47px;

    font-size: 11px;
    color:#7f7f7f;

    width: 20px;
}

.btn-ig-text{
    font-weight: 700;
}

/* MAIN-RADIOS */

.radio-container {
            display: flex;
            justify-content: space-between;
            ;
        }

input[type="radio"] {
              opacity: 0; /* Hace el input invisible */
    position: absolute; /* Lo posiciona fuera de la vista, pero todavía interactúa */
    pointer-events: none; /* Asegura que solo se pueda interactuar con el label */
}

        label {
            width: 18px;
            height: 18px;
            background-color: white; /* Color blanco por defecto */
            border: .1px solid #5d5d5d; /* Borde verde */
            border-radius: 50%; /* Redondear */
            display: inline-block;
            margin-right:5px;
            cursor: pointer;
            position: relative;
            white-space: nowrap;
        }

        input[type="radio"]:checked + label {
            background-color: #23c845;
            font-weight: bold;
            
                            animation: destello 0.4s ease-out;    
                border-color: #23c845 ;
        
                    
        }

        input[type="radio"]:checked + label::after {
            content: '';
            width: 8px;
            height: 8px;
            background-color: white; /* Color del círculo interior */
            border-radius: 50%; /* Redondear */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
                  }
                  
   @keyframes destello {
    0% {
        box-shadow: 0 0 0 0 rgba(35, 200, 69, 0.8);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(35, 200, 69, 0.5);
    }
    100% {
        box-shadow: 0 0 0 25px rgba(35, 200, 69, 0);
    }
}
               
                  
                  
                  
.ida {
 margin: 27px;
 
}

.radio-container1 {
            display: flex;
            justify-content: space-between;
           
        }

input[type="radio"] {
              opacity: 0; /* Hace el input invisible */
    position: absolute; /* Lo posiciona fuera de la vista, pero todavía interactúa */
    pointer-events: none; /* Asegura que solo se pueda interactuar con el label */
}

        .label1 {
            width: 18px;
            height: 18px;
            background-color: white; /* Color blanco por defecto */
            border: .1px solid #5d5d5d; /* Borde verde */
            border-radius: 50%; /* Redondear */
            display: inline-block;
            margin-right:58px;
            cursor: pointer;
            position: relative;
            white-space: nowrap;
        }

        input[type="radio"]:checked + label {
            background-color: #23c845;
            
                    
        }

        input[type="radio"]:checked + label::after {
            content: '';
            width: 8px;
            height: 8px;
            background-color: white; /* Color del círculo interior */
            border-radius: 50%; /* Redondear */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            
        }
.solo {
 margin:27px
 
}




/*
* MAIN-BANNER
*/
.main--banner{
    box-sizing: border-box;
    padding-inline: 14px;
    padding-block: 24px;
    width: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.main--banner--img{
    width: 100%;
    height: 300px;

    background-image: url("../assets/svg/main_banner_people.jpg");
    background-size: cover;
    background-position: center;

    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.main--banner--body{
    padding: 24px 24px 32px;

    position: relative;

    background: #ff0000;
    
    color: #fff;

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.linea-divisora {
    margin: 1px;
}
.main--banner--body h5{
    margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.8rem;
    line-height: 1.;
    display: block;
}

.main--banner--body p{
  
    font-size: .77rem;
    font-weight: 315rem;
    line-height: 1.2500rem;

    margin-bottom: 40px;
}

.main--banner--body img{
    position: absolute;

    top: 15px;
    right: 10px;
height: 68px;
    width: 65px;
}

.volar {
   
   line-height: 1.0;
   font-size: 2.1rem;
   height: 1.9rem;
   
}
.text {
    text-decoration: none;
    border-style: solid;
    list-style: none;
    background-color: white;
    padding: 8px;
    padding-left: 12.5px;
   padding-right:12.5px;
    font-weight:bolder;
    border-radius: 35px; 
    border-color:  transparent;
    width: 15px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   
}

.botom {
    color: black;
    text-align:right;
    text-decoration: none;
    font-size: 14px;
    background-color:  transparent;
}
.botom a {
    background-color: transparent;
}


/*
* CARD-TRAVEL
*/
.card--travel{
    height: 12.75rem;
    border-radius: 15px;

    margin-bottom: 35px;

    position: relative;
    overflow: hidden; /* Oculta el exceso del pseudo-elemento */
}

.card--travel::before{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 105px;
    background: rgba(255, 255, 255, .5);
box-shadow: 0 25px 45px rgba(0, 0, 0, .2);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, .2) ;
border-right: 2px solid rgba(255, 255, 255, .2);
border-bottom: 2px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(1px);
    
    
}

.card--travel--text{
    text-align: left;
    position: absolute;
    bottom: 15px;
    left:15px;
    
  background-color: #ffffff;
    width: 93%;
    
    border-radius: 15px;
    height: 4.5rem;
    align-items: center;
    
    
}

.card--travel--text h4{
    margin:.5rem;
    margin-bottom: .2rem;
    font-size: 1rem;
    padding-inline: .7px;
}

.card--travel--text p{
    margin-top: 5px;
    font-size: .860rem;
}

.ipiales {
   
   padding-inline: .3rem;
    
}

.cop {
    text-align: right;
    
    
}
.card--bg--per{
    background-image: url('../assets/svg/ipiales__banner.webp');
    background-position: center;
    background-size: cover;

    position: relative;
    overflow: hidden; /* Oculta el exceso del pseudo-elemento */


    /* box-shadow: inset -1px -16px 16px 20px rgba(0, 0, 0, 0.5); */
}

.card--bg--bga{
    background-image: url('../assets/svg/bucara__banner.webp');
    background-position: center;
    background-size: cover;

    /* box-shadow: inset -1px -16px 16px 20px 
    
    
    .rgba(0, 0, 0, 0.5); */
}
.cop1 {
    text-align: right;
}
    
    
.cop2 {
    text-align: right;
}


.card--bg--med{
    background-image: url('../assets/svg/medellin__banner.webp');
    background-position: center;
    background-size: cover;

    /* box-shadow: inset -1px -16px 16px 20px rgba(0, 0, 0, 0.5); */
}


.trayecto-cop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: .8rem;


    
   
}


/*
* NAVBAR
*/
.navbar{
    display: flex;
    flex-direction: row;
    align-items: baseline;

    padding: .75rem .875rem;
}

.navbar-hmenu{
    align-self: center;
    
}

.navbar--logo{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    
}

.navbar--logo img{
    width: 128px;
    padding-bottom: 15px;
    display: inline-block;
}







/*
* FORM
*/
.input-text-secondary{
    padding: 11px 49px;
    height: 26px;

    font-size: 1rem;

    border-radius: 100vh;
    border: 0;
}

.input-text-secondary:focus-visible{
    outline: none;
}




/*
* FORM-ICONS
*/
.-i-mail{
    background-image: url("../assets/svg/i-mail.png");
    background-repeat: no-repeat;
    background-position-x: 20px;
    background-position-y: center;
    background-size: 18px;
}






/*
* BUTTONS
*/
.btn{
    
    align-items: center;
    justify-content: center;

    height: 3rem;
    padding: 0.625rem 1.375rem;

    cursor: pointer;
    
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    
    border-radius: 100vh;
    border-width: 2px;
    border-style: solid;
    
    transition: all 0.06s linear;
    text-transform: none;
}



.btn-black{
    background-color: #1b1b1b;
    padding-block: 14px;
    color:#ffffff;
    align-items: center;
    text-align: center ;
}




.btn-black:hover{
    border-color: #494949;
    background-color: #494949;
    color:#ffffff;
}

.btn-red{
    border-color: red;
    background-color: red;
    color: #fff;
}

.btn-red:hover{
    border-color: #D90000;
    background-color: #D90000;
}






/*
* FOOTER
*/
.footers{
    display: flex;
    flex-direction: column;
    justify-content: center;

    background-color: #1b1b1b;
    color: white;
}

.footer--main{
    display: flex;
    flex-direction: column;
    
    justify-content: center;
    padding-inline: .875rem;
    padding-top: 2rem;

    line-height: 1.5;
}

.footer--logo{
    text-align: center;
    margin-bottom: 2.25rem;
}

.footer--accordion-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    font-weight: 700;
    font-size: 14px;
    padding-block: 12px;
}

.footer--accordion-item img{
    width: 15px;
}

.footer--end{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    margin-top: 1px;
    padding-block: 20px;
    padding-inline: 14px;

    font-size: 12px;
}







/*
* TOOLKIT
*/
.loader{
    display: none; /* Hidden by default */

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

    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    overflow: auto; /* Enable scroll if needed */
    background-color: #fff;
}

.loader img{
    width: 150px;
    height: 150px;
}

input[type="date"]{
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em;
}

.sb-hidden{
    overflow-y: hidden;
}

.text-normal{
    font-size: 1.125rem;
}

.text-big{
    font-size: 18px;
}

.text-thin{
    font-size: 12px;
}

.bg-main-card{
    background-image: url("../assets/svg/header_bg_blue.png");
    background-size: cover;
}

.link-blue{
    color: #048fa0;
}

.w-100{
    width: 100%;
}

/* --- SIZING --- */
.vh-100{
    height: 100vh;
}

.mt-0{
    margin-top: 0;
}

.mt-1{
    margin-top: 5px;
}

.mt-2{
    margin-top: 12px;
}

.mt-3{
    margin-top: 15px;
    background-color: black;
    align-items: center;
    text-align: center;
    border:none;
}

.mt-4{
    margin-top: 25px;
}

.mt-5{
    margin-top: 35px;
}

.mb-0{
    margin-bottom: 0;
}

.mb-1{
    margin-bottom: 5px;
}

.mb-2{
    margin-bottom: 12px;
}

.mb-3{
    margin-bottom: 20px;
}

.mb-4{
    margin-bottom: 25px;
}

.mb-5{
    margin-bottom: 35px;
}

.submenu-container {
  webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 outline: none;
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 33px;
  font-size: 15px;
  user-select: none;
  padding: 10px;
}

.submenu-toggle {
  webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
  margin:0;
  cursor: pointer;
  font-size: 27px;
  color: #0091a0;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none; /* Elimina cualquier subrayado aquí */
}

.submenu-toggle span {
  text-decoration: underline; /* Solo subrayamos el texto "Bogotá" */
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.submenu-toggle:hover {
  background-color: white;
  
  outline: none;
}

.arrow-down {
  font-size: 20px;
  margin-left: 10px;
  text-decoration: none; /* Asegura que la flecha no tenga subrayado */
  position: relative;
  transition: transform 0.9s ease; /* Transición solo para la rotación */
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.arrow-down.active {
  transform: rotate(180deg); /* Flecha hacia 
  arriba cuando el submenú está abierto */
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.submenu {
  webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: none;
  position: absolute;
  top: 45px;
  left: 120px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 20px;
  width: 180px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: white;
  z-index: 1000;
  padding: 15px;
  outline: none;
}

.submenu a {
   webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  padding: 10px;
  color: black;
  text-decoration: none;
  outline: none; /* Elimina el borde azul al hacer clic */
}

.submenu a:hover {
  background-color: #f2f2f2;
  cursor: pointer;
  outline-color: none;
}

.show-submenu .submenu {
  display: block;
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.show-submenu .submenu-toggle .arrow-down {
  transform: rotate(180deg); /* Cambio de dirección de la flecha */
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.oferta {
  font-size: 26px;
  margin-top: 3px;
}

*:focus {
    outline: ;
}

    
    
    
    .dropdown.show {
        display: block; /* Mostrar el menú cuando tenga la clase 'show' */
    }
    
   
    



.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 10px;

    
}

.menu-icon {
  display: flex;
    flex-direction: row;
    align-items: baseline;
height:1px;
    padding: .75rem .875rem;

   width: 5px;
    font-size: 25px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
}

/* Menú desplegable */
.dropdown {
    position: fixed;
    
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    outline: none;
    transition: 0.2s ease-in-out;
    z-index: 1000;
    padding: 0;
    margin: 0;
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

.dropdown.open {
    left: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.close-icon {
    font-size: 1.7rem;
    color: #333;
    cursor: pointer;
    position: absolute;
    top: 1.5rem;
    right: 3.2rem;
      webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
}

.banner {
    width: 7.8rem;
    margin-top: 1.9rem;
    margin-left:1.5rem;
}

.texto {
  margin-top:  35px;
    list-style-type: none;
    padding-left: 0px;
    line-height: 2.2rem;
    
    
    
}

.texto li {
    margin:13px;
    
}

.texto li a {
    text-decoration: none;
    color: black;
    font-size: 1.1rem;
   outline: none;
   
    
    padding-left: 10px;
    width: 
    cursor: pointer;
    
}

hr {
   
    border: 0;
    border-top: 1px solid #d9d9d9;
 margin-left: 15px;
}

.tarjeta {
box-sizing: border-box;
text-align-last: center;
display: flex;
justify-content: center;
padding: 5px 18px;
   margin-top: 18px;
    border: 1.5px solid black;
    white-space: nowrap;
    font-weight: bold;
    border-radius: 30px;
    font-size: 14px;
}


footerr { 
 
    outline: none;
    height:100%;
margin-top: 60px;
 position:absolute;
    background-color: black;
    padding-top: 20px;
    margin-bottom:0;
    width:100%;
    line-height: 3rem;
   
    
    
  
   
}

.what  {
    width: 17px;
    margin-left: 19px;
   
    
    
}

.vianca {
  font-size: 1.0rem;
  margin-bottom: 20px;
    color: white;
    text-decoration: none;
    padding-left: 4.8px;
    
}

.web {
    width: 17px;
    margin-left: 19px;
    
    
   
}

.espanol {
    text-decoration: none;
    color: white;
    display:inline
    font-size: 1.0rem;
   
}

.flechita {
    font-size: 13px;
    float: right;
    color: white;
    padding-right: 34px;
    
}

.dolar {
  
  
    
}

.dolarr {
   margin-left: 19px;
   margin-top:10px; 
    width: 17px;
}

.flechita2 {
    margin-top: .6rem;
    font-size 12px;
   float: right;
    color: white;
   padding-left: 10px;
    
}
.cop {
 
 font-size: 1.0rem;
 margin-top:3px;
    color: white;
    text-decoration: none;
    padding-left: 4.7px;
}
.footersr {
  margin-top: 
    background-color: blue;
    
    height: 50px;
   margin-bottom: 0;
   
}

.container-tarjeta {
background-color: white;
width: 40%;
display: flex;
justify-content: center;
text-align: center;
margin: 0 35%;
margin-top: 15%;
border-radius: 30px;
    
}



.close {
    color: black;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 20px;
    float: left;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    list-style: none;
}

/* Mostrar el modal cuando el checkbox está marcado */
.modal-toggle:checked + .modal {
    display: block;
}

/* Estilo para el enlace que actúa como botón de apertura */
.ofertas-link,
.reserva-link,
.informacion-Link,
.life-Link {
    cursor: pointer;
    color: #007bff;
    text-decoration: none;
    list-style: none;
}

/* Estilos para las flechas */
.flechita1 {
   font-size: 1.5rem;
   width: .8rem;
    color:black;
    float: right;
    padding-right:33px;
}
.flechita3 {
   font-size: 1.5rem;
    width: .8rem;
    float: right;
    padding-right: 33px;
}


li {
    list-style: none;
}
/* Ocultar el círculo del checkbox */
input[type="checkbox"].modal-toggle {
    display: none;
}

/* Estilo para las opciones */

.ofertas-link,
.reserva-link,
.informacion-Link,
.life-Link {
    cursor: pointer;
    color: black;
    text-decoration: none;
    padding-left: 10px;
    transition: all 0.1s ease; /* Transición suave */
}


/* Estilo cuando el mouse pasa por encima */
.menu-link:hover {
    font-weight: bold;
    border-left: 5px solid #23c846;
    

}
.ofertas-link:hover {
    font-weight: bold;
    border-left: 5px solid #fe0000;
}
.reserva-link:hover {
    font-weight: bold;
    border-left: 5px solid #1d9bf0;
}
.informacion-Link:hover {
    font-weight: bold;
    border-left: 5px solid #fe3094;
}
.life-Link:hover {
    font-weight: bold;
    border-left: 5px solid #30424e;
}

.modal-header-ofertas {
    margin-top: 60px;
}
.lista-ofertas {
    font-size: 17px;
    color: black;
    list-style-type:none;
    outline: none;
    margin-top: 30px;
    line-height: 4.1rem;
    
    padding-left: 20px;
}
.lista-ofer {
    margin-left: 0px;
}
    
.submenuflechaa {
    float:right;
    color: black;
    padding-right: 45px;
    font-size: 15px;
    height: 14px;
}

.banner-ofertas {
    width: 95%;
    height: 290px;
    
    background-size: cover;
    background-position: center;

    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}
   



.container-ofertas {
  
  
  
}

.texto-ofertas {
     
    background-size: cover;
    background-position: center;
 

width: 95%;
    position: relative;
height: 290px;
    background-color: red;
    background-size: cover;
    color: #fff;
padding-top: 40px;

    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    display: block;
 font-size: 2.8rem;   
 bottom: 25px;
 font-weight: bold;

}
    
.texto-rojo {
    padding-left: 25px;
   margin-top: 40px;
   
}

.divisor-ofertas {
    height: 0px;
    padding-bottom: 13px;
    color: transparent;
    
}    

.divisor-ofertas2 {
    height: 1rem;
    padding-bottom: 10px;
    color: transparent;
}

a {
    

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.divisor-ofert {
    color: transparent;
    height: 2rem;
    padding-bottom: 30px;
}


.tulum {
  font-size: 3.5rem;!important
    margin-left: 15px;
    padding-top: 10px;
   
}
.descubre {
    font-size: 2.3rem;!important
    top:5px;
    
    line-height: 2rem;
}

.diciembre {
  
    font-weight: bold;
    font-size: 2.0rem;
    line-height: 2.4rem;
    
}

.divisor2 {
   padding-top: 0px;
    margin: 0;
    color:transparent;
    height: 0rem;
    padding-bottom: 0;
}


/*Modal Lifemiles*/

    .modal-lifemiles {
                display: none; /* Escondido por defecto */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
   height: 100%;
    overflow-y: auto;
    background-color: white(0, 0, 0);
    background-color: white; /* Fondo osc*/

    }

    /* Mostrar modal cuando se apunta con :target */
    .modal-lifemiles:target {
      display: flex;
    }

    /* Contenido del modal */
    .modal-content-lifemiles {
  background-color: white;
    margin: 20px auto;
    padding: 20px;
     
 width: 100%;
    height:100%;
}
    .modal-content-lifemiles h2 {
         padding-top: 60px;
    font-size: 21.5px;
    color: black;
    border-bottom: 4px solid #30424e;
    padding-bottom: 10px;
    width: 5.3rem;
    white-space: nowrap;
    }

    .modal-content-lifemiles ul li {
            font-size: 17px;
    color: black;
    list-style-type:none;
    outline: none;
    margin-top: 7px;
    line-height: 3.2rem;
    
    margin-left: 0px;
    text-decoration: none;
    list-style-type: none;
    
    }

    .close-lifemiles {
   margin-top: ;
   width: 18px;
    float:left;
     text-decoration: none;
     transform: rotate(180deg);
     color:black;
    }

    .close-lifemiles:hover {
      
    }
.divisor-life {
    margin: 0;
}


.banner-life {
 text-align: center;
  display: flex;
  flex-direction: columns;
  float: none;
    width: 95%;
    height:290px;
    top: 0%;
    background-size: cover;
    background-position: center;
object-fit: cover;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

    .texto-banner-life {
  

width: 95%;
    position: relative;
height: 290px;
    background-color: #30424e;
    background-size: cover;
    color: #fff;
padding-top: 50px;

    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    display: block;
 font-size: 2.2rem;   
 bottom: 15px;
 font-weight: bold;
 
}
    .divisor-life1 {
    color: transparent;
    height: 1rem;
}


.mastop {
   
    
    
    color:white;
    font-size: 3.2rem;
}

.viajera {

 color:white;!important
    font-size: 2.0rem;!important
    top:9px;
    width: ;
    line-height: 2.1rem;
    text-decoration: none;
}

.solicitala {
  color:white;
    font-weight: bold;
    font-size: 1.7rem;
    line-height: 2rem;
    ;
}

.divisor-life2 {
   padding-top:0px;
    margin-top:0px;
    color:transparent;
    
    
}
.contenedor-life {
   display: flex;
   flex-direction: columns;
   text-align: center;
   
}


.divisor-life3 {
    padding-bottom: 10px;
    height:0;
    color: transparent;
}


/*Modal Información */

 .modal-informacion{
                display: none; /* Escondido por defecto */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
   height: 100%;
    overflow-y: auto;
    background-color: white(0, 0, 0);
    background-color: white; /* Fondo osc*/

    }

    /* Mostrar modal cuando se apunta con :target */
    .modal-informacion:target {
      display: flex;
    }

    /* Contenido del modal */
    .modal-content-informacion {
  background-color: white;
    margin: 20px auto;
    padding: 25px;
     
 width: 100%;
    height:100%;
}
    .modal-content-informacion h2 {
         padding-top: 60px;
    font-size: 21.5px;
    color: black;
    border-bottom: 4px solid #fe3094;
    padding-bottom: 10px;
    width: 12.5rem;
    white-space: nowrap;
    }

    .modal-content-informacion ul li {
            font-size: 17px;
    color: black;
    list-style-type:none;
    outline: none;
    margin-top: 7px;
    line-height: 3.2rem;
    width: 
    margin-left: 0px;
    text-decoration: none;
    list-style-type: none;
    
    
    }

    .close-informacion {
   margin-top: 10px;
   width: 18px;
    float:left;
     text-decoration: none;
    
     color:black;
    }

    .close-informacion:hover {
      
    }
    .banner-info {
 text-align: center;
  display: flex;
  flex-direction: columns;
  float: none;
    width: 95%;
    height:290px;
    top: 0%;
    background-size: cover;
    background-position: center;
object-fit: cover;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

    .texto-info {
  
 
width: 95%;
    position: relative;
height: 270px;
    background-color: #fe3094;
    background-size: cover;
    color: #fff;
padding-top: 50px;

    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    display: block;
 font-size: 2.2rem;   
 bottom: 25px;
 font-weight: bold;
}
    .divisor-info1 {
    color: transparent;
    height: 2rem;
}


.tienes {
   
    padding-left: 20px;
    font-size: 2.2rem;
    color:white;
    font-weight: bold;
}
.preguntas {
margin-left: 20px;
 color:white;
    font-size: 2.7rem;!important
   top:5px;
    font-weight: bold;
    line-height: 2.0rem;
    
}
.visita {
    margin-left: 20px;
    font-size: 1.7rem;
}
.divisor-info2 {
    color: transparent;
}

 .lista-informacion {
     padding-left: 0px;
     
 }
 
 .divisor-header-info {
   margin-top: 0px;
  padding-top: 0px ;
    height: 0px;
    padding-bottom: 10px;
    color: transparent;
}  
 
 
 
 
 
 
 
 
 
/*Modal Ofertas */

 .modal-ofertas{
                display: none; /* Escondido por defecto */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
   height: 100%;
    overflow-y: auto;
    background-color: white(0, 0, 0);
    background-color: white; /* Fondo osc*/

    }

    /* Mostrar modal cuando se apunta con :target */
    .modal-ofertas:target {
      display: flex;
    }

    /* Contenido del modal */
    .modal-content-ofertas {
  background-color: white;
    margin: 20px auto;
    padding: 5px;
     
 width: 100%;
    height:100%;
}
    .modal-content-ofertas h2 {
         padding-top: 60px;
    font-size: 21.5px;
    color: black;
margin-bottom: 0px;
    padding-bottom: 10px;
    width: 11.5rem;
    white-space: nowrap;
    margin-left: 20px;
   border-bottom: 4px solid #fe0000;
   
    }

    .modal-content-ofertas ul li {
            font-size: 17px;
    color: black;
    list-style-type:none;
    outline: none;
    margin-top: 2px;
    line-height: 3.5rem;
    width: ;
    margin-left: 0px;
    text-decoration: none;
    list-style-type: none;
    
    
    }

.divisor-header {
 margin-top: 0px;
  padding-top: 0px ;
    height: 0px;
    padding-bottom: 10px;
    color: transparent;
}


    .close-ofertass {
   margin-top: 20px;
   margin-left: 20px;
   width: 18px;
    float:left;
     text-decoration: none;
     
     color:black;
    }

    .close-ofertas:hover {
      
    }



/*Modal Reserva */

    .modal-reserva {
                display: none; /* Escondido por defecto */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
   height: 100%;
    overflow-y: auto;
    background-color: white(0, 0, 0);
    background-color: white; /* Fondo osc*/

    }

    /* Mostrar modal cuando se apunta con :target */
    .modal-reserva:target {
      display: flex;
    }

    /* Contenido del modal */
    .modal-content-reserva {
  background-color: white;
    margin: 20px auto;
    padding: 20px;
     
 width: 100%;
    height:100%;
}
    .modal-header-reserva h2 {
         padding-top: 60px;
    font-size: 21.5px;
    color: black;
    
    padding-bottom: 10px;
    width: 12.3rem;
    white-space: nowrap;
    margin-left: 5.5px;
    border-bottom: 4px solid #1d9bf0;
    }

    .modal-content-reserva ul li {
            font-size: 17px;
    color: black;
    list-style-type:none;
    outline: none;
    margin-top: 7px;
    line-height: 3.2rem;
    padding-left: 0px;
    margin-left: 0px;
    text-decoration: none;
    list-style-type: none;
    
    }

    .close-reserva {
   margin-top: 10px;
   width: 18px;
    float:left;
     text-decoration: none;
     
     color:black;
     padding-left:5px;
    }

    .close-lifemiles:hover {
      
    }
    .lista-reserva {
        padding:5px;
    }
    
    
    .check {
padding: 3px 3px;
  font-size: .9rem;
  border:1px solid #1d9bf0;
    background: #1d9bf0;
    color: white;
    border-radius: 8px;
    font-weight:bold;
     transform: translateY(-5px);
     margin: 6px;
}
.check-in-reserva {
  padding: 0px 12px;
  font-size: 15px;
   padding-top: 4px;
    padding-bottom: .9px;
    background: #1d9bf0;
    border-radius: 8px;
    color:white;
    font-weight: bold;
   
    
}


.contenedor-reserva {
   display: flex;
   flex-direction: columns;
   text-align: center;
}

.banner-reserva {
 text-align: center;
  display: flex;
  flex-direction: columns;
  float: none;
    width: 95%;
    height:290px;
    top: 0%;
    background-size: cover;
    background-position: center;
object-fit: cover;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

    .texto-reserva {
  
 
width: 95%;
    position: relative;
height: 270px;
    background-color: #1d9bf0;
    background-size: cover;
    color: #fff;
padding-top: 50px;
background-position: center;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    display: block;
 font-size: 2.2rem;   
bottom: 40px;
 font-weight: bold;
}
    .divisor-reserva1 {
    color: transparent;
    height: 2rem;
}


.online {
    padding-left: 7px;
    font-size: 2.4rem;
    color:white;
}
.check-online {
 color:white;
    font-size: 2.4rem;!important
    top:10px;
    width: 100%;
    line-height: 2.0rem;
}

.hrs {
  color:white;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 2rem;
}

.divisor-reserva2 {
    margin: 0;;
    color:transparent;
    height: 1rem;
}

.texto-banner-reserva {
    margin-left: 15px;
    margin-top: 30px;
}


.linea {
    height: 1rem;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom:8px;
    color:transparent;
    
}



/*Modal para el buscador de vuelos Origen */
   
 .contenedor-close-btn {
    padding-top: 20px; 
 }      
            
/* Estilo para el botón de cerrar */
.close-btn {
   padding-right: 16px;
 
    color: white;
    float: center;
    font-size: 35px;
    font-weight: bold;
    
    
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Estilo para el div de origen */
.desde {
    cursor: pointer; /* Indica que se puede hacer clic en el área */
}
/* Estilo para el botón de flecha hacia atrás */
.back-btn {
    font-size: 35px;
    color: white;
    cursor: pointer;
    position: absolute;
   padding-top: 20px;
    padding-left: 16px;
}

.back-btn:hover,
.back-btn:focus {
    color: black;
}

   

       
       
       
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  
}

.modal-content {
padding-left:0px;
padding-right: 0px;
margin-top:20px;
padding-top:20px;
 height: 100%;
  background: #ffffff;
 text-align: center;
  
  border-radius: 20px;
  width: 100%;
  

}

/* Botón "Cerrar" con imagen */
.close-modal {
  position: absolute;
  margin-top: 25px;
  right: 17px;
  width: 13px;
  height: 13px;
  cursor: pointer;
  color:white;
}

/* Botón "Atrás" con imagen */
.go-back {
  position:absolute;
  margin-top: 25px;
  left: 17px;
  width: 13px;
  height: 13px;
  cursor: pointer;
  color:white;
}

/* Estilos únicos por modal */
.modal-origin {
    width: 100%;
    height: 100%;
    background-color: black;
}

.modal-content-origin {
   margin-top:25px;
 display:flex:
 justify-content: center;
  height: 100%;
   width: 100%;
  border-radius: 20px;
     background-color: white;
    padding-top: 30px;
    padding-left: 0px;
    padding-right: 0px;
}





.modal-summary {
  
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  
  background: black; /* Fondo semitransparente */
 

}




/* Contenedor del resumen */
.summary-container {
margin-top:25px;


 text-align: center;
  background-color: white;
  width:  100%;
 
  border-radius: 10px;
  
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.0);  
   
 

}  
 
  

 .summary-box{
 margin:10px 0px;
    display: flex;
 text-align: center;
  align-items: center;
  background-color: #fff;
  
  border-radius: 8px;
 
 
 }
 
/* Cuadro individual del resumen */




/* Imagen del cuadro */
.summary-box img 
 
}

/* Títulos y valores */
.




/* Clases únicas para cuadros */
.cuadro-origen {
  text-align: center;
  align-items: center;
height: 50px;
  width: 40%;
 
padding:7px 0px;
 
  }
  
  .cuadro-origen p {
      margin:0px;
      font-size: 11px;
      display: flex;
      justify-content: flex-start;
        
      
  }
  
 
  .cuadro-origen img {
    display: flex;
    justify-content: flex-start;
    height: 22px;
    width: 20px;
    padding-top:3px;
    margin-left: 10px;
}

.cuadro-origen span {
    
    vertical-align: baseline;
    font-weight: bold;
  
    font-size:13.5px;
    white-space: nowrap;
}


/*cuadro- Destino */

.cuadro-destino {
justify-content: left;
 padding:7px 0px;
  text-align: left;
 display: flex;
 flex-direction: start;
  
  width:48%;
   

}

    
  .cuadro-destino img {
     display: flex;
     justify-content: center;
     height: 25px;
     width: 20px;
     padding-top: 3px;
    
  }  

.cuadro-destino p {
 
  display: flex;
  justify-content: flex-start;
  font-size: 11px;
}

.cuadro-destino span {
    display: flex;
    justify-content: center;
    white-space: nowrap;
    font-weight: bold;
    font-size: 13.5px;
    
}



.cuadro-fecha-ida {
    padding:7px 0px;
    text-align:center;
    align-items: center;
 width: 50%;

}

.cuadro-fecha-ida p {
    
    font-size: 11px;
    justify-content: flex-start;
    display:flex;
    
    
}
.cuadro-fecha-ida span {
    
   font-size: 13.5px;
    vertical-align: baseline ;
    font-weight:bold ;
   
    
}
.cuadro-fecha-ida img {
    margin-left:10px;
    height:  22px;
    width: 20px;
    
}



.cuadro-fecha-vuelta {
 padding-left:7.5px;
display: flex;
flex-direction: start;
  text-align: center;
  align-items: center;
border-left:.1px solid grey;
  width: 40%;
 padding-top:7px;
 padding-bottom: 7px;
 border-radius: 0px;
 
}

.cuadro-fecha-vuelta p {
    display: flex;
    flex-direction: center;
    font-size: 11px;
}

.cuadro-fecha-vuelta span {
   display: flex;
   flex-direction: center;
    font-weight: bold;
    font-size: 13.5px;
}



.cuadro-fecha-vuelta img {
    
   

width:20px;
height: 22px;
}



.cuadro-pasajeros {
    display: grid;
  grid-template-columns: (1fr 1fr);
 
  
    border:.3px solid grey;
  display: flex;  

margin: 15px auto;
  width: 90%;
  height: 50px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cuadro-pasajeros img {
    height: 22px;
    width: 20px;
    margin-left:10px;
}

.cuadro-pasajeros span {
    display: flex;
    flex-direction: start;
    margin-right: 35px;
}



.origin-destination-group,
.dates-group,
.passengers-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 background-color: red;
}

.origin-destination-group .summary-box,
.dates-group .summary-box,
.passengers-group .summary-box {
  width: 20%; /* Ajusta el ancho de los cuadros */
}
.flight-type-container {
height:5% ;
margin-top:35px;
border-radius: 30px;
 margin: 10px auto;
 
  width: 57%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:44px;
    
    background-color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
      text-align: center;
}


/* Estilos específicos para el encabezado */
#modal-header {
  font-size: 19px;
  font-weight: bold;
  color: red;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f4f4f4;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#flight-type-option {
  
   /* Organización vertical de las opciones */
   /* Espacio entre las opciones */
}


}
.radio-wrapper-ida {
 margin-top:15px;
  display: flex; /* Para alinear en una fila
  
  align-content: right; /* Centra verticalmente los elementos */
   /* Espacio entre cada radio */
  margin-right: 10px;
  
  height:10px;
}

.radio-wrapper-solo {
    align-content: right;
    margin-right:10px;
    margin-top: 11px;
    height: 10px;
}

.flight-type-label-solo-ida {
 display: flex;
 justify-content: space-evenly;
 margin-right: : 25px;
 font-size: 14px;
} 
 .flight-type-label-ida-vuelta {
     
   font-size: 14px; 
     
     
 }
   /* Espacio entre el radio y el texto */


#radio-ida-vuelta {
   background-color: red;
   margin-left: 35px;
}


#modal-passengers{
    
    height: 100%;
    background-color: black;
}

.pasajeros {
   border-radius: 25px;
    background-color: white;
    display: grid;
    grid-template-columns: 1fr;
}


.header-pasajeros{
color:#fff;
    text-align: center;
    display: flex;
    align-items: center;;
   flex-direction: space-between;
    width:100%;
    height: 70px;
    
}    
    


.flight-type-label-ida-vuelta {
    margin-right: 2rem;
    margin-top:10px;
}


.modal-suma {
  display: flex;
    background-color: black;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height: 70px;
}
.modal-suma h4{
  text-align: center;
  margin-left:40px;
  
    align-items: center;
    font-size: 25px;
    color: white;
    margin-bottom: 11px;
    
}
.modal-suma span {
    color:transparent;
}

.cuadroo {
    background-color: red;
}




.cuadro-de-resumen {
  display: grid;
  grid-template-columns: repeat(3 1fr);
  text-align: center;
  flex-wrap: wrap;
     
 }
 
 .img {
   font-weight: bold;
    height: 10px;
     width: 10px;
     z-index: 1;
     
 }
 
    
  .linea-arribaa{
   text-align: center;
   margin-left: 4px;
    width: .1px;
      height: 5px;
      background-color: grey;
  }  
    
    
  .linea-abajoo { 
   text-align: center;
    margin-left: 4px;
    top: 5px;
    height: 5px;
    background-color: grey;
    width: .1px;
     display: grid;
  grid-template-columns: repeat(3 1fr);
  text-align: center;
  flex-wrap: wrap;
}


.linea-arriba{
 
 
    height: 5px;
    width: 1px;
    
    
}

.origin-destination-container{
    border:.3px solid grey ;
    display: flex;
    width: 90%;
   justify-content: space-between;
    flex-direction: center;
     height: 50px;
   margin: 10px auto; 
    text-align: center;
   border-radius: 8px;
   vertical-align: baseline;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   
}






.passengers-container {
   margin-top:15px;
    display: flex;
    flex-direction: row;
}

.date-container {
    border-radius: 8px;
    border:.3px solid grey ;
    display: flex;
    width: 90%;
    flex-direction: row;
    height: 50px;
    text-align: center;
     margin: 10px auto;
     
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


.headerrs {
   display: grid;
  grid-template-columns: repeat(1 1fr);
  text-align: center;
  flex-wrap: wrap;
  flex-direction: columns;
  box-sizing:border-box;
  background-color: #fff;
  margin-left:18px;
    
}

.headerrs span {
    font-weight:bold;
}

 .title-arriba {
         font-size: 11px;
     
 }



   
}
.linea-abajo {
    height: 10px;
    width: 1px;
    
    
   
}



.mi-imagen {
    width: 30px;
    height: 30px;
    top:10px;
  display: flex;
  flex-direction:around;
    
}




.contenedor-principal {
    display: grid;
   grid-template-columns: repeat(3 1fr);
       text-align: center;
       
   }
   
   
   .imagen-header {
    display: flex;
     justify-content: flex-start;
   } 
   
   
   
   .botom-reserva,
.botom-reserva *,
.boton-reserva :after,
.botom-reserva :before,
.botom-reserva:after,
.botom-reserva:before {
  border: 0 solid;
  box-sizing: border-box;
}
.botom-reserva {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
  width: 90%;
}
.botom-reserva:disabled {
  cursor: default;
}
.botom-reserva:-moz-focusring {
  outline: auto;
}
.botom-reserva svg {
  display: block;
  vertical-align: middle;
}
.botom-reserva [hidden] {
  display: none;
}
.botom-reserva {
  border-radius: 99rem;
  border-width: 2px;
  padding: 0.8rem 3rem;
}
.botom-reserva:hover {
  color: #999;
}


#adults-container {
color:black;
 align-items: center;
   width: 100%;
    display: flex;
    flex-direction: space-between;
    justify-content: flex-end;
}
.adulto {
   height: 7%;
    display: flex;
   width:100%;
    
    justify-content: flex-start;
 align-items: center;
}



.totalpasajeros{
  height: 50px;
    background-color: white;
    margin-top: 25px;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    width: 92%;
    border-bottom:2px solid #23c846;
    display: flex;
    flex-direction: star;
    border-top:.1px solid grey;
    border-left:.1px solid grey;
    border-right: .1px solid grey;
    border-radius: 5px;
    
}
#total-passengers {
    font-weight: bold;
    margin-left: 12px;
}

.imagen-passengers {
    margin-left: 17px;
}

#teens-container {
  color:black;
   align-items: center;
     width: 100%;
    display: flex;
    flex-direction: space-between;
    justify-content: flex-end;
}

.jovenes { 
  height: 7%;
    display: flex;
   width:100%;
    color: black;
    justify-content: flex-start;
 align-items: center;   
   }
   
   
   #babies-container {
   color: black;
     align-items: center;
           width: 100%;
    display: flex;
    flex-direction: space-between;
    justify-content: flex-end; 
   }
   
   
   .bebes {
   height: 7%;
    display: flex;
   width:100%;
    
    justify-content: flex-start;
 align-items: center;
   }
   
   
   
   
   
   #children-container {
   color: black;
     align-items: center;
           width: 100%;
    display: flex;
    flex-direction: space-between;
    justify-content: flex-end; 
   }
   
   .ninos {
  height: 7%;
    display: flex;
   width:100%;
    
    justify-content: flex-start;
 align-items: center;
   }
   
   
   .cuadro-botom {
       margin-top: 50px;
       
  width: 97%;
  }
          
          
          
 .botom-box{
     margin:0px auto;
 }


.botones-pasajeros- {
 background-color:transparent; 
 color:transparent;
 font-size: 5px;
border:none;
}
.boton-imagen {
    width: 25px;
    height: 25px;
      transition: min-blend-mode 0.5s ease-in-out;
}

.botones-pasajeros1 {
   
   background-color:transparent;
 color:transparent;
 font-size: 5px;
border:none;

}
.boton-imagen1 {
    width: 25px;
    height: 25px;
      transition: min-blend-mode 0.5s ease-in-out;
}


.contador{
    margin:0px 10px;
    font-weight: bold;
    font-size: 18px;
    
}

.modal-passengers {
  
  
  height:100%;
  
  width: 100%;
   
    background-color: black;
}


.modal-content-passengers{
 padding-top:15px;
 margin-top:20px;
 display:flex:
 justify-content: center;
  height: 100%;
   width: 100%;
  border-radius: 20px;
     background-color: white;
     
}



.boton-imagen1:active {
    background-color: #23c846;
    min-blend-mode: color;
    border-radius:30px;
       transition: min-blend-mode 0.5s ease-in-out;
}




.boton-imagen:active {
 color:#23c846;
  background-color: #23c846;
  min-blend-mode: color;
  border-radius: 30px;
     transition: min-blend-mode 0.5s ease-in-out;
}



.adulto p {
    margin-left:19px;
    font-size: 18px;
    line-height: 1.2rem;
    align-items: center;
    margin-top:5px;
}


.jovenes p {
   margin-left:19px; 
   font-size: 18px;
   line-height: 1.2rem;
   align-items: center;
   margin-top:5px;
}
.ninos p {
      margin-left:19px; 
   font-size: 18px;
   line-height: 1.2rem;
   align-items: center;
   margin-top:5px;
    
}
.bebes p {
      margin-left:19px;
   font-size: 18px;
   line-height: 1.2rem;
   align-items: center;
   margin-top:5px;
}


.adulto small {
    white-space: nowrap;
    font-size: 12px;
    
}

.jovenes small {
    white-space: nowrap;
    font-size: 12px;
}

.ninos small {
    white-space:nowrap;
    font-size: 12px;
    
}
.bebes small {
    white-space: nowrap;
    font-size: 12px;
}




div, span, p {
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}


.boton_pasajeros {
   -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  text-align: center;
  
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0px;
  
  width:35%;
  
  
}
.boton_pasajeros:disabled {
  cursor: default;
}
.boton_pasajeros:-moz-focusring {
  outline: auto;
}
.boton_pasajeros svg {
  display: block;
  vertical-align: middle;
}
.boton_pasajeros [hidden] {
  display: none;
}
.boton_pasajeros {
  border-radius: 99rem;
  border-width: 2px;

  
}
.boton_pasajeros:hover {
  color: #999;
}
 
   .boton_pasajeros,
.boton_pasajeros *,
.boton_pasajeros :after,
.boton_pasajeros :before,
.boton_pasajeros:after,
.boton_pasajeros:before {
  border: 0 solid;
  box-sizing: border-box;
  
  
}


.cuadro-summary {
    margin-top:25px;
    display:flex;
    flex-direction:center;
    justify-content: center;
    font-size: 120%;
    
}


.confirmar {
      -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 
 border:none;
  font-size: 100%;
  image
  margin: 0px;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  
  text-transform: none;
align-items: center;
 
   
}
.header-passengers {
 color:white;
    text-align: center;
    font-size: 27px;
    width: 100%;
    margin-bottom: 10px;
    align-items: center;
}






.flatpickr-day:hover {
  background-color: #e5e7eb; /* Fondo al pasar */
}

.flatpickr-day.selected {
  background-color: #6366f1; /* Fondo morado */
  color: #fff; /* Texto blanco */
}




.modal-content-calendario-ida {
 
 margin-top:25px;
 display:flex:
 justify-content: center;
  height: 100%;
   width: 100%;
  border-radius: 20px;
     background-color: white;
    padding-top: 30px;
    padding-left: 0px;
    padding-right: 0px;
    
}

.modal-calendar-ida {
    background-color: black;
    width: 100%;
    height: 100%;
}




.dayContainer {
  background-color: #fff;
   width: 100%;
   box-shadow: none;
   text-align: center;
   justify-content: center;
   margin:5px 0px;
   border:none;
   height: 100%;
}


/* General styles */

/* Títulos */

.date-ida-display {
  align-items: center;
   height: 50px; 
     display:flex;
columns:2;
   border:.1px solid grey;
   margin-left:auto;
   width: 92%;
   margin-right: auto;
   border-bottom:2px solid #23c846;
   border-radius: 5px;
}

.date-ida-display img {
    width: 22px;
    height: 22px;
    margin-left:10px;
}
/* Fecha seleccionada */
.selected-date-display {
    font-size: 16px;
    font-weight: bold;
   
    
}

/* Calendario Flatpickr */
#date-ida,
#date-vuelta {
    width: 100%;
}

.flatpickr-calendar {
    width: 100%;!important
    max-width: none;
    border:none;
    
    
   
    
    
    
    
}

.flatpickr-month {
    background-color: #f1f1f1;
    font-weight: bold;
    text-align: center;
    width: 100%;
    border: none;
}

.flatpickr-day {
    font-size: 14px;
    line-height: 2;
    width: 36px;
    height: 36px;
    margin: 2px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

/* Colores de los días */
.flatpickr-day.today {
    background-color: #4caf50;
    color: #fff;
}

.flatpickr-day.selected {
    background-color: #f44336;
    color: #fff;
}

/* Hover */
.flatpickr-day:hover {
    background-color: #ffc107;
    color: #fff;
}

/* Días deshabilitados */
.flatpickr-day.disabled {
    color: #ccc;
    cursor: not-allowed;
    background-color: #f8f9fa;
}

/* Leyenda de precios */
.calendar-cuadro {
    margin: 20px 0;
    text-align: center;
    width: 100%;
}

.calendar-cuadro .legend {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    font-size: 14px;
}

.legend span {
    display: inline-flex;
    align-items: center;
}

.legend .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.legend .dot.green {
    background-color: #4caf50;
}

.legend .dot.yellow {
    background-color: #ffc107;
}

.legend .dot.red {
    background-color: #f44336;
}

/* Botones responsive */


    .flatpickr-day {
        width: 25px;
        height: 25px;
    }

    



.flatpickr-input{
    width: 100%;
   
}



.elcalendario-flack {
    width: 100%;!important
}



    .flatpickr-day.selected {
            background-color: black;
            color: white;
            font-size: 13px;
           margin: 5px 0px;
            width: 10px;
        }
        .flatpickr-day.today {
            border-color: green;
            font-size: 13px;
            margin:5px 0px;
            width: 10px;
            
        }
        .flatpickr-day.low-cost {
            background-color: #b7e6d4;
            font-size: 13px;
           margin:5px 0px;
            width: 10px;
        }
        .flatpickr-day.medium-cost {
            background-color: #ffecb7;
            font-size: 13px;
           margin:5px 0px;
            width: 10px;
        }
        .flatpickr-day.high-cost {
            background-color: #fec3b5;
            font-size: 13px;
           border-radius: 50px;
            width: 10px;
            
            margin:auto 0px;

}


.flatpickr-innerContainer {
    background-color: #fff;
    display: flex;
    flex-direction:center;
    justify-content: center;
    margin-left:10px;
   height: 100%;
   padding-right: 0px;
    
}

.flatpickr-weekdays  {
    width: 100%;
    text-align: center;
   
    
   
}
.flatpickr-weekdaycontainer{
   
   width:100%; 
   
   padding:10px 0px;
   
}
  
 .flatpickr-weekdaycontainer span {
     font-weight: bold;
 }


.cuando-vas-volar {
    margin-left: 15px;
}


.padre-div {
    display: flex;
    margin-left:15px;
    
}
    


.div1 {
   margin-top:1px;
    height: 10px;
    width: 10px;
    background-color: #b7e6d4;
    border-radius:50px;
    margin-left:12px;
    
}

.div2 {
     margin-top: 1px;  
        height: 10px;
    width: 10px;
    background-color: #ffecb7;
    border-radius:50px;
margin-left: 15px;
}

.div3 {
      margin-top: 1px; 
        height: 10px;
    width: 10px;
    background-color: #fec3b5;
    border-radius:50px;
margin-left: 18px;
}


.padre-div span {
    font-weight: bold;
    font-size: 11px;
    margin:0px 5px;
}


.imagen-ida {
    
    margin-left: 15px;
   
}

.date-ida-display span {
   font-size: 13px; 
   margin-bottom: 18px;
   

}
.imagen-date-ida {
    align-items: center;
    
    width: 15px;
    height: 15px;
    
}


.modal-content-vuelta {
margin-top:25px;
 display:flex:
 justify-content: center;
  height: 100%;
   width: 100%;
  border-radius: 20px;
     background-color: white;
    padding-top: 30px;
    padding-left: 0px;
    padding-right: 0px;

}

.modal-calendar-vuelta {
    height: 100%;
    width: 100%;
    background-color: black;
}




.closet-modal-ida {
    width:13.5px;
    height:13.5px;
    margin-right: 17px;
    margin-top: 25px;
    
}
.closet-modal-vuelta {
    width:13.5px;
    height:13.5px;
    margin-top:25px;
    margin-right: 17px;
    
}
.go-back-ida {
    width:14px;
    height: 14px;
    margin-left:17px;
    margin-top:25px;
}


.go-back-vuelta {
    width:14px;
    height: 14px;
    margin-left:17px;
    margin-top: 25px;
}

.go-back-resumen {
    width:14px;
    height: 14px;
    margin-left:17px;
    margin-top: 25px;
}

.header-calendario-ida {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height: 70px;
}

.header-calendario-ida h2 {
    color:white;
    text-align: center;
    font-size: 25px;
    width: 100%;
    margin-bottom: 0px;
    align-items: center;
}



.closet-modal-pasajeros {
    width:13.5px;
    height:13.5px;
    margin-top:25px;
    margin-right: 17px;
    
}
.go-back-pasajeros {
    width:14px;
    height: 14px;
    margin-left:17px;
    margin-top:26px;
}


.header-calendario-vuelta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height: 70px;
}

.header-calendario-vuelta h2 {
    color:white;
    text-align: center;
    font-size: 25px;
    width: 100%;
    margin-bottom: 0px;
    align-items: center;
}


.raya-calendario {
    color: transparent;
}



#destination-suggestions  {
  display: block;
    padding-left: 0px;
          overflow-y: auto;
          max-height: 500px;
          outline: none;
          margin:20px;
     
    
} 
  #destination-suggestions li {
  display: block;
    background-color: #fff;
    list-style: none;
      padding:20px 0px;      
            overflow-y: auto;
            padding-left: 15px;
            margin-left:0px;
            border-bottom: .1px solid grey;
            padding-bottom:20px ;
           font-weight: bold;
    
} 
  
    
    
    
  .modal-content-destination {
margin-top:25px;
 display:flex:
 justify-content: center;
  height: 100%;
   width: 100%;
  border-radius: 20px;
     background-color: white;
    padding-top: 30px;
    padding-left: 0px;
    padding-right: 0px;
   
    overflow: hidden;

  
}


.modal-destination {
  background-color:black ;
    width: 100%;
    height: 100%;
   
    overflow: hidden;

}





.radio-container-destino {
 
  display: flex;
  gap: 20px;
  margin:17px auto;
 align-items: center;
 text-align: center;
 background-color: #fff;
 justify-content: space-evenly;
 width: 90%;
 height: 50px;
 border-radius: 25px;
 padding:5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
}


.radio-container-destino label {
  display: grid;
  grid-template-columns: 1fr 1fr;
  white-space: normal;
  flex-direction: column;
 margin-bottom: 15px;
  
  margin-right: 80px;
  align-items: center;
  font-size: 14px;
}
   
.main-container-destino {
    width: 100%;
    height: 100px;
    background-color: #f5f5f5;
    margin-top:30px;
    align-items: center;
    border-radius: 25px;
    
}

.texto-descripcion-destino {
    margin:0px;
    height: 3px;
    color: transparent;
}



.closet-modal-destino {
    width:13.5px;
    height:13.5px;
    margin-top:25px;
    margin-right: 17px;
    
}
.go-back-destino {
    width:14px;
    height: 14px;
    margin-left:17px;
    margin-top:26px;
}



.header-destino {
       display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height: 70px;
    
    
}
 
 
 
 .header-destino h2 {
      color:white;
    text-align: center;
    font-size: 25px;
    width: 100%;
    margin-bottom: 0px;
    align-items: center;
}


.closet-modal-origen {
    width:13.5px;
    height:13.5px;
    margin-top:25px;
    margin-right: 17px;
    
}
.go-back-origen {
    width:14px;
    height: 14px;
    margin-left:17px;
    margin-top:26px;
}



.header-origen {
       display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height: 70px;
    
    
}
 
 
 
 .header-origen h2 {
      color:white;
    text-align: center;
    font-size: 25px;
    width: 100%;
    margin-bottom: 0px;
    align-items: center;
}





#origin-input {
   
    width: 80%;
    margin-left: .5rem;
    align-items: center;
   outline:none;
  border-bottom:none;
    border-top: none;
    border-left:none ;
    border-right: none;
    height: 20px;

}


.cuadro-origin {
 display:flex;
  border-radius: 2px;
    width: 90%;
    height: 50px;
    background-color: #fff;
    border:.1px solid grey;
    align-items: center;
    margin: 0px auto;
    border-bottom: 2px solid #23c846;
}



.imagen-deorigen {
   padding-top:3px;
    width: 20px;
    height: 22px;
    text-align: center;
    margin-left:15px;
    
}
 


.cuadro-origin p {
       
    font-size: 9px;
    margin-left:.5rem;
    
}




#origin-suggestions  {
    padding-left: 0px;
          overflow-y: auto;
          max-height: 500px;
          outline: none;
          margin:20px;
     
    
} 
  #origin-suggestions li {
    background-color: #fff;
    list-style: none;
      padding:20px 0px;      
            overflow-y: auto;
            padding-left: 15px;
            margin-left:0px;
            border-bottom: .1px solid grey;
            padding-bottom:20px ;
            font-weight: bold;
           
    
} 
 
 
 
 
#destination-input {
   
      margin-right: 10px;
    width: 80%;
margin-top: 20px;
    align-items: center;
   outline:none;
  border-bottom:none;
    border-top: none;
    border-left:none ;
    border-right: none;
    height: 20px;


}





.lista-lifemile {
    padding-left:0px;
    
}



#type-selector {
    margin-bottom:.7rem;
}




.destino-image {
    border-radius: 2px;
    width: 90%;
    height: 50px;
    background-color: #fff;
    border:.1px solid grey;
    align-items: center;
    margin: 0px auto;
    border-bottom: 2px solid #23c846;
 
}


.cuadro-destino {


}


.origen-escribe {
    flex-direction: columns;
    
}


.header-resumen {
    border-radius: 20px;
}


   

    .carrusel-container {
      display: flex;
      overflow-x: auto;
      gap: 16px;
      padding: 10px;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
     scrollbar-color: #ccc transparent;
     scrollbar-width: thin;
     scroll-margin-top: 30px;
     
    }
    .carrusel-container::-webkit-scrollbar {
  height: 8px;
}

.carrusel-container::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 10px;
}

.carrusel-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  border: 2px solid #eee;
}

    .card-inicio {
      flex: 0 0 auto;
      scroll-snap-align: start;
      width: 300px;
      min-height: 95px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .card-inicio:hover {
      box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }

    .card-inicio img {
      width: 58px;
      
      margin-bottom:15px;
      
    } 

    .card-inicio-content h3 {
     display: flex;
     justify-content: flex-start;
      margin: 0;
      font-size: 20px;
      font-weight: bolder;
      white-space: nowrap;
      
    }

    .card-inicio-content p {
      margin: 4px 0 0;
      font-size: 16px;
      color: #555;
      margin-top: 7px;
    }

    .arrow {
      
      top: 50%;
      
      
      border: none;
      
     background-color: transparent;
     color: black;
     
     height: 2rem;
     font-size: 2rem;
      cursor: pointer;
     
    }

    .arrow-left {
      left: -10px;
    }

    .arrow-right {
    display: flex;
    justify-content: flex-end;
      right: -10px;
      float: right;
      font-weight: bold;
      width: 2.2rem;
      align-items: center;
      
    }



   
 /* Overlay oscuro */
  .cookie-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* semitransparente */
    z-index: 9998;
    display: none;
  }

  .cookie-banner {
    position: fixed;
    bottom: 0;
    
    background-color: #fff;
    padding: 20px 30px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: sans-serif;
    font-size: 14px;
  }

  .cookie-text {
    max-width: 70%;
    color: #333;
  }

  .cookie-text a {
    color: #007bff;
    text-decoration: underline;
  }

  .cookie-buttons {
    display: flex;
    gap: 10px;
  }

  .cookie-buttons button {
    padding: 10px 15px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
  }

  .cookie-buttons .accept-btn {
    background-color: #000;
    color: #fff;
  }

  .cookie-buttons button:not(.accept-btn) {
    background-color: transparent;
    border: 1px solid #ccc;
    color: #000;
  }


 @media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    text-align: left;
  }

  .cookie-text {
    max-width: 100%;
    margin-bottom: 15px;
    font-size: 13px;
  }

  .cookie-buttons {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }

  .cookie-buttons button {
    width: 100%;
    font-size: 14px;
  }
}



.por-trayecto {
   margin:0%;
    font-size: .8rem;
    font-family: sans-serif;
    font-weight: normal;
}


.precio-banner {
    margin: 0%;
    font-size: 2.5rem;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
}


.scroll-container {
      display: flex;
      overflow-x: auto;
      gap: 16px;
      padding-bottom: 10px;
      scrollbar-width: auto;
      scrollbar-color: #ccc transparent;
      
      font-family: 'Segoe UI';
      
    }

    .scroll-container h2{
        font-size: 1.3rem;
        margin: 20px 0 10px;
        padding-left: 10px;
       
    }


    .scroll-container::-webkit-scrollbar {
      height: 8px;
    }

    .scroll-container::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 4px;
    }

    .card {
      flex: 0 0 auto;
      width: 280px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .card img {
      width: 100px;
      height: 100%;
      object-fit: cover;
    }

    .card-content {
      padding: 15px;
      flex: 1;
    }

    .card-content h3 {
      margin: 0;
      font-size: 1.1rem;
    }

    .card-content p {
      margin: 5px 0 0;
      color: #555;
      font-size: 0.95rem;
    }

    .arrow {
      font-size: 1.5rem;
      margin-left: auto;
      padding: 0 10px;
      color: #333;
    }


    .informacion-interes {
        text-align: center;
        display: flex;
        justify-content: center;
        ;
    }

    .experencia {
       text-align: center;
        display: flex;
        justify-content: center;
        ;
     
    }

    .hotell {
        width: 10px;
        height: 10px;
    }

     .cardd img {
      width: 50px;
      
      object-fit: cover;
     
    }

     .cardd {
      flex: 0 0 auto;
      width: 280px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      overflow: hidden;
      display: flex;
      align-items: center;
  
    }


.lo-mejor {
font-size: 2rem;
}