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