/*
 * Piezas comunes de las pantallas · fch-child · E6 · 15/10/2026
 * Foto de producto sobre su fondo, vídeo con su botón, PVP, sellos de estado, muestras de color, bandas de
 * confianza y de seguridad, columnas dobles, listas y textos largos. Todo con tokens (tokens.css).
 */

/* ---------------------------------------------------------------------------
 * Foto de producto: nunca sobre blanco; sobre el degradado de cera y con su sombra.
 * ------------------------------------------------------------------------ */
.fch-foto {
	margin: 0;
	overflow: hidden;
	border-radius: var(--fch-radio-md);
	background: var(--fch-foto-fondo);
}

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

.fch-foto img {
	filter: var(--fch-sombra-pieza);
}

/* ---------------------------------------------------------------------------
 * Vídeo: la caja tiene la forma del archivo (4:5 en el móvil con el vertical; 16:9 desde 768): nada salta.
 * ------------------------------------------------------------------------ */
.fch-video {
	position: relative;
	margin: 0;
}

/* Móvil: el clip vertical (9:16) entero, sin recortar (la rayita va abajo del todo), con tope de alto. */
.fch-video__marco {
	position: relative;
	width: min(100%, calc(var(--fch-video-alto-movil) * 9 / 16));
	margin-inline: auto;
	overflow: hidden;
	aspect-ratio: var(--fch-proporcion-vertical);
	border-radius: var(--fch-radio-md);
	background: var(--fch-foto-fondo);
}

.fch-video__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 48em) {
	.fch-video__marco {
		width: 100%;
		aspect-ratio: var(--fch-proporcion-panoramica);
	}

	.fch-video__video {
		object-fit: contain;
	}
}

.fch-video__boton {
	position: absolute;
	z-index: var(--fch-z-base);
	inset-block-end: var(--fch-esp-4);
	inset-inline-end: var(--fch-esp-3);
	display: grid;
	place-items: center;
	width: var(--fch-tactil-min);
	height: var(--fch-tactil-min);
	padding: 0;
	border: var(--fch-borde-fino) solid var(--fch-color-borde-fuerte);
	border-radius: var(--fch-radio-pildora);
	background: var(--fch-color-superficie);
	color: var(--fch-color-texto);
	cursor: pointer;
}

.fch-video__boton[hidden] {
	display: none;
}

.fch-video__i-pausa,
.fch-video[data-estado="en-marcha"] .fch-video__i-seguir {
	display: none;
}

.fch-video[data-estado="en-marcha"] .fch-video__i-pausa {
	display: block;
}

/* Con JavaScript, el botón propio sustituye a los controles del navegador. */
.fch-js .fch-video__video::-webkit-media-controls {
	display: none;
}

.fch-video__leyenda {
	margin-top: var(--fch-esp-2);
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
}

/* ---------------------------------------------------------------------------
 * Acciones (botones en fila que bajan en el móvil) y PVP.
 * ------------------------------------------------------------------------ */
.fch-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fch-esp-3);
}

.fch-acciones .fch-btn {
	text-wrap: balance;
}

@media (max-width: 29.99em) {
	.fch-acciones .fch-btn {
		width: 100%;
	}
}

.fch-pvp {
	display: grid;
	gap: var(--fch-esp-1);
}

.fch-pvp p {
	margin: 0;
}

.fch-pvp__etiqueta {
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
	font-weight: var(--fch-peso-normal);
	letter-spacing: var(--fch-tracking-versal);
}

.fch-pvp__cofre {
	color: var(--fch-color-texto-suave);
}

.fch-pvp__aviso {
	display: flex;
	align-items: center;
	gap: var(--fch-esp-2);
	color: var(--fch-color-acento);
	font-size: var(--fch-texto-sm);
	font-weight: var(--fch-peso-medio);
}

/* ---------------------------------------------------------------------------
 * Sellos de estado (envases y aperturas).
 * ------------------------------------------------------------------------ */
.fch-sello--principal {
	background-color: var(--fch-color-accion);
	color: var(--fch-color-sobre-accion);
}

.fch-sello--atencion {
	background-color: var(--fch-color-atencion-fondo);
	color: var(--fch-color-atencion);
}

.fch-sello--concepto {
	border: var(--fch-borde-fino) dashed var(--fch-color-atencion);
	background-color: var(--fch-color-atencion-fondo);
	color: var(--fch-color-atencion);
	letter-spacing: var(--fch-tracking-versal);
	text-transform: uppercase;
}

/* Marca de dato pendiente: muy visible (amarillo de «pendiente», 11,9 de contraste). */
mark.fch-pendiente {
	display: inline;
	padding: var(--fch-esp-0-5) var(--fch-esp-1);
	border: var(--fch-borde-medio) dashed currentcolor;
	font-size: inherit;
	font-weight: var(--fch-peso-semi);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ---------------------------------------------------------------------------
 * Muestras de color: el tarro (arriba) y la vela (abajo) en un círculo.
 * ------------------------------------------------------------------------ */
.fch-muestra--doble {
	background: linear-gradient(180deg, var(--muestra-2) 0 50%, var(--muestra) 50% 100%);
}

/* ---------------------------------------------------------------------------
 * Bandas: confianza (puntos dorados) y seguridad de la vela.
 * ------------------------------------------------------------------------ */
.fch-confianza {
	border-block: var(--fch-borde-fino) solid var(--fch-color-borde);
	background-color: var(--fch-color-fondo);
}

.fch-confianza ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--fch-esp-3) var(--fch-esp-6);
	margin: 0;
	padding-block: var(--fch-esp-5);
	list-style: none;
}

.fch-confianza li {
	display: flex;
	align-items: center;
	gap: var(--fch-esp-3);
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
	line-height: var(--fch-interlineado-compacto);
}

.fch-confianza__punto {
	flex: none;
	width: var(--fch-punto);
	height: var(--fch-punto);
	border-radius: var(--fch-radio-pildora);
	background-color: var(--fch-color-acento-decor);
}

@media (min-width: 64em) {
	.fch-confianza ul {
		column-gap: var(--fch-esp-12);
	}
}

.fch-seguridad {
	border-top: var(--fch-borde-fino) solid var(--fch-color-borde);
}

.fch-seguridad__dentro {
	display: grid;
	gap: var(--fch-esp-4);
	max-width: calc(var(--fch-ancho-lectura) + var(--fch-esp-pagina) * 2);
}

.fch-seguridad__icono {
	color: var(--fch-color-atencion);
}

.fch-seguridad h2 {
	font-size: var(--fch-texto-2xl);
	font-weight: var(--fch-peso-normal);
}

.fch-seguridad p {
	margin-top: var(--fch-esp-2);
	color: var(--fch-color-texto-suave);
}

@media (min-width: 48em) {
	.fch-seguridad__dentro {
		grid-template-columns: auto minmax(0, 1fr);
		margin-inline: auto;
	}
}

.fch-lista-seguridad,
.fch-lista-check,
.fch-lista-pendiente {
	display: grid;
	gap: var(--fch-esp-2);
	margin: var(--fch-esp-4) 0;
	padding: 0;
	list-style: none;
}

.fch-lista-seguridad li,
.fch-lista-pendiente li {
	position: relative;
	padding-left: var(--fch-esp-5);
}

.fch-lista-seguridad li::before,
.fch-lista-pendiente li::before {
	content: "";
	position: absolute;
	top: 0.65em;
	left: 0;
	width: var(--fch-punto);
	height: var(--fch-punto);
	border-radius: var(--fch-radio-pildora);
	background-color: var(--fch-color-acento-decor);
}

.fch-lista-check li {
	display: flex;
	align-items: flex-start;
	gap: var(--fch-esp-3);
}

.fch-lista-check .fch-icono {
	margin-top: var(--fch-esp-1);
	color: var(--fch-color-exito);
}

/* ---------------------------------------------------------------------------
 * Dos columnas (texto y vídeo o foto); en el móvil, una encima de otra.
 * ------------------------------------------------------------------------ */
.fch-dos {
	display: grid;
	gap: var(--fch-esp-bloque);
	align-items: center;
}

.fch-dos h2 {
	margin-bottom: var(--fch-esp-3);
}

.fch-dos .fch-btn {
	margin-top: var(--fch-esp-4);
}

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

	.fch-dos--invertida > :first-child {
		order: 2;
	}
}

/* Títulos de banda: Brygada normal y un punto más grandes (como las bandas de la portada de referencia). */
.fch-seccion__cabecera h2,
.fch-dos h2 {
	font-size: var(--fch-texto-3xl);
	font-weight: var(--fch-peso-normal);
	line-height: var(--fch-interlineado-titulo);
}

/* Avisos con icono y texto en un <span> o <p> sueltos. */
.fch-aviso > span,
.fch-aviso > p {
	margin: 0;
	color: var(--fch-color-texto);
}

/* ---------------------------------------------------------------------------
 * Texto largo (legales y páginas sueltas).
 * ------------------------------------------------------------------------ */
.fch-prosa {
	max-width: var(--fch-ancho-lectura);
	padding-bottom: var(--fch-esp-seccion);
	font-size: var(--fch-texto-base);
}

.fch-prosa > * + * {
	margin-top: var(--fch-esp-5);
}

.fch-prosa h2 {
	margin-top: var(--fch-esp-12);
	scroll-margin-top: var(--fch-esp-24);
}

.fch-prosa h2 + * {
	margin-top: var(--fch-esp-4);
}

.fch-prosa p,
.fch-prosa ul,
.fch-prosa ol {
	margin-bottom: 0;
}

.fch-prosa ul,
.fch-prosa ol {
	display: grid;
	gap: var(--fch-esp-2);
	padding-left: var(--fch-esp-6);
}

.fch-prosa li::marker {
	color: var(--fch-color-acento);
	font-weight: var(--fch-peso-semi);
}

.fch-prosa code {
	overflow-wrap: anywhere;
}

/* El antetítulo de una cabecera de sección sigue en dorado (la regla de los párrafos de la cabecera lo apagaba). */
.fch-seccion__cabecera .fch-antetitulo {
	margin: 0 0 var(--fch-esp-3);
	color: var(--fch-color-acento);
}

/* Aire alrededor del producto dentro de su foto. */
.fch-foto {
	padding: var(--fch-esp-4);
}