/* =====================================================================
   SBELTIA — Blog: listado y ficha de artículo

   Se carga solo en blog.php y en las fichas de artículo, con
   $SEO['css'], igual que css/contacto.css. No entra en el paquete que
   descargan las otras setenta páginas.

   QUÉ ARREGLA

   1. LA MEDIDA. El texto del artículo salía a 1100 px de ancho con
      cuerpo de 16 px: unos 150 caracteres por línea, el doble de lo que
      un ojo sigue sin perderse al volver al principio del renglón. Es
      el defecto más grave que tenía la página y el que más se nota.
      Ahora el texto vive en una columna de ~68 caracteres y la foto de
      cabecera y las citas respiran por fuera de ella.

   2. LA ESCALA. Un h2 de 48 px dentro de una columna de lectura es un
      titular de portada, no un epígrafe. La escala del artículo se
      rehace entera, con más aire ARRIBA de cada epígrafe que debajo:
      así un epígrafe pertenece visiblemente a lo que viene después.

   3. EL LISTADO. Era una rejilla de tres tarjetas iguales con foto,
      titular y una flecha. Con un artículo publicado dejaba dos tercios
      de página en blanco, y no decía ni la fecha ni de qué iba.

   Todo el color sale de los tokens de sbeltia-theme.css. Aquí no se
   inventa ni un valor hexadecimal.
   ===================================================================== */


/* =====================================================================
   1. LISTADO
   ===================================================================== */

.page-blog .blog-destacado{
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
	gap: 56px;
	margin-bottom: 72px;
}

.page-blog .blog-destacado-foto{
	display: block;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--sb-sh-md);
}

.page-blog .blog-destacado-foto figure{
	margin: 0;
	aspect-ratio: 4 / 3;
}

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

/* La fecha y los minutos de lectura. Van en versalitas pequeñas y en
   tinta suave: son datos de servicio, no titulares. */
.blog-meta{
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--default-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sb-ink-soft);
	margin: 0 0 18px;
}

.blog-meta time{
	color: inherit;
}

.blog-meta-sep{
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--sb-gold);
	flex: none;
}

.page-blog .blog-destacado-titulo{
	font-family: var(--accent-font);
	font-size: clamp(32px, 3.4vw, 46px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0 0 20px;
}

.page-blog .blog-destacado-titulo a,
.page-blog .blog-fila-titulo a{
	color: var(--sb-brand);
	background-image: linear-gradient(var(--sb-gold), var(--sb-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.45s var(--sb-e-out), color 0.3s var(--sb-e-out);
}

.page-blog .blog-destacado-titulo a:hover,
.page-blog .blog-destacado-titulo a:focus-visible,
.page-blog .blog-fila-titulo a:hover,
.page-blog .blog-fila-titulo a:focus-visible{
	color: var(--sb-cta-b);
	background-size: 100% 1px;
}

.blog-extracto{
	font-size: 17px;
	line-height: 1.65;
	color: var(--sb-ink-soft);
	max-width: 54ch;
	margin: 0;
}

/* El «Leer el artículo» del destacado. No es un botón: el titular ya es
   el enlace, y poner dos controles al mismo sitio obliga a elegir entre
   dos cosas idénticas. Esto es la señal de que el titular se puede
   pulsar, y por eso va con aria-hidden en el HTML. */
.blog-enlace{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 26px;
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sb-gold-deep);
}

.blog-enlace::after{
	content: '';
	width: 26px;
	height: 1px;
	background: currentColor;
	transition: width 0.45s var(--sb-e-out);
}

.blog-destacado:hover .blog-enlace::after{
	width: 44px;
}

/* --- El resto de artículos, en lista ---------------------------------
   Filas y no tarjetas: una tarjeta dice «soy una unidad cerrada» y en un
   índice de artículos lo que importa es poder recorrerlos de un vistazo.
   El filete entre filas hace ese trabajo con una línea. */
.blog-lista{
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--sb-surface-brd);
}

.blog-lista > li{
	border-bottom: 1px solid var(--sb-surface-brd);
}

.page-blog .blog-fila{
	display: grid;
	grid-template-columns: 220px 1fr;
	align-items: start;
	gap: 36px;
	padding: 36px 0;
	transition: background 0.35s var(--sb-e-soft);
}

.page-blog .blog-fila-foto{
	display: block;
	border-radius: 14px;
	overflow: hidden;
}

.page-blog .blog-fila-foto figure{
	margin: 0;
	aspect-ratio: 4 / 3;
}

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

.page-blog .blog-fila-titulo{
	font-family: var(--accent-font);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.22;
	text-wrap: balance;
	margin: 0 0 14px;
}

.page-blog .blog-fila .blog-meta{
	margin-bottom: 12px;
}


/* =====================================================================
   2. FICHA DE ARTÍCULO
   ===================================================================== */

/* --- Barra de progreso de lectura ------------------------------------
   Un filete dorado de 3 px pegado al borde superior. Solo aparece si
   js/blog.js ha podido medir el artículo. */
.blog-progreso{
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
}

.blog-progreso.is-activa{
	opacity: 1;
}

.blog-progreso span{
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--sb-gold), var(--sb-cta-b));
}

/* --- La foto de cabecera ----------------------------------------------
   Venía rota de la plantilla y no se había visto. La figura es
   `display: inline-flex` sin altura, y dentro .reveal img pide
   `height: 100%`: un porcentaje contra un alto automático, que es una
   referencia circular. El navegador la resolvía contra lo que tuviera a
   mano y la foto salía de tres mil setecientos píxeles de alto —diez
   pantallas— empujando el artículo por debajo del pie.
   Con una proporción declarada en la figura, el 100% tiene contra qué
   medirse y la foto mide lo que tiene que medir. */
.blog-articulo .post-image{
	max-width: 1000px;
	margin-inline: auto;
	margin-bottom: 56px;
}

.blog-articulo .post-image figure{
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--sb-sh-md);
}

.blog-articulo .post-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	/* Solo importa cuando la foto es más alta que 16:9 y hay que
	   recortarla: centrada parte la cabeza del retrato por arriba. */
	object-position: 50% 28%;
	display: block;
	border-radius: 0;
}

/* La misma trampa en el listado: la figura declara proporción, así que
   aquí solo hace falta que sea un bloque. */
.page-blog .blog-destacado-foto figure,
.page-blog .blog-fila-foto figure{
	display: block;
}


/* --- La columna de lectura -------------------------------------------
   65–75 caracteres. El texto se centra dentro de la fila de Bootstrap;
   la foto de cabecera se queda a lo ancho, que es donde una foto hace
   algo. */
.blog-articulo .post-content{
	max-width: 68ch;
	margin-inline: auto;
}

.blog-articulo .post-entry{
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.blog-articulo .post-entry p{
	font-size: 19px;
	line-height: 1.75;
	color: var(--sb-ink);
	margin-bottom: 1.5em;
}

/* La entradilla. Abre el artículo con un escalón de tamaño en lugar de
   empezar en frío al mismo cuerpo que el resto. */
.blog-articulo .post-entry > p:first-child{
	font-size: 22px;
	line-height: 1.6;
	color: var(--sb-brand);
	margin-bottom: 1.6em;
}

/* strong tenía font-size: 18px dentro de párrafos de 16: una palabra en
   negrita cambiaba de tamaño a mitad de frase. */
.blog-articulo .post-entry p strong,
.blog-articulo .post-entry li strong{
	font-size: inherit;
	font-weight: 600;
	color: var(--sb-brand);
}

/* --- Epígrafes --------------------------------------------------------
   Más aire arriba que abajo: un epígrafe pertenece a lo que viene
   después, no a lo que acaba de terminar. */
.blog-articulo .post-entry h2,
.blog-articulo .post-entry h3{
	font-family: var(--accent-font);
	color: var(--sb-brand);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.blog-articulo .post-entry h2{
	font-size: 34px;
	line-height: 1.2;
	margin: 2.2em 0 0.55em;
}

.blog-articulo .post-entry h3{
	font-size: 25px;
	line-height: 1.25;
	margin: 1.9em 0 0.5em;
}

.blog-articulo .post-entry h2:first-child,
.blog-articulo .post-entry h3:first-child{
	margin-top: 0;
}

/* --- Listas -----------------------------------------------------------
   Las viñetas redondas del navegador se cambian por un filete dorado:
   es el mismo recurso que usa el resto del sitio para separar. */
.blog-articulo .post-entry ul,
.blog-articulo .post-entry ol{
	margin: 1.6em 0;
	padding-left: 0;
	list-style: none;
}

.blog-articulo .post-entry li{
	position: relative;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--sb-ink);
	padding-left: 34px;
	margin-bottom: 1.1em;
}

.blog-articulo .post-entry ul > li::before{
	content: '';
	position: absolute;
	left: 2px;
	top: 0.72em;
	width: 16px;
	height: 1px;
	background: var(--sb-gold);
}

.blog-articulo .post-entry ol{
	counter-reset: sb-pasos;
}

.blog-articulo .post-entry ol > li{
	counter-increment: sb-pasos;
}

.blog-articulo .post-entry ol > li{
	padding-left: 52px;
}

.blog-articulo .post-entry ol > li::before{
	content: counter(sb-pasos);
	position: absolute;
	left: 0;
	top: 0.08em;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	font-family: var(--accent-font);
	font-size: 18px;
	line-height: 1;
	color: var(--sb-gold-deep);
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--sb-surface-brd);
	border-radius: 50%;
}

/* El párrafo que viene detrás de una lista pertenece al razonamiento que
   la lista abre: necesita separarse de ella, no pegarse al último ítem. */
.blog-articulo .post-entry ul + p,
.blog-articulo .post-entry ol + p{
	margin-top: 1.6em;
}

/* --- Cita -------------------------------------------------------------
   El bloque marrón con el glifo de comillas de 45 px se queda —es el
   idioma del sitio— pero sale de la columna de lectura, porque es
   precisamente lo que tiene que interrumpirla. */
.blog-articulo .post-entry blockquote{
	margin: 2.4em -56px;
	padding: 38px 44px 38px 96px;
	background-position: 42px 40px;
	background-size: 36px;
	box-shadow: var(--sb-sh-md);
}

.blog-articulo .post-entry blockquote p{
	font-size: 23px;
	line-height: 1.5;
	color: var(--white-color);
	margin-bottom: 0.8em;
}

.blog-articulo .post-entry blockquote p:last-child{
	margin-bottom: 0;
}

/* Una cita de varios párrafos es un razonamiento, no una frase: el
   cuerpo baja para que se pueda leer de verdad. */
.blog-articulo .post-entry blockquote p + p{
	font-family: var(--default-font);
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.88);
}

/* --- Pie del artículo -------------------------------------------------- */
.blog-articulo .post-tag-links{
	border-top: 1px solid var(--sb-surface-brd);
	padding-top: 32px;
	margin-top: 56px;
}

.blog-articulo .tag-links{
	font-size: 15px;
	font-family: var(--default-font);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sb-ink-soft);
	gap: 10px;
}

.blog-articulo .post-tags .tag-links{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.blog-articulo .post-tags .tag-links > span{
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--sb-ink-soft);
	background: var(--sb-cream);
	border: 1px solid var(--sb-surface-brd);
	border-radius: 999px;
	padding: 6px 14px;
}

/* El enlace a la ficha del procedimiento del que habla el artículo. Va
   al final, cuando ya se ha leído: quien llega ahí está interesado. */
.post-ficha{
	background: var(--sb-cream);
	border: 1px solid var(--sb-surface-brd);
	border-radius: 18px;
	padding: 32px 34px;
	margin-top: 44px;
}

.post-ficha p{
	font-size: 17px;
	line-height: 1.65;
	color: var(--sb-ink-soft);
	margin: 0 0 22px;
	max-width: 48ch;
}

.blog-volver{
	margin: 44px 0 0;
}

.blog-volver a{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--default-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sb-gold-deep);
}

.blog-volver a::before{
	content: '';
	width: 26px;
	height: 1px;
	background: currentColor;
	transition: width 0.4s var(--sb-e-out);
}

.blog-volver a:hover::before,
.blog-volver a:focus-visible::before{
	width: 40px;
}


/* =====================================================================
   3. SUPERFICIES DEL NAVEGADOR
   Lo que no se dibuja también forma parte del diseño. Por defecto la
   selección de texto sale azul de sistema en una página de crema y
   marrón.
   ===================================================================== */

.blog-articulo ::selection,
.page-blog ::selection{
	background: var(--sb-gold);
	color: #FFFFFF;
}

.blog-articulo .post-entry{
	caret-color: var(--sb-gold-deep);
}

.page-blog a:focus-visible,
.blog-articulo a:focus-visible{
	outline: 2px solid var(--sb-gold-deep);
	outline-offset: 3px;
	border-radius: 2px;
}


/* =====================================================================
   4. PANTALLAS ESTRECHAS
   ===================================================================== */

@media only screen and (max-width: 1199px){
	.page-blog .blog-destacado{
		gap: 40px;
	}

	.blog-articulo .post-entry blockquote{
		margin-inline: -24px;
	}
}

@media only screen and (max-width: 991px){
	.page-blog .blog-destacado{
		grid-template-columns: 1fr;
		gap: 28px;
		margin-bottom: 56px;
	}

	.page-blog .blog-fila{
		grid-template-columns: 170px 1fr;
		gap: 26px;
		padding: 30px 0;
	}

	.blog-articulo .post-entry blockquote{
		margin-inline: 0;
	}
}

@media only screen and (max-width: 767px){
	.page-blog .blog-destacado-titulo{
		font-size: 30px;
	}

	.page-blog .blog-fila{
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 28px 0;
	}

	.page-blog .blog-fila-foto{
		max-width: 260px;
	}

	.page-blog .blog-fila-titulo{
		font-size: 23px;
	}

	.blog-extracto{
		font-size: 16px;
	}

	.blog-articulo .post-entry p,
	.blog-articulo .post-entry li{
		font-size: 17px;
	}

	.blog-articulo .post-entry > p:first-child{
		font-size: 19px;
	}

	.blog-articulo .post-entry h2{
		font-size: 27px;
	}

	.blog-articulo .post-entry h3{
		font-size: 22px;
	}

	.blog-articulo .post-entry blockquote{
		padding: 70px 26px 30px;
		background-position: 26px 26px;
		background-size: 30px;
	}

	.blog-articulo .post-entry blockquote p{
		font-size: 20px;
	}

	.post-ficha{
		padding: 26px 22px;
	}

	/* Autor, fecha y minutos no caben en una línea de 390 px. Que
	   envuelvan con aire en vez de quedar una debajo colgando. */
	.page-header .post-single-meta .breadcrumb{
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 6px;
	}
}


/* =====================================================================
   5. MOVIMIENTO REDUCIDO
   ===================================================================== */

@media (prefers-reduced-motion: reduce){
	.page-blog .blog-destacado-titulo a,
	.page-blog .blog-fila-titulo a,
	.blog-enlace::after,
	.blog-volver a::before{
		transition: none;
	}
}