/**
 * Base del sistema de diseño "Black Box Arcane" (doc 01).
 * Tokens, tipografía, layout, cabecera y pie.
 */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
	/* Fondos: el mockup trabaja sobre un negro azulado muy oscuro. */
	--bx-bg-0: #000409;
	--bx-bg-1: #01060c;
	--bx-bg-2: #01080f;

	--bx-gold: #d3a85f;
	--bx-gold-claro: #e6ca8e;
	--bx-gold-soft: rgba(211, 168, 95, .35);
	--bx-accent: #38d6f5;
	--bx-accent-2: #8b5cf6;
	--bx-naranja: #e0603a;

	/* Vidrio de los paneles laterales y modales: un azul bastante más claro que
	   el del resto de la web, tirando a turquesa, para que se lean como cristal
	   iluminado y no como otra caja oscura. Lo usan SOLO los sidebars y los
	   modales; las tarjetas y los paneles de contenido siguen con --bx-panel-*,
	   que no se toca. */
	/* El tinte es solo eso, un tinte: el cuerpo del panel lo pone el desenfoque
	   de lo que hay detrás, no una capa de color opaca. Por eso va tan bajo. */
	--bx-vidrio: rgba(30, 86, 106, .5);
	--bx-vidrio-macizo: rgba(30, 86, 106, .82);
	--bx-vidrio-luz: linear-gradient(
		100deg,
		rgba(190, 245, 255, .12) 0%,
		rgba(190, 245, 255, .03) 16%,
		rgba(190, 245, 255, 0) 55%,
		rgba(190, 245, 255, .05) 86%,
		rgba(190, 245, 255, .11) 100%
	);
	--bx-vidrio-halo: rgba(120, 224, 245, .13);

	/* Paneles del mockup: fondo azul casi negro y filo claro de 1px. */
	--bx-panel-fondo: rgba(6, 20, 34, .55);
	--bx-panel-fondo-2: rgba(4, 14, 24, .55);
	--bx-panel-borde: rgba(125, 165, 185, .42);
	--bx-panel-linea: rgba(255, 255, 255, .10);

	/* CTA "liquid glass" del mockup 04: fondo translúcido oscuro con el brillo
	   en los bordes y borde luminoso. Valores tomados píxel a píxel del mockup. */
	--bx-cta-fondo: linear-gradient(180deg, #019bba 0%, #0089ac 12%, #00728f 22%, #005e79 32%, #004d65 45%, #013d55 62%, #00495f 74%, #005973 85%, #006c85 93%, #0386a2 100%);
	--bx-cta-borde: #57d3e3;
	--bx-cta-glow: 0 0 20px rgba(74, 208, 231, .35);
	--bx-cta-texto: #ffffff;

	--bx-cta2-fondo: linear-gradient(180deg, #6e1eaa 0%, #530e92 10%, #4b0b81 28%, #3c0870 42%, #360768 52%, #3f0a72 65%, #4a0f84 80%, #5f229c 92%, #8250b6 100%);
	--bx-cta2-borde: #a646c7;
	--bx-cta2-glow: 0 0 20px rgba(166, 70, 199, .35);

	/* Controles seleccionables (pills, stepper) del mismo mockup. */
	--bx-control-fondo: rgba(3, 12, 21, .55);
	--bx-control-borde: rgba(255, 255, 255, .12);
	--bx-control-activo-fondo: rgba(0, 25, 38, .72);
	--bx-control-activo-borde: #237690;

	--bx-grad-cta: var(--bx-cta-fondo);

	--bx-surface: rgba(13, 18, 36, .66);
	--bx-surface-2: rgba(13, 18, 36, .85);
	--bx-borde: rgba(255, 255, 255, .08);
	--bx-borde-fuerte: rgba(255, 255, 255, .14);

	--bx-texto: #ffffff;
	--bx-texto-2: rgba(255, 255, 255, .72);
	--bx-texto-3: rgba(255, 255, 255, .56);

	--bx-exito: #34d399;
	/* Fucsia encendido: marca lo elegido en el pago, donde el cian de la casa se
	   confundía con el resto de la interfaz. */
	--bx-fucsia: #ff3ea5;
	--bx-fucsia-glow: 0 0 22px rgba(255, 62, 165, .38);
	/* Etiqueta de descuento: el botón de aplicar el cupón. */
	--bx-icono-cupon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5h6.5v1.2h5V7.5H21v9h-6.5v-1.2h-5v1.2H3z'/%3E%3Cpath d='M9.5 10.4v3.2'/%3E%3Cpath d='M5.5 12L7.5 12'/%3E%3Cpath d='M16.5 12L18.5 12'/%3E%3C/svg%3E");
	/* Flecha que señala la opción elegida; va como máscara para poder pintarla
	   del color que toque en cada estado. */
	--bx-flecha: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L20 12'/%3E%3Cpath d='M15 7l5 5-5 5'/%3E%3C/svg%3E");
	--bx-error: #f43f5e;
	--bx-aviso: #f59e0b;

	--bx-r-s: 10px;
	--bx-r-m: 14px;
	--bx-r-l: 20px;
	--bx-r-pill: 999px;

	--bx-e-1: 8px;
	--bx-e-2: 12px;
	--bx-e-3: 16px;
	--bx-e-4: 24px;
	--bx-e-5: 32px;
	--bx-e-6: 48px;
	--bx-e-7: 64px;

	--bx-ancho: 1280px;
	--bx-lateral: 10px;

	--bx-display: "Cinzel", "Iowan Old Style", Georgia, serif;
	--bx-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--bx-sombra: 0 18px 40px rgba(0, 0, 0, .35);
	--bx-glow: 0 0 0 1px rgba(56, 214, 245, .25), 0 10px 30px rgba(56, 214, 245, .18);
	--bx-cabecera-alto: 64px;
}

@media (min-width: 782px) {
	:root {
		--bx-lateral: 20px;
		--bx-cabecera-alto: 76px;
	}
}

/* ------------------------------------------------------------- 2. Cimientos */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bx-cabecera-alto) + 16px);
}

/* Los iconos del sprite (doc 11 fase 2, bx_icono()) solo llevan un <use> por
   dentro: sin contenido propio que medir, algunos navegadores le calculan un
   ancho mínimo de contenido de 0 dentro de un contenedor flex y el icono
   desaparece —el alto se respeta, el ancho no—, aunque lleve sus atributos
   width/height. No pasaba con los trazos a mano de antes, que sí tenían
   <path> propios. Bastante para que nunca dependa de dónde se coloque. */
.bx-icono {
	flex-shrink: 0;
}

/* El degradado va anclado al viewport: si se estira a lo largo del documento,
   la mitad inferior de una página larga acaba en negro plano y pierde el tono
   azulado del mockup. */
body,
body.woocommerce,
body.woocommerce-page {
	background-color: var(--bx-bg-1);
	background-image: linear-gradient(180deg, var(--bx-bg-0) 0%, var(--bx-bg-2) 45%, var(--bx-bg-1) 100%);
	background-attachment: fixed;
	color: var(--bx-texto-2);
	font-family: var(--bx-ui);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Nebulosa: el fondo del mockup no es liso, son vetas de humo azul verdoso
   que se ven también a través de los paneles translúcidos. */
.bx-nebulosa {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Zonas iluminadas medidas en el mockup: el foco fuerte está arriba a la
	   derecha (la luminancia del fondo pasa de 4 en el centro a 18 allí), y hay
	   claros más suaves pegados a los dos flancos a media altura. El centro es
	   la parte oscura. La luz es azul cian sin apenas rojo: rgb(0, 110, 180). */
	background:
		radial-gradient(54vw 50vh at 97% 0%, rgba(0, 112, 182, .22) 0%, rgba(0, 112, 182, .08) 38%, rgba(0, 112, 182, 0) 70%),
		radial-gradient(26vw 46vh at -6% 42%, rgba(0, 98, 158, .15) 0%, rgba(0, 98, 158, 0) 72%),
		radial-gradient(26vw 42vh at 105% 68%, rgba(0, 98, 158, .13) 0%, rgba(0, 98, 158, 0) 74%),
		radial-gradient(46vw 34vh at 24% 102%, rgba(0, 88, 142, .11) 0%, rgba(0, 88, 142, 0) 72%),
		/* el centro y la esquina superior izquierda son la parte oscura */
		radial-gradient(90% 55% at 34% 2%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .3) 100%);
	opacity: 1;
}

/* Cada capa es una nube de turbulencia teñida en azul verdoso, quieta. */
.bx-humo {
	position: absolute;
	inset: -25%;
	display: block;
	background-repeat: repeat;
}

.bx-humo--1 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='h1' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0055 0.013' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.055 0 0 0 0 0.180 0 0 0 0 0.235 1.15 0.55 0 0 -0.56'/%3E%3C/filter%3E%3Crect width='1400' height='1400' filter='url(%23h1)'/%3E%3C/svg%3E");
	background-size: 1400px 1400px;
	opacity: .17;
}

.bx-humo--2 {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='h2' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.006' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.043 0 0 0 0 0.145 0 0 0 0 0.196 0.95 0.5 0 0 -0.52'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23h2)'/%3E%3C/svg%3E");
	background-size: 900px 900px;
	opacity: .10;
}

/* En móvil basta una capa: misma atmósfera, la mitad de trabajo. */
@media (max-width: 781px) {
	.bx-humo--2 {
		display: none;
	}

	.bx-humo--1 {
		opacity: .2;
	}
}

/* Grano sutil: el mockup tiene una textura fina sobre todo el lienzo. */
.bx-nebulosa::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .014;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* El lienzo enmarcado: el margen lo separa del filo de la ventana y el
   padding evita que el contenido toque el marco. */
.bx-pagina {
	position: relative;
	z-index: 1;
	margin: 8px;
	/* Justo lo que hace falta para que el contenido no toque el marco: este
	   padding se suma al del contenedor y al de cada panel, y en móvil los
	   tres juntos se comían casi un centímetro por lado. */
	padding: 4px;
	/* El lienzo llena la ventana aunque la página traiga cuatro líneas: así el
	   pie queda abajo del todo y nunca se ve fondo por debajo. El margen se
	   descuenta para no provocar barra vertical en páginas cortas. */
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 16px);
	min-height: calc(100dvh - 16px);
}

/* Lo que hay entre la cabecera y el pie se estira; el pie se queda con su
   alto. El marco decorativo va posicionado, así que no entra en el reparto. */
.bx-contenido {
	flex: 1 0 auto;
}

@media (min-width: 782px) {
	.bx-pagina {
		margin: 14px;
		padding: 12px;
		min-height: calc(100vh - 28px);
		min-height: calc(100dvh - 28px);
	}
}

.bx h1,
.bx h2,
.bx h3,
.bx h4 {
	color: var(--bx-texto);
	font-family: var(--bx-display);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 var(--bx-e-3);
}

.bx p {
	margin: 0 0 var(--bx-e-3);
}

.bx a {
	color: var(--bx-accent);
	text-decoration: none;
	transition: color .15s ease;
}

.bx a:hover {
	color: #7ce6ff;
}

.bx :focus-visible {
	outline: 2px solid var(--bx-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.bx img {
	max-width: 100%;
	height: auto;
}

.bx-contenedor {
	width: 100%;
	max-width: var(--bx-ancho);
	margin: 0 auto;
	padding-left: var(--bx-lateral);
	padding-right: var(--bx-lateral);
}

.bx-principal {
	display: block;
	padding-bottom: var(--bx-e-4);
}

.bx-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--bx-surface-2);
	color: var(--bx-texto);
	padding: 12px 18px;
	border-radius: 0 0 var(--bx-r-s) 0;
}

.bx-saltar:focus {
	left: 0;
}

/* Título de sección: serif oro, mayúsculas con tracking. */
.bx-titulo-seccion {
	color: var(--bx-gold);
	font-family: var(--bx-display);
	font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 0;
}

.bx-titulo-seccion::after {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	margin-top: 10px;
	background: linear-gradient(90deg, var(--bx-gold), transparent);
}

/* --------------------------------------------------------- 3. Superficies */

.bx-panel {
	position: relative;
	background: linear-gradient(160deg, rgba(9, 26, 42, .55) 0%, var(--bx-panel-fondo) 45%, rgba(3, 12, 22, .6) 100%);
	border: 0;
	border-radius: var(--bx-r-l);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: var(--bx-sombra), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Borde con destellos: el filo del mockup no es de un solo tono, tiene tramos
   que brillan más. Se dibuja como degradado recortado al perímetro. */
.bx-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg,
		rgba(196, 232, 245, .55) 0%,
		rgba(125, 165, 185, .14) 14%,
		rgba(210, 240, 250, .48) 29%,
		rgba(125, 165, 185, .10) 44%,
		rgba(185, 222, 238, .42) 58%,
		rgba(125, 165, 185, .12) 72%,
		rgba(205, 236, 248, .5) 86%,
		rgba(125, 165, 185, .16) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Título de panel: serif dorado en versales, como en los mockups. */
.bx .bx-titulo-panel {
	margin: 0 0 var(--bx-e-3);
	color: var(--bx-gold);
	font-family: var(--bx-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ------------------------------------------------- 3 bis. Marco dorado

   Filo de bronce alrededor de la ventana, con el desgaste por tramos del
   mockup: la línea aparece y se apaga a lo largo de cada lado, y las cuatro
   esquinas llevan una filigrana. Es puramente decorativo (aria-hidden y sin
   captura de clics).                                                        */

.bx-marco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		/* superior: se apaga en el tramo central */
		linear-gradient(90deg,
			rgba(211, 168, 95, .06) 0%,
			rgba(211, 168, 95, .40) 5%,
			rgba(211, 168, 95, .26) 18%,
			rgba(211, 168, 95, .34) 32%,
			rgba(211, 168, 95, .12) 41%,
			rgba(211, 168, 95, 0) 46%,
			rgba(211, 168, 95, 0) 79%,
			rgba(211, 168, 95, .22) 84%,
			rgba(211, 168, 95, .46) 94%,
			rgba(211, 168, 95, .08) 100%) top left / 100% 1px no-repeat,
		/* inferior: el desgaste cae en otro sitio */
		linear-gradient(90deg,
			rgba(211, 168, 95, .10) 0%,
			rgba(211, 168, 95, .34) 8%,
			rgba(211, 168, 95, .10) 16%,
			rgba(211, 168, 95, 0) 22%,
			rgba(211, 168, 95, 0) 38%,
			rgba(211, 168, 95, .30) 46%,
			rgba(211, 168, 95, .36) 72%,
			rgba(211, 168, 95, .14) 82%,
			rgba(211, 168, 95, 0) 88%,
			rgba(211, 168, 95, .24) 100%) bottom left / 100% 1px no-repeat,
		/* izquierdo */
		linear-gradient(180deg,
			rgba(211, 168, 95, .34) 0%,
			rgba(211, 168, 95, .30) 12%,
			rgba(211, 168, 95, .08) 20%,
			rgba(211, 168, 95, 0) 27%,
			rgba(211, 168, 95, 0) 58%,
			rgba(211, 168, 95, .26) 66%,
			rgba(211, 168, 95, .34) 88%,
			rgba(211, 168, 95, .10) 100%) top left / 1px 100% no-repeat,
		/* derecho */
		linear-gradient(180deg,
			rgba(211, 168, 95, .28) 0%,
			rgba(211, 168, 95, .12) 9%,
			rgba(211, 168, 95, 0) 15%,
			rgba(211, 168, 95, 0) 34%,
			rgba(211, 168, 95, .30) 42%,
			rgba(211, 168, 95, .36) 74%,
			rgba(211, 168, 95, .08) 84%,
			rgba(211, 168, 95, .30) 100%) top right / 1px 100% no-repeat;
}

.bx-marco__esquina {
	position: absolute;
	width: 30px;
	height: 53px;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	opacity: .55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 64' fill='none' stroke='%23d3a85f' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v50' opacity='.8'/%3E%3Cpath d='M11 14c4 2.5 4 6.5 0 9s-4 6.5 0 9 4 6.5 0 9' opacity='.75'/%3E%3Ccircle cx='11.5' cy='18.5' r='1' opacity='.8'/%3E%3Ccircle cx='11.5' cy='36.5' r='1' opacity='.8'/%3E%3Cpath d='M13 5c4.5 0 6 2.4 9.5 2.4S28 5 32.5 5' opacity='.7'/%3E%3C/svg%3E");
}

.bx-marco__esquina--si {
	top: 0;
	left: 0;
}

.bx-marco__esquina--sd {
	top: 0;
	right: 0;
	transform: scaleX(-1);
}

.bx-marco__esquina--ii {
	bottom: 0;
	left: 0;
	transform: scaleY(-1);
}

.bx-marco__esquina--id {
	bottom: 0;
	right: 0;
	transform: scale(-1);
}

@media (min-width: 782px) {
	.bx-marco__esquina {
		width: 38px;
		height: 68px;
	}
}

@media print {
	.bx-marco {
		display: none;
	}
}

/* ------------------------------------------------------------ 4. Cabecera */

.bx-cabecera {
	position: sticky;
	isolation: isolate;
	top: 0;
	z-index: 60;
	background: transparent;
	border-bottom: 0;

	/* Anchos del desvanecido; los reutiliza la línea del menú. */
	--bx-cab-fundido-x: clamp(28px, 7vw, 150px);
	--bx-cab-fundido-arriba: 16px;
	--bx-cab-fundido-abajo: 30px;
}

/* El panel de la cabecera no se recorta contra el fondo: se desvanece por los
   cuatro lados para fundirse con las vetas de humo. */
.bx-cabecera::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--bx-cab-fundido-abajo));
	z-index: -1;
	pointer-events: none;
	background: rgba(1, 6, 12, .78);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

@supports ((-webkit-mask-composite: source-in) or (mask-composite: intersect)) {
	.bx-cabecera::before {
		-webkit-mask-image:
			linear-gradient(180deg, transparent 0, #000 var(--bx-cab-fundido-arriba), #000 calc(100% - var(--bx-cab-fundido-abajo)), transparent 100%),
			linear-gradient(90deg, transparent 0, #000 var(--bx-cab-fundido-x), #000 calc(100% - var(--bx-cab-fundido-x)), transparent 100%);
		mask-image:
			linear-gradient(180deg, transparent 0, #000 var(--bx-cab-fundido-arriba), #000 calc(100% - var(--bx-cab-fundido-abajo)), transparent 100%),
			linear-gradient(90deg, transparent 0, #000 var(--bx-cab-fundido-x), #000 calc(100% - var(--bx-cab-fundido-x)), transparent 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}
}

.bx-cabecera__fila {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--bx-e-3);
	min-height: var(--bx-cabecera-alto);
}

.bx-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.bx-logo__img {
	display: block;
	width: auto;
	height: 44px;
}

@media (min-width: 782px) {
	.bx-logo__img {
		height: 56px;
	}
}

.bx-buscador {
	display: none;
	position: relative;
	flex: 1 1 auto;
	max-width: 520px;
	margin: 0 auto;
}

.bx-buscador__icono {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bx-texto-3);
	pointer-events: none;
}

.bx .bx-cabecera .bx-buscador__campo {
	width: 100%;
	height: 44px;
	min-height: 44px;
	padding: 0 48px 0 44px;
	border-radius: var(--bx-r-pill);
	border: 1px solid var(--bx-borde-fuerte);
	background: rgba(255, 255, 255, .06);
	color: var(--bx-texto);
	font-family: var(--bx-ui);
	font-size: .9rem;
}

.bx-buscador__campo::placeholder {
	color: var(--bx-texto-3);
}

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

.bx-buscador__limpiar {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bx-texto-3);
	cursor: pointer;
	transition: color .15s ease;
}

.bx-buscador__limpiar:hover {
	color: var(--bx-texto);
}

@media (min-width: 992px) {
	.bx-buscador {
		display: block;
	}
}

/* Buscador dentro del menú desplegable (móvil). */
.bx-buscador--menu {
	display: block;
	max-width: none;
	margin: 0 0 var(--bx-e-2);
}

@media (min-width: 992px) {
	.bx-buscador--menu {
		display: none;
	}
}

.bx-acciones {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.bx .bx-accion,
.bx .bx-accion:visited {
	color: var(--bx-texto);
}

.bx-accion {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	justify-content: center;
	border-radius: var(--bx-r-s);
	color: var(--bx-texto);
	font-size: .85rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.bx-accion:hover {
	background: rgba(255, 255, 255, .07);
	color: var(--bx-texto);
}

.bx-accion__texto {
	display: none;
}

@media (min-width: 1200px) {
	.bx-accion__texto {
		display: inline;
	}
}

.bx-contador {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--bx-r-pill);
	background: var(--bx-accent-2);
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 0 12px rgba(139, 92, 246, .45);
}

.bx-accion--carrito .bx-contador {
	top: 2px;
	right: 0;
}

.bx-contador--activo {
	background: var(--bx-accent-2);
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	line-height: 16px;
	box-shadow: 0 0 12px rgba(139, 92, 246, .55);
}

/* El menú móvil vive en assets/css/menu-movil.css (doc 08). */

/* Navegación de categorías (solo desktop). En el mockup la cabecera es un
   único panel: el menú no lleva fondo propio, solo una línea separadora que
   también se desvanece por los lados. */
.bx-nav {
	display: none;
	position: relative;
	background: transparent;
	border-top: 0;
}

/* Dos líneas: la de arriba separa el menú de la fila del logo y la de abajo
   cierra la cabecera. Medidas en el mockup: la inferior es la más marcada
   (rgba(255,255,255,.11)) y la superior algo más tenue. Ambas se desvanecen
   por los lados, como el resto de la cabecera. */
.bx-nav::before,
.bx-nav::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	pointer-events: none;
}

.bx-nav::before {
	top: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0,
		rgba(255, 255, 255, .07) var(--bx-cab-fundido-x, 60px),
		rgba(255, 255, 255, .07) calc(100% - var(--bx-cab-fundido-x, 60px)),
		rgba(255, 255, 255, 0) 100%
	);
}

.bx-nav::after {
	bottom: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0,
		rgba(255, 255, 255, .11) var(--bx-cab-fundido-x, 60px),
		rgba(255, 255, 255, .11) calc(100% - var(--bx-cab-fundido-x, 60px)),
		rgba(255, 255, 255, 0) 100%
	);
}

@media (min-width: 992px) {
	.bx-nav {
		display: block;
	}
}

.bx-nav__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bx-e-1);
	list-style: none;
	margin: 0;
	padding: 6px 0 4px;
}

.bx-nav__lista > li {
	position: relative;
}

.bx-nav__lista a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	color: var(--bx-texto-2);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .18s ease;
}

/* Chevron de las entradas con submenú, como en el mockup. */
.bx-nav__lista > .menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg);
	opacity: .7;
}

/* Barra dorada del mockup: va entre el texto y el borde inferior del menú (no
   encima del borde), se desvanece por los lados y deja un halo alrededor. La
   comparten el estado activo y el hover, con la misma forma. */
.bx-nav__lista > li::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 3px;
	width: calc(100% + 28px);
	height: 14px;
	transform: translate(-50%, 50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
	background:
		linear-gradient(
			90deg,
			rgba(211, 160, 84, 0) 0%,
			rgba(211, 160, 84, .6) 24%,
			var(--bx-gold-claro) 50%,
			rgba(211, 160, 84, .6) 76%,
			rgba(211, 160, 84, 0) 100%
		),
		radial-gradient(ellipse 48% 90% at 50% 50%, rgba(211, 160, 84, .34) 0%, rgba(211, 160, 84, 0) 72%);
	background-size: 100% 2px, 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.bx-nav__lista > li:hover::after,
.bx-nav__lista > li:focus-within::after {
	opacity: .8;
}

/* La entrada de la sección en la que estás luce la misma barra, a plena luz.
   WordPress marca la entrada actual con varias clases según el tipo de página;
   se cubren todas para que la barra no desaparezca en fichas ni en archivos. */
.bx-nav__lista > li:active::after,
.bx-nav__lista > .current-menu-item::after,
.bx-nav__lista > .current_page_item::after,
.bx-nav__lista > .current-menu-parent::after,
.bx-nav__lista > .current_page_parent::after,
.bx-nav__lista > .current-menu-ancestor::after,
.bx-nav__lista > .current_page_ancestor::after,
.bx-nav__lista > .current-product-ancestor::after,
.bx-nav__lista > .current-product_cat-ancestor::after {
	opacity: 1;
}

/* En regla aparte: un navegador que no entienda :has() descartaría el grupo
   entero y con él la barra del elemento activo. */
.bx-nav__lista > li:has(> [aria-current])::after {
	opacity: 1;
}

/* Entradas marcadas como destacadas en el menú del admin (clase CSS
   "destacado" en el elemento) se pintan en naranja, como "OFERTAS". */
.bx-nav__lista .destacado > a {
	color: var(--bx-naranja);
}

.bx-nav__lista a:hover,
.bx-nav__lista a:focus-visible,
.bx-nav__lista a:active,
.bx-nav__lista .current-menu-item > a,
.bx-nav__lista .current_page_item > a,
.bx-nav__lista .current-menu-parent > a,
.bx-nav__lista .current_page_parent > a,
.bx-nav__lista .current-menu-ancestor > a,
.bx-nav__lista .current_page_ancestor > a,
.bx-nav__lista .current-product-ancestor > a,
.bx-nav__lista .current-product_cat-ancestor > a,
.bx-nav__lista [aria-current] {
	color: var(--bx-texto);
}

.bx-nav__lista .sub-menu {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 65;
	min-width: 220px;
	padding: 6px;
	margin: 0;
	list-style: none;
	background: var(--bx-surface-2);
	border: 1px solid var(--bx-borde);
	border-radius: var(--bx-r-m);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: var(--bx-sombra);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.bx-nav__lista > li:hover > .sub-menu,
.bx-nav__lista > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ------------------------------------------------------------------ 5. Pie */

.bx-pie {
	position: relative;
	z-index: 1;
	margin-top: var(--bx-e-4);
	padding: var(--bx-e-5) 0 var(--bx-e-4);
	background: rgba(0, 4, 9, .72);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--bx-borde);
	color: var(--bx-texto-2);
}

.bx-pie__cuerpo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bx-e-5);
}

/*
 * La retícula la manda el número de columnas que se pintan de verdad (marca +
 * los menús asignados + los datos de la tienda). Con una retícula fija de
 * cuatro y solo dos menús en el admin quedaba una columna vacía a la derecha.
 */
@media (min-width: 782px) {
	.bx-pie__cuerpo {
		grid-template-columns: 1.6fr repeat(3, 1fr);
		gap: var(--bx-e-4);
	}

	.bx-pie__cuerpo--cols-2 {
		grid-template-columns: 1.6fr 1fr;
	}

	.bx-pie__cuerpo--cols-3 {
		grid-template-columns: 1.6fr repeat(2, 1fr);
	}

	.bx-pie__cuerpo--cols-4 {
		grid-template-columns: 1.6fr repeat(3, 1fr);
	}

	.bx-pie__cuerpo--cols-5 {
		grid-template-columns: 1.4fr repeat(4, 1fr);
	}
}

.bx-pie__lema {
	max-width: 34ch;
	margin: var(--bx-e-2) 0;
	color: var(--bx-texto-3);
	font-size: .9rem;
}

.bx-pie__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--bx-texto);
	font-weight: 600;
}

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

/* Las dos formas de contacto, una debajo de otra. */
.bx-pie__contacto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx .bx-pie__correo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--bx-texto);
	font-weight: 600;
	overflow-wrap: anywhere;
}

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

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

/* Los datos de la tienda, en la última columna del pie. */
.bx-pie__tienda {
	margin: 0 0 var(--bx-e-1);
	color: var(--bx-texto);
	font-weight: 600;
}

.bx-pie__direccion {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 6px 0;
	color: var(--bx-texto-2);
	font-size: .9rem;
	line-height: 1.5;
}

.bx-pie__direccion svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--bx-gold);
}

.bx-pie__titulo {
	color: var(--bx-gold);
	font-family: var(--bx-display);
	font-size: 1rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: var(--bx-e-2);
}

.bx-pie__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx-pie__lista a {
	display: inline-block;
	padding: 7px 0;
	color: var(--bx-texto-2);
	font-size: .9rem;
}

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

.bx-pie__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bx-e-3);
	margin-top: var(--bx-e-5);
	padding-top: var(--bx-e-3);
	border-top: 1px solid var(--bx-borde);
}

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

.bx-pie__pagos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bx-e-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bx-pie__pago {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--bx-borde);
	border-radius: var(--bx-r-s);
	background: rgba(255, 255, 255, .04);
	color: var(--bx-texto-2);
	font-size: .78rem;
}

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

/* Los pagos de un toque van con su logo y sin rótulo al lado: la marca ya dice
   el nombre. La cápsula se ciñe al logo —sin el aire que necesita el texto— y
   se queda del alto de sus vecinas. */
.bx-pie__pago--logo {
	padding: 4px 8px;
}

.bx .bx-pie__pago-logo {
	display: block;
	width: auto;
	height: 22px;
	border-radius: 3px;
}

/* Los logos que vienen sin fondo —el de Bizum— llevan la suya, para que toda
   la fila se lea igual: tarjetas blancas con la marca dentro. El alto es el
   mismo que el de los demás y el aire va por dentro (`border-box`), así que la
   tarjeta mide igual y la marca respira lo que respiran sus vecinas. */
.bx .bx-pie__pago-logo--fondo {
	height: 22px;
	padding: 3px 6px;
	background: #fff;
}

/* --------------------------------------------------- 6. Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.bx *,
	.bx *::before,
	.bx *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* -------------------------- Filo dorado bajo la cabecera (móvil)

   En pantallas pequeñas no hay barra de navegación debajo del logo, así que
   la cabecera se confundía con el contenido: iban pegados y sin nada que los
   separase. Se le pone aire y un filo de bronce con el mismo desgaste por
   tramos que el marco de la ventana —aparece y se apaga a lo largo del
   recorrido— y su resplandor. */

@media (max-width: 1023px) {
	.bx-cabecera {
		padding-bottom: var(--bx-e-2);
		margin-bottom: var(--bx-e-3);
	}

	.bx-cabecera::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		pointer-events: none;
		background:
			linear-gradient(90deg,
				rgba(211, 168, 95, 0) 0%,
				rgba(211, 168, 95, .30) 7%,
				rgba(211, 168, 95, .52) 16%,
				rgba(211, 168, 95, .18) 24%,
				rgba(211, 168, 95, .04) 31%,
				rgba(211, 168, 95, .34) 44%,
				rgba(211, 168, 95, .58) 56%,
				rgba(211, 168, 95, .22) 66%,
				rgba(211, 168, 95, .06) 73%,
				rgba(211, 168, 95, .40) 86%,
				rgba(211, 168, 95, .26) 94%,
				rgba(211, 168, 95, 0) 100%);
		/* El resplandor: el mismo oro, difuminado hacia abajo. */
		box-shadow:
			0 0 10px rgba(211, 168, 95, .28),
			0 1px 14px rgba(211, 168, 95, .16);
	}

	/* Y un reflejo corto justo debajo, para que el filo no quede como una raya
	   pegada sino como un canto iluminado. */
	.bx-cabecera .bx-cabecera__brillo {
		position: absolute;
		right: 0;
		bottom: -14px;
		left: 0;
		height: 14px;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(211, 168, 95, .10), rgba(211, 168, 95, 0));
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
	}
}

/* ------------------------- El ancho del sitio, también en las páginas

   Las plantillas propias del tema —listado, ficha, contacto, colecciones,
   favoritos— meten su contenido en .bx-contenedor y quedan centradas a la
   medida del sitio. Las que pinta WordPress con la plantilla de página no
   pasaban por ahí: mi cuenta, el carrito, el pago y los legales se estiraban
   de lado a lado de la ventana, que en un monitor ancho es incomodísimo de
   leer y no se parece al resto de la web.

   Se les da el mismo contenedor, salvo a las que ya traen el suyo dentro: a
   esas se les doblaría el margen lateral. */

.bx-contenido .content-area:not(:has(.bx-contenedor)) {
	/* El tema padre lo saca a flote para su barra lateral, y un elemento
	   flotante no se centra por mucho margen automático que se le ponga. */
	float: none;
	width: 100%;
	max-width: var(--bx-ancho);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bx-lateral);
	padding-right: var(--bx-lateral);
	/* El título de estas páginas nacía pegado a la cabecera (doc 11 fase
	   5.3: se notaba sobre todo en Mi cuenta, sin barra de pasos encima que
	   le diera aire). Un solo sitio para las cuatro —cuenta, carrito, pago
	   y legales—, así el espaciado es el mismo en todas. */
	padding-top: var(--bx-e-4);
}

/* Y si el navegador no entiende :has(), al menos las de la tienda y las
   legales quedan centradas: son las que más se notaban. */
@supports not selector(:has(*)) {
	.woocommerce-account .site-main,
	.woocommerce-cart .site-main,
	.woocommerce-checkout .site-main,
	.bx-contenido .entry-content > .woocommerce {
		width: 100%;
		max-width: var(--bx-ancho);
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--bx-lateral);
		padding-right: var(--bx-lateral);
	}
}


/* ==========================================================================
   Preferencias del cliente
   ==========================================================================

   Quien apaga las animaciones en «Configuración del sitio web» (Mi cuenta) se
   lleva la clase en el <body> desde el servidor, así que la tienda ya nace
   quieta: no hay un primer fotograma con todo moviéndose. Es el mismo trato que
   se le da a quien lo pide desde los ajustes de su sistema.

   Los !important son a propósito: hay que ganarle a cualquier animación del
   tema, del padre y de los plugins, y esto solo se aplica cuando alguien ha
   pedido expresamente que nada se mueva. */

.bx-sin-movimiento *,
.bx-sin-movimiento *::before,
.bx-sin-movimiento *::after {
	animation-duration: .001ms !important;
	animation-delay: 0ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	transition-delay: 0ms !important;
}

.bx-sin-movimiento {
	scroll-behavior: auto !important;
}

/* ==========================================================================
   Cristal líquido: paneles laterales y modales
   ==========================================================================

   El vidrio de iOS no es «un fondo translúcido con desenfoque»: son tres cosas
   a la vez, y si falta una, se nota.

   1. CUERPO. Lo que se ve dentro del panel es la página de detrás desenfocada,
      avivada y aclarada —no una capa de color encima—. Por eso el tinte propio
      es bajo (--bx-vidrio) y el trabajo lo hace el backdrop-filter.
   2. CANTO. El borde de una pieza de cristal refracta más que su centro: la
      imagen se comprime y se aclara en los últimos milímetros. Se imita con un
      segundo backdrop-filter aplicado SOLO al anillo del borde (::before, con
      la máscara recortando el centro).
   3. FILO ESPECULAR. La luz no rodea el filo por igual: entra fuerte por dos
      cantos y se apaga en los otros dos. Un degradado cónico en un anillo de
      1 px (::after) da ese brillo desigual, que es lo que hace que la pieza
      parezca tener volumen y no ser un rectángulo pintado.

   Lo usan los cuatro paneles del sitio: menú móvil, drawer del carrito, modal
   y cajón de filtros, y el buscador —y desde el 19 de agosto de 2026 también el
   dock inferior, que antes pintaba un cristal suyo, más plano—. Ninguno pinta
   esto por su cuenta.
   -------------------------------------------------------------------------- */

.bx-drawer,
.bx-sugerencias,
.bx-listado__lateral,
.bx-dock__lista {
	position: relative;
	/* Capa propia: sin esto, el anillo del canto y el filo se mezclan con lo
	   que pinta el contenido y el navegador reordena las capas a su gusto. */
	isolation: isolate;
	background: var(--bx-vidrio-luz), var(--bx-vidrio);
	-webkit-backdrop-filter: blur(34px) saturate(175%) brightness(1.06);
	backdrop-filter: blur(34px) saturate(175%) brightness(1.06);
	/* El filo lo pinta el anillo de ::after, no el borde de la caja: un borde
	   sólido tiene el mismo brillo por los cuatro lados y delata que es CSS. */
	border: 0;
	box-shadow:
		0 32px 70px rgba(0, 0, 0, .55),
		0 4px 14px rgba(0, 0, 0, .3),
		/* El grosor del vidrio, por dentro: la luz que entra por el canto de
		   arriba y el poso que deja en el de abajo. Sin estas dos líneas la
		   pieza se lee como una lámina y no como un bloque. */
		inset 0 1px 0 rgba(255, 255, 255, .38),
		inset 0 -1px 0 rgba(0, 0, 0, .28),
		inset 0 0 60px var(--bx-vidrio-halo);
}

/* 2. El canto que refracta. */
.bx-drawer::before,
.bx-sugerencias::before,
.bx-listado__lateral::before,
.bx-dock__lista::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	/* La clave del canto NO es aclararlo —eso pinta un neón alrededor del
	   panel, probado y descartado—, sino que ahí el fondo se vea MÁS NÍTIDO
	   que en el centro. Es lo que hace el borde de una lente, y el ojo lo lee
	   como grosor de vidrio.

	   Afinado el 19 de agosto de 2026 hacia el vidrio de iOS 26: el desenfoque
	   del canto baja de 3 px a 1 y se le suma contraste y luz. Ahí el fondo no
	   solo está menos borroso: está más definido y más vivo QUE LA PROPIA
	   PÁGINA, que es lo que hace una lente gruesa al comprimir la imagen contra
	   el filo. Con 3 px planos, el canto se leía como «un poco menos borroso» y
	   no como cristal. */
	-webkit-backdrop-filter: blur(1px) saturate(165%) contrast(116%) brightness(1.14);
	backdrop-filter: blur(1px) saturate(165%) contrast(116%) brightness(1.14);

	/* Y la compresión de la imagen contra el filo: una lente no reparte por
	   igual: aprieta lo que hay justo en el borde y lo suelta enseguida. Se
	   imita con DOS anillos sumados —uno ancho que se desvanece hacia dentro y
	   otro estrechísimo pegado al filo—, en vez del anillo único de antes. El
	   estrecho es el que da el punto de luz del canto; el ancho, el grosor. */
	--bx-canto: 26px;
	--bx-filo: 7px;
	-webkit-mask:
		linear-gradient(to right, #000, transparent var(--bx-canto), transparent calc(100% - var(--bx-canto)), #000),
		linear-gradient(to bottom, #000, transparent var(--bx-canto), transparent calc(100% - var(--bx-canto)), #000),
		linear-gradient(to right, #000, transparent var(--bx-filo), transparent calc(100% - var(--bx-filo)), #000),
		linear-gradient(to bottom, #000, transparent var(--bx-filo), transparent calc(100% - var(--bx-filo)), #000);
	-webkit-mask-composite: source-over;
	mask:
		linear-gradient(to right, #000, transparent var(--bx-canto), transparent calc(100% - var(--bx-canto)), #000),
		linear-gradient(to bottom, #000, transparent var(--bx-canto), transparent calc(100% - var(--bx-canto)), #000),
		linear-gradient(to right, #000, transparent var(--bx-filo), transparent calc(100% - var(--bx-filo)), #000),
		linear-gradient(to bottom, #000, transparent var(--bx-filo), transparent calc(100% - var(--bx-filo)), #000);
	mask-composite: add;
}

/* 3. El filo especular. El ángulo del cónico decide por dónde entra la luz;
   210° la trae desde arriba a la izquierda, que es de donde viene en todo el
   sitio (las sombras de las tarjetas caen abajo a la derecha). */
.bx-drawer::after,
.bx-sugerencias::after,
.bx-listado__lateral::after,
.bx-dock__lista::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	/* Un pelo más grueso que antes: el filo de iOS 26 se ve, no se intuye. */
	padding: 1.25px;
	border-radius: inherit;
	pointer-events: none;
	/* Más contraste entre los tramos encendidos y los apagados: la luz entra
	   fuerte por dos cantos y casi se apaga en los otros dos, que es lo que
	   hace que la pieza parezca tener volumen en vez de un marco pintado. */
	background: conic-gradient(
		from 210deg,
		rgba(255, 255, 255, .82) 0%,
		rgba(214, 244, 255, .06) 15%,
		rgba(255, 255, 255, .52) 30%,
		rgba(196, 234, 248, .04) 47%,
		rgba(255, 255, 255, .9) 63%,
		rgba(214, 244, 255, .05) 79%,
		rgba(255, 255, 255, .58) 92%,
		rgba(255, 255, 255, .82) 100%
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
}

/* El contenido, por encima del canto y por debajo del filo. */
.bx-drawer > *,
.bx-sugerencias > *,
.bx-listado__lateral > *,
.bx-dock__lista > * {
	position: relative;
	z-index: 1;
}

/* Sin desenfoque de fondo —navegador viejo o ajuste del sistema— el panel se
   quedaría transparente y encima del texto de la página. Ahí se maciza. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.bx-drawer,
	.bx-sugerencias,
	.bx-listado__lateral,
	.bx-dock__lista {
		background: var(--bx-vidrio-luz), var(--bx-vidrio-macizo);
	}
}