/**
 * Knowledge Studio layout fixes — 2026-08-04.
 *
 * 1) Guías embebidas (posts sembrados con <article style="width:calc(100vw - 40px)…">):
 *    ese ancho fue pensado para página completa; dentro de la columna del template
 *    de artículo el bloque se mete debajo del rail y el texto queda recortado.
 * 2) Tablas de las guías: scroll horizontal en columnas angostas.
 * 3) Rail pegajoso más alto que el viewport: el final ("Copiar enlace") quedaba
 *    inalcanzable en pantallas cortas.
 * 4) Caja CTA .dwv-cta: botones lado a lado con separación pareja; columna en móvil.
 * 5) Portada del blog: la imagen del destacado no llenaba su columna
 *    (aspect-ratio + max-height encogían la caja).
 */

/* ── 1) La guía embebida ocupa el ancho de la columna, nunca 100vw ── */
.dw-article__content article[style*="100vw"] {
	width: 100% !important;
	max-width: 100% !important;
}

/* ── 2) Contenedor de tabla desplazable dentro de la guía embebida ── */
.dw-article__content article[style*="max-width:1320px"] div:has(> table) {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ── 3) No fijar el rail cuando el viewport no alcanza a mostrarlo entero ── */
@media (min-width: 981px) and (max-height: 860px) {
	.dw-article__rail {
		position: static;
	}
}

/* ── 4) Caja CTA de las guías ── */
.dwv-cta {
	padding: clamp(24px, 4vw, 36px) !important;
}

.dwv-cta br {
	display: none;
}

.dwv-cta .dwv-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 14px 12px 0 0 !important;
	padding: 12px 22px !important;
	transition: filter 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.dwv-cta .dwv-button:hover,
.dwv-cta .dwv-button:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-2px);
}

.dwv-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.dwv-cta__actions .dwv-button {
	margin: 0 !important;
}

/* Botón secundario (outline) del CTA: kses quita bordes rgba() inline */
.dwv-cta__actions .dwv-button[style*="background:transparent"] {
	border: 1px solid rgba(255, 255, 255, 0.65);
}

.dwv-cta__actions .dwv-button[style*="background:transparent"]:hover,
.dwv-cta__actions .dwv-button[style*="background:transparent"]:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 560px) {
	.dwv-cta .dwv-button {
		display: flex !important;
		width: 100%;
		margin-right: 0 !important;
	}

	.dwv-cta__actions {
		flex-direction: column;
	}
}

/* ── 5) Imagen del destacado del blog: llena su columna y acompaña al texto ── */
.featured-post-visual {
	align-self: stretch;
	width: 100%;
	min-height: 260px;
	max-height: none;
	aspect-ratio: auto;
}

@media (max-width: 1024px) {
	.featured-post-visual {
		height: min(56vw, 320px);
		min-height: 0;
	}
}