/* 04 · Tienda — «La bandeja del estuche» (1.11.7). Solo en la portada, después de home.css.
   La bandeja es el interior del estuche de lentes de prueba de la película, sacado y puesto sobre la mesa: una bandeja de
   terciopelo negro con un pocillo por pieza y una placa de latón con sus datos. Materiales de la película: terciopelo, latón
   pulido (el tono del cierre, #b8925a) y el rojo del aro de la lente. Sin colores nuevos fuera de esos y de los tokens del tema.
   Sin JavaScript: los dos paneles se ven apilados, cada uno con su rótulo (h3). tienda.js añade .tray--tabs y los convierte en pestañas. */

.store--tray { max-width: none; }
.store > .tray { grid-column: 1 / -1; }

.tray { position: relative; min-width: 0; padding-top: clamp(18px, 2.6vw, 28px); display: grid; gap: 16px; }
/* La junta: el borde de la tapa del estuche, una línea de latón de 1 px que cruza el panel bajo la película. */
.tray::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(184, 146, 90, 0.5) 10%, rgba(184, 146, 90, 0.5) 90%, transparent);
	pointer-events: none;
}

/* Pestañas (solo con JS y con los dos tipos): píldoras con forma de aro de lente. */
.tray__tabs { display: none; flex-wrap: wrap; gap: 8px; }
.tray--tabs .tray__tabs { display: flex; }
.tray__tab {
	appearance: none; -webkit-appearance: none;
	display: inline-flex; align-items: center; gap: 9px;
	min-height: 40px; padding: 0 18px 0 13px;
	border: 1px solid rgba(184, 146, 90, 0.5); border-radius: 999px;
	background: transparent; color: #e6d6b8;
	font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1;
	cursor: pointer;
	transition: background-color var(--t-response) var(--ease), border-color var(--t-response) var(--ease), color var(--t-response) var(--ease);
}
.tray__tab::before {
	content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%;
	border: 1px solid #b8925a; box-sizing: border-box;
	transition: border-color var(--t-response) var(--ease), background-color var(--t-response) var(--ease);
}
.tray__tab:hover { border-color: rgba(184, 146, 90, 0.85); color: #f6f0e4; }
.tray__tab[aria-selected="true"] { background: #1b150d; border-color: #b8925a; color: #f6f0e4; }
.tray__tab[aria-selected="true"]::before { border-color: var(--red); background: radial-gradient(circle, var(--red) 0 36%, transparent 40%); }
.tray__tab:focus-visible { border-radius: 999px; }

/* Paneles. Apilados sin JS; con pestañas comparten la celda para fundirse entre sí. */
.tray__panels { display: grid; gap: clamp(26px, 4vw, 40px); min-width: 0; }
.tray__panel { min-width: 0; }
.tray__label { margin: 0 0 14px; color: #e6d6b8; }
.tray--tabs .tray__panels { gap: 0; }
.tray--tabs .tray__panel { grid-area: 1 / 1; }
.tray--tabs .tray__label {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Cuadrícula: dos columnas en móvil y cuatro desde 900 px (dos filas de cuatro = los ocho pocillos). */
.tray__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .tray__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

/* El pocillo: terciopelo casi negro y cálido, hundido (sombra interior) con un brillo mínimo en el borde superior. */
.tray__well {
	position: relative; min-width: 0;
	display: flex; flex-direction: column; gap: 10px;
	padding: 8px 8px 10px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background: linear-gradient(180deg, #131211 0%, #0e0d0c 100%);
	box-shadow: inset 0 14px 22px -10px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}
/* Pocillos vacíos: solo escritorio, solo para completar la última fila; decorativos y algo más tenues. */
.tray__well--empty { display: none; border-color: rgba(255, 255, 255, 0.04); background: #0d0c0b; box-shadow: inset 0 12px 20px -10px rgba(0, 0, 0, 0.7); }
@media (min-width: 900px) { .tray__well--empty { display: block; } }

.tray__photo { aspect-ratio: 4 / 3; padding: 10%; display: grid; }
.tray__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* La placa de latón: rectángulo pequeño, fondo de bronce oscuro y borde de latón de 1 px. */
.tray__plate {
	display: grid; gap: 2px;
	margin-inline: 2px; padding: 8px 10px 9px;
	border: 1px solid #b8925a; border-radius: 6px;
	background: linear-gradient(180deg, #2b2113 0%, #221a0f 100%);
	box-shadow: inset 0 1px 0 rgba(255, 226, 170, 0.14), 0 1px 0 rgba(0, 0, 0, 0.5);
}
.tray__name { margin: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.25; letter-spacing: 0; color: #f6f0e4; overflow-wrap: anywhere; }
.tray__color { margin: 0; font-size: 0.8125rem; line-height: 1.3; color: #dcc291; overflow-wrap: anywhere; }
.tray__serial { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; }
.tray__serial-label { font-size: 0.75rem; line-height: 1.3; color: #bfa57b; }
/* Grabado: tipografía monoespaciada y cifras tabulares, con aire entre letras. */
.tray__serial-val {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
	color: #efe4cf; overflow-wrap: anywhere;
}

/* Llamada: la píldora roja del tema, en tamaño pequeño. */
.tray__cta { margin-top: auto; width: 100%; min-height: 40px; padding: 8px 12px; gap: 8px; font-size: 0.875rem; line-height: 1.2; text-align: center; }
.tray__cta .icon { width: 1.25em; height: 1.25em; }

@media (max-width: 420px) {
	.tray__well { padding: 6px 6px 8px; gap: 8px; }
	.tray__plate { margin-inline: 0; padding: 7px 8px 8px; }
	.tray__name { font-size: 0.875rem; }
	.tray__cta { padding: 8px 8px; gap: 6px; font-size: 0.8125rem; border-radius: 22px; } /* con el texto en dos o tres líneas, la píldora pasa a rectángulo muy redondeado */
}
@media (max-width: 359px) { .tray__cta .icon { display: none; } }

/* Movimiento. Todo dentro de «sin preferencia»: con «reducir movimiento» no hay ascenso, elevación ni fundido (el cambio de pestaña es instantáneo). */
@media (prefers-reduced-motion: no-preference) {
	.tray__well { transition: box-shadow 300ms var(--ease); }
	.tray__img { transition: transform 300ms var(--ease); }
	.tray__well:focus-within { box-shadow: inset 0 20px 28px -10px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.6); }
	.tray__well:focus-within .tray__img { transform: translateY(-3px); }
	@media (hover: hover) {
		.tray__well:not(.tray__well--empty):hover { box-shadow: inset 0 20px 28px -10px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.6); }
		.tray__well:hover .tray__img { transform: translateY(-3px); }
	}
	/* Primera entrada a la vista (una vez): los pocillos suben 8 px y aparecen con 40 ms de escalón (--i la escribe tienda.js). */
	.tray--anim .tray__well:not(.tray__well--empty) { opacity: 0; transform: translateY(8px); }
	.tray--anim.is-in .tray__well:not(.tray__well--empty) {
		opacity: 1; transform: none;
		transition: opacity 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
		transition-delay: calc(var(--i, 0) * 40ms), calc(var(--i, 0) * 40ms), 0s;
	}
	/* Cambio de pestaña: fundido cruzado de 180 ms. */
	.tray__panel.is-fade-in { animation: tray-fade-in 180ms var(--ease) both; }
	.tray__panel.is-fade-out { animation: tray-fade-out 180ms var(--ease) both; pointer-events: none; }
}
@keyframes tray-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tray-fade-out { from { opacity: 1; } to { opacity: 0; } }