/*
 * Categorías y descubrir · fch-child 1.8.0 · 18/10/2026 · tokens --fch-* (mismo sistema que el resto).
 * - «En resumen» (todas las páginas que lo tienen, arriba en el móvil) y «Preguntas frecuentes» (al final).
 * - Páginas de categoría: Velas, Regalo y Accesorios (tarjetas, fotos reales o «Foto en preparación», tabla).
 * - Grupo «Llama: Real · LED» del selector (solo con JavaScript).
 * Móvil primero: una columna; desde 48em dos y desde 64em tres. Objetivos táctiles ≥ 44 px, texto ≥ 16 px.
 */

/* ---------------------------------------------------------------- Solo con JavaScript */
html:not(.fch-js) .fch-solo-js {
	display: none;
}

/* ---------------------------------------------------------------- En resumen */
.fch-resumen {
	max-width: var(--fch-ancho-lectura);
	margin: var(--fch-esp-4) 0 var(--fch-esp-6);
	padding: var(--fch-esp-4) var(--fch-esp-5);
	border-left: var(--fch-borde-grueso) solid var(--fch-color-acento-decor);
	border-radius: 0 var(--fch-radio-md) var(--fch-radio-md) 0;
	background-color: var(--fch-color-superficie-alt);
}

.fch-resumen__titulo {
	margin: 0 0 var(--fch-esp-2);
	color: var(--fch-color-acento);
	font-size: var(--fch-texto-xs);
	font-weight: var(--fch-peso-medio);
	letter-spacing: var(--fch-tracking-versal);
	text-transform: uppercase;
}

.fch-resumen__lista {
	display: grid;
	gap: var(--fch-esp-2);
	margin: 0;
	padding: 0 0 0 var(--fch-esp-5);
	color: var(--fch-color-texto);
	line-height: var(--fch-interlineado-compacto);
}

.fch-resumen__lista li::marker {
	color: var(--fch-color-acento-decor);
}

/* En la ficha (galería arriba), el resumen va entre las migas y la foto, compacto. */
.fch-pantalla-forma .fch-resumen,
.fch-pantalla-configurador .fch-resumen {
	margin-block: var(--fch-esp-2) var(--fch-esp-4);
}

/* ---------------------------------------------------------------- Preguntas frecuentes */
.fch-preguntas h2 {
	margin-top: var(--fch-esp-1);
}

/* ---------------------------------------------------------------- Cabecera de categoría */
.fch-cat-cabecera .fch-entradilla {
	max-width: var(--fch-medida-texto);
}

.fch-cat-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fch-esp-3);
	margin-top: var(--fch-esp-5);
}

.fch-cat-acciones .fch-btn {
	min-height: var(--fch-control-alto);
}

/* Atajos a las secciones de la página (chips que se deslizan en el móvil). */
.fch-cat-indice {
	display: flex;
	gap: var(--fch-esp-2);
	margin: 0 calc(var(--fch-esp-pagina) * -1) var(--fch-esp-6);
	padding: 0 var(--fch-esp-pagina) var(--fch-esp-1);
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--fch-esp-pagina); /* 1.10.13 · el imán no pega el primer botón al borde de la pantalla */
	scrollbar-width: thin;
}

.fch-cat-indice li {
	flex: none;
	scroll-snap-align: start;
}

.fch-cat-indice a {
	display: inline-flex;
	align-items: center;
	min-height: var(--fch-tactil-min);
	padding: var(--fch-esp-1) var(--fch-esp-4);
	border: var(--fch-borde-fino) solid var(--fch-color-borde-control);
	border-radius: var(--fch-radio-pildora);
	background-color: var(--fch-color-superficie);
	color: var(--fch-color-texto);
	text-decoration: none;
	white-space: nowrap;
}

.fch-cat-indice a:hover {
	border-color: var(--fch-color-accion);
}

/* ---------------------------------------------------------------- Tarjetas */
.fch-cat-tarjetas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fch-esp-rejilla);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fch-cat-tarjeta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-radio-md);
	background-color: var(--fch-color-superficie);
	box-shadow: var(--fch-sombra-1);
	scroll-margin-top: calc(var(--fch-alto-cabecera-movil) + var(--fch-esp-4));
}

.fch-cat-tarjeta__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--fch-esp-3);
	padding: var(--fch-esp-5);
}

.fch-cat-tarjeta__cuerpo > * {
	margin: 0;
}

.fch-cat-tarjeta h2,
.fch-cat-tarjeta h3 {
	font-size: var(--fch-texto-xl);
	line-height: var(--fch-interlineado-titulo);
}

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

.fch-cat-tarjeta__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fch-esp-2);
	margin-top: auto;
	padding-top: var(--fch-esp-2);
}

.fch-cat-tarjeta__acciones .fch-btn {
	min-height: var(--fch-tactil-min);
}

/* Datos cortos de una tarjeta (pila, horas, alto…): pares término/valor. */
.fch-cat-datos {
	display: grid;
	gap: var(--fch-esp-1);
	margin: 0;
	padding: var(--fch-esp-3) 0 0;
	border-top: var(--fch-borde-fino) solid var(--fch-color-borde);
}

.fch-cat-datos div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--fch-esp-1) var(--fch-esp-3);
}

.fch-cat-datos dt {
	color: var(--fch-color-texto-suave);
}

.fch-cat-datos dd {
	margin: 0;
	font-weight: var(--fch-peso-medio);
	text-align: right;
}

.fch-cat-nota {
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-xs);
}

/* Fotos: reales (con «Foto aproximada» si no es exactamente lo descrito) o el hueco «Foto en preparación». */
.fch-cat-foto {
	position: relative;
}

.fch-cat-tarjeta .fch-cat-foto {
	margin: 0;
	background: var(--fch-foto-fondo);
}

.fch-cat-tarjeta .fch-cat-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.fch-cat-foto .fch-foto-pie {
	margin: 0;
	padding: var(--fch-esp-2) var(--fch-esp-4);
	background-color: var(--fch-color-superficie-alt);
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-xs);
}

.fch-cat-sinfoto {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: var(--fch-esp-4);
	border-bottom: var(--fch-borde-fino) dashed var(--fch-color-borde-fuerte);
	background-color: var(--fch-color-superficie-alt);
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
	text-align: center;
}

/* Tarjeta destacada (la sección principal de la página): foto y texto lado a lado desde 48em. */
@media (min-width: 48em) {
	.fch-cat-tarjetas--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fch-cat-tarjetas--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.fch-cat-tarjetas--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fch-cat-tarjeta {
		scroll-margin-top: calc(var(--fch-alto-cabecera) + var(--fch-esp-12));
	}
}

/* ---------------------------------------------------------------- Lista de accesorios (más pequeña) */
.fch-cat-mini {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--fch-esp-rejilla);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fch-cat-mini .fch-cat-sinfoto {
	aspect-ratio: 16 / 9;
}

.fch-cat-mini .fch-cat-tarjeta h3 {
	font-size: var(--fch-texto-lg);
}

/* ---------------------------------------------------------------- Tabla de medidas de las velas */
/* En el móvil la tabla va apilada: el texto se parte para no salirse de la pantalla. */
.fch-cat-tabla td,
.fch-cat-tabla th {
	overflow-wrap: anywhere;
}

@media (min-width: 48em) {
	.fch-cat-tabla td,
	.fch-cat-tabla th {
		white-space: nowrap;
	}

	.fch-cat-tabla td:first-child,
	.fch-cat-tabla th:first-child {
		white-space: normal;
	}
}

/* ---------------------------------------------------------------- Bloque de llamada (abajo de cada categoría) */
.fch-cat-llamada {
	display: grid;
	gap: var(--fch-esp-4);
	padding: var(--fch-esp-6);
	border-radius: var(--fch-radio-md);
	background-color: var(--fch-color-superficie-alt);
}

.fch-cat-llamada > * {
	margin: 0;
}

@media (min-width: 48em) {
	.fch-cat-llamada {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

/* ---------------------------------------------------------------- Selector: «Llama: Real · LED» */
.fch-sel__grupo--llama .fch-chip__icono svg {
	display: block;
}

/* Tarjeta destacada (una sola pieza: foto y texto lado a lado desde 48em). */
@media (min-width: 48em) {
	.fch-cat-destacada {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.fch-cat-destacada > .fch-cat-sinfoto {
		height: 100%;
		border-right: var(--fch-borde-fino) dashed var(--fch-color-borde-fuerte);
		border-bottom: 0;
	}
}

/* ---------------------------------------------------------------- 1.9.0 · Mejoras (fase 9, inc/mejoras.php) */
/* Sello «Próximamente» / «Pídelo»: texto (no color solo), pequeño y en versalitas como los antetítulos. */
.fch-proximo__sello {
	display: inline-block;
	margin: 0 0 var(--fch-esp-2);
	padding: var(--fch-esp-1) var(--fch-esp-2);
	border: var(--fch-borde-fino) solid var(--fch-color-acento-decor);
	border-radius: var(--fch-radio-md);
	color: var(--fch-color-acento);
	font-size: var(--fch-texto-xs);
	font-weight: var(--fch-peso-medio);
	letter-spacing: var(--fch-tracking-versal);
	text-transform: uppercase;
}

/* Listas sencillas (eventos, marca blanca, confianza): una columna, aire entre líneas. */
.fch-pasos-lista,
.fch-lista-puntos,
.fch-confianza__lista {
	display: grid;
	gap: var(--fch-esp-2);
	max-width: var(--fch-ancho-lectura);
	margin: 0 0 var(--fch-esp-4);
	padding: 0 0 0 var(--fch-esp-5);
	line-height: var(--fch-interlineado-compacto);
}

/* 1.10.13 · «Sin letra pequeña» de la portada: la banda .fch-confianza (piezas.css) pone cada línea en flex y la
 * negrita quedaba como una columna estrecha (una palabra por línea). Aquí vuelve a ser una lista de puntos. */
.fch-confianza .fch-confianza__lista {
	display: grid;
	justify-content: start;
	gap: var(--fch-esp-3);
	margin: var(--fch-esp-4) 0 var(--fch-esp-5);
	padding: 0 0 0 var(--fch-esp-5);
	list-style: disc;
}

.fch-confianza .fch-confianza__lista li {
	display: list-item;
	color: var(--fch-color-texto);
	font-size: var(--fch-texto-base);
}

.fch-pasos-lista li::marker,
.fch-lista-puntos li::marker,
.fch-confianza__lista li::marker {
	color: var(--fch-color-acento-decor);
}

/* Profesionales: kit de muestras, unidades, marca blanca y acabados. Móvil: uno debajo de otro; desde 48em, dos. */
.fch-prof-mas {
	display: grid;
	gap: var(--fch-esp-4);
	margin: 0 0 var(--fch-esp-6);
}

.fch-prof-mas__bloque {
	padding: var(--fch-esp-5);
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-radio-md);
	background-color: var(--fch-color-superficie-alt);
}

.fch-prof-mas__bloque > * {
	margin-top: 0;
}

.fch-prof-mas__bloque h2 {
	font-size: var(--fch-texto-xl, 1.5rem);
}

.fch-prof-mas__bloque .fch-btn {
	min-height: 44px;
}

@media (min-width: 48em) {
	.fch-prof-mas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tramos de unidades: término y texto, apilados en el móvil. */
.fch-tramos {
	display: grid;
	gap: var(--fch-esp-2);
	margin: 0;
}

.fch-tramos div {
	padding: var(--fch-esp-2) 0;
	border-top: var(--fch-borde-fino) solid var(--fch-color-borde);
}

.fch-tramos dt {
	font-weight: var(--fch-peso-medio);
}

.fch-tramos dd {
	margin: 0;
	color: var(--fch-color-texto-suave);
}

.fch-prof__tramo {
	margin: var(--fch-esp-3) 0 0;
	padding: var(--fch-esp-3) var(--fch-esp-4);
	border-left: var(--fch-borde-grueso) solid var(--fch-color-acento-decor);
	background-color: var(--fch-color-superficie-alt);
}

/* Confianza (portada y profesionales). */
.fch-confianza .fch-cat-nota {
	max-width: var(--fch-ancho-lectura);
	font-size: var(--fch-texto-sm);
}

/* 9.4 · Tiempo de combustión (solo se pinta con la prueba EN 15493). */
.fch-combustion {
	margin-top: var(--fch-esp-5);
	overflow-x: auto;
}

/* ---------------------------------------------------------------- 1.10.9 · /regalo/: fotos reales */
/* Maletines y cofres con foto = tarjetas destacadas a lo ancho (foto grande y texto al lado desde 48em). Las fotos de
   regalo van enteras (recorte 4:3 del estudio alrededor del producto): sin el recorte cuadrado de las tarjetas. */
.fch-cat-tarjetas > .fch-cat-destacada {
	grid-column: 1 / -1;
}

.fch-cat-tarjeta .fch-cat-foto--entera img {
	aspect-ratio: auto;
	object-fit: contain;
}

@media (min-width: 48em) {
	.fch-cat-destacada > .fch-cat-foto {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.fch-cat-destacada > .fch-cat-foto picture {
		width: 100%;
	}
}

/* 1.10.13 · «Cómo se pide» (bodas y eventos, /regalo/): con aire por encima, no pegado a las tarjetas. */
.fch-cat-tarjetas + h3 {
	margin: var(--fch-esp-8) 0 var(--fch-esp-3);
	font-size: var(--fch-texto-xl);
}