/* ==========================================================================
   Pagina de registro al webinar
   --------------------------------------------------------------------------
   Dos columnas en escritorio (el evento a la izquierda, el formulario a la
   derecha) y una sola en movil, con el formulario primero: quien llega desde
   el aviso ya sabe de que se trata y viene a registrarse.

   Hereda tipografia y colores de tokens.css + landing.css; aqui solo vive
   lo propio de esta pagina.
   ========================================================================== */

.wbn-page {
	margin: 0;
	background: var(--bg, #fcfcfd);
	color: var(--ink, #17233a);
	/* La familia la pone tokens.css (Inter); declararla aqui dejaba la
	   pagina del webinar con otra tipografia que el resto del sitio. */
	-webkit-font-smoothing: antialiased;
}

.wbn-page .shell {
	width: min(1120px, 100% - 32px);
	margin-inline: auto;
}

/* ---------- barra superior ---------- */
.wbn-topbar {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--line, rgba(23, 35, 58, .08));
	background: #fff;
}

.wbn-topbar .shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 68px;
}

.wbn-topbar .logo img {
	display: block;
	height: 32px;
	width: auto;
}

/* ---------- rejilla principal ---------- */
.wbn-main {
	display: flex;
	padding: clamp(32px, 6vw, 72px) 0;
}

.wbn-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

/* ---------- columna de informacion ---------- */
.wbn-eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--brand-deep, #d97f3a);
}

.wbn-title {
	margin: 0 0 18px;
	font-size: clamp(27px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -.02em;
}

.wbn-lead {
	margin: 0 0 14px;
	font-size: clamp(17px, 2vw, 19px);
	line-height: 1.6;
	font-weight: 600;
}

.wbn-text {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--muted, #5d6c82);
}

.wbn-datos {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 30px;
	padding: 20px 22px;
	list-style: none;
	border-radius: 16px;
	background: var(--brand-softer, #fef8f0);
	border: 1px solid rgba(240, 166, 108, .3);
}

.wbn-datos li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15.5px;
}

.wbn-datos svg {
	flex: none;
	width: 19px;
	height: 19px;
	fill: none;
	stroke: var(--brand-deep, #d97f3a);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wbn-ponente {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 22px;
	border-top: 1px solid var(--line, rgba(23, 35, 58, .08));
}

.wbn-ponente img {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.wbn-ponente > div {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.wbn-ponente__label {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted, #5d6c82);
	font-weight: 600;
}

.wbn-ponente__nombre {
	font-size: 16.5px;
	font-weight: 700;
}

.wbn-ponente__cargo {
	font-size: 13.5px;
	color: var(--muted, #5d6c82);
}

/* ---------- tarjeta del formulario ---------- */
.wbn-form-card {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 34px);
	border-radius: 22px;
	background: #fff;
	border: 1px solid var(--line, rgba(23, 35, 58, .08));
	box-shadow: 0 18px 48px rgba(17, 32, 56, .08);
}

.wbn-form-title {
	margin: 0 0 6px;
	font-size: 23px;
	line-height: 1.2;
}

.wbn-form-sub {
	margin: 0 0 22px;
	font-size: 14.5px;
	color: var(--muted, #5d6c82);
}

.wbn-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.wbn-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.wbn-field label {
	font-size: 14px;
	font-weight: 600;
}

.wbn-field input {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--line, rgba(23, 35, 58, .14));
	border-radius: 11px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 15.5px;
	transition: border-color .18s, box-shadow .18s;
}

.wbn-field input::placeholder {
	color: #9aa6b8;
}

.wbn-field input:focus {
	outline: none;
	border-color: var(--brand, #f0a66c);
	box-shadow: 0 0 0 3px rgba(240, 166, 108, .22);
}

.wbn-field input[aria-invalid="true"] {
	border-color: #d14343;
}

/* El senuelo nunca se ve ni recibe foco, pero sigue en el DOM para que
   el bot que rellena todo lo encuentre. */
#identificador {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wbn-error {
	display: none;
	font-size: 13px;
	color: #d14343;
	line-height: 1.4;
}

.wbn-error.is-visible {
	display: block;
}

.wbn-error--global {
	margin-top: -6px;
}

.wbn-submit {
	width: 100%;
	margin-top: 4px;
	justify-content: center;
}

.wbn-submit[disabled] {
	opacity: .6;
	cursor: progress;
}

.wbn-legal {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted, #5d6c82);
	text-align: center;
}

.wbn-legal a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- confirmacion ---------- */
.wbn-exito {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	padding: 8px 0;
}

.wbn-exito[hidden] {
	display: none;
}

.wbn-exito__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--brand-soft, #fdf1e3);
}

.wbn-exito__check svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--brand-deep, #d97f3a);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wbn-exito h2 {
	margin: 0;
	font-size: 21px;
	line-height: 1.25;
}

.wbn-exito p {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--muted, #5d6c82);
}

/* ---------- pie ---------- */
.wbn-footer {
	display: flex;
	padding: 26px 0;
	border-top: 1px solid var(--line, rgba(23, 35, 58, .08));
	background: #fff;
	font-size: 13.5px;
	color: var(--muted, #5d6c82);
}

.wbn-footer .shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.wbn-footer p {
	margin: 0;
}

.wbn-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.wbn-footer a {
	color: inherit;
	text-decoration: none;
}

.wbn-footer a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Pagina de gracias
   Una sola columna centrada: quien llega aqui ya se registro, lo unico
   que necesita es confirmacion y algo que hacer mientras llega el dia.
   ========================================================================== */

.wbn-gracias {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 760px;
	text-align: center;
}

.wbn-gracias__check {
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
}

.wbn-gracias__check svg {
	width: 30px;
	height: 30px;
}

.wbn-gracias__title {
	margin: 0 0 14px;
	font-size: clamp(26px, 4vw, 36px);
	line-height: 1.15;
	letter-spacing: -.02em;
}

.wbn-gracias__lead {
	margin: 0 0 30px;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--muted, #5d6c82);
}

.wbn-gracias__datos {
	width: 100%;
	max-width: 560px;
	text-align: left;
	margin-bottom: 38px;
}

/* ---------- temario ---------- */
.wbn-temario {
	width: 100%;
	margin-bottom: 38px;
	text-align: left;
}

.wbn-temario__title,
.wbn-mientras__title {
	margin: 0 0 16px;
	font-size: 21px;
	line-height: 1.25;
	text-align: center;
}

.wbn-temario__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding-left: 22px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--muted, #5d6c82);
}

.wbn-temario__list li::marker {
	color: var(--brand-deep, #d97f3a);
	font-weight: 700;
}

.wbn-temario__list strong {
	color: var(--ink, #17233a);
}

/* ---------- recursos mientras llega el dia ---------- */
.wbn-mientras {
	width: 100%;
	padding-top: 32px;
	border-top: 1px solid var(--line, rgba(23, 35, 58, .08));
	margin-bottom: 34px;
}

.wbn-mientras__text {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--muted, #5d6c82);
	text-align: center;
}

.wbn-mientras__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 16px;
	text-align: left;
}

.wbn-card {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 22px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--line, rgba(23, 35, 58, .1));
	text-decoration: none;
	color: inherit;
	transition: border-color .18s, transform .18s, box-shadow .18s;
}

.wbn-card:hover,
.wbn-card:focus-visible {
	border-color: var(--brand, #f0a66c);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(17, 32, 56, .08);
}

.wbn-card__tag {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brand-deep, #d97f3a);
}

.wbn-card__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.wbn-card__text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--muted, #5d6c82);
}

.wbn-gracias__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ---------- una sola columna ---------- */
@media screen and (max-width: 900px) {
	.wbn-grid {
		grid-template-columns: 1fr;
	}

	/* En movil el formulario va primero: quien llega del aviso ya sabe
	   de que se trata y viene a registrarse, no a leer. */
	.wbn-form-card {
		position: static;
		order: -1;
	}
}

@media screen and (max-width: 520px) {
	.wbn-topbar .shell {
		height: 60px;
	}

	.wbn-topbar .btn {
		display: none;
	}

	.wbn-datos {
		padding: 16px 18px;
	}
}

/* ==========================================================================
   Webinar — piezas que no existen en success.css
   --------------------------------------------------------------------------
   El titulo dejaba un hueco a su derecha porque ocupa media linea y la
   ficha del ponente iba debajo, a todo lo ancho. Aqui se pone a la
   derecha: el texto manda, la ficha acompana.
   ========================================================================== */

.wbn-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr);
	gap: clamp(28px, 5vw, 56px);
	align-items: start;
}

.wbn-hero__texto {
	display: flex;
	flex-direction: column;
	/* El texto se centra con la ficha cuando sobra alto. */
	justify-content: center;
	min-height: 100%;
}

.wbn-hero__ficha {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ---------- ficha del ponente ---------- */
.wbn-ponente-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 26px 24px 22px;
	border-radius: 20px;
	text-align: center;
	background: var(--brand-softer, #fef8f0);
	border: 1px solid rgba(240, 166, 108, .32);
}

.wbn-ponente-card img {
	width: 92px;
	height: 92px;
	margin-bottom: 8px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--brand, #f0a66c);
}

.wbn-ponente-card__label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--brand-deep, #d97f3a);
}

.wbn-ponente-card__nombre {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
	color: var(--ink, #2f4858);
}

.wbn-ponente-card__cargo {
	margin: 0;
	font-size: 13.5px;
	color: var(--muted, #6b7a85);
}

/* ---------- datos del evento ---------- */
.wbn-evento {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 20px 22px;
	list-style: none;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--line, rgba(47, 72, 88, .12));
}

.wbn-evento__item {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--ink, #2f4858);
}

.wbn-evento__item i,
.wbn-evento__item svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--brand-deep, #d97f3a);
}

/* Las tarjetas del temario son contenido, no enlaces: sin hover ni
   cursor de mano, para no prometer un clic que no existe. */
.success-journey__options--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}

.success-journey__card--static {
	cursor: default;
	pointer-events: none;
}

/* Una sola columna: la ficha pasa debajo del texto, que es el orden en
   que se lee en una pantalla angosta. */
@media screen and (max-width: 860px) {
	.wbn-hero {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.wbn-ponente-card {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		text-align: left;
		padding: 18px 20px;
	}

	.wbn-ponente-card img {
		width: 68px;
		height: 68px;
		margin-bottom: 0;
	}

	/* Etiqueta, nombre y cargo se apilan junto a la foto. */
	.wbn-ponente-card__label,
	.wbn-ponente-card__nombre,
	.wbn-ponente-card__cargo {
		width: 100%;
	}

	.wbn-ponente-card__nombre {
		font-size: 17.5px;
	}
}

/* ==========================================================================
   Ficha del ponente en la pagina de registro
   Va entre la fecha y el formulario: quien lee cuando es el webinar ya
   sabe quien lo imparte antes de decidir si deja sus datos.
   ========================================================================== */

.wbn-imparte {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: 16px;
	background: var(--brand-softer, #fef8f0);
	border: 1px solid rgba(240, 166, 108, .3);
}

.wbn-imparte img {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--brand, #f0a66c);
}

.wbn-imparte__info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.wbn-imparte__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--brand-deep, #d97f3a);
}

.wbn-imparte__nombre {
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink, #2f4858);
}

.wbn-imparte__cargo {
	font-size: 13px;
	line-height: 1.4;
	color: var(--muted, #6b7a85);
}

@media screen and (max-width: 520px) {
	.wbn-imparte {
		padding: 12px 14px;
		gap: 12px;
	}

	.wbn-imparte img {
		width: 48px;
		height: 48px;
	}
}

/* --------------------------------------------------------------------------
   Fecha, hora y modalidad: tres fichas en lugar de una linea de texto.
   Iconos en el azul del sitio; el naranja queda para los CTA.
   -------------------------------------------------------------------------- */
.sol-form .sol-sub { margin-bottom: 18px; }

.wbn-ficha-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	max-width: 560px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.wbn-ficha {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 14px 14px 13px;
	text-align: left;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--line, #e7e5e4);
	box-shadow: 0 10px 28px -22px rgba(24, 24, 27, .35);
}

.wbn-ficha svg {
	width: 22px;
	height: 22px;
	margin-bottom: 6px;
	fill: none;
	stroke: var(--ink, #2f4858);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wbn-ficha__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted, #6b7280);
}

.wbn-ficha__valor {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink, #2f4858);
}

@media screen and (max-width: 560px) {
	.wbn-ficha-grid { grid-template-columns: 1fr; gap: 8px; }
	.wbn-ficha {
		display: grid;
		grid-template-columns: 22px auto 1fr;
		align-items: center;
		column-gap: 10px;
		padding: 11px 14px;
	}
	.wbn-ficha svg { margin: 0; }
	.wbn-ficha__valor { font-size: 14.5px; }
}