/**
 * La tienda.
 */

.rd-shop {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-5);
	max-width: 900px;
	margin: 0 auto;
	width: 100%;
}

/* ==========================================================
   El monedero
   ========================================================== */

.rd-purse {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-5);
	flex-wrap: wrap;
	padding: var(--rd-space-5);
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-lg);
}

.rd-purse__main {
	display: flex;
	align-items: center;
	gap: var(--rd-space-4);
}

.rd-purse__n {
	margin: 0;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--rd-primary);
	font-variant-numeric: tabular-nums;
}

.rd-purse__label {
	margin: 4px 0 0;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
}

.rd-purse__detail {
	display: flex;
	gap: var(--rd-space-5);
	margin: 0;
}

.rd-purse__detail dt {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rd-purse__detail dd {
	margin: 2px 0 0;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: var(--rd-ink);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================
   La barra de secciones
   ========================================================== */

.rd-shop__tabs {
	display: flex;
	gap: var(--rd-space-2);
	overflow-x: auto;
	padding-bottom: var(--rd-space-2);
	scrollbar-width: none;
}

.rd-shop__tabs::-webkit-scrollbar {
	display: none;
}

.rd-shop__tab {
	flex-shrink: 0;
	padding: 9px var(--rd-space-4);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-pill);
	background: var(--rd-surface);
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--rd-transition), color var(--rd-transition), border-color var(--rd-transition);
}

.rd-shop__tab:hover {
	border-color: var(--rd-primary);
	color: var(--rd-primary);
}

.rd-shop__tab.is-active {
	background: var(--rd-primary);
	border-color: var(--rd-primary);
	color: var(--rd-surface);
}

/* ==========================================================
   El escaparate
   ========================================================== */

.rd-shop__shelf {
	min-height: 200px;
}

.rd-shop__hint {
	margin: 0 0 var(--rd-space-4);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
	line-height: var(--rd-leading-normal);
}

.rd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--rd-space-4);
}

.rd-item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	background: var(--rd-surface);
	overflow: hidden;
}

.rd-item.is-on {
	border-color: var(--rd-primary);
}

.rd-item__preview {
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rd-space-2);
	background: var(--rd-surface-alt);
	padding: var(--rd-space-3);
}

.rd-item__preview--faces .rd-face {
	/* Más grandes de lo que estaban: en una muestra que se mira para
	   decidir, hay que poder ver el gesto sin acercarse. */
	width: 46px;
	height: 46px;
}

/* Las cuatro muestras de una paleta, sobre su propio fondo. */
.rd-item__preview--palette span {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: block;
}

/* El fondo se enseña tal cual se verá, con su dibujo. */
.rd-item__preview--bg {
	background-color: var(--rd-bg);
}

/*
 * El pie: texto arriba, botones abajo.
 *
 * Estaban en la misma fila, el texto a la izquierda y los botones a la
 * derecha. Con descripciones largas y un botón ancho —«Probar» más el
 * precio— al texto le quedaban tres palabras por línea y la tarjeta se
 * estiraba hasta el doble que sus vecinas.
 *
 * En dos filas, el texto tiene todo el ancho y los botones también.
 * Todas las tarjetas miden parecido y ninguna se dispara.
 */
.rd-item__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--rd-space-2);
	padding: var(--rd-space-3);
	flex: 1;
}

/* El texto se queda con el alto que sobre, así los botones de todas
   las tarjetas de una fila quedan a la misma altura. */
.rd-item__text {
	flex: 1;
}

/* Los botones, en su fila y alineados a la derecha. */
.rd-item__foot > .rd-item__acciones,
.rd-item__foot > form,
.rd-item__foot > .rd-item__on {
	align-self: flex-end;
}

.rd-item__text {
	min-width: 0;
}

.rd-item__name {
	margin: 0;
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink);
}

.rd-item__hint {
	margin: 2px 0 0;
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	line-height: 1.35;
}

.rd-item__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	padding: 7px var(--rd-space-3);
	border: 1px solid var(--rd-primary);
	border-radius: var(--rd-radius-pill);
	background: var(--rd-primary);
	color: var(--rd-surface);
	font-family: inherit;
	font-size: var(--rd-size-xs);
	font-weight: 700;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

/* Lo que ya es tuyo se ve distinto de lo que hay que pagar: si los dos
   botones fueran iguales, se compraría dos veces por error. */
.rd-item__btn.is-owned {
	background: none;
	color: var(--rd-primary);
}

.rd-item__on {
	flex-shrink: 0;
	padding: 7px var(--rd-space-3);
	border-radius: var(--rd-radius-pill);
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
	font-size: var(--rd-size-xs);
	font-weight: 700;
}

/* ==========================================================
   Reds y merchandising
   ========================================================== */

.rd-reds {
	text-align: center;
	padding: var(--rd-space-6) var(--rd-space-4);
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
}

.rd-reds__n {
	margin: 0;
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: 3rem;
	line-height: 1;
	color: var(--rd-primary);
}

.rd-reds__label {
	margin: 6px 0 var(--rd-space-4);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
}

/* El recuadro de «todavía no hay».

   Colores del tema, no fijos: antes el texto iba en blanco porque
   estaba sobre una foto oscurecida, y sin foto el blanco sobre un tema
   claro no se lee. Con las variables del tema funciona en los seis sin
   una regla por cada uno. */
.rd-shop__soon {
	max-width: 520px;
	margin: var(--rd-space-5) auto;
	padding: var(--rd-space-6) var(--rd-space-5);
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-lg);
	text-align: center;
}

.rd-shop__soon h2 {
	margin: 0 0 var(--rd-space-2);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: var(--rd-ink);
}

.rd-shop__soon-titulo {
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-lg);
	color: var(--rd-ink);
}

.rd-shop__soon p {
	margin: 0 0 6px;
	font-size: var(--rd-size-base);
	line-height: 1.4;
	color: var(--rd-ink-soft);
}

.rd-shop__soon p:last-child {
	margin-bottom: 0;
}

@media (max-width: 599px) {
	.rd-purse {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--rd-space-4);
	}

	.rd-purse__detail {
		width: 100%;
		justify-content: space-between;
	}
}

/* --- Probar antes de comprar --- */

.rd-item__probar {
	display: block;
	text-align: center;
	padding: 8px;
	font-size: var(--rd-size-xs);
	font-weight: 600;
	color: var(--rd-ink-soft);
	text-decoration: none;
	border-top: 1px solid var(--rd-border);
}

.rd-item__probar:hover {
	color: var(--rd-primary);
}

/* El aviso de que lo que se ve no está guardado. Va arriba del todo
   porque la pantalla entera cambia de aspecto y sin él da un susto. */
.rd-probando {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--rd-space-4);
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-badge-bg);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
}

.rd-probando a {
	color: var(--rd-primary);
	font-weight: 600;
	white-space: nowrap;
}

/* Con qué caritas se ven las paletas. */
.rd-shop__con {
	display: flex;
	align-items: center;
	gap: var(--rd-space-2);
	flex-wrap: wrap;
	margin: 0 0 var(--rd-space-4);
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
}

.rd-shop__con a {
	padding: 4px var(--rd-space-3);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-pill);
	color: var(--rd-ink-soft);
	text-decoration: none;
}

.rd-shop__con a.is-on {
	border-color: var(--rd-primary);
	background: var(--rd-badge-bg);
	color: var(--rd-primary);
	font-weight: 600;
}

/* --- Paletas: solo los cinco colores --- */

.rd-item__preview--dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rd-space-2);
	padding: 0 var(--rd-space-3);
	width: 100%;
}

.rd-item__preview--dots span {
	/* Se encogen si hace falta en vez de salirse de la tarjeta. Con un
	   tamaño fijo, cinco círculos no cabían en una columna estrecha y
	   los de los extremos quedaban cortados por el borde. */
	flex: 1 1 0;
	min-width: 0;
	max-width: 46px;
	aspect-ratio: 1;
	border-radius: 50%;
	/* Un aro tenue: sin él, el color más claro de una paleta se pierde
	   contra el fondo de la muestra. */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}

/* --- Reds: las frases del perfil, una a una --- */

.rd-reds {
	display: flex;
	flex-direction: column;
	gap: var(--rd-space-2);
}

/* En lista y no en rejilla: lo que se lee aquí es el texto de la frase,
   y en una tarjeta cuadrada se cortaría o quedaría diminuto. */
.rd-red {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-space-3);
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
}

.rd-red__texto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	/* Que ocupe el hueco que sobra y se alinee a la izquierda: si no,
	   queda centrado entre el dibujo y el precio y se lee peor. */
	flex: 1;
	min-width: 0;
	text-align: left;
}

.rd-red__texto strong {
	font-size: var(--rd-size-base);
	color: var(--rd-ink);
	font-weight: 600;
}

.rd-red__texto span {
	font-size: var(--rd-size-xs);
	color: var(--rd-ink-muted);
	line-height: 1.4;
}

.rd-shop__vacio {
	padding: var(--rd-space-5);
	text-align: center;
	color: var(--rd-ink-soft);
	font-size: var(--rd-size-sm);
	background: var(--rd-surface);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	margin-bottom: var(--rd-space-3);
}

.rd-shop__vacio p {
	margin: 0;
}

/* El dibujo de la red no reserva caja.

   Esta regla era de cuando el dibujo iba en su propia columna: le daba
   una caja fija de 34 píxeles. Al meterlo dentro del título, esa caja
   se quedó ahí reservando un hueco muy por encima de lo que ocupa el
   dibujo, y de ahí el espacio vacío entre el icono y la primera
   palabra.

   Ahora ocupa lo que ocupa y el margen lo pone la regla de abajo. */
.rd-red__icono .rd-icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* ==========================================================
   La moneda, girando
   ==========================================================
   Dos caras separadas por su grosor y un canto de tiras alrededor, así
   que al girar se ve el borde estriado como en una moneda de verdad.
   Un dibujo plano dando la vuelta desaparece al llegar de perfil.
   ========================================================== */

.rd-coin3d {
	display: inline-block;
	position: relative;
	flex-shrink: 0;
	/* La perspectiva va aquí: sin ella el giro se ve como un
	   aplastamiento y no como una vuelta. */
	perspective: 620px;
	vertical-align: middle;
}

.rd-coin3d__giro {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	animation: rd-girar-moneda 7s linear infinite;
	will-change: transform;
}

@keyframes rd-girar-moneda {
	from { transform: rotateY(0); }
	to   { transform: rotateY(360deg); }
}

.rd-coin3d__cara {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.rd-coin3d__aro {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

/* Cada tira del canto: va en el centro y desde ahí se gira y se empuja
   hasta el borde. */
.rd-coin3d__canto {
	position: absolute;
	top: 50%;
	left: 50%;
	background-size: 100% 100%;
	backface-visibility: hidden;
}

/* --- Las monedas del camino de patitas ---

   Tres estados y tres movimientos, y la diferencia entre ellos tiene
   que verse de lejos:

   - Por conseguir: giran despacio sobre sí mismas. Están ahí, esperando.
   - Ganada sin recoger: salta, rápido y corto. Pide que la pulses.
   - Ya recogida: quieta y de frente. Ya es tuya, no tiene que llamar.

   Girar y saltar son movimientos de eje distinto a propósito: uno va
   en horizontal y otro en vertical, así que se distinguen aunque se
   miren de reojo mientras se arrastra el camino. */
.rd-path__coin .rd-coin3d__giro {
	animation: none;
}

/* Las que faltan por conseguir. Solo giran mientras se ven, que de eso
   se encarga el guion: hay dos caminos de sesenta casillas y girarlas
   todas a la vez son varios cientos de cosas moviéndose en un móvil. */
.rd-path__step.is-todo.gira .rd-path__coin .rd-coin3d__giro {
	animation: rd-girar-moneda 10s linear infinite;
}

.rd-path__step:nth-child(6n + 1) .rd-path__coin .rd-coin3d__giro {
	animation-delay: -1.4s;
}

.rd-path__step:nth-child(6n + 2) .rd-path__coin .rd-coin3d__giro {
	animation-delay: -4.1s;
}

.rd-path__step:nth-child(6n + 3) .rd-path__coin .rd-coin3d__giro {
	animation-delay: -6.8s;
}

.rd-path__step:nth-child(6n + 4) .rd-path__coin .rd-coin3d__giro {
	animation-delay: -2.7s;
}

.rd-path__step:nth-child(6n + 5) .rd-path__coin .rd-coin3d__giro {
	animation-delay: -8.2s;
}

/* La ganada que espera a que la recojas: salta.

   El salto va en la moneda entera, no en la cara que gira, para que no
   se mezclen los dos movimientos. Y va con sombra debajo, que es lo que
   hace que un salto parezca un salto y no un elemento que sube y baja. */
.rd-path__step.is-pendiente {
	cursor: pointer;
}

.rd-path__step.is-pendiente .rd-path__coin {
	opacity: 1;
	filter: none;
	animation: rd-saltar-moneda 0.62s cubic-bezier(.3, .7, .4, 1) infinite;
}

@keyframes rd-saltar-moneda {
	0%,
	100% {
		transform: translateY(0) scaleY(1);
	}

	18% {
		/* Un aplastado antes de despegar. Sin él, el salto se ve
		   mecánico: las cosas que saltan se encogen para tomar impulso. */
		transform: translateY(0) scaleY(0.86);
	}

	50% {
		transform: translateY(-14px) scaleY(1.04);
	}

	78% {
		transform: translateY(0) scaleY(0.92);
	}
}

/* La ya recogida: quieta, de frente y a plena luz. */
.rd-path__step.is-done:not(.is-pendiente) .rd-path__coin {
	opacity: 1;
	filter: none;
}

/* Y el instante de recogerla: un destello y se apaga el salto. */
.rd-path__step.is-recogida .rd-path__coin {
	animation: rd-recoger-moneda 0.5s ease-out;
}

@keyframes rd-recoger-moneda {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.35);
		filter: brightness(1.5);
	}

	100% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rd-path__step.is-pendiente .rd-path__coin,
	.rd-path__step.is-recogida .rd-path__coin,
	.rd-path__step .rd-coin3d__giro {
		animation: none;
	}

	/* Sin movimiento, la que espera se marca con un aro coral: la
	   información no se puede perder por quitar la animación. */
	.rd-path__step.is-pendiente .rd-path__coin {
		box-shadow: 0 0 0 3px var(--rd-primary);
		border-radius: 50%;
	}
}


@media (prefers-reduced-motion: reduce) {
	.rd-coin3d__giro {
		animation: none;
	}
}

/* --- El precio de cada red, al lado ---

   Antes iba dentro del botón, y ahí se lee como parte de la acción en
   vez de como lo que cuesta la frase. Fuera, en su propia columna, se
   puede recorrer la lista de arriba abajo viendo precios sin tener que
   entrar en cada botón. */
.rd-red__precio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
	font-size: var(--rd-size-base);
	color: var(--rd-ink);
	font-variant-numeric: tabular-nums;
}

/* Las gratuitas, en el coral de la marca: es lo único de esta pantalla
   que no cuesta nada y conviene que se distinga de un vistazo. */
.rd-red__gratis {
	color: var(--rd-primary);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: var(--rd-size-sm);
}

/* El recordatorio de cuántas gratis quedan. */
.rd-shop__gratis {
	margin: 0 0 var(--rd-space-4);
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-badge-bg);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-sm);
	color: var(--rd-ink);
}

@media (max-width: 599px) {
	/* En móvil la fila se parte: el texto arriba, y el precio con el
	   botón abajo. Con las cuatro cosas en línea, la frase se queda en
	   una columna de dos palabras de ancho. */
	.rd-red {
		flex-wrap: wrap;
	}

	.rd-red__texto {
		flex: 1 1 100%;
	}

	.rd-red__precio {
		margin-left: 0;
	}
}

/* --- «Probar» y «Comprar», uno al lado del otro ---

   El de probar es el discreto y el de comprar el que pesa: probar no
   cuesta nada y comprar sí, y el aspecto de cada botón tiene que decir
   eso antes de leer la palabra. */
.rd-item__probar {
	display: inline-block;
	margin-top: var(--rd-space-2);
	padding: 7px 16px;
	border: 1px solid var(--rd-border-strong);
	border-radius: var(--rd-radius-pill);
	background: transparent;
	font-size: var(--rd-size-sm);
	color: var(--rd-ink-soft);
	text-decoration: none;
}

.rd-item__probar:hover,
.rd-item__probar:focus-visible {
	border-color: var(--rd-primary);
	color: var(--rd-primary);
}

/* --- El precio cuando no llega el saldo ---

   No es un botón de compra: es un aviso que se abre. Se ve apagado a
   propósito, para que se note antes de pulsarlo que ahí no se compra
   todavía. */
.rd-item__corto {
	position: relative;
}

.rd-item__corto summary {
	list-style: none;
	cursor: pointer;
}

.rd-item__corto summary::-webkit-details-marker {
	display: none;
}

.rd-item__btn.is-corto {
	opacity: 0.62;
	border: 1px dashed var(--rd-border-strong);
	background: transparent;
	color: var(--rd-ink-soft);
}

.rd-item__corto[open] .rd-item__btn.is-corto {
	opacity: 1;
	border-color: var(--rd-primary);
	color: var(--rd-primary);
}

.rd-item__cartel {
	margin-top: var(--rd-space-2);
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-surface-alt);
	border: 1px solid var(--rd-border);
	border-radius: var(--rd-radius-md);
	text-align: left;
}

.rd-item__cartel-titulo {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: var(--rd-size-sm);
	color: var(--rd-primary);
}

.rd-item__cartel-texto {
	margin: 0;
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
}

/* Los dos botones de la tarjeta, en línea. */
.rd-item__acciones {
	display: flex;
	align-items: center;
	gap: var(--rd-space-2);
	flex-shrink: 0;
}

.rd-item__acciones .rd-item__probar {
	margin-top: 0;
}

/* Dentro del cartel de «te faltan», el de probar va suelto y centrado:
   ahí no hay botón de comprar al lado con el que alinearse. */
.rd-item__cartel + .rd-item__probar,
.rd-item__corto .rd-item__probar {
	display: block;
	width: fit-content;
	margin: var(--rd-space-3) auto 0;
}

@media (max-width: 599px) {
	/* En móvil, uno encima del otro: en línea, «Probar» y el precio
	   dejan la tarjeta sin sitio para el nombre. */
	.rd-item__acciones {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.rd-item__acciones .rd-item__probar {
		text-align: center;
	}
}

/* --- Las monedas del precio, quietas ---

   Las de la tienda no giran. Girar es lo que hace la del monedero y lo
   que hacen las del camino que faltan por conseguir: ahí el movimiento
   significa algo. En un precio no significa nada, y una lista con seis
   monedas girando a la vez marea.

   La regla va con doble clase para que gane a la animación general de
   la moneda, que está en otro archivo. */
.rd-red__precio .rd-coin3d__giro,
.rd-item__btn .rd-coin3d__giro {
	animation: none;
}

/* Y a su tamaño, sin que el botón las apriete. */
.rd-red__precio .rd-coin,
.rd-item__btn .rd-coin {
	flex-shrink: 0;
}

/* --- El dibujo, dentro del título ---

   Va como parte de la primera línea, no como columna aparte. Con
   columna propia, el texto se queda en una franja estrecha a su derecha
   y el título se parte en tres renglones. */
.rd-red__icono {
	display: inline-flex;
	vertical-align: -3px;
	/* Cuatro píxeles: el espacio de un carácter, ni más. El dibujo y la
	   primera palabra son la misma frase. */
	margin-right: 4px;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.rd-red__icono .rd-icon {
	width: 20px;
	height: 20px;
}

/* El precio pegado al botón, no en el extremo contrario.

   Lo que cuesta y lo que se pulsa para pagarlo son la misma decisión.
   Separados por medio ancho de pantalla, hay que mirar dos sitios para
   entender una sola cosa. */
.rd-red__pie {
	display: flex;
	align-items: center;
	gap: var(--rd-space-3);
	flex-shrink: 0;
}

.rd-red__pie .rd-red__precio {
	margin-left: 0;
}

@media (max-width: 599px) {
	/* En móvil el texto ocupa la fila y el precio con el botón caen
	   debajo, a la derecha. En línea no caben sin que el título se
	   parta en tres. */
	.rd-red {
		flex-wrap: wrap;
		gap: var(--rd-space-2);
	}

	.rd-red__texto {
		flex: 1 1 100%;
	}

	.rd-red__pie {
		margin-left: auto;
	}

	/* En móvil el dibujo encoge y se pega aún más: cada píxel de
	   ancho cuenta para que el título no se parta. */
	.rd-red__icono {
		width: 18px;
		height: 18px;
		margin-right: 3px;
		vertical-align: -2px;
	}

	.rd-red__texto strong {
		font-size: var(--rd-size-sm);
		line-height: var(--rd-leading-snug);
	}
}

@media (min-width: 900px) {
	/* --- La moneda del precio, más grande en el ordenador ---

	   Se agranda con «scale» y no cambiando el ancho. La moneda está
	   hecha de dos caras y un canto de tiras colocadas en el espacio a
	   una distancia calculada para su tamaño: al cambiarle solo el
	   ancho, las caras crecen y el canto se queda donde estaba, y
	   aparecen arcos sueltos alrededor.

	   El tamaño base se queda en 26 porque es el bueno para el móvil,
	   donde el sitio es el que es. Aquí sobra ancho. */
	.rd-red__precio .rd-coin--tiny,
	.rd-item__btn .rd-coin--tiny {
		transform: scale(1.4);
		transform-origin: center;
		/* El escalado no ocupa sitio real, así que se le reserva a mano
		   o se monta encima del número. */
		margin: 0 7px;
	}
}

/* La segunda fila de filtros del armario: más pequeña que la primera,
   para que se lea como lo que es —un filtro dentro de una sección— y no
   como otra sección al mismo nivel. */
.rd-shop__tabs--cajones {
	margin-top: calc(var(--rd-space-3) * -1);
	margin-bottom: var(--rd-space-4);
}

.rd-shop__tabs--cajones .rd-shop__tab {
	padding: 5px var(--rd-space-3);
	font-size: var(--rd-size-xs);
}

.rd-shop__vacio {
	margin: 0;
	padding: var(--rd-space-6) var(--rd-space-4);
	text-align: center;
	font-size: var(--rd-size-sm);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-muted);
}

/* --- La comida ---

   La misma tarjeta que los temas, con el dibujo donde ellos llevan la
   muestra de color. El fondo es el segundo tono del tema para que el
   recorte del dibujo no flote sobre el blanco. */
/* La casilla del dibujo, más alta que la de los colores.

   Un color se entiende en una franja de dos centímetros; una hoja de
   bambú necesita verse. Y es lo que hace que apetezca comprarla, así
   que se gana el alto. */
.rd-item__preview--comida {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 172px;
	padding: var(--rd-space-2);
	background: var(--rd-surface-alt);
}

.rd-item__preview--comida img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* Cuántas quedan, en una chapa sobre el dibujo. La comida se gasta, así
   que lo que importa no es si es tuya sino cuánta queda. */
.rd-item__cuantos {
	position: absolute;
	top: 8px;
	right: 8px;
	min-width: 26px;
	padding: 2px 7px;
	border-radius: var(--rd-radius-pill);
	background: var(--rd-primary);
	color: #fff;
	font-size: var(--rd-size-xs);
	font-weight: 700;
	text-align: center;
}

/* --- Los cofres ---

   La foto manda: es un cofre lleno de oro y es lo que hace que apetezca
   abrirlo. Va sin fondo de color, sobre el de la tarjeta, porque el
   recorte ya tiene su propio brillo. */
.rd-item__preview--cofre {
	height: 190px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--rd-space-2);
	background: none;
}

.rd-item__preview--cofre img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}


.rd-item--cofre .rd-item__label,
.rd-item--cofre .rd-item__hint {
	text-align: center;
}

/* El pie del cofre, con su relleno.

   El botón se salía por los lados porque el pie de las tarjetas de
   cofre no tenía relleno propio: el de las demás secciones lo pone la
   función que las pinta, y estas no pasan por ahí. */
.rd-item--cofre .rd-item__pie {
	padding: 0 var(--rd-space-4) var(--rd-space-4);
}

/* El botón lleva fuera de la web, a la pasarela: es un enlace y no un
   formulario, así que necesita sus propias medidas. */
.rd-item--cofre .rd-item__btn {
	display: block;
	width: 100%;
	margin-top: var(--rd-space-3);
	padding: 11px var(--rd-space-3);
	text-align: center;
	text-decoration: none;
	/* Que quepa «Comprar por 1,50 €» sin partirse en dos líneas. */
	white-space: nowrap;
	font-size: var(--rd-size-sm);
}

/* La nota de que todo se consigue también sin pagar. Va arriba y en
   pequeño: tiene que estar, y no tiene que gritar. */
.rd-shop__nota {
	margin: 0 0 var(--rd-space-4);
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-surface-alt);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-xs);
	line-height: var(--rd-leading-normal);
	color: var(--rd-ink-soft);
	text-align: center;
}

/* El lienzo del confeti: encima de todo y sin estorbar.

   «pointer-events: none» es lo importante: sin eso, el lienzo cubre la
   pantalla y no se puede pulsar nada mientras cae el confeti. */
.rd-confeti {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}

/* El gracias de después de pagar. En coral y centrado: es lo primero
   que se lee al volver. */
.rd-shop__gracias {
	margin: 0 0 var(--rd-space-4);
	padding: var(--rd-space-3) var(--rd-space-4);
	background: var(--rd-badge-bg);
	border: 1px solid var(--rd-primary);
	border-radius: var(--rd-radius-md);
	font-size: var(--rd-size-sm);
	font-weight: 600;
	color: var(--rd-ink);
	text-align: center;
}

/* El título de la tienda. Mismo tratamiento que los de las demás
   pantallas, para que se lean como la misma familia. */
.rd-shop__title {
	margin: 0 0 var(--rd-space-4);
	font-family: var(--rd-font-display);
	font-weight: var(--rd-weight-display);
	font-size: var(--rd-size-xl);
	color: var(--rd-ink);
}

/* --- Todas las muestras, del mismo alto ---

   Las caritas medían 96 píxeles, los fondos 140 y los cofres 190, así
   que las tarjetas empezaban a alturas distintas según la sección y
   parecían de familias diferentes.

   Con la misma medida, la tienda entera se lee como una sola cosa. */
.rd-item__preview,
.rd-item__preview--comida,
.rd-item__preview--cofre {
	height: 104px;
	flex-shrink: 0;
}

/* Y las tarjetas de una misma fila, de igual alto: la rejilla las
   estira, y con el texto ocupando lo que sobra los botones quedan
   alineados aunque las descripciones midan distinto. */
.rd-grid > .rd-item {
	height: 100%;
}

/* --- Tarjetas más bajas ---

   Ocupaban demasiado y con pocas cabía toda la pantalla. Se recorta por
   donde sobra —el aire, no el contenido—: menos alto de muestra, menos
   relleno y la descripción a dos líneas.

   La descripción es lo que más variaba de una tarjeta a otra, y
   recortarla a dos líneas es lo que hace que todas midan casi igual. */
.rd-item__hint {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
}

.rd-item__name {
	line-height: 1.25;
}

/* Los botones, algo más bajos: eran de tamaño de botón principal y
   estos son de tarjeta. */
.rd-item__btn,
.rd-item__probar {
	padding: 7px var(--rd-space-3);
	font-size: var(--rd-size-xs);
}

/* Y las columnas, un pelo más estrechas: entran más por fila y la
   pantalla se recorre de una vez. */
.rd-grid {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--rd-space-3);
}

/* La muestra de la comida y del cofre llenan su caja, que ahora es más
   baja: sin esto el dibujo se quedaría pequeño en medio. */
.rd-item__preview--comida img,
.rd-item__preview--cofre img {
	max-height: 100%;
}

/* El cartel de bloqueado por nivel.

   Va donde estaban el precio y «Probar», en gris y sin borde: tiene que
   informar, no invitar a pulsarlo, porque no se puede pulsar. */
/* El cartel, centrado y a todo el ancho.

   Estaba alineado a la derecha, como los botones de comprar, y por eso
   se veía ladeado: un botón a la derecha se lee como algo que se pulsa,
   pero esto es un aviso y su sitio es el centro. */
.rd-item__nivel {
	align-self: stretch;
	display: block;
	padding: 7px var(--rd-space-3);
	border-radius: var(--rd-radius-pill);
	background: var(--rd-surface-alt);
	border: 1px dashed var(--rd-border-strong);
	font-size: var(--rd-size-xs);
	font-weight: 600;
	color: var(--rd-ink-muted);
	text-align: center;
	white-space: nowrap;
}

/* --- La muestra de lo que aún no puedes: oscurecida ---

   Alba: «que se pueda intuir el color pero que no se vea claramente».

   AQUÍ HABÍA UN «opacity: .55», y hacía justo lo contrario de lo que
   ella pide. La transparencia no oscurece: mezcla con lo que hay
   debajo, y debajo está la tarjeta, que de día es casi blanca. O sea
   que el producto bloqueado salía MÁS CLARO que el que sí puedes
   comprar —desteñido, no apagado—, y encima el dibujo se seguía viendo
   entero porque bajar la opacidad no junta el dibujo con su fondo, los
   aclara los dos a la vez. Medido en la tienda con Foco: la muestra
   quedaba en #dad3c8 contra la tarjeta en #e7e3e3, o sea 1,17:1, y
   dentro se distinguía el dibujo a 2,85:1.

   AHORA ES UN VELO OSCURO ENCIMA, que es lo que sí oscurece. Va en un
   «::after» de la propia muestra y no en un filtro para que valga igual
   con las cinco clases de muestra que hay —caritas, paletas, temas,
   comida y cofres—, sin tener que saber de qué está hecha cada una.

   Un velo hace las dos cosas que hacía falta hacer, y por eso se elige
   este apaño y no un «filter: brightness()»: baja el brillo Y ACERCA
   ENTRE SÍ los tonos que tiene debajo, así que el ojo de una carita
   deja de despegarse de su mejilla. Un «brightness» oscurece pero
   mantiene las distancias entre colores, y el dibujo se sigue leyendo
   igual de bien, solo que más oscuro.

   MEDIDO, en la tienda a 1440, con las tres secciones que tienen cosas
   bloqueadas y con las transiciones paradas:

                    la muestra contra su tarjeta     el dibujo por dentro
     Caritas        1,17:1  →  5,15:1                2,85:1  →  2,46:1
     Paletas        1,18:1  →  5,22:1                1,94:1  →  1,82:1
     Temas          1,02:1  →  4,57:1                1,12:1  →  1,10:1

   O sea: la muestra pasa de confundirse con su tarjeta —1,17:1 es no
   verse— a separarse de ella con holgura, que es lo que pedía el
   encargo para que no parezca un hueco vacío; y el dibujo de dentro
   baja, que es lo que pedía Alba. Los dos números van en direcciones
   contrarias a propósito.

   EL COLOR DEL VELO NO ES NEGRO PURO sino el marrón oscurísimo de la
   tinta de Reddie. Sobre negro las caritas se vuelven grises sucias y
   se pierde justo lo que Alba quiere que quede, el color; sobre este
   marrón, el amarillo sigue leyéndose amarillo y el verde verde,
   apagados. Es la misma familia de color que usa toda la aplicación. */
.rd-item:has(.rd-item__nivel) .rd-item__preview {
	position: relative;
}

.rd-item:has(.rd-item__nivel) .rd-item__preview::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Absoluto también lo saca de la fila de la muestra, que es un
	   «flex»: dentro de la fila sería una casilla más y correría las
	   caritas hacia un lado. */
	pointer-events: none;
	background: rgba(26, 18, 12, .65);
}

/* --- Y de noche, otro velo ---

   De noche la tarjeta ya es oscura, así que oscurecer la muestra es
   acercarla a la tarjeta en vez de separarla de ella. Con el velo
   marrón del día puesto en Calma, medido: las caritas se quedaban a
   1,15:1 de su tarjeta y las paletas a 1,13:1, o sea encima de ella;
   ese es el hueco vacío que había que evitar.

   Así que de noche el velo es de azul casi negro, no de marrón —el
   marrón ensucia el azul de Calma—, y un pelín más fuerte. Medido con
   Calma:

                    la muestra contra su tarjeta     el dibujo por dentro
     Caritas        1,39:1  →  1,33:1                3,06:1  →  1,81:1
     Paletas        1,42:1  →  1,31:1                2,15:1  →  1,54:1
     Temas          3,34:1  →  1,28:1                1,16:1  →  1,10:1

   AQUÍ LA MUESTRA NO GANA SEPARACIÓN, y conviene decirlo claro en vez
   de esconderlo: se queda donde estaba, entre 1,28 y 1,33, mientras el
   dibujo sí baja. No es dejadez, es que las dos cosas tiran en
   direcciones contrarias y no se pueden tener las dos: cuanto más se
   hunde el dibujo, más se acerca el bloque a su tarjeta.

   Y no se puede apretar más. Probado a .78, la muestra de un tema cae a
   1,01:1 de su tarjeta —desaparece del todo— porque de camino hacia
   abajo pasa justo por el brillo de la tarjeta; y a .85, cuando vuelve
   a salir por debajo, ya solo queda 1,06:1 de dibujo por dentro, o sea
   ni dibujo ni color. Este .7 es el punto en que el dibujo ya no se lee
   y el bloque todavía se ve.

   Se cuelga de «body.rd-oscuro», que es la marca que le pone el tema, y
   no de «prefers-color-scheme»: aquí la noche es una decisión de Alba
   dentro de la aplicación, no la del sistema. */
body.rd-oscuro .rd-item:has(.rd-item__nivel) .rd-item__preview::after {
	/*
	 * DE NOCHE EL VELO TIENE QUE SER MÁS FLOJO, NO MÁS FUERTE.
	 *
	 * Iba al 70 % y sobre una tarjeta ya oscura eso no oscurece: BORRA.
	 * Medido contra la tarjeta de noche, el producto velado se quedaba
	 * entre 1,01 y 1,09 —o sea, el mismo color que el fondo— y la
	 * casilla se leía como un hueco vacío, no como algo que todavía no
	 * se puede comprar.
	 *
	 * Alba lo pidió así: «que se pueda intuir el color pero que no se
	 * vea claramente». Intuir el color pide que quede color, y de día
	 * eso se consigue oscureciendo porque la tarjeta es clara. De noche
	 * es al revés: cuanto más se oscurece, antes desaparece.
	 *
	 * Al 35 % queda entre 2,13 y 3,01 según el producto: se ve que hay
	 * algo y de qué color es, y no se distingue el dibujo. El de día se
	 * queda como está, que ahí sí funcionaba.
	 */
	background: rgba(6, 10, 22, .35);
}

/* --- Los productos que aún no están a tu alcance ---

   Una capa gris suave por encima de la tarjeta ENTERA —nombre,
   descripción y cartel incluidos—. Lo justo para que se lea como
   «todavía no», sin llegar a esconder nada: la gracia de enseñarlo es
   que se vea qué te espera.

   NO CONFUNDIR CON EL VELO DE AQUÍ ARRIBA, que son dos capas distintas
   y hacen dos cosas distintas: aquella es fuerte y va SOLO sobre la
   muestra, que es lo que Alba quiere que no se vea; esta es suave y va
   sobre la tarjeta entera, que es lo que dice «esto todavía no».

   Y ESTA NO SE TOCA sin volver a medir la tienda de noche. El plugin
   cuenta con ella: en «class-reddie-backgrounds.php», el tono de
   «--rd-ink-muted» de Calma está subido al 78 % precisamente porque
   este velo enciende la tarjeta de noche y el recuadro del cartel se va
   a (81, 95, 125). Cambiar el 16 % de aquí mueve aquel número. Medido
   ahora mismo, el cartel se lee a 5,52:1 de día y a 4,70:1 de noche,
   por encima del 4,5 que pide un texto pequeño.

   Va con «:has», que permite cambiar la tarjeta según lo que lleve
   dentro sin tener que marcar el marcado con otra clase. */
.rd-item:has(.rd-item__nivel) {
	position: relative;
}

.rd-item:has(.rd-item__nivel)::after {
	content: "";
	position: absolute;
	inset: 0;
	/* No responde a los toques: si respondiera, taparía el cartel y no
	   se podría ni seleccionar el texto. */
	pointer-events: none;
	background: rgba(120, 124, 132, .16);
	border-radius: inherit;
}

/* El cartel se queda por encima de la capa, que si no lo apaga
   justo a él, que es lo único que hay que leer. */
.rd-item__nivel {
	position: relative;
	z-index: 1;
}

/* --- Los cofres, separados del borde de arriba ---

   Iban pegados al borde superior de la tarjeta porque su casilla no
   tenía relleno arriba: los demás productos llevan una muestra de color
   que llega al borde a propósito, y un cofre no. */
.rd-item__preview--cofre {
	padding-top: var(--rd-space-4);
}

/* --- La moneda que vuela al comprar ---

   Sale del monedero y va al precio del producto. El dibujo es el mismo
   de la moneda de los avisos, así que se reconoce al vuelo.

   Va sobre el cuerpo de la página y no dentro de la tarjeta: tiene que
   cruzar toda la pantalla, y dentro de la tarjeta se recortaría en su
   borde. */
.rd-moneda-vuela {
	position: fixed;
	z-index: 9999;
	width: 28px;
	height: 28px;
	pointer-events: none;
	background-image: url('../img/reddie-moneda-cara.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	/* Sale rápido y llega frenando, como algo que se posa. */
	transition: transform .75s cubic-bezier(.34, .8, .3, 1), opacity .75s ease-in;
	will-change: transform, opacity;
}