/* =========================================================================
   Hormiganzas — artículo
   Solo se carga en single.php. Contiene la prosa, el índice, las tablas,
   los bloques de cierre y la columna lateral.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Rejilla
   ---------------------------------------------------------------------- */

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

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

.hz-articulo__cuerpo {
	min-width: 0;
}

.hz-lateral {
	min-width: 0;
}

/* -------------------------------------------------------------------------
   2. Cabecera y firma
   ---------------------------------------------------------------------- */

.hz-articulo__titulo {
	max-width: 22ch;
	margin-bottom: var(--hz-e6);
}

.hz-firma {
	display: flex;
	align-items: center;
	gap: var(--hz-e3);
	padding-bottom: var(--hz-e6);
	border-bottom: var(--hz-borde-contenedor);
}

.hz-firma__foto {
	border-radius: 50%;
	flex-shrink: 0;
}

.hz-firma__datos p {
	margin: 0;
}

.hz-firma__nombre {
	font-size: var(--hz-t-sm);
	font-weight: 600;
	line-height: 1.4;
}

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

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

.hz-firma__rol {
	font-weight: 400;
	color: var(--hz-secundario);
}

.hz-firma__fechas {
	font-size: var(--hz-t-xs);
	color: var(--hz-terciario);
	line-height: 1.5;
}

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

/* -------------------------------------------------------------------------
   3. Respuesta directa
   El bloque que Google puede tomar como fragmento destacado. Va primero
   y en tinte, que el manual reserva justo para esto y para las citas.
   ---------------------------------------------------------------------- */

.hz-respuesta {
	margin: var(--hz-e8) 0;
	padding: var(--hz-e6);
	background: var(--hz-tinte);
	border-radius: var(--hz-radio-bloque);
}

.hz-respuesta__rotulo {
	margin: 0 0 var(--hz-e3);
	font-family: var(--hz-fuente-cuerpo);
	font-size: var(--hz-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hz-jade);
}

.hz-respuesta__texto {
	font-size: var(--hz-t-lg);
	line-height: 1.6;
	color: var(--hz-tinta);
}

.hz-respuesta__texto p:last-child {
	margin-bottom: 0;
}

/* Una sola cifra resaltada por bloque: la que responde el titular. */
.hz-respuesta__texto strong {
	font-family: var(--hz-fuente-titular);
	font-weight: 700;
	background: linear-gradient(transparent 62%, var(--hz-lima) 62%);
	padding-inline: 0.1em;
}

.hz-respuesta__fuente {
	margin: var(--hz-e4) 0 0;
	font-size: var(--hz-t-xs);
	color: var(--hz-secundario);
}

/* -------------------------------------------------------------------------
   4. Índice de contenidos
   ---------------------------------------------------------------------- */

.hz-indice {
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-bloque);
	padding: var(--hz-e5, 1.25rem) var(--hz-e6);
}

.hz-indice--inline {
	margin: var(--hz-e8) 0;
}

.hz-indice--lateral {
	display: none;
}

.hz-indice__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hz-e2);
	margin: 0 0 var(--hz-e3);
}

.hz-indice__rotulo {
	font-family: var(--hz-fuente-cuerpo);
	font-size: var(--hz-t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hz-jade);
}

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

.hz-indice__lista {
	margin: 0;
	padding: 0 0 0 1.3em;
	display: grid;
	gap: var(--hz-e2);
	font-size: var(--hz-t-sm);
}

.hz-indice__lista li::marker {
	color: var(--hz-terciario);
	font-variant-numeric: tabular-nums;
}

.hz-indice__lista a {
	color: var(--hz-secundario);
	text-decoration: none;
	line-height: 1.45;
}

.hz-indice__lista a:hover {
	color: var(--hz-jade);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   5. Prosa
   Columna limitada a 68 caracteres. Todo lo que no sea texto —tablas,
   anuncios— puede salirse de esa medida.
   ---------------------------------------------------------------------- */

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

.hz-prosa > * {
	max-width: var(--hz-medida);
}

.hz-prosa h2 {
	margin-top: var(--hz-e12);
	/* Al saltar desde el índice, el titular no puede quedar bajo la
	   cabecera pegajosa ni bajo la barra de administración. */
	scroll-margin-top: calc(5.5rem + var(--hz-barra-admin));
}

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

.hz-prosa p,
.hz-prosa li {
	font-size: var(--hz-t-base);
	line-height: 1.7;
}

.hz-prosa ul,
.hz-prosa ol {
	margin: 0 0 var(--hz-e6);
	padding-left: 1.35em;
}

.hz-prosa li {
	margin-bottom: var(--hz-e2);
}

.hz-prosa li::marker {
	color: var(--hz-jade);
}

.hz-prosa a {
	color: var(--hz-jade);
	text-decoration: underline;
}

.hz-prosa a:hover {
	color: var(--hz-enlace-hover);
}

.hz-prosa img {
	border-radius: var(--hz-radio-bloque);
}

.hz-prosa figure {
	margin: var(--hz-e8) 0;
}

.hz-prosa figcaption {
	margin-top: var(--hz-e2);
	font-size: var(--hz-t-xs);
	color: var(--hz-terciario);
}

/* Citas: 4px a la izquierda, como manda el sistema */
.hz-prosa blockquote {
	margin: var(--hz-e8) 0;
	padding: var(--hz-e2) 0 var(--hz-e2) var(--hz-e6);
	border-left: var(--hz-borde-cita) solid var(--hz-jade);
	background: var(--hz-tinte);
	border-radius: 0 var(--hz-radio-anuncio) var(--hz-radio-anuncio) 0;
	font-size: var(--hz-t-lg);
	color: var(--hz-tinta);
}

.hz-prosa blockquote p:last-child {
	margin-bottom: 0;
}

/* --- Tablas ------------------------------------------------------------
   En escritorio, tabla normal con scroll horizontal si hace falta.
   En móvil se apilan por fila usando data-label, que WordPress no genera:
   por eso el borde inferior y el título de fila hacen el trabajo.
   -------------------------------------------------------------------- */

.hz-prosa .wp-block-table,
.hz-prosa figure.wp-block-table {
	max-width: none;
	margin: var(--hz-e8) 0;
	overflow-x: auto;
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-bloque);
}

.hz-prosa table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hz-t-sm);
}

.hz-prosa th,
.hz-prosa td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--hz-borde);
}

.hz-prosa th {
	background: var(--hz-tinte);
	font-family: var(--hz-fuente-cuerpo);
	font-weight: 600;
	color: var(--hz-jade);
	white-space: nowrap;
}

.hz-prosa tbody tr:last-child td {
	border-bottom: 0;
}

.hz-prosa td:first-child {
	font-weight: 600;
	color: var(--hz-tinta);
}

/* Cifras alineadas por la coma decimal */
.hz-prosa td {
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   6. Bloques de cierre
   ---------------------------------------------------------------------- */

/* .hz-bloque__rotulo y .hz-enlace-seccion viven en main.css: los usan
   también la portada, el silo y el 404. */

/* Fuentes oficiales */
.hz-fuentes {
	margin: var(--hz-e12) 0;
	padding: var(--hz-e6);
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-bloque);
}

.hz-fuentes__lista {
	margin: 0;
	padding-left: 1.2em;
	display: grid;
	gap: var(--hz-e2);
	font-size: var(--hz-t-sm);
}

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

/* Preguntas frecuentes */
.hz-faq {
	margin: var(--hz-e12) 0;
}

.hz-faq__lista {
	display: grid;
	gap: var(--hz-e2);
}

.hz-faq__item {
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-anuncio);
	background: var(--hz-papel);
}

.hz-faq__pregunta {
	padding: var(--hz-e4) var(--hz-e6);
	font-family: var(--hz-fuente-titular);
	font-size: var(--hz-t-base);
	font-weight: 600;
	color: var(--hz-tinta);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 3rem;
}

.hz-faq__pregunta::-webkit-details-marker {
	display: none;
}

.hz-faq__pregunta::after {
	content: '+';
	position: absolute;
	right: var(--hz-e6);
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--hz-jade);
}

.hz-faq__item[open] .hz-faq__pregunta::after {
	content: '−';
}

.hz-faq__respuesta {
	padding: 0 var(--hz-e6) var(--hz-e4);
	font-size: var(--hz-t-sm);
	color: var(--hz-secundario);
}

.hz-faq__respuesta p:last-child {
	margin-bottom: 0;
}

/* Aviso de riesgo */
.hz-aviso {
	margin: var(--hz-e12) 0;
	padding: var(--hz-e6);
	border-radius: var(--hz-radio-bloque);
	border-left: var(--hz-borde-cita) solid var(--hz-atencion);
	background: #FBF8F1;
}

.hz-aviso--alto {
	border-left-color: var(--hz-costo);
	background: #FCF4F4;
}

.hz-aviso--bajo {
	border-left-color: var(--hz-jade);
	background: var(--hz-tinte);
}

.hz-aviso__rotulo {
	margin: 0 0 var(--hz-e3);
	font-size: var(--hz-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hz-atencion);
}

.hz-aviso--alto .hz-aviso__rotulo { color: var(--hz-costo); }
.hz-aviso--bajo .hz-aviso__rotulo { color: var(--hz-jade); }

.hz-aviso__texto {
	font-size: var(--hz-t-sm);
	line-height: 1.65;
	color: var(--hz-tinta);
}

.hz-aviso__texto p:last-child {
	margin-bottom: 0;
}

.hz-aviso__descargo {
	margin: var(--hz-e4) 0 0;
	font-size: var(--hz-t-xs);
	color: var(--hz-secundario);
}

/* Caja de autor — territorio del lila */
.hz-autor {
	display: flex;
	gap: var(--hz-e4);
	margin: var(--hz-e12) 0;
	padding: var(--hz-e6);
	border-radius: var(--hz-radio-bloque);
	background: var(--hz-lila-tinte);
}

.hz-autor__foto {
	border-radius: 50%;
	flex-shrink: 0;
}

.hz-autor__cuerpo p {
	margin: 0 0 var(--hz-e2);
}

.hz-autor__nombre {
	font-family: var(--hz-fuente-titular);
	font-size: var(--hz-t-lg);
	font-weight: 700;
	color: var(--hz-tinta);
}

.hz-autor__bio {
	font-size: var(--hz-t-sm);
	line-height: 1.6;
	color: var(--hz-secundario);
}

.hz-autor__enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hz-e4);
	margin-bottom: 0;
	font-size: var(--hz-t-xs);
	font-weight: 600;
}

.hz-autor__enlaces a {
	color: var(--hz-lila-oscuro);
	text-decoration: none;
}

.hz-autor__enlaces a:hover {
	text-decoration: underline;
}

/* Avisos de actualización — también lila */
.hz-avisos {
	display: grid;
	gap: var(--hz-e4);
	margin: var(--hz-e12) 0;
	padding: var(--hz-e6);
	border-radius: var(--hz-radio-bloque);
	border: 1px solid var(--hz-lila-tinte);
	background: var(--hz-papel);
}

.hz-avisos__titulo {
	margin: 0 0 var(--hz-e1);
	font-family: var(--hz-fuente-titular);
	font-size: var(--hz-t-lg);
	font-weight: 700;
}

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

.hz-avisos__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hz-e2);
}

.hz-avisos__form input[type='email'] {
	flex: 1 1 15rem;
	padding: 0.7rem 1rem;
	border: var(--hz-borde-contenedor);
	border-radius: var(--hz-radio-pildora);
	font-family: inherit;
	font-size: var(--hz-t-sm);
}

.hz-avisos__form input[type='email']:focus {
	border-color: var(--hz-lila);
	outline: none;
}

/* Relacionados */
.hz-relacionados {
	margin-top: var(--hz-e12);
	padding-top: var(--hz-e8);
	border-top: var(--hz-borde-contenedor);
}

.hz-relacionados__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hz-e3);
}

/* -------------------------------------------------------------------------
   7. Columna lateral
   ---------------------------------------------------------------------- */

.hz-verificado {
	margin-bottom: var(--hz-e6);
	padding: var(--hz-e4) var(--hz-e6);
	border-radius: var(--hz-radio-bloque);
	background: var(--hz-tinte);
}

.hz-verificado__rotulo {
	display: flex;
	align-items: center;
	gap: var(--hz-e2);
	margin: 0 0 var(--hz-e2);
	font-size: var(--hz-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hz-jade);
}

.hz-verificado__texto {
	margin: 0;
	font-size: var(--hz-t-xs);
	line-height: 1.5;
	color: var(--hz-secundario);
}

/* -------------------------------------------------------------------------
   8. Escritorio
   ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.hz-articulo__rejilla {
		grid-template-columns: minmax(0, 1fr) var(--hz-lateral);
		gap: var(--hz-canal);
		align-items: start;
	}

	.hz-indice--inline {
		display: none;
	}

	.hz-indice--lateral {
		display: block;
		margin-bottom: var(--hz-e6);
	}

	.hz-lateral__pegado {
		position: sticky;
		top: calc(6rem + var(--hz-barra-admin));
	}

	/* El índice lateral no puede crecer sin límite: si el artículo tiene
	   veinte secciones, se hace scroll dentro de él y no de la página. */
	.hz-indice--lateral .hz-indice__lista {
		max-height: 45vh;
		overflow-y: auto;
	}

	.hz-autor {
		gap: var(--hz-e6);
	}

	.hz-avisos {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: var(--hz-e8);
	}
}