/*
 * Portada · fch-child · E6 · 15/10/2026
 * Héroe (vídeo + texto), «Un producto · dos vidas», el producto principal y los accesos. Móvil primero.
 * Títulos de banda en Brygada normal, como la portada del sistema de diseño de referencia.
 */

/* ---------------------------------------------------------------------------
 * Héroe: en el móvil el vídeo vertical arriba y el texto debajo; desde 64em, texto a la izquierda y la
 * película a la derecha (así ningún texto tapa el producto en ningún momento de la película).
 * ------------------------------------------------------------------------ */
.fch-heroe {
	display: grid;
	gap: var(--fch-esp-6);
	padding-block: var(--fch-esp-6) var(--fch-esp-seccion);
}

.fch-heroe__medio {
	padding-inline: var(--fch-esp-pagina);
}

.fch-heroe__texto {
	display: grid;
	gap: var(--fch-esp-4);
	align-content: center;
}

.fch-heroe__texto .fch-antetitulo {
	margin: 0;
}

.fch-heroe h1 {
	max-width: var(--fch-medida-titular-ancha);
	font-size: var(--fch-texto-4xl);
	font-weight: var(--fch-peso-normal);
	line-height: var(--fch-interlineado-ajustado);
}

.fch-heroe .fch-entradilla {
	margin: 0;
}

.fch-heroe .fch-acciones {
	margin-top: var(--fch-esp-2);
}

@media (min-width: 64em) {
	.fch-heroe {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-areas: "texto medio";
		align-items: center;
		width: 100%;
		max-width: var(--fch-ancho-max);
		margin-inline: auto;
		padding-inline: var(--fch-esp-pagina);
		gap: var(--fch-esp-10);
	}

	.fch-heroe__medio {
		grid-area: medio;
		padding-inline: 0;
	}

	.fch-heroe__texto {
		grid-area: texto;
		padding-inline: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Un producto · dos vidas: tres pasos con su icono dorado.
 * ------------------------------------------------------------------------ */
.fch-vidas {
	display: grid;
	gap: var(--fch-esp-rejilla);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fch-vida {
	display: grid;
	gap: var(--fch-esp-2);
	align-content: start;
	padding: var(--fch-esp-6);
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-tarjeta-radio);
	background-color: var(--fch-tarjeta-fondo);
}

.fch-vida__icono {
	color: var(--fch-color-acento-decor);
}

.fch-vida__paso {
	margin: var(--fch-esp-2) 0 0;
	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-vida h3 {
	font-size: var(--fch-texto-xl);
	font-weight: var(--fch-peso-normal);
}

.fch-vida p:last-child {
	color: var(--fch-color-texto-suave);
}

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

/* ---------------------------------------------------------------------------
 * El producto principal.
 * ------------------------------------------------------------------------ */
.fch-destacado {
	display: grid;
	gap: var(--fch-esp-bloque);
	align-items: center;
}

.fch-destacado__foto {
	max-width: var(--fch-ancho-estrecho);
	justify-self: center;
	width: 100%;
}

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

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

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

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

/* ---------------------------------------------------------------------------
 * Accesos: colores, envases y cómo funciona.
 * ------------------------------------------------------------------------ */
.fch-accesos {
	display: grid;
	gap: var(--fch-esp-rejilla);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.fch-acceso__enlace {
	display: grid;
	gap: var(--fch-esp-2);
	align-content: start;
	height: 100%;
	padding: var(--fch-esp-6);
	border: var(--fch-borde-fino) solid var(--fch-color-borde);
	border-radius: var(--fch-tarjeta-radio);
	background-color: var(--fch-tarjeta-fondo);
	box-shadow: var(--fch-tarjeta-sombra);
	color: var(--fch-color-texto);
	text-decoration: none;
	transition: box-shadow var(--fch-dur-media) var(--fch-curva-salida), border-color var(--fch-dur-media) var(--fch-curva-salida);
}

.fch-acceso__enlace:hover {
	border-color: var(--fch-color-borde-fuerte);
	box-shadow: var(--fch-tarjeta-sombra-hover);
	color: var(--fch-color-texto);
}

.fch-acceso__icono {
	color: var(--fch-color-acento-decor);
}

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

.fch-acceso__titulo {
	font-family: var(--fch-fuente-titulos);
	font-size: var(--fch-texto-xl);
	line-height: var(--fch-interlineado-titulo);
}

.fch-acceso__enlace:hover .fch-acceso__titulo {
	text-decoration: underline;
	text-decoration-color: var(--fch-color-subrayado);
	text-underline-offset: var(--fch-subrayado-separacion);
}

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

/* 1.2.0 · Héroe con la foto de estudio del Body Cream 200 (antes, vídeo). */
.fch-heroe__foto {
	margin: 0;
	aspect-ratio: 1;
	max-height: min(78vh, 44rem);
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--fch-tarjeta-radio);
}

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