/* =========================================================================
   Hormiganzas — silo temático
   Se apoya en articulo.css (respuesta directa, prosa, tablas) y añade
   solo lo propio de la página pilar.
   ========================================================================= */

.hz-silo {
	padding-block: var(--hz-e6) var(--hz-e12);
}

.hz-silo__portada {
	margin: 0 0 var(--hz-e8);
	border-radius: var(--hz-radio-superficie);
	overflow: hidden;
	aspect-ratio: 3 / 1;
	background: var(--hz-tinte);
}

.hz-silo__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.hz-silo__portada {
		aspect-ratio: 16 / 9;
		border-radius: var(--hz-radio-bloque);
	}
}

.hz-silo__cabecera {
	margin-bottom: var(--hz-e6);
}

.hz-silo__titulo {
	margin: 0 0 var(--hz-e3);
	max-width: 18ch;
}

.hz-silo__meta {
	margin: 0;
	font-size: var(--hz-t-sm);
	color: var(--hz-terciario);
}

.hz-silo__sep {
	margin-inline: 0.4rem;
}

/* La respuesta directa del silo pesa más que la del artículo: es la
   primera respuesta de todo el tema. */
.hz-respuesta--silo .hz-respuesta__texto {
	font-size: var(--hz-t-xl);
	line-height: 1.5;
}

.hz-silo__pilar {
	margin-block: var(--hz-e12);
	padding-bottom: var(--hz-e12);
	border-bottom: var(--hz-borde-contenedor);
}

.hz-silo__guias {
	margin-top: var(--hz-e8);
}

.hz-silo__guias-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hz-e3);
	margin-bottom: var(--hz-e8);
}

.hz-silo__guias-titulo {
	margin: 0;
	font-size: var(--hz-t-2xl);
	max-width: 24ch;
}

.hz-silo__guias-meta {
	margin: 0;
	font-size: var(--hz-t-sm);
	color: var(--hz-terciario);
}

/* Los estilos de página estática y 404 viven en main.css, que es la hoja
   que se carga en esas dos plantillas. */