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


        /* ── 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;
            }
        }
    

    /* ── El héroe ───────────────────────────────────────────────────────────
       La foto de fondo va en su propia capa (`.effect`, como en los
       carruseles, para que `hero-alto-movil` no la toque) con un velo que
       oscurece hacia el pie: ahí se apoyan las tarjetas. Sin foto, un
       degradado de la marca hacia casi negro. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        min-height: 0;
        padding-bottom: 0 !important;
        background: #0c1114;
    }

    .bc-form-search-all.stories .bc-stories-bgclip {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .bc-form-search-all.stories .bc-stories-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center 40%;
    }

    /* Con foto, dos capas (fuerzas calculadas en el servidor a partir del %
       del panel): debajo el tinte de los tres colores, cada uno en su tramo;
       encima el oscuro, negro y más denso al pie. El oscuro va encima para
       que mande: un color claro elegido (blanco, amarillo) tiñe pero no
       aclara la foto ni le quita lectura al texto. */
    .bc-form-search-all.stories .bc-stories-bg.has-photo::before,
    .bc-form-search-all.stories .bc-stories-bg.has-photo::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .bc-form-search-all.stories .bc-stories-bg.has-photo::before {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--bc-grad-1) var(--bc-tin-1, 30%), transparent) 0%,
            color-mix(in srgb, var(--bc-grad-2) var(--bc-tin-2, 21%), transparent) 45%,
            color-mix(in srgb, var(--bc-grad-3) var(--bc-tin-3, 27%), transparent) 100%);
    }

    .bc-form-search-all.stories .bc-stories-bg.has-photo::after {
        background: linear-gradient(180deg,
            color-mix(in srgb, #000 var(--bc-osc-1, 36%), transparent) 0%,
            color-mix(in srgb, #000 var(--bc-osc-2, 45%), transparent) 45%,
            color-mix(in srgb, #000 var(--bc-osc-3, 75%), transparent) 100%);
    }

    /* Paralaje: la foto baja a un 30 % de lo que baja la página. Lo mueve el
       guion de abajo con `transform` —en la GPU, sin repintar—. Al bajar sólo
       se destapa la franja de arriba, y esa franja queda siempre por encima
       del borde de la pantalla: no hace falta agrandar la capa. */
    .bc-form-search-all.stories .bc-stories-bg.has-photo {
        will-change: transform;
    }

    /* Sin foto: el degradado de tres colores del panel, con la receta del
       original —medida en su hoja—: seis paradas de arriba abajo (el color
       de arriba, su mezcla con el del centro al 16 %, el del centro al 38 %,
       el de abajo al 62 %, y ese mismo aclarándose hasta fundirse con el
       fondo de la página al pie) y dos brillos encima: uno amplio del color
       de abajo a la altura del buscador y otro más chico del de en medio a
       su izquierda. Así los tres colores del vendedor se ven como el
       atardecer del ejemplo y no como tres franjas. */
    .bc-form-search-all.stories .bc-stories-bg.is-plain {
        background:
            radial-gradient(60% 45% at 50% 62%, color-mix(in srgb, var(--bc-grad-3) 55%, transparent), transparent 70%),
            radial-gradient(45% 35% at 30% 55%, color-mix(in srgb, var(--bc-grad-2) 45%, transparent), transparent 70%),
            linear-gradient(180deg,
                var(--bc-grad-1) 0%,
                color-mix(in srgb, var(--bc-grad-1) 55%, var(--bc-grad-2)) 16%,
                var(--bc-grad-2) 38%,
                var(--bc-grad-3) 62%,
                color-mix(in srgb, var(--bc-grad-3) 45%, #fff) 80%,
                color-mix(in srgb, var(--bc-grad-3) 5%, var(--bc-background, #fdfaf7)) 96%);
    }

    .bc-form-search-all.stories .bc-stories-bg.is-plain::after {
        display: none;
    }

    .bc-form-search-all.stories .bc-stories-hero {
        width: 100%;
    }

    .bc-form-search-all.stories .bc-stories-content,
    .bc-form-search-all.stories .bc-stories {
        position: relative;
        z-index: 1;
    }

    /* ── La tira ────────────────────────────────────────────────────────────
       `--bc-stories-paso` es lo que avanza la tira por tarjeta (ancho + hueco)
       y `--bc-stories-vel` los segundos que tarda en hacerlo: 260px en 3,23 s
       son los ~80px/s del original. En el teléfono el paso es 182 y el tiempo
       baja en proporción, para que la velocidad sea la misma. */
    /* En PC, más grande y más lenta que el original (pedido el 25/09/2026):
       280×448 y 300px de paso en 6 s = 50px/s. */
    .bc-form-search-all.stories .bc-stories {
        --bc-stories-gap: 20px;
        --bc-stories-w: 280px;
        --bc-stories-h: 448px;
        --bc-stories-vel: 6s;
        display: flex;
        gap: var(--bc-stories-gap);
        width: 100%;
        margin-top: 56px;
        overflow: hidden;
        user-select: none;
    }

    .bc-form-search-all.stories .bc-stories-track {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: var(--bc-stories-gap);
        min-width: 100%;
        /* 40px de aire bajo las tarjetas, como el original, más los 34 de la
           curva con la que se cierra el héroe (`bc-hero-cortina`, la pone
           hero-parallax-script), que los taparía. */
        padding: 0 0 74px;
        animation: bc-stories-scroll calc(var(--bc-stories-n, 10) * var(--bc-stories-vel)) linear infinite;
        will-change: transform;
    }

    @keyframes bc-stories-scroll {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(calc(-100% - var(--bc-stories-gap)), 0, 0); }
    }

    .bc-form-search-all.stories .bc-stories:hover .bc-stories-track,
    .bc-form-search-all.stories .bc-stories:focus-within .bc-stories-track,
    .bc-form-search-all.stories .bc-stories.is-held .bc-stories-track,
    .bc-form-search-all.stories .bc-stories.is-off .bc-stories-track {
        animation-play-state: paused;
    }

    /* ── La tarjeta ─────────────────────────────────────────────────────────── */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story {
        position: relative;
        flex: 0 0 auto;
        width: var(--bc-stories-w);
        height: var(--bc-stories-h);
        overflow: hidden;
        border-radius: 16px;
        /* Sin filo: el blanco al 10 % del original se leía como un contorno
           raro sobre el fondo oscuro. La separación la da la sombra. */
        border: 0;
        /* Mientras llega la foto: velo claro sobre el fondo del héroe, no un
           bloque negro que se lee como hueco roto. */
        background: rgba(255, 255, 255, .12);
        box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .55);
        transform: translateZ(0);
    }

    .bc-form-search-all.stories .bc-story > img,
    .bc-form-search-all.stories .bc-story > video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        transition: opacity .25s ease;
    }

    .bc-form-search-all.stories .bc-story > video {
        opacity: 0;
    }

    .bc-form-search-all.stories .bc-story > video.is-playing,
    .bc-form-search-all.stories .bc-story > video.is-solo {
        opacity: 1;
    }

    /* Velo del pie sólo si hay texto encima: el original deja la foto limpia. */
    .bc-form-search-all.stories .bc-story.has-caption::after {
        content: "";
        position: absolute;
        inset: 45% 0 0;
        z-index: 1;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72));
        pointer-events: none;
    }

    /* El enlace ocupa la tarjeta entera por debajo de la etiqueta y del botón. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story-link {
        position: absolute;
        inset: 0;
        z-index: 3;
        border-radius: inherit;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story-link:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
    }

    .bc-form-search-all.stories .bc-story-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        max-width: calc(100% - 20px);
        padding: 2px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .9);
        color: #020617;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    .bc-form-search-all.stories .bc-story-caption {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
        pointer-events: none;
    }

    .bc-form-search-all.stories .bc-story.has-sound .bc-story-caption {
        right: 52px;
    }

    /* `span` y no `p`: la piel pinta todo `<p>` en gris con `!important`.
       Ver [[rentcli-skin-parrafos-gris]]. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #fff !important;
        font-size: 18px;
        font-weight: 800;
        line-height: 1.25;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story-meta {
        color: rgba(255, 255, 255, .88) !important;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story-sound {
        position: absolute;
        right: 10px;
        bottom: 10px;
        z-index: 4;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .2);
        color: #fff;
        cursor: pointer;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition: background-color .2s ease;
    }

    @media (hover: hover) {
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story-sound:hover {
            background: rgba(255, 255, 255, .3);
        }
    }

    .bc-form-search-all.stories .bc-story-sound .is-sound,
    .bc-form-search-all.stories .bc-story-sound.is-on .is-muted {
        display: none;
    }

    .bc-form-search-all.stories .bc-story-sound.is-on .is-sound {
        display: block;
    }

    /* En un portátil (hasta 1599px) las de 280 pesaban demasiado bajo el
       buscador (pedido el 27/09/2026, mirando 1440): 220×352, la misma
       proporción, y 240px de paso en 4,8 s para seguir a 50px/s. */
    @media (min-width: 992px) and (max-width: 1599px) {
        .bc-form-search-all.stories .bc-stories {
            --bc-stories-w: 220px;
            --bc-stories-h: 352px;
            --bc-stories-vel: 4.8s;
        }
    }

    /* ── Teléfono ───────────────────────────────────────────────────────────
       Las medidas del original por debajo de 576px. El texto baja a 15px:
       a 18 en una tarjeta de 162, un nombre de tour ocupa cuatro líneas. */
    @media (max-width: 991px) {
        .bc-form-search-all.stories .bc-stories {
            --bc-stories-w: 240px;
            --bc-stories-h: 384px;
            --bc-stories-vel: 3.23s;
        }
    }

    @media (max-width: 575px) {
        .bc-form-search-all.stories .bc-stories {
            --bc-stories-w: 162px;
            --bc-stories-h: 288px;
            --bc-stories-vel: 2.26s;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story-title {
            font-size: 15px;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story-meta {
            font-size: 12px;
        }
    }

    @media (max-width: 767px) {
        .bc-form-search-all.stories .bc-stories {
            margin-top: 40px;
        }

        /* 40 de aire + los 30 que mide aquí la curva del héroe. */
        .bc-form-search-all.stories .bc-stories-track {
            padding-bottom: 70px;
        }
    }

    /* ── Pantallas táctiles: se arrastra con el dedo ──────────────────────────
       El guion pone `is-touch` y la tira pasa a ser un carrusel deslizable de
       verdad (scroll nativo, con su inercia); el avance solo lo hace el guion
       moviendo `scrollLeft`, y la animación CSS se apaga. */
    .bc-form-search-all.stories .bc-stories.is-touch {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .bc-form-search-all.stories .bc-stories.is-touch::-webkit-scrollbar {
        display: none;
    }

    .bc-form-search-all.stories .bc-stories.is-touch .bc-stories-track {
        animation: none;
    }

    /* ── Sin movimiento ───────────────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
        .bc-form-search-all.stories .bc-stories {
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            padding: 0 16px;
        }

        .bc-form-search-all.stories .bc-stories::-webkit-scrollbar {
            display: none;
        }

        .bc-form-search-all.stories .bc-stories-track {
            animation: none;
        }

        .bc-form-search-all.stories .bc-stories-track[aria-hidden="true"] {
            display: none;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.stories .bc-story {
            scroll-snap-align: start;
        }
    }


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


        /* La tarjeta se estira a la altura del slide para que todas midan igual.
           El ancho hay que declararlo en cada nivel: al pasar el slide a flex,
           el envoltorio deja de ocupar el ancho del item y la tarjeta, que pide
           el 100% de ese padre, se quedaba en cero y la sección salía vacía. */
        .bc-locations-slider .owl-stage { display: flex; }
        .bc-locations-slider .owl-item { display: flex; width: 100%; }
        .bc-locations-slider .item { display: flex; width: 100%; height: 100%; }
        .bc-locations-slider .destination-item { width: 100%; }

        /* Las flechas van arriba a la derecha, en el mismo sitio que las de los
           listados de servicios. Antes se centraban a media altura con
           translateY(-50%), y el tema aplica su propio translateY(-2px) al pasar
           el ratón: la flecha perdía el centrado y se caía media altura. Aquí no
           se toca transform, así que ese pequeño salto del tema hace lo suyo. */
        .bc-locations-slider { position: relative; }
        .bc-locations-slider .owl-nav {
            position: absolute;
            top: -50px;
            right: 0;
            display: flex;
            gap: 8px;
        }
        /* Aspecto de reserva por si el bloque se pinta fuera de la plantilla del
           tema, que es quien normalmente da forma a estas flechas. */
        .bc-locations-slider .owl-nav button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 10px rgba(20, 26, 40, .18);
            color: #2c3345;
        }
        .bc-locations-slider .owl-dots { text-align: center; margin-top: 16px; }
    

        .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); }
        }
    

    .bc-faq-lists--minimal {
        --faq-primary: var(--bc-primary, var(--vendor-brand-color, var(--main-color, #5191fa)));
        --faq-accent: var(--bc-primary-ink, var(--faq-primary));
        --faq-bg: var(--bc-background, var(--vendor-bg-color, #fff));
        --faq-text: var(--bc-text, var(--vendor-text-color, #172033));
        --faq-border: color-mix(in srgb, var(--faq-text) 16%, transparent);
        --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--minimal * { box-sizing: border-box; }
    .bc-faq-lists--minimal .bc-faq-shell { width: min(100%, 820px); margin: 0 auto; }
    .bc-faq-lists--minimal .bc-faq-heading { max-width: 650px; margin: 0 auto clamp(28px,4vw,42px); text-align: center; }
    .bc-faq-lists--minimal .bc-faq-kicker { display: inline-flex; align-items:center; gap:9px; margin-bottom:14px; color:var(--faq-accent); font-size:12px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
    .bc-faq-lists--minimal .bc-faq-kicker:before { content:""; width:22px; height:2px; border-radius:10px; background:var(--faq-primary); box-shadow:0 0 14px color-mix(in srgb,var(--faq-primary) 55%,transparent); }
    .bc-faq-lists--minimal .bc-faq-heading h2 { margin:0; color:var(--faq-text); font-family:var(--bc-font-heading,inherit); font-size:clamp(34px,4.6vw,54px); font-weight:750; line-height:1.08; letter-spacing:-.04em; }
    .bc-faq-lists--minimal .bc-faq-heading p { margin:12px auto 0; color:var(--faq-muted); font-size:16px; line-height:1.65; }
    .bc-faq-lists--minimal .bc-faq-list { border-top:1px solid var(--faq-border); }
    .bc-faq-lists--minimal .bc-faq-row { position:relative; border-bottom:1px solid var(--faq-border); }
    .bc-faq-lists--minimal .bc-faq-row:before { content:""; position:absolute; inset:auto 50% -1px 50%; height:2px; background:linear-gradient(90deg,var(--faq-primary),var(--bc-secondary,var(--faq-primary))); transition:inset .35s ease; }
    .bc-faq-lists--minimal .bc-faq-row[open]:before { inset:auto 0 -1px 0; }
    .bc-faq-lists--minimal .bc-faq-row summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:19px 2px; cursor:pointer; list-style:none; }
    .bc-faq-lists--minimal .bc-faq-row summary::-webkit-details-marker { display:none; }
    .bc-faq-lists--minimal .bc-faq-question { color:var(--faq-text); font-family:var(--bc-font-heading,inherit); font-size:18px; font-weight:650; line-height:1.45; transition:color .2s ease,transform .25s ease; }
    .bc-faq-lists--minimal .bc-faq-icon { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border:1px solid var(--faq-border); border-radius:max(50%,var(--bc-radius,18px)); color:var(--faq-muted); transition:transform .3s ease,color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
    .bc-faq-lists--minimal .bc-faq-icon svg { width:17px; height:17px; }
    .bc-faq-lists--minimal .bc-faq-row[open] .bc-faq-question { color:var(--faq-accent); transform:translateX(4px); }
    .bc-faq-lists--minimal .bc-faq-row[open] .bc-faq-icon { transform:rotate(180deg); border-color:var(--faq-primary); background:var(--faq-primary); color:var(--bc-on-primary,#fff); box-shadow:0 8px 22px color-mix(in srgb,var(--faq-primary) 28%,transparent); }
    .bc-faq-lists--minimal .bc-faq-answer { max-width:710px; padding:0 58px 20px 6px; color:var(--faq-muted); font-size:15px; line-height:1.75; animation:bcFaqMinimalIn .28s ease; }
    .bc-faq-lists--minimal .bc-faq-answer p { margin:0; }
    .bc-faq-lists--minimal .bc-faq-row summary:hover .bc-faq-question { color:var(--faq-accent); }
    @keyframes bcFaqMinimalIn { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:none; } }
    @media(max-width:767px) { .bc-faq-lists--minimal{padding:42px 0}.bc-faq-lists--minimal .bc-faq-heading{margin-bottom:26px}.bc-faq-lists--minimal .bc-faq-heading p{font-size:15px}.bc-faq-lists--minimal .bc-faq-row summary{gap:16px;padding:17px 0}.bc-faq-lists--minimal .bc-faq-question{font-size:16px}.bc-faq-lists--minimal .bc-faq-answer{padding:0 46px 18px 4px;font-size:14px}.bc-faq-lists--minimal .bc-faq-icon{flex-basis:32px;width:32px;height:32px} }


        #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; }
        #ngpay-86060227 .ngpay__viewport{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
        /* 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;}
}