`
(`.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;
}
}
/* ── El selector ──────────────────────────────────────────────── */
.all-view {
display: inline-flex; align-items: center; gap: 2px;
padding: 3px; background: #fff;
border: 1px solid #e3e7ee; border-radius: 10px;
vertical-align: middle;
}
.all-view-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 32px; padding: 0;
background: transparent; border: 0; border-radius: 8px;
color: #79839a; line-height: 0; cursor: pointer;
transition: background .15s, color .15s;
}
.all-view-btn svg { fill: currentColor; }
.all-view-btn:hover { background: #f2f4f8; color: #172031; }
.all-view-i { display: inline-flex; }
.all-view-i.only-desk { display: none; }
@media (min-width: 768px) {
.all-view-i.only-mobile { display: none; }
.all-view-i.only-desk { display: inline-flex; }
}
/* El botón encendido se pinta desde el ``, no desde una clase que
el guion ponga en el botón: al repintarse el listado los botones son
otros y habrían nacido todos apagados. */
@media (max-width: 767px) {
body[data-rc-m="list"] .all-view-btn[data-view="list"],
body[data-rc-m="comfort"] .all-view-btn[data-view="comfort"],
body[data-rc-m="compact"] .all-view-btn[data-view="compact"] {
background: var(--bc-primary, #5191fa); color: #fff;
}
}
@media (min-width: 768px) {
body[data-rc-d="list"] .all-view-btn[data-view="list"],
body[data-rc-d="comfort"] .all-view-btn[data-view="comfort"],
body[data-rc-d="compact"] .all-view-btn[data-view="compact"] {
background: var(--bc-primary, #5191fa); color: #fff;
}
}
/* ── La rejilla ───────────────────────────────────────────────────
`bc-results` es el `.row` de Bootstrap que envuelve las tarjetas. Se
convierte en rejilla y se anulan los anchos de las columnas: así una
misma regla vale para /all y para cada tipo, que traían repartos
distintos —dos columnas en tours, tres en eventos—. Sin elección no
se toca nada: manda el reparto de siempre. */
body[data-rc-m] .bc-results,
body[data-rc-d] .bc-results {
display: grid;
gap: 26px 24px;
align-items: start;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Los `[data-rc-m]` repetidos no son un descuido. chisfis ya reparte
estas columnas por su cuenta —tres en escritorio, una en móvil— con
`!important` y una selección larga:
body.bc-skin .bc_wrap [class*="bc_search_"] .row > .col-lg-6.col-md-6
A un `!important` no se le gana llegando después, solo pesando más,
y repetir el atributo es la manera más corta de subir el peso sin
inventar clases que no usa nadie más. Sin esto la tarjeta se queda en
un tercio de su celda y el selector parece no hacer nada en /tour,
/car, /space y /boat —en /all no, que esa página no lleva
`bc_search_` y por eso allí sí funcionaba—. */
body[data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results > [class*="col-"],
body[data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results > .bc-results-item {
flex: none !important;
width: auto !important;
max-width: none !important;
min-width: 0;
padding-left: 0 !important;
padding-right: 0 !important;
padding-inline: 0 !important;
}
/* La separación la pone el hueco de la rejilla. Mismo motivo para el
peso: en móvil chisfis le pone 24px de margen a cada tarjeta. */
body[data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop,
body[data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop-list { margin-bottom: 0 !important; }
@media (max-width: 767px) {
body[data-rc-m="list"] .bc-results { grid-template-columns: minmax(0, 1fr); }
body[data-rc-m="comfort"] .bc-results { grid-template-columns: minmax(0, 1fr); }
body[data-rc-m="compact"] .bc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}
@media (min-width: 768px) {
body[data-rc-d="list"] .bc-results { grid-template-columns: minmax(0, 1fr); }
body[data-rc-d="comfort"] .bc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-rc-d="compact"] .bc-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* En tableta la columna de resultados es estrecha —al lado va el
filtro—: tres tarjetas ahí no se leen. */
@media (min-width: 768px) and (max-width: 991px) {
body[data-rc-d="compact"] .bc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── La foto cuando hay dos columnas ──────────────────────────────
La proporción de la foto la pinta chisfis desde `--sk-card-ratio`, y
sin elegir nada vale 12/11: casi cuadrada. Esa forma no la decidió
nadie mirando dos columnas, y con la rejilla partida en dos se
notaba —la misma tarjeta salía apaisada en /car y casi cuadrada en
/all, 166 de ancho por 152 de alto, y en el escritorio alta en las
cinco, 401 por 367, tanto que de cada fila se veía una foto y
media—. Aquí se elige a propósito, y distinta según el tamaño: en
pantalla ancha la tarjeta es grande y apaisada le sienta bien; en el
teléfono, con dos carriles de 167px, la foto se pide vertical —la
del catálogo es el vehículo entero y en apaisado se queda en una
franja—. 3/4 es el retrato clásico de la fotografía: vertical, pero
un escalón más bajo que el 2/3 de Airbnb o Instagram, que en una
tarjeta de 167px se llevaba 250 píxeles de alto él solo.
Se escribe la variable en la propia tarjeta y no un `aspect-ratio`
sobre la galería: el valor puesto en el elemento gana al heredado
del `:root` sin tener que pelear especificidad contra los
`!important` de la piel, y sigue siendo la regla de chisfis la que
dibuja. Vale para los dos repartos de dos columnas —`compact` en el
teléfono, `comfort` en pantalla ancha— y no toca el de una ni el de
tres, donde la foto ya tiene su ancho.
El `[data-rc-m]` repetido es el mismo truco de más arriba y aquí
hace falta de verdad: en el teléfono chisfis fija la proporción a
3/2 con `body.bc-skin .bc_wrap [class*="bc_search_"] .item-loop`,
que pesa más. Sin repetir el atributo esto funcionaría en /all
—que no lleva clase `bc_search_`— y no haría nada en /tour, /car,
/space ni /boat: los cuatro donde más se mira. */
@media (max-width: 767px) {
body[data-rc-m="compact"][data-rc-m][data-rc-m] .bc-results .item-loop { --sk-card-ratio: 3 / 4; }
}
@media (min-width: 768px) {
body[data-rc-d="comfort"] .bc-results .item-loop { --sk-card-ratio: 3 / 2; }
}
/* ── Modo lista ───────────────────────────────────────────────────
Una tarjeta por fila con la foto a un lado. No hay tarjeta nueva: es
la de cada tipo recolocada, y por eso nada se coloca por su nombre
salvo la foto. Todo lo demás cae en la columna derecha en el orden
en que venga, que es lo único que se puede dar por cierto cuando
hoteles y eventos traen su propio marcado y el resto comparte el de
`Layout::parts.service-card`.
`row-gap: 0` es a propósito: sobran filas para que quepa la tarjeta
más larga, y un hueco entre filas vacías estiraría la columna de la
foto. Cada pieza se separa con su propio margen.
Los renglones del final están pedidos por nombre —la raya en el 9,
el precio en el 10 y los botones en la ÚLTIMA, la 13—; el elástico
(la 12) va entre el precio y los botones. Lo demás cae en los ocho
primeros por orden de llegada.
EL ELÁSTICO VA DELANTE DE LOS BOTONES, Y ESA ES TODA LA GRACIA. Con
el `1fr` detrás de ellos, los botones se pegaban a lo último que
hubiera escrito encima: una ficha con el título en un renglón y dos
iconos los subía, y el sobrante de la fila —que lo marca la foto, no
el texto— se quedaba debajo. Medido en /car a 375px, el aire bajo los
botones iba de 5px a 26px según la ficha, y una fila de botones a una
altura distinta en cada tarjeta se lee como un desajuste. Con el
elástico delante, el hueco se lo come el vacío y los botones quedan
siempre a ras del pie de la foto. Las once filas `auto` siguen
estando, así que lo que se autocoloca no cambia de sitio. */
.rc-list .bc-results .item-loop,
.rc-list .bc-results .item-loop-list {
display: grid !important;
grid-template-columns: clamp(110px, 32%, 300px) minmax(0, 1fr) !important;
grid-template-rows: repeat(11, auto) 1fr auto !important;
row-gap: 0 !important;
column-gap: 18px !important;
align-items: start !important;
align-content: start !important;
}
.rc-list .bc-results .item-loop > *,
.rc-list .bc-results .item-loop-list > * {
grid-column: 2 !important;
grid-row: auto !important;
}
/* La cinta de «Destacado» va en absoluto sobre la foto. Un hijo en
absoluto de una rejilla se coloca respecto a SU celda, así que
mandarla a la columna del texto la sacaba de la foto y la dejaba
encima de la ubicación. Se queda en la celda de la foto. */
.rc-list .bc-results .item-loop > .featured,
.rc-list .bc-results .item-loop-list > .featured {
grid-column: 1 !important;
grid-row: 1 !important;
}
/* El margen tiene que ganarle al `margin: 0 !important` con que las dos
pieles aplanan estas piezas, de ahí el `body` delante. */
body.rc-list .bc-results .item-loop > *,
body.rc-list .bc-results .item-loop-list > * { margin: 0 0 6px !important; }
/* Piel clásica: la foto es una caja con alto fijo y proporción por
padding. En una fila de lista eso daba una foto de 320px al lado de
cuatro renglones: aquí se estira lo que ocupa el texto. */
body:not(.bc-skin).rc-list .bc-results .item-loop > .thumb-image,
body:not(.bc-skin).rc-list .bc-results .item-loop-list > .thumb-image {
grid-area: 1 / 1 / -1 / 2 !important;
align-self: stretch !important;
height: auto !important;
min-height: 150px !important;
padding-bottom: 0 !important;
margin: 0 !important;
}
/* Piel chisfis: `.thumb-image` no pinta caja (display:contents), así que
quien ocupa la columna de la foto es la galería, y lo que iba encima
de la foto —corazón, estrellas, oferta— se queda encima. El precio no:
en esta piel vive fuera de la foto y es lo último de la ficha. */
body.bc-skin.rc-list .bc-results .item-loop > .thumb-image > * {
grid-column: 1 !important;
grid-row: 1 !important;
margin: 0 !important;
}
body.bc-skin.rc-list .bc-results .item-loop > .thumb-image > .bc-card-gallery,
body.bc-skin.rc-list .bc-results .item-loop > .thumb-image > a,
body.bc-skin.rc-list .bc-results .item-loop > .thumb-image > img {
grid-row: 1 / -1 !important;
aspect-ratio: 3 / 2 !important;
align-self: start !important;
}
body.bc-skin.rc-list .bc-results .item-loop > .thumb-image > .price-wrapper {
grid-column: 2 !important;
grid-row: 10 !important;
}
/* La raya corta de la piel es un pseudo-elemento colocado como celda. */
body.bc-skin.rc-list .bc-results .item-loop::before {
grid-column: 2 !important;
grid-row: 9 !important;
margin: 2px 0 8px !important;
}
/* ── Los dos botones ──────────────────────────────────────────────
«Detalles» y «Reservar» (`Layout::parts.service-card`) son de
después de esta maqueta y no entraban por el `> *` de arriba: en
las páginas por tipo la piel los clava a lo ancho de las DOS
columnas —`grid-area: 8 / 1 / 9 / 3 !important` bajo
`[class*="bc_search_"]`— y aquí la columna 1 es la foto, así que
salían pintados encima de la imagen y del título. Van al final de
la columna del texto, debajo del precio.
El `.rc-list` repetido es el truco de siempre: al `!important` de
la piel —seis clases— sólo se le gana pesando más. */
body.rc-list.rc-list.rc-list.rc-list .bc-results .item-loop .bc-svc-actions,
body.rc-list.rc-list.rc-list.rc-list .bc-results .item-loop-list .bc-svc-actions {
grid-area: 13 / 2 / 14 / 3 !important;
align-self: end !important;
justify-content: flex-start !important;
margin: 8px 0 0 !important;
}
/* A lo ancho de la fila entera, con `flex: 1 1 0`, los dos botones se
repartían 700px y se leían como dos barras. Se quedan a su tamaño.
En el teléfono no: ahí la columna del texto son 200px y los dos
tienen que repartírselos. */
@media (min-width: 768px) {
body.rc-list.rc-list.rc-list.rc-list .bc-results .item-loop .bc-svc-btn,
body.rc-list.rc-list.rc-list.rc-list .bc-results .item-loop-list .bc-svc-btn {
flex: 0 1 auto !important;
min-width: 140px !important;
max-width: 210px !important;
padding: 0 24px !important;
}
}
/* Aquí sobra ancho: el título puede ocupar dos renglones en vez de
cortarse a la mitad con puntos suspensivos. */
.rc-list .bc-results .item-loop .item-title > a {
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rc-list .bc-results .item-loop .service-review,
.rc-list .bc-results .item-loop .amenities,
.rc-list .bc-results .item-loop .info {
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 16px !important;
}
/* ── Modo lista en el teléfono ────────────────────────────────────
La misma maqueta, pero aquí la foto era un sello: 110px de ancho por
73 de alto, pegado arriba, dentro de una tarjeta de 256. Debajo la
columna de la foto quedaba vacía de punta a punta y la tarjeta se
leía como un párrafo con una estampilla al lado.
Tres cosas, medidas sobre /car en un teléfono de 375px:
1. LA COLUMNA DE LA FOTO CRECE. `clamp(110px, 32%, 300px)` daba 110
en cualquier teléfono —el 32% de 311px no llega—, así que el
mínimo era el único número que mandaba. Pasa a `clamp(124px, 38%,
190px)`: 124 en un teléfono chico, 38% en cuanto hay sitio.
2. LA FOTO OCUPA TODO EL ALTO. Tenía `aspect-ratio: 3/2` y
`align-self: start`, o sea alto propio y anclada arriba. Ahora se
estira a la fila entera (`1 / -1` con `stretch`) y la imagen, que
ya venía con `object-fit: cover`, recorta sola. `min-height` para
que una ficha sin apenas datos no deje una foto aplastada.
3. FUERA LOS HUECOS ENTRE RENGLONES VACÍOS. La rejilla tiene doce
filas para que quepa la tarjeta más larga y aquí sólo se usan
cinco; `row-gap: 0` estaba escrito, pero chisfis lo vuelve a
poner en 6px con más peso, y seis huecos de 6px entre filas de
cero alto eran 36px de aire muerto entre el precio y los botones.
Con eso la tarjeta baja de 256px a 205 (173 las que no van
destacadas) enseñando lo mismo. */
@media (max-width: 767px) {
body.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop {
grid-template-columns: clamp(124px, 38%, 190px) minmax(0, 1fr) !important;
row-gap: 0 !important;
column-gap: 12px !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m] .bc-results .item-loop > .thumb-image > .bc-card-gallery {
grid-row: 1 / -1 !important;
align-self: stretch !important;
aspect-ratio: auto !important;
height: auto !important;
min-height: 128px !important;
margin: 0 !important;
border-radius: var(--sk-r-img, 14px) !important;
}
/* La galería es un carril flex de diapositivas con la imagen en
absoluto: sin darles alto, estirar la caja de fuera no estira lo
de dentro. */
body.bc-skin.rc-list[data-rc-m="list"] .bc-results .item-loop > .thumb-image > .bc-card-gallery > .bc-card-gallery-track,
body.bc-skin.rc-list[data-rc-m="list"] .bc-results .item-loop > .thumb-image > .bc-card-gallery .bc-card-gallery-slide {
height: 100% !important;
}
/* La ficha DESTACADA es la única con fondo y relleno —se los pone
chisfis con `:has(> .featured)` desde `--bc-featured-pad` y
`--bc-featured-radius`—, y ahí la foto va a sangre: se come el
relleno con margen negativo y toma la curva de la tarjeta por el
lado que toca el borde. El margen sale de la MISMA variable, no
de un 16 escrito a mano: en una ficha normal el relleno es cero
y un número fijo habría sacado la foto fuera de la tarjeta.
`width: auto` porque la piel le clava `width: 100%`, y con el
margen negativo el 100% se quedaba corto por ese lado. */
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m] .bc-results .item-loop.bc-svc-card:has(> .featured) > .thumb-image > .bc-card-gallery {
width: auto !important;
margin: calc(0px - var(--bc-featured-pad, 0px)) 0
calc(0px - var(--bc-featured-pad, 0px))
calc(0px - var(--bc-featured-pad, 0px)) !important;
border-radius: var(--bc-featured-radius, 14px) 0 0 var(--bc-featured-radius, 14px) !important;
}
/* La ubicación estaba pintada DEBAJO DE LA FOTO: la piel la clava en
`4 / 1 / 5 / 2` con `!important`, y la columna 1 es la de la
imagen. Con la foto de sello se veía como un pie; con la foto a
todo lo alto se le habría puesto encima. Vuelve a la columna del
texto, en su propio renglón, y el precio baja al siguiente: los
dos compartían fila y el de la izquierda era ella. */
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop > .location {
grid-area: 3 / 2 / 4 / 3 !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper {
grid-area: 4 / 2 / 5 / 3 !important;
/* En esta maqueta el precio va justo debajo del nombre: no hay
filas vacías encima, así que se anula el tirón hacia arriba
con el que la piel las descuenta en la tarjeta vertical. */
margin-top: 0 !important;
}
/* La raya corta de la piel, entre el precio y los botones, sobra en
una tarjeta de cuatro renglones. */
body.bc-skin.rc-list[data-rc-m="list"] .bc-results .item-loop::before { display: none !important; }
/* Y la letra, a la medida de la columna que queda: 175px. Con el
tamaño de siempre el título se cortaba con puntos suspensivos en
el segundo renglón y el precio no cabía a lo ancho —«/día» se
caía a una tercera línea él solo, alineada a la derecha, que era
lo más raro de la tarjeta—. El precio va a la izquierda, como
todo lo demás de esa columna. */
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .item-title > a {
font-size: 16px !important;
line-height: 21px !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .location {
font-size: 13px !important;
line-height: 18px !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .amenities {
gap: 4px 10px !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .amenities .amenity,
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .amenities .amenity .text {
font-size: 12px !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper {
text-align: left !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .price {
justify-content: flex-start !important;
align-items: baseline !important;
flex-wrap: nowrap !important;
gap: 6px !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .text-price {
font-size: 17px !important;
line-height: 23px !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .onsale {
font-size: 12px !important;
line-height: 23px !important;
}
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .unit {
font-size: 11px !important;
line-height: 23px !important;
}
/* En una sola línea de 177px sólo caben el precio y el tachado. El
«Ahorras $100.000» mide 119px él solo y en /all —que no lleva
clase `bc_search_`, así que no le llegan las reglas de la piel que
lo esconden en las páginas por tipo— desbordaba la tarjeta por la
derecha. Se va: la píldora de la rebaja ya está sobre la foto. Y
el `nowrap` en las dos cifras, para que «/día» no se descuelgue a
un renglón propio cuando el sitio justo no llega. */
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .bc-save { display: none !important; }
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .text-price,
body.bc-skin.rc-list[data-rc-m="list"][data-rc-m][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .onsale { white-space: nowrap !important; }
}
@media (max-width: 767px) {
.rc-list .bc-results .item-loop,
.rc-list .bc-results .item-loop-list { column-gap: 12px !important; }
/* Encima de la foto va una sola cosa: la rebaja, que es lo que cambia
la decisión. La cinta de «Destacado» no hace falta —la ficha
destacada ya se distingue por su fondo— y con la foto de sello de
antes ni cabía. Ahora la foto ocupa el alto entero, pero la
píldora sigue chica a propósito: es un dato de esquina, no un
titular. */
.rc-list .bc-results .item-loop .featured { display: none !important; }
.rc-list .bc-results .item-loop .bc-card-gallery::after {
top: 6px !important;
inset-inline-start: 6px !important;
padding: 0 7px !important;
font-size: 10px !important;
line-height: 18px !important;
}
.rc-list .bc-results .item-loop .service-wishlist {
width: 26px !important;
height: 26px !important;
margin: 6px 6px 0 0 !important;
}
.rc-list .bc-results .item-loop .service-wishlist i { font-size: 12px !important; }
/* Dos columnas en un teléfono son tarjetas de 167px: la letra baja,
de los datos se enseñan los dos primeros y el pie —precio a un
lado, nota al otro— se apila. Sin eso la tarjeta se salía por
encima de la de al lado.
EL ATRIBUTO REPETIDO CINCO VECES. Todo esto estaba escrito desde
el principio y no se aplicaba en ninguna página por tipo: la
tarjeta salía compacta en /all y con el título a 17px y el precio
a 20px en /car, /tour, /space y /boat, como si el modo de dos
columnas no existiera ahí. La razón es la de siempre: chisfis
vuelve a fijar los mismos tamaños con selectores larguísimos
—el del precio son nueve clases y un elemento,
`[class*="bc_search_"] .item-loop.bc-svc-card .thumb-image
.price-wrapper .price .text-price`— y a un `!important` sólo se
le gana pesando más. Cinco repeticiones pasan de largo al más
pesado de los suyos; cuatro no llegan.
LAS CIFRAS SON MEDIDAS, no tanteadas. La tarjeta media 468px de
alto: 252 de foto y 216 de contenido, y ese contenido se iba
menos en el texto que en el aire —el título ocupaba 48px para dos
renglones, el bloque del precio 77 él solo, y entre cada pieza
había 8px de separación—. Bajando el interlineado y el hueco a la
mitad, el contenido cae a unos 150 sin quitar ni un dato. */
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop { row-gap: 4px !important; }
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .item-title > a { font-size: 14px !important; line-height: 19px !important; }
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .location,
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .service-review,
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .amenities,
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .info,
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .amenities .amenity,
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .amenities .amenity .text { font-size: 12px !important; line-height: 17px !important; }
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .amenities { gap: 3px 8px !important; }
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .amenities .amenity:nth-child(n+3) { display: none !important; }
/* El pie de precio son tres renglones que no caben a lo ancho —el
tachado, el precio con su unidad y la píldora de la rebaja—, así
que cada punto que baja el interlineado se cobra tres veces. */
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .text-price { font-size: 15px !important; line-height: 21px !important; }
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .unit { font-size: 11px !important; line-height: 21px !important; }
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .onsale { font-size: 11px !important; line-height: 15px !important; }
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop .price-wrapper .bc-save {
font-size: 10px !important;
line-height: 15px !important;
padding: 1px 6px !important;
margin-left: 4px !important;
}
/* La rayita que la piel dibuja encima del precio se llevaba 9px de
fila para pintar uno. */
body.bc-skin[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop::before { margin: 1px 0 !important; }
body.bc-skin[data-rc-m="compact"] .bc-results .item-loop .price-wrapper { grid-area: 6 / 1 / 7 / 3 !important; }
body.bc-skin[data-rc-m="compact"] .bc-results .item-loop .service-review {
grid-area: 7 / 1 / 8 / 3 !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
margin-top: 2px !important;
}
body[data-rc-m="compact"] .bc-results .item-loop .service-review .review { display: none !important; }
/* La raya corta de chisfis se queda fuera de este modo. Es la
firma de la piel y a ancho completo separa el pie del resto;
en una tarjeta de 166 es un adorno de 3px que se lleva su
renglón y su hueco —7px— entre la ubicación y el precio, que
ya se distinguen solos por el tamaño de letra. Lo mismo que se
hace en el modo lista del teléfono, más abajo.
El precio SÍ se queda en dos renglones —importe arriba,
tachado debajo—, como lo pinta la piel: juntarlos en uno cabía
(152 de 156) pero no se lee igual. */
body.bc-skin[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop::before { display: none !important; }
/* ── La ficha destacada a dos columnas ────────────────────────
La destacada se tiñe entera con tres variables del tema
(`--bc-featured-bg` al 20%, `-pad: 16px`, `-radius: 20px`, en
chisfis-skin.css sobre `:has(> .featured)`). Ese marco se
diseñó para una tarjeta de 400px. Aquí el carril mide 166 y
los 16px de relleno son el 19% del ancho: la destacada salía
con la foto en 134, el título partido y los botones apretados.
El relleno baja a 12 y las esquinas se recalculan con él
—radio de la foto + relleno— o los dos arcos dejan de ser
concéntricos: los 20px del tema son para el relleno de 16.
EL RELLENO ES SÓLO DE LA DESTACADA. Se probó dárselo a todas
las tarjetas del carril para que las dos columnas casaran
—misma foto, mismas filas— y no: la que no está destacada
tiene que verse como se ha visto siempre, con la foto pegada
al margen de la página, y meterla 12px hacia dentro sin
ningún fondo que lo justifique parece un error. La destacada
tiene su marco y por eso su foto es más pequeña; es lo que
significa llevar marco.
Tampoco se le saca el sitio al contenedor: se probó salir 12px
por cada costado y el bloque de color empieza antes que el
título y los filtros y por la derecha casi toca el borde de la
pantalla. El marco cuesta ancho de foto y se paga; lo que no
se puede es cargárselo al margen de la página.
El sello «Destacado» va en `calc(12px + var(--bc-featured-pad))`
y se recoloca solo. */
body[data-rc-m="compact"][data-rc-m][data-rc-m][data-rc-m][data-rc-m] .bc-results .item-loop {
--bc-featured-pad: 12px;
--bc-featured-radius: calc(var(--sk-r-img, 14px) + 12px);
}
}
/* `clip-path` además de `overflow`: en el iPhone la foto que se está
animando pasa a su propia capa y Safari deja de recortarla con
`overflow: hidden`; se salía de la caja tapando el título de la sección
y el nombre de la ficha. La máscara en el mismo slide (no sólo en la
galería) es la que obliga a Safari a recortar la capa de la foto. */
.bc-card-gallery .bc-card-gallery-slide { overflow: hidden; clip-path: inset(0); }
.bc-card-gallery .bc-card-gallery-slide.is-active {
-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
mask-image: radial-gradient(#fff, #000);
}
.bc-card-gallery .bc-card-gallery-slide img {
transform: none !important;
scale: 1;
translate: 0 0;
transition: scale .7s ease, translate .7s ease !important;
}
/* Sólo con ratón. En una pantalla táctil el `:hover` se queda pegado a la
tarjeta que tocaste —al deslizar el carrusel, sin ir más lejos— y la foto
seguía creciendo nueve segundos sin que nadie lo pidiera. */
@media (hover: hover) and (pointer: fine) {
.item-loop:hover .bc-card-gallery .bc-card-gallery-slide.is-active img,
.item-loop:focus-within .bc-card-gallery .bc-card-gallery-slide.is-active img,
.bc-card-gallery:hover .bc-card-gallery-slide.is-active img,
.bc-card-gallery:focus-within .bc-card-gallery-slide.is-active img {
scale: 1.14;
translate: -2.5% -1.5%;
transition: scale 9s cubic-bezier(.25, .1, .25, 1), translate 9s cubic-bezier(.25, .1, .25, 1) !important;
}
/* Las pares van hacia el otro lado, para que pasar de foto no repita el
mismo recorrido. */
.item-loop:hover .bc-card-gallery .bc-card-gallery-slide.is-active:nth-child(even) img,
.item-loop:focus-within .bc-card-gallery .bc-card-gallery-slide.is-active:nth-child(even) img,
.bc-card-gallery:hover .bc-card-gallery-slide.is-active:nth-child(even) img,
.bc-card-gallery:focus-within .bc-card-gallery-slide.is-active:nth-child(even) img {
translate: 2.5% 1.5%;
}
}
@media (prefers-reduced-motion: reduce) {
.bc-card-gallery .bc-card-gallery-slide img { scale: 1 !important; translate: 0 0 !important; transition: none !important; }
}
.bc-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}