/*
 * El blog, sus notas, el centro de ayuda y la página de error (01-11-2026), sin Elementor. Van en el documento de las landings y
 * se visten con sus tokens (--ld-*, en landing.css) y las piezas de las secundarias (secundaria.css); acá sólo lo que no tienen.
 * Ninguna regla escribe un color, un radio ni un tamaño de letra a mano (ver MARCA.md).
 *
 * 360:  una columna con 16 de margen; los temas en renglones (los que entren en cada uno); las tarjetas una debajo de la otra; la nota sin caja.
 * 768:  tarjetas de a dos; la nota en una columna de 760 con el texto en la hoja blanca; los botones lado a lado.
 * 1280: tarjetas de a tres dentro de 1240; la nota en su columna de 760 centrada.
 */

/* ---------- La portada y los temas ---------- */

.bl-portada .ld-etiqueta a {
	color: inherit;
	text-decoration: none;
}

/* En varios renglones si no entran (nunca un tema fuera del borde). */
.bl-temas {
	display: flex;
	flex-wrap: wrap;
	justify-content: inherit;
	gap: 8px;
	max-width: 100%;
	margin-top: 28px;
}

.bl-temas a {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: var(--ld-toque);
	padding: 0 18px;
	border: 1.5px solid var(--ld-linea);
	border-radius: var(--ld-r-pildora);
	background: var(--ld-papel);
	color: var(--ld-tinta);
	font-size: var(--ld-letra-pieza);
	text-decoration: none;
	white-space: nowrap;
}

.bl-temas a:hover {
	border-color: var(--ld-nube);
}

.bl-temas a[aria-current] {
	border-color: var(--ld-azul);
	background: var(--ld-azul);
	color: var(--ld-papel);
}

/* ---------- La lista de notas ---------- */

.bl-lista {
	padding-bottom: var(--ld-seccion);
}

.bl-lista-titulo {
	margin-bottom: 32px;
}

.bl-grilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.bl-tarjeta {
	min-width: 0;
	border-radius: var(--ld-r-pieza);
	background: var(--ld-papel);
	box-shadow: var(--ld-sombra);
	overflow: hidden;
}

.bl-tarjeta-enlace {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.bl-foto {
	aspect-ratio: 16 / 9;
	background: var(--ld-azul-suave);
}

.bl-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bl-tarjeta-texto {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 10px;
	padding: 20px 24px 24px;
}

.bl-tarjeta-titulo {
	color: var(--ld-tinta);
	font-size: var(--ld-letra-subtitulo);
	line-height: 1.3;
	text-wrap: pretty;
}

.bl-tarjeta-enlace:hover .bl-tarjeta-titulo {
	color: var(--ld-azul-tinta);
}

.bl-tarjeta-resumen {
	color: var(--ld-gris);
	font-size: var(--ld-letra-pieza);
	line-height: 1.55;
}

.bl-fecha {
	color: var(--ld-tenue);
	font-size: var(--ld-letra-nota);
}

.bl-paginas {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
}

/* ---------- Los caminos (centro de ayuda y error) ---------- */

.bl-caminos {
	display: grid;
	gap: 12px;
	width: 100%;
	margin-top: 28px;
}

/* ---------- La nota ---------- */

.bl-nota {
	max-width: 760px;
	padding-block: 20px var(--ld-seccion);
}

.bl-miga a {
	color: inherit;
	text-decoration: none;
}

.bl-miga span {
	margin-inline: 6px;
}

.bl-nota-titulo {
	margin-top: 16px;
	color: var(--ld-tinta);
	font-size: var(--ld-letra-seccion);
	line-height: 1.15;
}

.bl-nota-cabeza .bl-fecha {
	margin-top: 14px;
}

.bl-nota-foto {
	margin-top: 28px;
}

.bl-nota-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ld-r-pieza);
}

/* El texto: en el teléfono va directo sobre el fondo, sin caja blanca (la hoja de los textos legales). */
.bl-hoja {
	min-width: 0;
	margin-top: 32px;
	color: var(--ld-gris);
	font-size: var(--ld-letra-base);
	line-height: 1.7;
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.bl-hoja > * + * {
	margin-top: 16px;
}

.bl-hoja :is(h2, h3, h4) {
	margin-top: 36px;
	color: var(--ld-tinta);
	line-height: 1.25;
}

.bl-hoja h2 {
	font-size: var(--ld-letra-cifra);
}

.bl-hoja :is(h3, h4) {
	font-size: var(--ld-letra-subtitulo);
}

.bl-hoja :is(h2, h3, h4) + * {
	margin-top: 10px;
}

.bl-hoja strong {
	color: var(--ld-tinta);
	font-weight: 600;
}

.bl-hoja :is(ul, ol) {
	display: grid;
	gap: 8px;
}

.bl-hoja ul li {
	position: relative;
	padding-left: 22px;
}

.bl-hoja ul li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: .68em;
	width: 6px;
	height: 6px;
	border-radius: var(--ld-r-redondo);
	background: var(--ld-azul);
}

.bl-hoja ol {
	padding-left: 22px;
	list-style: decimal;
}

.bl-hoja :is(img, video, iframe) {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--ld-r-chico);
}

.bl-hoja iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.bl-hoja figure {
	margin-inline: 0;
}

.bl-hoja figcaption {
	margin-top: 8px;
	color: var(--ld-tenue);
	font-size: var(--ld-letra-nota);
}

.bl-hoja blockquote {
	margin: 24px 0 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--ld-azul);
	color: var(--ld-tinta);
}

.bl-hoja hr {
	height: 1px;
	margin-block: 32px;
	border: 0;
	background: var(--ld-linea);
}

.bl-hoja a {
	color: var(--ld-azul-tinta);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- La página de error ---------- */

.bl-error {
	display: grid;
	justify-items: center;
	max-width: 760px;
	padding-block: var(--ld-seccion);
	text-align: center;
}

.bl-error .ld-titular {
	margin-top: 16px;
}

.bl-error .ld-bajada {
	margin-top: 14px;
}

/* ---------- 768 en adelante ---------- */

@media (min-width: 768px) {
	.bl-grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bl-caminos {
		display: flex;
		flex-wrap: wrap;
		width: auto;
	}

	.bl-error .bl-caminos {
		justify-content: center;
	}

	.bl-hoja {
		padding: 48px 56px;
		border-radius: var(--ld-r-tarjeta);
		background: var(--ld-papel);
		box-shadow: var(--ld-sombra);
	}
}

@media (min-width: 1280px) {
	.bl-grilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}