/* ---------------------------------------------------------------------------
   FORMACIÓN EN BIODESCODIFICACIÓN
   ---------------------------------------------------------------------------
   Tu diseño original, con dos cambios y ninguno estético:

   1. Todo está prefijado con .sbl-formacion. Los selectores sueltos del
      archivo original (body, section, header, footer, *) le habrían pisado
      los estilos a Astra y a WooCommerce en TODO el sitio.
   2. Los colores y tamaños ahora salen de tokens.css.

   El resultado visual es idéntico al HTML que armaste.
   --------------------------------------------------------------------------- */

/* === Fundamentos ======================================================== */

.sbl-formacion,
.sbl-formacion *,
.sbl-formacion *::before,
.sbl-formacion *::after {
	margin: 0;
	padding: 0;
}

.sbl-formacion {
	font-family: var(--sbl-fuente-texto);
	color: var(--sbl-texto);
	background-color: var(--sbl-crema);
	line-height: var(--sbl-interlineado);
}

.sbl-formacion h1,
.sbl-formacion h2,
.sbl-formacion h3,
.sbl-formacion h4 {
	font-family: var(--sbl-fuente-titulo);
	font-weight: 600;
	color: var(--sbl-verde-musgo);
}

.sbl-formacion h1 {
	font-size: var(--sbl-txt-h1);
	line-height: 1.3;
	font-weight: 700;
}

.sbl-formacion h2 {
	font-size: var(--sbl-txt-h2);
	margin-bottom: var(--sbl-e-3);
}

.sbl-formacion h3 {
	font-size: var(--sbl-txt-h3);
	margin-bottom: var(--sbl-e-2);
}

.sbl-formacion p {
	font-size: var(--sbl-txt-base);
	margin-bottom: 1.2rem;
}

/* === Barra de anclas ==================================================== */

.sbl-formacion .sbl-barra {
	position: sticky;
	top: 0;
	background-color: rgba(249, 248, 245, .95);
	backdrop-filter: blur(10px);
	padding: 1.2rem var(--sbl-e-4);
	border-bottom: 1px solid rgba(155, 168, 150, .2);
	z-index: 100;
}

.sbl-formacion .sbl-barra-inner {
	max-width: var(--sbl-ancho);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sbl-e-3);
}

.sbl-formacion .sbl-marca {
	font-family: var(--sbl-fuente-titulo);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--sbl-verde-musgo);
	text-decoration: none;
	letter-spacing: .5px;
}

.sbl-formacion .sbl-anclas a {
	color: var(--sbl-texto);
	text-decoration: none;
	margin-left: var(--sbl-e-5);
	font-size: var(--sbl-txt-sm);
	position: relative;
	transition: color var(--sbl-transicion);
}

.sbl-formacion .sbl-anclas a::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -4px;
	left: 0;
	background: var(--sbl-degrade-suave);
	transition: width var(--sbl-transicion);
}

.sbl-formacion .sbl-anclas a:hover::after,
.sbl-formacion .sbl-anclas a:focus-visible::after {
	width: 100%;
}

/* === Secciones ========================================================== */

.sbl-formacion .sbl-bloque {
	padding: var(--sbl-e-7) var(--sbl-e-4);
}

.sbl-formacion .sbl-claro {
	background-color: rgba(200, 216, 196, .08);
}

.sbl-formacion .sbl-contenedor {
	max-width: var(--sbl-ancho);
	margin: 0 auto;
}

.sbl-formacion .sbl-titulo {
	text-align: center;
	margin-bottom: var(--sbl-e-6);
}

.sbl-formacion .sbl-titulo-nota {
	font-size: 1.1rem;
	color: var(--sbl-texto-suave);
	margin-top: var(--sbl-e-2);
}

/* === Portada ============================================================ */

.sbl-formacion .sbl-hero {
	max-width: var(--sbl-ancho);
	margin: 0 auto;
	padding: 6rem var(--sbl-e-4);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.sbl-formacion .sbl-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(196, 216, 196, .15) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.sbl-formacion .sbl-hero-inner {
	position: relative;
	z-index: 2;
}

.sbl-formacion .sbl-hoja {
	width: 60px;
	height: 60px;
	margin: 0 auto var(--sbl-e-3);
	opacity: .8;
}

.sbl-formacion .sbl-hero h1 {
	margin-bottom: var(--sbl-e-2);
}

.sbl-formacion .sbl-hero-subtitulo {
	font-size: 1.3rem;
	color: var(--sbl-acento);
	margin-bottom: var(--sbl-e-4);
	font-style: italic;
}

.sbl-formacion .sbl-hero-texto {
	font-size: 1.1rem;
	max-width: 700px;
	margin: 0 auto var(--sbl-e-5);
	line-height: 1.9;
}

/* === Botón ============================================================== */

.sbl-formacion .sbl-boton {
	display: inline-block;
	padding: var(--sbl-e-2) var(--sbl-e-5);
	background: var(--sbl-degrade-marca);
	color: #fff;
	text-decoration: none;
	border-radius: var(--sbl-radio-pill);
	font-family: var(--sbl-fuente-texto);
	font-size: var(--sbl-txt-base);
	font-weight: 500;
	transition: transform var(--sbl-transicion), box-shadow var(--sbl-transicion);
	box-shadow: 0 4px 15px rgba(155, 168, 150, .2);
	border: 1px solid transparent;
}

.sbl-formacion .sbl-boton:hover,
.sbl-formacion .sbl-boton:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(155, 168, 150, .3);
	color: #fff;
}

/* === Qué vas a aprender ================================================= */

.sbl-formacion .sbl-logros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sbl-e-4);
}

.sbl-formacion .sbl-logro {
	background: #fff;
	padding: var(--sbl-e-4);
	border-radius: var(--sbl-radio-suave);
	border-left: 4px solid var(--sbl-dorado);
	box-shadow: var(--sbl-sombra-2);
	transition: transform var(--sbl-transicion), box-shadow var(--sbl-transicion);
}

.sbl-formacion .sbl-logro:hover {
	transform: translateY(-4px);
	box-shadow: var(--sbl-sombra-3);
}

.sbl-formacion .sbl-logro h3 {
	margin-bottom: .8rem;
}

.sbl-formacion .sbl-logro p {
	font-size: 1rem;
	margin: 0;
}

/* === Programa =========================================================== */

.sbl-formacion .sbl-programa {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sbl-e-5);
}

.sbl-formacion .sbl-encuentro {
	background: #fff;
	padding: var(--sbl-e-5);
	border-radius: var(--sbl-radio);
	box-shadow: var(--sbl-sombra-1);
	position: relative;
}

.sbl-formacion .sbl-encuentro::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--sbl-degrade-suave);
	border-radius: var(--sbl-radio) var(--sbl-radio) 0 0;
}

.sbl-formacion .sbl-encuentro-num {
	font-family: var(--sbl-fuente-titulo);
	font-size: 2.5rem;
	color: var(--sbl-dorado);
	font-weight: 700;
	margin-bottom: var(--sbl-e-1);
	opacity: .8;
	line-height: 1;
}

.sbl-formacion .sbl-encuentro h3 {
	margin-bottom: var(--sbl-e-3);
	font-size: 1.3rem;
}

.sbl-formacion .sbl-encuentro ul {
	list-style: none;
}

.sbl-formacion .sbl-encuentro li {
	padding: var(--sbl-e-1) 0 var(--sbl-e-1) var(--sbl-e-3);
	position: relative;
	font-size: var(--sbl-txt-sm);
}

.sbl-formacion .sbl-encuentro li::before {
	content: '◆';
	position: absolute;
	left: 0;
	color: var(--sbl-dorado);
	font-size: .7rem;
}

/* === Modalidad ========================================================== */

.sbl-formacion .sbl-modalidad {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--sbl-e-4);
	margin-bottom: 3rem;
}

.sbl-formacion .sbl-modalidad-item {
	text-align: center;
	padding: var(--sbl-e-4) var(--sbl-e-3);
}

.sbl-formacion .sbl-modalidad-icono {
	width: 50px;
	height: 50px;
	margin: 0 auto 1.2rem;
}

.sbl-formacion .sbl-modalidad-item h3 {
	margin-bottom: .8rem;
}

.sbl-formacion .sbl-horarios {
	background: #fff;
	padding: var(--sbl-e-5);
	border-radius: var(--sbl-radio);
	border: 1px solid var(--sbl-verde-claro);
	margin: var(--sbl-e-4) 0;
}

.sbl-formacion .sbl-horarios h3 {
	font-size: 1.2rem;
	margin-bottom: var(--sbl-e-3);
}

.sbl-formacion .sbl-horario-fila {
	display: flex;
	justify-content: space-between;
	padding: .8rem 0;
	border-bottom: 1px solid var(--sbl-verde-claro);
	font-size: 1rem;
}

.sbl-formacion .sbl-horario-fila:last-child {
	border-bottom: none;
}

.sbl-formacion .sbl-pais {
	font-weight: 500;
	color: var(--sbl-verde-musgo);
}

.sbl-formacion .sbl-hora {
	color: var(--sbl-dorado);
}

/* === Para quién es ====================================================== */

.sbl-formacion .sbl-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--sbl-e-3);
}

.sbl-formacion .sbl-check {
	display: flex;
	align-items: flex-start;
	gap: var(--sbl-e-2);
}

.sbl-formacion .sbl-check-marca {
	width: 24px;
	height: 24px;
	background: var(--sbl-degrade-suave);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: .2rem;
}

.sbl-formacion .sbl-check p {
	margin: 0;
	font-size: 1rem;
}

.sbl-formacion .sbl-cierre {
	text-align: center;
	margin-top: var(--sbl-e-5);
	font-size: 1.1rem;
	color: var(--sbl-verde-musgo);
	font-weight: 500;
}

/* === Qué incluye ======================================================== */

.sbl-formacion .sbl-incluye {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--sbl-e-3);
}

.sbl-formacion .sbl-incluye-item {
	display: flex;
	gap: var(--sbl-e-2);
	padding: var(--sbl-e-3);
	background: #fff;
	border-radius: var(--sbl-radio);
	border: 1px solid var(--sbl-verde-claro);
}

.sbl-formacion .sbl-incluye-icono {
	width: 24px;
	height: 24px;
	margin-top: .2rem;
	flex-shrink: 0;
}

.sbl-formacion .sbl-incluye-item p {
	margin: 0;
	font-size: var(--sbl-txt-sm);
}

/* === Visión y aviso ===================================================== */

.sbl-formacion .sbl-vision-lead {
	text-align: center;
	font-size: var(--sbl-txt-lg);
	color: var(--sbl-texto-suave);
	margin: 0 auto var(--sbl-e-4);
	max-width: 800px;
}

.sbl-formacion .sbl-vision-texto {
	text-align: center;
	color: var(--sbl-texto-suave);
	max-width: 900px;
	margin: 0 auto;
	line-height: 2;
}

.sbl-formacion .sbl-aviso {
	background: linear-gradient(135deg, rgba(200, 216, 196, .1), rgba(212, 175, 142, .1));
	border-left: 4px solid var(--sbl-dorado);
	padding: var(--sbl-e-4);
	border-radius: var(--sbl-radio);
	margin: var(--sbl-e-4) auto 0;
	max-width: 900px;
}

.sbl-formacion .sbl-aviso h3 {
	margin-bottom: var(--sbl-e-2);
}

.sbl-formacion .sbl-aviso ul {
	list-style: none;
	padding-left: var(--sbl-e-3);
}

.sbl-formacion .sbl-aviso li {
	position: relative;
	margin-bottom: .8rem;
	padding-left: var(--sbl-e-3);
}

.sbl-formacion .sbl-aviso li::before {
	content: '✕';
	position: absolute;
	left: 0;
	color: var(--sbl-dorado);
}

/* === Llamada final ====================================================== */

.sbl-formacion .sbl-cta {
	text-align: center;
	padding: var(--sbl-e-7) var(--sbl-e-4);
	background: linear-gradient(135deg, rgba(155, 168, 150, .08), rgba(200, 216, 196, .08));
}

.sbl-formacion .sbl-cta h2 {
	margin-bottom: var(--sbl-e-3);
}

.sbl-formacion .sbl-cta p {
	font-size: var(--sbl-txt-lg);
	margin: 0 auto var(--sbl-e-4);
	max-width: 700px;
}

.sbl-formacion .sbl-cta-nota {
	font-size: var(--sbl-txt-sm);
	margin: var(--sbl-e-3) auto 0;
	color: var(--sbl-texto-tenue);
}

/* === Pie propio de la página ============================================ */

.sbl-formacion .sbl-pie {
	background-color: var(--sbl-crema-honda);
	padding: 3rem var(--sbl-e-4);
	text-align: center;
	border-top: 1px solid var(--sbl-verde-claro);
}

.sbl-formacion .sbl-pie-marca {
	font-family: var(--sbl-fuente-titulo);
	font-size: 1.4rem;
	color: var(--sbl-verde-musgo);
	margin-bottom: var(--sbl-e-1);
	font-weight: 600;
}

.sbl-formacion .sbl-pie-lema {
	color: var(--sbl-texto-tenue);
	font-size: var(--sbl-txt-sm);
	margin-bottom: var(--sbl-e-2);
}

.sbl-formacion .sbl-pie-legal {
	color: var(--sbl-texto-suave);
	font-size: .9rem;
}

/* === Responsive ========================================================= */

@media (max-width: 768px) {
	.sbl-formacion .sbl-barra {
		padding: var(--sbl-e-2) var(--sbl-e-3);
	}

	.sbl-formacion .sbl-anclas {
		display: none;
	}

	.sbl-formacion .sbl-hero {
		padding: var(--sbl-e-6) var(--sbl-e-3);
	}

	.sbl-formacion .sbl-bloque,
	.sbl-formacion .sbl-cta {
		padding: 3rem var(--sbl-e-3);
	}

	.sbl-formacion .sbl-encuentro-num {
		font-size: 2rem;
	}

	.sbl-formacion .sbl-modalidad {
		grid-template-columns: 1fr;
	}

	.sbl-formacion .sbl-horario-fila {
		flex-direction: column;
		gap: var(--sbl-e-1);
	}
}

/* === Entrada suave ====================================================== */

@media (prefers-reduced-motion: no-preference) {
	.sbl-formacion .sbl-logro,
	.sbl-formacion .sbl-encuentro,
	.sbl-formacion .sbl-incluye-item {
		animation: sbl-aparecer .6s ease-out both;
	}

	@keyframes sbl-aparecer {
		from { opacity: 0; transform: translateY(20px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* === Logo en la barra =================================================== */

.sbl-formacion .sbl-marca-imagen {
	display: flex;
	align-items: center;
	line-height: 0;
	flex-shrink: 0;
}

.sbl-formacion .sbl-logo {
	height: var(--sbl-alto-logo, 46px);
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
}

@media (max-width: 768px) {
	.sbl-formacion .sbl-logo {
		height: calc(var(--sbl-alto-logo, 46px) * 0.8);
	}
}

/* === Inversión ========================================================== */

.sbl-formacion .sbl-precios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sbl-e-4);
	align-items: stretch;
	max-width: 960px;
	margin: 0 auto;
}

.sbl-formacion .sbl-precio {
	position: relative;
	background: #fff;
	border: 1px solid var(--sbl-verde-claro);
	border-radius: var(--sbl-radio-suave);
	padding: var(--sbl-e-5) var(--sbl-e-4);
	text-align: center;
	box-shadow: var(--sbl-sombra-1);
	transition: transform var(--sbl-transicion), box-shadow var(--sbl-transicion);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sbl-e-1);
}

.sbl-formacion .sbl-precio:hover {
	transform: translateY(-4px);
	box-shadow: var(--sbl-sombra-3);
}

.sbl-formacion .sbl-precio--destacada {
	border: 2px solid var(--sbl-dorado);
	box-shadow: var(--sbl-sombra-3);
}

.sbl-formacion .sbl-precio-cinta {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--sbl-degrade-marca);
	color: #fff;
	font-family: var(--sbl-fuente-titulo);
	font-size: .8rem;
	letter-spacing: .5px;
	padding: .25rem 1rem;
	border-radius: var(--sbl-radio-pill);
	white-space: nowrap;
	line-height: 1.6;
}

.sbl-formacion .sbl-precio-nombre {
	font-size: 1.15rem;
	margin: 0;
	color: var(--sbl-verde-musgo);
}

.sbl-formacion .sbl-precio-valor {
	font-family: var(--sbl-fuente-titulo);
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--sbl-acento);
	line-height: 1.2;
	margin: 0;
}

.sbl-formacion .sbl-precio-detalle {
	font-size: var(--sbl-txt-sm);
	color: var(--sbl-texto-suave);
	margin: 0;
	line-height: 1.5;
}

.sbl-formacion .sbl-precio-nota {
	text-align: center;
	margin: var(--sbl-e-5) auto 0;
	max-width: 700px;
	font-size: var(--sbl-txt-sm);
	color: var(--sbl-texto-suave);
}

/* Con una sola opción no conviene que ocupe todo el ancho. */
.sbl-formacion .sbl-precios--1 {
	max-width: 360px;
}

.sbl-formacion .sbl-precios--2 {
	max-width: 700px;
}

/* === Contacto: teléfono visible y aviso para el editor ================== */

.sbl-formacion .sbl-cta-telefono {
	font-family: var(--sbl-fuente-titulo);
	font-size: 1.2rem;
	color: var(--sbl-verde-musgo);
	margin: var(--sbl-e-3) auto 0;
}

.sbl-formacion .sbl-cta-aviso {
	display: inline-block;
	background: rgba(212, 175, 142, .18);
	border: 1px dashed var(--sbl-dorado);
	border-radius: var(--sbl-radio);
	padding: var(--sbl-e-2) var(--sbl-e-3);
	font-size: var(--sbl-txt-sm);
	color: var(--sbl-texto);
	max-width: 520px;
}

/* === Recuadro de promoción ============================================== */

.sbl-formacion .sbl-promo {
	max-width: 640px;
	margin: var(--sbl-e-5) auto 0;
	padding: var(--sbl-e-4);
	text-align: center;
	background: linear-gradient(135deg, rgba(212, 175, 142, .16), rgba(200, 216, 196, .16));
	border: 1px dashed var(--sbl-dorado);
	border-radius: var(--sbl-radio-suave);
}

.sbl-formacion .sbl-promo-titulo {
	font-family: var(--sbl-fuente-titulo);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--sbl-verde-musgo);
	margin: 0 0 var(--sbl-e-1);
	line-height: 1.35;
}

.sbl-formacion .sbl-promo-texto {
	font-size: var(--sbl-txt-base);
	color: var(--sbl-texto-suave);
	margin: 0;
}

.sbl-formacion .sbl-promo-nota {
	font-size: var(--sbl-txt-sm);
	color: var(--sbl-texto-tenue);
	margin: var(--sbl-e-2) 0 0;
}
