.bc-header-selectors {
        display: inline-flex !important;
        align-items: center;
        gap: 2px;
        margin-right: 6px;
        vertical-align: middle;
    }
    .bc-header-selectors li { padding-left: 10px !important; padding-right: 10px !important; }
    .bc-header-selectors .dropdown-menu { min-width: 100px; }
    @media (max-width:768px) { .bc-header-selectors { display: none !important; } }

    .bc_header .bc-menu > .main-menu > .bc-has-children { position: relative; }
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu {
        display: none !important; position: absolute; top: 100%; left: 0; z-index: 1000;
        min-width: 200px; margin: 0; padding: 8px 0; list-style: none;
        background: #fff; border-radius: 10px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
    }
    .bc_header .bc-menu > .main-menu > .bc-has-children:hover > .bc-submenu {
        display: block !important;
    }
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu > li {
        display: block;
        width: 100%;
        padding: 0;
    }
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu > li > a {
        display: block;
        padding: 10px 18px;
        color: #1a2b48;
        line-height: 1.4;
        text-transform: none;
        white-space: nowrap;
    }
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu > li > a:hover,
    .bc_header .bc-menu > .main-menu > .bc-has-children > .bc-submenu > li > a:focus {
        color: var(--bc-theme-primary, #5191fa);
        background: rgba(0, 0, 0, .04);
    }

    /* ── Campana de notificaciones ──────────────────────────────────────────
       El desplegable es el de siempre (Layout::parts.notification + la hoja
       notification.css que ya carga app-minisite); aquí solo se le dan los
       colores del tema del vendedor y el sitio que le toca en esta barra. */
    .bc_header .topbar-items.bc-notify-bar {
        display: inline-flex !important;
        align-items: center;
        margin: 0 2px 0 0;
        padding: 0;
        list-style: none;
    }
    .bc_header .bc-notify-bar > li { padding: 0 8px !important; }
    .bc_header .bc-notify-bar .is_login {
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }
    .bc_header .bc-notify-bar .is_login .fa-bell { font-size: 15px; margin: 0 !important; }
    /* La flecha sobra al lado de un icono suelto: sin texto que acompañar solo
       ensancha el botón. */
    .bc_header .bc-notify-bar .is_login .fa-angle-down { display: none !important; }
    /* Arriba a la derecha del icono. notification.css lo ancla a la izquierda
       (`left: 8px`), que sobre una campana suelta cae encima del dibujo. */
    .bc_header .bc-notify-bar .notification-icon {
        top: -6px;
        left: auto;
        right: 1px;
        min-width: 15px;
        padding: 2px 4px;
        font-size: 9px !important;
        line-height: 1;
    }
    /* El menú cuelga del borde derecho de la barra y nunca más ancho que la
       pantalla: 350px fijos se salían del móvil. */
    .bc_header .bc-notify-bar .dropdown-menu.notify-items {
        right: 0;
        left: auto;
        width: 350px !important;
        max-width: calc(100vw - 32px) !important;
        max-height: 70vh;
        /* `.bc_header .dropdown-menu` corta lo que sobresale; con un tope de
           altura eso sería recortar la lista en seco en vez de dejarla rodar. */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* La pareja de la página y no la de la cabecera: este panel es
           contenido (avatares, mensajes, fechas), no un menú de enlaces. Y
           `--bc-header-dropdown-bg/-text` son dos opciones sueltas del tema
           que nada obliga a contrastar entre sí — rootuser tiene las dos en
           #30a8f6 y saldría azul sobre azul. `--bc-background`/`--bc-text`
           son el fondo y la tinta del sitio: legibles por definición. */
        background: var(--bc-background, #fff) !important;
    }
    .bc_header .bc-notify-bar .dropdown-toolbar,
    .bc_header .bc-notify-bar .notification,
    .bc_header .bc-notify-bar .bc-notify-vacio {
        background: transparent !important;
        border-color: rgba(0, 0, 0, .07) !important;
    }
    .bc_header .bc-notify-bar .notification.active {
        background: color-mix(in srgb, var(--bc-text, #212529) 6%, transparent) !important;
    }
    .bc_header .bc-notify-bar .bc-notify-vacio {
        display: block;
        padding: 18px 14px;
        text-align: center;
        font-size: 13px;
        opacity: .7;
    }
    /* Las reglas del cristal sobre el hero pintan de blanco todo
       `.topbar-items li > a`, y ahí caen también los enlaces de dentro del
       desplegable, que van sobre fondo claro. El `:not(#_)` no cambia a quién
       apunta el selector —ningún elemento tiene ese id—: solo le sube el peso
       por encima de aquella, que lleva !important. */
    .bc_header .bc-notify-bar:not(#_) .dropdown-toolbar-title,
    .bc_header .bc-notify-bar:not(#_) .markAllAsRead,
    .bc_header .bc-notify-bar:not(#_) .bc-notify-vacio,
    .bc_header .bc-notify-bar:not(#_) .notification a,
    .bc_header .bc-notify-bar:not(#_) .notification a:hover {
        color: var(--bc-text, #212529) !important;
        text-shadow: none !important;
    }
    .bc_header .bc-notify-bar:not(#_) .notification-meta .timestamp { opacity: .65; }
    .bc_header .bc-notify-bar:not(#_) .dropdown-footer {
        background: var(--bc-primary, #1a2b48) !important;
        border-top: 0 !important;
    }
    .bc_header .bc-notify-bar:not(#_) .dropdown-footer a {
        padding: 0 !important;
        color: var(--bc-on-primary, #fff) !important;
        text-shadow: none !important;
    }
    /* Por debajo de 990px minisite-cards.css esconde `.topbar-items`; la
       campana se queda, que es justo lo que hay que ver de un vistazo. */
    @media (max-width: 990px) {
        .bc_wrap .bc_header .topbar-items.bc-notify-bar,
        .frontend-page .bc_header .topbar-items.bc-notify-bar {
            display: inline-flex !important;
        }
        .bc_header .bc-notify-bar > li { padding: 0 4px !important; }
        /* Anclado a la barra y no a la campana. Colgándolo del icono, sus
           350px se salían 82px por la izquierda de un móvil de 375: el ancho
           no se podía recortar porque `.dropdown-large` lleva
           `min-width: 350px !important`, y min-width gana a max-width.
           El `position: fixed` no se escapa al viewport: el `backdrop-filter`
           de `.bc_header` la convierte en bloque contenedor de sus fixed, así
           que `left/right: 0` son los bordes de la propia barra. */
        .bc_header .bc-notify-bar .dropdown-menu.notify-items {
            position: fixed !important;
            top: calc(100% + 8px) !important;
            left: 0 !important;
            right: 0 !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            max-height: 68vh !important;
        }
    }


    .bc-header-blur .bc-hb-mobile { display: none; }
    html body.frontend-page .bc_wrap > .bc-header-blur { border: 0 !important; outline: 0 !important; box-shadow: none !important; }

    @media (min-width: 1200px) {
        html body.frontend-page .bc_wrap > .bc-header-blur {
            border-radius: var(--bc-radius, 18px) !important;
        }
    }

    @media (display-mode: standalone) and (max-width: 1199px) {
        .bc-header-blur .bc-hb-mobile {
            padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
        }
    }

    /* La barra de hamburguesa llega hasta 1199px y no hasta 990 como el resto
       del minisite: en una tableta apaisada (1024, iPad Pro 1180) el menú
       horizontal no cabe —con logo, cinco entradas, moneda, idioma, campana y
       «Hola, nombre» pide ~1.090px— y se montaba sobre la cuenta. Por eso el
       corte vive aquí y en `_switchers-circle`, no en las hojas globales.

       Entre 991 y 1199 minisite-cards.css sigue reservando el hueco de
       escritorio (76px) para una barra que mide 56: se iguala al del móvil.
       Las páginas que abren con foto a sangre ganan por especificidad (:has). */
    @media (min-width: 991px) and (max-width: 1199px) {
        html body { padding-top: 64px !important; }
        html.is-pwa body { padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important; }
    }

    @media (max-width: 1199px) {
        body.frontend-page .bc_wrap > .bc-header-blur {
            position: fixed !important;
            inset: 0 0 auto !important;
            width: 100% !important;
            /* La hoja de escritorio la topa a 1140px (el ancho del contenedor):
               entre 1141 y 1199 la barra se cortaba antes del borde derecho. */
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            transform: none !important;
            z-index: 1000 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        .bc-header-blur .bc-hb-desktop { display: none !important; }

        /* ── La aplicación instalada ─────────────────────────────────
           Aquí la web ocupa la pantalla ENTERA, reloj incluido: sin esto
           el logo y la hamburguesa quedan debajo de la hora y el menú no
           se puede ni tocar —el toque se lo lleva la barra de estado—.

           Se le suma a ESTA barra y no a `.bc-header-blur`, que en móvil
           es transparente y sin relleno (arriba): la franja de color la
           pinta este hijo, así que es quien tiene que crecer para llegar
           hasta el borde de la pantalla.

           Con la clase Y con la media query: iOS marcó las apps de la
           pantalla de inicio con `navigator.standalone` mucho antes de
           admitir `display-mode`, y `pwa-head` pone la clase mirando las
           dos. Basta con que acierte una. */
        html.is-pwa .bc-header-blur .bc-hb-mobile {
            /* `!important` porque el `padding: 6px 12px` de aquí abajo es un
               abreviado que vuelve a fijar el lado de arriba. La especificidad
               ya bastaría, pero esta hoja se edita a menudo y basta con mover
               una regla de sitio para que deje de bastar. */
            padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
        }
        .bc-header-blur .bc-hb-mobile {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            min-height: 56px;
            padding: 6px 12px;
            background: linear-gradient(to bottom,
                var(--bc-header-bg, #111827) 0%,
                color-mix(in srgb, var(--bc-header-bg, #111827) 82%, transparent) 100%);
        }
        /* Con la cabecera siempre sólida, en el móvil esta barra es la que se
           ve: el degradado deja transparentarse la foto por abajo, así que aquí
           va el color plano. */
        .bc-header-blur.bc-header-always-solid .bc-hb-mobile {
            background: var(--bc-header-bg, #111827);
        }
        .bc-header-blur .bc-hb-menu { justify-self: start; }
        .bc-header-blur .bc-hb-logo { grid-column: 2; }
        .bc-header-blur .bc-hb-mobile { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
        .bc-header-blur .bc-hb-circle {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 36px;
            height: 36px;
            margin: 0 !important;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: color-mix(in srgb, var(--bc-header-bg, #111827) 62%, transparent) !important;
            color: var(--bc-header-text, #fff) !important;
            text-decoration: none !important;
        }
        /* El circulo mide 36px y asi se ve bien, pero 36 se queda corto para el
           dedo: el minimo comodo son 44. Se estira solo la zona sensible con un
           pseudoelemento invisible; el circulo pintado no cambia de tamano. */
        .bc-header-blur .bc-hb-circle::after {
            content: "";
            position: absolute;
            inset: -4px;
        }
        .bc-header-blur .bc-hb-logo .bc-logo { padding: 0 !important; }
        .bc-header-blur .bc-hb-logo img { display: block; max-width: 116px; max-height: 32px !important; }
        /* Un script muda el cajón al `<body>` al cargar, y ahí la regla de la
           cabecera ya no lo alcanza. Por debajo de 990 lo recoge
           minisite-cards.css (gana por especificidad, así que en el teléfono
           esta segunda línea no cambia nada); entre 991 y 1199 solo lo abre
           ésta. */
        .bc_wrap .bc-header-blur .bc-menu-mobile,
        body > .bc-menu-mobile {
            position: fixed !important;
            inset: 0 auto 0 0 !important;
            display: flex !important;
            flex-direction: column;
            width: min(86vw, 360px) !important;
            height: 100dvh !important;
            overflow-y: auto;
            transform: translateX(-110%) !important;
            transition: transform .35s ease !important;
            background: var(--bc-background, #fff) !important;
            z-index: 10001 !important;
        }
        .bc_wrap .bc-header-blur .bc-menu-mobile.active,
        body > .bc-menu-mobile.active { transform: translateX(0) !important; }
    }


        /* ── Los disparadores ────────────────────────────────────────────── */
        .bc-hsearch-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: inherit;
            line-height: 0;
            cursor: pointer;
        }

        .bc-hsearch-btn:hover,
        .bc-hsearch-btn:focus-visible {
            background: color-mix(in srgb, currentColor 12%, transparent);
        }

        /* Dentro del menú: la lupa es un elemento más de la lista, pero no un
           enlace. Los demás `li` los alza su `<a>`, que lleva 35px de relleno
           arriba y abajo (app.css); aquí no hay enlace que los ponga, así que
           el elemento se centra a mano contra la línea.

           El selector repite el de app.css —`.bc_wrap .bc_header .content
           .header-left .bc-menu ul li`, que declara `display:inline-block`— y
           le añade la clase: menos que eso y el `inline-block` de aquella
           gana, porque va en una hoja aparte y pesa más. */
        .bc_wrap .bc_header .content .header-left .bc-menu .main-menu > li.bc-search-item,
        .bc_header .bc-menu .main-menu > li.bc-search-item {
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
            padding: 0 8px !important;
        }

        /* El color del menú lo pone la hoja del vendedor sobre los `<a>`
           (`.bc-menu ul li > a { color: var(--bc-header-text) !important }`),
           y esto es un botón: sin decírselo heredaría el color del cuerpo y
           sobre una cabecera oscura no se vería. */
        .bc_wrap .bc_header .bc-menu .bc-hsearch-btn,
        .bc_wrap .bc_header .header-right > .bc-hsearch-btn {
            color: var(--bc-header-text, currentColor);
        }

        /* Y con la cabecera de cristal sobre la foto del hero, lo mismo que
           hace minisite-cards.css con los enlaces: blanco y sombra, que es lo
           único legible encima de una imagen cualquiera. */
        body:has(> .bc_wrap > .page-template-content.vendor-custom-home) .bc_header:not(.bc-header-solid) .content .header-left .bc-menu .bc-hsearch-btn,
        body:has(> .bc_wrap > [class*="bc_search_"]) .bc_header:not(.bc-header-solid) .content .header-left .bc-menu .bc-hsearch-btn {
            color: #fff;
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
        }

        /* Salvo cuando el listado va sin hero: ahí la barra ya tiene su color
           y el blanco sobraría. */
        body:has(> .bc_wrap > .bc_search_no_hero) .bc_header:not(.bc-header-solid) .content .header-left .bc-menu .bc-hsearch-btn {
            color: var(--bc-header-text, currentColor);
            filter: none;
        }

        /* El del cajón del móvil finge ser un campo de texto: es lo que se
           espera ver ahí arriba, aunque al tocarlo se abra la ventana. Sus
           colores son los de la página, que es lo que pinta el cajón. */
        .bc-menu-mobile .bc-hsearch-item {
            padding: 12px 20px 4px;
        }

        .bc-hsearch-fake {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 14px;
            border: 0;
            border-radius: 999px;
            background: color-mix(in srgb, var(--bc-text, #212529) 8%, transparent);
            color: var(--bc-text, #212529);
            font-size: 14px;
            text-align: left;
            cursor: pointer;
        }

        .bc-hsearch-fake > span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            opacity: .7;
        }

        /* ── La ventana ──────────────────────────────────────────────────── */
        .bc-search-pop {
            display: none;
            position: fixed;
            top: 11vh;
            left: 50%;
            /* La hoja del navegador le pone `inset: 0` a todo lo que lleva
               `popover`. Con `top` y `bottom` a la vez y sin altura propia, el
               panel se estiraría hasta abajo del todo. */
            right: auto;
            bottom: auto;
            width: min(620px, calc(100vw - 24px));
            max-height: min(72vh, 560px);
            margin: 0;
            padding: 0;
            transform: translateX(-50%);
            border: 0;
            border-radius: 18px;
            background: var(--bc-background, #fff);
            color: var(--bc-text, #212529);
            box-shadow: 0 24px 60px rgba(6, 12, 24, .28);
            overflow: hidden;
            /* Solo cuenta cuando no hay `popover` y la ventana se queda en el
               documento; con él, la capa superior va por encima de todo. */
            z-index: 10050;
        }

        .bc-search-pop:popover-open,
        .bc-search-pop.is-open {
            display: flex;
            flex-direction: column;
        }

        .bc-search-pop::backdrop {
            background: rgba(8, 14, 26, .45);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
        }

        /* El fondo del camino sin `popover`: un hermano de la ventana, porque
           `::backdrop` solo existe en la capa superior. */
        .bc-search-veil {
            position: fixed;
            inset: 0;
            z-index: 10040;
            background: rgba(8, 14, 26, .45);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
        }

        .bc-search-form {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
            margin: 0;
            padding: 14px 16px;
            border-bottom: 1px solid color-mix(in srgb, var(--bc-text, #212529) 10%, transparent);
        }

        .bc-search-icon {
            display: inline-flex;
            line-height: 0;
            opacity: .55;
        }

        .bc-search-input {
            flex: 1 1 auto;
            min-width: 0;
            padding: 6px 0;
            border: 0;
            outline: 0;
            background: transparent;
            color: inherit;
            font-size: 16px;
            line-height: 1.4;
        }

        .bc-search-input::placeholder {
            color: currentColor;
            opacity: .5;
        }

        .bc-search-input::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
        }

        .bc-search-close {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: color-mix(in srgb, var(--bc-text, #212529) 8%, transparent);
            color: inherit;
            cursor: pointer;
        }

        .bc-search-body {
            flex: 1 1 auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .bc-search-note {
            margin: 0;
            padding: 18px 16px;
            font-size: 13px;
            text-align: center;
            opacity: .6;
        }

        .bc-search-hit {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            color: inherit !important;
            text-decoration: none !important;
        }

        .bc-search-hit:hover,
        .bc-search-hit.is-active {
            background: color-mix(in srgb, var(--bc-text, #212529) 6%, transparent);
        }

        .bc-search-hit img,
        .bc-search-hit .bc-search-thumb {
            flex: 0 0 auto;
            width: 54px;
            height: 44px;
            border-radius: 10px;
            object-fit: cover;
            background: color-mix(in srgb, var(--bc-text, #212529) 10%, transparent);
        }

        .bc-search-hit .bc-search-texts {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .bc-search-hit .bc-search-title {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            font-weight: 600;
        }

        .bc-search-hit .bc-search-meta {
            font-size: 12px;
            opacity: .65;
        }

        .bc-search-all {
            display: block;
            padding: 13px 16px;
            border-top: 1px solid color-mix(in srgb, var(--bc-text, #212529) 10%, transparent);
            color: var(--bc-primary, #5191fa) !important;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            text-decoration: none !important;
        }

        .bc-search-all.is-active,
        .bc-search-all:hover {
            background: color-mix(in srgb, var(--bc-primary, #5191fa) 8%, transparent);
        }

        /* En el móvil, pantalla completa, igual que el menú del que se abre
           (el cajón también ocupa todo por debajo de 990px). El campo queda
           arriba: con el teclado abierto, centrarlo lo dejaría bajo las teclas.
           `100dvh` y no `100vh`: en iOS el segundo cuenta la barra del
           navegador y el final de la lista quedaría escondido detrás. */
        @media (max-width: 990px) {
            .bc-search-pop {
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100dvh;
                max-width: none;
                max-height: none;
                transform: none;
                border-radius: 0;
                box-shadow: none;
            }

            .bc-search-form {
                gap: 12px;
                padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
            }

            .bc-search-input {
                font-size: 17px;
            }

            .bc-search-close {
                width: 44px;
                height: 44px;
                border-radius: 12px;
            }

            .bc-search-body {
                overscroll-behavior: contain;
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }

            .bc-search-hit {
                padding: 12px 16px;
            }
        }
    

        .bc-header-blur .bc-hb-switchers {
            display: none;
        }

        @media (max-width: 1199px) {
            .bc-header-blur .bc-hb-switchers {
                display: flex;
                align-items: center;
                justify-self: end;
                gap: 6px;
            }

            .bc-header-blur .bc-hb-sw {
                position: relative;
                display: inline-flex;
            }

            /* El código del idioma o de la moneda ocupa el sitio del icono. Las
               banderas no valen: no se cargan en el minisite y una bandera no
               nombra un idioma de todas formas. */
            .bc-header-blur .bc-hb-sw-btn {
                font-family: inherit;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: .02em;
                line-height: 1;
                text-transform: uppercase;
                cursor: pointer;
            }

            /* Los colores se declaran enteros —fondo Y texto— porque la piel
               del tema pinta enlaces y cajas por su cuenta: un desplegable que
               sólo trae fondo acaba con el texto gris claro sobre blanco. */
            .bc-header-blur .bc-hb-sw-menu {
                position: absolute;
                top: calc(100% + 8px);
                right: 0;
                z-index: 10030;
                min-width: 200px;
                padding: 6px;
                border: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent);
                border-radius: 14px;
                background: var(--bc-background, #fff);
                box-shadow: 0 12px 32px rgba(6, 12, 24, .18);
            }

            .bc-header-blur .bc-hb-sw-menu[hidden] {
                display: none;
            }

            .bc-header-blur .bc-hb-sw-op {
                display: flex;
                align-items: center;
                gap: 10px;
                min-height: 40px;
                padding: 8px 10px;
                border-radius: 9px;
                color: var(--bc-text, #172031) !important;
                font-size: 14px;
                text-decoration: none !important;
            }

            .bc-header-blur .bc-hb-sw-op:hover,
            .bc-header-blur .bc-hb-sw-op:focus {
                background: color-mix(in srgb, var(--bc-primary, #5191fa) 8%, var(--bc-background, #fff));
            }

            /* Cápsula de ancho fijo: así los nombres quedan alineados aunque el
               código tenga dos letras ("es") o tres ("cop"). */
            .bc-header-blur .bc-hb-sw-cod {
                flex: 0 0 auto;
                min-width: 36px;
                padding: 2px 5px;
                border-radius: 6px;
                background: color-mix(in srgb, var(--bc-text, #374151) 10%, transparent);
                color: color-mix(in srgb, var(--bc-text, #374151) 72%, transparent);
                font-size: 11px;
                font-weight: 700;
                letter-spacing: .04em;
                text-align: center;
            }

            .bc-header-blur .bc-hb-sw-op.is-actual {
                font-weight: 600;
            }

            .bc-header-blur .bc-hb-sw-op.is-actual .bc-hb-sw-cod {
                background: var(--bc-primary, #5191fa);
                color: #fff;
            }
        }
    

        /* Alineados por arriba, NO centrados: el bloque de días es más alto que
           el de la fecha —los pasos redondos abultan más que una línea de
           texto—, y centrándolos su rótulo subía un par de píxeles por encima
           del de la fecha. Por arriba, los dos rótulos caen en la misma línea. */
        .bc-car-datedays { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
        .bc-car-datedays > .form-date-search { flex: 1 1 auto; min-width: 0; }

        /* En bloque y sin `gap`: así el hueco entre rótulo y valor lo sigue
           poniendo el margen que el tema le da a los <label>, el mismo que
           separa «Fechas» de su fecha. Con un gap propio los dos segundos
           renglones no coincidían. */
        .bc-car-days { flex: 0 0 auto; display: block; }
        .bc-car-days > label { white-space: nowrap; }

        .bc-car-days-ctrl { display: flex; align-items: center; gap: 6px; }
        .bc-car-days-btn {
            width: 20px; height: 20px; flex: 0 0 20px;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid currentColor; border-radius: 50%;
            font-size: 14px; line-height: 1; cursor: pointer;
            opacity: .45; transition: opacity .15s;
            -webkit-user-select: none; user-select: none;
        }
        .bc-car-days-btn:hover { opacity: 1; }

        /* Ancho de sobra para dos cifras. Iba a 38px y se quedaba corto: dentro
           del buscador el campo hereda el relleno horizontal de los <input> del
           tema, que se come el hueco por los lados. De ahí el box-sizing y el
           flex-basis fijo, para que además no lo encoja el flex del padre. */
        .bc-car-days input[type="number"] {
            width: 56px; flex: 0 0 56px; box-sizing: border-box;
            height: auto; min-height: 0; padding: 0 2px; margin: 0;
            text-align: center;
            border: 0; background: transparent; color: inherit; box-shadow: none;
            font: inherit; font-weight: 600; line-height: 1.3;
            -moz-appearance: textfield;
        }
        .bc-car-days input[type="number"]:focus { outline: none; box-shadow: none; }
        .bc-car-days input[type="number"]::-webkit-outer-spin-button,
        .bc-car-days input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

        @media (max-width: 575.98px) {
            .bc-car-datedays { gap: 12px; }
            .bc-car-days input[type="number"] { width: 46px; flex: 0 0 46px; }
        }
    

    /* ── El bloque, desvestido ──────────────────────────────────────────────
       `app.css` le pone 120px de relleno y `vendor-theme-css` un alto mínimo
       de 620, una sombra interior oscura y `display:flex`. Todo eso existe
       para sostener una foto a sangre; aquí no hay foto. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3,
    .bc-form-search-all.normal_v3 {
        display: block !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* Sin `isolation: isolate` y sin `z-index` en el bloque de abajo, y no es
       un olvido: los dos creaban un CONTEXTO DE APILADO, y dentro de uno el
       `z-index` de lo que haya deja de contar contra el resto de la página por
       muy alto que sea. El desplegable de destino pide 10050 —por delante del
       asistente flotante, que va en 9999— y salía igualmente por detrás, porque
       ese 10050 se resolvía dentro del héroe y el héroe entero se pintaba en la
       capa 0. Ver el bloque «Los desplegables, por delante» más abajo. */
    .normal_v3 .bc-herov3 {
        position: relative;
        padding: clamp(26px, 3.6vw, 56px) 0 clamp(30px, 3.6vw, 60px);
        color: var(--bc-text, #172031);
    }

    /* ── El relleno lo manda la sección ────────────────────────────────────
       Ese `clamp` de arriba es solo el valor por omisión, para el bloque al
       que nadie le ha tocado el espaciado. En cuanto en el constructor se le
       pone relleno a la sección, ese relleno vive en `.bc-block-wrap` y el del
       héroe sobra: sumados, pedir 90 daba 146 y no había forma de bajar de los
       56 de aquí.

       Basta con que el envoltorio EXISTA. `BaseBlock::view()` solo lo pinta
       cuando en la sección se ha tocado algo —relleno, margen, clase o id—, así
       que su sola presencia ya significa «aquí el espaciado lo lleva alguien».
       Antes esto miraba además que el atributo `style` trajera un `padding`, y
       eso dejaba fuera a quien configuraba solo MÁRGENES: la sección decía una
       cosa y el héroe seguía sumando sus 52px por lado.

       El segundo selector es el editor. Dentro del constructor el bloque NO
       lleva `.bc-block-wrap`: el espaciado se monta en el div seleccionable del
       propio editor (`.live-block-preview`, ver BaseBlock::view), así que sin
       esta línea lo que se ve mientras se edita no es lo que se publica —el
       relleno salía sumado— y mover el ajuste parecía no hacer nada. Ahí el
       bloque cuelga más adentro, de `.block-preview`, por eso el `:has()` va
       sin `>`. */
    .bc-block-wrap:has(> .bc-form-search-all.normal_v3) .bc-herov3,
    .live-block-preview:has(.bc-form-search-all.normal_v3) .bc-herov3 {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* ── El fondo: dónde se pinta ──────────────────────────────────────────
       Las dos manchas del diseño, en la paleta del vendedor. Muy diluidas a
       propósito: son ambiente, no un bloque de color.

       Van en DOS sitios y no en uno. Cuando en el constructor se le da relleno
       a la sección («Espaciado» del bloque), ese relleno no lo lleva el héroe:
       lo lleva `.bc-block-wrap`, que envuelve al bloque por fuera. Pintando
       solo el héroe, esos 90px de arriba y de abajo se quedaban del color de
       la página y aparecían dos franjas, una por lado, justo lo que se veía.

       Así que si hay envoltorio, el fondo lo pinta él y el héroe se queda
       transparente —una sola capa, sin costura—; y si no lo hay —el bloque sin
       espaciado configurado no lo pinta—, sigue pintándolo el héroe. */
    .normal_v3 .bc-herov3,
    .bc-block-wrap:has(> .bc-form-search-all.normal_v3),
    .live-block-preview:has(.bc-form-search-all.normal_v3) {
        background:
            radial-gradient(56% 52% at 4% 0%, color-mix(in srgb, var(--bc-primary, #6366f1) 15%, transparent) 0%, transparent 68%),
            radial-gradient(48% 46% at 0% 82%, color-mix(in srgb, var(--bc-secondary, var(--bc-primary, #34d399)) 16%, transparent) 0%, transparent 70%),
            var(--bc-background, #fff);
    }
    .bc-block-wrap:has(> .bc-form-search-all.normal_v3) .bc-herov3,
    .live-block-preview:has(.bc-form-search-all.normal_v3) .bc-herov3 {
        background: none;
    }

    /* Texto y fotos a dos columnas, y el buscador cruzando las dos por debajo.
       Las zonas se nombran para poder recolocarlas en móvil.

       `overflow: visible` no es decorativo: por debajo de 990px
       `minisite-cards.css` le pone `overflow-x: hidden` a TODO `.container`, y
       la regla del estándar dice que si un eje no es `visible`, el otro pasa a
       valer `auto`. Resultado: este contenedor se convertía en una caja con
       barra de desplazamiento propia y el héroe tenía su scroll dentro del
       scroll de la página. */
    .normal_v3 .bc-herov3-inner {
        display: grid;
        overflow: visible !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "copy media"
            "bottom bottom";
        gap: 0 clamp(24px, 4vw, 56px);
        align-items: start;
    }
    .normal_v3 .bc-herov3-copy { grid-area: copy; }
    .normal_v3 .bc-herov3-media { grid-area: media; }
    .normal_v3 .bc-herov3-bottom { grid-area: bottom; }
    .normal_v3 .bc-herov3.is-solo .bc-herov3-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "bottom";
    }

    /* ── Título, subtítulo y botón ─────────────────────────────────────────
       Centrados y blancos vienen de fuera; aquí van a la izquierda y en el
       color del texto del tema. */
    /* El texto se centra contra el collage en vez de colgar de arriba. Sin el
       botón, la columna izquierda mide la mitad que las fotos y arriba pegada
       dejaba un socavón de 250px entre el subtítulo y la tira de servicios. */
    .normal_v3 .bc-herov3-copy {
        align-self: center;
        padding-top: 0;
    }
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .text-heading {
        max-width: min(var(--bc-hero-title-max-width, 710px), 100%) !important;
        margin: 0 !important;
        color: var(--bc-text, #0f172a) !important;
        font-size: clamp(36px, 4.4vw, 64px) !important;
        font-weight: 700 !important;
        line-height: 1.04 !important;
        letter-spacing: -.035em !important;
        text-align: left !important;
        text-shadow: none !important;
        text-wrap: balance;
    }
    /* El subrayado corto bajo el título es del héroe con foto: aquí compite
       con el botón, que está tres líneas más abajo. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .text-heading::after {
        display: none !important;
    }
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .sub-heading {
        max-width: 520px !important;
        margin: 13px 0 0 !important;
        color: color-mix(in srgb, var(--bc-text, #172031) 62%, var(--bc-background, #fff)) !important;
        font-size: clamp(15px, 1.3vw, 18px) !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        text-align: left !important;
        text-shadow: none !important;
    }

    /* ── El collage ────────────────────────────────────────────────────────
       Dos celdas apiladas a la izquierda y una alta a la derecha, bajada un
       escalón: ese escalonado es el del diseño.

       El collage NO se mete debajo del buscador. Se probó —la barra montada
       sobre las fotos, como en la referencia— y con fotos altas la barra las
       cruzaba por la mitad. Ahora el alto está limitado y el margen inferior
       devuelve justo lo que la foto alta sobresale (`--v3-escalon`), así que
       el borde de abajo del collage es el borde de abajo de la foto más baja,
       y el aire hasta la tira de servicios lo pone `.bc-herov3-bottom`.

       Por eso el escalón es una variable y no un número escrito dos veces: el
       margen que sobresale y el que lo compensa TIENEN que ser el mismo. */
    .normal_v3 .bc-herov3-media {
        --v3-escalon: clamp(16px, 2.2vw, 34px);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* En `fr`, NO en porcentaje. Con `44% 56%` los dos porcentajes suman el
           alto entero y el `gap` se añade ENCIMA: el collage sobresalía por
           abajo exactamente lo que midiera el hueco. `fr` reparte lo que queda
           después de descontar los huecos, así que la suma vuelve a cuadrar. */
        grid-template-rows: 44fr 56fr;
        gap: clamp(12px, 1.5vw, 22px);
        height: clamp(230px, 23vw, 330px);
        margin-bottom: var(--v3-escalon);
    }
    .normal_v3 .bc-herov3-cell {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        background: color-mix(in srgb, var(--bc-text, #172031) 6%, var(--bc-background, #fff));
        box-shadow: 0 18px 40px color-mix(in srgb, var(--bc-text, #172031) 16%, transparent);
    }
    .normal_v3 .bc-herov3-cell-1 { grid-column: 1; grid-row: 1; }
    .normal_v3 .bc-herov3-cell-2 { grid-column: 1; grid-row: 2; }
    .normal_v3 .bc-herov3-cell-3 {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: var(--v3-escalon);
        margin-bottom: calc(var(--v3-escalon) * -1);
    }
    .normal_v3 .bc-herov3-cell img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
        object-fit: cover;
        opacity: 0;
        transition: opacity .9s ease;
    }
    .normal_v3 .bc-herov3-cell img.is-on {
        opacity: 1;
    }

    /* El aire va aquí y no en el collage porque sin fotos —o con la columna de
       texto más alta que ellas— el collage no manda en el alto de la fila y la
       tira de servicios se pegaba al botón. */
    .normal_v3 .bc-herov3-bottom {
        position: relative;
        margin-top: clamp(16px, 2vw, 28px);
    }

    /* ── Los desplegables, por delante ─────────────────────────────────────
       El asistente flotante del chat es fijo y va en 9999. `chisfis-skin` deja
       el autocompletado de destino en 999, así que en escritorio caía detrás
       de la burbuja en cuanto la lista era larga. En móvil ya lo resolvía la
       hoja del buscador subiendo el campo a 10050 al abrirse; esto hace lo
       mismo en todos los tamaños y para los dos desplegables. */
    body.bc-skin .bc-form-search-all.normal_v3 .bc-herov2-search .bc-autocomplete,
    body.bc-skin .bc-form-search-all.normal_v3 .bc-herov2-search .select-guests-dropdown.show {
        z-index: 10050 !important;
    }

    /* ── La tira de servicios ──────────────────────────────────────────────
       Mismo markup y mismo JavaScript que en los demás estilos —son los
       mismos botones con `data-bc-herov2-tab`—, otra piel: texto a la
       izquierda y un punto en el activo, sin las pastillas de cristal, que
       sobre fondo claro no se ven. */
    .bc-form-search-all.normal_v3 .bc-herov2-services {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        align-items: center;
        gap: 10px clamp(18px, 2vw, 30px) !important;
        width: 100% !important;
        margin: 0 0 4px !important;
        padding-bottom: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .bc-form-search-all.normal_v3 .bc-herov2-services::-webkit-scrollbar {
        display: none;
    }
    .bc-form-search-all.normal_v3 .bc-herov2-service {
        flex: 0 0 auto;
        flex-direction: row !important;
        gap: 8px !important;
        min-width: 0 !important;
        padding: 6px 0 !important;
        color: color-mix(in srgb, var(--bc-text, #172031) 55%, var(--bc-background, #fff)) !important;
        white-space: nowrap;
        transition: color .18s ease;
    }
    .bc-form-search-all.normal_v3 .bc-herov2-service::before {
        content: "";
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0;
        transition: opacity .18s ease;
    }
    .bc-form-search-all.normal_v3 .bc-herov2-service .ico {
        display: none !important;
    }
    .bc-form-search-all.normal_v3 .bc-herov2-service .txt {
        max-width: none !important;
        color: inherit !important;
        font-size: clamp(14px, 1.1vw, 17px) !important;
        font-weight: 600 !important;
        text-shadow: none !important;
    }
    .bc-form-search-all.normal_v3 .bc-herov2-service:hover,
    .bc-form-search-all.normal_v3 .bc-herov2-service.active {
        color: var(--bc-text, #111827) !important;
    }
    .bc-form-search-all.normal_v3 .bc-herov2-service.active::before {
        opacity: 1;
    }

    /* Los argumentos de venta: mismos textos, a la izquierda y en oscuro. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-hero-props {
        margin-top: clamp(14px, 1.8vw, 24px);
    }
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-hero-props-list {
        justify-content: flex-start;
    }
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-hero-props-item {
        color: color-mix(in srgb, var(--bc-text, #172031) 66%, var(--bc-background, #fff)) !important;
        text-shadow: none !important;
    }
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-hero-props-ico {
        color: var(--bc-primary, #6366f1) !important;
    }
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-hero-props-ico svg {
        filter: none !important;
    }

    /* ── El buscador, de 768 para arriba ───────────────────────────────────
       Por debajo NO se toca nada: manda la piel de móvil de `search-skin`, que
       ya pinta los campos como una tarjeta clara con texto oscuro y sobre este
       fondo se lee igual. Si estas reglas no estuvieran dentro de la consulta,
       ganarían a esa piel —llevan `.normal_v3` de más— y la desharían. */
    @media (min-width: 768px) {
        /* El tope lo pone «Ancho máximo del buscador (px)» del propio bloque,
           que llega en `--bc-hero-form-max-width`. Antes había un 1150 escrito
           a mano aquí y el ajuste del panel no hacía nada.

           Va en el ENVOLTORIO y no en el formulario, para que la tira de
           servicios respete el mismo ancho que la barra —si no, las pestañas
           salían más anchas que el buscador que abren—. Y `margin: 0`, porque
           la piel compartida lo centra y en este héroe todo va a la izquierda. */
        .bc-form-search-all.normal_v3 .bc-herov2-search {
            width: min(var(--bc-hero-form-max-width, 1150px), 100%) !important;
            max-width: none !important;
            margin: 0 !important;
        }
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc_form {
            width: 100% !important;
            max-width: none !important;
            margin: 16px 0 0 !important;
            background: var(--bc-background, #fff) !important;
            box-shadow: 0 18px 44px color-mix(in srgb, var(--bc-text, #172031) 15%, transparent) !important;
        }
    }
    /* Entre 768 y 1023 el buscador es la misma barra que en escritorio (ver
       modern-airbnb-compact.css, tramo 1023): el radio es el de una pastilla,
       no el de una tarjeta, y sigue redondo si los campos bajan de línea. */
    @media (min-width: 768px) and (max-width: 1023px) {
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc_form {
            border-radius: 36px !important;
        }
    }

    /* ── Tableta: una columna, collage más bajo y sin solape ───────────────
       El corte es 1024 y no 992 porque es ahí donde el propio buscador deja de
       ser una barra y apila sus campos (lo hace `app.css`): con dos columnas y
       los campos apilados, la mitad derecha del héroe se queda vacía mientras
       la izquierda crece hacia abajo.

       Aquí el collage pasa a ser una banda ancha y baja, y la foto alta pierde
       su escalón: bajada, se comería el aire que la separa del buscador. */
    @media (max-width: 1023px) {
        /* Aquí el collage baja al final. A una sola columna, entre el texto y
           el buscador era un muro de 300px que empujaba el formulario fuera de
           la primera pantalla; debajo, lo primero que se ve al entrar es el
           título y la caja de reserva, y las fotos acompañan al bajar.

           Se reordena la rejilla, no el marcado: el buscador sigue estando
           antes que las fotos en el documento, que es lo que leen un lector de
           pantalla y el tabulador. */
        .normal_v3 .bc-herov3-inner {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "copy"
                "bottom"
                "media";
        }
        .normal_v3 .bc-herov3-media {
            height: clamp(230px, 36vw, 300px);
            margin: clamp(18px, 3vw, 28px) 0 0;
        }
        .normal_v3 .bc-herov3-cell-3 {
            margin: 0;
        }
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .sub-heading {
            max-width: 620px !important;
        }
    }

    /* ── Móvil: una sola foto ──────────────────────────────────────────────
       El collage a 375px de ancho son tres sellos. Se queda la primera celda
       —que va pasando todas las fotos— a lo ancho. */
    @media (max-width: 767px) {
        .normal_v3 .bc-herov3 {
            padding: 20px 0 26px;
        }
        /* El collage se mantiene entero —las tres celdas—, solo más bajo: a
           375px de ancho cada columna mide unos 165, así que las fotos siguen
           siendo fotos y no sellos. Antes aquí se escondían dos celdas y
           quedaba una sola foto apaisada. */
        .normal_v3 .bc-herov3-media {
            height: clamp(190px, 54vw, 250px);
            gap: 10px;
            margin: clamp(18px, 5vw, 26px) 0 0;
        }
        .normal_v3 .bc-herov3-cell {
            border-radius: 14px;
        }
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .text-heading {
            font-size: clamp(28px, 8.4vw, 38px) !important;
        }
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .sub-heading {
            margin-top: 10px !important;
            font-size: 14px !important;
        }
        .bc-form-search-all.normal_v3 .bc-herov2-services {
            margin: 14px 0 8px !important;
        }
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-hero-props-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* ── El texto del héroe, centrado ───────────────────────────────────
           En escritorio el título va a la izquierda porque a su derecha está el
           collage y el bloque se lee como una columna. En el teléfono el
           collage baja al final y el texto se queda solo a lo ancho: alineado a
           la izquierda quedaba descolgado, con un vacío a la derecha del
           renglón corto («en San Andrés»).

           El `margin-inline: auto` no sobra: el h1 y el subtítulo llevan
           `max-width` propio (750 y 620), así que sin él se centraría el texto
           dentro de una caja que sigue pegada a la izquierda. */
        .normal_v3 .bc-herov3-copy { text-align: center; }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .text-heading,
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .sub-heading {
            margin-left: auto !important;
            margin-right: auto !important;
            text-align: center !important;
        }
    }

    /* ── La cabecera, si el vendedor la pidió transparente ─────────────────
       `minisite-cards.css` pinta la barra como cristal OSCURO con el texto en
       blanco mientras se está sobre el héroe, dando por hecho que detrás hay
       una foto. Sobre este héroe claro eso es blanco sobre blanco. Aquí se le
       devuelve el color del tema; en cuanto se baja del héroe, el script le
       pone `bc-header-solid` y vuelve a mandar su regla de siempre.

       La cadena del `:has()` es larga a propósito y no por gusto: la de
       minisite-cards lleva tres clases dentro del `:has()`, y con menos esta
       regla no gana aunque se imprima después. Ver [[rentcli-pdp-css-trampas]]. */
    body:has(> .bc_wrap > .page-template-content .bc-form-search-all.normal_v3) .bc_header:not(.bc-header-solid) {
        background: color-mix(in srgb, var(--bc-header-bg, #fff) 90%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--bc-text, #172031) 8%, transparent) !important;
        box-shadow: 0 4px 24px color-mix(in srgb, var(--bc-text, #172031) 10%, transparent) !important;
    }
    body:has(> .bc_wrap > .page-template-content .bc-form-search-all.normal_v3) .bc_header:not(.bc-header-solid) .content .header-left .bc-logo-text,
    body:has(> .bc_wrap > .page-template-content .bc-form-search-all.normal_v3) .bc_header:not(.bc-header-solid) .content .header-left .bc-menu > .main-menu > li > a,
    body:has(> .bc_wrap > .page-template-content .bc-form-search-all.normal_v3) .bc_header:not(.bc-header-solid) .content .header-right .topbar-items li > a,
    body:has(> .bc_wrap > .page-template-content .bc-form-search-all.normal_v3) .bc_header:not(.bc-header-solid) .content .header-right .bc-header-selectors li a,
    body:has(> .bc_wrap > .page-template-content .bc-form-search-all.normal_v3) .bc_header:not(.bc-header-solid) .content .header-right .bc-more-menu {
        color: var(--bc-header-text, #172031) !important;
        text-shadow: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .normal_v3 .bc-herov3-cell img {
            transition: none;
        }
    }


    .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 <head>, 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; }
    }


@media (max-width: 767px) {
    /* PDP fields: pale glass, hairline border and a restrained shadow. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group {
        min-height: 52px !important;
        padding: 8px 12px 8px 42px !important;
        border: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent) !important;
        border-radius: 18px !important;
        background: color-mix(in srgb, var(--bc-background, #fff) 94%, transparent) !important;
        box-shadow: 0 12px 28px rgba(6, 12, 24, .18) !important;
        -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
        backdrop-filter: blur(26px) saturate(150%) !important;
    }

    /* PDP uses line icons, not solid icon discs. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon {
        left: 11px !important;
        width: 20px !important;
        height: 20px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--bc-primary, #6366f1) !important;
        font-size: 16px !important;
        filter: none !important;
    }

    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: var(--bc-primary, #6366f1) !important;
        opacity: 1 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content label {
        margin-bottom: 2px !important;
        color: color-mix(in srgb, var(--bc-text, #374151) 72%, transparent) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: .045em !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 {
        color: var(--bc-text, #111827) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    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: 56px !important;
        min-height: 56px !important;
    }

    /* PDP guest stepper: transparent center and primary outline controls. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .select-guests-dropdown.show {
        padding: 8px 14px !important;
        border: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent) !important;
        border-radius: 18px !important;
        background: color-mix(in srgb, var(--bc-background, #fff) 96%, transparent) !important;
        box-shadow: 0 18px 44px rgba(6, 12, 24, .22) !important;
        -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
        backdrop-filter: blur(26px) saturate(150%) !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .select-guests-dropdown .dropdown-item-row {
        min-height: 43px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .select-guests-dropdown .dropdown-item-row + .dropdown-item-row {
        border-top: 1px solid color-mix(in srgb, var(--bc-text, #374151) 10%, transparent) !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 {
        width: 25px !important;
        height: 25px !important;
        border: 1.5px solid var(--bc-text, #374151) !important;
        background: transparent !important;
        color: var(--bc-text, #374151) !important;
        font-size: 14px !important;
        box-shadow: none !important;
    }

    /* El botón del buscador: forma, color y alto los pone search-submit.css,
       que carga después. De este estilo se conserva sólo el realce —la
       sombra—, que es lo suyo y lo único que se perdería.
       Ver [[rentcli-boton-buscar-explorar]]. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .button-item {
        margin-top: 7px !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .mainSearch__submit {
        box-shadow: 0 12px 30px rgba(6, 12, 24, .35) !important;
    }
}


@media (max-width: 767px) {
    /* One PDP-style glass card contains every search field. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent) !important;
        border-radius: 18px !important;
        background: color-mix(in srgb, var(--bc-background, #fff) 94%, transparent) !important;
        box-shadow: 0 18px 44px rgba(6, 12, 24, .22) !important;
        -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
        backdrop-filter: blur(26px) saturate(150%) !important;
        overflow: visible !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"],
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"] {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] + [class*="col-"] {
        border-top: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent) !important;
    }

    /* Individual rows are transparent; the parent card supplies the surface. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group,
    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 {
        width: 100% !important;
        height: auto !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* The reference has no leading icon discs. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon {
        display: none !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content label {
        margin: 0 0 2px !important;
        color: color-mix(in srgb, var(--bc-text, #374151) 68%, transparent) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        letter-spacing: .045em !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,
    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,
    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 {
        color: var(--bc-text, #111827) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .arrow {
        right: 0 !important;
        color: color-mix(in srgb, var(--bc-text, #374151) 68%, transparent) !important;
        font-size: 18px !important;
    }

    /* Keep the guest popover outside the unified card and above the CTA. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests .form-group.show {
        overflow: visible !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .button-item {
        margin-top: 10px !important;
    }
}


@media (max-width: 767px) {
    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: 0 !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 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"]:nth-child(2),
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"]:nth-child(3) {
        border-top: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent) !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"]:nth-child(3) {
        border-left: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent) !important;
        padding-left: 12px !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"]:nth-child(2) {
        padding-right: 12px !important;
    }

    /* Con un solo destino el campo desaparece del buscador
       (`search_form_fields()`), así que a Espacios le quedan dos campos y no
       tres. Las reglas de arriba —pensadas para tres— dejaban el primero a
       todo lo ancho y el segundo solo en la columna izquierda, con la derecha
       en blanco: justo el hueco que se venía a quitar. Cuando son dos, cada
       uno ocupa su columna. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"]:first-child:nth-last-child(2) {
        grid-column: auto !important;
        border-top: 0 !important;
        padding-right: 12px !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:nth-last-child(2) ~ [class*="col-"] {
        border-top: 0 !important;
        border-left: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent) !important;
        padding-left: 12px !important;
        padding-right: 0 !important;
    }

    /* Y con un solo campo, la fila entera. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .bc_form .g-field-search > .row > [class*="col-"]:only-child {
        grid-column: 1 / -1 !important;
        border-top: 0 !important;
        border-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .check-in-wrapper,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all #bc_space .form-select-guests .wrapper-more {
        min-width: 0 !important;
    }

    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,
    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 {
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}


@media (max-width: 767px) {
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search {
        position: relative !important;
        z-index: 999 !important;
    }

    /* iOS amplía la página al enfocar controles con texto menor de 16px. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .smart-search input.form-control,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form input.smart-search-location {
        font-size: 16px !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form input.smart-search-location[type="button"] {
        text-align: left !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search:has(.bc-autocomplete.show),
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search:has(.select-guests-dropdown.show) {
        z-index: 10050 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search:has(.bc-autocomplete.show) > .row,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search:has(.select-guests-dropdown.show) > .row {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all :is(#bc_space, #bc_car, #bc_boat, #bc_tour) .bc_form .g-field-search:has(.bc-autocomplete.show) > .row,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all :is(#bc_space, #bc_car, #bc_boat, #bc_tour) .bc_form .g-field-search:has(.select-guests-dropdown.show) > .row {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all :is(#bc_space, #bc_car, #bc_boat, #bc_tour) .select-guests-dropdown.show:popover-open {
        position: fixed !important;
        inset: auto 12px max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        transform: none !important;
        border-radius: 24px !important;
    }

}


.normal_v2 .bc-herov2 .bc-hero-props {
    margin-bottom: 24px !important;
}

@media (min-width: 768px) {
    body.bc-skin .bc-form-search-all .bc-herov2-search .smart-search,
    body.bc-skin .bc-form-search-all .bc-herov2-search .smart-search .form-control,
    body.bc-skin .bc-form-search-all .bc-herov2-search input.smart-search-location,
    body.bc-skin .bc-form-search-all .bc-herov2-search .smart-search-location[type="button"] {
        text-align: left !important;
    }

    body.bc-skin .bc-form-search-all .bc-herov2-search .smart-search .form-control,
    body.bc-skin .bc-form-search-all .bc-herov2-search input.smart-search-location {
        padding-left: 0 !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 767px) {
    body.bc-skin .bc_wrap .page-template-content .normal_v2 .bc-herov2 .bc-hero-props {
        margin-bottom: 18px !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group {
        position: relative !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon {
        display: inline-flex !important;
        position: absolute !important;
        top: 50% !important;
        left: 0 !important;
        z-index: 2 !important;
        align-items: center !important;
        justify-content: center !important;
        width: 23px !important;
        height: 23px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--bc-primary, #6366f1) !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: drop-shadow(0 3px 7px color-mix(in srgb, var(--bc-primary, #6366f1) 30%, transparent)) !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .form-content {
        padding-left: 31px !important;
    }

    .bc-search-popup-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 12px;
        padding: 2px 2px 12px;
        border-bottom: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent);
    }

    .bc-search-popup-heading__icon {
        display: inline-flex;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: color-mix(in srgb, var(--bc-primary, #6366f1) 12%, transparent);
        color: var(--bc-primary, #6366f1);
        font-size: 15px;
    }

    .bc-search-popup-heading__title {
        flex: 1 1 auto;
        color: var(--bc-text, #111827);
        font-size: 17px;
        /* Poppins llega hasta 700: un 750 lo sintetiza el navegador engordando
           el trazo, y se nota al lado del resto de titulos. */
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.01em;
    }

    .bc-search-popup-heading__close {
        display: none;
        position: fixed;
        z-index: 10070;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 1px solid color-mix(in srgb, var(--bc-text, #374151) 10%, transparent);
        border-radius: 50%;
        background: color-mix(in srgb, var(--bc-background, #fff) 62%, transparent);
        color: var(--bc-text, #111827);
        font-size: 13px;
        box-shadow: 0 6px 18px rgba(6, 12, 24, .12);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        backdrop-filter: blur(14px) saturate(150%);
        cursor: pointer;
    }

    .bc-search-popup-heading__close:active {
        transform: scale(.94);
    }

    .bc-search-popup-heading__close:popover-open {
        display: inline-flex;
        inset: auto;
    }

    body.bc-skin .bc-herov2-search .bc-autocomplete,
    body.bc-skin .bc-herov2-search .select-guests-dropdown,
    body.bc-skin .daterangepicker {
        padding-top: 14px !important;
    }

    body.bc-skin .daterangepicker > .bc-search-popup-heading {
        margin-right: 8px;
        margin-left: 8px;
    }
}


    /* ── Cursor «cerrar» sobre los velos ────────────────────────────────────
       Un clic en el velo cierra lo que esté abierto; con el ratón encima, el
       puntero se vuelve un círculo oscuro con una × para decirlo. SVG en línea
       de 32px con el punto activo en el centro, y `pointer` de reserva para el
       navegador que no pinte cursores en SVG. Va en `:root` para que lo use
       cualquier velo: `cursor: var(--rc-cursor-close)`. */
    :root {
        --rc-cursor-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23111827' fill-opacity='.88' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M11.5 11.5l9 9M20.5 11.5l-9 9' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, pointer;
    }
    /* ── En PC, la barra a todo el ancho ─────────────────────────────────────
       ⚠️ Desde 1024 esto lo pisa el bloque siguiente («la barra mide lo que
       piden sus campos», 27/09/2026): aquí sólo queda el tramo 768–1023.

       Sin ancho escrito en el panel, el envoltorio lleva `bc-hero-form-auto` y
       `search-skin` le pone `width: fit-content`: la barra medía lo que medían
       sus campos y en un héroe de 1110px se quedaba en 520, con los dos campos
       apretados a la izquierda y el botón comiéndose el resto.

       Ahora ocupa el ancho disponible y el tope lo pone el vendedor desde
       Diseño → «Ancho del buscador»: escrito un número, la clase no se añade,
       estas reglas no aplican y manda su valor. Vacío = ancho completo.

       ⚠️ Esto invierte lo que decía `search-skin` («automático = lo que midan
       los campos»), que existía para que una barra de un solo campo no se
       estirara a 1150. Es una decisión de diseño del 08/09/2026: se prefiere
       que respire, y quien quiera la barra corta escribe el número.

       Y va AQUÍ y no en `search-skin` porque las hojas de cada estilo se pintan
       en el CUERPO de la página: da igual la especificidad, gana la última, y
       la última es este parcial. */
    @media (min-width: 768px) {
        html .bc-form-search-all.bc-hero-form-auto .bc-herov2-search,
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.bc-hero-form-auto .bc-herov2-search .bc_form {
            width: 100% !important;
            max-width: none !important;
        }

        /* Y los campos se reparten ese ancho en vez de quedarse en su tamaño:
           con `0 1 auto` la zona de campos seguía midiendo lo suyo y todo el
           hueco nuevo se lo llevaba el botón. */
        html .bc-form-search-all.bc-hero-form-auto .bc_form .g-field-search,
        html .bc-form-search-all.bc-hero-form-auto .bc_form .g-field-search > .row,
        html .bc-form-search-all.bc-hero-form-auto .bc_form .g-field-search > .row > [class*="col-"] {
            flex: 1 1 auto !important;
        }
    }

    /* ── En PC, la barra mide lo que piden sus campos ───────────────────────
       Un mismo ancho no vale para uno que para cuatro campos. Con 500px en el
       panel, Ubicación y Fechas quedaban en 94px cada uno y se cortaban a
       «¿A dónd» (santamartatravel); con 950px, Fechas y Huéspedes se estiraban
       hasta dejar media barra vacía (apartamentosensanandres), y lo mismo
       pasaba con el panel vacío, que iba a todo el ancho. 27/09/2026.

       Desde 1024 la barra es proporcional: `fit-content`, cada campo con un
       suelo que crece con la pantalla (200–250px) y el botón al final. Uno,
       dos o tres campos dan barras de tres tamaños. El tope es el héroe. El
       número del panel ya no fija el ancho aquí; sigue mandando en el
       teléfono y la tableta. La clase va doblada para empatar con las reglas
       `.bc-hero-form-auto` de arriba y ganarles por orden. */
    @media (min-width: 1024px) {
        html .bc-form-search-all.bc-form-search-all .bc-herov2-search {
            width: fit-content !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.bc-form-search-all .bc-herov2-search .bc_form {
            width: 100% !important;
            max-width: 100% !important;
        }
        html .bc-form-search-all.bc-form-search-all .bc_form .g-field-search {
            flex: 1 1 auto !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0;
        }
        html .bc-form-search-all.bc-form-search-all .bc_form .g-field-search > .row {
            flex-wrap: nowrap !important;
        }
        /* `col-md-6` y compañía son porcentajes del ancho: con la barra midiendo
           lo que miden sus campos, un porcentaje se muerde la cola. */
        html .bc-form-search-all.bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] {
            flex: 1 1 auto !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0;
        }
        html .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] > .form-group {
            min-width: clamp(200px, 18vw, 250px);
        }
        /* El de autos mete DOS campos en una columna (Fechas y Días): cuenta
           doble, o la barra de un vendedor de autos se quedaba en 509px con
           los dos apretados (rentcarx, 27/09/2026). */
        html .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] > .form-group:has(.bc-car-datedays) {
            min-width: calc(clamp(200px, 18vw, 250px) * 2);
        }
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon {
        display: block !important;
        left: 0 !important;
        width: 20px !important;
        height: 20px !important;
        margin-top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        /* `background-color` y no el atajo: es lo que pinta la máscara. */
        background-color: var(--bc-primary, #5191fa) !important;
        color: var(--bc-primary, #5191fa) !important;
        box-shadow: none !important;
        /* El halo era del disco relleno; sobre un glifo suelto sólo ensucia. */
        filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .form-content {
        padding-left: 28px !important;
    }

    /* Menos en el renglón de autos, que mete DOS campos dentro: si la sangría
       del icono la pone el `.form-content`, la zona de campos empieza 28px a la
       derecha y su mitad —donde cae la raya— deja de ser la mitad de la
       TARJETA. Aquí el hueco del icono lo reserva la primera columna, así que
       la rejilla ocupa el ancho entero y el centro es el centro de verdad. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group:has(.bc-car-datedays) > .form-content {
        padding-left: 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: color-mix(in srgb, var(--bc-text, #111827) 55%, transparent) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: .05em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    /* El valor: la fecha, el destino escrito y la cifra de los días. En el
       escritorio iba a 14px con peso 400 y en gris mientras la etiqueta iba a
       14 con 600 —la jerarquía al revés, igual que estaba la ficha—. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .render,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .form-control,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-in-render,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-out-render,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days input[type="number"] {
        color: var(--bc-text, #111827) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    /* ── Dos mitades y la raya justo en medio ───────────────────────────────
       Los dos campos compartían un `flex` en el que la fecha crecía y los días
       ocupaban lo que pedían: la raya caía donde acabase el texto de la fecha,
       distinta en cada idioma y en cada formato. Con una rejilla de dos
       columnas iguales cae en el centro, como en la fila de «Días» y
       «Vehículos» de la ficha.

       `gap: 0` porque el aire lo dan ahora los rellenos de cada mitad, 14px a
       cada lado de la raya; con el `gap` encima la raya dejaba de estar
       centrada respecto a sus dos vecinos.

       `minmax(0, 1fr)` Y NO `1fr` A SECAS, que es lo que la descentraba: un
       elemento de rejilla no encoge por debajo de su contenido salvo que se le
       diga (`min-width: auto` es el valor de fábrica), y el contador de días
       tiene un mínimo. Con `1fr` la columna de los días se quedaba con lo que
       pedía y la raya se iba 5px en el escritorio y 9 a 320px; con el mínimo a
       cero las dos mitades son iguales SIEMPRE. Medido a 320, 360, 375, 414 y
       1280: desvío 0 en las cinco. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-datedays {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 !important;
        /* Arriba y no centradas: el bloque de la fecha es más alto que el de
           los días —19px de valor contra 20 de contador, más sus márgenes— y
           centrando cada mitad las dos etiquetas quedaban a distinta altura. */
        align-items: start;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-datedays > .form-date-search {
        padding-left: 28px;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-datedays > .bc-car-days {
        position: relative;
        padding-left: 14px;
    }

    /* La raya. Los dos campos comparten `.form-group` —y por tanto no les toca
       el `border-right` de la columna, que es lo que separa los campos en el
       resto de buscadores—, así que sin ella la fecha y los días se leían como
       un solo bloque largo. Es la misma línea al 12% que ya separa el último
       campo del botón. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-datedays > .form-date-search {
        padding-right: 14px;
        border-right: 1px solid color-mix(in srgb, var(--bc-text, #111827) 12%, transparent);
    }

    /* La caja de la cifra iba a 56px: sitio para tres dígitos en un campo que
       casi siempre lleva uno, y esos 16px de más eran justo los que le faltaban
       a la columna para partirse por la mitad. A 15px con peso 700, dos cifras
       miden 22. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days input[type="number"] {
        width: 40px !important;
        flex: 0 0 40px !important;
    }

    /* Sin el icono, el contador cabe de sobra en su mitad: a 320px son 113px
       menos los 14 de sangría, 99 para un «− 1 +» que mide 92. Por eso ya no
       hace falta apretarle nada en el teléfono. */

    /* ── «Días» va sin icono ────────────────────────────────────────────────
       Tuvo un reloj —un `::after` con la silueta recortada, porque ese campo lo
       dibuja el buscador de autos y no trae `<i>`— y se quitó: al lado del
       calendario de «Fechas», a 14px, eran dos iconos de tiempo seguidos para
       lo que en la práctica es un solo campo, «cuándo y cuántos días».

       Queda la sangría de 14px, la misma que el relleno derecho de la fecha:
       así el contenido de las dos mitades se separa lo mismo de la raya.

       La etiqueta sí se queda a la izquierda: iba centrada sobre el contador y
       entonces el «−» quedaba entre la raya y la palabra «DÍAS». */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days > label {
        display: block !important;
        text-align: left !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days-ctrl {
        justify-content: flex-start !important;
    }

    /* Los pasos, del color de marca y a plena tinta, como los del motor de
       reservas de la ficha. Iban en el gris del texto y al 45%: al lado de una
       icono de color y un valor negro parecían apagados, y sobre todo hacían
       que el mismo contador se viera de dos maneras distintas según se mirara
       la portada o una ficha. Ver [[rentcli-iconos-motor-reservas]]. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days-btn {
        color: var(--bc-primary, #5191fa) !important;
        border-color: currentColor !important;
        opacity: 1 !important;
    }

    /* ── Todo en el mismo eje ────────────────────────────────────────────────
       El icono y la raya iban con `top: 25px` escrito a mano, y el texto con
       rellenos de 5 arriba y 4 abajo más el hueco de línea de un `inline-block`:
       medido a 1280, el centro del texto caía en 447, el del icono en 460 y el
       de la raya en 464 sobre una barra centrada en 450. Ahora el campo centra
       su contenido con flex, el icono y la raya se cuelgan del 50 %, y los tres
       —más el botón— caen en el mismo píxel. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group {
        display: flex !important;
        align-items: center !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .form-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .render {
        display: block !important;
    }

    @media (min-width: 768px) {
        /* El rango de fechas (Espacios, Hoteles) son dos `.render` y una raya
           dentro del mismo `.check-in-wrapper`: con el `display:block` de
           arriba salían en tres líneas —«26/09», «–», «27/09»— y la fecha
           desbordaba la barra por arriba y por abajo. Van en una sola línea.
           En el móvil manda la regla de `#bc_space` de search-skin. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-in-wrapper > .render,
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-in-wrapper > span {
            display: inline !important;
            width: auto !important;
            position: static !important;
            white-space: nowrap;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-in-wrapper {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* El campo, gemelo del botón: la misma altura (60) y el mismo margen
           de 6px contra el borde de la barra por arriba, abajo y el costado.
           Antes el botón tenía 6 arriba y 10 a la derecha, y el campo no tenía
           forma propia. La sangría pasa de 16+20 a 6+30: el icono no se mueve. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form {
            padding-left: 6px !important;
            padding-right: 6px !important;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row {
            align-items: stretch !important;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] {
            display: flex !important;
            align-items: center !important;
            align-self: stretch !important;
            height: auto !important;
            min-height: 0 !important;
            margin: 6px 0 !important;
            padding-left: 30px !important;
            border-radius: 999px !important;
            cursor: pointer;
            transition: background-color .2s ease;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] > .form-group {
            width: 100% !important;
        }

        /* Al pasar el ratón el campo se enciende con un velo de la marca: dice
           «esto se pulsa» sin tener que dibujar un borde. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"]:hover,
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"]:focus-within {
            background-color: color-mix(in srgb, var(--bc-primary, #5191fa) 9%, transparent) !important;
        }

        /* La raya entre campos, centrada; y fuera la del último, que quedaba
           suelta al lado del botón: el botón ya es la separación. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"]::after {
            top: 50% !important;
            bottom: auto !important;
            transform: translateY(-50%) !important;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"]:last-child::after {
            display: none !important;
        }
    }

    @media (max-width: 767px) {
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon {
            width: 18px !important;
            height: 18px !important;
        }
    }
    /* ── La lista de destinos: encima de todo y con traje de app ────────────
       En el héroe de historias el bloque del buscador y la tira de tarjetas
       van los dos con `z-index: 1`, y la tira va después: la lista de destinos
       (y la de viajeros) se abría DETRÁS de las tarjetas, en PC y en el
       teléfono (santamartatravel, 27/09/2026). Mientras hay una abierta, el
       bloque del buscador sube por encima de la tira. */
    .bc-form-search-all.stories .bc-stories-content:has(.bc-autocomplete.show, .select-guests-dropdown.show),
    body:has(.daterangepicker[style*="display: block"]) .bc-form-search-all.stories .bc-stories-content {
        z-index: 5 !important;
    }

    /* Y detrás, velo oscuro con desenfoque, como el de la hoja del teléfono,
       para los TRES desplegables del buscador: destino, personas y fechas. La
       barra queda encendida y el resto de la página se apaga.

       El velo es el `::before` fijo de la propia barra (`.bc-herov2-search`),
       que al abrirse se vuelve contexto de apilado (`z-index: 10`): con
       `z-index: -1` el velo pinta por debajo de sus campos y por encima de todo
       lo que el héroe pinta antes que ella —foto, título, franja de ventajas—.
       Así vale para todos los estilos de héroe sin conocer su marcado. El
       calendario cuelga del `<body>` con `z-index` 3001 y queda por encima.

       El calendario no se abre dentro de la barra: se reconoce por el
       `display: block` que daterangepicker escribe en línea, y por eso lleva
       `body:has(…)` delante. Clic en el velo = clic fuera, y los tres ya se
       cierran con eso. Sólo PC: en el teléfono cada uno es una hoja con su
       propio velo (el `::backdrop` de abajo y el `body::before` del calendario
       en rentcli-skin). */
    @media (min-width: 991px) {
        /* El héroe entero sube mientras hay algo abierto: sin esto las
           secciones de después (tarjetas posicionadas, botones) pintaban por
           encima del velo. La cabecera (999) sigue arriba. */
        .bc-form-search-all:has(.bc-autocomplete.show, .select-guests-dropdown.show),
        body:has(.daterangepicker[style*="display: block"]) .bc-form-search-all:has(.check-in-out) {
            z-index: 20;
        }
        .bc-form-search-all .bc-herov2-search:has(.bc-autocomplete.show, .select-guests-dropdown.show),
        body:has(.daterangepicker[style*="display: block"]) .bc-form-search-all .bc-herov2-search {
            position: relative;
            /* 10 y no 3: la cortina del héroe (`bc-hero-cortina`, su `::after`)
               va a 3 y, al ir después en el árbol, pintaba encima del velo una
               franja blanca (apartamentosensanandres, 27/09/2026). */
            z-index: 10;
        }
        .bc-form-search-all .bc-herov2-search:has(.bc-autocomplete.show, .select-guests-dropdown.show)::before,
        body:has(.daterangepicker[style*="display: block"]) .bc-form-search-all .bc-herov2-search::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            background: rgba(0, 0, 0, .5);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            pointer-events: auto;
            cursor: var(--rc-cursor-close);
        }
    }

    /* En el teléfono destino y personas son una hoja abajo y home.js los sube
       a la capa superior del navegador (`popover`): así no los tapa nada,
       tampoco los botones flotantes. El velo es el de `.bc-herov2-inner`. */
    .bc-form-search-all .bc-autocomplete:popover-open::backdrop,
    .bc-form-search-all .select-guests-dropdown:popover-open::backdrop {
        cursor: var(--rc-cursor-close);
        background: rgba(0, 0, 0, .5);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    @media (max-width: 990px) {
        html body.bc-skin .bc-form-search-all .select-guests-dropdown.show:popover-open {
            position: fixed !important;
            inset: auto 12px max(12px, env(safe-area-inset-bottom)) !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            max-height: min(70vh, 520px) !important;
            margin: 0 !important;
            padding: 8px 14px !important;
            overflow-y: auto !important;
            transform: none !important;
            border-radius: 24px !important;
        }
    }

    /* En PC, una tarjeta flotante como las de una app: más ancha que el campo
       (177px partía «Parque Tayrona»), esquinas grandes, sombra honda, filas
       altas con el alfiler en una pastilla del color de marca. Cuelga del
       campo, separada 12px de la barra. */
    @media (min-width: 991px) {
        html body.bc-skin .bc-form-search-all .bc-herov2-search .smart-search .bc-autocomplete {
            top: calc(100% + 22px) !important;
            left: -28px !important;
            width: max-content !important;
            min-width: 300px !important;
            max-width: 380px !important;
            max-height: min(420px, 60vh) !important;
            padding: 8px !important;
            overflow-y: auto !important;
            border: 1px solid color-mix(in srgb, var(--bc-text, #111827) 8%, transparent) !important;
            border-radius: 22px !important;
            background: var(--bc-background, #fff) !important;
            box-shadow: 0 24px 60px rgba(6, 12, 24, .26), 0 2px 8px rgba(6, 12, 24, .08) !important;
        }
        html body.bc-skin .bc-form-search-all .bc-herov2-search .bc-autocomplete .item {
            display: flex !important;
            align-items: center;
            gap: 12px;
            min-height: 48px;
            margin: 0 !important;
            padding: 8px 12px 8px 8px !important;
            border: 0 !important;
            border-radius: 14px !important;
            background: transparent !important;
            color: var(--bc-text, #111827) !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            white-space: normal !important;
            cursor: pointer;
        }
        html body.bc-skin .bc-form-search-all .bc-herov2-search .bc-autocomplete .item:hover,
        html body.bc-skin .bc-form-search-all .bc-herov2-search .bc-autocomplete .item:focus {
            background: color-mix(in srgb, var(--bc-primary, #5191fa) 9%, transparent) !important;
            outline: 0;
        }
        html body.bc-skin .bc-form-search-all .bc-herov2-search .bc-autocomplete .item > i {
            display: inline-flex !important;
            flex: 0 0 36px;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            margin: 0 !important;
            border-radius: 12px;
            background: color-mix(in srgb, var(--bc-primary, #5191fa) 12%, transparent);
            color: var(--bc-primary, #5191fa) !important;
            font-size: 17px !important;
        }
    }
    /* ── Huéspedes en PC: la misma tarjeta de app que la lista de destinos ──
       Salía como el menú de Bootstrap a pelo: 140px, el «+» de Niños fuera de
       la caja y las flechitas del `<input type=number>` junto a los botones.
       Filas de 56px con la etiqueta a la izquierda y el contador a la
       derecha: botones redondos de 36px y la cifra sin flechas. */
    @media (min-width: 991px) {
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown {
            min-width: 300px !important;
            margin-top: 14px !important;
            padding: 8px !important;
            border: 1px solid color-mix(in srgb, var(--bc-text, #111827) 8%, transparent) !important;
            border-radius: 22px !important;
            background: var(--bc-background, #fff) !important;
            box-shadow: 0 24px 60px rgba(6, 12, 24, .26), 0 2px 8px rgba(6, 12, 24, .08) !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .dropdown-item-row {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 16px;
            min-height: 56px;
            margin: 0 !important;
            padding: 8px 8px 8px 14px !important;
            border: 0 !important;
            border-radius: 14px !important;
            background: transparent !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .dropdown-item-row + .dropdown-item-row {
            border-top: 1px solid color-mix(in srgb, var(--bc-text, #111827) 7%, transparent) !important;
            border-radius: 0 0 14px 14px !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .dropdown-item-row .label {
            margin: 0 !important;
            color: var(--bc-text, #111827) !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            white-space: nowrap;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .dropdown-item-row .val {
            display: flex !important;
            align-items: center !important;
            gap: 10px;
            margin: 0 !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown :is(.btn-minus, .btn-add) {
            display: inline-flex !important;
            flex: 0 0 36px;
            align-items: center;
            justify-content: center;
            width: 36px !important;
            height: 36px !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 1px solid color-mix(in srgb, var(--bc-primary, #5191fa) 45%, transparent) !important;
            border-radius: 50% !important;
            background: transparent !important;
            color: var(--bc-primary, #5191fa) !important;
            font-size: 18px !important;
            line-height: 1 !important;
            cursor: pointer;
            user-select: none;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown :is(.btn-minus, .btn-add):hover {
            background: color-mix(in srgb, var(--bc-primary, #5191fa) 10%, transparent) !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .count-display {
            display: inline-block !important;
            width: 28px !important;
            margin: 0 !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .count-display input {
            width: 100% !important;
            height: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            color: var(--bc-text, #111827) !important;
            font-size: 16px !important;
            font-weight: 700 !important;
            text-align: center !important;
            box-shadow: none !important;
            -moz-appearance: textfield;
            appearance: textfield;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .count-display input::-webkit-inner-spin-button,
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .count-display input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }


    @media (max-width: 767px) {
        :root {
            --bc-hero-pantalla: 100vh;
            --bc-hero-pantalla: calc(100svh - env(safe-area-inset-top, 0px));
            /* Hueco de la cabecera flotante. Ver la cabecera de este fichero. */
            --bc-hero-cabecera: 78px;
        }

        /* ── 1. La sección no suma espaciado ──────────────────────────────
           Salvo que el vendedor lo haya escrito EN la casilla de móvil. Lo que
           aquí sobra es el relleno de ESCRITORIO, que el móvil hereda cuando la
           casilla de móvil está vacía: en rentcarx eran 90px arriba y 30 abajo
           que, sumados al `100svh` de abajo, hacían imposible una pantalla. Un
           número escrito a mano en «Espaciado → Móvil» es otra cosa —es una
           orden— y antes se anulaba igual, así que ese control no hacía nada en
           el teléfono. `BaseBlock::bcMobilePaddingFlags()` marca el envoltorio
           con `bc-bw-pt-movil` / `bc-bw-pb-movil` cuando hay número, y aquí se
           le deja pasar. Con relleno propio el héroe pasa de una pantalla: es
           justo lo que pide quien lo escribe.

           Cada lado por su cuenta: quien sólo toca el de arriba no está
           pidiendo que vuelva el de abajo heredado del escritorio. */
        .bc-block-wrap:has(> .bc-form-search-all):not(.bc-bw-pt-movil) {
            padding-top: 0 !important;
        }
        .bc-block-wrap:has(> .bc-form-search-all):not(.bc-bw-pb-movil) {
            padding-bottom: 0 !important;
        }

        /* ── 2. El bloque, una pantalla exacta ──────────────────────────────
           Las tres cadenas son la misma regla escrita tres veces: «Normal V2» y
           «Normal V3» fijan `min-height: 0` y `padding: 0` con su propia clase
           delante (cinco clases más !important), y sin repetirla aquí con la
           suya esta regla no les llega. Ver [[rentcli-pdp-css-trampas]]. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all,
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v2,
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            min-height: var(--bc-hero-pantalla) !important;
            padding: 0 !important;
        }

        /* ── 3. El héroe llena el bloque ─────────────────────────────────── */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all > div:not(.effect) {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            flex: 1 1 auto !important;
            width: 100% !important;
            min-height: 0 !important;
        }
        /* El relleno sólo para los estilos que no traen envoltorio propio
           —«Normal», «Carrusel», «Carrusel V2» y «Vídeo»—. V2 y V3 tienen el
           suyo y sumarlos daba 140px de aire sobre el título. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all:not(.normal_v2):not(.normal_v3) > div:not(.effect) {
            padding: var(--bc-hero-cabecera) 0 18px !important;
        }

        /* ── «Normal V2» ────────────────────────────────────────────────────
           Ya medía una pantalla, pero con `100svh` escrito en dos sitios: en la
           app instalada esos dos altos no descontaban la franja del reloj y el
           héroe se pasaba. Aquí el alto lo lleva el bloque y estos dos sólo se
           estiran. */
        body.bc-skin .bc_wrap .page-template-content .normal_v2 .bc-herov2,
        body.bc-skin .bc_wrap .page-template-content .normal_v2 .bc-herov2-inner {
            flex: 1 1 auto !important;
            min-height: 0 !important;
        }
        body.bc-skin .bc_wrap .page-template-content .normal_v2 .bc-herov2 {
            display: flex !important;
            flex-direction: column !important;
        }

        /* ── «Normal V3» ────────────────────────────────────────────────────
           El collage es quien absorbe lo que sobre: la tercera fila de la
           rejilla pasa a `1fr` y las fotos dejan de tener alto escrito. Así el
           bloque da la pantalla exacta sin un socavón entre el buscador y el
           borde de abajo, y en una pantalla corta las fotos encogen hasta su
           mínimo en vez de empujar el buscador fuera. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3 {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            padding: var(--bc-hero-cabecera) 0 22px !important;
        }
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3-inner {
            flex: 1 1 auto !important;
            grid-template-rows: auto auto minmax(0, 1fr) !important;
        }
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3-media {
            height: auto !important;
            min-height: clamp(140px, 34vw, 210px) !important;
            /* `align-self` y no sólo `1fr`: la rejilla del héroe claro lleva
               `align-items: start` —el texto y el collage se alinean por arriba
               en el escritorio—, y con eso las fotos se quedaban en su alto
               mínimo dentro de una fila más alta. Medido: 72px de hueco entre
               el collage y el borde de abajo. */
            align-self: stretch !important;
        }

        /* ── Pantalla corta: sin collage ───────────────────────────────────
           Medido en un 360x640: título 94 + bajada + buscador + la tira de
           ventajas + las fotos en su mínimo dan 758px. Ahí «una pantalla» y
           «todo lo del héroe» son incompatibles, y algo tiene que salir: lo
           que sale son las fotos, que son acompañamiento —el título, el
           buscador y las ventajas son el héroe—. Encogerlas en vez de
           esconderlas dejaba una tira de 20px de foto, que se lee como un
           fallo.

           El corte va en 700px de ALTO, no de ancho: es el alto lo que falta.
           Por encima —un 375x812 y de ahí para arriba— el collage se queda.

           La fila del collage pasa a cero y el reparto lo hace
           `align-content`: si no, el hueco que dejaban las fotos se quedaba
           entero debajo de la tira de ventajas en vez de repartirse. */
        @media (max-height: 699px) {
            body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3-media {
                display: none !important;
            }
            body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3-inner {
                grid-template-rows: auto auto 0 !important;
                align-content: center !important;
            }
        }
    }


    /* `clip-path` además de `overflow`: en el iPhone la foto que se está
       animando pasa a su propia capa y Safari deja de recortarla con
       `overflow: hidden`; se salía de la caja tapando el título de la sección
       y el nombre de la ficha. La máscara en el mismo slide (no sólo en la
       galería) es la que obliga a Safari a recortar la capa de la foto. */
    .bc-card-gallery .bc-card-gallery-slide { overflow: hidden; clip-path: inset(0); }
    .bc-card-gallery .bc-card-gallery-slide.is-active {
        -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
        mask-image: radial-gradient(#fff, #000);
    }
    .bc-card-gallery .bc-card-gallery-slide img {
        transform: none !important;
        scale: 1;
        translate: 0 0;
        transition: scale .7s ease, translate .7s ease !important;
    }
    /* Sólo con ratón. En una pantalla táctil el `:hover` se queda pegado a la
       tarjeta que tocaste —al deslizar el carrusel, sin ir más lejos— y la foto
       seguía creciendo nueve segundos sin que nadie lo pidiera. */
    @media (hover: hover) and (pointer: fine) {
        .item-loop:hover .bc-card-gallery .bc-card-gallery-slide.is-active img,
        .item-loop:focus-within .bc-card-gallery .bc-card-gallery-slide.is-active img,
        .bc-card-gallery:hover .bc-card-gallery-slide.is-active img,
        .bc-card-gallery:focus-within .bc-card-gallery-slide.is-active img {
            scale: 1.14;
            translate: -2.5% -1.5%;
            transition: scale 9s cubic-bezier(.25, .1, .25, 1), translate 9s cubic-bezier(.25, .1, .25, 1) !important;
        }
        /* Las pares van hacia el otro lado, para que pasar de foto no repita el
           mismo recorrido. */
        .item-loop:hover .bc-card-gallery .bc-card-gallery-slide.is-active:nth-child(even) img,
        .item-loop:focus-within .bc-card-gallery .bc-card-gallery-slide.is-active:nth-child(even) img,
        .bc-card-gallery:hover .bc-card-gallery-slide.is-active:nth-child(even) img,
        .bc-card-gallery:focus-within .bc-card-gallery-slide.is-active:nth-child(even) img {
            translate: 2.5% 1.5%;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .bc-card-gallery .bc-card-gallery-slide img { scale: 1 !important; translate: 0 0 !important; transition: none !important; }
    }


    .bc-faq-lists--soft { --faq-primary:var(--bc-primary,var(--vendor-brand-color,var(--main-color,#5191fa))); --faq-secondary:var(--bc-secondary,var(--faq-primary)); --faq-bg:var(--bc-background,var(--vendor-bg-color,#fff)); --faq-text:var(--bc-text,var(--vendor-text-color,#172033)); --faq-accent:var(--bc-primary-ink,var(--faq-primary)); --faq-muted:color-mix(in srgb,var(--faq-text) 68%,transparent); padding:clamp(48px,6vw,82px) 0; background:var(--faq-bg); color:var(--faq-text); }
    .bc-faq-lists--soft * { box-sizing:border-box; }
    .bc-faq-lists--soft .bc-faq-soft-shell { position:relative; isolation:isolate; width:min(100%,820px); margin:0 auto; padding:0; background:transparent; }
    .bc-faq-lists--soft .bc-faq-soft-shell:before { content:""; position:absolute; z-index:-1; top:-180px; left:50%; width:500px; height:300px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--faq-primary) 18%,transparent),transparent 68%); transform:translateX(-50%); pointer-events:none; }
    .bc-faq-lists--soft .bc-faq-soft-heading { max-width:620px; margin:0 auto 30px; text-align:center; }
    .bc-faq-lists--soft .bc-faq-soft-mark { display:grid; width:46px; height:46px; margin:0 auto 18px; place-items:center; border:1px solid color-mix(in srgb,var(--faq-primary) 28%,transparent); border-radius:calc(var(--bc-radius,10px) + 6px); background:linear-gradient(145deg,color-mix(in srgb,var(--faq-primary) 15%,var(--faq-bg)),color-mix(in srgb,var(--faq-secondary) 8%,var(--faq-bg))); color:var(--faq-accent); font-size:20px; font-weight:700; box-shadow:0 10px 28px color-mix(in srgb,var(--faq-primary) 16%,transparent); }
    .bc-faq-lists--soft .bc-faq-soft-heading h2 { margin:0; color:var(--faq-text); font-family:var(--bc-font-heading,inherit); font-size:clamp(32px,4.3vw,50px); font-weight:700; line-height:1.1; letter-spacing:-.038em; }
    .bc-faq-lists--soft .bc-faq-soft-heading p { margin:11px 0 0; color:var(--faq-muted); font-size:15px; line-height:1.65; }
    .bc-faq-lists--soft .bc-faq-soft-list { display:grid; gap:2px; }
    .bc-faq-lists--soft .bc-faq-soft-item { position:relative; overflow:hidden; background:transparent; transition:transform .25s ease; }
    .bc-faq-lists--soft .bc-faq-soft-item:hover { transform:translateX(3px); }
    .bc-faq-lists--soft .bc-faq-soft-item[open] { background:transparent; }
    .bc-faq-lists--soft .bc-faq-soft-item summary { display:grid; grid-template-columns:32px 1fr 30px; gap:16px; align-items:center; padding:16px 4px; cursor:pointer; list-style:none; }
    .bc-faq-lists--soft .bc-faq-soft-item summary::-webkit-details-marker { display:none; }
    .bc-faq-lists--soft .bc-faq-soft-index { color:var(--faq-accent); font-size:11px; font-weight:700; letter-spacing:.08em; }
    .bc-faq-lists--soft .bc-faq-soft-question { color:var(--faq-text); font-family:var(--bc-font-heading,inherit); font-size:17px; font-weight:600; line-height:1.45; }
    .bc-faq-lists--soft .bc-faq-soft-toggle { position:relative; width:30px; height:30px; border-radius:calc(var(--bc-radius,6px) + 4px); background:color-mix(in srgb,var(--faq-text) 7%,transparent); color:var(--faq-muted); transition:transform .25s ease,background .2s ease,color .2s ease,box-shadow .2s ease; }
    .bc-faq-lists--soft .bc-faq-soft-toggle:before,.bc-faq-lists--soft .bc-faq-soft-toggle:after { content:""; position:absolute; top:50%; left:50%; width:10px; height:1.5px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%); }
    .bc-faq-lists--soft .bc-faq-soft-toggle:after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .2s ease; }
    .bc-faq-lists--soft .bc-faq-soft-item[open] .bc-faq-soft-toggle { transform:rotate(180deg); background:var(--faq-primary); color:var(--bc-on-primary,#fff); box-shadow:0 8px 20px color-mix(in srgb,var(--faq-primary) 25%,transparent); }
    .bc-faq-lists--soft .bc-faq-soft-item[open] .bc-faq-soft-toggle:after { transform:translate(-50%,-50%); }
    .bc-faq-lists--soft .bc-faq-soft-answer { padding:0 44px 18px 52px; color:var(--faq-muted); font-size:15px; line-height:1.7; animation:bcFaqSoftIn .28s ease; }
    .bc-faq-lists--soft .bc-faq-soft-answer p { margin:0; }
    @keyframes bcFaqSoftIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
    @media(max-width:767px) { .bc-faq-lists--soft{padding:38px 0}.bc-faq-lists--soft .bc-faq-soft-heading{margin-bottom:24px}.bc-faq-lists--soft .bc-faq-soft-item summary{grid-template-columns:24px 1fr 28px;gap:10px;padding:15px 0}.bc-faq-lists--soft .bc-faq-soft-question{font-size:15px}.bc-faq-lists--soft .bc-faq-soft-answer{padding:0 38px 16px 34px;font-size:14px} }


        .bc-call-to-action.style_2 .rc-ctaa {
            padding: 8px 0 4px;
        }

        .bc-call-to-action.style_2 .rc-ctaa-heading {
            margin: 0 0 16px;
            font-size: clamp(24px, 5.5vw, 34px);
            font-weight: 700;
            letter-spacing: -.02em;
            line-height: 1.15;
            color: var(--rc-ink, #111827);
        }

        .bc-call-to-action.style_2 .rc-ctaa-card {
            position: relative;
            overflow: hidden;
            max-width: 1100px;
            margin: 0 auto;
            min-height: 420px;
            display: flex;
            flex-direction: column;
            border-radius: var(--rc-r-xl, 24px);
            background: #101012;
            text-align: center;
            isolation: isolate;
            /* EL TONO: casi negro NEUTRO, sin teñir.
               Se probó sacándolo de `--bc-featured-bg` —el color con el que la
               piel pinta la tira de destacados, #ffd478 en rentcarx— para que
               los dos bloques se fundieran. Mezclado hasta casi negro ese ámbar
               no da un negro cálido: da café. Un gris neutro se lleva bien con
               cualquier foto y con cualquier acento de vendedor, que es lo que
               tiene que hacer un velo. */
            --rc-ctaa-ink: 16, 16, 18;
        }

        .bc-call-to-action.style_2 .rc-ctaa-bg,
        .bc-call-to-action.style_2 .rc-ctaa-veil,
        .bc-call-to-action.style_2 .rc-ctaa-blur {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .bc-call-to-action.style_2 .rc-ctaa-bg {
            object-fit: cover;
            z-index: 0;
        }

        /* UN SOLO DEGRADADO, de oscuro arriba a transparente abajo, sobre toda
           la tarjeta. Los puntos intermedios no son tramos: solo suavizan la
           caida para que no se vea la banda que deja un degradado de dos topes.

           El texto vive en la parte de arriba, que es la opaca; la foto se ve
           limpia en la mitad de abajo. */
        .bc-call-to-action.style_2 .rc-ctaa-veil {
            z-index: 1;
            background: linear-gradient(to bottom,
                rgba(var(--rc-ctaa-ink), .95) 0%,
                rgba(var(--rc-ctaa-ink), .80) 25%,
                rgba(var(--rc-ctaa-ink), .50) 55%,
                rgba(var(--rc-ctaa-ink), .18) 80%,
                rgba(var(--rc-ctaa-ink), 0) 100%);
        }

        /* El desenfoque acompaña al degradado con la misma forma: entero
           arriba, nada abajo. Sin la mascara difuminaria la foto completa. */
        .bc-call-to-action.style_2 .rc-ctaa-blur {
            z-index: 2;
            -webkit-backdrop-filter: blur(18px) saturate(115%);
            backdrop-filter: blur(18px) saturate(115%);
            -webkit-mask-image: linear-gradient(to bottom,
                #000 0%, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, .2) 60%, transparent 78%);
            mask-image: linear-gradient(to bottom,
                #000 0%, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, .2) 60%, transparent 78%);
            pointer-events: none;
        }

        /* Sin `backdrop-filter` —o sin mascara, que es el caso de algun Android
           viejo— el degradado solo no alcanza sobre una foto clara. Ahi se sube. */
        @supports not ((backdrop-filter: blur(1px)) and (mask-image: linear-gradient(#000, #000))) {
            .bc-call-to-action.style_2 .rc-ctaa-blur { display: none; }
            .bc-call-to-action.style_2 .rc-ctaa-veil {
                background: linear-gradient(to bottom,
                    rgba(var(--rc-ctaa-ink), .97) 0%,
                    rgba(var(--rc-ctaa-ink), .88) 28%,
                    rgba(var(--rc-ctaa-ink), .55) 58%,
                    rgba(var(--rc-ctaa-ink), .2) 82%,
                    rgba(var(--rc-ctaa-ink), 0) 100%);
            }
        }

        .bc-call-to-action.style_2 .rc-ctaa-copy {
            position: relative;
            z-index: 3;
            padding: 30px 20px 28px;
        }

        .bc-call-to-action.style_2 .rc-ctaa-card.is-textonly {
            min-height: 0;
        }

        .bc-call-to-action.style_2 .rc-ctaa-title {
            margin: 0;
            font-size: clamp(22px, 5.4vw, 28px);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -.01em;
            color: #fff;
            /* La sombra es el seguro de ultima instancia: si la foto que sube
               el vendedor es un cielo blanco, el texto sigue teniendo borde. */
            text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
        }

        /* El color va con !important y no es por vago: rentcli-skin pinta
           `.bc-skin .bc_wrap p { color: var(--sk-muted) !important }`, o sea
           TODO parrafo del sitio. En la maqueta local el subtitulo se veia
           blanco y en produccion salia gris #484848 sobre el velo oscuro.
           Entre dos declaraciones importantes gana la mas especifica, y esta
           —tres clases— le gana a la suya. */
        .bc-call-to-action.style_2 .rc-ctaa-sub {
            margin: 10px auto 0;
            max-width: 46ch;
            font-size: 15px;
            line-height: 1.45;
            color: rgba(255, 255, 255, .88) !important;
            text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
        }

        /* chisfis-skin pinta todo `<a>` del sitio con el acento del vendedor y
           con una cadena de siete clases; contra eso no hay especificidad que
           valga desde aqui, asi que el color y el fondo van con !important.
           Ver la nota 2 de rentcli-pdp-css-trampas. */
        .bc-call-to-action.style_2 .rc-ctaa-btn {
            display: inline-block;
            margin-top: 18px;
            padding: 11px 24px;
            border-radius: var(--rc-r-pill, 9999px);
            background: rgb(var(--rc-primary, 0 113 227)) !important;
            color: #fff !important;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.35;
            text-decoration: none !important;
            box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
            transition: filter var(--rc-t-fast, .15s) var(--rc-ease, ease),
                        transform var(--rc-t-fast, .15s) var(--rc-ease, ease);
        }

        .bc-call-to-action.style_2 .rc-ctaa-btn:hover,
        .bc-call-to-action.style_2 .rc-ctaa-btn:focus-visible {
            filter: brightness(1.1);
            transform: translateY(-1px);
            color: #fff !important;
        }

        @media (min-width: 768px) {
            .bc-call-to-action.style_2 .rc-ctaa { padding: 16px 0; }
            .bc-call-to-action.style_2 .rc-ctaa-heading { margin-bottom: 24px; }
            .bc-call-to-action.style_2 .rc-ctaa-card { min-height: 420px; }
            .bc-call-to-action.style_2 .rc-ctaa-copy { padding: 48px 40px 36px; }
            .bc-call-to-action.style_2 .rc-ctaa-title { font-size: clamp(28px, 3.2vw, 40px); }
            .bc-call-to-action.style_2 .rc-ctaa-sub { margin-top: 14px; font-size: 17px; }
            .bc-call-to-action.style_2 .rc-ctaa-btn { margin-top: 24px; padding: 13px 30px; font-size: 16px; }
        }

        /* En el telefono la tarjeta tiene que ser alta: el texto ocupa el tercio
           de arriba y lo que queda debajo es lo unico que se ve de la foto. Con
           una tarjeta baja el degradado se come la foto entera y vuelve a
           parecer un bloque de color. */
        @media (max-width: 767px) {
            .bc-call-to-action.style_2 .rc-ctaa-card { min-height: min(104vw, 420px); }
        }
    

        #ngpay-86060227 {
            --ngpay-h: 34px;
            --ngpay-lap: 40s;
            padding: 40px 0;
        }
        #ngpay-86060227 .ngpay__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
        #ngpay-86060227 .ngpay__title {
            font-size: 26px; font-weight: 700; line-height: 1.3; margin: 0 0 6px;
            text-align: center; color: var(--bc-text, inherit);
        }
        #ngpay-86060227 .ngpay__subtitle {
            font-size: 15px; margin: 0 0 26px; text-align: center;
            color: color-mix(in srgb, var(--bc-text, #333) 62%, var(--bc-background, #fff));
        }
        /* `clip` y no `hidden`: `hidden` convertiría la sección en contenedor de
           scroll y rompería cualquier `position: sticky` de arriba. */
        #ngpay-86060227 .ngpay__viewport { overflow-x: clip; }
        
        /* El degradado de los bordes evita que los logos aparezcan y
           desaparezcan de golpe al entrar y salir de la tira. */
        #ngpay-86060227 .ngpay__viewport {
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        }
        #ngpay-86060227 .ngpay__track { display: flex; width: max-content; }
        #ngpay-86060227 .ngpay__half { display: flex; align-items: center; }
        #ngpay-86060227 .ngpay__item {
            display: flex; align-items: center; justify-content: center;
            padding: 0 26px; flex: 0 0 auto;
        }
        #ngpay-86060227 .ngpay__logo {
            /* El tope de ancho es lo que impide que un logotipo alargado
               (Discover, Nequi) se coma media tira: al llegar al tope se
               dibuja algo más bajo, que es justo como se ven bien. */
            height: var(--ngpay-h); width: auto; max-width: calc(var(--ngpay-h) * 4.6);
            display: block;
            color: var(--bc-text, #131416);
        }
        #ngpay-86060227.is-card .ngpay__item {
            margin: 0 10px; padding: 12px 20px;
            background: #fff; border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
        }
        #ngpay-86060227.is-grey .ngpay__logo {
            filter: grayscale(1); opacity: .65; transition: filter .25s, opacity .25s;
        }
        #ngpay-86060227.is-grey .ngpay__item:hover .ngpay__logo { filter: none; opacity: 1; }
        /* Los fotogramas van con cada bloque y no en un @once compartido: el
           editor repinta un bloque suelto por Livewire y la tira se quedaría
           quieta en la vista previa. Repetidos son idénticos, no molestan. */
        @keyframes ngpay-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}#ngpay-86060227 .ngpay__track{animation:ngpay-scroll var(--ngpay-lap) linear infinite;animation-direction:normal;}#ngpay-86060227:hover .ngpay__track{animation-play-state:paused;}
        @media (max-width: 767.98px) {
            #ngpay-86060227 { padding: 28px 0; }
            #ngpay-86060227 .ngpay__title { font-size: 21px; }
            #ngpay-86060227 .ngpay__subtitle { font-size: 14px; margin-bottom: 18px; }
            #ngpay-86060227 .ngpay__item { padding: 0 16px; }
        }
        /* Quien pidió menos movimiento no ve la tira moverse; queda una fila
           que se puede arrastrar con el dedo. */
        @media (prefers-reduced-motion: reduce) {
            #ngpay-86060227 .ngpay__track { animation: none; }
            #ngpay-86060227 .ngpay__viewport { overflow-x: auto; }
        }
    

    .bc-minisite-footer { --mf-bg:var(--bc-footer-bg,#111827); --mf-text:var(--bc-footer-text,#cbd5e1); --mf-heading:var(--bc-footer-heading,var(--mf-text)); --mf-primary:var(--bc-footer-accent,var(--bc-primary,#5191fa)); --mf-on-primary:var(--bc-on-footer-accent,var(--bc-on-primary,#fff)); --mf-line:color-mix(in srgb,var(--mf-text) 16%,transparent); position:relative; overflow:hidden; padding:clamp(40px,5vw,64px) 0 0; background:var(--mf-bg); color:var(--mf-text); font-size:14px; }
    .bc-minisite-footer:before { content:none; }
    .bc-mf-cta { position:relative; display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,32px); margin:0 0 clamp(38px,4.5vw,56px); padding:clamp(22px,3vw,30px) clamp(22px,3.5vw,34px); border:1px solid var(--mf-line); border-radius:clamp(16px,2vw,var(--bc-card-radius,22px)); background:var(--mf-bg); }
    .bc-mf-cta:before { content:""; position:absolute; inset:18px auto 18px -1px; width:3px; border-radius:0 3px 3px 0; background:var(--mf-primary); }
    .bc-mf-eyebrow { display:block; margin-bottom:7px; color:color-mix(in srgb,var(--mf-primary) 78%,var(--mf-text)); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
    .bc-mf-cta h2 { margin:0 0 6px; color:var(--mf-heading); font-family:var(--bc-font-heading,inherit); font-size:clamp(23px,3vw,32px); font-weight:700; letter-spacing:-.025em; }
    .bc-mf-cta p { max-width:580px; margin:0; line-height:1.6; }
    /* Estas dos reglas van con tres clases delante y con !important porque
       chisfis-skin trae un `.bc-skin .bc_wrap p{color:var(--sk-muted)!important}`
       que le ganaba a `.bc-mf-cta p` aun llevando !important, y dejaba el
       párrafo en un gris de 4,2 de contraste: por debajo del mínimo legible.
       El `inherit` devuelve a cada párrafo del pie el color que le toca en vez
       del gris de las páginas de contenido, y el 82% deja margen suficiente
       aunque el vendedor elija un fondo claro. */
    .bc-minisite-footer .bc-mf-grid p { color:inherit!important; }
    .bc-minisite-footer .bc-mf-cta .bc-mf-cta-copy p { color:color-mix(in srgb,var(--mf-text) 82%,transparent)!important; }
    .bc-mf-primary-action { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 21px; border-radius:var(--rc-r-button,9999px); background:var(--mf-primary); color:var(--mf-on-primary)!important; font-weight:700; text-decoration:none!important; white-space:nowrap; box-shadow:0 12px 30px color-mix(in srgb,var(--mf-primary) 25%,transparent); transition:transform .2s ease,box-shadow .2s ease; }
    .bc-mf-primary-action:hover { transform:translateY(-2px); box-shadow:0 16px 34px color-mix(in srgb,var(--mf-primary) 35%,transparent); }
    .bc-mf-primary-action i { font-size:19px; }
    .bc-mf-grid { position:relative; display:grid; grid-template-columns:minmax(250px,1.45fr) repeat(3,minmax(135px,.7fr)); gap:clamp(28px,4.5vw,62px); padding-bottom:clamp(36px,4vw,50px); }
    .bc-mf-brand { min-width:0; }
    .bc-mf-logo { display:inline-flex; align-items:center; margin-bottom:18px; color:var(--mf-heading)!important; font-family:var(--bc-font-heading,inherit); font-size:24px; font-weight:700; line-height:1.15; text-decoration:none!important; }
    .bc-mf-logo img { display:block; width:auto; max-width:210px; max-height:52px; object-fit:contain; }
    .bc-mf-about { max-width:390px; margin-bottom:22px; color:color-mix(in srgb,var(--mf-text) 72%,transparent); line-height:1.75; }
    .bc-mf-about p { margin:0; }
    .bc-mf-social-wrap>span { display:block; margin-bottom:10px; color:var(--mf-text); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
    .bc-mf-socials { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
    .bc-mf-socials a { display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--mf-line); border-radius:50%; background:transparent; color:var(--mf-text)!important; font-size:15px; text-decoration:none!important; transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease; }
    .bc-mf-socials a:hover { transform:translateY(-3px); border-color:var(--mf-primary); background:var(--mf-primary); color:var(--mf-on-primary)!important; }
    .bc-mf-column h3 { margin:4px 0 20px; color:var(--mf-heading); font-family:var(--bc-font-heading,inherit); font-size:14px; font-weight:700; letter-spacing:.02em; }
    .bc-mf-links { display:grid; gap:11px; margin:0; padding:0; list-style:none; }
    .bc-mf-links a { display:inline-flex; align-items:center; color:color-mix(in srgb,var(--mf-text) 72%,transparent)!important; line-height:1.45; text-decoration:none!important; transition:color .2s ease,transform .2s ease; }
    .bc-mf-links a:before { content:""; width:0; height:1px; margin-right:0; background:var(--mf-primary); transition:width .2s ease,margin .2s ease; }
    .bc-mf-links a:hover { color:var(--mf-text)!important; transform:translateX(2px); }
    .bc-mf-links a:hover:before { width:12px; margin-right:7px; }
    .bc-mf-contact { display:grid; align-content:start; }
    .bc-mf-contact h3 { margin-bottom:6px; }
    .bc-mf-contact-list { display:grid; gap:14px; margin-top:14px; }
    .bc-mf-contact-list>a { display:flex; align-items:center; gap:10px; min-width:0; color:var(--mf-text)!important; text-decoration:none!important; }
    .bc-mf-contact-icon { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--mf-primary) 14%,transparent); color:color-mix(in srgb,var(--mf-primary) 80%,var(--mf-text)); }
    .bc-mf-contact-list>a>span:last-child { min-width:0; overflow-wrap:anywhere; }
    .bc-mf-contact small { display:block; margin-bottom:1px; color:color-mix(in srgb,var(--mf-text) 52%,transparent); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
    /* Los plegables. En escritorio no existen: la cabecera es un bloque más
       —sin marcador, sin cursor de mano— y el contenido va siempre abierto,
       de modo que el pie ancho se pinta exactamente igual que antes. El
       plegado lo enciende el media query de móvil, y quien navegue sin
       JavaScript lo ve todo desplegado, como siempre. */
    .bc-mf-acc-head { display:block; cursor:default; list-style:none; }
    .bc-mf-acc-head::-webkit-details-marker { display:none; }
    .bc-mf-acc-head::marker { content:""; }
    .bc-mf-acc-chev { display:none; }
    .bc-mf-lower { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 0; border-top:1px solid var(--mf-line); }
    .bc-mf-promise,.bc-mf-legal { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
    .bc-mf-promise span { color:color-mix(in srgb,var(--mf-text) 68%,transparent); font-size:12px; }
    .bc-mf-promise i { margin-right:5px; color:color-mix(in srgb,var(--mf-primary) 78%,var(--mf-text)); }
    .bc-mf-legal a { color:color-mix(in srgb,var(--mf-text) 68%,transparent)!important; font-size:12px; text-decoration:none!important; }
    .bc-mf-legal a:hover { color:var(--mf-text)!important; }
    @media(max-width:991px) { .bc-mf-grid{grid-template-columns:1.25fr 1fr 1fr}.bc-mf-contact{grid-column:2/-1}.bc-mf-brand{grid-row:span 2} }
    /* ── MÓVIL ────────────────────────────────────────────────────────────
       El pie ancho apilado se comía dos pantallas y media de scroll. Aquí se
       reordena en cuatro piezas cortas: una tarjeta de contacto con un solo
       botón, la marca y sus redes en una misma línea, las listas de enlaces
       plegadas, y una línea final con las promesas y lo legal. Nada se
       esconde: los enlaces siguen en el HTML, sólo se abren al tocarlos. */
    @media(max-width:767px) {
        .bc-minisite-footer { padding-top:22px; font-size:13px; }
        /* La tarjeta de contacto: el titular manda, el párrafo se recorta a
           dos líneas y la acción ocupa el ancho para poder tocarla. */
        .bc-mf-cta { display:block; margin:0 0 16px; padding:15px 16px; border-radius:16px;
            background:linear-gradient(135deg,color-mix(in srgb,var(--mf-primary) 13%,transparent),transparent 62%); }
        .bc-mf-cta:before { inset:14px auto 14px -1px; width:2px; }
        .bc-mf-eyebrow { display:none; }
        .bc-mf-cta h2 { margin-bottom:3px; font-size:18px; }
        .bc-minisite-footer .bc-mf-cta .bc-mf-cta-copy p { display:-webkit-box; overflow:hidden; margin:0;
            font-size:12px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
        .bc-mf-cta-actions { margin-top:13px; }
        .bc-mf-primary-action { width:100%; justify-content:center; min-height:46px; font-size:14px;
            box-shadow:0 8px 20px color-mix(in srgb,var(--mf-primary) 22%,transparent); }
        /* La rejilla deja de ser rejilla: una columna y sin huecos, que los
           separadores los ponen ahora las cabeceras plegables. */
        .bc-mf-grid { grid-template-columns:1fr; gap:0; padding-bottom:2px; }
        .bc-mf-brand { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px;
            grid-column:1/-1; grid-row:auto; padding-bottom:14px; }
        .bc-mf-logo { grid-area:1/1/2/2; margin:0; font-size:19px; }
        .bc-mf-logo img { max-width:150px; max-height:38px; }
        .bc-mf-about { display:-webkit-box; overflow:hidden; grid-area:2/1/3/3; max-width:none;
            margin:10px 0 0; font-size:12.5px; line-height:1.5;
            -webkit-box-orient:vertical; -webkit-line-clamp:2; }
        .bc-mf-about p { display:inline; }
        .bc-mf-social-wrap { grid-area:1/2/2/3; justify-self:end; }
        .bc-mf-social-wrap>span { display:none; }
        .bc-mf-socials { flex-wrap:nowrap; gap:6px; }
        .bc-mf-socials a { width:32px; height:32px; font-size:13px; }
        /* Cada columna, una fila plegable de 44px. */
        .bc-mf-column,.bc-mf-contact { grid-column:1/-1; border-top:1px solid var(--mf-line); }
        .bc-mf-acc-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
            padding:12px 2px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
        .bc-mf-column h3,.bc-mf-contact h3 { margin:0; font-size:13.5px; }
        .bc-mf-acc-chev { display:grid; width:22px; height:22px; place-items:center; border-radius:50%;
            background:color-mix(in srgb,var(--mf-text) 9%,transparent); font-size:11px;
            transition:transform .25s ease,background .25s ease; }
        .bc-mf-acc[open] .bc-mf-acc-chev { transform:rotate(180deg);
            background:color-mix(in srgb,var(--mf-primary) 20%,transparent); }
        .bc-mf-acc[open] .bc-mf-links,.bc-mf-acc[open] .bc-mf-contact-list { animation:bc-mf-reveal .22s ease; }
        .bc-mf-links { gap:0; padding:0 2px 12px; }
        .bc-mf-links a { padding:7px 0; font-size:13px; }
        .bc-mf-contact-list { gap:12px; margin:0; padding:2px 2px 14px; }
        .bc-mf-contact-list>a { font-size:12.5px; }
        .bc-mf-contact-icon { flex:0 0 30px; width:30px; height:30px; font-size:13px; }
        /* Promesas y legal: dos líneas centradas y muy pequeñas. */
        .bc-mf-lower { align-items:center; flex-direction:column; gap:9px; padding:13px 0 14px; text-align:center; }
        .bc-mf-promise,.bc-mf-legal { justify-content:center; gap:6px 8px; }
        .bc-mf-promise span { padding:4px 10px; border:1px solid var(--mf-line); border-radius:999px; font-size:10.5px; }
        .bc-mf-promise i { margin-right:4px; }
        .bc-mf-legal { gap:16px; }
        .bc-mf-legal a { font-size:11px; }
    }
    @keyframes bc-mf-reveal { from { opacity:0; transform:translateY(-6px); } }
    @media(prefers-reduced-motion:reduce) {
        .bc-mf-acc[open] .bc-mf-links,.bc-mf-acc[open] .bc-mf-contact-list { animation:none; }
        .bc-mf-acc-chev { transition:none; }
    }


.bc-bottombar{
    background:var(--bc-footer-bg,#111827);
    border-top:1px solid color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 14%,transparent);
    color:var(--bc-footer-text,#8a9dc0);
    font-size:11.5px;
    padding:11px 0;
    position:relative;
    z-index:10;
}
.bc-bottombar-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.bc-bottombar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.bc-bottombar-text{color:var(--bc-footer-text,#8a9dc0);}
.bc-bottombar-text a{color:color-mix(in srgb,var(--bc-primary,#5191fa) 76%,var(--bc-footer-text,#8a9dc0));text-decoration:none;}
.bc-bottombar-text a:hover{color:var(--bc-footer-text,#fff);}
.bc-bottombar-sep{width:1px;height:12px;background:color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 20%,transparent);display:inline-block;flex-shrink:0;}
.bc-bottombar-copy{color:var(--bc-footer-text,#596a85);white-space:nowrap;opacity:.85;}
.bc-bottombar-copy a{color:var(--bc-footer-text,#8a9dc0);text-decoration:none;}
.bc-bottombar-copy a:hover{color:var(--bc-footer-text,#fff);}
/* selectors */
.bc-bb-items{display:inline-flex;align-items:center;gap:0;margin:0;padding:0;list-style:none;}
.bc-bb-items li{padding:0 10px;display:inline-block;border-left:1px solid color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 14%,transparent);}
.bc-bb-items li:first-child{border-left:none;}
.bc-bb-items li a{color:var(--bc-footer-text,#8a9dc0);font-size:11.5px;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
.bc-bb-items li a:hover{color:var(--bc-footer-text,#fff);}
.bc-bb-items .flag-icon{font-size:14px;}
.bc-bb-items .dropdown-menu{bottom:100%;top:auto;margin-bottom:6px;min-width:110px;font-size:12px;
    background:var(--bc-footer-bg,#1e2f4a);border:1px solid color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 16%,transparent);border-radius:var(--bc-radius,6px);padding:4px 0;}
.bc-bb-items .dropdown-menu li a{color:var(--bc-footer-text,#c5d3e8)!important;padding:6px 14px;}
.bc-bb-items .dropdown-menu li a:hover{background:color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 8%,transparent);color:var(--bc-footer-text,#fff)!important;}
.bc-bb-items .fa-angle-down{font-size:10px;color:#596a85;}
/* En movil la barra se apilaba en tres bloques alineados a la izquierda para
   decir tres cosas cortas. Ahora va centrada y envuelve solo si no cabe, y los
   selectores de moneda e idioma son dos chapitas.

   OJO CON LOS TAMANOS: chisfis-skin sube aqui la letra a 13px y los enlaces a
   40px de alto —`body.bc-skin .bc_wrap .bc-bottombar{...!important}`, en el
   bloque de objetivos tactiles— y lo hace a proposito. Esto de abajo compacta
   la MAQUETA (huecos, direccion, separador) y no toca ni el tamano de letra ni
   la altura de los enlaces: encogerlos deshacia esa correccion. */
@media(max-width:600px){
    .bc-bottombar-inner{justify-content:center;gap:4px 10px;text-align:center;}
    .bc-bottombar-left{justify-content:center;gap:4px 8px;}
    .bc-bottombar-text{overflow:hidden;max-width:80vw;text-overflow:ellipsis;white-space:nowrap;}
    .bc-bottombar-sep{display:none;}
    .bc-bottombar-copy{white-space:normal;}
    .bc-bottombar-right{width:auto;}
    .bc-bb-items{gap:6px;}
    .bc-bb-items li{padding:0;border-left:none;}
    .bc-bb-items li a{border:1px solid color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 18%,transparent);
        border-radius:999px;padding-inline:10px;}
    /* Los lanzadores flotantes —reservar y asistente— se posan sobre los
       ultimos 56px de la ventana, asi que al llegar al final tapaban la moneda
       y el idioma. El hueco se reserva solo si esos botones estan en la pagina:
       un vendedor con esos modulos apagados no lo paga. La clase repetida es
       para pesar mas que el `padding-block:14px!important` del skin, que si no
       gana; un navegador sin :has() se queda como hasta ahora, superpuesto. */
    body:has(.bcrr-launch,.bcai-launch) .bc-bottombar.bc-bottombar.bc-bottombar{
        padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;}
}


            /* 44px es la altura de una barra de una línea: es lo que vale
               mientras el script no mide la de verdad. Sin un valor de salida
               la página se pintaría pegada arriba y daría un salto. */
            :root { --rc-abar-h: 44px; }

            /* Cerrada: ni barra ni hueco. La clase la pone el script de arriba
               antes de que esto se aplique. */
            html.rc-abar-off { --rc-abar-h: 0px; }
            html.rc-abar-off .rc-abar { display: none; }

            /* DOS VARIABLES Y NO UNA. `--rc-abar-h` es el hueco que reserva el
               <body> y NO cambia al hacer scroll: si cambiara, todo el contenido
               daría un salto cada vez que la barra se va. `--rc-abar-top` es
               dónde se apoya la cabecera fija, y ésa sí baja a cero cuando la
               barra se aparta (`rc-abar-away`, lo pone el script de abajo según
               lo que eligió el vendedor en «Al hacer scroll»). */
            /* Lo que la barra EMPUJA es su alto menos la franja del reloj: en la
               app instalada la barra se mide con esa franja dentro, y el body y
               la cabecera ya la bajan por su cuenta (minisite-cards.css). Fuera
               de la app instalada `env()` vale cero y es el alto entero. */
            :root { --rc-abar-empuje: max(0px, calc(var(--rc-abar-h) - env(safe-area-inset-top, 0px))); }
            :root { --rc-abar-top: var(--rc-abar-empuje); }
            html.rc-abar-away { --rc-abar-top: 0px; }
            .rc-abar { transition: translate .28s cubic-bezier(.22, .8, .3, 1); }
            html.rc-abar-away .rc-abar { translate: 0 -100%; }
            @media (prefers-reduced-motion: reduce) {
                .rc-abar { transition: none; }
            }

            .rc-abar {
                position: fixed; top: 0; left: 0; right: 0; z-index: 1002;
                background: var(--rc-abar-bg); color: var(--rc-abar-fg);
                padding-top: env(safe-area-inset-top, 0px);
                font-size: var(--rc-abar-fs, 14px); line-height: 1.35;
            }
            /* La tipografía elegida gana a la del tema, que la piel escribe con
               `!important` en párrafos y enlaces. Sin elección, no se toca. */
            .rc-abar[style*="--rc-abar-ff"],
            .rc-abar[style*="--rc-abar-ff"] p,
            .rc-abar[style*="--rc-abar-ff"] span,
            .rc-abar[style*="--rc-abar-ff"] strong,
            .rc-abar[style*="--rc-abar-ff"] a,
            .rc-abar[style*="--rc-abar-ff"] button {
                font-family: var(--rc-abar-ff), system-ui, sans-serif !important;
            }
            .rc-abar-msg strong { font-weight: var(--rc-abar-fw, 700); }
            /* La piel del tema pinta TODO `<p>` con `!important`, así que sin
               esto el texto de la barra sale gris — ver
               [[rentcli-skin-parrafos-gris]]. */
            /* `button` va en la lista porque el color de un botón NO se hereda:
               el aspa salía en el gris de fábrica del navegador sobre el fondo
               de la barra. */
            .rc-abar, .rc-abar p, .rc-abar span, .rc-abar strong,
            .rc-abar a, .rc-abar button {
                color: var(--rc-abar-fg) !important;
            }
            /* Los 44px de los lados son el hueco de la aspa, que va absoluta
               y por tanto fuera del flujo: con el relleno de 16px de siempre,
               una frase larga se le metía debajo. Igual a los dos lados para
               que el texto siga centrado de verdad. */
            .rc-abar-in {
                max-width: 1140px; margin: 0 auto; padding: 9px 44px;
                display: flex; align-items: center; justify-content: center;
                gap: 8px 14px; flex-wrap: wrap; text-align: center;
                overflow-wrap: anywhere;
            }
            /* El detalle viene del editor y llega envuelto en `<p>`: en la
               barra tiene que leerse como una frase, no como un bloque. */
            .rc-abar-det p { display: inline; margin: 0; }
            .rc-abar-det { font-weight: 400; opacity: .92; }
            .rc-abar-cta {
                border: 1px solid currentColor; border-radius: 999px;
                padding: 3px 14px; text-decoration: none; white-space: nowrap;
                font-weight: 500;
            }
            .rc-abar-cta:hover { text-decoration: none; opacity: .85; }
            .rc-abar-x {
                position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
                background: transparent; border: 0; padding: 0 6px;
                font-size: 22px; line-height: 1; cursor: pointer; opacity: .65;
            }
            .rc-abar-x:hover { opacity: 1; }
            .rc-abar-link { text-decoration: underline; text-underline-offset: 3px; }
            .rc-abar-link:hover { opacity: .85; }

            /* ── Un mensaje o carrusel ───────────────────────────────── */
            /* Todas las diapositivas en la misma celda; la que entra llega
               DESLIZÁNDOSE desde un lado y la que sale se va por el otro. El
               `overflow` recorta a las dos mientras cruzan. Las que esperan
               están fuera de la vista (y ocultas, para que no se lean ni se
               puedan pulsar). */
            .rc-abar-slides { display: grid; min-width: 0; overflow: hidden; }
            .rc-abar-slide {
                grid-area: 1 / 1;
                display: flex; align-items: center; justify-content: center;
                gap: 8px 14px; flex-wrap: wrap;
                transform: translate3d(100%, 0, 0);
                visibility: hidden;
                transition: transform .45s cubic-bezier(.22, .8, .3, 1), visibility 0s .45s;
            }
            .rc-abar-slide.is-on {
                transform: translate3d(0, 0, 0); visibility: visible;
                transition: transform .45s cubic-bezier(.22, .8, .3, 1), visibility 0s;
            }
            .rc-abar-slide.is-out-left  { transform: translate3d(-100%, 0, 0); }
            .rc-abar-slide.is-out-right { transform: translate3d(100%, 0, 0); }
            .rc-abar-slide.sin-transicion { transition: none !important; }
            .rc-abar--carrusel { flex-wrap: nowrap; }
            .rc-abar--carrusel .rc-abar-slides { flex: 1 1 auto; }
            .rc-abar-nav {
                flex: 0 0 auto; background: transparent; border: 0;
                padding: 0 8px; font-size: 26px; line-height: 1;
                cursor: pointer; opacity: .7;
            }
            .rc-abar-nav:hover { opacity: 1; }

            /* ── Marquesina ──────────────────────────────────────────── */
            .rc-abar--marquesina { flex-wrap: nowrap; justify-content: flex-start; }
            /* SIN `mask-image` y SIN variables en la animación. Las dos cosas
               funcionaban en Chrome y dejaban la marquesina quieta en el iPhone:
               Safari no repinta lo que se anima dentro de un elemento con
               máscara colgado de uno `position: fixed`. El difuminado de los
               bordes lo hacen ahora dos degradados ENCIMA, del color de la
               barra; la duración la escribe el script directamente en
               `animation-duration`. */
            .rc-abar-marq {
                position: relative;
                flex: 1 1 auto; min-width: 0; overflow: hidden;
            }
            .rc-abar-marq::before,
            .rc-abar-marq::after {
                content: ""; position: absolute; top: 0; bottom: 0; width: 24px;
                z-index: 1; pointer-events: none;
            }
            .rc-abar-marq::before { left: 0;  background: linear-gradient(90deg, var(--rc-abar-bg), transparent); }
            .rc-abar-marq::after  { right: 0; background: linear-gradient(270deg, var(--rc-abar-bg), transparent); }
            .rc-abar-marq-pista {
                display: inline-flex; white-space: nowrap;
                -webkit-transform: translate3d(0, 0, 0);
                will-change: transform;
                -webkit-animation: rc-abar-marq 30s linear infinite;
                        animation: rc-abar-marq 30s linear infinite;
            }
            /* Se para al pasar el ratón o al llegar con el tabulador a un
               enlace: un texto que se escapa mientras intentas pulsarlo no se
               puede pulsar.

               SÓLO CON RATÓN DE VERDAD (`hover: hover`). En el teléfono un
               toque deja el elemento en `:hover` hasta que se toca otra cosa,
               y la marquesina se quedaba parada para siempre en cuanto el
               dedo pasaba por encima al hacer scroll (17/09/2026). */
            @media (hover: hover) {
                .rc-abar-marq:hover .rc-abar-marq-pista,
                .rc-abar-marq:focus-within .rc-abar-marq-pista { animation-play-state: paused; }
            }
            .rc-abar-marq-tanda { display: inline-flex; align-items: center; gap: 14px; padding-right: 14px; }
            .rc-abar-marq-item { display: inline-flex; align-items: center; gap: 10px; }
            .rc-abar-marq-sep { opacity: .6; }
            /* `-50%` FIJO, sin variables. Safari no siempre recalcula una
               variable usada dentro de `@keyframes` y la marquesina se quedaba
               quieta en el iPhone. A cambio, la pista lleva SIEMPRE un número
               par de tandas iguales (lo asegura el script): moverla la mitad es
               moverla un número entero de tandas y el salto al volver a empezar
               no se ve. */
            @-webkit-keyframes rc-abar-marq {
                from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
                to   { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
            }
            @keyframes rc-abar-marq {
                from { transform: translate3d(0, 0, 0); }
                to   { transform: translate3d(-50%, 0, 0); }
            }
            @media (prefers-reduced-motion: reduce) {
                .rc-abar-marq-pista { animation: none; }
                .rc-abar-marq { overflow-x: auto; }
                .rc-abar-slide, .rc-abar-slide.is-on { transition: none; }
            }

            @media (max-width: 600px) {
                .rc-abar { font-size: calc(var(--rc-abar-fs, 14px) - 1px); }
                .rc-abar-in { padding: 8px 36px; }
            }

            /* EL HUECO SE SUMA, NO SE ESCRIBE (28/09/2026).
               Antes este bloque le ponía al <body> su `padding-top` entero
               —76/64px más la barra, o sólo la barra en las pantallas que abren
               con foto— con `html body … !important`. Con eso pisaba lo que
               cada pantalla decide para su propio hueco, que vive en otras
               hojas: el listado sin foto del teléfono pide 64px
               (rentcli-skin.css) y se quedaba en los 34 de la barra, con el
               título debajo de la cabecera. Cualquier pantalla nueva con un
               hueco propio tenía el mismo fallo esperándola.

               Ahora la barra sólo añade lo suyo, en una propiedad que no usa
               nadie más: el borde superior del <body>, transparente. El
               `padding-top` sigue siendo de quien le toca y los dos se suman
               solos. La ficha de servicio pone el body a cero y el borde sigue
               ahí, igual que en la portada con héroe. */
            html body { border-top: var(--rc-abar-empuje) solid transparent !important; }

                            /* LA CABECERA SE BAJA CON `translate`, NO CON `top`.
                   Cada estilo de cabecera la coloca a su manera: la pastilla
                   flotante a 12px (8px en el teléfono), la «blur» del móvil
                   pegada al borde con `inset: 0 0 auto !important`, y las que
                   vengan. Con `top` había que igualar a cada una por separado,
                   y la que se escapaba —la blur, en el teléfono— quedaba debajo
                   de la barra (16/09/2026). `translate` se SUMA a donde esté la
                   cabecera, sea donde sea, y no lo escribe ningún estilo.

                   Sin `!important` y con menos peso que la regla que la esconde
                   al bajar (`body.frontend-page .bc_wrap .bc_header.bc-header-away`,
                   en minisite-cards.css): mientras está escondida manda ésa, y
                   al volver manda ésta. */
                html body.frontend-page .bc_wrap .bc_header {
                    translate: 0 var(--rc-abar-top);
                }

                /* Que la cabecera baje y suba a la vez que la barra, con la
                   misma curva que su autoocultado. La regla de minisite-cards.css
                   pesa `body.frontend-page .bc_wrap .bc_header` y lleva
                   `!important`: hace falta un escalón más. */
                html body.frontend-page .bc_wrap .bc_header {
                    transition: translate .28s cubic-bezier(.22, .8, .3, 1), background .3s, box-shadow .3s !important;
                }
                @media (prefers-reduced-motion: reduce) {
                    html body.frontend-page .bc_wrap .bc_header {
                        transition: background .3s, box-shadow .3s !important;
                    }
                }
                    

            .bcai-launch,.bcai-launch *{box-sizing:border-box}
            .bcai-launch{position:fixed;bottom:16px;z-index:9998;border:0;cursor:pointer;background:var(--bcai-tint,#33D5C5);color:#fff;font-size:16px;box-shadow:var(--rc-shadow-lg,0 4px 14px rgba(0,0,0,.20));display:flex;align-items:center;justify-content:center;gap:7px}
            .bcai-launch svg{display:block;flex:0 0 auto;width:21px;height:21px}
            .bcai-launch span{display:none}
            .bcai-launch.hidden{display:none}
            .bcai-launch.bcai-pos-derecha,.bcai-launch.bcai-pos-izquierda{width:46px;height:46px;border-radius:50%}
            .bcai-launch.bcai-pos-derecha{right:16px}
            .bcai-launch.bcai-pos-izquierda{left:16px}
            .bcai-launch.bcai-pos-centro{left:50%;transform:translateX(-50%);height:40px;padding:0 16px;border-radius:20px;font-size:15px}
            .bcai-launch.bcai-pos-centro svg{width:17px;height:17px}
            .bcai-launch.bcai-pos-centro span{display:inline;font-size:13px;font-weight:600;white-space:nowrap}
            .bcai-float:not(.open){display:none}