/**
 * Componentes transversales (doc 01, apartado 3).
 * Botones, badges, estrellas, formularios, migas, tarjetas y acordeones.
 */

/* ------------------------------------------------------------- 1. Botones */

.bx .bx-btn,
.bx .bx-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--bx-r-s);
	font-family: var(--bx-ui);
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
}

.bx .bx-btn--primario {
	background: var(--bx-cta-fondo);
	border-color: var(--bx-cta-borde);
	border-radius: 10px;
	color: var(--bx-cta-texto);
	text-transform: uppercase;
	letter-spacing: .08em;
	box-shadow: var(--bx-cta-glow), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.bx .bx-btn--primario:hover {
	color: var(--bx-cta-texto);
	filter: brightness(1.12);
	transform: translateY(-1px);
	box-shadow: 0 0 30px rgba(74, 208, 231, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.bx .bx-btn--comprar {
	background: var(--bx-cta2-fondo);
	border-color: var(--bx-cta2-borde);
	border-radius: 10px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .08em;
	box-shadow: var(--bx-cta2-glow), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.bx .bx-btn--comprar:hover {
	color: #fff;
	filter: brightness(1.12);
	transform: translateY(-1px);
	box-shadow: 0 0 30px rgba(166, 70, 199, .5), inset 0 1px 0 rgba(255, 255, 255, .24);
}

.bx .bx-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, .18);
	color: var(--bx-texto);
}

.bx .bx-btn--ghost:hover {
	border-color: var(--bx-accent);
	color: var(--bx-texto);
}

.bx .bx-btn[disabled],
.bx .bx-btn.disabled,
.bx .bx-btn.is-agotado {
	filter: grayscale(.5);
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Ningún botón lleva subrayado, en ningún estado (petición de David,
   21/08/2026). El tema ya quita el subrayado a los enlaces, pero Storefront y
   WooCommerce lo devuelven en sus contextos —avisos, mensajes, prosa— y ahí un
   botón acababa subrayado, que se lee como un enlace de texto y no como una
   pieza que se pulsa. Va aquí, con los botones, para que valga en toda la
   tienda y no haya que repetirlo en cada pantalla. */
.bx :is(a, button, input):is([class*="btn"], [class*="boton"], .button, .bx-pedido__ver, .bx-pedido__seguir),
.bx :is(a, button, input):is([class*="btn"], [class*="boton"], .button, .bx-pedido__ver, .bx-pedido__seguir):is(:hover, :focus, :active, :visited),
.bx :is(a, button, input):is([class*="btn"], [class*="boton"], .button, .bx-pedido__ver, .bx-pedido__seguir) * {
	text-decoration: none;
}

.bx-btn__precio:not(:empty) {
	padding-left: 14px;
	font-weight: 800;
}

.bx .bx-enlace-mas {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--bx-r-pill);
	color: #a5a9ae;
	font-size: .78rem;
	font-weight: 500;
	white-space: nowrap;
}

.bx .bx-enlace-mas:hover {
	border-color: rgba(79, 214, 242, .5);
	color: var(--bx-texto);
}

.bx-enlace-mas svg {
	width: 13px;
	height: 13px;
}

/* Botones nativos de WooCommerce dentro del tema: mismo CTA del mockup. */
.bx .button,
.bx button.button,
.bx input.button,
.bx a.button,
.bx .woocommerce-button {
	background: var(--bx-cta-fondo);
	color: var(--bx-cta-texto);
	border: 1px solid var(--bx-cta-borde);
	border-radius: 10px;
	font-family: var(--bx-ui);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 12px 20px;
	min-height: 44px;
	text-shadow: none;
	box-shadow: var(--bx-cta-glow), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.bx .button:hover,
.bx button.button:hover,
.bx input.button:hover,
.bx a.button:hover {
	background: var(--bx-cta-fondo);
	color: var(--bx-cta-texto);
	filter: brightness(1.12);
}

/* --------------------------------------------------------------- 2. Badges */

.bx-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.bx-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--bx-r-pill);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
}

/* En la tarjeta de móvil el badge se achica: comparte foto con la etiqueta de
   precio y, a tamaño de escritorio, los dos juntos se comen la imagen y se
   estorban. Fuera de la tarjeta —la ficha, la galería— sigue igual. */
@media (max-width: 781px) {
	.bx-tarjeta .bx-badge {
		padding: 2px 7px;
		font-size: .5rem;
		letter-spacing: .04em;
	}

	.bx-tarjeta .bx-badges {
		top: 10px;
		left: 10px;
		gap: 4px;
	}
}

/* En la ficha, sobre la galería y junto al título, el badge respira más. */
.bx-galeria > .bx-badges .bx-badge,
.bx-compra__badges .bx-badge {
	padding: 4px 12px;
	font-size: .7rem;
}

.bx-badge--nuevo {
	background: linear-gradient(100deg, #2050d8, #7a3fae);
	color: #fff;
}

.bx-badge--top {
	background: var(--bx-gold);
	color: #1a1206;
}

.bx-badge--oferta {
	background: var(--bx-error);
	color: #fff;
}

/* --------------------------------------------------- 2b. Banner Wallapop */

/* Franja clicable, envoltorio único hasta el perfil real: es la prueba de
   que la valoración es auténtica y no un número inventado. */
.bx-wallapop-banner {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 8px 16px;
	border: 1px solid var(--bx-borde-fuerte);
	border-radius: var(--bx-r-pill);
	background: rgba(255, 255, 255, .04);
	color: var(--bx-texto);
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.bx-wallapop-banner:hover {
	border-color: var(--bx-accent);
	background: rgba(56, 214, 245, .08);
	color: var(--bx-texto);
}

.bx-wallapop-banner__marca {
	font-size: .78rem;
	font-weight: 700;
	color: var(--bx-texto-2);
	white-space: nowrap;
}

/* ----------------------------------------------------- 3. Franja confianza */

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

@media (min-width: 782px) {
	.bx-confianza {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bx-confianza__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--bx-texto-2);
	font-size: .85rem;
	line-height: 1.35;
}

.bx-confianza__item svg {
	flex: 0 0 auto;
	color: var(--bx-accent);
}

/* Título y detalle van uno debajo del otro; en línea se leían pegados
   ("Envío rápidoPreparado en 24-72 h"). */
.bx-confianza__texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bx-confianza__titulo {
	font-weight: 600;
	color: var(--bx-texto);
}

.bx-confianza__detalle {
	color: var(--bx-texto-3);
	font-size: .78em;
	line-height: 1.3;
}

.bx-confianza--compacta .bx-confianza__item {
	font-size: .78rem;
}

/* --------------------------------------- 3b. Cuotas con Apple Pay */

/* Va pegado debajo del mensaje de Klarna que pinta el plugin (doc 11 fase 8),
   y se lee como una nota suya: mismo cuerpo pequeño y mismo gris que el resto
   de la letra menuda de la compra. Lo coloca `financiacion.js`, y solo en un
   dispositivo Apple. */
.bx-apple-cuotas {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	color: var(--bx-texto-3);
	font-size: .82rem;
	line-height: 1.4;
}

/* La manzana es una silueta, no un trazo: a 15 px un contorno hueco no se
   reconoce y el mordisco desaparece. */
.bx-apple-cuotas__manzana {
	flex: 0 0 auto;
	fill: currentColor;
	stroke: none;
	color: var(--bx-texto-2);
}

/* -------------------------------------------------------------- 4. Rating */

.bx-estrellas {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
}

.bx-estrellas__u {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.bx-estrellas__vacia {
	color: rgba(255, 255, 255, .22);
	display: inline-block;
}

.bx-estrellas__llena {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--bx-gold);
	display: inline-block;
}

.bx-estrellas__llena svg {
	fill: currentColor;
}

.bx-estrellas__enlace {
	margin-left: 8px;
	color: var(--bx-texto-3);
	font-size: .85rem;
	/* En una tarjeta estrecha, "(1 reseña)" se partía en "(1" y "reseña)". */
	white-space: nowrap;
}

/* En la tarjeta el contador va al lado de las estrellas, no debajo, y sin la
   palabra: solo el número entre paréntesis. */
.bx-estrellas__enlace--corto {
	margin-left: 6px;
}

.bx-tarjeta__valoracion {
	display: flex;
	align-items: center;
	/* Centrada, como el nombre y el precio de la tarjeta: alineada a la
	   izquierda era la única línea descolgada del eje. */
	justify-content: center;
	flex-wrap: nowrap;
	min-width: 0;
}


/* Resumen de una valoración agregada (nota grande + estrellas + total): lo
   usa el bloque de reseñas de la ficha y, con las mismas clases, cualquier
   otro sitio de la web que necesite el mismo lenguaje —la portada, por
   ejemplo—. Vive aquí, no en producto.css, para que sea imposible que se
   desincronicen. */
.bx-resenas__resumen {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--bx-e-3);
	margin-bottom: var(--bx-e-4);
}

.bx-resenas__nota {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.bx-resenas__media {
	color: var(--bx-texto);
	font-family: var(--bx-display);
	font-size: 2.8rem;
	font-weight: 600;
	line-height: 1;
}

.bx-resenas__total {
	color: var(--bx-texto-3);
	font-size: .74rem;
}

/* Estrellas nativas de WooCommerce (reseñas): mismo lenguaje visual.
   Llevan !important porque Storefront las pinta con su color de acento. */
.bx .star-rating,
.bx .star-rating span,
.bx .star-rating span::before {
	color: var(--bx-gold) !important;
	font-size: 1em;
}

.bx .star-rating::before {
	color: rgba(255, 255, 255, .22) !important;
}

/* Selector de estrellas del formulario de reseña. */
.bx p.stars a,
.bx p.stars a::before {
	color: var(--bx-gold) !important;
}

.bx p.stars {
	font-size: 1.35em;
	margin: 0;
}

/* ---------------------------------------------------------- 5. Formularios */

.bx input[type="text"],
.bx input[type="email"],
.bx input[type="search"],
.bx input[type="tel"],
.bx input[type="url"],
.bx input[type="number"],
.bx input[type="password"],
.bx textarea,
.bx select {
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--bx-borde-fuerte);
	border-radius: var(--bx-r-s);
	color: var(--bx-texto);
	font-family: var(--bx-ui);
	font-size: .95rem;
	padding: 11px 14px;
	min-height: 44px;
	width: 100%;
	max-width: 100%;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.bx textarea {
	line-height: 1.6;
}

.bx input:focus,
.bx textarea:focus,
.bx select:focus {
	outline: none;
	border-color: var(--bx-accent);
	box-shadow: 0 0 0 3px rgba(56, 214, 245, .15);
}

.bx select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .7) 50%), linear-gradient(135deg, rgba(255, 255, 255, .7) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.bx select option {
	background: var(--bx-bg-1);
	color: var(--bx-texto);
}

.bx label {
	color: var(--bx-texto-2);
	font-size: .88rem;
	font-weight: 600;
}

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

/* ----------------------------------------------------------- 6. Breadcrumb */

.bx-migas {
	padding: var(--bx-e-3) 0 var(--bx-e-2);
}

.bx .woocommerce-breadcrumb {
	margin: 0;
	color: var(--bx-texto-3);
	font-size: .82rem;
}

.bx .woocommerce-breadcrumb a {
	color: var(--bx-texto-3);
}

.bx .woocommerce-breadcrumb a:hover {
	color: var(--bx-accent);
}

.bx-migas__sep {
	display: inline-block;
	margin: 0 8px;
	color: rgba(255, 255, 255, .25);
}

/* ------------------------------------------------------- 7. Tarjeta producto */

.bx-seccion-productos {
	margin-top: var(--bx-e-6);
}

.bx-seccion-productos__cabecera {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bx-e-3);
	margin-bottom: var(--bx-e-4);
}

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

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

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

/* Storefront maqueta sus rejillas con floats y un margen inferior de casi
   60 px por tarjeta. Dentro de nuestras rejillas manda el grid, así que hay que
   retirarle esas tres propiedades; si no, cada fila arrastra un hueco muerto
   debajo. Va con la especificidad justa para ganarle sin recurrir a !important. */
.bx ul.bx-fila-productos > li.product,
.bx ul.bx-grid-productos > li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

.bx .bx-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	background: rgba(1, 7, 15, .58);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--bx-r-m);
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.bx .bx-tarjeta:hover {
	transform: translateY(-4px);
	border-color: rgba(56, 214, 245, .45);
	box-shadow: var(--bx-glow);
}

.bx-tarjeta__media {
	position: relative;
	aspect-ratio: 7 / 8;
	overflow: hidden;
	background: rgba(255, 255, 255, .03);
}

.bx-tarjeta__enlace {
	display: block;
	height: 100%;
}

.bx .bx-tarjeta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transition: transform .25s ease;
}

.bx .bx-tarjeta:hover .bx-tarjeta__media img {
	transform: scale(1.03);
}

.bx-tarjeta__accion {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
}

.bx .bx-tarjeta a.bx-tarjeta__btn,
.bx .bx-tarjeta__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--bx-cta-borde);
	border-radius: 50%;
	background: var(--bx-cta-fondo);
	color: var(--bx-cta-texto);
	box-shadow: 0 0 16px rgba(74, 208, 231, .3);
}

.bx .bx-tarjeta__btn.loading,
.bx .bx-tarjeta__btn.added {
	opacity: .8;
}

.bx .bx-tarjeta__btn::after {
	display: none !important;
}

.bx-tarjeta__cuerpo {
	/* Crece hasta llenar la tarjeta para que el precio, que va pegado abajo,
	   tenga espacio que repartir y quede a la altura de sus vecinos. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px 14px;
}

.bx .bx-tarjeta__nombre {
	font-family: var(--bx-ui);
	font-size: .82rem;
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
	/* Dos líneas y a partir de ahí puntos suspensivos, como el doc 04 y el
	   mockup: con una sola línea los nombres reales del catálogo se cortaban
	   casi todos. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

.bx .bx-tarjeta__nombre a {
	color: #a5a9ae;
}

.bx .bx-tarjeta__nombre a:hover {
	color: var(--bx-accent);
}

.bx-tarjeta__precio {
	/* Pegado al fondo de la tarjeta: así los precios de una fila quedan a la
	   misma altura aunque unos productos tengan estrellas y otros no. */
	margin-top: auto;
	padding-top: 4px;
	color: #4fd6f2;
	font-family: var(--bx-ui);
	font-size: .95rem;
	font-weight: 700;
}

.bx-tarjeta__precio del {
	margin-right: 8px;
	color: var(--bx-texto-3);
	font-family: var(--bx-ui);
	font-size: .85rem;
	font-weight: 400;
}

.bx-tarjeta__precio ins {
	background: none;
	color: #4fd6f2;
	text-decoration: none;
}

/* Botón de compra: ancho completo bajo el cuerpo de la tarjeta. Antes era un
   círculo flotando sobre la foto, que tapaba el producto y obligaba a
   interpretar un icono. */
.bx-tarjeta__accion {
	position: static;
	margin-top: 10px;
}

.bx .bx-tarjeta a.bx-tarjeta__btn,
.bx .bx-tarjeta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	height: auto;
	min-height: 40px;
	padding: 9px 12px;
	border: 1px solid var(--bx-cta-borde);
	border-radius: var(--bx-r-s);
	background: var(--bx-cta-fondo);
	color: var(--bx-cta-texto);
	font-family: var(--bx-ui);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	box-shadow: var(--bx-cta-glow), inset 0 1px 0 rgba(255, 255, 255, .14);
	transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.bx .bx-tarjeta a.bx-tarjeta__btn:hover,
.bx .bx-tarjeta__btn:hover {
	color: var(--bx-cta-texto);
	filter: brightness(1.12);
	transform: translateY(-1px);
}

/* El texto se parte antes que recortarse: "Añadir al carrito" a medias no
   dice nada. */
.bx-tarjeta__btn-texto {
	min-width: 0;
}

.bx .bx-tarjeta__btn svg {
	flex: 0 0 auto;
}

/* Etiqueta de precio sobre la foto. Nace apagada y la enciende el móvil, ahí
   abajo: en pantalla ancha el precio sigue viviendo en el cuerpo de la
   tarjeta, que es donde hay sitio de sobra. */
.bx-tarjeta__precio-foto {
	display: none;
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	max-width: calc(100% - 20px);
	padding: 4px 10px;
	border: 1px solid rgba(79, 214, 242, .38);
	border-radius: var(--bx-r-pill);
	background: rgba(1, 10, 20, .74);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
	color: #4fd6f2;
	font-family: var(--bx-ui);
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Rebajas: el precio viejo, tachado y apagado, delante del nuevo. */
.bx-tarjeta__precio-foto del {
	margin-right: 6px;
	color: var(--bx-texto-3);
	font-size: .72rem;
	font-weight: 400;
}

.bx-tarjeta__precio-foto ins {
	background: none;
	color: #4fd6f2;
	text-decoration: none;
}

/* En móvil la tarjeta se cuadra: el precio se va a la etiqueta de sobre la
   foto y el botón se queda con su icono. Así deja de estirarse hacia abajo y
   en una pantalla estrecha caben dos sin que parezcan columnas. Vale para toda
   la web —portada, listados, buscador, relacionados—: el mismo producto se
   enseña igual en todas partes. */
@media (max-width: 781px) {
	.bx-tarjeta__precio-foto {
		display: block;
	}

	.bx-tarjeta__precio {
		display: none;
	}

	/* El botón se pega al fondo: si un producto tiene reseñas y su vecino no,
	   los botones quedarían a distinta altura y la fila se descuadra. */
	.bx-tarjeta__accion {
		margin-top: auto;
	}

	.bx .bx-tarjeta a.bx-tarjeta__btn,
	.bx .bx-tarjeta__btn {
		position: relative;
	}

	/* El texto no se borra, se esconde: el lector de pantalla sigue diciendo
	   "Añadir al carrito", que es lo único que explica el dibujo. */
	.bx-tarjeta__btn-texto {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bx .bx-tarjeta__btn svg {
		display: block;
	}

	/* La vista de lista del listado se queda como estaba: ahí la foto es una
	   miniatura al lado del texto, no hay altura que ahorrar y una etiqueta
	   sobre una foto de 96 px no se leería. */
	.bx-listado--lista .bx-tarjeta__precio-foto {
		display: none;
	}

	.bx-listado--lista .bx-tarjeta__precio {
		display: block;
	}

	.bx-listado--lista .bx-tarjeta__btn-texto {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
	}
}

/* Se oculta el "añadido al carrito" nativo: el aviso lo da el propio botón. */
.bx .bx-tarjeta .added_to_cart {
	display: none;
}

/* -------------------------------------------------------- 8. Acordeones */

.bx-acordeon {
	position: relative;
}

.bx-acordeon__cabecera {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-2);
	min-height: 48px;
	padding: var(--bx-e-2) var(--bx-e-4);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background-color .18s ease;
}

.bx-acordeon:not([open]) > .bx-acordeon__cabecera:hover {
	background-color: rgba(255, 255, 255, .035);
}

/* Sección abierta: velo azulado sobre la cabecera que se desvanece hacia el
   cuerpo, medido del mockup. El cuerpo queda con el fondo del panel. */
.bx-acordeon[open] > .bx-acordeon__cabecera {
	background-image: linear-gradient(
		180deg,
		rgba(70, 128, 150, .13) 0%,
		rgba(70, 128, 150, .10) 55%,
		rgba(70, 128, 150, .06) 100%
	);
}

/* Borde inferior iluminado de la sección abierta: en el mockup es una línea
   cian que arranca con un destello bajo el título (acento al 20 %) y se apaga
   hacia la derecha (al 6 %), con un resplandor difuso alrededor del destello. */
.bx-acordeon[open] > .bx-acordeon__cabecera::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 9px;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			rgba(56, 214, 245, .10) 0%,
			rgba(56, 214, 245, .5) 8%,
			rgba(56, 214, 245, .32) 26%,
			rgba(56, 214, 245, .13) 55%,
			rgba(56, 214, 245, .09) 100%
		),
		radial-gradient(ellipse 26% 150% at 14% 100%, rgba(56, 214, 245, .3) 0%, rgba(56, 214, 245, 0) 70%);
	background-size: 100% 1px, 100% 100%;
	background-position: 0 100%, 0 0;
	background-repeat: no-repeat;
}

.bx-acordeon__cabecera::-webkit-details-marker {
	display: none;
}

.bx-acordeon__titulo {
	color: var(--bx-texto-2);
	font-family: var(--bx-ui);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.bx-acordeon > .bx-acordeon__cabecera .bx-acordeon__titulo {
	color: rgba(255, 255, 255, .82);
	transition: color .18s ease;
}

.bx-acordeon:not([open]) > .bx-acordeon__cabecera:hover .bx-acordeon__titulo {
	color: #ffffff;
}

/* El título de la sección abierta destaca: blanco pleno y el resplandor cian
   que lo envuelve en el mockup, medido hasta unos 10 px alrededor del texto. */
.bx-acordeon[open] > .bx-acordeon__cabecera .bx-acordeon__titulo {
	color: #ffffff;
	text-shadow:
		0 0 12px rgba(56, 214, 245, .38),
		0 0 26px rgba(56, 214, 245, .26),
		0 0 46px rgba(56, 214, 245, .16);
}

.bx-acordeon__signo {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	transition: transform .2s ease;
}

.bx-acordeon__signo::before,
.bx-acordeon__signo::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 9px;
	height: 1.6px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .55);
}

.bx-acordeon__signo::before {
	left: 0;
	transform: rotate(45deg);
}

.bx-acordeon__signo::after {
	right: 0;
	transform: rotate(-45deg);
}

.bx-acordeon[open] > .bx-acordeon__cabecera .bx-acordeon__signo {
	transform: rotate(180deg);
}

.bx-acordeon[open] > .bx-acordeon__cabecera .bx-acordeon__signo::before,
.bx-acordeon[open] > .bx-acordeon__cabecera .bx-acordeon__signo::after {
	background: #ffffff;
}

.bx-acordeon__cuerpo {
	padding: 0 var(--bx-e-4) var(--bx-e-4);
	font-size: .875rem;
	line-height: 1.55;
}

.bx-acordeon__cuerpo .bx-prosa {
	font-size: inherit;
	line-height: inherit;
}

/* ------------------------------------------------------------- 9. Prosa */

/* El contenido de la ficha lo escribe el admin y puede traer estilos en línea
   pensados para fondo claro: aquí se neutralizan para que siempre se lea. */
.bx-prosa {
	color: var(--bx-texto-2);
	font-size: .95rem;
}

.bx-prosa > *:last-child {
	margin-bottom: 0;
}

.bx-prosa [style*="color"],
.bx-prosa [style*="background"] {
	color: inherit !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: var(--bx-borde) !important;
	box-shadow: none !important;
}

.bx-prosa h1,
.bx-prosa h2,
.bx-prosa h3,
.bx-prosa h4 {
	color: var(--bx-gold) !important;
	font-family: var(--bx-display);
	font-size: 1.05rem;
	letter-spacing: .02em;
	margin: var(--bx-e-4) 0 var(--bx-e-2);
	padding-bottom: 0 !important;
	border: 0 !important;
}

.bx-prosa h1:first-child,
.bx-prosa h2:first-child,
.bx-prosa h3:first-child {
	margin-top: 0;
}

.bx-prosa strong {
	color: var(--bx-texto);
}

.bx-prosa ul,
.bx-prosa ol {
	margin: 0 0 var(--bx-e-3);
	padding-left: 1.1rem;
}

.bx-prosa ul {
	list-style: none;
	padding-left: 0;
}

.bx-prosa ul li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
	border: 0 !important;
}

.bx-prosa ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bx-gold);
}

.bx-prosa a {
	color: var(--bx-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bx-prosa img {
	border-radius: var(--bx-r-s);
}

.bx-prosa table {
	width: 100%;
	border-collapse: collapse;
}

/* Tabla de especificaciones. */
.bx-especificaciones {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

.bx-especificaciones th,
.bx-especificaciones td {
	padding: 9px 0;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.bx-especificaciones th {
	width: 38%;
	padding-right: var(--bx-e-3);
	color: var(--bx-accent);
	font-weight: 500;
}

.bx-especificaciones td {
	color: var(--bx-texto);
}



/* ------------------------------------------- 10. Avisos y utilidades WC */

.bx .woocommerce-message,
.bx .woocommerce-info,
.bx .woocommerce-error {
	background: var(--bx-surface-2);
	border: 1px solid var(--bx-borde);
	border-top: 3px solid var(--bx-accent);
	border-radius: var(--bx-r-m);
	color: var(--bx-texto-2);
	list-style: none;
	padding: var(--bx-e-3) var(--bx-e-3);
	margin: 0 0 var(--bx-e-3);
}

.bx .woocommerce-error {
	border-top-color: var(--bx-error);
}

.bx .woocommerce-message::before,
.bx .woocommerce-info::before,
.bx .woocommerce-error::before {
	display: none;
}

.bx .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}


/* ----------------------------------------------------- 10b. Avatares */

/* Cuando el avatar es la foto de una deckbox, se muestra su parte central,
   llenando el hueco sin deformar la imagen. */
.bx img.bx-avatar-deckbox {
	object-fit: cover;
	object-position: center;
	background-color: var(--bx-bg-2);
}

/* ------------------------------------------ 11. Fulgor arcano y avisos */

.bx-fulgor {
	position: fixed;
	inset: 0;
	z-index: 90;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Las chispas de las casillas y los corazones se pintan por encima de todo,
   sin estorbar. Va aquí, y no en el CSS del listado, porque los corazones
   están en cualquier página con productos: en la portada estaban saliendo
   como un bloque suelto al final del documento en vez de sobre el corazón. */
.bx-chispas {
	position: fixed;
	z-index: 120;
	pointer-events: none;
}

/* El rastro del ratón va por debajo de los estallidos y los portales: es un
   adorno de fondo y no debe pintarse sobre la magia que sí acompaña a una
   acción. */
.bx-chispas--rastro {
	z-index: 118;
}

/* El icono del carrito acusa la llegada del humo. */
/* El carrito, mientras le llega el enjambre: se hincha de golpe como en los
   dibujos animados y se queda grande hasta que entra la última mota; entonces
   vuelve a su tamaño con un rebote (David, 24 de agosto de 2026).
   Las clases se nombran sueltas, sin atarlas a `.bx-accion`, porque el destino
   del vuelo es el icono de la cabecera en escritorio y el del dock en móvil, y
   son dos piezas distintas. */
/* El hinchado va con transición, no con animación: el pellizco de cada mota es
   otra animación sobre el mismo icono y, al quitarla, la de aquí se reiniciaba
   desde el principio y el carrito daba un salto a su tamaño normal a mitad de
   la lluvia. Con transición no hay nada que reiniciar. */
.bx .bx-carrito-tragando {
	transform: scale(1.28);
	transform-origin: 50% 60%;
	transition: transform .34s cubic-bezier(.34, 1.8, .5, 1);
}

.bx .bx-carrito-tragando svg {
	color: var(--bx-accent);
	filter: drop-shadow(0 0 10px rgba(56, 214, 245, .55));
}

/* Y un pellizco por cada mota que cae dentro, para que la cesta se note viva
   mientras dura la lluvia. Va sobre el dibujo, no sobre el icono entero, para
   no pisar el hinchado de arriba. */
.bx .bx-carrito-mordisco svg {
	animation: bx-mordisco .18s ease-out;
}

.bx .bx-carrito-recibe {
	animation: bx-recibe .55s cubic-bezier(.34, 1.56, .64, 1);
}

.bx .bx-carrito-recibe svg {
	color: var(--bx-accent);
}

@keyframes bx-mordisco {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.09); }
	100% { transform: scale(1); }
}

/* La vuelta a casa: del tamaño hinchado al de siempre, pasándose un pelín por
   debajo, que es lo que hace que parezca que traga. */
@keyframes bx-recibe {
	0%   { transform: scale(1.28); }
	45%  { transform: scale(.94); }
	100% { transform: scale(1); }
}

.bx-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 95;
	max-width: min(90vw, 420px);
	margin: 0;
	padding: 12px 20px;
	border: 1px solid var(--bx-cta-borde);
	border-radius: var(--bx-r-pill);
	background: rgba(0, 20, 32, .95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--bx-texto);
	font-size: .85rem;
	font-weight: 600;
	text-align: center;
	box-shadow: var(--bx-cta-glow);
	opacity: 0;
	transform: translate(-50%, 12px);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}

.bx-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.bx-toast--error {
	border-color: var(--bx-error);
	box-shadow: 0 0 20px rgba(244, 63, 94, .35);
}

/* Botón en espera mientras viaja la petición. */
.bx .bx-btn.is-cargando,
.bx .button.is-cargando {
	opacity: .75;
	pointer-events: none;
}

@media (max-width: 991px) {
	.bx-toast {
		bottom: 88px;
	}
}

/* ------------------------------------------------- 12. Dock inferior */

/* Asoma cuando la cabecera se pierde de vista. En móvil ocupa todo el ancho;
   desde tablet se encoge al ancho del contenido y flota centrado. */
.bx-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 85;
	pointer-events: none;
	opacity: 0;
	transform: translateY(120%);
	transition: opacity .3s ease, transform .38s cubic-bezier(.22, .9, .3, 1);
}

.bx-dock--visible {
	pointer-events: auto;
	opacity: 1;
	transform: none;
}

.bx-dock__lista {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 6px;
	/* Cristal del bueno: el dock entra en el sistema de vidrio líquido de
	   base.css —cuerpo, canto que refracta y filo especular—, el mismo de los
	   paneles laterales. Antes pintaba un cristal propio: un tinte y un
	   desenfoque, sin canto ni filo, y por eso se leía plano al lado del menú.

	   Su tinte va un punto más transparente que el de los paneles: el dock es
	   una barra fina que vive SIEMPRE encima del contenido, y con la carga de
	   un panel tapaba de más. Es el mismo color, con menos cuerpo. */
	--bx-vidrio: rgba(30, 86, 106, .34);
	--bx-vidrio-halo: rgba(120, 224, 245, .16);
	border-top: 0;
	-webkit-backdrop-filter: blur(38px) saturate(190%) brightness(1.08);
	backdrop-filter: blur(38px) saturate(190%) brightness(1.08);
	/* Pegado al fondo de la pantalla, la sombra del sistema —que cae hacia
	   abajo— se pierde: aquí tiene que subir, para despegar la barra de lo que
	   pasa por debajo. */
	box-shadow:
		0 -18px 40px rgba(0, 0, 0, .38),
		inset 0 0 60px var(--bx-vidrio-halo);
	padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}

.bx-dock__lista > li {
	flex: 1 1 0;
	display: flex;
}

.bx .bx-dock__enlace {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 52px;
	padding: 6px 4px;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--bx-texto-3);
	font-family: var(--bx-ui);
	font-size: .62rem;
	font-weight: 500;
	cursor: pointer;
	transition: color .18s ease, transform .18s ease, background .18s ease;
}

.bx .bx-dock__enlace:hover,
.bx .bx-dock__enlace:focus-visible {
	color: var(--bx-texto);
	background: rgba(255, 255, 255, .06);
}

/* El aumento tipo Mac, solo donde hay puntero de verdad. */
@media (hover: hover) and (pointer: fine) {
	.bx .bx-dock__enlace:hover {
		transform: translateY(-4px) scale(1.06);
	}
}

.bx .bx-dock__enlace--activo {
	color: var(--bx-accent);
}

.bx-dock__icono {
	position: relative;
	display: inline-flex;
}

.bx-dock__nombre {
	line-height: 1.1;
	white-space: nowrap;
}

/* Los contadores se apoyan en la esquina del icono. */
.bx-dock__icono .bx-contador {
	position: absolute;
	top: -6px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	font-size: .58rem;
}

/* La marca del dock: se enciende de tablet en adelante (más abajo). En móvil
   el dock ocupa el ancho entero y los cuatro accesos ya lo llenan. Se nombra
   desde la lista para ganar al `display: flex` de sus hermanos. */
.bx-dock__lista > .bx-dock__marca-caja {
	display: none;
}

@media (min-width: 782px) {
	.bx-dock {
		left: 50%;
		right: auto;
		bottom: 18px;
		width: min(var(--bx-ancho), calc(100% - 2 * var(--bx-lateral)));
		transform: translate(-50%, 160%);
	}

	.bx-dock--visible {
		transform: translate(-50%, 0);
	}

	.bx-dock__lista {
		position: relative;
		justify-content: center;
		/* Los cuatro accesos van sueltos, no apretados: en escritorio sobra
		   ancho y así cada uno se lee como una parada del dock. */
		gap: var(--bx-e-6);
		padding: 10px var(--bx-e-4) 5px;
		/* Sin borde dibujado: el filo lo pone el anillo especular del sistema,
		   como en los paneles. Un borde sólido tiene el mismo brillo por los
		   cuatro lados y delata que es CSS. */
		border: 0;
		border-radius: var(--bx-r-l);
		/* Flotando, la sombra sí cae hacia abajo. */
		box-shadow:
			0 22px 50px rgba(0, 0, 0, .45),
			0 4px 14px rgba(0, 0, 0, .3),
			inset 0 0 60px var(--bx-vidrio-halo);
	}

	/* Pegada al filo izquierdo y fuera del flujo, para que los accesos sigan
	   centrados en el dock, no desplazados por el ancho del logo. */
	/* De filo a filo del dock por el alto, con cinco píxeles de aire por los
	   cuatro costados. */
	.bx-dock__lista > .bx-dock__marca-caja {
		display: block;
		position: absolute;
		top: 5px;
		bottom: 5px;
		left: 0;
		padding-right: 5px;
		padding-left: 5px;
	}

	.bx-dock__marca {
		display: block;
		height: 100%;
		line-height: 0;
	}

	/* El 1x se sirve con su 2x para las pantallas densas y se dimensiona por el
	   alto, como manda la casa: el ancho lo pone la proporción del archivo. */
	.bx .bx-dock__marca .bx-logo__img {
		display: block;
		width: auto;
		height: 100%;
	}

	.bx-dock__lista > li {
		flex: 0 0 auto;
	}

	/* En escritorio hay sitio de sobra, así que el icono manda y el nombre se
	   pone debajo, como en un dock de verdad. En el móvil no se toca: ahí la
	   barra tiene que caber en el pulgar. */
	.bx .bx-dock__enlace {
		gap: 5px;
		min-width: 80px;
		padding: 8px 16px 2px;
		font-size: .74rem;
	}

	.bx-dock__icono svg {
		width: 38px;
		height: 38px;
	}

	/* El contador sigue apoyado en la esquina del icono, que ahora es mayor. */
	.bx-dock__icono .bx-contador {
		top: -4px;
		right: -12px;
		min-width: 20px;
		height: 20px;
		font-size: .64rem;
	}
}

/* Con el dock a la vista, la página deja sitio para no tapar el final. */
.bx-con-dock .bx-pie {
	padding-bottom: 76px;
}

@media (min-width: 782px) {
	.bx-con-dock .bx-pie {
		padding-bottom: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bx-dock {
		transition: none;
	}
}

/* ----------------------------------------------------- 13. Favoritos */

.bx-favorito {
	margin: 0;
}

/* Sobre la foto de la tarjeta, arriba a la derecha, como el mockup. */
.bx-favorito--tarjeta {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
}

.bx .bx-favorito__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 1px solid rgba(200, 230, 244, .3);
	border-radius: 50%;
	background: rgba(3, 12, 21, .55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--bx-texto-2);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, transform .18s ease, background .18s ease;
}

.bx .bx-favorito__btn:hover {
	border-color: rgba(244, 63, 94, .6);
	color: #ff8fa6;
	transform: scale(1.08);
}

.bx .bx-favorito__btn--puesto {
	border-color: rgba(244, 63, 94, .75);
	background: rgba(244, 63, 94, .18);
	color: #ff6b86;
}

.bx-favorito__btn--puesto svg {
	fill: currentColor;
}

.bx-contador--favoritos {
	background: var(--bx-error);
	color: #fff;
}

/* ------------------------------------------------------------- Banners

   Los pinta la pagina de colecciones y tambien la franja de debajo de la
   cabecera, que puede salir en cualquier pagina; por eso viven aqui y no en
   la hoja de colecciones, que solo se carga en la suya. */

.bx-banners {
	display: grid;
	gap: var(--bx-e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.bx .bx-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 168px;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-m);
	background: rgba(1, 7, 15, .58);
	color: var(--bx-texto);
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.bx .bx-banner:hover {
	transform: translateY(-4px);
	border-color: rgba(56, 214, 245, .45);
	box-shadow: var(--bx-glow);
	color: var(--bx-texto);
}

.bx-banner__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Con imagen propia para el móvil, la foto va dentro de un <picture>: el
   envoltorio tiene que ocupar la caja entera para que la imagen siga
   cubriéndola. */
.bx-banner__fondo picture {
	display: block;
	width: 100%;
	height: 100%;
}

.bx .bx-banner__fondo img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform .3s ease;
}

.bx-banner:hover .bx-banner__fondo img {
	transform: scale(1.04);
}

/* Velo para que el texto se lea sobre cualquier foto. */
.bx-banner__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(1, 6, 12, .25) 0%, rgba(1, 6, 12, .72) 58%, rgba(1, 6, 12, .92) 100%);
}

.bx-banner__cuerpo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	padding: var(--bx-e-3);
}

.bx-banner__epigrafe {
	color: var(--bx-gold);
	font-family: var(--bx-ui);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bx-banner__titulo {
	color: var(--bx-gold-claro);
	font-family: var(--bx-display);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.2;
}

.bx-banner__texto {
	color: var(--bx-texto-2);
	font-size: .8rem;
	line-height: 1.35;
}

.bx-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	color: var(--bx-accent);
	font-family: var(--bx-ui);
	font-size: .76rem;
	font-weight: 600;
}

/* La franja de debajo de la cabecera. Deja aire arriba y abajo para que no se
   pegue ni a la cabecera ni a lo que venga después, y con un solo banner este
   no se estira a lo ancho de la pantalla: se queda en su medida y centrado. */
.bx-franja-banners {
	padding: var(--bx-e-3) 0;
}

.bx-banners--franja {
	grid-template-columns: minmax(0, 1fr);
}

.bx-banners--franja .bx-banner {
	min-height: 132px;
}

@media (min-width: 900px) {
	.bx-banners--franja {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
}
/* ------------------------------------------- Nacimiento de los paneles

   Los paneles laterales —menú, carrito y el cajón de filtros— ya no entran
   deslizándose entre humo: nacen como un punto en su sitio y crecen hasta su
   tamaño mientras las partículas salen despedidas. Es el mismo gesto que el
   modal de filtros de escritorio, pero sin su centrado por transform: estos
   están anclados a un lado y solo escalan desde su propio centro. */

/* La escala va de un punto a su tamaño de un tirón continuo, sin escalones.
   Antes había un rellano a mitad de camino para que el nacimiento se viera:
   el problema es que un rellano es un cambio brusco de velocidad, y eso es
   justo lo que se notaba como un golpe en mitad de la apertura. Lo que hace
   que el nacimiento se vea ahora es la curva, que sale muy lenta y termina
   muy suave, y la máscara que descubre el panel a trozos. */
@keyframes bx-panel-nace {
	from {
		/* Un punto: en un panel de 380 px esto es menos de medio píxel. */
		transform: scale(.04);
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes bx-panel-muere {
	from {
		transform: scale(1);
		opacity: 1;
	}

	to {
		transform: scale(.04);
		opacity: 0;
	}
}

/* Y el modal centrado —el de los filtros en escritorio y el de las condiciones
   del pago— nace igual, con la diferencia de que su centrado va en el mismo
   transform que la escala y hay que arrastrarlo en cada fotograma. Viven aquí y
   no en la hoja del listado porque los usan dos pantallas distintas: el mismo
   gesto para la misma acción. */
@keyframes bx-modal-nace {
	0% {
		/* Un punto: en un modal de 1280 px, esto es poco más de un píxel. */
		transform: translate(-50%, -50%) scale(.04);
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
		filter: none;
	}
}

@keyframes bx-modal-muere {
	from {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}

	to {
		transform: translate(-50%, -50%) scale(.04);
		opacity: 0;
	}
}

/* Las partículas se pintan por encima de cualquier panel. */
.bx-chispas--portal {
	z-index: 121;
}

@media (prefers-reduced-motion: reduce) {
	.bx-panel-nace,
	.bx-panel-muere {
		animation: none;
	}
}

/* ------------------------------------------ Campos de WooCommerce

   Los desplegables de país y provincia los dibuja select2, que trae su propia
   hoja clara: sobre el fondo oscuro salían como dos rectángulos blancos. Estos
   estilos vivían en la hoja de la compra y solo se cargaban ahí, así que en
   Mi cuenta volvían a verse blancos; aquí los comparten todas las páginas. */

.bx .select2-container--default .select2-selection--single {
	height: auto;
	min-height: 46px;
	padding: 5px 6px;
	border: 1px solid var(--bx-borde-fuerte);
	border-radius: var(--bx-r-s);
	background: rgba(255, 255, 255, .06);
}

.bx .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--bx-texto);
	line-height: 34px;
}

.bx .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--bx-texto-3);
}

.bx .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 10px;
	right: 6px;
}

.bx .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--bx-texto-2);
}

/* El desplegable abierto cuelga del final del documento, fuera de .bx, así que
   sus reglas no pueden ir anidadas bajo esa clase. */
.select2-container--default .select2-dropdown {
	border: 1px solid var(--bx-borde-fuerte, rgba(255, 255, 255, .18));
	background: #0b1c2c;
	color: #e8eef4;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	color: #e8eef4;
}

.select2-container--default .select2-results__option {
	background: transparent;
	color: #c3ced8;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: rgba(56, 214, 245, .18);
	color: #eaf7ff;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: rgba(255, 255, 255, .06);
	color: #eaf7ff;
}

/* El ojo de ver la contraseña. WooCommerce lo mete dentro del campo, pero con
   su propio tamaño: salía como un cuadrado gris que se comía las esquinas
   redondeadas del campo y asomaba por fuera. */
.bx .woocommerce-password-input,
.bx .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.bx .woocommerce-password-input input,
.bx .password-input input {
	/* Sitio para el ojo, que va dentro. */
	padding-right: 46px;
}

.bx .woocommerce-password-input .show-password-input,
.bx .password-input .show-password-input,
.bx button.show-password-input {
	position: absolute;
	top: 50%;
	right: 8px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	box-shadow: none;
	color: var(--bx-texto-3);
	transform: translateY(-50%);
	cursor: pointer;
}

.bx .show-password-input:hover,
.bx .show-password-input:focus {
	background: rgba(255, 255, 255, .12);
	color: var(--bx-accent);
}

.bx .show-password-input::after {
	font-size: 1rem;
	line-height: 1;
}


/* ------------------------------- El velo mágico de los paneles

   Mientras nace, el panel no se enciende entero de golpe: se descubre a
   trozos por detrás de las partículas. Son nueve manchas repartidas por toda
   su superficie, cada una con su tamaño y su ritmo, más un óvalo general que
   acaba de cerrar el conjunto. El JavaScript va publicando --bx-magia de 0 a 1
   en el propio panel y aquí se convierte en el reparto de opaco y
   transparente. Sin JavaScript la clase no se pone y no hay máscara. */

.bx-magico {
	-webkit-mask-image:
		radial-gradient(circle at 22% 18%, #000 calc(var(--bx-magia, 1) * 44%), transparent calc(var(--bx-magia, 1) * 78%)),
		radial-gradient(circle at 68% 12%, #000 calc(var(--bx-magia, 1) * 36%), transparent calc(var(--bx-magia, 1) * 66%)),
		radial-gradient(circle at 88% 40%, #000 calc(var(--bx-magia, 1) * 40%), transparent calc(var(--bx-magia, 1) * 72%)),
		radial-gradient(circle at 14% 46%, #000 calc(var(--bx-magia, 1) * 38%), transparent calc(var(--bx-magia, 1) * 70%)),
		radial-gradient(circle at 46% 34%, #000 calc(var(--bx-magia, 1) * 34%), transparent calc(var(--bx-magia, 1) * 64%)),
		radial-gradient(circle at 30% 74%, #000 calc(var(--bx-magia, 1) * 42%), transparent calc(var(--bx-magia, 1) * 76%)),
		radial-gradient(circle at 76% 70%, #000 calc(var(--bx-magia, 1) * 36%), transparent calc(var(--bx-magia, 1) * 68%)),
		radial-gradient(circle at 54% 92%, #000 calc(var(--bx-magia, 1) * 32%), transparent calc(var(--bx-magia, 1) * 62%)),
		radial-gradient(circle at 10% 88%, #000 calc(var(--bx-magia, 1) * 30%), transparent calc(var(--bx-magia, 1) * 58%)),
		radial-gradient(ellipse 130% 130% at 50% 50%, #000 calc(var(--bx-magia, 1) * 72%), transparent calc(var(--bx-magia, 1) * 122%));
	mask-image:
		radial-gradient(circle at 22% 18%, #000 calc(var(--bx-magia, 1) * 44%), transparent calc(var(--bx-magia, 1) * 78%)),
		radial-gradient(circle at 68% 12%, #000 calc(var(--bx-magia, 1) * 36%), transparent calc(var(--bx-magia, 1) * 66%)),
		radial-gradient(circle at 88% 40%, #000 calc(var(--bx-magia, 1) * 40%), transparent calc(var(--bx-magia, 1) * 72%)),
		radial-gradient(circle at 14% 46%, #000 calc(var(--bx-magia, 1) * 38%), transparent calc(var(--bx-magia, 1) * 70%)),
		radial-gradient(circle at 46% 34%, #000 calc(var(--bx-magia, 1) * 34%), transparent calc(var(--bx-magia, 1) * 64%)),
		radial-gradient(circle at 30% 74%, #000 calc(var(--bx-magia, 1) * 42%), transparent calc(var(--bx-magia, 1) * 76%)),
		radial-gradient(circle at 76% 70%, #000 calc(var(--bx-magia, 1) * 36%), transparent calc(var(--bx-magia, 1) * 68%)),
		radial-gradient(circle at 54% 92%, #000 calc(var(--bx-magia, 1) * 32%), transparent calc(var(--bx-magia, 1) * 62%)),
		radial-gradient(circle at 10% 88%, #000 calc(var(--bx-magia, 1) * 30%), transparent calc(var(--bx-magia, 1) * 58%)),
		radial-gradient(ellipse 130% 130% at 50% 50%, #000 calc(var(--bx-magia, 1) * 72%), transparent calc(var(--bx-magia, 1) * 122%));
}

/* Se repite la clase para pesar más que la del panel, que trae su propio
   desenfoque desde la hoja del menú: sin esto, el suyo ganaba y el ahorro no
   llegaba a notarse. */
.bx-magico.bx-magico {
	/* El cristal desenfoca lo que hay detrás, y recomponer ese desenfoque en
	   cada fotograma —mientras el panel además crece y cambia de máscara— es lo
	   más caro de toda la escena: medido, siete milisegundos por fotograma en
	   un móvil. Mientras nace se rebaja a un desenfoque corto, que cuesta una
	   fracción y se recupera al terminar.

	   Rebajarlo y no quitarlo es a propósito: al pasar de tener filtro a no
	   tenerlo, el navegador tira la capa que compone el cristal y en algunos
	   móviles no la vuelve a montar al devolverlo, con lo que el panel se
	   quedaba transparente —vacío— justo al acabar el efecto. Con un valor
	   bajo, la capa nunca desaparece. */
	-webkit-backdrop-filter: blur(4px) saturate(120%);
	backdrop-filter: blur(4px) saturate(120%);

	/* Y sin sombra: la máscara recorta también lo que el panel proyecta, así
	   que la sombra estaba ahí a medias y aparecía entera de golpe al quitarla.
	   Mejor que no esté y vuelva con calma. */
	box-shadow: none;
}

/* Y las esquinas siguen siendo esquinas mientras dura el efecto.

   Un elemento con `mask-image` pierde el recorte de su `border-radius`: el
   navegador recorta por la máscara y el vidrio del fondo se pinta hasta el
   rectángulo entero. Resultado: durante el segundo que dura la magia, los
   paneles se abrían con las CUATRO ESQUINAS CUADRADAS y volvían a redondearse
   al terminar —lo que se veía como que «a veces» no salían redondeadas—.

   `clip-path` sí recorta el vidrio, así que se le repite el radio del panel. Va
   panel por panel y no en `.bx-magico` a secas porque el velo lo usa también el
   título de «Mi cuenta», que no es una caja de cristal y no debe recortarse. */
.bx-drawer.bx-magico,
.bx-carrito__panel.bx-magico,
.bx-sugerencias.bx-magico,
.bx-listado__lateral.bx-magico,
.bx-rapido.bx-magico,
.bx-modal.bx-magico {
	clip-path: inset(0 round var(--bx-radio-magia, var(--bx-r-l)));
}

/* Al acabar, el cristal y la sombra vuelven con una transición corta en vez de
   encenderse de golpe. La marca la pone y la quita el JavaScript. */
.bx-magico-fin.bx-magico-fin {
	transition:
		box-shadow .5s ease,
		-webkit-backdrop-filter .5s ease,
		backdrop-filter .5s ease;
}

/* Los paneles se quedan en su propia capa de dibujo aunque no estén animados.
   Sin esto, al terminar la animación el panel perdía su transform, el
   navegador tiraba la capa y volvía a pintarlo todo: eso es lo que hacía
   parpadear una vez las fotos de los productos. */
.bx-drawer,
.bx-carrito__panel,
.bx-listado__lateral {
	transform: translateZ(0);
}

/* La línea que se va: se encoge y se apaga mientras las partículas salen
   despedidas. Lo demás lo hace el servidor por detrás.

   La tarjeta que sale de «Mis favoritos» usa esta misma despedida: quitar algo
   de una lista se ve igual en toda la web, sea una línea del carrito o un
   producto del cofre. */
.bx-carrito__linea--se-va,
.bx-cesta__linea--se-va,
.bx-tarjeta--se-va {
	overflow: hidden;
	animation: bx-linea-se-va .22s ease-in both;
	pointer-events: none;
}

@keyframes bx-linea-se-va {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(.88);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bx-carrito__linea--se-va,
	.bx-cesta__linea--se-va,
	.bx-tarjeta--se-va {
		animation: none;
		opacity: 0;
	}
}


/* ------------------------------------------------------- Bloques de panel

   Un `.bx-panel` pone el cristal y el filo; `.bx-bloque` le pone el aire por
   dentro y sube el contenido por encima de ese filo. Vivían en la hoja de la
   portada, que solo se carga en la portada: en Mi cuenta, en el listado, en
   colecciones y en la página de favoritos el mismo marcado salía SIN relleno,
   con el título pegado al borde de la caja. */

.bx-bloque {
	padding: var(--bx-e-3);
}

@media (min-width: 782px) {
	.bx-bloque {
		padding: var(--bx-e-4);
	}
}

/* El contenido del panel va por encima del filo dibujado con ::before. */
.bx-bloque > * {
	position: relative;
	z-index: 2;
}

.bx-bloque__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-2);
	margin-bottom: var(--bx-e-3);
}

.bx .bx-bloque__cabecera .bx-titulo-panel {
	margin: 0;
	font-size: clamp(1.05rem, 4.4vw, 1.4rem);
}

/* La píldora "Ver todos" es la misma de las fichas; aquí solo se le impide
   encogerse cuando el título de la sección es largo. */
.bx-bloque__cabecera .bx-enlace-mas {
	flex: 0 0 auto;
	min-height: 32px;
}

/* La franja de confianza ya trae su propia rejilla; el panel solo la envuelve.
   En el móvil del mockup son cuatro columnas estrechas con el icono encima del
   texto; en cuanto hay sitio, vuelve a icono y texto en línea. */

/* --------------------------------------------------------- Estados vacíos

   El cofre de favoritos sin nada dentro. La caja no se estira a lo ancho de la
   columna —dos líneas de texto repartidas en 966 px se leen fatal— y el
   contenido respira: emblema, título, una frase corta y la salida a la tienda. */

.bx-vacio--cofre {
	max-width: 572px;
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--bx-e-5);
	padding-bottom: var(--bx-e-5);
}

.bx-vacio__emblema {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--bx-e-3);
	border: 1px solid var(--bx-panel-borde);
	border-radius: var(--bx-r-pill);
	background: radial-gradient(circle at 50% 35%, rgba(56, 214, 245, .16), rgba(3, 12, 22, .5) 70%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
	color: var(--bx-gold);
}

.bx-vacio--cofre .bx-vacio__texto {
	/* Sitio para que la frase entre de una pieza en el escritorio: partida en
	   dos se leía descuadrada, con el corte cayendo en mitad del complemento.
	   En el móvil no cabe y sí se parte, y ahí el reparto lo equilibra
	   `balance` —y, donde no lo entienda el navegador, el propio ancho. */
	max-width: 46ch;
	text-wrap: balance;
}

.bx-vacio--cofre .bx-vacio__acciones {
	margin-bottom: 0;
}

/* En un botón, el subrayado que el área de cuenta pone a todos sus enlaces
   sobra: no es un enlace de texto, es una llamada a la acción. */
.bx .bx-vacio a.bx-btn,
.bx .bx-vacio a.bx-btn:hover,
.bx .woocommerce-MyAccount-content .bx-vacio a.bx-btn,
.bx .woocommerce-MyAccount-content .bx-vacio a.bx-btn:hover {
	text-decoration: none;
}

/* La franja de confianza dentro de un panel: mismo componente, y también se
   usa fuera de la portada —en el listado y en colecciones—, así que su estilo
   viaja aquí y no en la hoja de la home. */

.bx-bloque--confianza {
	padding: var(--bx-e-2);
}

.bx-bloque--confianza .bx-confianza {
	margin: 0;
}

@media (max-width: 781px) {
	.bx-bloque--confianza .bx-confianza {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--bx-e-1);
	}

	.bx-bloque--confianza .bx-confianza__item {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		font-size: .68rem;
		text-align: center;
	}

	/* Los filetes verticales entre columnas del mockup. */
	.bx-bloque--confianza .bx-confianza__item + .bx-confianza__item {
		border-left: 1px solid var(--bx-panel-linea);
	}

	/* El detalle no cabe en cuatro columnas a 375 px: se reserva para el
	   lector de pantalla, que sí lo aprovecha. */
	.bx-bloque--confianza .bx-confianza__detalle {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Por debajo de 360 px cuatro columnas dejan los rótulos en tiras de una
   letra: mejor dos filas de dos. */
@media (max-width: 359px) {
	.bx-bloque--confianza .bx-confianza {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bx-bloque--confianza .bx-confianza__item + .bx-confianza__item {
		border-left: 0;
	}
}