h1.home-title{
    font-size:40px;
    color:#FFF;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 20px;
}

h3.home-title{
    font-size: 28px;
    color: #FFF;
    font-weight: bold;
}

div.margin-home-ico{
    margin-top:60px;
}

img.home-ico{
    height: 60px;
    float:left;
    padding-top: 6px;
}

p.home-ico-title{
    margin-bottom: 0;
    color: #FFF;
    padding-bottom: 0;
    text-align: left;
    padding-left: 80px;
}

div.search-container{
    width:100%;
    background-color: #fab300;
    height: 66px;
    margin-top:70px;
    padding: 6px;
    border:2px solid #fab300;
    border-radius: 5px;
}

div.from-to-container{
    background-color: #fff;
    width: 50%;
    height: 48px;
    float: left;
    border-radius: 5px;
}

div.hourly-container {
    width: 20%;
    height: 48px;
    float: left;
    border-radius: 5px;
}

button#main-form-button{
    background-color: #fab300;
    color:#fff;
    font-size:15px;
    font-weight: bold;
    padding: 12px 30px 12px 30px;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

button#main-form-button > i{
    margin-right: 7px;
}

div.passengers-container{
    float: left;
    width: 17%;
}

div.button-container{
    float:left;
    width: 13%;
}

div.from-container, div.to-container{
    float:left;
    width:50%;
}

div.reverse-container{
    float:left;
    width:0%;
    height: 48px;
    background-color:#FFF;
}

div.selector{
    height: 54px;
    line-height: 54px;
}

div.selector span{
    height: 54px;
    line-height: 48px;
}

div.div-passengers{
    padding: 0 15px 30px 0px;

}

span#span-for-passengers{
    background-color: #FFF;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

span#span-for-date{
    background-color: #FFF;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

span#span-for-date-go{
    background-color: #FFF;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

input#pick_up_date:focus {
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
}

input#pick_up_date{
    background-color: #FFF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.customers-review-bg{
    background-color: #f6f7f9;
    padding-bottom: 45px;
}

div.customers-review-container{
    margin-top:30px;
}

h2.how-it-works, h2.customers-review, h2.our-services{
    font-size:30px;
    font-weight: bold;
    padding-bottom: 68px;
}

h2.our-services{
    margin-top:50px;
    margin-top:30px;
}

a.view-all-reviews{
    font-size:20px;
    color:#000;
}

.mt-3{
    margin-top:30px;
}

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

.view-all-reviews-margin{
    margin-bottom:20px;
    margin-top:30px;
}

.how-it-works-number-container {
    height: 45px;
    width: 45px;
    background: #fcb300;
    border-radius: 25px;
    padding-top: 2px;
}

.how-it-works-number-container > span{
    color: #fff;
    font-size: 28px;
    margin-left: 15px;
}

div.how-it-works-text-container{
    margin-top:25px;
}

p.how-it-works-title{
    font-weight: bold;
}

div#uniform-presupuestoform-pasajeros{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.romw-badge-single__logo-text{
    color: #000 !important;
}

.romw-badge-single__rating-text, .romw-badge-single__reviews{
    color:#373f47 !important;
}

.romw-badge-single{
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.form-group > div.row{
    margin-right: 0px !important;
}

.width-90{
    margin:0 auto;
    width:90%;
}

.no-padding-one-half{
    padding:0 !important;
}

.input-group-from, .input-group-to{
    width:100%;
}

.background-custom {
    background: #000 url(../images/landing/bg.avif);
    background-size: cover;
    background-position: top;
    margin-top:80px;
    border-top: thin solid #848484;
    background-repeat: no-repeat;
    height: 540px;
}

#presupuestoform-destinoida{
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    line-height: 47px;
    padding: 0 !important;
    padding-left: 20px !important;
    border:0;
    padding-left: 15px !important;
    line-height: 48px;
    height: 48px;
}

#uniform-presupuestoform-horaida{
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
}

#uniform-presupuestoform-minutosida{
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
}

#pick_up_date{
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    line-height: 47px;
    padding: 0 !important;
    padding-left: 15px !important;
}

.input-group-addon{
    border: 1px solid #eee;
}

.field-presupuestoform-destinoida{
    margin-bottom:0px;
}

#presupuestoform-pasajeros{
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    line-height: 47px;
    padding: 0 !important;
}

.secure-payment{
    height: 30px;
    float:left;
}

.secure-text-container{
    float:left;
    margin-left:10px;
}

.secure-payment-text{
    color: #fff;
    text-decoration: underline;
    text-decoration-style: solid;
    padding-bottom: 2px;
    font-size: 12px;
    text-decoration-style: dotted;
}

.mastercard-payment{
    height: 30px;
    float: left;
    margin-left: 12px;
}

.paypal-payment{
    height: 20px;
    float: left;
    margin-left: 12px;
    margin-top: 8px;
}

.visa-payment{
    height: 18px;
    float: left;
    margin-left: 12px;
    margin-top: 7px;
}

span#reverse-route{
    font-size: 20px;
    cursor: pointer;
    color:#bcc1c5;
}

span#reverse-route > i{
    margin-top: 15px;
}

div.container-payment-secure {
    margin-top: 45px;
}

/* 09 HOME PAGE */
.home .header 			{position:fixed;text-align:center;top:0;left:0;z-index:999;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.15);-moz-box-shadow:0 1px 0 rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(0,0,0,.15);}
.home .main 				{padding:0;}
.home .advanced-search 	{margin:0;}

/*.intro 					{background:url(../images/a.jpg) 50% 0 fixed no-repeat #ffb400;overflow:hidden;float:left;width:100%;display:block;}*/
.intro 					{overflow:hidden;float:left;width:100%;display:block;height: 100vh;}
.intro .textwidget {
    bottom: 0;
    color: #fff;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 80%;
}
.intro .textwidget h1 	{text-transform:uppercase;font-size:61px;margin:0 0 -5px;}
.intro .textwidget h2 	{text-transform:uppercase;font-size:23px;margin:0;}
.intro .actions			{margin:6px 0 0;padding:46px 0 0;background:url(../images/separator.jpg) 50% 0 no-repeat;border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.intro .actions .btn		{margin:0 10px;}

.services							{float:left;width:100%;}
.services.boxed article  				{padding:0; min-height: 470px;}
.services.boxed .details						{text-align:left;padding:25px 30px;border-right:1px solid #DFDFD0;}
.services.boxed article:last-child .details 	{border:none;}
.services.boxed .details h4					{text-transform:uppercase;}
.services.boxed .details h4 a 					{color:#191F26;}

.services.iconic	{padding:68px 0 30px;}
.services.iconic h3	{text-transform:uppercase;font-size:17px;padding:0 0 10px;}

.partners 	{float:left;width:100%;padding:48px 0 30px;}
.partners h2	{text-transform:uppercase;font-size:30px;padding:0 0 40px;}

.testimonials 			{float:left;width:100%;background:url("../images/testimonials.png") no-repeat scroll 50% 100% / 100% auto rgba(0, 0, 0, 0);overflow:hidden;color:#fff;padding:90px 0 70px;}
.testimonials h6			{text-transform:uppercase;position:relative;font-size:39px;color:#fff;}
.testimonials h6:before	{content:"";width:41px;height:29px;}
.testimonials p 			{padding:0 20% 30px;font-size:16px;font-weight:500;color:#fff;}
.testimonials .meta 		{font-size:16px;}
.testimonials.white h6,
.testimonials.white p		{color:#191F26;}

.main-form {
    -webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.3);
    box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.3);
    display: inline-block;
    padding: 25px;
    position: relative;
}

.main-form .f-row{
    padding: 0;
}
.main-form label {
    display: block;
    text-align: left;
    float: left;
    padding-bottom: 0;
    padding-left: 15px;
}

.main-form label.width-100{
    width: 100%;
}

.main-form label.bg-white{
    background-color: #fff;
    line-height: 47px;
    height:47px;
}

.main-form div.selector{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.main-form input[type="search"],.main-form input[type="email"],.main-form input[type="text"],.main-form input[type="number"],.main-form input[type="password"], textarea {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.main-form #uniform-presupuestoform-pasajeros {
    margin-left: 0px;
    width: 100% !important;
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
}

.main-button-search{
    margin-top:11px;
}

ul.landing-list{
    list-style: none;
}

ul.landing-list > li {
    padding: 0;
    color: #FFF;
    font-size: 20px;
}

ul.landing-list > li::before {
    content: "";
    font-size: 30px;
    color: #DBBC94;
    position: relative;
    top: 0;
    left: 0;
}

.landing-key{
    margin-left:15px;
}

.no-padding-left{
    padding-left:0 !important;
}

.no-padding-right{
    padding-right:0 !important;
}

#uniform-origenIda{
    border-radius : 0px !important;
    -moz-border-radius : 0px !important;
    -webkit-border-radius : 0px !important;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

.input-group .twitter-typeahead:last-child .tt-input, .input-group .twitter-typeahead:last-child .tt-hint{
    height: 48px;
    border-radius: 0px;
}

.tt-menu .tt-suggestion {
    text-align: left;
}

ul.tab-booking-type > li::before {
    content: "";
}

ul.tab-booking-type{
    list-style-type: none;
    min-height:60px;
}

.booking-form-padding{
    padding: 25px;
    padding-top: 25px;
    padding-top: 0;
    display: inline-block;
}

.hourly-form{
    display: inline-block;
}

.tab-booking-type > li{
    float:left;
    width: 50%;
    padding: 15px;
    list-style-type: none;
    cursor: pointer;
    color:#FFF;
    font-size:20px;
    background-color:#1A1E27;
}

.tab-booking-type > li.selected{
    background-color:#454D62;
    text-decoration: underline;
}

.main-form.custom-main-form{
    padding: 0px;
}

.field-presupuestoform-pasajeros{
    border-radius: 5px;
}

.input-group-from{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.input-group-to {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.input-group-to > div > span.twitter-typeahead > input.form-control.tt-hint{
    border-bottom-left-radius: 0px !important;
}

@media screen and (max-width: 962px) {
    .intro {
        height: 100%;
    }
    .intro .textwidget {
        bottom: 0;
        color: #fff;
        left: 0;
        margin: 81px auto -5px;
        position: relative;
        right: 0;
        text-align: center;
        width: 100%;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .main-form{
        -webkit-border-radius:0;
        -moz-border-radius:0;
        border-radius:0;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    div.background-custom {
        height: 750px !important;
        /* El JPG pesaba 43 KB para una imagen de 360px; en AVIF son 5 KB.
           La primera linea es la reserva para navegadores sin image-set. */
        background: #0f0f0f url(../images/landing/bg_mobile.jpg);
        background-image: image-set(
            url(../images/landing/bg_mobile.avif) type("image/avif"),
            url(../images/landing/bg_mobile.webp) type("image/webp"),
            url(../images/landing/bg_mobile.jpg) type("image/jpeg"));
        background-repeat: no-repeat;
        background-size: contain;
    }

    h1.home-title {
        font-size: 23px !important;
        margin-bottom: 8px;
        margin-top:0px;
    }

    h3.home-title {
        font-size: 13px !important;
    }

    div.search-container{
        margin-top:10px;
    }

    .main-form{
        padding: 19px;
    }

    div.input-group-form-m{
        width:100% !important;
    }

    div.search-container {
        height: 232px !important;
    }

    #presupuestoform-destinoidam{
        border-radius: 0px 0px 0px 0px;
        -moz-border-radius: 0px 0px 0px 0px;
        -webkit-border-radius: 0px 0px 0px 0px;
        line-height: 47px;
        padding: 0 !important;
        padding-left: 20px !important;
        border:0;
        padding-left: 15px !important;
        line-height: 48px;
        height: 48px;
    }

    button#main-form-button-m{
        background-color: #fab300;
        color:#fff;
        font-size:15px;
        font-weight: bold;
        padding: 12px 50px 12px 50px;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
        width: 100%;
    }

    button#main-form-button-m > i{
        margin-right: 7px;
    }

    .input-group-to > div > span.twitter-typeahead > input{
        border-bottom-left-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
    }

    div.selector-from-mobile{
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .input-group-to {
        border-bottom: 1px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .input-group-to > div > span.twitter-typeahead > input{
        border-bottom-left-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
    }

    div#uniform-origenIdaM{
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    input#presupuestoform-destinoidam:focus{
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .field-presupuestoform-pasajeros{
        border: 1px solid #000;
        border-radius: 5px;
    }

    span#span-for-passengers{
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    select#presupuestoform-pasajeros{
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    div#uniform-presupuestoform-pasajeros{
        border-top-right-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
    }

    .services.iconic {
        padding: 35px 0 30px;
    }

    div.how-it-works-text-container {
        margin-top: 2px;
        float: left;
        width: calc(100% - 70px);
        margin-left: 21px;
    }

    .how-it-works-number-container {
        float: left;
    }

    img.home-ico {
        height: 35px !important;
    }

    .zopim{
        display: none !important;
    }

    div.container-payment-secure{
        margin-left:15px;
    }

    .secure-payment{
        height: 22px !important;
        width: auto;
    }

    .mastercard-payment{
        height: 18px !important;
        width: auto;
    }

    p.secure-payment-text{
        font-size: 9px !important;
    }

    .visa-payment{
        height: 18px !important;
        width: auto;
    }

    .paypal-payment{
        height: 18px !important;
        width: auto;
    }

    .margin-top-mobile{
        margin-top:20px;
    }

    .romw-badge-single{
        width: 190px !important;
    }

    .badge-element{
        padding-left:5px !important;
        padding-right:5px !important;
    }

    .romw-badge-single{
        padding: 0px !important;
    }

    .service-img{
        width: 100%;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (min-width:575.99px) and (max-width: 767.98px) {

    #uniform-origenIdaM{
        width:100% !important;
    }

    button#main-form-button-m{
        background-color: #fab300;
        color:#fff;
        font-size:15px;
        font-weight: bold;
        padding: 12px 50px 12px 50px;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
        width: 100%;
    }

    div.search-container {
        height: 232px !important;
        margin-top:20px !important;
    }

    div.selector-from-mobile > div.input-group-form-m{
        width: 100% !important;
    }

    .input-group-to > div > span.twitter-typeahead > input{
        border-bottom-left-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
    }

    div.selector-from-mobile{
        border-top: 1px solid #000;
        border-left: 1px solid black;
        border-right: 1px solid #000;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .input-group-to {
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .input-group-to > div > span.twitter-typeahead > input{
        border-bottom-left-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
    }

    div#uniform-origenIdaM{
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    h1.home-title{
        margin-top: 0 !important;
    }

    .col-xs-offset-2.col-xs-10.text-center.services-info{
        width: 33%;
        margin-left:0px;
    }

    .row.margin-home-ico-mobile.hidden-md.hidden-lg.hidden-sm{
        padding-left: 15px;
        padding-right: 15px;
    }

    div.info-payment{
        margin-left:5px;
    }

    .badge-element{
        width:25% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .romw-badge-single{
        padding: 0px !important;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    div.background-custom{
        height: 575px;
    }

    div.container-tablet{
        width:100% !important;
    }

    h1.home-title {
        font-size: 27px;
        margin-bottom: 8px;
    }

    h3.home-title{
        font-size: 19px;
    }

    img.home-ico {
        height: 40px;
    }

    p.home-ico-title {
        padding-left: 55px;
        font-size: 11px;
    }

    p.how-it-works-content{
        font-size: 15px;
    }

    div.search-container{
        height: 123px;
    }

    div.from-to-container{
        width: 100% !important;
    }

    div.passengers-container{
        width:50% !important;
        margin-top:10px;
    }

    div.div-passengers {
        padding: 0;
        margin-bottom: 0;
    }

    div.button-container {
        width: 50% !important;
        margin-top: 10px;
    }

    button#main-form-button{
        width:100% !important;
    }

    div.info-payment{
        margin-top:20px;
    }
}

/* Fot tablets landscape */
@media (max-width: 1024.98px) {

    div.container-tablet{
        margin-top:30px;
        width:100% !important;
    }

    h1.home-title {
        font-size: 31px;
        margin-bottom: 8px;
    }

    h3.home-title{
        font-size: 16px;
    }

    div.margin-home-ico {
        margin-top: 40px;
    }

    div.from-to-container {
        width: 62%;
    }

    div.passengers-container {
        float: left;
        width: 20%;
    }

    div.button-container {
        float: left;
        width: 18%;
    }

    button#main-form-button{
        padding: 12px 30px 12px 30px;
    }

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}

/* Keep search form in a single row on large widths */
@media (min-width: 1200px) {
    .width-90 .search-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        min-height: 66px;
        gap: 10px;
    }

    .width-90 .search-container .from-to-container,
    .width-90 .search-container .hourly-container,
    .width-90 .search-container .passengers-container,
    .width-90 .search-container .button-container {
        float: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .width-90 .search-container .from-to-container { flex: 0 0 50% !important; }
    .width-90 .search-container .hourly-container { flex: 0 0 20% !important; }
    .width-90 .search-container .passengers-container {
        flex: 0 0 17% !important;
        min-width: 0 !important;
    }
    .width-90 .search-container .button-container {
        flex: 0 0 13% !important;
        min-width: 0 !important;
    }

    .width-90 .search-container #main-form-button {
        width: 100% !important;
        min-height: 48px;
    }
}

/* ------------------------------------------------------------------------- */
/* Home search form responsive fixes                                         */
/* ------------------------------------------------------------------------- */

.width-90 .search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    height: auto;
    min-height: 66px;
}

.width-90 .search-container .from-to-container,
.width-90 .search-container .hourly-container,
.width-90 .search-container .passengers-container,
.width-90 .search-container .button-container {
    float: none;
    margin: 0;
}

.width-90 .search-container .from-to-container {
    flex: 0 0 50%;
    min-height: 48px;
}

.width-90 .search-container .hourly-container {
    flex: 0 0 20%;
    min-height: 48px;
}

.width-90 .search-container .passengers-container {
    flex: 1 1 16%;
    min-width: 170px;
}

.width-90 .search-container .button-container {
    flex: 0 0 13%;
    min-width: 150px;
}

.width-90 .search-container .form-group,
.width-90 .search-container .div-passengers,
.width-90 .search-container .div-date,
.width-90 .search-container [class*="field-presupuestoform-"] {
    margin: 0;
    padding: 0;
}

.width-90 .search-container .input-group,
.width-90 .search-container .selector,
.width-90 .search-container .twitter-typeahead,
.width-90 .search-container #uniform-presupuestoform-pasajeros {
    width: 100% !important;
}

.width-90 .search-container #main-form-button {
    width: 100%;
    min-height: 48px;
}

@media (max-width: 1199.98px) {
    .width-90 .search-container .from-to-container {
        flex: 0 0 100%;
    }

    .width-90 .search-container .hourly-container,
    .width-90 .search-container .passengers-container,
    .width-90 .search-container .button-container {
        flex: 1 1 calc(33.333% - 7px);
        min-width: 180px;
    }
}

@media (max-width: 991.98px) {
    .width-90 .search-container {
        gap: 12px;
    }

    .width-90 .search-container .hourly-container,
    .width-90 .search-container .passengers-container,
    .width-90 .search-container .button-container {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .main-form .search-container {
        height: auto !important;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .main-form .search-container .f-row,
    .main-form .search-container .form-group {
        margin: 0;
        padding: 0;
    }

    .main-form .search-container .div-passengers {
        margin: 0;
    }

    .main-form .search-container #main-form-button-m {
        width: 100%;
        min-height: 48px;
    }
}
/* Boton circular para invertir origen y destino
   El selector se queda siempre a la izquierda (arriba en movil): al invertir solo
   cambian los textos y el nombre de los parametros del POST. */
div.reverse-container.reverse-container--enabled{
    position: relative;
    background-color: transparent;
    overflow: visible;
    z-index: 3;
}

div.reverse-container-mobile{
    position: absolute;
    right: 14px;
    bottom: 0;
    z-index: 3;
}

button.reverse-route-btn{
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #e2e5e8;
    border-radius: 50%;
    background-color: #fff;
    color: #6f7f8f;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: transform .25s ease, color .2s ease, border-color .2s ease;
    z-index: 1;
}

button.reverse-route-btn > i{
    margin: 0;
    vertical-align: middle;
}

div.reverse-container.reverse-container--enabled > button.reverse-route-btn{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: white;
}

div.reverse-container-mobile > button.reverse-route-btn{
    transform: translateY(50%);
}

button.reverse-route-btn:hover,
button.reverse-route-btn:focus{
    color: #fab300;
    border-color: #fab300;
    outline: none;
}

div.reverse-container.reverse-container--enabled > button.reverse-route-btn.is-reversed{
    transform: translate(-50%, -50%) rotate(180deg);
}

div.reverse-container-mobile > button.reverse-route-btn.is-reversed{
    transform: translateY(50%) rotate(180deg);
}

button.reverse-route-btn.is-reversed{
    color: #fab300;
    border-color: #fab300;
}

div.selector-from-mobile{
    position: relative;
}

/* Etiqueta flotante sobre origen y destino
   Los campos no cambian de sitio al invertir la ruta, asi que la etiqueta es la que
   dice en todo momento cual de los dos es el origen y cual el destino. */
.has-float-label{
    position: relative;
}

.has-float-label > span.float-label{
    position: absolute;
    top: 7px;
    left: 16px;
    z-index: 4;
    color: #97a1ab;
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    pointer-events: none;
}

/* Bajamos el valor de cada campo para dejar sitio a la etiqueta, sin tocar los 48px */
.has-float-label div.selector > span{
    box-sizing: border-box;
    height: 48px;
    padding-top: 18px;
    line-height: 30px;
}

#presupuestoform-destinoida,
#presupuestoform-destinoidam,
.has-float-label .input-group-to input.form-control.tt-hint{
    box-sizing: border-box;
    height: 48px;
    padding-top: 18px !important;
    padding-bottom: 0 !important;
    padding-left: 15px !important;
    line-height: 30px !important;
}

/* Hueco para que el circulo de invertir no pise el texto de los campos */
div.to-container.has-float-label > span.float-label{
    left: 34px;
}

div.to-container.has-float-label #presupuestoform-destinoida,
div.to-container.has-float-label input.form-control.tt-hint{
    padding-left: 34px !important;
}

.form-mobile div.selector > span,
.form-mobile .input-group-to input.form-control{
    padding-right: 52px !important;
}

.form-mobile #presupuestoform-destinoidam,
.form-mobile .input-group-to input.form-control.tt-hint{
    padding-right: 52px !important;
}

/* En movil los dos campos van apilados, asi que la flecha apunta arriba/abajo */
#reverse-route-mobile > i{
    display: inline-block;
    transform: rotate(90deg);
}


/* ============================================================================
   REDISEÑO DE LA PORTADA
   ----------------------------------------------------------------------------
   Lenguaje oscuro y de alto contraste, que es el que usa hoy el traslado
   privado (Blacklane, Welcome Pickups) y el que mejor le sienta a la foto de
   cabecera. Tipografía fluida con clamp(), bordes de 1px en lugar de sombras
   pesadas y un ritmo vertical constante.

   Todo lo de aquí abajo pisa a propósito reglas antiguas de este mismo fichero;
   por eso va al final y con selectores algo más específicos de lo habitual: el
   style.css global se carga después y hay que ganarle por especificidad, no por
   orden.
   ========================================================================== */

:root {
    --tv-negro: #0f1216;
    --tv-negro-suave: #171c22;
    --tv-linea: rgba(255, 255, 255, .12);
    --tv-amarillo: #fab300;
    --tv-texto: #3d4650;
    --tv-texto-suave: #6b7681;
    --tv-fondo-suave: #f5f7f9;
}

/* ------------------------------------------------------------------ cabecera */

.background-custom {
    position: relative;
    height: auto !important;
    min-height: clamp(560px, 78vh, 760px);
    display: flex;
    align-items: center;
    background-color: var(--tv-negro);
    background-position: center center;
    background-size: cover;
    margin-top: 80px;
}

/* Velo: la foto sola no da contraste suficiente para texto blanco, y sin un
   punto de anclaje oscuro el titular grande se lee mal en la mitad izquierda. */
.background-custom::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(15, 18, 22, .93) 0%, rgba(15, 18, 22, .78) 42%, rgba(15, 18, 22, .35) 100%),
        linear-gradient(180deg, rgba(15, 18, 22, .55) 0%, rgba(15, 18, 22, 0) 30%);
}

.background-custom > * {
    position: relative;
    z-index: 1;
}

.width-90 {
    width: min(1240px, 92%);
    margin: 0 auto;
}

/* ------------------------------------------------------------------- titular */

h1.home-title {
    max-width: 15em;
    margin: 0 0 18px;
    color: #fff;
    /* Fluido: 34px en móvil, hasta 68px en pantallas grandes. */
    font-size: clamp(2.125rem, 1.25rem + 3.6vw, 4.25rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -1.5px;
    text-shadow: none;
}

h3.home-title {
    max-width: 30em;
    margin: 0 0 30px;
    color: rgba(255, 255, 255, .74);
    font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
    font-weight: 400;
    line-height: 1.5;
    text-shadow: none;
}

/* Antetítulo: una línea corta en amarillo que ancla la marca antes del H1. */
.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: var(--tv-amarillo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.home-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--tv-amarillo);
}

/* ------------------------------------------------------------------ buscador */

div.search-container {
    height: auto;
    margin-top: 0;
    padding: 10px;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid var(--tv-linea);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    backdrop-filter: blur(14px);
}

button#main-form-button,
button#main-form-button-m {
    background-color: var(--tv-amarillo);
    color: var(--tv-negro);
    border: 0;
    border-radius: 10px;
    /* El boton pedia Open Sans, que no se carga en el sitio, asi que caia
       en Arial. Montserrat ya viene descargada y es la de los titulos. */
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    /* Solo hay 400 y 700 descargados: pedir 800 obliga al navegador a
       engordarla el mismo y sale sucia. */
    font-weight: 700;
    letter-spacing: .1px;
    /* style.css pone en mayusculas todos los <button>. */
    text-transform: none;
    box-shadow: 0 6px 18px rgba(250, 179, 0, .28);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

button#main-form-button > i,
button#main-form-button-m > i {
    margin-right: 9px;
    font-size: 15px;
}

button#main-form-button:hover,
button#main-form-button-m:hover {
    background-color: #ffc426;
    box-shadow: 0 10px 26px rgba(250, 179, 0, .38);
    transform: translateY(-2px);
}

button#main-form-button:active,
button#main-form-button-m:active {
    box-shadow: 0 4px 12px rgba(250, 179, 0, .3);
    transform: translateY(0);
}

/* Los campos van sobre el cristal, así que sus esquinas se redondean por dentro. */
div.from-to-container {
    border-radius: 12px;
}

.input-group-from {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.input-group-to {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* --------------------------------------------------------------- garantías */

.home-trust {
    display: flex;
    flex-wrap: wrap;
    /* Las tres se estiran a la altura de la mayor. Con las tres llenas -logos,
       telefono y WhatsApp, condiciones de cancelacion- la holgura es de 7px, no
       los 65 que dejaba cuando solo la de pago tenia contenido debajo. */
    align-items: stretch;
    gap: 10px 14px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.home-trust > li::before {
    content: none;
}

/* Las tres reparten el ancho a partes iguales; si cada una se queda con el
   suyo quedan de distinto tamaño y sobra hueco al final de la fila.

   Van sobre un cristal oscuro, el mismo lenguaje que el buscador de arriba:
   el texto blanco suelto sobre la foto se leia mal segun por donde cayera. */
.home-trust > li.home-trust-item {
    position: static;
    display: flex;
    flex: 1 1 0;
    align-items: stretch;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    background: rgba(12, 15, 19, .55);
    border: 1px solid var(--tv-linea);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Sin desenfoque el fondo translucido deja pasar la foto y el texto vuelve a
   perderse: ahi va opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .home-trust > li.home-trust-item {
        background: #12161b;
    }
}

.home-trust-item > picture {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}

/* Eran tres imagenes de trazo blanco de origenes distintos -dos de 900px con
   variante de 120 y una de solo 54, que a 30px en pantalla densa se quedaba
   corta-. Ahora son iconos de la fuente, que ya se carga: mismo trazo en los
   tres, nitidos a cualquier densidad y sin peticiones. */
.home-trust-ico {
    display: flex;
    flex: 0 0 auto;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    /* Sobre la foto del hero un icono suelto se pierde; la pastilla le da
       un fondo propio y lo separa del fondo. */
    background: rgba(250, 179, 0, .14);
    border-radius: 50%;
    color: #fab300;
    float: none;
    font-size: 15px;
}

/* Sin esto se queda con el ancho de su contenido y no con el de la celda, y
   los subtitulos se parten en dos lineas sin necesidad. En columna y a toda
   la altura para poder pegar al fondo lo que va debajo del subtitulo. */
.home-trust-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.home-trust-title {
    margin: 0 0 1px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.1px;
    line-height: 1.3;
}

.home-trust-text {
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: 12.5px;
    line-height: 1.35;
}

/* Logos, accesos y condiciones se pegan al fondo de su tarjeta: de lo
   contrario los logos, que ocupan menos, quedaban flotando 27px por encima
   de donde terminaban los de al lado. */
.home-trust-pago,
.home-trust-notas,
.home-trust-contacto {
    margin-top: auto;
    padding-top: 12px;
}

/* Accesos directos de la garantia de atencion al cliente. Mismo tratamiento
   que los logos de pago: la promesa y la forma de cumplirla, juntas. */
/* Las notas de la cancelacion comparten rejilla con los accesos de atencion:
   asi las dos tarjetas tienen el mismo cuerpo y la fila queda pareja. */
.home-trust-notas,
.home-trust-contacto {
    /* Rejilla y no flex para que los dos midan lo mismo: con flex cada uno
       se quedaba con el ancho de su texto y el del telefono salia mas largo.
       Si no caben dos columnas de 138px, pasan a una y siguen iguales. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 8px;
}

.home-trust-notas > span,
.home-trust-contacto a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 6px 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--tv-linea);
    border-radius: 100px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease;
}

.home-trust-contacto a:hover,
.home-trust-contacto a:focus-visible {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    text-decoration: none;
}

.home-trust-notas > span {
    cursor: default;
}

.home-trust-notas i {
    color: #fab300;
}

.home-trust-contacto .fa-phone {
    color: #fab300;
}

.home-trust-contacto .fa-whatsapp {
    color: #25d366;
    font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
    .home-trust-contacto a {
        transition: none;
    }
}

/* ------------------------------------------------------------- pago seguro

   Las tarjetas viven dentro de la celda de pago de las garantias, no en una
   franja aparte: antes eran dos filas seguidas diciendo lo mismo. */

.home-trust-pago {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

/* El sello son dos claves de traduccion sueltas y se leia partido en dos
   lineas: "Pago" arriba y "seguro" debajo. */
.home-trust-pago .secure-text-container {
    display: flex;
    gap: 4px;
    margin-left: 0;
    padding-right: 4px;
}


div.container-payment-secure {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--tv-linea);
}

.secure-payment,
.mastercard-payment,
.visa-payment,
.paypal-payment {
    float: none;
    margin: 0;
}

.secure-payment {
    width: auto;
    height: 26px;
}

/* El margen automatico empujaba las tarjetas al extremo derecho y dejaba un
   vacio de casi 900px en medio. Todo el sello va junto, a la izquierda.

   El margin-left de la epoca de los float sumaba al gap y separaba el texto
   de su propio candado mas que las tarjetas entre si. El aire va detras, que
   es donde separa dos cosas distintas. */
.secure-text-container {
    margin-left: 0;
    padding-right: 10px;
}

p.secure-payment-text {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 12.5px;
    line-height: 1.35;
}

.mastercard-payment,
.visa-payment,
.paypal-payment {
    /* Cada logo traia su propio alto (30, 18 y 20px) y la fila salia
       irregular. Se igualan por altura y el ancho lo pone la proporcion. */
    width: auto;
    height: 22px;
    opacity: .85;
}

/* ------------------------------------------------------- prueba social */

.home-rating {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 26px;
    padding: 9px 16px 9px 13px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--tv-linea);
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}

.home-rating:hover,
.home-rating:focus {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(250, 179, 0, .55);
    color: #fff;
    text-decoration: none;
}

.home-rating-stars {
    color: var(--tv-amarillo);
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1;
}

.home-rating-score {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.home-rating-text {
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
    line-height: 1.2;
}

/* ---------------------------------------------------- cómo funciona */

.services.iconic.white {
    padding: clamp(56px, 7vw, 96px) 0;
    background: var(--tv-fondo-suave);
}

h2.how-it-works,
h2.customers-review,
h2.our-services {
    margin: 0 0 clamp(28px, 4vw, 48px);
    color: var(--tv-negro);
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.8px;
}

.services.iconic .row + .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.services.iconic .row + .row > div {
    width: auto;
    float: none;
    padding: 30px 28px;
    background: #fff;
    border: 1px solid #e6eaee;
    border-radius: 16px;
}

/* El número deja de ser un círculo pequeño y pasa a ser el ancla visual. */
.how-it-works-number-container {
    margin-bottom: 14px;
}

.how-it-works-number-container span {
    display: block;
    width: auto;
    height: auto;
    background: none;
    color: var(--tv-amarillo);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
}

p.how-it-works-title {
    margin: 0 0 8px;
    color: var(--tv-negro);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

p.how-it-works-content {
    margin: 0;
    color: var(--tv-texto-suave);
    font-size: 15px;
    line-height: 1.6;
}

/* -------------------------------------------------------- servicios */

/* --------------------------------------------------------- servicios */

.servicios {
    /* Antes el titulo colgaba de un .wrap > .container con utilidades de
       Bootstrap y las tarjetas colgaban de la seccion: quedaban desalineados
       65px y sobraba hueco entre uno y otras. Ahora comparten contenedor. */
    padding: clamp(48px, 5.5vw, 78px) 0;
    background: #fff;
}

.servicios-cabecera {
    margin-bottom: clamp(24px, 3vw, 34px);
}

.servicios-kicker {
    margin: 0 0 8px;
    color: var(--tv-amarillo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.servicios .our-services {
    /* El tema le mete un padding-bottom de 68px que era la mayor parte del
       hueco que sobraba entre el titulo y las tarjetas. */
    margin: 0;
    padding: 0;
}

.servicios-rejilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* style.css decora todo li con vineta y sangria. */
.servicios-rejilla > li::before {
    content: none;
}

.servicios-rejilla > li {
    position: static;
    padding: 0;
}

.servicio {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6eaee;
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.servicio:hover,
.servicio:focus-visible {
    transform: translateY(-4px);
    border-color: #d7dde3;
    box-shadow: 0 14px 30px rgba(15, 18, 22, .1);
    color: inherit;
    text-decoration: none;
}

.servicio-foto {
    display: block;
    /* Reserva el hueco: sin esto la rejilla salta al cargar las fotos. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e6eaee;
}

.servicio-foto picture,
.servicio-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.servicio:hover .servicio-foto img {
    transform: scale(1.05);
}

.servicio-cuerpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px 20px 20px;
}

.servicio-titulo {
    display: block;
    margin-bottom: 8px;
    color: var(--tv-negro);
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.servicio-texto {
    display: block;
    flex: 1 1 auto;
    margin-bottom: 14px;
    color: var(--tv-texto-suave);
    font-size: 14.5px;
    line-height: 1.6;
}

.servicio-mas {
    display: block;
    color: var(--tv-negro);
    font-size: 14px;
    font-weight: 700;
}

.servicio-mas > i {
    margin-left: 6px;
    color: var(--tv-amarillo);
    transition: transform .2s ease;
}

.servicio:hover .servicio-mas > i {
    transform: translateX(4px);
}

@media (max-width: 991.98px) {
    .servicios-rejilla {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .servicios-rejilla {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .servicio,
    .servicio-foto img,
    .servicio-mas > i {
        transition: none;
    }
}
/* --------------------------------------------------------- opiniones */

.customers-review-bg {
    padding: clamp(56px, 7vw, 96px) 0;
    background: var(--tv-negro);
}

.customers-review-bg h2.customers-review {
    color: #fff;
}

.customers-review-bg .view-all-reviews {
    color: var(--tv-amarillo);
    font-weight: 700;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
    .services.iconic .row + .row,
    .services.boxed .row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .background-custom {
        min-height: 0;
        padding: 40px 0 44px;
    }

    .background-custom::before {
        background: linear-gradient(180deg, rgba(15, 18, 22, .82) 0%, rgba(15, 18, 22, .93) 60%);
    }

    .home-trust {
        gap: 12px 20px;
    }
}

@media (max-width: 575.98px) {
    .services.iconic .row + .row,
    .services.boxed .row {
        grid-template-columns: 1fr;
    }

    .home-trust > li.home-trust-item {
        /* Con flex-basis a 0 el width no manda, y las tres se apretaban en
           una sola fila de columnas estrechisimas. */
        flex: 1 1 100%;
        width: 100%;
    }

    div.container-payment-secure {
        gap: 8px;
    }
}

/* --------------------------------------------------------------- correcciones

   El style.css global pone html a 62.5%, de modo que 1rem son 10px y no 16.
   Las medidas fluidas pasan a px, que no dependen de esa raíz. */

h1.home-title {
    font-size: clamp(34px, 20px + 3.4vw, 66px);
}

h3.home-title {
    font-size: clamp(16px, 14px + .45vw, 20px);
}

h2.how-it-works,
h2.customers-review,
h2.our-services {
    font-size: clamp(26px, 18px + 1.8vw, 40px);
}

.services.iconic.white,
.services.boxed.white,
.customers-review-bg {
    padding: clamp(56px, 7vw, 96px) 0;
}

.background-custom {
    min-height: clamp(560px, 78vh, 760px);
}

/* El .container heredado centra el texto; en la cabecera va alineado a la
   izquierda, que es donde estaba antes con las clases .text-left del marcado. */
.background-custom .container,
.background-custom .container-tablet,
.main-form {
    text-align: left;
}

/* La fila de las cuatro tarjetas de servicios cuelga directamente de la sección,
   fuera del .container; el selector anterior cogía también la fila del titular. */
.services.boxed .row {
    display: block;
    grid-template-columns: none;
}

.services.boxed > .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    width: min(1240px, 92%);
    margin: 0 auto;
}

@media (max-width: 991.98px) {
    .services.boxed > .row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .services.boxed > .row {
        grid-template-columns: 1fr;
    }
}

/* Bootstrap añade .row::before y .row::after como clearfix. Al convertir esas
   filas en rejilla, los pseudoelementos pasan a ser celdas y empujaban las
   tarjetas: la primera arrancaba en la segunda columna y la última se caía a
   una fila nueva. */
.services.iconic .row + .row::before,
.services.iconic .row + .row::after,
.services.boxed > .row::before,
.services.boxed > .row::after {
    content: none;
}

/* --------------------------------------------------- correcciones en móvil

   La cabecera es flex para centrar su contenido, pero sus hijos directos son
   varios (el bloque de escritorio, el móvil y la lista de garantías): en fila
   se repartían el ancho y las garantías salían como una columna estrecha. En
   columna se apilan y ocupan todo el ancho, que es lo que toca. */
.background-custom {
    flex-direction: column;
    justify-content: center;
}

/* La lista de garantías de móvil cuelga de la cabecera, que no tiene relleno
   lateral, y llegaba a tocar el borde de la pantalla. */
.home-trust--mobile {
    padding: 0 19px;
}

/* La regla antigua del titular en móvil lleva !important y no hay forma de
   ganarle por especificidad. */
@media (max-width: 575.98px) {
    h1.home-title {
        font-size: clamp(30px, 22px + 2.2vw, 38px) !important;
        margin-bottom: 14px;
    }

    h3.home-title {
        margin-bottom: 22px;
    }

    .home-rating {
        margin-bottom: 22px;
    }
}

@media (max-width: 767.98px) {
    /* La cabecera tenía alto fijo (750px con !important y selector div.…), y con
       el contenido nuevo el contenido se salía por arriba al centrarlo. Que
       crezca con lo que lleva dentro. */
    div.background-custom {
        height: auto !important;
        min-height: 0;
        justify-content: flex-start;
        padding: 34px 0 40px;
        background-size: cover;
        background-position: center center;
    }
}

/* ------------------------------------------------- ajustes de la cabecera

   Titular en una sola línea en escritorio. El texto en español mide unas 23
   veces el tamaño de fuente ("Reserva tu taxi para el aeropuerto de Valencia":
   1519px a 66px), y el contenedor son 1170px a 1440: de ahí el tope de 52px y
   el 3.5vw, que mantiene la línea única desde ~1100px de ancho hacia arriba.
   Por debajo parte en dos, que es lo razonable. */
h1.home-title {
    max-width: none;
    font-size: clamp(30px, 3.5vw, 52px);
    letter-spacing: -1.2px;
}

h3.home-title {
    max-width: none;
    white-space: normal;
}

/* Velo más suave: el anterior dejaba la foto casi negra. Se mantiene la carga
   en la mitad izquierda, que es donde va el texto, y se levanta a la derecha
   para que la imagen se vea. */
.background-custom::before {
    background:
        linear-gradient(100deg, rgba(15, 18, 22, .82) 0%, rgba(15, 18, 22, .58) 45%, rgba(15, 18, 22, .12) 100%),
        linear-gradient(180deg, rgba(15, 18, 22, .45) 0%, rgba(15, 18, 22, 0) 26%);
}

@media (max-width: 767.98px) {
    /* En móvil el texto va sobre toda la foto, así que el velo es parejo. */
    .background-custom::before {
        background: linear-gradient(180deg, rgba(15, 18, 22, .74) 0%, rgba(15, 18, 22, .88) 62%);
    }
}

/* El contenedor de Bootstrap se queda fijo en 1140px útiles a partir de 1200px
   de ancho, así que el tope no puede pasar de 1140/23 ≈ 49px si el titular ha
   de caber en una línea. */
h1.home-title {
    font-size: clamp(30px, 3.3vw, 49px);
}

/* ============================================================ buscador y calendario

   Las reglas de la rejilla de arriba las pisaba `.width-90 .search-container`
   (dos clases), así que aquí se sube la especificidad en lugar de confiar en el
   orden. Objetivo: una sola pieza, con radios coherentes y todos los campos a
   la misma altura. */

.width-90 .search-container,
.main-form .search-container {
    height: auto;
    padding: 8px;
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid var(--tv-linea);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    backdrop-filter: blur(14px);
    gap: 8px;
}

/* Altura única para los cuatro bloques del buscador. */
.width-90 .search-container .from-to-container,
.width-90 .search-container .hourly-container,
.width-90 .search-container .passengers-container,
.width-90 .search-container .button-container,
.width-90 .search-container .div-date,
.width-90 .search-container .div-passengers {
    height: 52px;
    margin: 0;
    padding: 0;
}

.width-90 .search-container .hourly-container .input-group,
.width-90 .search-container .passengers-container .input-group {
    height: 52px;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
}

/* El de origen y destino va sin recorte: de el cuelga la lista de sugerencias
   del autocompletado, y con overflow:hidden se quedaba cortada a cero. No hace
   falta recortar nada porque los campos de dentro son transparentes: el fondo
   blanco y las esquinas los pone este mismo bloque. */
.width-90 .search-container .from-to-container {
    height: 52px;
    background: #fff;
    border-radius: 10px;
}

/* Los campos de dentro pierden su radio: lo pone el bloque que los envuelve. */
.width-90 .search-container .input-group-from,
.width-90 .search-container .input-group-to,
.width-90 .search-container .input-group-addon,
.width-90 .search-container .selector,
.width-90 .search-container #uniform-origenIda {
    border-radius: 0;
}

.width-90 .search-container .input-group-addon {
    background: #fff;
    border: 0;
    color: var(--tv-texto-suave);
}

.width-90 .search-container #presupuestoform-destinoida,
.width-90 .search-container .input-group-to input.form-control,
.width-90 .search-container .selector > span,
.width-90 .search-container #pick_up_date,
.width-90 .search-container select {
    height: 52px;
}

.width-90 .search-container .selector > span,
.width-90 .search-container #uniform-origenIda,
.width-90 .search-container #origenIda {
    height: 52px;
    line-height: 52px;
}

.width-90 .search-container #pick_up_date {
    border: 0;
    background: #fff;
}

.width-90 .search-container button#main-form-button {
    width: 100%;
    height: 52px;
    padding: 0 22px;
    border-radius: 10px;
}

/* Separador fino entre origen y destino, en vez del corte seco de antes. */
.width-90 .search-container .reverse-container.reverse-container--enabled::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 1px;
    background: #e6eaee;
}


/* flatpickr sustituye el input de fecha por un clon (.flatpickr-alt-input) sin
   id, así que las reglas escritas contra #pick_up_date no le llegaban y el campo
   se quedaba en 48 mientras el resto ya iba a 52. Solo se toca la altura del
   propio input y la del icono: poner también line-height en los contenedores
   sumaba y disparaba el bloque a 66. */
.width-90 .search-container .flatpickr-alt-input {
    height: 52px;
    line-height: 52px;
}

.width-90 .search-container #span-for-date-go {
    height: 52px;
}

/* ============================================== nueva foto de cabecera

   Ciudad de las Artes y las Ciencias: identifica Valencia de un vistazo y es
   luminosa, al contrario que el montaje en blanco y negro anterior.

   El edificio es casi blanco, así que el velo de la izquierda tiene que ser
   firme para que el titular en blanco mantenga contraste; a la derecha se
   levanta y la foto se ve. */
.background-custom {
    background-color: #0f1216;
    background-image: url(../images/landing/hero-valencia.jpg);
    background-image: image-set(
        url(../images/landing/hero-valencia-1920.avif) type("image/avif"),
        url(../images/landing/hero-valencia-1920.webp) type("image/webp"),
        url(../images/landing/hero-valencia.jpg) type("image/jpeg"));
    background-position: center 42%;
    background-size: cover;
    background-repeat: no-repeat;
}

.background-custom::before {
    background:
        linear-gradient(100deg, rgba(12, 16, 20, .88) 0%, rgba(12, 16, 20, .62) 46%, rgba(12, 16, 20, .16) 100%),
        linear-gradient(180deg, rgba(12, 16, 20, .5) 0%, rgba(12, 16, 20, 0) 28%);
}

@media (max-width: 767.98px) {
    div.background-custom {
        background-image: url(../images/landing/hero-valencia-mobile.jpg);
        background-image: image-set(
            url(../images/landing/hero-valencia-mobile-780.avif) type("image/avif"),
            url(../images/landing/hero-valencia-mobile-780.webp) type("image/webp"),
            url(../images/landing/hero-valencia-mobile.jpg) type("image/jpeg"));
        background-position: center 32%;
    }

    .background-custom::before {
        background: linear-gradient(180deg, rgba(12, 16, 20, .72) 0%, rgba(12, 16, 20, .9) 62%);
    }
}

/* -------------------------------------- selector de origen

   El plugin uniform envuelve el select en div.selector y style.css le dibuja un
   borde beige (#DFDFD0) que dentro del campo blanco se veía como una raya
   suelta alrededor de las opciones. Y el texto solo tenía 30px hasta la flecha,
   así que las opciones largas quedaban pegadas a ella. */
.search-container div.selector,
.search-container #uniform-origenIda,
.search-container #uniform-origenIdaM {
    border: 0;
    background: transparent;
}

.search-container div.selector > span {
    padding-right: 46px;
}

/* ================================================ selects nativos del buscador

   Se sacan del plugin uniform (clase skip-uniform, que scripts.js ya respeta).
   uniform montaba un div falso con el texto y encima un <select> transparente:
   dos capas que había que mantener sincronizadas y de donde salían el borde
   beige y el texto pegado a la flecha. Con el select nativo hay una sola caja,
   y la flecha es un SVG en el fondo. */

.search-container .tv-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 18px 42px 0 15px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7681' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 28px center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #191f26;
    font-size: 15px;
    font-weight: 500;
    line-height: 30px;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* El de pasajeros no lleva etiqueta flotante encima: el valor va centrado. */
.search-container .passengers-container .tv-select,
.main-form .div-passengers .tv-select {
    padding-top: 0;
    line-height: 52px;
}

.search-container .tv-select option {
    color: #191f26;
    font-weight: 500;
}

/* Sin uniform ya no hay div.selector; el hueco de la etiqueta flotante lo
   reserva el propio padding del select. */
.has-float-label .tv-select {
    box-sizing: border-box;
}

/* El icono de pasajeros comparte caja con su select. */
.search-container #span-for-passengers {
    background: #fff;
    border: 0;
}

/* Una regla antigua deja #presupuestoform-pasajeros con padding 0 !important, y
   el número quedaba pegado al icono. Se iguala con id + clase. */
.search-container select#presupuestoform-pasajeros.tv-select {
    padding: 0 42px 0 12px !important;
    line-height: 52px;
}

/* ==================================================== ajuste fino del buscador

   1. Etiqueta y valor iban pegados: la etiqueta ocupaba hasta los 19px y el
      valor arrancaba en 18. Se separan dándole a la etiqueta la parte de
      arriba y al valor un arranque en 22 con línea de 24.
   2. Fuera el amarillo del hover y del foco: dentro de un campo blanco chirría
      y compite con el botón de buscar, que es el que debe llevar ese color.
      Se sustituye por un anillo gris oscuro, que sigue marcando el foco para
      quien navega con teclado. */

.has-float-label > span.float-label {
    top: 9px;
    font-size: 10px;
    line-height: 11px;
}

.search-container .tv-select,
.search-container #presupuestoform-destinoida,
.search-container #presupuestoform-destinoidam,
.search-container .input-group-to input.form-control {
    padding-top: 22px !important;
    padding-bottom: 0 !important;
    line-height: 24px !important;
}

/* Fecha y pasajeros no llevan etiqueta encima: su valor va centrado. */
.search-container select#presupuestoform-pasajeros.tv-select,
.search-container .flatpickr-alt-input {
    line-height: 52px !important;
}


button.reverse-route-btn:hover,
button.reverse-route-btn:focus {
    color: #191f26;
    border-color: #b9c0c7;
    background-color: #f3f5f7;
    outline: none;
}

button.reverse-route-btn.is-reversed {
    color: #191f26;
    border-color: #b9c0c7;
}

/* ================================================ cabecera: Mercedes V-Class

   Se cambia la Ciudad de las Artes por la foto de estudio del V-Class con la
   matrícula de Transfers Valencia: dice a qué se dedica la empresa en vez de
   dónde está, que es lo que se pedía.

   La foto ya es negra en la mitad izquierda, justo donde va el titular, así
   que el velo baja a un apoyo mínimo: con el anterior (0,88 a la izquierda) el
   coche se apagaba. Pesa además una cuarta parte, porque casi todo es negro
   plano: 15 KB en AVIF a 1920 frente a 89. */
.background-custom {
    background-image: url(../images/landing/hero-vip.jpg);
    background-image: image-set(
        url(../images/landing/hero-vip-1920.avif) type("image/avif"),
        url(../images/landing/hero-vip-1920.webp) type("image/webp"),
        url(../images/landing/hero-vip.jpg) type("image/jpeg"));
    background-position: center center;
}

.background-custom::before {
    background:
        linear-gradient(100deg, rgba(10, 13, 17, .72) 0%, rgba(10, 13, 17, .34) 46%, rgba(10, 13, 17, 0) 72%),
        linear-gradient(180deg, rgba(10, 13, 17, .4) 0%, rgba(10, 13, 17, 0) 24%);
}

@media (max-width: 767.98px) {
    div.background-custom {
        background-image: url(../images/landing/hero-vip-mobile.jpg);
        background-image: image-set(
            url(../images/landing/hero-vip-mobile-780.avif) type("image/avif"),
            url(../images/landing/hero-vip-mobile-780.webp) type("image/webp"),
            url(../images/landing/hero-vip-mobile.jpg) type("image/jpeg"));
        background-position: center top;
    }

    /* En móvil el texto cae sobre la parte alta, que ya es negra. */
    .background-custom::before {
        background: linear-gradient(180deg, rgba(10, 13, 17, .55) 0%, rgba(10, 13, 17, .8) 58%);
    }
}

/* ==================================== cabecera: V-Class ante la Ciudad de las Artes

   Foto aportada por el cliente: el Mercedes con su matrícula delante del Palau
   de les Arts y el Hemisfèric. Viene ya en 12:5, así que en escritorio no se
   recorta, solo se escala.

   El velo va medido, no a ojo. La franja donde caen el titular y el buscador
   tiene una luminancia media de 0,374, pero llega a 1,0 en el blanco del Palau,
   que queda justo detrás del texto. Con velo del 86% a la izquierda, el peor
   punto da 5,5:1 de contraste contra el texto blanco: por encima del 4,5:1 que
   pide WCAG AA incluso para el texto pequeño. Se levanta pronto hacia la
   derecha para no ensuciar el coche. */
.background-custom {
    background-color: #0f1216;
    background-image: url(../images/landing/hero-artes.jpg);
    background-image: image-set(
        url(../images/landing/hero-artes-1574.avif) type("image/avif"),
        url(../images/landing/hero-artes-1574.webp) type("image/webp"),
        url(../images/landing/hero-artes.jpg) type("image/jpeg"));
    background-position: center center;
}

.background-custom::before {
    background:
        linear-gradient(100deg, rgba(10, 13, 17, .86) 0%, rgba(10, 13, 17, .68) 40%, rgba(10, 13, 17, .24) 70%, rgba(10, 13, 17, 0) 100%),
        linear-gradient(180deg, rgba(10, 13, 17, .42) 0%, rgba(10, 13, 17, 0) 26%);
}

@media (max-width: 767.98px) {
    div.background-custom {
        background-image: url(../images/landing/hero-artes-mobile.jpg);
        background-image: image-set(
            url(../images/landing/hero-artes-mobile-525.avif) type("image/avif"),
            url(../images/landing/hero-artes-mobile-525.webp) type("image/webp"),
            url(../images/landing/hero-artes-mobile.jpg) type("image/jpeg"));
        background-position: center center;
    }

    /* En móvil el texto cae sobre la foto entera, no solo sobre un lado. */
    .background-custom::before {
        background: linear-gradient(180deg, rgba(10, 13, 17, .8) 0%, rgba(10, 13, 17, .62) 46%, rgba(10, 13, 17, .84) 100%);
    }
}

/* ==================================================== Cómo funciona: tres pasos

   Antes eran tres cajas con un número grande y texto; ahora se lee como lo que
   es, un proceso: una línea horizontal que une las tres marcas, con el icono
   dentro del círculo y el número colgado en la esquina.

   Los iconos van en SVG en línea (≈1 KB los tres) en vez de Font Awesome: se
   ven nítidos a cualquier tamaño, heredan el color y no dependen de qué
   versión de la tipografía de iconos esté cargada. */

.pasos {
    padding: clamp(56px, 7vw, 100px) 0;
    background: var(--tv-fondo-suave);
    text-align: center;
}

.pasos .wrap {
    width: min(1240px, 92%);
    margin: 0 auto;
}

.pasos-kicker {
    margin: 0 0 10px;
    color: var(--tv-amarillo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.pasos h2 {
    margin: 0 0 clamp(36px, 5vw, 60px);
    color: var(--tv-negro);
    font-size: clamp(26px, 18px + 1.8vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.8px;
}

.pasos-lista {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

/* La regla global pone viñeta y sangría a todo li; aquí son pasos. */
.pasos-lista > li::before {
    content: none;
}

/* Línea que une las tres marcas. Va por detrás y arranca y termina dentro de
   los círculos de los extremos, no en el borde de la sección. */
.pasos-lista::before {
    content: "";
    position: absolute;
    top: 43px;
    left: calc(16.66% + 22px);
    right: calc(16.66% + 22px);
    height: 2px;
    background: repeating-linear-gradient(90deg, #d7dde3 0 8px, transparent 8px 16px);
}

.pasos-lista > li.paso {
    position: relative;
    padding: 0;
    text-align: center;
}

.pasos-marca,
.paso-marca {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e6eaee;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(15, 18, 22, .07);
}

.paso-icono {
    display: block;
    width: 38px;
    height: 38px;
    color: var(--tv-negro);
}

.paso-icono > svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* El número queda como sello sobre el círculo: ordena sin robar protagonismo
   al icono, que es lo que cuenta qué pasa en cada paso. */
.paso-numero {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--tv-amarillo);
    border: 3px solid var(--tv-fondo-suave);
    border-radius: 50%;
    color: var(--tv-negro);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.paso-titulo {
    max-width: 15em;
    margin: 0 auto 8px;
    color: var(--tv-negro);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.paso-texto {
    max-width: 26em;
    margin: 0 auto;
    color: var(--tv-texto-suave);
    font-size: 15px;
    line-height: 1.6;
}

.pasos-cta {
    margin: clamp(34px, 4vw, 52px) 0 0;
    /* Los tres pasos van centrados; el boton que los cierra, tambien. */
    text-align: center;
}

.pasos-cta-boton {
    display: inline-block;
    padding: 13px 32px;
    background-color: #fab300;
    border-radius: 10px;
    color: #191f26;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    box-shadow: 0 6px 18px rgba(250, 179, 0, .28);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.pasos-cta-boton:hover,
.pasos-cta-boton:focus {
    background-color: #ffc426;
    color: #191f26;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(250, 179, 0, .38);
    transform: translateY(-2px);
}

.pasos-cta-boton:active {
    box-shadow: 0 4px 12px rgba(250, 179, 0, .3);
    transform: translateY(0);
}

@media (max-width: 767.98px) {
    .pasos-lista {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 26em;
        margin: 0 auto;
    }

    /* En columna la línea pasa a vertical, por el centro de las marcas. */
    .pasos-lista::before {
        top: 43px;
        bottom: 43px;
        left: 50%;
        right: auto;
        width: 2px;
        height: auto;
        transform: translateX(-1px);
        background: repeating-linear-gradient(180deg, #d7dde3 0 8px, transparent 8px 16px);
    }

    .paso-marca {
        width: 72px;
        height: 72px;
        margin-bottom: 14px;
    }

    .paso-icono {
        width: 32px;
        height: 32px;
    }
}

/* La cabecera es el destino del botón de "Cómo funciona": se deja hueco para
   la barra fija de arriba al saltar. */
#buscador {
    scroll-margin-top: 84px;
}

@media (max-width: 767.98px) {
    /* En columna los pasos tienen alturas distintas, así que una sola línea
       para toda la lista se pasaba de largo y cruzaba el texto del último.
       Cada paso dibuja su propio tramo hasta el siguiente. */
    .pasos-lista::before {
        content: none;
    }

    .pasos-lista > li.paso:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 72px;
        bottom: -30px;
        left: 50%;
        width: 2px;
        transform: translateX(-1px);
        background: repeating-linear-gradient(180deg, #d7dde3 0 8px, transparent 8px 16px);
    }
}

/* El <ol> llevaba list-style:none, pero el <li> seguía computando decimal, así
   que el marcador nativo salía además del círculo amarillo: dos numeraciones.
   Se apaga en el propio li y también su ::marker, que en los navegadores
   modernos es lo que de verdad lo dibuja. */
.pasos-lista > li.paso {
    list-style: none;
}

.pasos-lista > li.paso::marker {
    content: none;
}

/* Interacción al pasar el ratón por los pasos.
   Son explicativos, no enlaces, así que el efecto despierta el paso sin
   sugerir que se puede pulsar: nada de cursor:pointer ni subrayados. El
   contorno pasa al amarillo de la marca, el icono se aviva y la marca sube
   un poco. Con prefers-reduced-motion se queda solo el cambio de color. */
.paso-marca {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.paso-icono {
    transition: color .22s ease, transform .22s ease;
}

.paso-numero {
    transition: transform .22s ease;
}

.paso:hover .paso-marca,
.paso:focus-within .paso-marca {
    transform: translateY(-4px);
    border-color: var(--tv-amarillo);
    box-shadow: 0 14px 28px rgba(15, 18, 22, .13);
}

.paso:hover .paso-icono,
.paso:focus-within .paso-icono {
    color: #b98500;
    transform: scale(1.06);
}

.paso:hover .paso-numero,
.paso:focus-within .paso-numero {
    transform: translateY(-4px) scale(1.08);
}

.paso-titulo {
    transition: color .22s ease;
}

.paso:hover .paso-titulo {
    color: #000;
}

@media (prefers-reduced-motion: reduce) {
    .paso-marca,
    .paso-icono,
    .paso-numero,
    .paso-titulo {
        transition: none;
    }

    .paso:hover .paso-marca,
    .paso:focus-within .paso-marca,
    .paso:hover .paso-numero,
    .paso:focus-within .paso-numero,
    .paso:hover .paso-icono,
    .paso:focus-within .paso-icono {
        transform: none;
    }
}

/* ============================================================ opiniones (portada)

   Antes: carrusel de 26 reseñas, 634px de alto, el 18% de la página. Ahora las
   tres insignias, que son el dato que la gente escanea, y tres opiniones. La
   página entera vive en /opiniones.

   Las clases .romw* las escribe el widget dentro de nuestro DOM. */

.op-home {
    padding: clamp(48px, 6vw, 80px) 0;
    background: var(--tv-negro);
    text-align: center;
}

.op-home .wrap {
    width: min(1240px, 92%);
    margin: 0 auto;
}

.op-home h2 {
    margin: 0 0 26px;
    color: #fff;
    font-size: clamp(24px, 17px + 1.5vw, 36px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.7px;
}

/* --------------------------------------------------------------- insignias */

.op-home-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 30px;
}

/* El widget elige el color del texto según el fondo que detecta y aquí lo pone
   en blanco, pero su tarjeta interior es clara: acabaría blanco sobre blanco.
   Mismo apaño que en la página de opiniones. */
.op-home-badges .romw-badge {
    padding: 10px 16px;
    background: #fff;
    border-radius: 12px;
}

.op-home-badges .romw-badge-single {
    background: transparent !important;
}

.op-home-badges .romw-badge-single__logo-text,
.op-home-badges .romw-badge-single__rating-text,
.op-home-badges .romw-badge-single__reviews {
    color: #2b3d51 !important;
}

/* ---------------------------------------------------------------- opiniones */

.op-home-rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: left;
}

/* Solo las tres primeras; el resto no ocupa sitio. */
.op-home-rejilla > .romw {
    display: none;
}

.op-home-rejilla > .romw.op-home-visible {
    display: grid;
    grid-template-areas:
        "foto autor logo"
        "texto texto texto";
    grid-template-columns: 40px 1fr auto;
    gap: 4px 12px;
    margin: 0;
    padding: 18px 20px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
}

.op-home-rejilla > .romw > .romw-author-photo {
    grid-area: foto;
    align-self: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0;
    overflow: hidden;
    border-radius: 50%;
    line-height: 0;
}

.op-home-rejilla > .romw > .romw-author-photo > img {
    width: 40px !important;
    height: 40px !important;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.op-home-rejilla > .romw > .romw-author-stars {
    grid-area: autor;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    margin: 0;
}

.op-home-rejilla > .romw .romw-author {
    overflow: hidden;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-home-rejilla > .romw .romw-fa-star,
.op-home-rejilla > .romw .romw-fa-star-o,
.op-home-rejilla > .romw .romw-fa-star-half-o {
    font-size: 12.5px;
    color: var(--tv-amarillo);
}

.op-home-rejilla > .romw > .romw-source-logo {
    grid-area: logo;
    align-self: center;
    margin: 0;
    opacity: .8;
}

.op-home-rejilla > .romw > .romw-source-logo img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.op-home-rejilla > .romw > .romw-date {
    display: none;
}

.op-home-rejilla > .romw > .romw-text {
    grid-area: texto;
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .74);
    font-size: 14px;
    line-height: 1.55;
    /* Tres líneas: iguala el alto de las tarjetas y mantiene la sección corta. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------------------------------------------------------------------ ver todas */

.op-home-todas {
    margin: 26px 0 0;
}

.op-home-todas a {
    color: var(--tv-amarillo);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.op-home-todas a:hover {
    text-decoration: underline;
}

.op-home-todas i {
    margin-left: 7px;
    transition: transform .2s ease;
}

.op-home-todas a:hover i {
    transform: translateX(4px);
}

@media (max-width: 991.98px) {
    .op-home-rejilla {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Con dos columnas la tercera descuadraría la fila: se deja en dos. */
    .op-home-rejilla > .romw.op-home-visible:nth-child(3) {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .op-home-rejilla {
        grid-template-columns: 1fr;
    }

    .op-home-rejilla > .romw.op-home-visible:nth-child(3) {
        display: grid;
    }
}

/* Compactado de la sección de opiniones de la portada.
   El primer montaje se quedó en 659px: 160 de relleno, 120 de insignias y 189
   por tarjeta. Se recorta cada pieza. */

.op-home {
    padding: clamp(40px, 4vw, 56px) 0;
}

.op-home h2 {
    margin-bottom: 20px;
}

/* Las insignias las dibuja el widget a 100px de alto; se reducen con transform
   y se recupera el hueco sobrante con un alto fijo en el contenedor, porque
   transform no afecta a la maqueta. */
.op-home-badges {
    align-items: center;
    height: 82px;
    /* Las insignias son una cosa y las opiniones otra: sin aire suficiente se
       leian como un solo bloque apelotonado. El margen va por encima de lo que
       parece porque las insignias sobresalen unos pixeles del alto fijo del
       contenedor: lo que cuenta es el hueco que se ve, no el de la caja. */
    margin-bottom: 64px;
    gap: 4px;
}

.op-home-badges .romw-badge {
    padding: 6px 12px;
    transform: scale(.78);
    transform-origin: center;
}

/* --------------------------------------------------------------- tarjetas */

.op-home-rejilla > .romw.op-home-visible {
    padding: 15px 17px;
}

.op-home-rejilla > .romw > .romw-author-stars {
    line-height: 1.2;
}

.op-home-rejilla > .romw .romw-author {
    font-size: 14px;
}

.op-home-rejilla > .romw > .romw-text {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    /* Dos líneas bastan para dar el tono; la reseña entera está en /opiniones. */
    -webkit-line-clamp: 2;
}

.op-home-todas {
    margin-top: 20px;
}

/* Insignias en móvil.
   Apiladas costaban 282px y el alto fijo de escritorio las desbordaba. En
   375px tres insignias no caben en fila a un tamaño legible, así que se
   quedan en fila y la tira se desliza en horizontal. Ocupa 92px en vez de
   282 y no se pierde ninguna de las tres fuentes. */
@media (max-width: 767.98px) {
    .op-home-badges {
        height: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 2px;
        margin-bottom: 30px;
        padding-bottom: 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .op-home-badges::-webkit-scrollbar {
        display: none;
    }

    .op-home-badges .romw-badge {
        flex: 0 0 auto;
        scroll-snap-align: center;
        transform: scale(.8);
        margin: -10px -8px;
    }
}

/* ============================================================ campos iguales

   Ojo con la estructura, que no es la que parece a simple vista:

   - Origen y destino no son dos campos, son las dos mitades de una misma
     pildora (.from-to-container) con el boton de invertir en medio.
   - La fecha tampoco es un input suelto: es un grupo con el icono de calendario
     a la izquierda y el campo a la derecha.
   - Pasajeros si es un select a pelo.

   Es decir, las cajas visibles son tres, no cinco. Darle borde a lo que va
   dentro dibuja cajas dentro de la caja. Aqui se igualan esas tres -mismo
   radio, mismo borde, mismo fondo- y se les quitan sombras, transiciones y
   cualquier cambio al pasar el raton o al pulsar. Con !important porque las
   reglas de la plantilla original lo llevan. */

.search-container .from-to-container,
.search-container .hourly-container .input-group,
.search-container select[id^="presupuestoform-pasajeros"] {
    /* Sin border-box el grupo de la fecha sumaba sus dos bordes al alto y se
       quedaba en 54 frente a los 52 de los otros dos. */
    box-sizing: border-box !important;
    background-color: #fff !important;
    border: 1px solid #e2e5e8 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: none !important;
}

/* El grupo de la fecha es un .input-group de Bootstrap, que va con
   display:table. En una tabla el height es un minimo, no una altura, asi que
   el contenido la estiraba a 64 por mucho !important que se le pusiera. En
   flex si se respeta, y ademas centra vertical sin depender del line-height. */
.search-container .hourly-container .input-group {
    display: flex !important;
    align-items: center;
    height: 52px !important;
    overflow: hidden;
}

/* La celda del icono se centraba sola cuando el grupo era una tabla; en flex
   hay que decirselo, o el calendario se queda pegado arriba. */
.search-container .hourly-container .input-group > .input-group-addon {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 100% !important;
    padding: 0 12px !important;
    line-height: 1 !important;
}

.search-container .hourly-container .input-group > input,
.search-container .hourly-container .input-group > .flatpickr-alt-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100% !important;
}

/* Lo de dentro no lleva caja propia: el fondo y el borde los pone el grupo.
   Incluye el fantasma del typeahead, que si trae borde asoma por debajo. */
.search-container .from-to-container input,
.search-container .from-to-container select,
.search-container .from-to-container .tt-hint,
.search-container .from-to-container .tt-input,
.search-container .hourly-container .input-group > *,
.search-container .hourly-container .input-group input,
.search-container .hourly-container .input-group .input-group-addon,
.search-container #span-for-date-go,
.search-container #span-for-date-go-m {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Ni al pasar el raton ni al pulsar cambia nada. */
.search-container .from-to-container:hover,
.search-container .hourly-container .input-group:hover,
.search-container input:hover,
.search-container input:active,
.search-container input:focus,
.search-container select:hover,
.search-container select:active,
.search-container select:focus {
    border-color: #e2e5e8 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Sin ningun rastro al enfocar, tampoco con teclado: decision del cliente.
   Se anula tambien el contorno que pinta el navegador por su cuenta. */
.search-container input:focus,
.search-container select:focus,
.search-container input:focus-visible,
.search-container select:focus-visible,
.search-container .from-to-container:focus-within,
.search-container .input-group:focus-within {
    outline: 0 !important;
    box-shadow: none !important;
}
/* El formulario de movil es otra maqueta: no tiene pildora de origen+destino,
   sino un .input-group por campo. Se le da el mismo trato. */

@media (max-width: 767.98px) {
    .main-form .search-container .input-group,
    .main-form .search-container select[id^="presupuestoform-pasajeros"] {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center;
        height: 52px !important;
        overflow: hidden;
        background-color: #fff !important;
        border: 1px solid #e2e5e8 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        transition: none !important;
    }

    .main-form .search-container .input-group > * {
        height: 100% !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .main-form .search-container .input-group > .input-group-addon {
        display: flex !important;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: auto !important;
        padding: 0 12px !important;
        line-height: 1 !important;
    }

    .main-form .search-container .input-group > input,
    .main-form .search-container .input-group > .twitter-typeahead,
    .main-form .search-container .input-group > select {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Si el select va dentro de un grupo, la caja es el grupo: si no, queda
       un borde dentro de otro. */
    .main-form .search-container .input-group select,
    .main-form .search-container .input-group .twitter-typeahead {
        width: 100% !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .main-form .search-container .input-group:hover,
    .main-form .search-container .input-group input:hover,
    .main-form .search-container .input-group input:focus,
    .main-form .search-container select:hover,
    .main-form .search-container select:focus {
        border-color: #e2e5e8 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }
}

/* ------------------------------------------------- aviso de fecha invalida

   El aviso de "menos de 24h" cuelga del campo de fecha. Antes se salia por
   debajo -su columna tiene alto fijo de 52px- y la fila de garantias lo tapaba
   a partir del segundo renglon: va detras en el DOM y su backdrop-filter le
   crea contexto de apilado propio, asi que pinta por encima.

   Se saca del flujo y se cuelga del campo. Asi el buscador no cambia de alto
   cuando aparece -nada salta- y el aviso se dibuja sobre lo que tenga debajo.
   Para ganarle a las garantias no basta con el z-index del propio aviso: hace
   falta que su antepasado posicionado, el buscador, quede por encima de ellas. */

.width-90 .search-container,
.main-form .search-container {
    position: relative;
    z-index: 5;
}

.search-container .div-date,
.search-container .div-datepicker {
    position: relative;
}

.search-container .error-date {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 10;
    width: auto;
    margin-top: 6px;
}
/* ------------------------------------- iconos de origen y destino del buscador

   Mismo tratamiento que el hueco del calendario, que ya lo tenía. */

.search-container .icono-lugar {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: 100% !important;
    padding: 0 0 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--tv-texto-suave);
    font-size: 17px;
    line-height: 1 !important;
}

/* Sin el hueco a la izquierda el campo se pegaría al icono. */
.search-container .from-to-container .icono-lugar + select,
.search-container .from-to-container .icono-lugar + input,
.search-container .from-to-container .icono-lugar + .tt-input,
.search-container .from-to-container .icono-lugar ~ .twitter-typeahead {
    padding-left: 10px !important;
}

/* Los grupos de origen y destino seguían siendo display:table, donde el hueco
   del icono se apila encima del campo en vez de ponerse a su lado. */
.search-container .from-to-container .input-group {
    display: flex !important;
    align-items: center;
}

.search-container .from-to-container .input-group > select,
.search-container .from-to-container .input-group > input,
.search-container .from-to-container .input-group > .twitter-typeahead {
    flex: 1 1 auto;
    min-width: 0;
}

/* ------------------------- la etiqueta flotante, despues del icono

   La etiqueta va en posicion absoluta a 16px del borde, que antes era donde
   empezaba el texto del campo. Ahora ahi esta el icono, asi que se le montaba
   encima. Se corre hasta donde empieza el texto: el hueco del icono son 14 de
   relleno mas 21 de ancho, y 10 mas de separacion. */

.search-container .from-to-container .has-float-label > span.float-label,
.search-container .from-to-container.has-float-label > span.float-label,
.search-container .selector-from-mobile.has-float-label > span.float-label,
.search-container div.to-container.has-float-label > span.float-label {
    left: 45px;
}

/* El campo empieza en el mismo sitio que su etiqueta. */
.search-container .from-to-container .icono-lugar + select,
.search-container .from-to-container .icono-lugar + input,
.search-container .from-to-container .icono-lugar ~ .twitter-typeahead input,
.search-container .icono-lugar + select,
.search-container .icono-lugar ~ .twitter-typeahead .tt-input,
.search-container .icono-lugar ~ .twitter-typeahead .tt-hint {
    padding-left: 10px !important;
}

/* El boton de invertir el sentido va en posicion absoluta, centrado sobre la
   juntura de los dos campos, y ahi es justo donde caia el icono del destino.
   El campo ya dejaba sitio -por eso tenia 34px de relleno-, asi que el icono
   arranca despues del circulo y la etiqueta detras de el. */

.search-container .from-to-container .input-group-to > .icono-lugar {
    padding-left: 26px !important;
}

.search-container div.to-container.has-float-label > span.float-label {
    left: 57px;
}

/* --------------------------- los cinco campos, con la misma letra

   Los desplegables iban en Montserrat de peso 500 y gris, mientras el destino
   y la fecha salian en Open Sans -que no llega a cargarse nunca, asi que caian
   en Arial- y en otro color. Todos con la misma letra, el mismo peso y el
   mismo negro, que es de lo que se trata al leer un formulario. */

.search-container .tv-select,
.search-container #origenIda,
.search-container #origenIdaM,
.search-container #presupuestoform-pasajeros,
.search-container #presupuestoform-pasajerosm,
.search-container #presupuestoform-destinoida,
.search-container #presupuestoform-destinoidam,
.search-container #pick_up_date,
.search-container #pick_up_date_m,
.search-container .input-group-to input.form-control,
.search-container .from-to-container input,
.search-container .hourly-container input,
.search-container .twitter-typeahead .tt-input {
    color: #191f26;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.1px;
}

/* El texto de ayuda y el fantasma del autocompletado, mas apagados pero con la
   misma letra. */
.search-container input::placeholder,
.search-container .twitter-typeahead .tt-hint {
    color: #97a1ab;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.1px;
}

/* El campo de fecha que se ve no es el original: flatpickr lo esconde y pone
   otro encima. Y el fantasma del autocompletado tiene que ir con la misma
   letra que el texto real o no se superponen bien. Los dos llevan clases del
   tema con mas peso, asi que hay que nombrarlos igual de fuerte. */

.search-container input.form-control.flatpickr-alt-input,
.search-container input.form-control.tt-hint,
.search-container .input-group-to input.form-control.tt-hint,
.has-float-label .input-group-to input.form-control.tt-hint {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: -.1px;
}

.search-container input.form-control.flatpickr-alt-input {
    color: #191f26;
}

/* El fantasma va detras del texto, apagado. */
.search-container input.form-control.tt-hint,
.has-float-label .input-group-to input.form-control.tt-hint {
    color: #97a1ab !important;
}

/* ------------------ el valor del destino, en la vertical de su etiqueta

   El campo llevaba 34px de relleno para que el circulo de invertir no pisara
   el texto. Ese hueco lo da ahora el icono, que va delante, asi que el relleno
   sobra y solo servia para empujar el valor 26px mas alla que su etiqueta.
   El fantasma del autocompletado va detras del texto real, asi que lleva el
   mismo. */

.search-container div.to-container.has-float-label #presupuestoform-destinoida,
.search-container div.to-container.has-float-label input.form-control.tt-hint,
.search-container #presupuestoform-destinoidam {
    padding-left: 10px !important;
}

.search-container div.to-container.has-float-label > span.float-label {
    left: 59px;
}

/* El fantasma del autocompletado va en posicion absoluta desde el borde del
   envoltorio, mientras el campo real arranca 10px mas alla. Si no coinciden,
   la sugerencia gris se ve corrida respecto a lo que se esta escribiendo. */

.search-container .twitter-typeahead input.form-control.tt-hint {
    left: 10px !important;
}

/* ============================ la lista de sugerencias del destino

   Venía con el estilo por defecto del plugin: esquinas de 4px, borde gris y
   los renglones pegados. Se pone en el lenguaje del sitio, que es lo primero
   que toca el cliente al reservar. */

.search-container .tt-menu {
    margin-top: 8px;
    padding: 8px;
    min-width: 260px;
    background: #fff;
    border: 1px solid #e6eaee;
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(15, 18, 22, .16), 0 2px 6px rgba(15, 18, 22, .06);
    overflow: hidden;
    animation: sugerencias-entra .14s ease-out;
}

@keyframes sugerencias-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Quien prefiera no ver animaciones, no las ve. */
@media (prefers-reduced-motion: reduce) {
    .search-container .tt-menu {
        animation: none;
    }
}

.search-container .tt-menu .tt-suggestion {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #191f26;
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .12s ease;
}

.search-container .tt-menu .tt-suggestion + .tt-suggestion {
    margin-top: 2px;
}

/* El icono del tipo de sitio, en su pastilla. */
.search-container .tt-menu .tt-suggestion i {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f4f6f8;
    border-radius: 9px;
    color: #6b757f;
    font-size: 13px;
    transition: background-color .12s ease, color .12s ease;
}

.search-container .tt-menu .tt-suggestion strong {
    font-weight: 700;
    letter-spacing: -.2px;
}

/* El renglon sobre el que se esta, con el raton o con las flechas. */
.search-container .tt-menu .tt-suggestion:hover,
.search-container .tt-menu .tt-suggestion.tt-cursor {
    background: #fffaf0;
}

.search-container .tt-menu .tt-suggestion:hover i,
.search-container .tt-menu .tt-suggestion.tt-cursor i {
    background: #fab300;
    color: #191f26;
}

/* Cuando no hay nada que ofrecer. */
.search-container .tt-menu .text-danger,
.search-container .tt-menu .tt-empty {
    padding: 12px 14px;
    color: #6b757f;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

/* style.css marca la letra del buscador por el id del formulario, asi que hay
   que nombrarlo igual de fuerte. Open Sans, ademas, no llega a cargarse en el
   sitio: lo que salia era Arial. */

#PresupuestoForm .search-container .tt-menu,
#PresupuestoForm .search-container .tt-menu .tt-suggestion,
#PresupuestoForm .search-container .tt-menu .tt-suggestion strong,
#PresupuestoFormM .search-container .tt-menu,
#PresupuestoFormM .search-container .tt-menu .tt-suggestion,
#PresupuestoFormM .search-container .tt-menu .tt-suggestion strong {
    font-family: 'Montserrat', sans-serif;
}

#PresupuestoForm .search-container .tt-menu .tt-suggestion,
#PresupuestoFormM .search-container .tt-menu .tt-suggestion {
    font-size: 14.5px;
}

/* ============================== el buscador en móvil

   Dos cosas que en escritorio no pasaban.

   La primera: el desplegable de sugerencias cuelga aquí del propio grupo del
   campo, y ese grupo recorta lo que se sale, así que la lista se quedaba
   cortada a cero igual que pasaba arriba con el bloque de origen y destino.
   Ningún grupo que lleve autocompletado puede recortar. */

.search-container .input-group-to,
.search-container .input-group:has(.twitter-typeahead) {
    overflow: visible;
}

/* La segunda: la etiqueta flotante va en posición absoluta a una distancia
   pensada para cuando no había icono, así que se montaba encima de él. Los
   iconos de móvil son más anchos que los de escritorio, de modo que necesita
   su propia medida. */

@media (max-width: 991px) {
    .search-container .selector-from-mobile.has-float-label > span.float-label {
        left: 57px;
    }

    .search-container .f-row .form-group.select.has-float-label > span.float-label {
        left: 48px;
    }
}

/* ------------------------- sin zoom al tocar un campo en móvil

   iOS amplía la página él solo cuando enfocas un campo cuya letra mide menos
   de 16px, y los del buscador estaban a 15. Se suben a 16 en pantallas
   táctiles: así deja de ampliar sin tener que bloquear el zoom del navegador,
   que es lo que de verdad no se puede hacer -hay quien lo necesita para leer,
   y iOS lo ignora desde hace años-. */

@media (max-width: 991px) {
    .search-container input,
    .search-container select,
    .search-container .tv-select,
    .search-container #presupuestoform-destinoida,
    .search-container #presupuestoform-destinoidam,
    .search-container input.form-control.flatpickr-alt-input,
    .search-container input.form-control.tt-hint,
    .search-container .twitter-typeahead .tt-input {
        font-size: 16px !important;
    }

    .search-container input::placeholder {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    /* El fantasma del autocompletado va detrás del texto real: si no miden lo
       mismo, la sugerencia se ve corrida. */
    .has-float-label .input-group-to input.form-control.tt-hint,
    .search-container .twitter-typeahead input.form-control.tt-hint {
        font-size: 16px !important;
    }
}

/* ---------------------- el fantasma del autocompletado, encima del texto

   El plugin superpone dos campos: el que escribes y otro detrás que completa
   la sugerencia -escribes "Den" y detrás pone "Denia"-. Solo funciona si los
   dos pintan el texto exactamente en el mismo sitio, y no era el caso: el
   real iba con 22px de relleno y 24 de interlineado, y el fantasma con 18 y
   30. De ahí que se vieran dos textos descuadrados. */

.search-container .twitter-typeahead .tt-input,
.search-container .twitter-typeahead .tt-hint,
.search-container #presupuestoform-destinoida,
.search-container #presupuestoform-destinoidam,
.search-container .input-group-to input.form-control.tt-hint,
.has-float-label .input-group-to input.form-control.tt-hint {
    height: 52px !important;
    padding-top: 22px !important;
    padding-bottom: 0 !important;
    line-height: 24px !important;
}

@media (max-width: 991px) {
    .search-container .twitter-typeahead .tt-input,
    .search-container .twitter-typeahead .tt-hint,
    .search-container #presupuestoform-destinoidam,
    .search-container .input-group-to input.form-control.tt-hint,
    .has-float-label .input-group-to input.form-control.tt-hint {
        height: 48px !important;
        padding-top: 20px !important;
        line-height: 24px !important;
    }
}

/* ------------------------------- fuera el fantasma del autocompletado

   El plugin superpone dos campos: el que escribes y otro detrás, en gris, que
   adelanta la sugerencia -tecleas "Den" y detrás aparece "Denia"-. Para que no
   se note tienen que pintar el texto exactamente en el mismo punto, y aquí no
   coincidían: cada uno recogía reglas distintas de la plantilla según el ancho
   de pantalla, así que se veían dos textos, uno gris y uno negro, descuadrados.

   Se quita. La sugerencia ya se ve en la lista de debajo, que es donde se
   espera, y así no hay dos textos que cuadrar en cada tamaño de pantalla. */

.search-container .twitter-typeahead .tt-hint,
.search-container input.form-control.tt-hint,
.has-float-label .input-group-to input.form-control.tt-hint {
    display: none !important;
}