/**
 * Portada (doc 02, mockup 01 "home.png").
 *
 * El mockup organiza la página en paneles de cristal apilados: cada sección
 * vive dentro de uno, con su título serif dorado a la izquierda y la píldora
 * "Ver todos" a la derecha. El hero es la excepción: va a sangre, sin panel.
 */

/* ------------------------------------------------------------- 1. El hero */

.bx-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* El doc 02 pide que en móvil se vea el primer producto sin llegar a hacer
	   un scroll entero, así que el hero se queda en poco más de un tercio de
	   pantalla. Es un mínimo: con textos largos crece en vez de recortarlos. */
	min-height: min(42vh, 340px);
	display: flex;
	align-items: center;
	padding: var(--bx-e-4) 0 var(--bx-e-5);
	margin-bottom: var(--bx-e-3);
}

@media (min-width: 782px) {
	.bx-hero {
		min-height: min(64vh, 560px);
		padding: var(--bx-e-6) 0 var(--bx-e-7);
		margin-bottom: var(--bx-e-4);
	}
}

/* El vórtice de nebulosa del mockup: un remolino cian y violeta que ocupa la
   mitad derecha y se apaga hacia el claim, para que el texto no pelee con él. */
.bx-hero__fulgor {
	position: absolute;
	inset: -35% -25% -35% 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(30% 34% at 76% 40%, rgba(94, 232, 255, .3) 0%, rgba(94, 232, 255, 0) 70%),
		radial-gradient(42% 46% at 88% 30%, rgba(139, 92, 246, .32) 0%, rgba(139, 92, 246, 0) 72%),
		radial-gradient(38% 42% at 62% 76%, rgba(56, 214, 245, .2) 0%, rgba(56, 214, 245, 0) 74%),
		radial-gradient(46% 50% at 100% 66%, rgba(112, 60, 210, .26) 0%, rgba(112, 60, 210, 0) 74%),
		radial-gradient(70% 60% at 18% 50%, rgba(0, 4, 9, .55) 0%, rgba(0, 4, 9, 0) 72%);
}

/* En móvil el vórtice se centra un poco más, que es donde cae en el mockup, y
   se atenúa por detrás del texto para no comerse la legibilidad. */
@media (max-width: 781px) {
	.bx-hero__fulgor {
		inset: -30% -40% -20% -10%;
		background:
			radial-gradient(34% 26% at 78% 30%, rgba(94, 232, 255, .3) 0%, rgba(94, 232, 255, 0) 72%),
			radial-gradient(46% 34% at 92% 22%, rgba(139, 92, 246, .34) 0%, rgba(139, 92, 246, 0) 74%),
			radial-gradient(40% 30% at 70% 62%, rgba(56, 214, 245, .18) 0%, rgba(56, 214, 245, 0) 76%),
			radial-gradient(80% 46% at 6% 56%, rgba(0, 4, 9, .6) 0%, rgba(0, 4, 9, 0) 74%);
	}
}

.bx-hero__rejilla {
	display: grid;
	gap: var(--bx-e-4);
	align-items: center;
}

.bx-hero__texto {
	max-width: 34rem;
}

/* Serif dorado del mockup. El tamaño se estira con la pantalla, pero con tope:
   un claim traducido a un idioma más largo no debe comerse el hero. */
.bx .bx-hero__claim {
	margin: 0 0 var(--bx-e-2);
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: clamp(2.1rem, 8vw, 3.6rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: .01em;
	text-wrap: balance;
	text-shadow: 0 0 34px rgba(211, 168, 95, .28);
}

.bx-hero__sub {
	margin: 0 0 var(--bx-e-4);
	max-width: 30rem;
	color: var(--bx-texto-2);
	font-size: clamp(.95rem, 3.4vw, 1.12rem);
	line-height: 1.5;
}

.bx-hero__botones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bx-e-2);
}

/* En el móvil del mockup los dos botones van apilados, del mismo ancho y sin
   llegar al borde de la pantalla. */
.bx-hero__botones .bx-btn {
	min-width: 11rem;
	justify-content: center;
}

@media (max-width: 781px) {
	.bx-hero__botones {
		flex-direction: column;
		align-items: flex-start;
	}

	.bx-hero__botones .bx-btn {
		width: min(100%, 15.5rem);
	}
}

/* Composición de fotos reales de producto.

   En escritorio son tres piezas a la derecha del claim. En móvil no caben al
   lado —la columna es una sola—, así que la primera pasa DETRÁS del texto, a
   sangre, y las otras dos se retiran: el producto se ve desde el primer golpe
   de vista en vez de dejar el hero con el claim sobre un fondo vacío. */
.bx-hero__piezas {
	display: none;
}

@media (max-width: 781px) {
	.bx-hero__piezas {
		position: absolute;
		inset: 0;
		/* Por detrás de la nebulosa, que sigue en -1: primero la foto, encima
		   el vórtice de color y encima el texto. */
		z-index: -2;
		display: block;
		pointer-events: none;
	}

	/* Solo la principal: dos fotos más, a este tamaño, serían un collage. */
	.bx-hero__pieza {
		display: none;
	}

	.bx-hero__pieza--1 {
		position: absolute;
		inset: 0;
		display: block;
	}

	.bx .bx-hero__pieza--1 img {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: cover;
		/* Arriba y a la derecha, que es donde queda el producto en las fotos
		   del catálogo; el texto vive abajo a la izquierda. */
		object-position: 72% 28%;
		/* La foto es fondo, no protagonista: se apaga un punto para que el
		   claim dorado no tenga que pelear con ella. */
		filter: saturate(1.12) brightness(.92);
	}

	/* El velo que hace legible el texto: casi opaco donde cae el claim y los
	   botones, y transparente arriba a la derecha, que es por donde asoma el
	   producto. */
	.bx-hero__piezas::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(103deg, rgba(2, 8, 15, .92) 0%, rgba(2, 8, 15, .74) 38%, rgba(2, 8, 15, .2) 74%, rgba(2, 8, 15, .06) 100%),
			linear-gradient(180deg, rgba(2, 8, 15, .48) 0%, rgba(2, 8, 15, .04) 40%, rgba(2, 8, 15, .6) 100%);
	}
}

@media (min-width: 782px) {
	.bx-hero__rejilla {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--bx-e-5);
	}

	.bx-hero__piezas {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: center;
		gap: 0;
	}

	.bx-hero__pieza {
		display: block;
		position: relative;
		overflow: hidden;
		/* Recorte cuadrado: las fotos del catálogo vienen con proporciones
		   distintas y en fila se veían como un mosaico descuadrado. */
		aspect-ratio: 1;
		border: 1px solid var(--bx-panel-borde);
		border-radius: var(--bx-r-m);
		box-shadow: 0 22px 40px rgba(0, 0, 0, .55);
	}

	.bx .bx-hero__pieza img {
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: cover;
		object-position: center;
	}

	/* La primera foto manda: más grande, por delante y solapando a las otras
	   dos, como la composición del mockup. */
	.bx-hero__pieza--1 {
		order: 2;
		z-index: 2;
		transform: scale(1.24);
	}

	.bx-hero__pieza--2 {
		order: 1;
		z-index: 1;
		transform: translateX(9%) scale(.9);
		opacity: .9;
	}

	.bx-hero__pieza--3 {
		order: 3;
		z-index: 1;
		transform: translateX(-9%) scale(.9);
		opacity: .9;
	}

	/* Con una sola foto (la destacada de la página) ocupa el centro y basta. */
	.bx-hero__piezas:has(.bx-hero__pieza--1:only-child) {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.bx-hero__pieza--1:only-child {
		width: min(100%, 380px);
		transform: none;
	}
}

/* ------------------------------------------------- 2. Bloques de la portada */

.bx-home {
	display: flex;
	flex-direction: column;
	gap: var(--bx-e-4);
	padding-bottom: var(--bx-e-6);
}

/* La franja de información de la portada va al doble de alto que la del resto
   de la web (petición de David, 25 de agosto de 2026). Se mide aquí, colgando
   de `.bx-home`, para no tocar la misma franja del listado ni de colecciones.
   Es un mínimo con el contenido centrado: si el texto crece —traducciones
   largas, cuatro sellos en dos filas— el panel crece con él en vez de
   recortarlo. Las medidas son el doble exacto de lo que medía antes: 56 px en
   escritorio y 98 px en móvil, con los mismos cortes que usa el componente. */

.bx-home .bx-bloque--confianza {
	display: grid;
	align-content: center;
	min-height: 196px;
}

@media (min-width: 782px) {
	.bx-home .bx-bloque--confianza {
		min-height: 112px;
	}
}

/* --------------------------------------------------- 3. Filas de productos */

.bx .bx-fila-productos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx .bx-fila-productos::before,
.bx .bx-fila-productos::after {
	content: none;
}

/* En móvil las filas se deslizan con el dedo y asoma la tarjeta siguiente,
   que es lo que invita a arrastrar. Sin JavaScript funciona igual: es scroll
   nativo con anclaje. */
@media (max-width: 781px) {
	.bx .bx-fila-productos--desliza {
		display: flex;
		gap: var(--bx-e-2);
		/* Desliza dentro del panel, respetando su margen interior. Antes se
		   salía por los lados con un margen negativo para que el corte cayera
		   en el filo de la pantalla, y el resultado era que la primera tarjeta
		   quedaba pegada al borde. */
		padding: 2px 0 var(--bx-e-1);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.bx .bx-fila-productos--desliza::-webkit-scrollbar {
		display: none;
	}

	/* Dos tarjetas y el arranque de la tercera: el trozo que asoma es lo que
	   invita a arrastrar. */
	.bx .bx-fila-productos--desliza > .bx-tarjeta {
		flex: 0 0 43%;
		scroll-snap-align: start;
	}
}

@media (min-width: 782px) {
	.bx .bx-fila-productos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--bx-e-3);
	}
}

@media (min-width: 1100px) {
	.bx .bx-fila-productos {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Con pocos productos la fila no se reparte en cinco: las tarjetas mantienen
   un tamaño normal y se quedan a la izquierda, en vez de estirarse hasta lo
   ridículo o dejar tres huecos de aire. */
@media (min-width: 782px) {
	.bx .bx-fila-productos[data-cuantos="1"],
	.bx .bx-fila-productos[data-cuantos="2"],
	.bx .bx-fila-productos[data-cuantos="3"],
	.bx .bx-fila-productos[data-cuantos="4"] {
		grid-template-columns: repeat(auto-fill, minmax(0, 240px));
		justify-content: start;
	}
}

/* Medalla del ranking de ventas: círculo con el puesto, oro, plata y bronce
   para los tres primeros y cristal cian para el resto, como en el mockup. */
.bx-medalla {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(30, 62, 82, .95), rgba(10, 30, 44, .95));
	color: #ffffff;
	font-family: var(--bx-ui);
	font-size: .72rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.bx-medalla--1 {
	border-color: rgba(255, 226, 150, .85);
	background: linear-gradient(180deg, #e7c274, #a9762c);
	color: #1a1206;
}

.bx-medalla--2 {
	border-color: rgba(236, 240, 245, .8);
	background: linear-gradient(180deg, #dfe6ec, #97a3ae);
	color: #14181c;
}

.bx-medalla--3 {
	border-color: rgba(240, 176, 128, .8);
	background: linear-gradient(180deg, #d59155, #8e5424);
	color: #1a1006;
}

/* La medalla ocupa la esquina de arriba a la izquierda y el corazón la de
   arriba a la derecha, así que en esta fila las pills de novedad y oferta se
   van ABAJO a la derecha: apartadas a la derecha y arriba se metían debajo del
   corazón y se leían a medias. */
.bx-fila-productos--podio .bx-badges {
	top: auto;
	bottom: 10px;
	left: auto;
	right: 10px;
	align-items: flex-end;
}

/* En móvil esa esquina de abajo es justo donde vive el precio, y en una tarjeta
   de 129 px no caben los dos en la misma línea. El badge se coloca bajo la
   medalla, que es el único hueco libre de la foto. Va después de la regla de
   arriba a propósito: con la misma especificidad, manda la última. */
@media (max-width: 781px) {
	.bx-fila-productos--podio .bx-badges {
		top: 46px;
		right: auto;
		bottom: auto;
		left: 10px;
		align-items: flex-start;
	}
}

/* ----------------------------------------------------- 4. Categorías */

/* En móvil, carril horizontal: 3 tarjetas enteras y un trozo de la 4ª que
   asoma, la misma pista de que se puede deslizar que ya usan "Categorías
   destacadas" del menú móvil (`menu-movil.css`) y las reseñas de más abajo.
   Con 3 categorías o menos no hay nada que asomar y se reparten a partes
   iguales. */
.bx-categorias {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(26%, 1fr);
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.bx-categorias:has(> li:nth-child(1):nth-last-child(-n+3)) {
	grid-auto-columns: minmax(0, 1fr);
}

.bx-categorias::-webkit-scrollbar {
	display: none;
}

.bx-categorias__item {
	scroll-snap-align: start;
}

@media (min-width: 782px) {
	/* 4 categorías, una sola fila sin deslizar (doc 11 fase 6.5): con
	   auto-fit el ancho sobrante repartía la fila en tarjetas de más de
	   140 px y aun así quedaba hueco alrededor de la miniatura pequeña de
	   abajo. */
	.bx-categorias {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-columns: unset;
		gap: var(--bx-e-3);
		overflow-x: visible;
		scroll-snap-type: none;
	}
}

.bx .bx-categoria {
	display: grid;
	grid-template-rows: auto auto auto;
	justify-items: center;
	gap: 6px;
	height: 100%;
	padding: 0 0 var(--bx-e-2);
	overflow: hidden;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 55%, rgba(255, 255, 255, .05) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
	color: var(--bx-texto);
	text-align: center;
}

.bx .bx-categoria:hover,
.bx .bx-categoria:focus-visible {
	border-color: rgba(56, 214, 245, .55);
	background: linear-gradient(180deg, rgba(56, 214, 245, .16) 0%, rgba(56, 214, 245, .05) 60%, rgba(56, 214, 245, .11) 100%);
	color: var(--bx-texto);
}

/* Antes 56×56 fijos, un icono pequeño rodeado de hueco (doc 11 fase 6.5):
   ahora la foto ocupa todo el ancho de la tarjeta, con un alto real, y el
   icono lineal de repuesto (cuando no hay foto) se centra en la misma caja. */
.bx-categoria__marco {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
	color: var(--bx-gold-claro);
}

.bx .bx-categoria__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0;
}

.bx-categoria__nombre {
	font-family: var(--bx-ui);
	font-size: .78rem;
	font-weight: 500;
	line-height: 1.2;
	/* Nombres largos parten por espacios, nunca a mitad de palabra. */
	overflow-wrap: break-word;
	hyphens: manual;
}

.bx-categoria__cuenta {
	color: var(--bx-texto-3);
	font-size: .68rem;
	line-height: 1.2;
}

/* ----------------------------------------------------- 5. Newsletter */

.bx-newsletter {
	display: grid;
	gap: var(--bx-e-3);
}

@media (min-width: 900px) {
	.bx-newsletter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: center;
		gap: var(--bx-e-5);
	}
}

.bx-newsletter__reclamo {
	margin: 0;
	color: var(--bx-texto-2);
	font-size: .92rem;
	line-height: 1.45;
}

.bx-newsletter__form {
	margin: 0;
}

.bx-newsletter__campo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bx-e-1);
	margin: 0 0 var(--bx-e-2);
}

.bx .bx-newsletter__campo input[type="email"] {
	flex: 1 1 14rem;
	min-width: 0;
	margin: 0;
}

.bx .bx-newsletter__campo .bx-btn {
	flex: 0 0 auto;
}

.bx-newsletter__consentimiento {
	margin: 0;
	color: var(--bx-texto-3);
	font-size: .74rem;
	line-height: 1.45;
}

.bx-newsletter__consentimiento label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.bx .bx-newsletter__consentimiento input {
	flex: 0 0 auto;
	/* Área táctil suficiente sin agrandar la casilla dibujada. */
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	padding: 10px;
}

.bx .bx-newsletter__consentimiento a {
	color: var(--bx-accent);
	text-decoration: underline;
}

.bx-newsletter__aviso {
	margin: var(--bx-e-2) 0 0;
	font-size: .82rem;
	font-weight: 500;
}

.bx-newsletter__aviso--exito {
	color: var(--bx-exito);
}

.bx-newsletter__aviso--error {
	color: var(--bx-error);
}

/* Trampa para robots: fuera de la vista sin usar display:none, que algunos
   rellenadores automáticos detectan. */
.bx-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------- 6. Reseñas de Wallapop */

/* El resumen agregado reutiliza las clases del bloque de reseñas de la
   ficha (componentes.css): misma nota grande, mismas estrellas, mismo
   "total". Aquí solo se decide que vaya dentro de un enlace, centrado. */
.bx-wallapop-home__resumen {
	display: inline-flex;
	color: inherit;
	text-decoration: none;
}

.bx-wallapop-home__resumen .bx-resenas__resumen {
	grid-template-columns: none;
	justify-items: center;
	margin-bottom: 0;
}

.bx-wallapop-home__resumen:hover .bx-resenas__media {
	color: var(--bx-accent);
}

/* Botón "Ver valoraciones Wallapop" (doc 11 fase 6.2), centrado bajo el
   resumen agregado. */
.bx-wallapop-home__boton {
	margin: var(--bx-e-2) auto 0;
}

.bx-wallapop-home__boton-icono {
	flex: 0 0 auto;
	border-radius: 4px;
}

/* El carrusel: flechas a los lados, las dos citas en medio. Las flechas son
   una mejora de JavaScript —deslizar a las siguientes— así que sin JS no se
   dibujan: sin nada que las mueva, un botón muerto es peor que no tenerlo. */
.bx-wallapop-home__carrusel {
	display: flex;
	align-items: center;
	gap: var(--bx-e-2);
	margin-top: var(--bx-e-4);
}

.bx-sin-js .bx-wallapop-home__flecha {
	display: none;
}

.bx-wallapop-home__flecha {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(211, 168, 95, .35);
	border-radius: 999px;
	background: rgba(211, 168, 95, .06);
	/* Doradas y sutiles, del mismo color que los títulos de panel (doc 11
	   fase 6.3): antes casi no se veían sobre el fondo del panel. */
	color: var(--bx-gold);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.bx-wallapop-home__flecha:hover {
	border-color: var(--bx-gold);
	background: rgba(211, 168, 95, .14);
	color: var(--bx-gold-claro);
}

.bx-wallapop-home__flecha--anterior svg {
	transform: rotate(180deg);
}

.bx-wallapop-home__citas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bx-e-3);
	min-width: 0;
	flex: 1 1 auto;
	/* El dedo desliza aquí mismo, sobre las citas, en vez de necesitar acertar
	   en una flecha pequeña. */
	touch-action: pan-y;
}

@media (max-width: 700px) {
	/* Una reseña entera y un trozo de la siguiente (doc 11 fase 6.4): mismo
	   lenguaje que el carril de categorías destacadas del menú móvil, para
	   que la intuición de deslizar sea la misma en toda la web. */
	.bx-wallapop-home__citas {
		display: flex;
		grid-template-columns: none;
		gap: var(--bx-e-3);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.bx-wallapop-home__citas::-webkit-scrollbar {
		display: none;
	}

	.bx-wallapop-home__citas .bx-wallapop-cita {
		flex: 0 0 88%;
		scroll-snap-align: start;
	}
}

/* Entrada de una cita nueva: el mismo lenguaje que el título de Mi cuenta al
   cambiar de apartado (`bx-cuenta__entra`), con desplazamiento lateral en
   vez de vertical porque aquí lo que ocurre es, literalmente, un deslizar. */
@keyframes bx-wallapop-cita-entra {
	from {
		opacity: 0;
		transform: translateX(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.bx-wallapop-home__citas--entra .bx-wallapop-cita {
	animation: bx-wallapop-cita-entra .3s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.bx-wallapop-home__citas--entra .bx-wallapop-cita {
		animation: none;
	}
}

/* Misma caja que el formulario de reseña de la ficha (mismo fondo, mismo
   borde, mismo radio): es la pieza de "contenido citado" de la casa.
   Estructura de doc 11 fase 6.1: miniatura del producto a la izquierda,
   nombre y estrellas/nota en la primera línea de la derecha, el producto
   debajo y el texto por último; el origen Wallapop cierra la tarjeta. */
.bx-wallapop-cita {
	display: flex;
	gap: var(--bx-e-2);
	margin: 0;
	padding: var(--bx-e-3);
	border: 1px solid var(--bx-panel-linea);
	border-radius: var(--bx-r-m);
	background: var(--bx-panel-fondo-2);
}

.bx-wallapop-cita__miniatura {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--bx-r-s);
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
	color: var(--bx-gold-claro);
}

.bx-wallapop-cita__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bx-wallapop-cita__cuerpo {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.bx-wallapop-cita__linea1 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bx-e-2);
}

.bx-wallapop-cita__autor {
	color: var(--bx-texto);
	font-size: .85rem;
	font-weight: 700;
}

.bx-wallapop-cita__valoracion {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.bx-wallapop-cita__sobre {
	color: var(--bx-texto-3);
	font-size: .72rem;
}

.bx-wallapop-cita__producto {
	margin-top: 2px;
	color: var(--bx-texto-3);
	font-size: .78rem;
	font-weight: 400;
}

.bx-wallapop-cita__texto {
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	color: var(--bx-texto);
	font-size: .85rem;
	font-style: normal;
	line-height: 1.5;
}

/* Alineado a la derecha y en pequeño (doc 11 fase 6.1), solo si la reseña
   viene de verdad del CSV migrado. */
.bx-wallapop-cita__origen {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	margin: 8px 0 0;
	color: var(--bx-texto-3);
	font-size: .68rem;
}

.bx-wallapop-cita__origen-icono {
	flex: 0 0 auto;
	border-radius: 3px;
}

@media (max-width: 700px) {
	/* En móvil ya se desliza con el dedo sobre las propias citas, así que las
	   flechas sobran aquí aunque haya JS: es la misma lógica que ya las quita
	   del todo sin JS (.bx-sin-js), solo que por espacio. */
	.bx-wallapop-home__carrusel {
		gap: 0;
	}

	.bx-wallapop-home__flecha {
		display: none;
	}

	/* La miniatura del producto no cabe con holgura en una tarjeta al 88% del
	   ancho: se quita y el texto gana el espacio que antes se repartía. */
	.bx-wallapop-cita__miniatura {
		display: none;
	}

	.bx-wallapop-cita__autor {
		font-size: .78rem;
	}

	.bx-wallapop-cita__sobre {
		font-size: .68rem;
	}

	.bx-wallapop-cita__producto {
		font-size: .72rem;
	}

	.bx-wallapop-cita__texto {
		font-size: .8rem;
	}

	.bx-wallapop-cita__origen {
		font-size: .64rem;
	}
}