/* =====================================================================
   Blog — Destino Castilla (LTSM-5705 / LTSM-5460)
   Figma cb3izHyJ3uWqfAzbtHjEGP · página "10. Blog"
     listado desktop 1366 x 2682 -> 31135:174370
     listado mobile   375 x 5251 -> 31135:174476
     detalle desktop 1366 x 3289 -> 31135:174449
     detalle mobile   375 x 5782 -> 31135:174563

   OJO con el node-id: el que trae LTSM-5460 (6851-35023) NO resuelve — abre
   el Cover, igual que en FAQs, Amenidades y Políticas. Los buenos son los de
   arriba. Y el frame mobile del detalle está mal nombrado en el archivo: se
   llama `blog1 - pp- mobile`, igual que el del listado.

   ALCANCE: el «personalizador de estilo, tipografía y layout» que promete el
   título de la subtarea NO está dibujado. Buscar «prefer» en todo el archivo
   de Figma da un solo resultado (un texto de BASE COMPONENTS) y «modo oscuro»
   ninguno; la portada de la página declara un único estado, «Default». Por eso
   aquí no hay tema oscuro, ni escala tipográfica conmutable, ni variante
   lista/cuadrícula: lo único personalizable del diseño es el filtro por
   categoría. Si algún día se aprueban esas opciones, el sitio natural es
   redefinir los tokens de `.bc-page` / `.bd-page` bajo un `[data-tema]`.

   Mobile-first, igual que home.css, ubicacion.css, amenidades.css, faqs.css y
   politicas.css: la base es el frame de 375 y el layout de 1366 entra en
   @media (min-width:1200px). El Figma NO trae frame de tablet; el tramo
   intermedio se derivó aquí.

   Pantalla clara (los cuatro frames son #FFFFFF), así que el header del chrome
   ya sirve tal cual: blanco con borde `--chrome-line`.

   Los paddings superiores salen de restarle el header sticky al del frame,
   como en politicas.css: las alturas del header (54 en móvil, 84 desde 1200)
   están en chrome.css.

   OJO con `:visited`. El `style.css` del tema —que aquí sí entra, es el estilo
   base del tema y no el CSS pesado de Mariscal— trae un `a:visited{color:purple}`
   heredado del scaffolding de _s. Su especificidad (0-1-1) le gana a cualquier
   regla de clase suelta, así que **todo enlace ya visitado de estas pantallas
   salía morado**: el filtro, el paginador, los botones de compartir y los
   enlaces del cuerpo. Por eso cada regla que fija color sobre un `<a>` repite
   el selector con `:visited`; no es ruido, es lo único que lo desactiva sin
   tocar una hoja compartida.
   ===================================================================== */

/* ============================ TOKENS ================================ */
/* Compartidos por listado y detalle: son la misma pantalla partida en dos. */
.bc-page,
.bd-page {
	--bl-accent:  #b08524;   /* secondary/base — dorado de marca            */
	--bl-ink:     #14142b;   /* Alias/Grayscale/Header — títulos            */
	--bl-body:    #4e4b66;   /* Alias/Grayscale/Body — texto corrido        */
	--bl-muted:   #6e7191;   /* Alias/Grayscale/Label — antetítulos         */
	--bl-line:    #d9dbe9;   /* Alias/Grayscale/Line — reglas               */
	--bl-input:   #eff0f6;   /* Alias/Grayscale/Input — borde de la tarjeta */
	--bl-surface: #fcfcfc;   /* Alias/Grayscale/Background                  */
	--bl-white:   #ffffff;

	--bl-max:  1270px;       /* ancho útil del frame de 1366 (48 a cada lado) */
	--bl-pad:  16px;         /* margen lateral del frame de 375               */

	background: var(--bl-white);
	color: var(--bl-ink);
	font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
	overflow-x: hidden;
}

/* =====================================================================
   LISTADO
   ===================================================================== */

.bc-page {
	padding: 42px 0 64px;    /* 96 del frame - 54 del header sticky */
}

.bc-wrap {
	max-width: var(--bl-max);
	margin: 0 auto;
	padding: 0 var(--bl-pad);
}

/* --------------------------- ENCABEZADO ----------------------------- */

.bc-head {
	display: flex;
	flex-direction: column;
	gap: 8px;                /* gap del Frame 296 */
	margin: 0 0 32px;
}

.bc-head__eyebrow {
	margin: 0;
	color: var(--bl-accent);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bc-head__title {
	margin: 0;
	color: var(--bl-ink);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}

/* ------------------------ FILTRO DE CATEGORÍAS ----------------------- */
/* En móvil el Figma no dibuja la tarjeta: es un rótulo y una fila de chips
   que se desplaza en horizontal, con la activa en dorado y una barrita
   dorada a su izquierda. Va debajo del encabezado, que es el orden del DOM:
   aquí no hay nada que reordenar. */

.bc-filtros {
	margin: 0 0 32px;
}

.bc-filtros__rotulo {
	margin: 0 0 16px;
	color: var(--bl-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.bc-filtros__lista {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	/* La fila se sale del contenedor a propósito para que el primer chip
	   quede alineado con el título y el último no muera pegado al borde. */
	margin-inline: calc(var(--bl-pad) * -1);
	padding-inline: var(--bl-pad);
	scrollbar-width: none;
}
.bc-filtros__lista::-webkit-scrollbar { display: none; }

.bc-filtros__item {
	flex: 0 0 auto;
	border-left: 1px solid var(--bl-line);
}
.bc-filtros__item:first-child { border-left: 0; }

.bc-filtros__enlace,
.bc-filtros__enlace:visited {
	display: block;
	padding: 4px 16px;
	color: var(--bl-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}
.bc-filtros__enlace:hover,
.bc-filtros__enlace:focus-visible { color: var(--bl-accent); }

/* La activa: dorada y con la barra de 3px que el Figma pone a su izquierda.
   Se pinta sobre el borde del <li> para no sumar ancho y descuadrar la fila. */
.bc-filtros__item:has(.is-active) { border-left-color: transparent; }
.bc-filtros__enlace.is-active,
.bc-filtros__enlace.is-active:visited {
	position: relative;
	color: var(--bl-accent);
	font-weight: 600;
}
.bc-filtros__enlace.is-active::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: 2px;
	background: var(--bl-accent);
}
/* :has() no llega a todos los navegadores en uso; sin él la activa se ve
   igual salvo el borde de 1px que queda debajo de la barra dorada. */

/* --------------------------- ETIQUETAS ------------------------------ */
/* LTSM-5706. No está en el Figma: se maqueta con los tokens de la propia
   pantalla —caja clara, borde de 1px, dorado de marca para lo activo— para
   que no parezca traído de otro sitio. Chips y no lista porque se marcan
   varias a la vez, y una lista con varios ítems activos no se lee.

   Ojo con `:visited`. style.css trae `a:visited { color: purple }` y le gana
   a cualquier clase, así que toda regla de color sobre un <a> tiene que
   repetir el selector con `:visited` o los chips ya pulsados se ponen
   morados. */

.bc-tags {
	margin: 24px 0 0;
}

.bc-tags__rotulo {
	margin: 0 0 12px;
	font-size: 16px;
}

.bc-tags__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bc-tags__item { display: block; }

.bc-tags__chip,
.bc-tags__chip:visited {
	display: block;
	padding: 6px 12px;
	border: 1px solid var(--bl-line);
	border-radius: 999px;
	background: var(--bl-white);
	color: var(--bl-body);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.bc-tags__chip:hover,
.bc-tags__chip:focus-visible {
	border-color: var(--bl-accent);
	color: var(--bl-accent);
}

.bc-tags__chip.is-active,
.bc-tags__chip.is-active:visited {
	border-color: var(--bl-accent);
	background: var(--bl-accent);
	color: var(--bl-white);
	font-weight: 600;
}

/* ------------------------------ ORDEN ------------------------------- */
/* Dos opciones sobre el listado. Tampoco está en el Figma. */

.bc-orden {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 24px;
}

.bc-orden__rotulo {
	color: var(--bl-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bc-orden__opciones {
	display: flex;
	gap: 8px;
}

.bc-orden__opcion,
.bc-orden__opcion:visited {
	padding: 6px 14px;
	border-radius: 999px;
	color: var(--bl-body);
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: color .18s ease, background-color .18s ease;
}

.bc-orden__opcion:hover,
.bc-orden__opcion:focus-visible { color: var(--bl-accent); }

.bc-orden__opcion.is-active,
.bc-orden__opcion.is-active:visited {
	background: var(--bl-input);
	color: var(--bl-ink);
	font-weight: 600;
}

/* ----------------- AVISO DE OCULTAS Y RESTAURAR --------------------- */
/* Nace oculto y lo enseña el JS cuando hay algo que deshacer: ver la nota de
   la plantilla. Ocultar una entrada sin decir dónde recuperarla sería un
   callejón sin salida. */

.bc-prefs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 24px;
	padding: 12px 16px;
	background: var(--bl-surface);
	border: 1px solid var(--bl-input);
	border-radius: 8px;
}

/* El `display` de la clase le gana al `display:none` que el navegador aplica
   por el atributo `hidden`, así que sin esto la caja se ve vacía cuando no
   hay nada que avisar. Vale para todo lo que se esconda con `hidden` y tenga
   `display` propio: ver también `.bc-card__ocultar`. */
.bc-prefs[hidden] { display: none; }

.bc-prefs__aviso {
	margin: 0;
	color: var(--bl-body);
	font-size: 14px;
	line-height: 1.4;
}

.bc-prefs__accion,
.bc-prefs__accion:visited {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bl-accent);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	cursor: pointer;
}

.bc-prefs__accion:hover,
.bc-prefs__accion:focus-visible { color: var(--bl-ink); }

/* Restaurar se va al extremo: es la salida de emergencia, no una opción más
   de la fila. */
.bc-prefs__restaurar { margin-inline-start: auto; }

/* ------------------------------ GRID -------------------------------- */
/* Una sola columna en móvil. El reparto alterno del PHP (0,2,4… en la
   columna A) hace que el DOM ya esté en orden cronológico, así que basta
   con dejar que las dos columnas fluyan una tras otra... salvo que eso
   rompería el orden. Por eso en móvil el grid se vuelve `display:contents`
   sobre las columnas y se reordena con `order` por tarjeta: ver abajo. */

.bc-grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.bc-col {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.bc-vacio {
	margin: 0;
	padding: 48px 0;
	color: var(--bl-body);
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

/* ----------------------------- TARJETA ------------------------------ */

.bc-card {
	position: relative;   /* ancla de la X de ocultar */
	background: var(--bl-white);
	border: 1px solid var(--bl-input);
	border-radius: 8px;
	overflow: hidden;
}

/* La X de «ocultar esta entrada» (LTSM-5706). Va sobre la esquina de la
   imagen, fuera del <a> envolvente —un <button> dentro de un enlace es
   marcado inválido— y por eso necesita posición absoluta.

   Aparece al pasar el cursor o al enfocar la tarjeta con el teclado: es una
   acción secundaria y estando siempre visible compite con la portada. Donde
   no hay cursor —táctil— se queda fija, porque ahí no hay hover que la
   descubra. */
.bc-card__ocultar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--bl-ink);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .18s ease, background-color .18s ease, color .18s ease;
}

/* Sin esto, el `display:flex` de arriba le gana al `display:none` del
   atributo `hidden` y la X saldría aunque el JS no haya arrancado —justo lo
   que el `hidden` del marcado quiere evitar—. */
.bc-card__ocultar[hidden] { display: none; }

.bc-card:hover .bc-card__ocultar,
.bc-card:focus-within .bc-card__ocultar,
.bc-card__ocultar:focus-visible { opacity: 1; }

.bc-card__ocultar:hover,
.bc-card__ocultar:focus-visible {
	background: var(--bl-accent);
	color: var(--bl-white);
}

@media (hover: none) {
	.bc-card__ocultar { opacity: 1; }
}

.bc-card__link,
.bc-card__link:visited {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bc-card__media {
	display: block;
	aspect-ratio: 408 / 240;
	overflow: hidden;
	background: var(--bl-surface);
}

.bc-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.bc-card__link:hover .bc-card__img { transform: scale(1.03); }

.bc-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}

.bc-card__cat {
	margin: 0;
	color: var(--bl-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bc-card__title {
	margin: 0;
	color: var(--bl-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.bc-card__excerpt {
	margin: 0;
	color: var(--bl-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

.bc-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bl-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}
.bc-card__more [class^="icon-"] {
	font-size: 14px;
	line-height: 1;
	transition: transform .18s ease;
}
.bc-card__link:hover .bc-card__more [class^="icon-"] { transform: translateX(4px); }

/* --------------------------- PAGINADOR ------------------------------ */

.bc-pag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;               /* gap del Frame 1086 */
	margin: 40px 0 0;
}

.bc-pag__num,
.bc-pag__num:visited,
.bc-pag__next,
.bc-pag__next:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--bl-line);
	color: var(--bl-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.bc-pag__num:hover,
.bc-pag__next:hover {
	border-color: var(--bl-accent);
	color: var(--bl-accent);
}

.bc-pag__num.is-active,
.bc-pag__num.is-active:visited {
	border-color: var(--bl-accent);
	border-width: 2px;
	color: var(--bl-accent);
}

.bc-pag__next,
.bc-pag__next:visited {
	border-color: transparent;
	background: #fdf6e6;     /* el círculo dorado claro del Figma */
	color: var(--bl-accent);
}

/* Mientras el filtro repinta, el listado se atenúa: es la única señal de
   carga del diseño (que no dibuja spinner). */
.bc-listado[aria-busy="true"] {
	opacity: .45;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* ======================= LISTADO — DESKTOP ========================== */

@media (min-width: 1200px) {

	.bc-page { padding: 80px 0 96px; }   /* 164 del frame - 84 del header */

	/* Dos columnas con áreas, no reordenando el DOM: el orden de lectura
	   (encabezado, filtro, listado) es el bueno y así se conserva. El filtro
	   ocupa la columna izquierda entera; el encabezado y el listado se apilan
	   en la derecha. */
	.bc-wrap {
		display: grid;
		/* 307 de la tarjeta lateral + el resto para las dos columnas de 408 */
		grid-template-columns: 307px minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		grid-template-areas:
			"filtros encabezado"
			"filtros listado";
		column-gap: 64px;
		align-items: start;
		padding: 0 48px;
	}

	.bc-head  { grid-area: encabezado; }
	.bc-main  { grid-area: listado; }

	.bc-filtros {
		grid-area: filtros;
		margin: 16px 0 0;    /* el desfase del Figma: y=194 contra y=178 */
		padding: 24px;
		background: var(--bl-surface);
		border: 1px solid var(--bl-input);
		border-radius: 8px;
		/* En el Figma la tarjeta cuelga del grupo FIJO(A): acompaña el scroll.
		   84 es la altura del header sticky; 24 de aire. */
		position: sticky;
		top: 108px;
	}

	.bc-filtros__rotulo {
		margin: 0 0 24px;
		font-size: 24px;
	}

	.bc-filtros__lista {
		flex-direction: column;
		gap: 0;
		overflow: visible;
		margin-inline: 0;
		padding: 0;
	}

	.bc-filtros__item {
		border-left: 0;
		border-bottom: 1px solid var(--bl-line);
	}
	.bc-filtros__item:last-child { border-bottom: 0; }

	.bc-filtros__enlace {
		padding: 16px 0;
		font-size: 18px;
	}

	/* En vertical la barra del activo va a la derecha, como en el frame. */
	.bc-filtros__enlace.is-active::before {
		inset: 0 0 0 auto;
		width: 3px;
	}

	/* Las etiquetas cuelgan de la misma tarjeta lateral, separadas por la
	   misma regla de 1px que separa las categorías entre sí. */
	.bc-tags {
		margin: 24px 0 0;
		padding: 24px 0 0;
		border-top: 1px solid var(--bl-line);
	}

	.bc-tags__rotulo { font-size: 18px; }

	/* El orden se va al extremo derecho de la columna del listado: es un
	   ajuste de la vista, no un encabezado, y alineado a la izquierda compite
	   con el H1 que tiene justo encima. */
	.bc-orden {
		justify-content: flex-end;
		margin: 0 0 32px;
	}

	.bc-head { margin: 0 0 48px; }
	.bc-head__title { font-size: 48px; }

	.bc-grid {
		flex-direction: row;
		align-items: start;
		gap: 24px;           /* separación entre las dos columnas de 408 */
	}

	.bc-col {
		flex: 1 1 0;
		min-width: 0;
		gap: 48px;           /* gap interno de los Frames 974 y 975 */
	}

	/* El escalón del diseño: la columna derecha arranca en y=178 y la
	   izquierda en y=406. La diferencia (228) se aplica a la izquierda, que
	   es la que baja. No es un descuido del Figma: es el efecto masonry. */
	.bc-col--a { margin-top: 228px; }

	.bc-card__body { padding: 32px; gap: 16px; }
	.bc-card__title { font-size: 24px; }
	.bc-card__excerpt { font-size: 16px; }
	.bc-card__more { font-size: 16px; }

	.bc-pag { margin: 64px 0 0; }
}

/* Tramo intermedio: el Figma no trae tablet. Dos columnas sin el escalón
   —con menos alto de tarjeta el desfase de 228 px deja un hueco enorme— y
   el filtro todavía en chips horizontales, que es lo que cabe. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.bc-grid { flex-direction: row; gap: 24px; }
	.bc-col { flex: 1 1 0; min-width: 0; gap: 32px; }
	.bc-head__title { font-size: 42px; }
	.bc-wrap { padding: 0 32px; }
	.bc-col--a { margin-top: 0; }
}

/* En móvil las dos columnas se apilan, y con ellas el orden se rompería:
   quedarían primero las entradas 1,3,5 y luego 2,4,6. Se deshace el reparto
   volviendo el grid a una sola secuencia con `display:contents` y ordenando
   por `--bc-orden`, el número cronológico que cada tarjeta trae del servidor.

   Antes esto era una escalera de `nth-child` cableada a 4 tarjetas por
   columna. Como «Entradas por página» es administrable, en cuanto alguien lo
   subiera de 8 las tarjetas sobrantes se quedaban en `order:0` y saltaban al
   principio, en desorden y sin ningún aviso. Con la variable da igual cuántas
   sean. */
@media (max-width: 767.98px) {
	.bc-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.bc-col  { display: contents; }
	.bc-card { order: var(--bc-orden, 0); }
}

/* =====================================================================
   DETALLE
   ===================================================================== */

.bd-page { padding: 0 0 64px; }

/* ------------------------------ HERO -------------------------------- */

.bd-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	padding: 48px var(--bl-pad);
	color: var(--bl-white);
	background: var(--bl-ink);
	isolation: isolate;
}

.bd-hero--sin-imagen {
	/* Sin imagen destacada el velo no tiene sobre qué caer: se usa el oliva
	   oscuro de marca para que el título no quede sobre un negro plano. */
	background: linear-gradient(160deg, #302e12 0%, #55542c 100%);
}

.bd-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.bd-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El velo del Figma: sin él el texto blanco se pierde sobre las fotos claras. */
.bd-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 43, .25) 0%, rgba(20, 20, 43, .72) 100%);
}

.bd-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 4px;                /* gap del Frame 685 */
	width: 100%;
	max-width: var(--bl-max);
	margin: 0 auto;
}

.bd-hero__cat {
	margin: 0;
	color: var(--bl-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bd-hero__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}

.bd-hero__fecha {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	opacity: .9;
}

/* --------------------- CUERPO Y RAIL DE COMPARTIR -------------------- */

.bd-wrap {
	max-width: var(--bl-max);
	margin: 0 auto;
	padding: 32px var(--bl-pad) 0;
}

/* En móvil el rail baja a una fila horizontal encima del artículo: una
   columna flotante de 16 px de ancho no cabe en 375. */
.bd-share {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
}

.bd-share__btn,
.bd-share__btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--bl-line);
	color: var(--bl-accent);
	font-size: 18px;
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease;
}
.bd-share__btn:hover {
	border-color: var(--bl-accent);
	background: #fdf6e6;
}
.bd-share__btn [class^="icon-"] { line-height: 1; }

.bd-share__aviso {
	color: var(--bl-body);
	font-size: 13px;
	line-height: 1.4;
}

.bd-autor {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}

.bd-autor__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.bd-autor__nombre {
	color: var(--bl-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* El cuerpo lo escribe el editor de WordPress: se estilan los elementos que
   la barra de herramientas puede producir, no clases propias. */
.bd-cuerpo {
	color: var(--bl-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}

.bd-cuerpo > * { margin: 0 0 24px; }
.bd-cuerpo > *:last-child { margin-bottom: 0; }

.bd-cuerpo h2,
.bd-cuerpo h3,
.bd-cuerpo h4 {
	margin: 40px 0 16px;
	color: var(--bl-ink);
	font-weight: 700;
	line-height: 1.25;
}
.bd-cuerpo h2 { font-size: 24px; }
.bd-cuerpo h3 { font-size: 20px; }
.bd-cuerpo h4 { font-size: 18px; }

.bd-cuerpo a,
.bd-cuerpo a:visited {
	color: var(--bl-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bd-cuerpo ul,
.bd-cuerpo ol { padding-left: 24px; }
.bd-cuerpo li { margin: 0 0 8px; }

.bd-cuerpo img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.bd-cuerpo blockquote {
	margin: 32px 0;
	padding: 0 0 0 20px;
	border-left: 3px solid var(--bl-accent);
	color: var(--bl-ink);
	font-style: italic;
}

/* ------------------------- RELACIONADOS ----------------------------- */

.bd-relacionados {
	max-width: var(--bl-max);
	margin: 56px auto 0;
	padding: 0 var(--bl-pad);
}

.bd-relacionados__rotulo {
	position: relative;
	margin: 0 0 32px;
	padding: 0 0 16px;
	color: var(--bl-ink);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

/* La regla dorada corta bajo el rótulo, como en el Figma. */
.bd-relacionados__rotulo::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 64px;
	height: 2px;
	transform: translateX(-50%);
	background: var(--bl-accent);
}

.bd-relacionados__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

/* ======================== DETALLE — DESKTOP ========================= */

@media (min-width: 1200px) {

	.bd-page { padding: 0 0 96px; }

	.bd-hero {
		min-height: 480px;
		padding: 96px 48px;
	}

	.bd-hero__inner {
		max-width: 838px;    /* ancho del Frame 685 */
		margin: 0;
		padding-left: 216px; /* left 264 del frame - 48 del padding del wrap */
	}

	.bd-hero__title { font-size: 48px; }
	.bd-hero__cat { font-size: 16px; }
	.bd-hero__fecha { font-size: 16px; }

	.bd-wrap {
		display: grid;
		/* El rail (16 px de icono) y el cuerpo de 838, con el aire que el
		   Figma deja entre los dos: left 156 contra left 264. */
		grid-template-columns: 16px minmax(0, 838px);
		column-gap: 92px;
		justify-content: start;
		padding: 64px 48px 0;
		padding-left: 156px;
	}

	/* Sin botones de compartir no hay columna que reservar: el artículo se
	   corre a la izquierda hasta donde estaba el rail. */
	.bd-wrap--sin-share {
		grid-template-columns: minmax(0, 838px);
		column-gap: 0;
	}

	.bd-share {
		flex-direction: column;
		gap: 24px;           /* gap del Frame 989 */
		margin: 0;
		position: sticky;
		top: 132px;          /* 84 del header + 48 de aire */
	}

	.bd-share__btn {
		width: 40px;
		height: 40px;
		margin-left: -12px;  /* centra el círculo sobre la columna de 16 */
	}

	.bd-share__aviso {
		writing-mode: vertical-rl;
		font-size: 12px;
	}

	.bd-articulo { min-width: 0; }

	.bd-autor { margin: 0 0 32px; }

	.bd-cuerpo { font-size: 18px; }
	.bd-cuerpo > * { margin: 0 0 32px; }

	.bd-relacionados {
		margin: 96px auto 0;
		padding: 0 48px;
	}

	.bd-relacionados__rotulo {
		margin: 0 0 48px;
		font-size: 32px;
	}

	.bd-relacionados__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px;           /* gap del Frame 976 */
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.bd-hero { min-height: 400px; padding: 64px 32px; }
	.bd-hero__title { font-size: 40px; }
	.bd-wrap { padding: 48px 32px 0; }
	.bd-relacionados { padding: 0 32px; }
	.bd-relacionados__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

/* ========================= ACCESIBILIDAD ============================ */

.bc-page a:focus-visible,
.bd-page a:focus-visible {
	outline: 2px solid var(--bl-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bc-card__img,
	.bc-card__more [class^="icon-"],
	.bc-listado { transition: none; }
	.bc-card__link:hover .bc-card__img { transform: none; }
}