`
(`.bc-menu ul li > a { color: var(--bc-header-text) !important }`),
y esto es un botón: sin decírselo heredaría el color del cuerpo y
sobre una cabecera oscura no se vería. */
.bc_wrap .bc_header .bc-menu .bc-hsearch-btn,
.bc_wrap .bc_header .header-right > .bc-hsearch-btn {
color: var(--bc-header-text, currentColor);
}
/* Y con la cabecera de cristal sobre la foto del hero, lo mismo que
hace minisite-cards.css con los enlaces: blanco y sombra, que es lo
único legible encima de una imagen cualquiera. */
body:has(> .bc_wrap > .page-template-content.vendor-custom-home) .bc_header:not(.bc-header-solid) .content .header-left .bc-menu .bc-hsearch-btn,
body:has(> .bc_wrap > [class*="bc_search_"]) .bc_header:not(.bc-header-solid) .content .header-left .bc-menu .bc-hsearch-btn {
color: #fff;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
/* Salvo cuando el listado va sin hero: ahí la barra ya tiene su color
y el blanco sobraría. */
body:has(> .bc_wrap > .bc_search_no_hero) .bc_header:not(.bc-header-solid) .content .header-left .bc-menu .bc-hsearch-btn {
color: var(--bc-header-text, currentColor);
filter: none;
}
/* El del cajón del móvil finge ser un campo de texto: es lo que se
espera ver ahí arriba, aunque al tocarlo se abra la ventana. Sus
colores son los de la página, que es lo que pinta el cajón. */
.bc-menu-mobile .bc-hsearch-item {
padding: 12px 20px 4px;
}
.bc-hsearch-fake {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
border: 0;
border-radius: 999px;
background: color-mix(in srgb, var(--bc-text, #212529) 8%, transparent);
color: var(--bc-text, #212529);
font-size: 14px;
text-align: left;
cursor: pointer;
}
.bc-hsearch-fake > span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
opacity: .7;
}
/* ── La ventana ──────────────────────────────────────────────────── */
.bc-search-pop {
display: none;
position: fixed;
top: 11vh;
left: 50%;
/* La hoja del navegador le pone `inset: 0` a todo lo que lleva
`popover`. Con `top` y `bottom` a la vez y sin altura propia, el
panel se estiraría hasta abajo del todo. */
right: auto;
bottom: auto;
width: min(620px, calc(100vw - 24px));
max-height: min(72vh, 560px);
margin: 0;
padding: 0;
transform: translateX(-50%);
border: 0;
border-radius: 18px;
background: var(--bc-background, #fff);
color: var(--bc-text, #212529);
box-shadow: 0 24px 60px rgba(6, 12, 24, .28);
overflow: hidden;
/* Solo cuenta cuando no hay `popover` y la ventana se queda en el
documento; con él, la capa superior va por encima de todo. */
z-index: 10050;
}
.bc-search-pop:popover-open,
.bc-search-pop.is-open {
display: flex;
flex-direction: column;
}
.bc-search-pop::backdrop {
background: rgba(8, 14, 26, .45);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
/* El fondo del camino sin `popover`: un hermano de la ventana, porque
`::backdrop` solo existe en la capa superior. */
.bc-search-veil {
position: fixed;
inset: 0;
z-index: 10040;
background: rgba(8, 14, 26, .45);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.bc-search-form {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
margin: 0;
padding: 14px 16px;
border-bottom: 1px solid color-mix(in srgb, var(--bc-text, #212529) 10%, transparent);
}
.bc-search-icon {
display: inline-flex;
line-height: 0;
opacity: .55;
}
.bc-search-input {
flex: 1 1 auto;
min-width: 0;
padding: 6px 0;
border: 0;
outline: 0;
background: transparent;
color: inherit;
font-size: 16px;
line-height: 1.4;
}
.bc-search-input::placeholder {
color: currentColor;
opacity: .5;
}
.bc-search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.bc-search-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--bc-text, #212529) 8%, transparent);
color: inherit;
cursor: pointer;
}
.bc-search-body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.bc-search-note {
margin: 0;
padding: 18px 16px;
font-size: 13px;
text-align: center;
opacity: .6;
}
.bc-search-hit {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
color: inherit !important;
text-decoration: none !important;
}
.bc-search-hit:hover,
.bc-search-hit.is-active {
background: color-mix(in srgb, var(--bc-text, #212529) 6%, transparent);
}
.bc-search-hit img,
.bc-search-hit .bc-search-thumb {
flex: 0 0 auto;
width: 54px;
height: 44px;
border-radius: 10px;
object-fit: cover;
background: color-mix(in srgb, var(--bc-text, #212529) 10%, transparent);
}
.bc-search-hit .bc-search-texts {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.bc-search-hit .bc-search-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
font-weight: 600;
}
.bc-search-hit .bc-search-meta {
font-size: 12px;
opacity: .65;
}
.bc-search-all {
display: block;
padding: 13px 16px;
border-top: 1px solid color-mix(in srgb, var(--bc-text, #212529) 10%, transparent);
color: var(--bc-primary, #5191fa) !important;
font-size: 14px;
font-weight: 600;
text-align: center;
text-decoration: none !important;
}
.bc-search-all.is-active,
.bc-search-all:hover {
background: color-mix(in srgb, var(--bc-primary, #5191fa) 8%, transparent);
}
/* En el móvil, pantalla completa, igual que el menú del que se abre
(el cajón también ocupa todo por debajo de 990px). El campo queda
arriba: con el teclado abierto, centrarlo lo dejaría bajo las teclas.
`100dvh` y no `100vh`: en iOS el segundo cuenta la barra del
navegador y el final de la lista quedaría escondido detrás. */
@media (max-width: 990px) {
.bc-search-pop {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100dvh;
max-width: none;
max-height: none;
transform: none;
border-radius: 0;
box-shadow: none;
}
.bc-search-form {
gap: 12px;
padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
}
.bc-search-input {
font-size: 17px;
}
.bc-search-close {
width: 44px;
height: 44px;
border-radius: 12px;
}
.bc-search-body {
overscroll-behavior: contain;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bc-search-hit {
padding: 12px 16px;
}
}
.bc-header-blur .bc-hb-switchers {
display: none;
}
@media (max-width: 1199px) {
.bc-header-blur .bc-hb-switchers {
display: flex;
align-items: center;
justify-self: end;
gap: 6px;
}
.bc-header-blur .bc-hb-sw {
position: relative;
display: inline-flex;
}
/* El código del idioma o de la moneda ocupa el sitio del icono. Las
banderas no valen: no se cargan en el minisite y una bandera no
nombra un idioma de todas formas. */
.bc-header-blur .bc-hb-sw-btn {
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1;
text-transform: uppercase;
cursor: pointer;
}
/* Los colores se declaran enteros —fondo Y texto— porque la piel
del tema pinta enlaces y cajas por su cuenta: un desplegable que
sólo trae fondo acaba con el texto gris claro sobre blanco. */
.bc-header-blur .bc-hb-sw-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 10030;
min-width: 200px;
padding: 6px;
border: 1px solid color-mix(in srgb, var(--bc-text, #374151) 12%, transparent);
border-radius: 14px;
background: var(--bc-background, #fff);
box-shadow: 0 12px 32px rgba(6, 12, 24, .18);
}
.bc-header-blur .bc-hb-sw-menu[hidden] {
display: none;
}
.bc-header-blur .bc-hb-sw-op {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
padding: 8px 10px;
border-radius: 9px;
color: var(--bc-text, #172031) !important;
font-size: 14px;
text-decoration: none !important;
}
.bc-header-blur .bc-hb-sw-op:hover,
.bc-header-blur .bc-hb-sw-op:focus {
background: color-mix(in srgb, var(--bc-primary, #5191fa) 8%, var(--bc-background, #fff));
}
/* Cápsula de ancho fijo: así los nombres quedan alineados aunque el
código tenga dos letras ("es") o tres ("cop"). */
.bc-header-blur .bc-hb-sw-cod {
flex: 0 0 auto;
min-width: 36px;
padding: 2px 5px;
border-radius: 6px;
background: color-mix(in srgb, var(--bc-text, #374151) 10%, transparent);
color: color-mix(in srgb, var(--bc-text, #374151) 72%, transparent);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-align: center;
}
.bc-header-blur .bc-hb-sw-op.is-actual {
font-weight: 600;
}
.bc-header-blur .bc-hb-sw-op.is-actual .bc-hb-sw-cod {
background: var(--bc-primary, #5191fa);
color: #fff;
}
}
.bc-hero-banner {
position: relative;
padding: clamp(40px, 6vw, 88px) 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: var(--hb-ink, var(--bc-text, #131416));
/* `clip` y no `hidden`: `hidden` convertiría la sección en un
contenedor de scroll y rompería cualquier cabecera pegajosa. */
overflow: clip;
}
.bc-hero-banner.has-bg { background-image: var(--hb-bg); }
.bc-hero-banner.is-bg-fixed { background-attachment: fixed; }
.bc-hb-veil {
position: absolute;
inset: 0;
background: var(--hb-veil, #000);
opacity: var(--hb-veil-alpha, .35);
pointer-events: none;
}
.bc-hb-wide { padding: 0 clamp(16px, 4vw, 56px); }
.bc-hero-banner > .container,
.bc-hero-banner > .bc-hb-wide { position: relative; z-index: 1; }
.bc-hb-grid {
display: grid;
grid-template-columns: var(--hb-cols, minmax(0, 1fr));
gap: clamp(28px, 4vw, 56px);
align-items: center;
min-height: var(--hb-minh, 0px);
}
.bc-hb-content { max-width: var(--hb-content-w, none); min-width: 0; }
/* Centrado y a lo ancho de la pantalla, un texto sin tope se estira
hasta los dos bordes y deja de leerse como un bloque centrado. */
.bc-hero-banner.is-text-center .bc-hb-content {
max-width: var(--hb-content-w, 820px);
margin-inline: auto;
text-align: center;
}
.bc-hero-banner.is-centered .bc-hb-content { margin-inline: auto; }
.bc-hb-eyebrow {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 14px;
font-size: clamp(14px, 1.4vw, 17px);
font-weight: 600;
color: var(--hb-ink, var(--bc-text, #131416));
}
.bc-hero-banner.is-text-center .bc-hb-eyebrow,
.bc-hero-banner.is-text-center .bc-hb-actions { justify-content: center; }
/* Columnas al contenido y no en partes iguales: repartidas, los dos
destacados quedan pegados a los bordes y el centrado se pierde. */
.bc-hero-banner.is-text-center .bc-hb-features {
grid-template-columns: repeat(var(--hb-feat-cols, 2), auto);
justify-content: center;
}
.bc-hero-banner.is-text-center .bc-hb-features li { justify-content: center; }
.bc-hb-stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 2px; }
.bc-hb-stars-off { color: currentColor; opacity: .25; }
.bc-hb-stars-on {
position: absolute;
inset: 0;
width: var(--hb-stars, 100%);
overflow: hidden;
white-space: nowrap;
color: var(--bc-primary, #1a94ff);
}
.bc-hero-banner.tone-light .bc-hb-stars-on { color: #ffd166; }
.bc-hb-title {
margin: 0 0 16px;
/* Sin tamaño puesto manda el elástico, que es lo que hacía antes de
que estos dos campos existieran. */
font-size: var(--hb-title-size, clamp(30px, 4.6vw, 58px));
line-height: 1.08;
font-weight: 800;
letter-spacing: -.02em;
color: inherit;
}
.bc-hb-desc {
margin: 0 0 22px;
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.65;
color: var(--hb-muted, inherit);
}
.bc-hb-features {
display: grid;
grid-template-columns: repeat(var(--hb-feat-cols, 2), minmax(0, 1fr));
gap: 12px 26px;
margin: 0 0 26px;
padding: 0;
list-style: none;
}
.bc-hb-features.cols-1 { --hb-feat-cols: 1; }
.bc-hb-features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: clamp(14px, 1.3vw, 16px);
line-height: 1.4;
font-weight: 500;
}
.bc-hb-features i {
flex: none;
margin-top: 1px;
font-size: 1.15em;
color: var(--bc-primary-ink, var(--bc-primary, #1a94ff));
}
.bc-hero-banner.tone-light .bc-hb-features i { color: #fff; }
.bc-hb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* Cada estilo solo define las dos variables; el pintado es común. Así
un color escrito en el panel entra por el `style` del propio enlace
y gana a la clase, sea cual sea el estilo elegido. */
.bc-hb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 30px;
border: 2px solid var(--hb-btn-line, transparent);
border-radius: var(--rc-r-button, 9999px);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
/* El relleno, la tinta y el borde se pintan más abajo, en una sola
regla; aquí solo la forma, para no tener dos fuentes de verdad. */
transition: transform .15s ease, opacity .15s ease;
}
.bc-hb-btn:hover { text-decoration: none; transform: translateY(-1px); opacity: .9; }
/* El único !important de la hoja, y con motivo. La piel del tema pinta
TODOS los enlaces del sitio con
body.bc-skin .bc_wrap a:not(.btn):not([class*="btn-"]):not(.bc-theme-cta)…
que suma (0,7,2) de especificidad; contra eso, `.bc-hb-btn` (0,1,0) no
tiene nada que hacer y el color elegido en el panel no llegaba a
pintarse —el fondo sí, porque esa regla solo toca `color`—. Subir la
especificidad a mano exigiría una cadena absurda y seguiría siendo
frágil ante la siguiente piel, así que el color del bloque se declara
ganador de forma explícita. Va sobre el enlace y su :hover, nada más. */
.bc-hero-banner a.bc-hb-btn,
.bc-hero-banner a.bc-hb-btn:hover,
.bc-hero-banner a.bc-hb-btn:focus {
background: var(--hb-btn-bg, transparent) !important;
color: var(--hb-btn-ink, inherit) !important;
border-color: var(--hb-btn-line, transparent) !important;
}
.bc-hb-btn.style-primary {
--hb-btn-bg: var(--bc-primary, #1a94ff);
--hb-btn-ink: var(--bc-on-primary, #fff);
}
.bc-hb-btn.style-dark { --hb-btn-bg: #131416; --hb-btn-ink: #fff; }
.bc-hb-btn.style-outline { --hb-btn-line: currentColor; }
.bc-hb-btn.style-link {
padding-inline: 6px;
text-decoration: underline;
text-underline-offset: 4px;
}
.bc-hb-media {
position: relative;
min-width: 0;
border-radius: var(--hb-radius, 28px);
overflow: hidden;
aspect-ratio: var(--hb-ratio, 1/1);
background: color-mix(in srgb, currentColor 8%, transparent);
}
/* «Proporción original»: manda la imagen, y el contenedor la sigue. Sin
soltar la altura fija, la foto se estiraría igualmente al cuadrado. */
.bc-hb-media.ratio-auto { aspect-ratio: auto; }
.bc-hb-media.ratio-auto img,
.bc-hb-media.ratio-auto video { height: auto; object-fit: contain; }
.bc-hb-media img,
.bc-hb-media video,
.bc-hb-media iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.bc-hero-banner.has-shadow .bc-hb-media { box-shadow: 0 24px 60px rgba(0, 0, 0, .18); }
/* Colores de texto por tono. `auto` no declara nada: hereda el del tema. */
.bc-hero-banner.tone-dark { --hb-ink: #111827; --hb-muted: #4b5563; }
.bc-hero-banner.tone-light { --hb-ink: #fff; --hb-muted: rgba(255, 255, 255, .84); }
.bc-hero-banner.tone-dark,
.bc-hero-banner.tone-light { color: var(--hb-ink); }
.bc-hero-banner:not(.tone-light):not(.tone-dark) .bc-hb-desc {
color: color-mix(in srgb, var(--bc-text, #131416) 68%, var(--bc-background, #fff));
}
/* «Texto sobre la media»: sin columna, y con una altura que dé sitio a
la foto del fondo aunque el texto sea corto. */
.bc-hero-banner.is-overlay { padding-block: clamp(64px, 9vw, 130px); }
.bc-hero-banner.is-overlay .bc-hb-grid { min-height: var(--hb-minh, 380px); }
.bc-hero-banner.is-centered .bc-hb-grid { grid-template-columns: minmax(0, 1fr); }
.bc-hero-banner.is-centered .bc-hb-content { max-width: var(--hb-content-w, 820px); }
@media (min-width: 992px) {
.bc-hero-banner.is-media-left .bc-hb-media { order: -1; }
}
@media (max-width: 991.98px) {
/* Una sola columna en cuanto no caben dos: el reparto 60/40 con un
ancho de tableta deja la foto en una tira y el titular partido. */
.bc-hb-grid { grid-template-columns: minmax(0, 1fr); }
.bc-hero-banner.is-media-first-mobile .bc-hb-media { order: -1; }
.bc-hero-banner.is-bg-fixed { background-attachment: scroll; }
.bc-hb-content { max-width: none; }
}
@media (max-width: 767.98px) {
/* El del móvil si se puso; si no, el del escritorio; si tampoco,
el elástico de siempre. */
.bc-hb-title {
font-size: var(--hb-title-size-m, var(--hb-title-size, clamp(30px, 4.6vw, 58px)));
}
}
@media (max-width: 575.98px) {
.bc-hb-features { grid-template-columns: minmax(0, 1fr); }
.bc-hb-actions .bc-hb-btn.style-primary,
.bc-hb-actions .bc-hb-btn.style-dark,
.bc-hb-actions .bc-hb-btn.style-outline { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.bc-hb-btn { transition: none; }
.bc-hb-btn:hover { transform: none; }
}
.bc-minisite-footer { --mf-bg:var(--bc-footer-bg,#111827); --mf-text:var(--bc-footer-text,#cbd5e1); --mf-heading:var(--bc-footer-heading,var(--mf-text)); --mf-primary:var(--bc-footer-accent,var(--bc-primary,#5191fa)); --mf-on-primary:var(--bc-on-footer-accent,var(--bc-on-primary,#fff)); --mf-line:color-mix(in srgb,var(--mf-text) 16%,transparent); position:relative; overflow:hidden; padding:clamp(40px,5vw,64px) 0 0; background:var(--mf-bg); color:var(--mf-text); font-size:14px; }
.bc-minisite-footer:before { content:none; }
.bc-mf-cta { position:relative; display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,32px); margin:0 0 clamp(38px,4.5vw,56px); padding:clamp(22px,3vw,30px) clamp(22px,3.5vw,34px); border:1px solid var(--mf-line); border-radius:clamp(16px,2vw,var(--bc-card-radius,22px)); background:var(--mf-bg); }
.bc-mf-cta:before { content:""; position:absolute; inset:18px auto 18px -1px; width:3px; border-radius:0 3px 3px 0; background:var(--mf-primary); }
.bc-mf-eyebrow { display:block; margin-bottom:7px; color:color-mix(in srgb,var(--mf-primary) 78%,var(--mf-text)); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.bc-mf-cta h2 { margin:0 0 6px; color:var(--mf-heading); font-family:var(--bc-font-heading,inherit); font-size:clamp(23px,3vw,32px); font-weight:700; letter-spacing:-.025em; }
.bc-mf-cta p { max-width:580px; margin:0; line-height:1.6; }
/* Estas dos reglas van con tres clases delante y con !important porque
chisfis-skin trae un `.bc-skin .bc_wrap p{color:var(--sk-muted)!important}`
que le ganaba a `.bc-mf-cta p` aun llevando !important, y dejaba el
párrafo en un gris de 4,2 de contraste: por debajo del mínimo legible.
El `inherit` devuelve a cada párrafo del pie el color que le toca en vez
del gris de las páginas de contenido, y el 82% deja margen suficiente
aunque el vendedor elija un fondo claro. */
.bc-minisite-footer .bc-mf-grid p { color:inherit!important; }
.bc-minisite-footer .bc-mf-cta .bc-mf-cta-copy p { color:color-mix(in srgb,var(--mf-text) 82%,transparent)!important; }
.bc-mf-primary-action { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 21px; border-radius:var(--rc-r-button,9999px); background:var(--mf-primary); color:var(--mf-on-primary)!important; font-weight:700; text-decoration:none!important; white-space:nowrap; box-shadow:0 12px 30px color-mix(in srgb,var(--mf-primary) 25%,transparent); transition:transform .2s ease,box-shadow .2s ease; }
.bc-mf-primary-action:hover { transform:translateY(-2px); box-shadow:0 16px 34px color-mix(in srgb,var(--mf-primary) 35%,transparent); }
.bc-mf-primary-action i { font-size:19px; }
.bc-mf-grid { position:relative; display:grid; grid-template-columns:minmax(250px,1.45fr) repeat(3,minmax(135px,.7fr)); gap:clamp(28px,4.5vw,62px); padding-bottom:clamp(36px,4vw,50px); }
.bc-mf-brand { min-width:0; }
.bc-mf-logo { display:inline-flex; align-items:center; margin-bottom:18px; color:var(--mf-heading)!important; font-family:var(--bc-font-heading,inherit); font-size:24px; font-weight:700; line-height:1.15; text-decoration:none!important; }
.bc-mf-logo img { display:block; width:auto; max-width:210px; max-height:52px; object-fit:contain; }
.bc-mf-about { max-width:390px; margin-bottom:22px; color:color-mix(in srgb,var(--mf-text) 72%,transparent); line-height:1.75; }
.bc-mf-about p { margin:0; }
.bc-mf-social-wrap>span { display:block; margin-bottom:10px; color:var(--mf-text); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.bc-mf-socials { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.bc-mf-socials a { display:grid; width:38px; height:38px; place-items:center; border:1px solid var(--mf-line); border-radius:50%; background:transparent; color:var(--mf-text)!important; font-size:15px; text-decoration:none!important; transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease; }
.bc-mf-socials a:hover { transform:translateY(-3px); border-color:var(--mf-primary); background:var(--mf-primary); color:var(--mf-on-primary)!important; }
.bc-mf-column h3 { margin:4px 0 20px; color:var(--mf-heading); font-family:var(--bc-font-heading,inherit); font-size:14px; font-weight:700; letter-spacing:.02em; }
.bc-mf-links { display:grid; gap:11px; margin:0; padding:0; list-style:none; }
.bc-mf-links a { display:inline-flex; align-items:center; color:color-mix(in srgb,var(--mf-text) 72%,transparent)!important; line-height:1.45; text-decoration:none!important; transition:color .2s ease,transform .2s ease; }
.bc-mf-links a:before { content:""; width:0; height:1px; margin-right:0; background:var(--mf-primary); transition:width .2s ease,margin .2s ease; }
.bc-mf-links a:hover { color:var(--mf-text)!important; transform:translateX(2px); }
.bc-mf-links a:hover:before { width:12px; margin-right:7px; }
.bc-mf-contact { display:grid; align-content:start; }
.bc-mf-contact h3 { margin-bottom:6px; }
.bc-mf-contact-list { display:grid; gap:14px; margin-top:14px; }
.bc-mf-contact-list>a { display:flex; align-items:center; gap:10px; min-width:0; color:var(--mf-text)!important; text-decoration:none!important; }
.bc-mf-contact-icon { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--mf-primary) 14%,transparent); color:color-mix(in srgb,var(--mf-primary) 80%,var(--mf-text)); }
.bc-mf-contact-list>a>span:last-child { min-width:0; overflow-wrap:anywhere; }
.bc-mf-contact small { display:block; margin-bottom:1px; color:color-mix(in srgb,var(--mf-text) 52%,transparent); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
/* Los plegables. En escritorio no existen: la cabecera es un bloque más
—sin marcador, sin cursor de mano— y el contenido va siempre abierto,
de modo que el pie ancho se pinta exactamente igual que antes. El
plegado lo enciende el media query de móvil, y quien navegue sin
JavaScript lo ve todo desplegado, como siempre. */
.bc-mf-acc-head { display:block; cursor:default; list-style:none; }
.bc-mf-acc-head::-webkit-details-marker { display:none; }
.bc-mf-acc-head::marker { content:""; }
.bc-mf-acc-chev { display:none; }
.bc-mf-lower { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 0; border-top:1px solid var(--mf-line); }
.bc-mf-promise,.bc-mf-legal { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.bc-mf-promise span { color:color-mix(in srgb,var(--mf-text) 68%,transparent); font-size:12px; }
.bc-mf-promise i { margin-right:5px; color:color-mix(in srgb,var(--mf-primary) 78%,var(--mf-text)); }
.bc-mf-legal a { color:color-mix(in srgb,var(--mf-text) 68%,transparent)!important; font-size:12px; text-decoration:none!important; }
.bc-mf-legal a:hover { color:var(--mf-text)!important; }
@media(max-width:991px) { .bc-mf-grid{grid-template-columns:1.25fr 1fr 1fr}.bc-mf-contact{grid-column:2/-1}.bc-mf-brand{grid-row:span 2} }
/* ── MÓVIL ────────────────────────────────────────────────────────────
El pie ancho apilado se comía dos pantallas y media de scroll. Aquí se
reordena en cuatro piezas cortas: una tarjeta de contacto con un solo
botón, la marca y sus redes en una misma línea, las listas de enlaces
plegadas, y una línea final con las promesas y lo legal. Nada se
esconde: los enlaces siguen en el HTML, sólo se abren al tocarlos. */
@media(max-width:767px) {
.bc-minisite-footer { padding-top:22px; font-size:13px; }
/* La tarjeta de contacto: el titular manda, el párrafo se recorta a
dos líneas y la acción ocupa el ancho para poder tocarla. */
.bc-mf-cta { display:block; margin:0 0 16px; padding:15px 16px; border-radius:16px;
background:linear-gradient(135deg,color-mix(in srgb,var(--mf-primary) 13%,transparent),transparent 62%); }
.bc-mf-cta:before { inset:14px auto 14px -1px; width:2px; }
.bc-mf-eyebrow { display:none; }
.bc-mf-cta h2 { margin-bottom:3px; font-size:18px; }
.bc-minisite-footer .bc-mf-cta .bc-mf-cta-copy p { display:-webkit-box; overflow:hidden; margin:0;
font-size:12px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.bc-mf-cta-actions { margin-top:13px; }
.bc-mf-primary-action { width:100%; justify-content:center; min-height:46px; font-size:14px;
box-shadow:0 8px 20px color-mix(in srgb,var(--mf-primary) 22%,transparent); }
/* La rejilla deja de ser rejilla: una columna y sin huecos, que los
separadores los ponen ahora las cabeceras plegables. */
.bc-mf-grid { grid-template-columns:1fr; gap:0; padding-bottom:2px; }
.bc-mf-brand { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:12px;
grid-column:1/-1; grid-row:auto; padding-bottom:14px; }
.bc-mf-logo { grid-area:1/1/2/2; margin:0; font-size:19px; }
.bc-mf-logo img { max-width:150px; max-height:38px; }
.bc-mf-about { display:-webkit-box; overflow:hidden; grid-area:2/1/3/3; max-width:none;
margin:10px 0 0; font-size:12.5px; line-height:1.5;
-webkit-box-orient:vertical; -webkit-line-clamp:2; }
.bc-mf-about p { display:inline; }
.bc-mf-social-wrap { grid-area:1/2/2/3; justify-self:end; }
.bc-mf-social-wrap>span { display:none; }
.bc-mf-socials { flex-wrap:nowrap; gap:6px; }
.bc-mf-socials a { width:32px; height:32px; font-size:13px; }
/* Cada columna, una fila plegable de 44px. */
.bc-mf-column,.bc-mf-contact { grid-column:1/-1; border-top:1px solid var(--mf-line); }
.bc-mf-acc-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:12px 2px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bc-mf-column h3,.bc-mf-contact h3 { margin:0; font-size:13.5px; }
.bc-mf-acc-chev { display:grid; width:22px; height:22px; place-items:center; border-radius:50%;
background:color-mix(in srgb,var(--mf-text) 9%,transparent); font-size:11px;
transition:transform .25s ease,background .25s ease; }
.bc-mf-acc[open] .bc-mf-acc-chev { transform:rotate(180deg);
background:color-mix(in srgb,var(--mf-primary) 20%,transparent); }
.bc-mf-acc[open] .bc-mf-links,.bc-mf-acc[open] .bc-mf-contact-list { animation:bc-mf-reveal .22s ease; }
.bc-mf-links { gap:0; padding:0 2px 12px; }
.bc-mf-links a { padding:7px 0; font-size:13px; }
.bc-mf-contact-list { gap:12px; margin:0; padding:2px 2px 14px; }
.bc-mf-contact-list>a { font-size:12.5px; }
.bc-mf-contact-icon { flex:0 0 30px; width:30px; height:30px; font-size:13px; }
/* Promesas y legal: dos líneas centradas y muy pequeñas. */
.bc-mf-lower { align-items:center; flex-direction:column; gap:9px; padding:13px 0 14px; text-align:center; }
.bc-mf-promise,.bc-mf-legal { justify-content:center; gap:6px 8px; }
.bc-mf-promise span { padding:4px 10px; border:1px solid var(--mf-line); border-radius:999px; font-size:10.5px; }
.bc-mf-promise i { margin-right:4px; }
.bc-mf-legal { gap:16px; }
.bc-mf-legal a { font-size:11px; }
}
@keyframes bc-mf-reveal { from { opacity:0; transform:translateY(-6px); } }
@media(prefers-reduced-motion:reduce) {
.bc-mf-acc[open] .bc-mf-links,.bc-mf-acc[open] .bc-mf-contact-list { animation:none; }
.bc-mf-acc-chev { transition:none; }
}
.bc-bottombar{
background:var(--bc-footer-bg,#111827);
border-top:1px solid color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 14%,transparent);
color:var(--bc-footer-text,#8a9dc0);
font-size:11.5px;
padding:11px 0;
position:relative;
z-index:10;
}
.bc-bottombar-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.bc-bottombar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.bc-bottombar-text{color:var(--bc-footer-text,#8a9dc0);}
.bc-bottombar-text a{color:color-mix(in srgb,var(--bc-primary,#5191fa) 76%,var(--bc-footer-text,#8a9dc0));text-decoration:none;}
.bc-bottombar-text a:hover{color:var(--bc-footer-text,#fff);}
.bc-bottombar-sep{width:1px;height:12px;background:color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 20%,transparent);display:inline-block;flex-shrink:0;}
.bc-bottombar-copy{color:var(--bc-footer-text,#596a85);white-space:nowrap;opacity:.85;}
.bc-bottombar-copy a{color:var(--bc-footer-text,#8a9dc0);text-decoration:none;}
.bc-bottombar-copy a:hover{color:var(--bc-footer-text,#fff);}
/* selectors */
.bc-bb-items{display:inline-flex;align-items:center;gap:0;margin:0;padding:0;list-style:none;}
.bc-bb-items li{padding:0 10px;display:inline-block;border-left:1px solid color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 14%,transparent);}
.bc-bb-items li:first-child{border-left:none;}
.bc-bb-items li a{color:var(--bc-footer-text,#8a9dc0);font-size:11.5px;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
.bc-bb-items li a:hover{color:var(--bc-footer-text,#fff);}
.bc-bb-items .flag-icon{font-size:14px;}
.bc-bb-items .dropdown-menu{bottom:100%;top:auto;margin-bottom:6px;min-width:110px;font-size:12px;
background:var(--bc-footer-bg,#1e2f4a);border:1px solid color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 16%,transparent);border-radius:var(--bc-radius,6px);padding:4px 0;}
.bc-bb-items .dropdown-menu li a{color:var(--bc-footer-text,#c5d3e8)!important;padding:6px 14px;}
.bc-bb-items .dropdown-menu li a:hover{background:color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 8%,transparent);color:var(--bc-footer-text,#fff)!important;}
.bc-bb-items .fa-angle-down{font-size:10px;color:#596a85;}
/* En movil la barra se apilaba en tres bloques alineados a la izquierda para
decir tres cosas cortas. Ahora va centrada y envuelve solo si no cabe, y los
selectores de moneda e idioma son dos chapitas.
OJO CON LOS TAMANOS: chisfis-skin sube aqui la letra a 13px y los enlaces a
40px de alto —`body.bc-skin .bc_wrap .bc-bottombar{...!important}`, en el
bloque de objetivos tactiles— y lo hace a proposito. Esto de abajo compacta
la MAQUETA (huecos, direccion, separador) y no toca ni el tamano de letra ni
la altura de los enlaces: encogerlos deshacia esa correccion. */
@media(max-width:600px){
.bc-bottombar-inner{justify-content:center;gap:4px 10px;text-align:center;}
.bc-bottombar-left{justify-content:center;gap:4px 8px;}
.bc-bottombar-text{overflow:hidden;max-width:80vw;text-overflow:ellipsis;white-space:nowrap;}
.bc-bottombar-sep{display:none;}
.bc-bottombar-copy{white-space:normal;}
.bc-bottombar-right{width:auto;}
.bc-bb-items{gap:6px;}
.bc-bb-items li{padding:0;border-left:none;}
.bc-bb-items li a{border:1px solid color-mix(in srgb,var(--bc-footer-text,#8a9dc0) 18%,transparent);
border-radius:999px;padding-inline:10px;}
/* Los lanzadores flotantes —reservar y asistente— se posan sobre los
ultimos 56px de la ventana, asi que al llegar al final tapaban la moneda
y el idioma. El hueco se reserva solo si esos botones estan en la pagina:
un vendedor con esos modulos apagados no lo paga. La clase repetida es
para pesar mas que el `padding-block:14px!important` del skin, que si no
gana; un navegador sin :has() se queda como hasta ahora, superpuesto. */
body:has(.bcrr-launch,.bcai-launch) .bc-bottombar.bc-bottombar.bc-bottombar{
padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;}
}
/* 44px es la altura de una barra de una línea: es lo que vale
mientras el script no mide la de verdad. Sin un valor de salida
la página se pintaría pegada arriba y daría un salto. */
:root { --rc-abar-h: 44px; }
/* Cerrada: ni barra ni hueco. La clase la pone el script de arriba
antes de que esto se aplique. */
html.rc-abar-off { --rc-abar-h: 0px; }
html.rc-abar-off .rc-abar { display: none; }
/* DOS VARIABLES Y NO UNA. `--rc-abar-h` es el hueco que reserva el
y NO cambia al hacer scroll: si cambiara, todo el contenido
daría un salto cada vez que la barra se va. `--rc-abar-top` es
dónde se apoya la cabecera fija, y ésa sí baja a cero cuando la
barra se aparta (`rc-abar-away`, lo pone el script de abajo según
lo que eligió el vendedor en «Al hacer scroll»). */
/* Lo que la barra EMPUJA es su alto menos la franja del reloj: en la
app instalada la barra se mide con esa franja dentro, y el body y
la cabecera ya la bajan por su cuenta (minisite-cards.css). Fuera
de la app instalada `env()` vale cero y es el alto entero. */
:root { --rc-abar-empuje: max(0px, calc(var(--rc-abar-h) - env(safe-area-inset-top, 0px))); }
:root { --rc-abar-top: var(--rc-abar-empuje); }
html.rc-abar-away { --rc-abar-top: 0px; }
.rc-abar { transition: translate .28s cubic-bezier(.22, .8, .3, 1); }
html.rc-abar-away .rc-abar { translate: 0 -100%; }
@media (prefers-reduced-motion: reduce) {
.rc-abar { transition: none; }
}
.rc-abar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1002;
background: var(--rc-abar-bg); color: var(--rc-abar-fg);
padding-top: env(safe-area-inset-top, 0px);
font-size: var(--rc-abar-fs, 14px); line-height: 1.35;
}
/* La tipografía elegida gana a la del tema, que la piel escribe con
`!important` en párrafos y enlaces. Sin elección, no se toca. */
.rc-abar[style*="--rc-abar-ff"],
.rc-abar[style*="--rc-abar-ff"] p,
.rc-abar[style*="--rc-abar-ff"] span,
.rc-abar[style*="--rc-abar-ff"] strong,
.rc-abar[style*="--rc-abar-ff"] a,
.rc-abar[style*="--rc-abar-ff"] button {
font-family: var(--rc-abar-ff), system-ui, sans-serif !important;
}
.rc-abar-msg strong { font-weight: var(--rc-abar-fw, 700); }
/* La piel del tema pinta TODO `` con `!important`, así que sin
esto el texto de la barra sale gris — ver
[[rentcli-skin-parrafos-gris]]. */
/* `button` va en la lista porque el color de un botón NO se hereda:
el aspa salía en el gris de fábrica del navegador sobre el fondo
de la barra. */
.rc-abar, .rc-abar p, .rc-abar span, .rc-abar strong,
.rc-abar a, .rc-abar button {
color: var(--rc-abar-fg) !important;
}
/* Los 44px de los lados son el hueco de la aspa, que va absoluta
y por tanto fuera del flujo: con el relleno de 16px de siempre,
una frase larga se le metía debajo. Igual a los dos lados para
que el texto siga centrado de verdad. */
.rc-abar-in {
max-width: 1140px; margin: 0 auto; padding: 9px 44px;
display: flex; align-items: center; justify-content: center;
gap: 8px 14px; flex-wrap: wrap; text-align: center;
overflow-wrap: anywhere;
}
/* El detalle viene del editor y llega envuelto en `
`: en la
barra tiene que leerse como una frase, no como un bloque. */
.rc-abar-det p { display: inline; margin: 0; }
.rc-abar-det { font-weight: 400; opacity: .92; }
.rc-abar-cta {
border: 1px solid currentColor; border-radius: 999px;
padding: 3px 14px; text-decoration: none; white-space: nowrap;
font-weight: 500;
}
.rc-abar-cta:hover { text-decoration: none; opacity: .85; }
.rc-abar-x {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
background: transparent; border: 0; padding: 0 6px;
font-size: 22px; line-height: 1; cursor: pointer; opacity: .65;
}
.rc-abar-x:hover { opacity: 1; }
.rc-abar-link { text-decoration: underline; text-underline-offset: 3px; }
.rc-abar-link:hover { opacity: .85; }
/* ── Un mensaje o carrusel ───────────────────────────────── */
/* Todas las diapositivas en la misma celda; la que entra llega
DESLIZÁNDOSE desde un lado y la que sale se va por el otro. El
`overflow` recorta a las dos mientras cruzan. Las que esperan
están fuera de la vista (y ocultas, para que no se lean ni se
puedan pulsar). */
.rc-abar-slides { display: grid; min-width: 0; overflow: hidden; }
.rc-abar-slide {
grid-area: 1 / 1;
display: flex; align-items: center; justify-content: center;
gap: 8px 14px; flex-wrap: wrap;
transform: translate3d(100%, 0, 0);
visibility: hidden;
transition: transform .45s cubic-bezier(.22, .8, .3, 1), visibility 0s .45s;
}
.rc-abar-slide.is-on {
transform: translate3d(0, 0, 0); visibility: visible;
transition: transform .45s cubic-bezier(.22, .8, .3, 1), visibility 0s;
}
.rc-abar-slide.is-out-left { transform: translate3d(-100%, 0, 0); }
.rc-abar-slide.is-out-right { transform: translate3d(100%, 0, 0); }
.rc-abar-slide.sin-transicion { transition: none !important; }
.rc-abar--carrusel { flex-wrap: nowrap; }
.rc-abar--carrusel .rc-abar-slides { flex: 1 1 auto; }
.rc-abar-nav {
flex: 0 0 auto; background: transparent; border: 0;
padding: 0 8px; font-size: 26px; line-height: 1;
cursor: pointer; opacity: .7;
}
.rc-abar-nav:hover { opacity: 1; }
/* ── Marquesina ──────────────────────────────────────────── */
.rc-abar--marquesina { flex-wrap: nowrap; justify-content: flex-start; }
/* SIN `mask-image` y SIN variables en la animación. Las dos cosas
funcionaban en Chrome y dejaban la marquesina quieta en el iPhone:
Safari no repinta lo que se anima dentro de un elemento con
máscara colgado de uno `position: fixed`. El difuminado de los
bordes lo hacen ahora dos degradados ENCIMA, del color de la
barra; la duración la escribe el script directamente en
`animation-duration`. */
.rc-abar-marq {
position: relative;
flex: 1 1 auto; min-width: 0; overflow: hidden;
}
.rc-abar-marq::before,
.rc-abar-marq::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 24px;
z-index: 1; pointer-events: none;
}
.rc-abar-marq::before { left: 0; background: linear-gradient(90deg, var(--rc-abar-bg), transparent); }
.rc-abar-marq::after { right: 0; background: linear-gradient(270deg, var(--rc-abar-bg), transparent); }
.rc-abar-marq-pista {
display: inline-flex; white-space: nowrap;
-webkit-transform: translate3d(0, 0, 0);
will-change: transform;
-webkit-animation: rc-abar-marq 30s linear infinite;
animation: rc-abar-marq 30s linear infinite;
}
/* Se para al pasar el ratón o al llegar con el tabulador a un
enlace: un texto que se escapa mientras intentas pulsarlo no se
puede pulsar.
SÓLO CON RATÓN DE VERDAD (`hover: hover`). En el teléfono un
toque deja el elemento en `:hover` hasta que se toca otra cosa,
y la marquesina se quedaba parada para siempre en cuanto el
dedo pasaba por encima al hacer scroll (17/09/2026). */
@media (hover: hover) {
.rc-abar-marq:hover .rc-abar-marq-pista,
.rc-abar-marq:focus-within .rc-abar-marq-pista { animation-play-state: paused; }
}
.rc-abar-marq-tanda { display: inline-flex; align-items: center; gap: 14px; padding-right: 14px; }
.rc-abar-marq-item { display: inline-flex; align-items: center; gap: 10px; }
.rc-abar-marq-sep { opacity: .6; }
/* `-50%` FIJO, sin variables. Safari no siempre recalcula una
variable usada dentro de `@keyframes` y la marquesina se quedaba
quieta en el iPhone. A cambio, la pista lleva SIEMPRE un número
par de tandas iguales (lo asegura el script): moverla la mitad es
moverla un número entero de tandas y el salto al volver a empezar
no se ve. */
@-webkit-keyframes rc-abar-marq {
from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
@keyframes rc-abar-marq {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.rc-abar-marq-pista { animation: none; }
.rc-abar-marq { overflow-x: auto; }
.rc-abar-slide, .rc-abar-slide.is-on { transition: none; }
}
@media (max-width: 600px) {
.rc-abar { font-size: calc(var(--rc-abar-fs, 14px) - 1px); }
.rc-abar-in { padding: 8px 36px; }
}
/* EL HUECO SE SUMA, NO SE ESCRIBE (28/09/2026).
Antes este bloque le ponía al
su `padding-top` entero
—76/64px más la barra, o sólo la barra en las pantallas que abren
con foto— con `html body … !important`. Con eso pisaba lo que
cada pantalla decide para su propio hueco, que vive en otras
hojas: el listado sin foto del teléfono pide 64px
(rentcli-skin.css) y se quedaba en los 34 de la barra, con el
título debajo de la cabecera. Cualquier pantalla nueva con un
hueco propio tenía el mismo fallo esperándola.
Ahora la barra sólo añade lo suyo, en una propiedad que no usa
nadie más: el borde superior del , transparente. El
`padding-top` sigue siendo de quien le toca y los dos se suman
solos. La ficha de servicio pone el body a cero y el borde sigue
ahí, igual que en la portada con héroe. */
html body { border-top: var(--rc-abar-empuje) solid transparent !important; }
/* LA CABECERA SE BAJA CON `translate`, NO CON `top`.
Cada estilo de cabecera la coloca a su manera: la pastilla
flotante a 12px (8px en el teléfono), la «blur» del móvil
pegada al borde con `inset: 0 0 auto !important`, y las que
vengan. Con `top` había que igualar a cada una por separado,
y la que se escapaba —la blur, en el teléfono— quedaba debajo
de la barra (16/09/2026). `translate` se SUMA a donde esté la
cabecera, sea donde sea, y no lo escribe ningún estilo.
Sin `!important` y con menos peso que la regla que la esconde
al bajar (`body.frontend-page .bc_wrap .bc_header.bc-header-away`,
en minisite-cards.css): mientras está escondida manda ésa, y
al volver manda ésta. */
html body.frontend-page .bc_wrap .bc_header {
translate: 0 var(--rc-abar-top);
}
/* Que la cabecera baje y suba a la vez que la barra, con la
misma curva que su autoocultado. La regla de minisite-cards.css
pesa `body.frontend-page .bc_wrap .bc_header` y lleva
`!important`: hace falta un escalón más. */
html body.frontend-page .bc_wrap .bc_header {
transition: translate .28s cubic-bezier(.22, .8, .3, 1), background .3s, box-shadow .3s !important;
}
@media (prefers-reduced-motion: reduce) {
html body.frontend-page .bc_wrap .bc_header {
transition: background .3s, box-shadow .3s !important;
}
}
.bcai-launch,.bcai-launch *{box-sizing:border-box}
.bcai-launch{position:fixed;bottom:16px;z-index:9998;border:0;cursor:pointer;background:var(--bcai-tint,#33D5C5);color:#fff;font-size:16px;box-shadow:var(--rc-shadow-lg,0 4px 14px rgba(0,0,0,.20));display:flex;align-items:center;justify-content:center;gap:7px}
.bcai-launch svg{display:block;flex:0 0 auto;width:21px;height:21px}
.bcai-launch span{display:none}
.bcai-launch.hidden{display:none}
.bcai-launch.bcai-pos-derecha,.bcai-launch.bcai-pos-izquierda{width:46px;height:46px;border-radius:50%}
.bcai-launch.bcai-pos-derecha{right:16px}
.bcai-launch.bcai-pos-izquierda{left:16px}
.bcai-launch.bcai-pos-centro{left:50%;transform:translateX(-50%);height:40px;padding:0 16px;border-radius:20px;font-size:15px}
.bcai-launch.bcai-pos-centro svg{width:17px;height:17px}
.bcai-launch.bcai-pos-centro span{display:inline;font-size:13px;font-weight:600;white-space:nowrap}
.bcai-float:not(.open){display:none}