/* ==========================================================================
   Aviso de webinar — barra superior
   --------------------------------------------------------------------------
   Barra fija sobre el header del blog. El mensaje se desliza cuando no cabe
   y se queda quieto cuando si cabe, para no distraer sin motivo.

   La altura vive en --wbn-h porque el header, el indice lateral y las anclas
   de los H2 se posicionan respecto a ella: cambiarla aqui reacomoda todo.
   Para retirar el aviso cuando pase el webinar basta con poner
   .wbn-bar { display: none } y --wbn-h: 0px; no hay que tocar los articulos.
   ========================================================================== */

:root {
	--wbn-h: 40px;
	/* Los colores salen de tokens.css: --ink es el azul del sitio y
	   --brand el naranja de los CTA. Los respaldos repiten esos mismos
	   valores por si la hoja de tokens no cargo. */
	--wbn-bg: var(--ink, #2f4858);
	--wbn-text: #eef2f5;
	--wbn-strong: #ffffff;
	/* El naranja de marca queda reservado al CTA (Registrate). */
	--wbn-cta: var(--brand, #f0a66c);
}

.wbn-bar {
	position: sticky;
	top: 0;
	/* Por encima del header (50) pero debajo de sus menus (60), para que
	   el mega-menu siga cayendo sobre la barra y no al reves. */
	z-index: 55;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--wbn-h);
	overflow: hidden;
	background: var(--wbn-bg);
	color: var(--wbn-text);
	font-size: 13.5px;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
}

.wbn-bar__track {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 16px;
}

.wbn-bar__msg {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
	white-space: nowrap;
}

.wbn-bar__msg strong {
	color: var(--wbn-strong);
	font-weight: 700;
}

.wbn-bar__sep {
	opacity: .45;
}

.wbn-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	/* Sin pastilla: en una barra tan baja, un boton con fondo compite
	   con el mensaje. Basta el peso y el subrayado para que se lea
	   como accion. */
	padding: 0;
	background: none;
	color: var(--wbn-cta);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	white-space: nowrap;
	transition: opacity .18s ease;
}

.wbn-bar__link:hover,
.wbn-bar__link:focus-visible {
	background: none;
	color: var(--wbn-cta);
	opacity: .78;
	transform: none;
}

.wbn-bar__link:focus-visible {
	outline: 2px solid var(--wbn-strong);
	outline-offset: 3px;
	border-radius: 3px;
}

.wbn-bar__link:focus-visible {
	outline: 2px solid var(--wbn-strong);
	outline-offset: 2px;
}

/* Sin liga del evento todavia: el boton se ve, pero no invita a un clic
   que no llevaria a ningun lado. Se quita solo al llenar el href. */
.wbn-bar__link[data-pendiente] {
	color: var(--wbn-text);
	text-decoration-style: dotted;
	pointer-events: none;
	cursor: default;
}

/* --------------------------------------------------------------------------
   Pantallas donde el mensaje no cabe: se desliza en bucle.
   La animacion es sobre transform, que no obliga al navegador a recalcular
   el layout en cada cuadro.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
	.wbn-bar__track {
		justify-content: flex-start;
		padding: 0;
	}

	.wbn-bar__msg {
		padding-left: 100%;
		animation: wbn-scroll 26s linear infinite;
		will-change: transform;
	}

	.wbn-bar:hover .wbn-bar__msg,
	.wbn-bar:focus-within .wbn-bar__msg {
		animation-play-state: paused;
	}
}

@keyframes wbn-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

@media screen and (max-width: 560px) {
	.wbn-bar {
		font-size: 12.5px;
	}

	.wbn-bar__msg {
		animation-duration: 20s;
	}
}

/* Quien pidio menos movimiento no recibe marquesina: el texto se encoge
   con puntos suspensivos y el CTA permanece visible. */
@media (prefers-reduced-motion: reduce) {
	.wbn-bar__track {
		justify-content: center;
		padding: 0 16px;
	}

	.wbn-bar__msg {
		padding-left: 0;
		animation: none;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* --------------------------------------------------------------------------
   Reacomodo de lo que estaba pegado al borde superior.
   Son los mismos valores de blog-article-v2.css mas la altura de la barra.
   -------------------------------------------------------------------------- */
body.blog-article-v2 header.site {
	top: var(--wbn-h);
}

body.blog-article-v2 .blog-toc,
body.blog-article-v2 .blog-sidebar.is-sticky {
	top: calc(90px + var(--wbn-h));
}

body.blog-article-v2 .blog-content-v2 h2[id] {
	scroll-margin-top: calc(100px + var(--wbn-h));
}

/* El aviso no aplica fuera del blog: la pagina del webinar es su
   destino, no tendria sentido anunciarselo a quien ya llego. */
body.wbn-page .wbn-bar {
	display: none;
}

/* --------------------------------------------------------------------------
   Tarjeta de invitacion al webinar dentro de los articulos de NOM-035.
   Sustituye la caja de descarga de reportes mientras dure la campana.
   Se usan span en lugar de p/h2 para que la tipografia del articulo y el
   indice lateral no la toquen.
   -------------------------------------------------------------------------- */
.blog-content-v2 .wbn-card {
	position: relative;
	margin: 2.4rem 0 2.8rem;
	padding: 38px 40px 34px;
	border-radius: 22px;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(240, 166, 108, .16) 0%, rgba(240, 166, 108, 0) 55%),
		var(--ink, #2f4858);
	color: #e6ecf0;
	overflow: hidden;
	box-shadow: 0 30px 60px -36px rgba(20, 32, 42, .55);
}

.blog-content-v2 .wbn-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.blog-content-v2 .wbn-card__eyebrow {
	align-self: flex-start;
	padding: 0;
	background: none;
	color: var(--brand, #f0a66c);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.blog-content-v2 .wbn-card__title {
	display: block;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: #fff;
}

.blog-content-v2 .wbn-card__text {
	display: block;
	max-width: 560px;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #cfd9e0;
}

.blog-content-v2 .wbn-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 6px;
	padding: 0;
	list-style: none;
}

.blog-content-v2 .wbn-card__meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
}

.blog-content-v2 .wbn-card__meta svg,
.blog-content-v2 .wbn-card__btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

.blog-content-v2 .wbn-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 10px;
}

.blog-content-v2 .wbn-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 12px;
	background: var(--brand, #f0a66c);
	color: var(--ink, #2f4858);
	font-size: 1.05rem;
	font-weight: 800;
	text-decoration: none;
	transition: transform .18s ease, background-color .18s ease;
}

.blog-content-v2 .wbn-card__btn:hover,
.blog-content-v2 .wbn-card__btn:focus-visible {
	background: #f4b885;
	color: var(--ink, #2f4858);
	transform: translateY(-1px);
}

.blog-content-v2 .wbn-card__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.blog-content-v2 .wbn-card__ponente {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .95rem;
	color: #cfd9e0;
}

.blog-content-v2 .wbn-card__ponente img {
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, .6);
	box-shadow: none;
}

.blog-content-v2 .wbn-card__ponente strong {
	color: #fff;
	font-weight: 700;
}

@media screen and (max-width: 600px) {
	.blog-content-v2 .wbn-card {
		padding: 28px 22px 26px;
		border-radius: 18px;
	}
	.blog-content-v2 .wbn-card__meta li { font-size: .9rem; padding: 7px 12px; }
	.blog-content-v2 .wbn-card__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.blog-content-v2 .wbn-card__btn { transition: none; }
	.blog-content-v2 .wbn-card__btn:hover { transform: none; }
}