/* =========================================================================
   Hormiganzas — portada
   Sin publicidad a propósito: es la página que decide si el visitante
   se queda. El orden responde a «qué es esto» antes de ofrecer nada.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Hero
   ---------------------------------------------------------------------- */

.hz-hero {
	padding-block: var(--hz-e12) var(--hz-e8);
}

.hz-hero__antetitulo {
	margin: 0 0 var(--hz-e4);
	font-size: var(--hz-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hz-jade);
}

.hz-hero__titulo {
	max-width: 18ch;
	margin: 0 0 var(--hz-e6);
	font-size: var(--hz-t-3xl);
	line-height: 1.1;
}

.hz-hero__entrada {
	max-width: 58ch;
	margin: 0 0 var(--hz-e8);
	font-size: var(--hz-t-lg);
	line-height: 1.6;
	color: var(--hz-secundario);
}

.hz-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hz-e6);
	margin: 0;
}

/* -------------------------------------------------------------------------
   2. Manifiesto
   Único gradiente de la página. El manual permite uno por vista.
   ---------------------------------------------------------------------- */

.hz-manifiesto {
	padding-block: var(--hz-e8);
}

.hz-manifiesto .hz-contenedor {
	padding: var(--hz-e8) var(--hz-e6);
	border-radius: var(--hz-radio-superficie);
	background: var(--hz-grad-tinta-jade);
	color: var(--hz-papel);
}

.hz-manifiesto__cita {
	margin: 0 0 var(--hz-e4);
	padding: 0;
	border: 0;
}

.hz-manifiesto__cita p {
	margin: 0;
	max-width: 34ch;
	font-family: var(--hz-fuente-titular);
	font-size: var(--hz-t-2xl);
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.hz-manifiesto__nota {
	margin: 0;
	max-width: 52ch;
	font-size: var(--hz-t-sm);
	line-height: 1.6;
	color: var(--hz-tinte);
}

/* -------------------------------------------------------------------------
   3. Los seis temas
   ---------------------------------------------------------------------- */

.hz-temas,
.hz-empezar,
.hz-ultimos,
.hz-cierre {
	padding-block: var(--hz-e12);
}

.hz-temas__rejilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hz-e4);
}

.hz-tema {
	display: flex;
	flex-direction: column;
	gap: var(--hz-e3);
	padding: 0 var(--hz-e6) var(--hz-e6);
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-bloque);
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Sin imagen la tarjeta no puede quedarse sin aire arriba. */
.hz-tema:not(:has(.hz-tema__enlace-imagen)) {
	padding-top: var(--hz-e6);
}

.hz-tema__enlace-imagen {
	display: block;
	margin: 0 calc(var(--hz-e6) * -1) var(--hz-e3);
	aspect-ratio: 16 / 9;
	background: var(--hz-tinte);
}

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

.hz-tema:hover {
	border-color: var(--hz-jade);
	box-shadow: var(--hz-sombra);
}

.hz-tema__titulo {
	margin: 0;
	font-size: var(--hz-t-xl);
}

.hz-tema__titulo a {
	color: var(--hz-tinta);
	text-decoration: none;
}

.hz-tema__titulo a:hover {
	color: var(--hz-jade);
}

.hz-tema__resumen {
	margin: 0;
	font-size: var(--hz-t-sm);
	line-height: 1.6;
	color: var(--hz-secundario);
	flex: 1;
}

.hz-tema__enlace {
	margin: 0;
}

/* -------------------------------------------------------------------------
   4. Por dónde empezar
   ---------------------------------------------------------------------- */

.hz-empezar__rejilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hz-e6);
}

.hz-destacado {
	padding-bottom: var(--hz-e6);
	border-bottom: var(--hz-borde-contenedor);
}

.hz-destacado--principal {
	padding: var(--hz-e8);
	border: 0;
	border-radius: var(--hz-radio-bloque);
	background: var(--hz-tinte);
}

.hz-destacado__tema {
	margin: 0 0 var(--hz-e2);
	font-size: var(--hz-t-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hz-jade);
}

.hz-destacado__nota {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--hz-secundario);
}

.hz-destacado__titulo {
	margin: 0 0 var(--hz-e2);
	font-size: var(--hz-t-lg);
	line-height: 1.3;
}

.hz-destacado--principal .hz-destacado__titulo {
	font-size: var(--hz-t-2xl);
	max-width: 20ch;
}

.hz-destacado__titulo a {
	color: var(--hz-tinta);
	text-decoration: none;
}

.hz-destacado__titulo a:hover {
	color: var(--hz-jade);
}

.hz-destacado__extracto {
	margin: 0 0 var(--hz-e4);
	max-width: 56ch;
	font-size: var(--hz-t-base);
	line-height: 1.6;
	color: var(--hz-secundario);
}

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

.hz-destacado__sep {
	margin-inline: 0.35rem;
}

/* -------------------------------------------------------------------------
   5. Lo último publicado
   ---------------------------------------------------------------------- */

.hz-ultimos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--hz-borde-contenedor);
}

.hz-ultimo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hz-e1);
	padding: var(--hz-e4) 0;
	border-bottom: var(--hz-borde-contenedor);
}

.hz-ultimo__fecha {
	font-size: var(--hz-t-xs);
	color: var(--hz-terciario);
	font-variant-numeric: tabular-nums;
}

.hz-ultimo__titulo {
	font-family: var(--hz-fuente-titular);
	font-size: var(--hz-t-lg);
	font-weight: 600;
	line-height: 1.35;
	color: var(--hz-tinta);
	text-decoration: none;
}

.hz-ultimo__titulo:hover {
	color: var(--hz-jade);
}

.hz-ultimo__tema {
	font-size: var(--hz-t-xs);
	color: var(--hz-jade);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   6. Escritorio
   ---------------------------------------------------------------------- */

@media (min-width: 768px) {
	.hz-hero {
		padding-block: var(--hz-e16) var(--hz-e12);
	}

	.hz-manifiesto .hz-contenedor {
		padding: var(--hz-e12);
	}

	.hz-temas__rejilla {
		grid-template-columns: repeat(2, 1fr);
	}

	.hz-empezar__rejilla {
		grid-template-columns: repeat(2, 1fr);
	}

	.hz-destacado--principal {
		grid-column: 1 / -1;
	}

	.hz-ultimo {
		grid-template-columns: 7rem 1fr 12rem;
		align-items: baseline;
		gap: var(--hz-e4);
	}

	.hz-ultimo__tema {
		text-align: right;
	}
}

@media (min-width: 1100px) {
	.hz-temas__rejilla {
		grid-template-columns: repeat(3, 1fr);
	}
}