/*
 * El producto · fch-child · E6 · 15/10/2026
 * Galería + compra (sin compra: PVP y «Avísame») + selector de color; medidas; despiece pulsable; aperturas;
 * vela en el platillo. Móvil primero.
 */

/* ---------------------------------------------------------------------------
 * Primera pantalla: galería | datos y selector.
 * ------------------------------------------------------------------------ */
.fch-ficha {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fch-esp-bloque);
	padding-bottom: var(--fch-esp-seccion);
}

@media (min-width: 64em) {
	.fch-ficha {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: var(--fch-esp-12);
		align-items: start;
	}

	.fch-galeria {
		position: sticky;
		top: calc(var(--fch-alto-cabecera) + var(--fch-control-alto) + var(--fch-esp-4));
	}
}

.fch-galeria {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fch-esp-3);
	min-width: 0;
}

.fch-galeria__principal {
	aspect-ratio: var(--fch-proporcion-cuadrada);
}

.fch-galeria__principal .fch-imagen,
.fch-galeria__principal img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fch-galeria__miniaturas {
	display: flex;
	gap: var(--fch-esp-2);
	margin: 0;
	padding: 0 0 var(--fch-esp-1);
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}

.fch-miniatura {
	position: relative;
	display: block;
	flex: none;
	width: var(--fch-miniatura);
	aspect-ratio: var(--fch-proporcion-cuadrada);
	overflow: hidden;
	border: var(--fch-borde-medio) solid var(--fch-color-borde);
	border-radius: var(--fch-radio-sm);
	background: var(--fch-foto-fondo);
}

.fch-miniatura:hover {
	border-color: var(--fch-color-borde-control);
}

.fch-miniatura[aria-current="true"] {
	border-color: var(--fch-color-accion);
}

.fch-miniatura img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fch-ficha__compra {
	display: grid;
	gap: var(--fch-esp-5);
	align-content: start;
	min-width: 0;
}

.fch-ficha__compra h1 {
	font-size: var(--fch-texto-3xl);
	font-weight: var(--fch-peso-normal);
}

.fch-ficha__compra .fch-antetitulo,
.fch-ficha__compra .fch-entradilla {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Selector de color: 19 muestras (tarro + vela) y las dos versiones del anillo.
 * ------------------------------------------------------------------------ */
.fch-selector {
	display: grid;
	gap: var(--fch-esp-5);
	padding-top: var(--fch-esp-5);
	border-top: var(--fch-borde-fino) solid var(--fch-color-borde);
	scroll-margin-top: var(--fch-esp-24);
}

.fch-selector legend {
	font-size: var(--fch-texto-base);
}

.fch-selector__nombre {
	font-weight: var(--fch-peso-normal);
}

.fch-muestras {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fch-esp-1);
}

.fch-muestra-opcion {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--fch-tactil-min);
	height: var(--fch-tactil-min);
	border: var(--fch-borde-medio) solid transparent;
	border-radius: var(--fch-radio-pildora);
	cursor: pointer;
}

.fch-muestra-opcion .fch-muestra {
	box-shadow: 0 0 0 var(--fch-borde-medio) var(--muestra-metal, transparent);
}

.fch-muestra-opcion:hover {
	border-color: var(--fch-color-borde-fuerte);
}

.fch-muestra-opcion:has(input:checked) {
	border-color: var(--fch-color-accion);
}

.fch-muestra-opcion:has(input:focus-visible) {
	outline: var(--fch-foco-ancho) solid var(--fch-color-foco);
	outline-offset: var(--fch-foco-separacion);
}

.fch-selector__datos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fch-esp-3) var(--fch-esp-4);
	margin: 0;
	font-size: var(--fch-texto-sm);
}

.fch-selector__datos dt {
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-xs);
	letter-spacing: var(--fch-tracking-boton);
}

.fch-selector__datos dd {
	margin: 0;
	font-weight: var(--fch-peso-medio);
	overflow-wrap: anywhere;
}

.fch-opciones--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fch-rejilla-min)), 1fr));
}

.fch-opcion {
	grid-template-columns: auto minmax(0, 1fr);
}

.fch-js .fch-selector__ver {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Medidas clave.
 * ------------------------------------------------------------------------ */
.fch-medidas {
	display: grid;
	gap: var(--fch-esp-bloque);
	align-items: center;
}

.fch-medidas__dibujo {
	max-width: var(--fch-ancho-lateral);
	justify-self: center;
	width: 100%;
	margin: 0;
}

.fch-medidas h2 {
	margin-bottom: var(--fch-esp-6);
	font-size: var(--fch-texto-3xl);
	font-weight: var(--fch-peso-normal);
}

.fch-cifras-medidas {
	display: grid;
	margin: 0;
}

.fch-cifras-medidas div {
	display: grid;
	gap: var(--fch-esp-1);
	padding-block: var(--fch-esp-3);
	border-top: var(--fch-borde-fino) solid var(--fch-color-borde-fuerte);
}

.fch-cifras-medidas dt {
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
}

.fch-cifras-medidas dd {
	margin: 0;
	font-family: var(--fch-fuente-titulos);
	font-size: var(--fch-texto-lg);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 48em) {
	.fch-cifras-medidas div {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		align-items: baseline;
	}
}

@media (min-width: 64em) {
	.fch-medidas {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--fch-esp-16);
	}
}

/* ---------------------------------------------------------------------------
 * Despiece: la lámina limpia con sus números; debajo (o al lado), la ficha de cada pieza.
 * ------------------------------------------------------------------------ */
.fch-despiece {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fch-esp-bloque);
}

/* En el móvil la lámina se ve más grande y se desliza a los lados: así los números no se pisan. */
.fch-despiece__marco {
	min-width: 0;
	overflow-x: auto;
	border-radius: var(--fch-radio-md);
	scrollbar-width: thin;
}

.fch-despiece__figura {
	position: relative;
	min-width: var(--fch-despiece-min);
	margin: 0;
	border-radius: var(--fch-radio-md);
	background: var(--fch-foto-fondo);
}

.fch-despiece__figura .fch-imagen,
.fch-despiece__figura img {
	display: block;
	width: 100%;
	height: auto;
}

.fch-despiece__punto {
	position: absolute;
	top: var(--y);
	left: var(--x);
	display: grid;
	place-items: center;
	width: var(--fch-despiece-punto);
	height: var(--fch-despiece-punto);
	border: var(--fch-borde-medio) solid var(--fch-color-accion);
	border-radius: var(--fch-radio-pildora);
	background-color: var(--fch-color-superficie);
	color: var(--fch-color-texto);
	font-size: var(--fch-texto-sm);
	font-weight: var(--fch-peso-semi);
	line-height: 1;
	text-decoration: none;
	transform: translate(-50%, -50%);
	transition: background-color var(--fch-dur-rapida) var(--fch-curva-salida), color var(--fch-dur-rapida) var(--fch-curva-salida);
}

@media (min-width: 48em) {
	.fch-despiece__figura {
		min-width: 0;
	}

	.fch-despiece__punto {
		width: var(--fch-tactil-min);
		height: var(--fch-tactil-min);
	}
}

.fch-despiece__punto:hover,
.fch-despiece__punto[aria-current="true"] {
	background-color: var(--fch-color-accion);
	color: var(--fch-color-sobre-accion);
}

.fch-piezas {
	display: grid;
	gap: var(--fch-esp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.fch-piezas {
		grid-template-columns: repeat(auto-fill, minmax(var(--fch-rejilla-min), 1fr));
	}
}

.fch-pieza {
	display: grid;
	grid-template-columns: var(--fch-tactil-min) minmax(0, 1fr);
	gap: var(--fch-esp-3);
	padding: var(--fch-esp-4);
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-tarjeta-radio);
	background-color: var(--fch-tarjeta-fondo);
	scroll-margin-top: var(--fch-esp-24);
}

.fch-pieza:target,
.fch-pieza[data-activa] {
	border-color: var(--fch-color-accion);
	box-shadow: inset 0 0 0 var(--fch-borde-fino) var(--fch-color-accion);
}

.fch-pieza__num {
	display: grid;
	place-items: center;
	width: var(--fch-tactil-min);
	height: var(--fch-tactil-min);
	margin: 0;
	border-radius: var(--fch-radio-pildora);
	background-color: var(--fch-color-acento-fondo);
	color: var(--fch-color-acento);
	font-weight: var(--fch-peso-semi);
}

.fch-pieza h3 {
	margin-bottom: var(--fch-esp-2);
	font-size: var(--fch-texto-lg);
}

.fch-pieza p {
	margin: 0 0 var(--fch-esp-1);
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
}

.fch-pieza strong {
	color: var(--fch-color-texto);
}

/* Con JavaScript: una sola ficha, la de la pieza elegida, en un panel (al lado de la lámina en el ordenador). */
.fch-js .fch-despiece[data-listo] .fch-pieza:not([data-activa]) {
	display: none;
}

.fch-js .fch-despiece[data-listo] .fch-piezas {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64em) {
	.fch-js .fch-despiece[data-listo] {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		align-items: start;
	}

	.fch-js .fch-despiece[data-listo] .fch-piezas {
		position: sticky;
		top: calc(var(--fch-alto-cabecera) + var(--fch-control-alto) + var(--fch-esp-4));
	}
}

/* ---------------------------------------------------------------------------
 * Aperturas y vela en el platillo.
 * ------------------------------------------------------------------------ */
.fch-apertura {
	display: grid;
	gap: var(--fch-esp-4);
	align-content: start;
	align-self: start;
}

.fch-apertura h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fch-esp-2);
	font-size: var(--fch-texto-xl);
	font-weight: var(--fch-peso-normal);
}

.fch-apertura .fch-pasos h4 {
	margin: 0;
}

.fch-apertura--concepto .fch-video__marco {
	outline: var(--fch-borde-medio) dashed var(--fch-color-atencion);
	outline-offset: var(--fch-borde-medio);
}

.fch-platillo {
	display: grid;
	gap: var(--fch-esp-bloque);
	align-items: center;
}

.fch-platillo h2 {
	margin-bottom: var(--fch-esp-3);
	font-size: var(--fch-texto-3xl);
	font-weight: var(--fch-peso-normal);
}

.fch-platillo .fch-aviso {
	margin-top: var(--fch-esp-5);
	font-size: var(--fch-texto-base);
}

@media (min-width: 64em) {
	.fch-platillo {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: var(--fch-esp-12);
	}
}

.fch-lista-pendiente + .fch-btn {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * 1.4.0 · Ficha TODO REAL: configurador arriba; medidas, despiece y aperturas siguen la elección.
 * ------------------------------------------------------------------------ */
.fch-ficha__cabecera {
	padding-bottom: 0;
}

.fch-ficha__cabecera .fch-btn {
	margin-top: var(--fch-esp-2);
}

.fch-ancla-ficha {
	display: block;
	scroll-margin-top: var(--fch-esp-24);
}

.fch-ficha__bloque {
	display: grid;
	gap: var(--fch-esp-4);
}

.fch-ficha__medidas {
	max-width: 46rem;
}

.fch-ficha__medidas th {
	width: 11rem;
	font-weight: 600;
	text-align: left;
}

.fch-ficha__piezas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--fch-esp-2) var(--fch-esp-6);
	margin: 0;
	padding-left: var(--fch-esp-5);
}

.fch-apertura {
	display: grid;
	gap: var(--fch-esp-3);
	align-content: start;
	padding: var(--fch-esp-5);
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-tarjeta-radio);
	background-color: var(--fch-color-superficie);
}

.fch-apertura h3,
.fch-apertura p {
	margin: 0;
}

.fch-platillo__foto {
	margin: 0;
}

.fch-platillo__detalles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fch-esp-3);
	margin-top: var(--fch-esp-4);
}

.fch-platillo__detalles .fch-foto {
	margin: 0;
}