/* ==========================================================================
   Propuesta de diseño "pro" (rama diseno-pro).
   Capa que se carga después de main.css y site.css y solo refina: si se descarta,
   basta con quitar este archivo y su enqueue.
   Criterios: una sola paleta (noche + dorado, el azul vivo solo para enlaces), más aire
   y jerarquía, superficies con profundidad suave, botones en tipo normal y un ritmo de
   secciones claro / niebla / noche que guía hasta la compra.
   ========================================================================== */

:root {
	--rf-texto-2: #48566F;
	--rf-radio: 12px;
	--rf-radio-lg: 18px;
	--rf-sombra-suave: 0 1px 2px rgba(11, 24, 50, 0.06), 0 8px 24px rgba(11, 24, 50, 0.06);
	--rf-sombra: 0 2px 4px rgba(11, 24, 50, 0.06), 0 18px 40px rgba(11, 24, 50, 0.12);
}

/* ---------- Tipografía y botones ---------- */

body { font-size: 1.0625rem; }
h2 { letter-spacing: -0.02em; }

.rf-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font: 600 0.8rem/1 var(--rf-font);
	letter-spacing: 0.12em;
	color: var(--rf-marino-2);
}
.rf-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--rf-dorado); }
.rf-eyebrow--dorado { color: var(--rf-dorado); }

.rf-btn {
	border-radius: 10px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
	font-size: 1rem;
}
.rf-btn--primario { box-shadow: 0 6px 16px rgba(240, 181, 74, 0.35); }
.rf-btn--primario:hover { transform: translateY(-1px); }
.rf-btn--texto { background: var(--rf-blanco); }
.rf-header .rf-btn { font-size: 0.92rem; }

.rf-section { padding-block: clamp(56px, 9vw, 112px); }
.rf-section__head h2 { margin-bottom: 0.4em; }
.rf-section__head p:not(.rf-eyebrow) { color: var(--rf-texto-2); font-size: 1.1rem; }
.rf-section__head--centro { margin-inline: auto; text-align: center; }
.rf-section__head--centro .rf-eyebrow { justify-content: center; }

/* ---------- Introducción ---------- */

.rf-intro {
	background:
		radial-gradient(60% 70% at 85% 40%, rgba(31, 111, 209, 0.10), transparent 70%),
		radial-gradient(40% 50% at 10% 0%, rgba(240, 181, 74, 0.10), transparent 70%),
		linear-gradient(180deg, var(--rf-blanco) 0%, var(--rf-niebla) 100%);
}
.rf-intro__title { font-size: clamp(2.2rem, 4.3vw, 3.5rem); line-height: 1.06; }
.rf-intro__lead { color: var(--rf-texto-2); }
.rf-intro__chip { border-radius: 14px; border-width: 4px; box-shadow: 0 14px 30px rgba(11, 24, 50, 0.18); }

.rf-trust {
	display: flex; flex-wrap: wrap; gap: 10px 22px;
	list-style: none; margin: 22px 0 0; padding: 0;
	font-size: 0.95rem; font-weight: 600; color: var(--rf-marino);
}
.rf-trust li { display: inline-flex; align-items: center; gap: 8px; }
.rf-trust .rf-icon {
	width: 20px; height: 20px; padding: 3px; border-radius: 50%;
	background: var(--rf-ok-bg); color: var(--rf-ok);
}
@media (max-width: 860px) { .rf-trust { justify-content: center; } }

/* Franja de temas: más discreta (marino con separadores dorados) y unida a las cifras. */
.rf-ticker { background: var(--rf-marino); color: #C9D4E6; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rf-ticker span { padding: 14px 26px; font: 600 0.82rem/1 var(--rf-font); letter-spacing: 0.12em; }
.rf-ticker span::after { content: "◆"; margin-left: 52px; color: var(--rf-dorado); opacity: 1; font-size: 0.6rem; vertical-align: middle; }

.rf-stats__grid dd { font-family: var(--rf-font); letter-spacing: -0.02em; }

/* ---------- Tarjetas de curso ---------- */

.rf-course-grid { gap: 28px; align-items: stretch; }
.rf-course-card {
	position: relative;
	border: 1px solid var(--rf-linea);
	border-radius: var(--rf-radio-lg);
	box-shadow: var(--rf-sombra-suave);
}
.rf-course-card:hover { transform: translateY(-4px); box-shadow: var(--rf-sombra); }
.rf-course-card__media { display: block; padding: 10px 10px 0; }
.rf-course-card__media img { border-radius: 12px; }
.rf-course-card__body { padding: 20px 22px 22px; gap: 12px; }
.rf-course-card__level {
	align-self: flex-start; padding: 6px 10px; border-radius: 999px;
	background: var(--rf-niebla); color: var(--rf-marino-2);
	font: 700 0.72rem/1 var(--rf-font); letter-spacing: 0.1em;
}
.rf-course-card__title { font-size: 1.35rem; letter-spacing: -0.015em; }
.rf-course-card__facts {
	display: grid; gap: 10px; margin: 2px 0 0; padding: 14px;
	border-radius: 12px; background: var(--rf-niebla); border: 0;
}
.rf-course-card__facts dt { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--rf-texto-2); }
.rf-course-card__facts dd { font-size: 0.93rem; line-height: 1.45; }
.rf-course-card__foot { border-top: 0; padding-top: 6px; }
.rf-course-card__price { font: 800 1.9rem/1 var(--rf-font); letter-spacing: -0.03em; }

/* El programa se presenta como el paso siguiente: borde dorado y cinta. */
.rf-course-card--destacado { border: 2px solid var(--rf-dorado); box-shadow: 0 18px 40px rgba(240, 181, 74, 0.18); }
.rf-course-card--destacado .rf-course-card__level { background: var(--rf-noche); color: var(--rf-dorado); }
.rf-course-card__ribbon {
	position: absolute; z-index: 2; top: 22px; right: -2px; margin: 0;
	padding: 7px 14px; border-radius: 8px 0 0 8px;
	background: var(--rf-dorado); color: var(--rf-noche);
	font: 800 0.75rem/1 var(--rf-font); letter-spacing: 0.08em; text-transform: uppercase;
	box-shadow: 0 6px 14px rgba(11, 24, 50, 0.18);
}

/* ---------- Cómo funciona ---------- */

.rf-steps {
	counter-reset: none; list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative;
}
.rf-steps::before {
	content: ""; position: absolute; left: 16%; right: 16%; top: 28px; height: 2px;
	background: repeating-linear-gradient(90deg, var(--rf-dorado) 0 8px, transparent 8px 16px);
}
.rf-steps li {
	position: relative; text-align: center; padding: 0 12px;
}
.rf-steps__num {
	position: relative; display: inline-grid; place-items: center;
	width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%;
	background: var(--rf-noche); color: var(--rf-dorado);
	font: 800 1.4rem/1 var(--rf-font);
	box-shadow: 0 0 0 8px var(--rf-niebla);
}
.rf-steps h3 { margin-bottom: 0.35em; }
.rf-steps p { margin: 0 auto; max-width: 32ch; color: var(--rf-texto-2); }
@media (max-width: 760px) {
	.rf-steps { grid-template-columns: 1fr; gap: 28px; }
	.rf-steps::before { left: 50%; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--rf-dorado) 0 8px, transparent 8px 16px); }
	.rf-steps li { background: var(--rf-niebla); }
}

/* ---------- Método (fondo noche) ---------- */

.rf-method { background: radial-gradient(70% 90% at 0% 100%, rgba(31, 111, 209, 0.22), transparent 60%), var(--rf-noche); }
.rf-method .rf-split__media img { border-radius: var(--rf-radio-lg); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }

/* ---------- Presenciales ---------- */

.rf-gallery img { border-radius: var(--rf-radio); }

/* ---------- Testimonios ---------- */

.rf-testimonials { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rf-testimonials > * { margin: 0; }
@media (max-width: 1000px) { .rf-testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rf-testimonials { grid-template-columns: 1fr; } }
.rf-testimonial { padding: 26px; border: 0; border-radius: var(--rf-radio-lg); box-shadow: var(--rf-sombra-suave); }
.rf-testimonial blockquote { color: var(--rf-tinta); }
.rf-testimonial figcaption {
	grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center;
	padding-top: 16px; border-top: 1px solid var(--rf-linea);
}
.rf-testimonial figcaption > :not(.rf-testimonial__avatar) { grid-column: 2; }
.rf-testimonial__avatar {
	grid-row: 1 / span 3; display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--rf-noche); color: var(--rf-dorado);
	font: 800 1.1rem/1 var(--rf-font);
}

/* ---------- Certificación ---------- */

.rf-cert__list { list-style: none; padding: 0; margin: 20px 0 12px; display: grid; gap: 10px; }
.rf-cert__item {
	display: flex; align-items: center; gap: 14px; padding: 14px 16px;
	border: 1px solid var(--rf-linea); border-radius: var(--rf-radio); background: var(--rf-blanco);
	box-shadow: var(--rf-sombra-suave);
}
.rf-cert__item .rf-icon { flex: none; width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--rf-niebla); color: var(--rf-marino-2); }
.rf-cert__item span { display: grid; font-size: 0.95rem; color: var(--rf-texto-2); }
.rf-cert__item strong { color: var(--rf-marino); font-size: 1.02rem; }
.rf-cert__item--diploma { border-color: var(--rf-dorado); }
.rf-cert__item--diploma .rf-icon { background: var(--rf-noche); color: var(--rf-dorado); }
.rf-cert .rf-split__media img { border-radius: var(--rf-radio-lg); box-shadow: var(--rf-sombra); }

/* ---------- Preguntas frecuentes: título a la izquierda, acordeón a la derecha ---------- */

.rf-faq-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.rf-faq-layout .rf-section__head { position: sticky; top: calc(var(--rf-header-h) + 24px); }
@media (max-width: 860px) { .rf-faq-layout { grid-template-columns: 1fr; } .rf-faq-layout .rf-section__head { position: static; } }
.rf-faq__item { border-radius: var(--rf-radio); border-color: transparent; box-shadow: var(--rf-sombra-suave); }
.rf-faq__item summary { font-weight: 600; }
.rf-faq__item summary::after {
	display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--rf-niebla); color: var(--rf-marino); font: 600 1.2rem/1 var(--rf-font);
}
.rf-faq__item[open] { box-shadow: var(--rf-sombra); }
.rf-faq__item[open] summary::after { background: var(--rf-dorado); color: var(--rf-noche); }

/* ---------- Formulario de clase gratis ---------- */

.rf-lead { border-radius: var(--rf-radio-lg); box-shadow: var(--rf-sombra-suave); }

/* ---------- Cierre: noche con brillo dorado en vez del azul vivo ---------- */

.rf-cta {
	background:
		radial-gradient(60% 120% at 50% 0%, rgba(31, 111, 209, 0.28), transparent 70%),
		linear-gradient(160deg, var(--rf-marino), var(--rf-noche));
	color: #C9D4E6;
}
.rf-cta h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }

/* ---------- Ficha de curso ---------- */

.rf-buybox { border-radius: var(--rf-radio-lg); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); }
.rf-buybox__price { font: 800 2.6rem/1 var(--rf-font); letter-spacing: -0.03em; }
.rf-subnav { box-shadow: 0 6px 16px rgba(11, 24, 50, 0.05); }
.rf-course-block h2 { letter-spacing: -0.02em; }
.rf-fit__grid > div { border-radius: var(--rf-radio); }
.rf-syllabus__module { border-radius: var(--rf-radio); }

/* ---------- Pie ---------- */

.rf-footer { background: var(--rf-noche); }

@media (prefers-reduced-motion: reduce) {
	.rf-course-card:hover, .rf-btn--primario:hover { transform: none; }
}

/* ---------- Portadas de curso: foto real + azul noche + título en texto ---------- */

.rf-cover {
	position: relative; overflow: hidden; isolation: isolate;
	aspect-ratio: 16 / 10; border-radius: 12px;
	background: radial-gradient(80% 90% at 85% 30%, #1B3563 0%, var(--rf-noche) 70%);
	color: var(--rf-blanco);
}
.rf-cover img.rf-cover__photo {
	position: absolute; z-index: -1; top: 0; right: 0; width: 58%; height: 100%; aspect-ratio: auto; border-radius: 0; max-width: none;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 22%, #000 48%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 22%, #000 48%);
}
/* Foto sin fondo: Richard de pie, abajo a la derecha, con un halo dorado detrás. */
.rf-cover--recorte::before {
	content: ""; position: absolute; z-index: -2; right: 2%; bottom: -30%; width: 62%; aspect-ratio: 1;
	border-radius: 50%; background: radial-gradient(circle, rgba(240, 181, 74, 0.55), rgba(240, 181, 74, 0) 65%);
}
.rf-cover--recorte img.rf-cover__photo {
	top: auto; bottom: 0; width: 58%; height: 104%; object-fit: contain; object-position: 50% 100%;
	-webkit-mask-image: none; mask-image: none;
}
.rf-cover__text {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px;
	padding: 0 48% 0 7%;
}
.rf-cover::after {
	content: ""; position: absolute; left: 7%; top: 14%; width: 34px; height: 3px; border-radius: 2px; background: var(--rf-dorado);
}
.rf-cover__kicker { font: 700 clamp(0.6rem, 1.6vw, 0.72rem)/1.2 var(--rf-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rf-dorado); }
.rf-cover__title {
	margin: 0; color: var(--rf-blanco); text-wrap: balance;
	font: 800 clamp(1.15rem, 2.4vw, 1.6rem)/1.05 var(--rf-font); letter-spacing: -0.02em;
}
.rf-cover__zones { font: 500 clamp(0.62rem, 1.5vw, 0.76rem)/1.35 var(--rf-font); color: #AEBBD2; }
.rf-cover__brand {
	position: absolute; left: 7%; bottom: 9%;
	font: 700 0.62rem/1 var(--rf-font); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.rf-cover--programa { box-shadow: inset 0 0 0 1px rgba(240, 181, 74, 0.35); }
.rf-course-card__media .rf-cover { transition: transform 0.3s ease; }
.rf-course-card:hover .rf-cover__photo { transform: scale(1.03); transition: transform 0.4s ease; }
.rf-buybox .rf-cover { border-radius: 0; }
.rf-buybox .rf-cover__title { font-size: 1.45rem; }

/* Método: foto nítida de Richard dando clase. */
.rf-method__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 25%; }

/* ---------- Cabecera: logo SVG animado y fondo transparente en la portada ---------- */

.rf-logo { color: var(--rf-marino); }
.rf-logo__svg { display: block; width: auto; height: 34px; overflow: visible; }
@media (max-width: 960px) { .rf-logo__svg { height: 28px; } }
.rf-logo--claro { color: var(--rf-blanco); --rf-logo-1: #9CC2F0; --rf-logo-2: #4A8BDB; --rf-logo-3: #2667BD; }
.rf-logo--claro .rf-logo__svg { height: 32px; }

/* El emblema gira y entra; el nombre aparece deslizándose. Al pasar el mouse, el emblema da una vuelta. */
.rf-logo__mark, .rf-logo__word { transform-box: fill-box; transform-origin: center; }
.rf-header .rf-logo__mark { animation: rf-logo-mark 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rf-header .rf-logo__word { animation: rf-logo-word 0.7s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rf-logo:hover .rf-logo__mark,
.rf-logo:focus-visible .rf-logo__mark { animation: rf-logo-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes rf-logo-mark { from { opacity: 0; transform: rotate(-200deg) scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes rf-logo-word { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes rf-logo-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Vidrio en todas las páginas; transparente solo arriba de la portada (fondo claro). */
.rf-header {
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: rgba(221, 228, 238, 0.7);
	transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.rf-header.is-scrolled { box-shadow: 0 6px 24px rgba(11, 24, 50, 0.08); }
.home .rf-header { position: fixed; left: 0; right: 0; }
.home .rf-header:not(.is-scrolled):not(.is-open) {
	background: transparent; border-bottom-color: transparent;
	-webkit-backdrop-filter: none; backdrop-filter: none;
}
.home .rf-intro { padding-top: var(--rf-header-h); }
.rf-header__toggle { background: rgba(255, 255, 255, 0.7); }

@media (prefers-reduced-motion: reduce) {
	.rf-logo__mark, .rf-logo__word, .rf-logo:hover .rf-logo__mark { animation: none !important; }
}

/* ---------- Animaciones de tarjetas y botones ---------- */

/* Aparición al bajar (motion.js agrega .rf-reveal solo a lo que está fuera de la pantalla). */
.rf-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease var(--rf-delay, 0ms), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) var(--rf-delay, 0ms); }
.rf-reveal.is-visible { opacity: 1; transform: none; }
/* Ya visibles, las tarjetas vuelven a su transición rápida de hover. */
.rf-course-card.rf-reveal.is-visible { transition: opacity 0.6s ease var(--rf-delay, 0ms), transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }

/* Tarjetas: borde dorado al pasar el mouse y la flecha de "Ver curso" avanza. */
.rf-course-card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.rf-course-card:hover { border-color: var(--rf-dorado); }

/* Botones: flecha que avanza y efecto al presionar. */
.rf-btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.rf-btn:active { transform: scale(0.97); }
.rf-btn--flecha .rf-icon { width: 18px; height: 18px; transition: transform 0.2s ease; }
.rf-btn--flecha:hover .rf-icon,
.rf-course-card:hover .rf-btn--flecha .rf-icon { transform: translateX(4px); }

/* "Comprar ahora": un brillo cruza el botón cada pocos segundos. */
.rf-btn--comprar { position: relative; overflow: hidden; isolation: isolate; }
.rf-btn--comprar::after {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	animation: rf-brillo 4.5s ease-in-out 1.5s infinite;
}
@keyframes rf-brillo { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.rf-btn--comprar.is-loading { pointer-events: none; opacity: 0.85; }
.rf-btn--comprar.is-loading::after { display: none; }
.rf-spinner {
	display: inline-block; width: 1em; height: 1em; border-radius: 50%;
	border: 2px solid currentColor; border-right-color: transparent;
	animation: rf-giro 0.7s linear infinite;
}
@keyframes rf-giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.rf-reveal { opacity: 1; transform: none; transition: none; }
	.rf-btn--comprar::after { animation: none; display: none; }
	.rf-btn:active { transform: none; }
	.rf-btn--flecha .rf-icon { transition: none; }
}

/* Portadas con nombres largos ("Formación avanzada en columna vertebral"): el texto respeta la línea dorada y la firma. */
.rf-cover__text { padding-top: 12%; padding-bottom: 14%; }
.rf-cover--recorte .rf-cover__text { padding-right: 45%; }
.rf-cover--programa .rf-cover__title { font-size: clamp(1.05rem, 2.1vw, 1.4rem); }
.rf-buybox .rf-cover--programa .rf-cover__title { font-size: 1.3rem; }

/* Alcance de la formación: resumen en el recuadro de compra y destino del enlace. */
.rf-buybox__scope { margin: 0; padding: 10px 12px; border-radius: 8px; background: #FFF7E6; border: 1px solid #F3DDAE; font-size: 0.85rem; line-height: 1.4; color: var(--rf-tinta); }
.rf-buybox__scope a { font-weight: 700; white-space: nowrap; }
.rf-safety { scroll-margin-top: calc(var(--rf-header-h) + 72px); }
.rf-safety:target { box-shadow: 0 0 0 3px rgba(240, 181, 74, 0.45); }

/* Preguntas frecuentes con respuestas de varios párrafos. */
.rf-faq__item p + p { padding-top: 0; margin-top: -6px; }

/* ---------- Ficha de curso en dos columnas: el recuadro de compra acompaña toda la página ---------- */

/* Los fondos a todo el ancho salen de la columna: se recorta el sobrante sin crear desplazamiento
   horizontal (clip no rompe los elementos fijos al bajar, a diferencia de hidden). */
.single-courses main { overflow-x: clip; }
.rf-course-layout { position: relative; }
/* Fondos a todo el ancho de la pantalla desde elementos que viven dentro de la columna. */
.rf-course-top, .rf-course-hero__copy { position: relative; }
/* La barra de secciones sigue fija al bajar (sticky también ancla su fondo a todo el ancho). */
.rf-course-layout .rf-subnav { position: sticky; }
.rf-course-top { background: none; isolation: isolate; padding-block: clamp(28px, 5vw, 48px); display: grid; gap: 24px; }
.rf-course-top::before {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw;
	background: linear-gradient(160deg, var(--rf-marino), var(--rf-noche));
}
.rf-course-layout .rf-subnav { box-shadow: none; border-bottom: 0; background: none; isolation: isolate; }
.rf-course-layout .rf-subnav::before {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw;
	background: var(--rf-blanco); border-bottom: 1px solid var(--rf-linea); box-shadow: 0 6px 16px rgba(11, 24, 50, 0.05);
}
.rf-course-main { max-width: none; padding-block: clamp(32px, 5vw, 64px); }

@media (min-width: 961px) {
	.rf-course-layout {
		display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: clamp(24px, 4vw, 56px);
		grid-template-rows: auto 56px 1fr; align-items: start;
	}
	/* El bloque superior se "disuelve": su texto y el recuadro pasan a ser celdas de la rejilla. */
	.rf-course-top { display: contents; }
	.rf-course-top::before { display: none; }
	.rf-course-hero__copy { grid-column: 1; grid-row: 1; isolation: isolate; padding-block: clamp(32px, 5vw, 64px); color: #D5DEEC; }
	.rf-course-hero__copy::before {
		content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw;
		background: linear-gradient(160deg, var(--rf-marino), var(--rf-noche));
	}
	/* Ocupa su fila y la del contenido para poder quedar fija mientras se lee (la fila 2 le reserva el alto). */
	.rf-course-layout .rf-subnav { grid-column: 1; grid-row: 2 / span 2; min-height: 56px; }
	.rf-course-main { grid-column: 1; grid-row: 3; }
	.rf-buybox {
		grid-column: 2; grid-row: 1 / span 3; z-index: 41;
		margin-top: clamp(32px, 5vw, 64px); margin-bottom: clamp(32px, 5vw, 64px);
		position: sticky; top: calc(var(--rf-header-h) + 72px);
	}
	.admin-bar .rf-buybox { top: calc(var(--rf-header-h) + 104px); }
	/* Al bajar: sin portada, para que el recuadro quepa en pantallas de laptop. */
	.rf-buybox.is-compact .rf-cover { display: none; }
	.rf-buybox.is-compact { box-shadow: var(--rf-sombra); border: 1px solid var(--rf-linea); }
}