`
(`.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;
}
}
.cx {
/* Todo sale del tema. El segundo valor solo entra en juego fuera de un
minisite, donde estas variables no están definidas. */
--cx-primary: var(--bc-primary, #3d5afe);
--cx-on-primary: var(--bc-on-primary, #ffffff);
--cx-ink: var(--bc-text, #16181d);
--cx-bg: var(--bc-background, #ffffff);
--cx-radius: var(--bc-radius, 8px);
--cx-card: var(--bc-card-radius, 22px);
--cx-line: color-mix(in srgb, var(--cx-ink) 14%, transparent);
/* El borde de una caja donde se escribe no es una línea decorativa: es
lo único que dice dónde empieza el campo. Al 14% —el mismo gris que
separa la tarjeta del fondo— los cuatro campos del formulario se
quedaban en un contorno fantasma sobre un fondo casi blanco, por
debajo del 3:1 que pide un control de interfaz. Al 46% ronda el 3:1
contra un fondo claro y el formulario por fin se ve como formulario. */
--cx-field-line: color-mix(in srgb, var(--cx-ink) 46%, transparent);
--cx-mute: color-mix(in srgb, var(--cx-ink) 62%, transparent);
--cx-surface: color-mix(in srgb, var(--cx-bg) 96%, var(--cx-ink));
--cx-shadow: 0 24px 60px color-mix(in srgb, var(--cx-ink) 10%, transparent);
color: var(--cx-ink);
font-family: var(--bc-font, inherit);
}
/* El aire vertical sale del ritmo que el vendedor guardó en su tema, no de
un número escrito aquí: --bc-section-padding y su versión de móvil. El
respaldo solo entra fuera de un minisite, donde no hay tema que leer.
Va en clases aparte porque el bloque las quita de aquel lado donde el
editor escribió su propio relleno en las opciones de sección: así el
suyo sustituye a éste en vez de sumarse. */
.cx-pt { padding-top: var(--bc-section-padding, 60px); }
.cx-pb { padding-bottom: var(--bc-section-padding, 60px); }
/* Mismo corte que usan las opciones de sección (BaseBlock), para que el
bloque y el panel no discrepen sobre dónde empieza el móvil. */
@media (max-width: 1023.98px) {
.cx-pt { padding-top: var(--bc-section-padding-mobile, 32px); }
.cx-pb { padding-bottom: var(--bc-section-padding-mobile, 32px); }
}
.cx * { box-sizing: border-box; }
.cx-wrap {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 20px;
}
.cx-grid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 28px;
align-items: stretch;
}
/* ── Panel de marca ─────────────────────────────────────────────── */
.cx-panel {
position: relative;
overflow: hidden;
border-radius: var(--cx-card);
background-color: var(--cx-primary);
color: var(--cx-on-primary);
padding: clamp(28px, 4vw, 46px);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
/* La foto, cuando la hay, va debajo de un velo del color de marca: así el
texto se lee siempre, sea cual sea la foto que suba el vendedor.
El velo estaba en un 22% plano y se comía la foto entera: el vendedor
subía la suya y en la página solo quedaba un rectángulo de color liso.
Ahora la foto entra al 45% y el velo es un degradado en diagonal: denso
arriba a la izquierda —que es donde cae el texto, porque el panel apila
desde ahí— y casi transparente en la esquina de abajo, que es donde la
foto se ve de verdad.
El último tramo del degradado es negro y no color de marca a propósito.
Una marca clara (un amarillo, un blanco roto) sobre una foto clara (un
cielo, una playa) deja el texto blanco sin contraste, y eso no depende de
la foto de nadie en concreto: el negro pone un suelo que ninguna
combinación de las dos puede levantar. */
.cx-panel-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: .45;
}
.cx-panel-veil {
position: absolute;
inset: 0;
background: linear-gradient(155deg,
color-mix(in srgb, var(--cx-primary) 92%, transparent) 0%,
color-mix(in srgb, var(--cx-primary) 68%, transparent) 46%,
color-mix(in srgb, #000 34%, transparent) 100%);
}
.cx-panel-in { position: relative; }
.cx-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
/* Iba al 78%. Son 12px en mayúsculas sobre el color de marca: a esa
transparencia el blanco se queda por debajo del 4.5:1 que pide una
letra de ese tamaño, y en un móvil al sol no se lee. */
opacity: .94;
margin-bottom: 14px;
}
.cx-title {
font-family: var(--bc-font-heading, inherit);
font-size: clamp(26px, 3.1vw, 40px);
line-height: 1.15;
font-weight: 700;
margin: 0 0 12px;
color: inherit;
}
.cx-sub {
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.55;
margin: 0;
opacity: .95;
}
.cx-desc {
font-size: 15px;
line-height: 1.6;
margin: 16px 0 0;
opacity: .92;
}
.cx-desc :is(p, ul, ol):last-child { margin-bottom: 0; }
.cx-list {
list-style: none;
margin: 30px 0 0;
padding: 26px 0 0;
border-top: 1px solid color-mix(in srgb, var(--cx-on-primary) 22%, transparent);
display: grid;
gap: 6px;
}
.cx-list li { margin: 0; }
.cx-row {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 10px 12px;
margin: 0 -12px;
border-radius: var(--cx-radius);
color: inherit;
text-decoration: none;
transition: background-color .18s ease;
}
a.cx-row:hover,
a.cx-row:focus-visible {
background-color: color-mix(in srgb, var(--cx-on-primary) 14%, transparent);
text-decoration: none;
color: inherit;
}
.cx-ico {
flex: 0 0 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: color-mix(in srgb, var(--cx-on-primary) 16%, transparent);
font-size: 15px;
}
.cx-row span { padding-top: 6px; line-height: 1.45; word-break: break-word; }
.cx-row .cx-hours { white-space: pre-line; }
/* ── Redes ──────────────────────────────────────────────────────────
En fila de iconos y no como una fila de texto por red, que es como se
pintan el teléfono y el correo. La diferencia no es estética: a un
teléfono se le lee el número y a un Instagram no se le lee la
dirección, se le reconoce el icono y se pulsa. Nueve redes en filas de
texto son nueve renglones de «https://instagram.com/...» que empujan el
formulario fuera de la pantalla en un móvil; en iconos son dos
renglones.
El nombre viaja igual, en `aria-label` y en `title`: un lector de
pantalla no ve el icono, y el ratón necesita saber a dónde va. */
.cx-socials {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 22px 0 0;
padding: 0;
}
.cx-socials li { margin: 0; }
.cx-social {
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: inherit;
text-decoration: none;
background-color: color-mix(in srgb, var(--cx-on-primary) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--cx-on-primary) 26%, transparent);
transition: background-color .18s ease, transform .12s ease;
}
a.cx-social:hover,
a.cx-social:focus-visible {
background-color: color-mix(in srgb, var(--cx-on-primary) 30%, transparent);
color: inherit;
text-decoration: none;
}
a.cx-social:active { transform: translateY(1px); }
/* La lista de datos y la de redes se separan con la misma raya, pero solo
cuando hay algo encima: sin datos, una raya sobre los iconos sería una
raya bajo el título y nada más. */
.cx-list + .cx-socials {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid color-mix(in srgb, var(--cx-on-primary) 22%, transparent);
}
.cx-socials:first-child {
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid color-mix(in srgb, var(--cx-on-primary) 22%, transparent);
}
/* ── Tarjeta del formulario ─────────────────────────────────────── */
.cx-card {
background-color: var(--cx-bg);
border: 1px solid var(--cx-line);
border-radius: var(--cx-card);
box-shadow: var(--cx-shadow);
padding: clamp(24px, 3.2vw, 40px);
}
.cx-card-head {
font-family: var(--bc-font-heading, inherit);
font-size: 20px;
font-weight: 700;
margin: 0 0 22px;
}
.cx-fields { display: grid; gap: 16px; }
.cx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cx-field { display: grid; gap: 7px; }
.cx-field label {
font-size: 13px;
font-weight: 600;
color: var(--cx-mute);
margin: 0;
}
.cx-field :is(input, textarea) {
width: 100%;
font: inherit;
font-size: 15px;
color: var(--cx-ink);
background-color: var(--cx-surface);
border: 1px solid var(--cx-field-line);
border-radius: var(--cx-radius);
padding: 13px 15px;
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cx-field textarea { min-height: 148px; resize: vertical; }
.cx-field :is(input, textarea)::placeholder { color: color-mix(in srgb, var(--cx-ink) 38%, transparent); }
.cx-field :is(input, textarea):focus {
outline: none;
background-color: var(--cx-bg);
border-color: var(--cx-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-primary) 22%, transparent);
}
.cx-captcha:empty { display: none; }
.cx-send {
width: 100%;
margin-top: 4px;
font: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: .02em;
color: var(--cx-on-primary);
background-color: var(--cx-primary);
border: 0;
border-radius: var(--cx-radius);
padding: 15px 22px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: filter .18s ease, transform .12s ease, box-shadow .18s ease;
}
.cx-send:hover {
filter: brightness(1.07);
box-shadow: 0 10px 24px color-mix(in srgb, var(--cx-primary) 36%, transparent);
}
.cx-send:active { transform: translateY(1px); }
.cx-send:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-primary) 35%, transparent);
}
/* La regla que escondía el spinner vivía bajo .bc-contact-block, que ya no
usamos: sin esto giraría siempre, no solo al enviar. */
.cx .fa-spinner { display: none; }
.cx .bc-contact-block-form.loading .fa-spinner { display: inline-block; }
.cx .bc-contact-block-form.loading .cx-send { pointer-events: none; opacity: .75; }
.cx-mess:empty { display: none; }
.cx-mess {
margin-top: 16px;
font-size: 14px;
line-height: 1.5;
padding: 12px 15px;
border-radius: var(--cx-radius);
border: 1px solid var(--cx-line);
background-color: var(--cx-surface);
}
.cx-mess .text-success { color: #157347; }
.cx-mess .text-danger { color: #b02a37; }
/* ── Mapa ───────────────────────────────────────────────────────── */
.cx-map {
margin-top: 28px;
border-radius: var(--cx-card);
overflow: hidden;
border: 1px solid var(--cx-line);
line-height: 0;
}
.cx-map iframe { display: block; width: 100%; height: 380px; border: 0; }
/* ── Adaptación ─────────────────────────────────────────────────── */
@media (max-width: 991px) {
.cx-grid { grid-template-columns: 1fr; gap: 20px; }
.cx-panel { min-height: 0; }
}
@media (max-width: 575px) {
.cx-wrap { padding: 0 16px; }
.cx-two { grid-template-columns: 1fr; }
.cx-map iframe { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
.cx * { transition: none !important; }
.bcai-launch, .bcrr-launch, #oc-widget-root { transition: none !important; }
}
/* ── Sitio para escribir ────────────────────────────────────────────
Sobre el formulario flotan tres botones: el del asistente, el de
reservar y el de WhatsApp. Van fijos a la parte de abajo de la ventana,
así que en un móvil se posan justo encima de los campos —medido: tapan
la etiqueta y la caja de «Teléfono»— y ahí no hay relleno que valga,
porque al desplazarse tapan lo que toque estar a esa altura.
Mientras se escribe se apartan, y al salir del campo vuelven. No se
quitan: quien entra a contactar puede seguir queriendo preguntar por el
chat, y esa es la razón de que estén ahí. Solo dejan de estorbar durante
los segundos en que sí estorban.
El de WhatsApp lo pone un tercero (`cfpixel.js`) y no está en el
código; se le llega por su id, que es lo único suyo que se puede
nombrar. Escribe su posición en un estilo en línea, pero no la
transparencia, así que esto le gana sin necesidad de !important. */
body.cx-escribiendo .bcai-launch,
body.cx-escribiendo .bcrr-launch,
body.cx-escribiendo #oc-widget-root {
opacity: 0;
pointer-events: none;
}
.bcai-launch,
.bcrr-launch,
#oc-widget-root {
transition: opacity .18s ease;
}
/* ── El panel, a salvo de la piel del tema ──────────────────────────
Dos reglas de `chisfis-skin.css` alcanzan el interior de este panel y
le ganan al `color: inherit` de arriba, porque pesan más:
.bc-skin .bc_wrap p → var(--sk-muted) !important
body.bc-skin .bc_wrap a:not(.btn)… → var(--sk-accent-ink)
Sin esto el panel se pinta del color de marca y luego, encima, el
subtítulo y la descripción salen en el gris del texto corrido, y el
teléfono, el WhatsApp y el correo en el propio color de marca: sobre
ese fondo, invisibles. Le pasa a cualquier vendedor que use esta piel,
no a uno en concreto.
Se rompe el empate con el id de la sección —que ya existía—: un id gana
a cualquier número de clases, y así la piel sigue mandando en todo lo
que no sea este panel. La de los párrafos, además, viene marcada
`!important` en la hoja compilada, y contra eso la especificidad no
cuenta: hay que responder igual. La de los enlaces no lo lleva, así que
ahí basta el id. */
#cx-408a6442 .cx-panel,
#cx-408a6442 .cx-panel :is(p, li, span, strong, em, b, i, h2, h3, h4) {
color: var(--cx-on-primary) !important;
}
#cx-408a6442 .cx-panel a,
#cx-408a6442 .cx-panel a:hover,
#cx-408a6442 .cx-panel a:focus,
#cx-408a6442 .cx-panel a:visited {
color: var(--cx-on-primary);
}
/* ── Los campos, a salvo de la misma piel ───────────────────────────
`chisfis-skin.css` pinta las cajas de escribir de todo el sitio:
.bc-skin .form-control, .bc-skin input[type="text"],
.bc-skin input[type="email"], .bc-skin input[type="search"],
.bc-skin textarea, .bc-skin select
→ border, background, color y border-radius, los cuatro
marcados !important
Esa lista se escribió a mano y no nombra `tel`. Lo que se ve en este
formulario, medido: «Nombre», «Correo» y «Mensaje» los pintaba la piel
y «Teléfono» los pintaba este bloque —otro radio, otro fondo y un borde
casi tres veces más oscuro—. Cuatro campos del mismo formulario, uno
distinto de los otros tres, y no por elección de nadie.
Le responde el bloque y no la piel porque el borde que trae la piel
—negro al 16% sobre un fondo casi blanco— se queda muy por debajo del
3:1 que pide un control de interfaz: los campos se veían como un
contorno fantasma. Y hace falta `!important`, porque contra un
`!important` de una hoja compilada la especificidad no cuenta; el id de
la sección solo desempata. Alcanza únicamente a los campos de esta
sección: en el resto del sitio la piel sigue mandando. */
#cx-408a6442 .cx-field :is(input, textarea) {
background-color: var(--cx-surface) !important;
border: 1px solid var(--cx-field-line) !important;
border-radius: var(--cx-radius) !important;
color: var(--cx-ink) !important;
}
#cx-408a6442 .cx-field :is(input, textarea):focus {
background-color: var(--cx-bg) !important;
border-color: var(--cx-primary) !important;
}
.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}