.bc-form-search-all .bc-herov2-search { width: min(var(--bc-hero-form-max-width, 950px), 100%); margin: 0 auto; } .bc-form-search-all .bc-herov2-search .g-form-control { width: 100%; margin: 0 !important; } .bc-form-search-all .bc-herov2-services { display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 3vw, 26px); margin: 26px auto 22px; } /* Los 26 de arriba no son decoración: la fila de servicios nacía con `margin-top: 0` y arrancaba exactamente donde termina la bajada del título —cero píxeles entre las dos— así que en el escritorio el bloque entero se leía como un pegote. */ .bc-form-search-all .bc-herov2-service { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 62px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.76); cursor: pointer; } .bc-form-search-all .bc-herov2-service:focus, .bc-form-search-all .bc-herov2-service:focus-visible { outline: 0 !important; box-shadow: none !important; } .bc-form-search-all .bc-herov2-service .ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(16,21,32,.4); color: #fff; font-size: 20px; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); transition: transform .2s, background .2s; } .bc-form-search-all .bc-herov2-service .txt { max-width: 92px; color: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; } .bc-form-search-all .bc-herov2-service:hover .ico, .bc-form-search-all .bc-herov2-service.active .ico { transform: translateY(-2px); background: color-mix(in srgb, var(--bc-primary, #5191fa) 76%, transparent); } .bc-form-search-all .bc-herov2-service.active { color: #fff; } .bc-form-search-all .bc-herov2-forms { padding: 0 !important; background: transparent !important; } .bc-form-search-all .bc-herov2-forms > .tab-pane { display: none; } .bc-form-search-all .bc-herov2-forms > .tab-pane.active { display: block; } /* Tamaño de letra del título y el subtítulo desde el panel (Contenido). Sólo cuando hay valor: index escribe la variable y la clase; sin ellas esta regla no existe y manda el estilo. La clase va repetida seis veces a posta: el héroe claro fija el tamaño con `body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .text-heading` más !important (seis clases), y para ganarle hacen falta siete sin atar esta regla a esos ancestros. Medido: con dos clases no cambiaba nada. La altura de línea es relativa en todos los estilos y escala sola. */ @media (min-width: 768px) { html .bc-form-search-all.bc-hero-ts.bc-hero-ts.bc-hero-ts.bc-hero-ts.bc-hero-ts.bc-hero-ts .text-heading { font-size: var(--bc-hero-ts) !important; } html .bc-form-search-all.bc-hero-ss.bc-hero-ss.bc-hero-ss.bc-hero-ss.bc-hero-ss.bc-hero-ss .sub-heading { font-size: var(--bc-hero-ss) !important; } } @media (max-width: 767px) { html .bc-form-search-all.bc-hero-ts-m.bc-hero-ts-m.bc-hero-ts-m.bc-hero-ts-m.bc-hero-ts-m.bc-hero-ts-m .text-heading { font-size: var(--bc-hero-ts-m) !important; } html .bc-form-search-all.bc-hero-ss-m.bc-hero-ss-m.bc-hero-ss-m.bc-hero-ss-m.bc-hero-ss-m.bc-hero-ss-m .sub-heading { font-size: var(--bc-hero-ss-m) !important; } } /* «Ancho máximo del buscador» vacío = automático: en PC el buscador mide lo que miden sus campos y el botón, ni un píxel más, y se centra (o se alinea a la izquierda, donde el estilo lo pida). Sin esto «automático» heredaba el tope de diseño de cada estilo —1150 en el héroe claro— y la barra salía a todo lo ancho con un solo campo dentro. Van con `html` delante a posta: las hojas de cada estilo se pintan en el cuerpo de la página, después del , y con la misma especificidad ganarían por orden. En el teléfono no se toca: ahí es a todo el ancho. `0 1 auto` y no `0 0 auto`: si los campos no caben (tablet estrecha con cuatro campos) se encogen en vez de desbordar la pastilla. */ @media (min-width: 768px) { html .bc-form-search-all.bc-hero-form-auto .bc-herov2-search { width: fit-content !important; max-width: 100% !important; } html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.bc-hero-form-auto .bc-herov2-search .bc_form { width: fit-content !important; max-width: 100% !important; } html .bc-form-search-all.bc-hero-form-auto .bc_form .g-field-search { flex: 0 1 auto !important; width: auto !important; min-width: 0; } html .bc-form-search-all.bc-hero-form-auto .bc_form .g-field-search > .row { flex: 0 1 auto !important; flex-wrap: nowrap !important; width: auto !important; min-width: 0; } html .bc-form-search-all.bc-hero-form-auto .bc_form .g-field-search > .row > [class*="col-"] { flex: 0 1 auto !important; width: auto !important; max-width: none !important; min-width: 0; } /* El campo de fecha mide lo que mide su texto, y «06/09» son 41 px: el rótulo «Fechas» se pegaba al de «Días». Un mínimo le da sitio también al rango («06/09 – 10/09») cuando lo elijan; y en autos, donde fecha y días van en la misma columna, más hueco entre los dos. */ html .bc-form-search-all.bc-hero-form-auto .bc_form .form-date-search { min-width: 132px; } html .bc-form-search-all.bc-hero-form-auto .bc_form .bc-car-datedays { gap: 28px; } /* Centrado vertical del campo de autos (fecha + días). El contenido visible quedaba 2-4 px por encima del centro de la pastilla: el campo de fecha arrastra un input invisible de 24 px que sobresale por abajo y el relleno del contenido era 5 arriba / 4 abajo. Se reparte 8 arriba / 0 abajo (medido: rótulos y valores a 1 px del centro), el icono baja a la par, y el rótulo «Días» se centra sobre su contador en vez de colgar sobre el botón de menos. */ html .bc-form-search-all .bc_form .form-content:has(.bc-car-datedays) { padding-top: 8px !important; padding-bottom: 0 !important; } html .bc-form-search-all .bc_form .form-group:has(.bc-car-datedays) > .field-icon { margin-top: -8px !important; } html .bc-form-search-all .bc_form .bc-car-days > label { display: block; text-align: center; } } @media (max-width: 767px) { /* Cuatro por fila como mucho, pero centradas. Antes era una rejilla de cuatro columnas fijas, así que una tienda con dos servicios —o cinco, con la fila de abajo a medias— los dejaba pegados a la izquierda. Cada botón mide lo mismo que medía (un cuarto menos su parte del hueco) y la fila se centra tenga los que tenga. */ .bc-form-search-all .bc-herov2-services { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; margin: 22px 0 16px; } .bc-form-search-all .bc-herov2-service { flex: 0 0 calc(25% - 4.5px); min-width: 0; gap: 5px; color: #fff; } /* El tema subraya los títulos de sección con una barrita, y en el héroe del teléfono sobra: se mete entre el título y su bajada y parte en dos lo que es una sola frase. El héroe «Normal V2» ya la quitaba por su cuenta; aquí vale para todos los estilos de fondo. Fuera del héroe —testimonios, «por qué elegirnos»— se queda. */ body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .text-heading::after { display: none !important; } .bc-form-search-all .bc-herov2-service .ico { width: 46px; height: 46px; font-size: 18px; background: rgba(16,21,32,.48); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); } .bc-form-search-all .bc-herov2-service .txt { max-width: 76px; font-size: 11px; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.45); } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-forms > .tab-pane.active { display: block !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--bc-text, #172031) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search, body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100% !important; height: auto !important; max-height: none !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 5px !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"] { width: auto !important; max-width: none !important; min-width: 0 !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"]:first-child { grid-column: 1 / -1; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"]:not(:first-child) .form-group { height: 52px !important; min-height: 52px !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .check-in-wrapper { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .check-in-wrapper > label { flex: 0 0 100%; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .check-in-wrapper > span, body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .check-in-render, body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .check-out-render { display: inline !important; width: auto !important; font-size: 12.5px !important; white-space: nowrap; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .check-in-wrapper > span { display: none !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .check-in-render::after { content: "–"; display: inline-block; margin-left: 4px; color: currentColor; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests .wrapper-more { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100%; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests .wrapper-more > label { display: block !important; width: 100%; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests .render { display: block !important; width: 100%; font-size: 0 !important; line-height: 1.2; white-space: nowrap; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests .render .adults, body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests .render .children { display: inline !important; font-size: 12.5px !important; white-space: nowrap; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests .render .adults::after { content: " · "; font-size: 12.5px; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 6px 10px 6px 46px !important; border: 0 !important; border-radius: 13px !important; background: color-mix(in srgb, var(--bc-text, #172031) 5%, var(--bc-background, #fff)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc-text, #172031) 10%, transparent) !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon { position: absolute !important; top: 50% !important; left: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; margin: 0 !important; transform: translateY(-50%) !important; border-radius: 50% !important; background: var(--bc-primary, #5191fa) !important; color: #fff !important; font-size: 16px !important; filter: drop-shadow(0 3px 7px color-mix(in srgb, var(--bc-primary, #5191fa) 34%, transparent)); } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon, body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon i { color: #fff !important; opacity: 1 !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests { position: relative !important; overflow: visible !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests .form-group.show { z-index: 10040 !important; overflow: visible !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .select-guests-dropdown.show { position: absolute !important; inset: calc(100% + 5px) 0 auto auto !important; width: min(260px, calc(100vw - 32px)) !important; min-width: 0 !important; margin: 0 !important; padding: 7px 10px !important; transform: none !important; border: 0 !important; border-radius: 14px !important; background: var(--bc-background, #fff) !important; color: var(--bc-text, #172031) !important; box-shadow: 0 16px 36px rgba(6,12,24,.26) !important; z-index: 10050 !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .select-guests-dropdown .dropdown-item-row { min-height: 40px; color: var(--bc-text, #172031) !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .select-guests-dropdown .btn-minus, body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .select-guests-dropdown .btn-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bc-text, #172031); color: var(--bc-background, #fff) !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .select-guests-dropdown .count-display, body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .select-guests-dropdown .count-display input { color: var(--bc-text, #172031) !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content { width: 100% !important; padding: 0 !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content label { margin: 0 0 2px !important; color: var(--bc-text, #172031) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-control, body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .render { min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--bc-text, #172031) !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; } /* El botón lo pinta entero search-submit.css, que carga después de esta piel. Aquí sólo queda lo que es de la piel: cuánto se separa de la tarjeta de campos. Ver [[rentcli-boton-buscar-explorar]]. */ body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .button-item { width: 100% !important; margin: 5px 0 0 !important; padding: 0 !important; } }