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

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