/*
 * Páginas: envases, cómo funciona, contacto, textos legales, página genérica y 404 · fch-child · E6 · 15/10/2026
 * Móvil primero. Solo tokens.
 */

/* ---------------------------------------------------------------------------
 * Envases: una tarjeta por tipo (foto + estado + texto). El principal, más grande.
 * ------------------------------------------------------------------------ */
.fch-envases {
	display: grid;
	gap: var(--fch-esp-rejilla);
	margin: 0 0 var(--fch-esp-seccion);
	padding: 0;
	list-style: none;
}

.fch-envase {
	display: grid;
	gap: var(--fch-esp-4);
	align-content: start;
	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-envase__foto {
	aspect-ratio: var(--fch-proporcion-cuadrada);
}

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

.fch-envase__texto {
	display: grid;
	gap: var(--fch-esp-2);
	align-content: start;
	justify-items: start;
}

.fch-envase__texto p {
	margin: 0;
}

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

.fch-envase__medidas {
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
	font-variant-numeric: tabular-nums;
}

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

.fch-envase--principal {
	border-color: var(--fch-color-accion);
}

.fch-envase--concepto .fch-envase__foto {
	outline: var(--fch-borde-medio) dashed var(--fch-color-atencion);
	outline-offset: calc(var(--fch-borde-medio) * -1);
}

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

	.fch-envase--principal {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--fch-esp-8);
	}

	.fch-envase--principal h2 {
		font-size: var(--fch-texto-3xl);
	}
}

@media (min-width: 75em) {
	.fch-envases {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fch-otros {
	margin-top: var(--fch-esp-5);
}

/* ---------------------------------------------------------------------------
 * Cómo funciona: tres etapas, vídeo y texto alternando de lado.
 * ------------------------------------------------------------------------ */
.fch-etapas {
	display: grid;
	gap: var(--fch-esp-seccion);
	margin: 0;
	padding: 0 0 var(--fch-esp-seccion);
	list-style: none;
}

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

.fch-etapa__texto {
	display: grid;
	gap: var(--fch-esp-2);
	max-width: var(--fch-medida-corta);
}

.fch-etapa__texto p {
	margin: 0;
}

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

.fch-etapa__texto > p:last-child {
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-lg);
	line-height: var(--fch-interlineado-compacto);
}

.fch-etapa__num {
	color: var(--fch-color-acento);
	font-family: var(--fch-fuente-titulos);
	font-size: var(--fch-texto-4xl);
	font-style: italic;
	line-height: 1;
}

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

	.fch-etapa--invertida {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	}

	.fch-etapa--invertida > .fch-video {
		order: 2;
	}
}

/* ---------------------------------------------------------------------------
 * Contacto (mismo diseño que el contacto de referencia: el formulario primero, al lado las formas de contacto).
 * ------------------------------------------------------------------------ */
.fch-contacto {
	display: grid;
	gap: var(--fch-esp-bloque);
	padding-top: var(--fch-esp-2);
	padding-bottom: var(--fch-esp-seccion);
}

.fch-contacto__formulario {
	display: grid;
	gap: var(--fch-esp-4);
	min-width: 0;
	padding: var(--fch-esp-6) var(--fch-esp-5);
	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-16);
	container-type: inline-size;
}

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

.fch-contacto__formulario > p {
	margin: 0;
	color: var(--fch-color-texto-suave);
}

.fch-contacto__formulario textarea.fch-control {
	min-height: var(--fch-alto-area-texto);
	resize: vertical;
}

@container (max-width: 30em) {
	.fch-contacto__formulario .fch-fila--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.fch-canales {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fch-canal {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--fch-esp-4);
	align-items: start;
	padding-block: var(--fch-esp-4);
	border-top: var(--fch-borde-fino) solid var(--fch-color-borde);
}

.fch-canal:first-child {
	padding-top: 0;
	border-top: 0;
}

.fch-canal > div {
	display: grid;
	gap: var(--fch-esp-2);
	justify-items: start;
	min-width: 0;
}

.fch-canal p {
	margin: 0;
}

.fch-canal__icono {
	width: var(--fch-icono);
	height: var(--fch-icono);
	color: var(--fch-color-acento);
}

.fch-canal__titulo {
	font-family: var(--fch-fuente-titulos);
	font-size: var(--fch-texto-lg);
	font-weight: var(--fch-peso-normal);
	line-height: var(--fch-interlineado-compacto);
}

@media (min-width: 48em) {
	.fch-contacto__formulario {
		padding: var(--fch-esp-6);
	}

	.fch-contacto {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--fch-esp-8);
		align-items: start;
	}
}

@media (min-width: 64em) {
	.fch-contacto {
		gap: var(--fch-esp-16);
	}
}

/* ---------------------------------------------------------------------------
 * Textos legales: los datos del titular en una lista de dos columnas.
 * ------------------------------------------------------------------------ */
.fch-legal__faltan {
	margin-bottom: var(--fch-esp-6);
}

.fch-datos-legales {
	display: grid;
	margin: 0;
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-radio-md);
	background-color: var(--fch-color-superficie);
}

.fch-datos-legales div {
	display: grid;
	gap: var(--fch-esp-1);
	padding: var(--fch-esp-3) var(--fch-esp-4);
	border-top: var(--fch-borde-fino) solid var(--fch-color-borde);
}

.fch-datos-legales div:first-child {
	border-top: 0;
}

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

.fch-datos-legales dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* 1.6.2 · Móvil: el correo es un enlace suelto; 44 px de alto para el dedo (antes 24). */
.fch-datos-legales dd > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

@media (min-width: 48em) {
	.fch-datos-legales div {
		grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
		align-items: baseline;
	}
}

.fch-lista-entradas {
	display: grid;
	gap: var(--fch-esp-2);
	padding: 0 0 var(--fch-esp-seccion) var(--fch-esp-6);
}

/* ---------------------------------------------------------------------------
 * 404 (como la del sistema de diseño de referencia: «Error 404», el único H1 y los atajos).
 * ------------------------------------------------------------------------ */
.fch-404 {
	display: grid;
	gap: var(--fch-esp-6);
	padding-bottom: var(--fch-esp-seccion);
}

.fch-404__cabecera {
	display: grid;
	gap: var(--fch-esp-4);
	max-width: var(--fch-ancho-lectura);
	margin-top: var(--fch-esp-6);
}

.fch-404__cabecera > .fch-antetitulo {
	margin: 0;
}

.fch-404__cabecera h1 {
	margin: 0;
	font-size: var(--fch-texto-4xl);
	font-weight: var(--fch-peso-normal);
	line-height: var(--fch-interlineado-ajustado);
}

.fch-404__texto {
	margin: 0;
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-lg);
}

.fch-404__atajos {
	display: grid;
	gap: var(--fch-esp-4);
	max-width: var(--fch-ancho-lectura);
}

.fch-404__atajos ul {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fch-esp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fch-404__atajo {
	justify-content: space-between;
	width: 100%;
}

.fch-404__portada {
	margin: 0;
}

.fch-404__portada a {
	display: inline-flex;
	align-items: center;
	min-height: var(--fch-tactil-min);
}

.fch-404__foto {
	max-width: var(--fch-ancho-lateral);
}

@media (min-width: 30em) {
	.fch-404__atajos ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.fch-404 {
		grid-template-columns: minmax(0, 1fr) var(--fch-ancho-lateral);
		align-items: center;
		column-gap: var(--fch-esp-16);
	}

	.fch-404__cabecera,
	.fch-404__atajos {
		grid-column: 1;
	}

	.fch-404__foto {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* 1.2.0 · Envases: foto de estudio o, si aún no hay, un hueco sin imagen (nunca una dibujada). */
.fch-envase__foto--pronto {
	display: grid;
	place-items: center;
	padding: var(--fch-esp-4);
	border-radius: var(--fch-radio-md);
	background-color: var(--fch-color-superficie-alt);
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
	text-align: center;
}

.fch-envase {
	position: relative;
}

.fch-ancla { /* ancla antigua (#v4, #v5): fuera de la rejilla de la tarjeta */
	position: absolute;
	top: 0;
	left: 0;
	scroll-margin-top: var(--fch-esp-24);
}

/* 1.10.10 · Modelo de formulario de desistimiento (Envíos y devoluciones): un recuadro para copiarlo tal cual. */
.fch-legal__modelo {
	margin: var(--fch-esp-4) 0 var(--fch-esp-6);
	padding: var(--fch-esp-4);
	border: var(--fch-borde-fino) solid var(--fch-color-borde-fuerte);
	border-radius: var(--fch-radio-md);
	background-color: var(--fch-color-superficie-alt);
}

.fch-legal__modelo p:last-child {
	margin-bottom: 0;
}