/*
 * Ambiente y descargas · fch-child 1.10.0 · 18/10/2026 · tokens --fch-* (inc/ambiente.php).
 * - Cabecera con fondo de ambiente (.fch-ambiente): móvil primero, foto 4:5 a todo el ancho y el texto abajo; desde
 *   48em, foto 12:5 con esquinas y el texto a la izquierda. El texto va SIEMPRE sobre su propio velo (noche-950 al
 *   78 % como mínimo): aunque debajo hubiera blanco puro, cera-100 da 7,7:1 y el oro de los títulos 5,2:1 (AA). La
 *   cabecera lleva .fch-zona-oscura (colores del tema oscuro) y, sin foto, su fondo noche-950.
 * - Descargas PDF (.fch-descargas) y «En su sitio» (.fch-sitio, galería que se desliza en el móvil).
 * Objetivos táctiles ≥ 44 px y texto ≥ 16 px.
 */

/* ---------------------------------------------------------------- Cabecera de ambiente */
.fch-ambiente {
	--fch-velo: 22 19 17; /* noche-950 */
	--fch-fundido: 5rem;
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: end;
	gap: 0;
	min-height: clamp(26rem, 140vw, 42rem);
	margin-inline: calc(var(--fch-esp-pagina) * -1);
	margin-bottom: var(--fch-esp-4);
	padding: 0;
	overflow: hidden;
	color: var(--fch-color-texto);
}

.fch-ambiente__fondo,
.fch-ambiente__fondo img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}

.fch-ambiente__fondo img {
	object-fit: cover;
	object-position: center 40%;
}

/* El velo va con el texto: donde haya texto, hay velo (el fundido queda por encima de la primera línea). */
.fch-ambiente .fch-ambiente__texto {
	display: grid;
	gap: var(--fch-esp-3);
	padding: calc(var(--fch-fundido) + var(--fch-esp-4)) var(--fch-esp-pagina) var(--fch-esp-6);
	background: linear-gradient(to bottom, rgb(var(--fch-velo) / 0) 0, rgb(var(--fch-velo) / 0.78) var(--fch-fundido), rgb(var(--fch-velo) / 0.84) 100%);
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.fch-ambiente .fch-ambiente__texto > * {
	margin: 0;
}

.fch-ambiente .fch-antetitulo,
.fch-ambiente .fch-entradilla,
.fch-ambiente .fch-sel__aviso-venta,
.fch-ambiente p {
	color: var(--fch-color-texto); /* cera-100: el suave y el oro pequeños no se usan sobre foto */
}

.fch-ambiente .fch-antetitulo::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	margin-right: var(--fch-esp-2);
	vertical-align: middle;
	background-color: var(--fch-color-acento-decor);
}

.fch-ambiente h1,
.fch-ambiente h2 {
	color: var(--fch-color-texto);
}

/* Sin el texto envuelto (otras plantillas): la cabecera de siempre. */
.fch-articulo__cabecera:not(.fch-ambiente) .fch-ambiente__texto,
.fch-seccion__cabecera:not(.fch-ambiente) .fch-ambiente__texto {
	display: contents;
}

/* 1.10.13 · El texto ocupa todo el ancho en el móvil: en las cabeceras de sección (base.css) se quedaba a 21 rem y
 * dejaba una tira de foto sin velo con un borde recto a la derecha. */
.fch-ambiente {
	grid-template-columns: minmax(0, 1fr);
}

.fch-ambiente > .fch-ambiente__texto {
	max-width: none;
}

/* Banda de ambiente de la portada (cabecera de «Un producto · dos vidas»): más baja. */
.fch-ambiente--banda {
	min-height: clamp(20rem, 100vw, 30rem);
	margin-bottom: var(--fch-esp-8);
}

.fch-ambiente--banda .fch-ambiente__texto {
	align-items: end;
}

.fch-ambiente--banda .fch-btn--fantasma {
	justify-self: start;
	min-height: var(--fch-tactil-min);
}

@media (min-width: 48em) {
	.fch-ambiente {
		--fch-fundido: 7rem;
		align-content: stretch; /* la fila (auto) llena la cabecera: el velo llega de arriba abajo */
		min-height: clamp(22rem, 42vw, 32rem);
		margin-inline: 0;
		border-radius: var(--fch-radio-lg);
		box-shadow: var(--fch-sombra-2);
	}

	.fch-ambiente__fondo img {
		object-position: center;
	}

	.fch-ambiente .fch-ambiente__texto {
		align-self: stretch;
		align-content: center;
		width: min(44rem, 72%);
		padding: var(--fch-esp-10) calc(var(--fch-fundido) + var(--fch-esp-6)) var(--fch-esp-10) var(--fch-esp-10);
		background: linear-gradient(to right, rgb(var(--fch-velo) / 0.84) 0, rgb(var(--fch-velo) / 0.78) calc(100% - var(--fch-fundido)), rgb(var(--fch-velo) / 0) 100%);
	}

	.fch-ambiente--banda {
		min-height: clamp(18rem, 30vw, 24rem);
	}
}

@media (min-width: 64em) {
	.fch-ambiente .fch-ambiente__texto {
		width: min(46rem, 62%);
	}
}

@media print {
	.fch-ambiente__fondo {
		display: none;
	}

	.fch-ambiente .fch-ambiente__texto {
		background: none;
		text-shadow: none;
	}
}

/* ---------------------------------------------------------------- Descargas PDF */
.fch-descargas__intro {
	max-width: var(--fch-ancho-lectura);
	color: var(--fch-color-texto-suave);
}

.fch-descargas__grupo {
	margin: var(--fch-esp-6) 0 var(--fch-esp-3);
	font-size: var(--fch-texto-lg);
}

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

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

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

.fch-descarga {
	display: flex;
	align-items: center;
	gap: var(--fch-esp-3);
	min-height: var(--fch-control-alto, 3rem);
	padding: var(--fch-esp-3) var(--fch-esp-4);
	border: var(--fch-borde-fino) solid var(--fch-color-borde-control);
	border-radius: var(--fch-radio-md);
	background-color: var(--fch-color-superficie);
	color: var(--fch-color-texto);
	text-decoration: none;
}

.fch-descarga:hover {
	border-color: var(--fch-color-accion);
}

.fch-descarga:hover .fch-descarga__titulo {
	text-decoration: underline;
}

.fch-descarga__icono {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--fch-color-acento);
}

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

.fch-descarga__peso {
	color: var(--fch-color-texto-suave);
	white-space: nowrap;
}

/* Un solo PDF dentro de un bloque (marca blanca, eventos). */
.fch-descarga-suelta {
	margin: var(--fch-esp-4) 0 0;
}

/* ---------------------------------------------------------------- «En su sitio» (composiciones en ambiente) */
.fch-sitio__nota {
	max-width: var(--fch-ancho-lectura);
	color: var(--fch-color-texto-suave);
	font-size: var(--fch-texto-sm);
}

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

.fch-sitio__item {
	flex-basis: min(82%, 22rem);
}

.fch-sitio__foto {
	margin: 0;
	overflow: hidden;
	border-radius: var(--fch-radio-md);
	background: var(--fch-foto-fondo);
}

.fch-sitio__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* 1.10.2 · Composición que solo está en 1:1: cuadrada, sin recortarla a 4:5. */
.fch-sitio__foto--1x1 img {
	aspect-ratio: 1;
}

@media (min-width: 48em) {
	.fch-sitio__item {
		flex-basis: calc((100% - var(--fch-esp-3) * 2) / 3);
	}
}

@media (min-width: 64em) {
	.fch-sitio__item--ancha {
		flex-basis: calc((100% - var(--fch-esp-3)) / 2);
	}

	.fch-sitio__item--ancha img {
		aspect-ratio: 16 / 9;
	}
}