/*
 * Oracle Gypsies Campus — sistema visual del campus (regla 2/3/5A).
 * Paleta extraída del logo oficial (navy profundo, hielo/cian, rosa
 * pálido, crema cálido). Glassmorphism moderado, sombras suaves,
 * densidad "streaming premium" — nunca aspecto de wp-admin ni de LMS
 * escolar genérico. El Administrador ajusta textos/imágenes/colores desde
 * Elementor; esta hoja define la base que Elementor no toca.
 */

:root {
	/* Paleta v2 (regla del usuario: "fondo más oscuro y con mayor
	   presencia de púrpura" — navy casi negro + púrpura profundo +
	   berenjena, NUNCA morado brillante). Sigue derivada del logo: el
	   círculo rúnico y la constelación ya tenían un tinte violeta muy
	   sutil en las sombras del azul noche — esta paleta lo hace explícito
	   como capa de profundidad, no como color dominante. */
	--ogc-navy-950: #050711;
	--ogc-navy-900: #0b0815;
	--ogc-navy-800: #100a1a;
	--ogc-navy-700: #160d20;
	--ogc-blue-600: #241640;
	--ogc-lavender: #9c8fc4;
	--ogc-ice-300: #bfeff5;
	--ogc-ice-400: #8fe0ee;
	--ogc-ice-500: #63c9dd;
	--ogc-pink-200: #f3d9e1;
	--ogc-pink-300: #e9c3ce;
	--ogc-cream-100: #f6efe4;
	--ogc-cream-200: #eee3d2;

	--ogc-success: #7fd8a8;
	--ogc-warning: #f0c96b;
	--ogc-danger: #e98b8b;

	--ogc-radius-lg: 20px;
	--ogc-radius-md: 14px;
	--ogc-radius-sm: 10px;
	--ogc-shadow-card: 0 12px 40px rgba(3, 6, 16, 0.45);
	--ogc-shadow-soft: 0 4px 18px rgba(3, 6, 16, 0.28);
	--ogc-border-glass: 1px solid rgba(191, 239, 245, 0.14);

	--ogc-font-display: 'Cinzel', 'Georgia', serif;
	--ogc-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/*
 * Overflow horizontal real encontrado y diagnosticado (no es un parche a
 * ciegas): el Hero usa `margin-right: calc(-50vw + 50%)` para sangrar la
 * fotografía hasta el borde derecho real del viewport — técnica estándar
 * de "full-bleed desde un contenedor centrado". El problema es que `vw`
 * SIEMPRE incluye el ancho de la barra de scroll vertical por spec,
 * mientras que `document.documentElement.clientWidth` (el ancho visible
 * real) NO la incluye — confirmado en vivo a 1024px: `scrollWidth` de
 * 1017 contra `clientWidth` de 1009, exactamente los 8px de la barra de
 * scroll. El elemento no está mal dimensionado en sí (su lógica es
 * correcta); es un efecto secundario conocido e inevitable de CUALQUIER
 * técnica de sangrado con `vw` cuando hay scrollbar vertical — por eso
 * siempre se combina con `overflow-x:hidden` en el ancestro común, igual
 * que en cualquier sitio con secciones full-bleed. Aplicado aquí, no en
 * cada sección suelta, y con la causa ya documentada arriba.
 */
html {
	overflow-x: hidden;
}

/*
 * Respaldo: si la sección/contenedor de Elementor que envuelve los
 * widgets no trae su propio fondo oscuro configurado (el Administrador
 * normalmente lo pone al maquetar en Elementor), que la página igual se
 * vea oscura y no deje huecos blancos entre tarjetas.
 */
body:has(.ogc-card) {
	background: var(--ogc-navy-950);
}

.ogc-root,
.ogc-card {
	font-family: var(--ogc-font-body);
	color: var(--ogc-cream-100);
	box-sizing: border-box;
}

.ogc-card *,
.ogc-card *::before,
.ogc-card *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Tarjeta base                                                        */
/* ------------------------------------------------------------------ */

.ogc-card {
	--ogc-accent: var(--ogc-ice-400);
	position: relative;
	background:
		linear-gradient(155deg, rgba(22, 13, 32, 0.75), rgba(11, 8, 21, 0.92)),
		var(--ogc-navy-900);
	border: var(--ogc-border-glass);
	border-radius: var(--ogc-radius-lg);
	padding: 28px 30px;
	box-shadow: var(--ogc-shadow-card);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	overflow: hidden;
	margin: 0 0 20px;
}

.ogc-card::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 85% -10%, rgba(143, 224, 238, 0.16), transparent 55%);
}

.ogc-card h3,
.ogc-card h4 {
	font-family: var(--ogc-font-display);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 12px;
	color: var(--ogc-cream-100);
}

.ogc-card h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}

.ogc-card h4 {
	font-size: 1.05rem;
	color: var(--ogc-ice-300);
}

.ogc-card p {
	margin: 0 0 10px;
	line-height: 1.55;
	color: rgba(246, 239, 228, 0.85);
}

.ogc-card--placeholder {
	border-style: dashed;
	border-color: rgba(233, 195, 206, 0.35);
	color: rgba(246, 239, 228, 0.6);
	font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Hero — Próxima clase                                                */
/* ------------------------------------------------------------------ */

.ogc-card--hero {
	padding: 36px 34px 32px;
	background:
		radial-gradient(circle at 12% 0%, rgba(143, 224, 238, 0.18), transparent 45%),
		radial-gradient(circle at 100% 100%, rgba(233, 195, 206, 0.14), transparent 50%),
		linear-gradient(155deg, rgba(22, 13, 32, 0.85), rgba(5, 7, 17, 0.95));
}

.ogc-hero__title {
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	color: var(--ogc-ice-300);
	opacity: 0.8;
	margin-bottom: 6px;
}

.ogc-hero__group {
	font-family: var(--ogc-font-display);
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	margin-bottom: 4px;
}

.ogc-hero__datetime {
	color: var(--ogc-cream-200);
	font-size: 0.95rem;
	margin-bottom: 22px;
}

/* ------------------------------------------------------------------ */
/* CTA                                                                  */
/* ------------------------------------------------------------------ */

.ogc-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ogc-font-body);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 28px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	color: var(--ogc-navy-950);
	background: linear-gradient(135deg, var(--ogc-ice-300), var(--ogc-ice-500));
	box-shadow: 0 10px 28px rgba(143, 224, 238, 0.28);
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.ogc-cta:hover:not(:disabled) {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 14px 34px rgba(143, 224, 238, 0.36);
}

.ogc-cta:active:not(:disabled) {
	transform: translateY(0);
}

.ogc-cta:disabled,
.ogc-cta[disabled] {
	cursor: not-allowed;
	color: rgba(246, 239, 228, 0.55);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

.ogc-cta--bloqueado {
	background: rgba(233, 139, 139, 0.16);
	color: var(--ogc-danger);
}

.ogc-cta--pagar {
	background: linear-gradient(135deg, var(--ogc-pink-200), var(--ogc-pink-300));
	color: var(--ogc-navy-950);
	box-shadow: 0 10px 28px rgba(233, 195, 206, 0.24);
}

.ogc-cta--descargar-manual,
.ogc-cta--solicitar-grabacion,
.ogc-cta--justificar-falta {
	background: rgba(191, 239, 245, 0.1);
	color: var(--ogc-ice-300);
	box-shadow: none;
	border: 1px solid rgba(191, 239, 245, 0.3);
}

.ogc-cta--descargar-manual:hover,
.ogc-cta--solicitar-grabacion:hover,
.ogc-cta--justificar-falta:hover {
	background: rgba(191, 239, 245, 0.18);
}

/* ------------------------------------------------------------------ */
/* Estado de pago                                                      */
/* ------------------------------------------------------------------ */

.ogc-payment__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(127, 216, 168, 0.14);
	color: var(--ogc-success);
	margin-bottom: 14px;
}

.ogc-payment--pronto_pago .ogc-payment__label,
.ogc-payment--normal .ogc-payment__label {
	background: rgba(127, 216, 168, 0.14);
	color: var(--ogc-success);
}

.ogc-payment--recargo .ogc-payment__label {
	background: rgba(240, 201, 107, 0.16);
	color: var(--ogc-warning);
}

.ogc-payment--bloqueado .ogc-payment__label,
.ogc-payment--en_revision .ogc-payment__label {
	background: rgba(233, 139, 139, 0.16);
	color: var(--ogc-danger);
}

.ogc-payment__amount {
	font-family: var(--ogc-font-display);
	font-size: 1.6rem;
	margin-bottom: 4px;
}

.ogc-payment__due {
	color: rgba(246, 239, 228, 0.6);
	font-size: 0.85rem;
	margin-bottom: 20px;
}

/* ------------------------------------------------------------------ */
/* Grabaciones / manuales / asistencias — listas                       */
/* ------------------------------------------------------------------ */

.ogc-recordings__credits {
	font-size: 0.95rem;
	color: var(--ogc-ice-300);
}

.ogc-recordings__select {
	width: 100%;
	padding: 12px 14px;
	margin: 10px 0 16px;
	border-radius: var(--ogc-radius-sm);
	border: 1px solid rgba(191, 239, 245, 0.25);
	background: rgba(5, 7, 17, 0.5);
	color: var(--ogc-cream-100);
	font-family: var(--ogc-font-body);
}

.ogc-manuales__list,
.ogc-asistencias__list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ogc-manuales__list li,
.ogc-asistencias__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--ogc-radius-sm);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 0.92rem;
}

.ogc-manuales__download {
	color: var(--ogc-ice-300);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.ogc-asistencias__item--presente {
	border-left: 3px solid var(--ogc-success);
}

.ogc-asistencias__item--falta {
	border-left: 3px solid var(--ogc-danger);
}

.ogc-asistencias__item--falta_justificada {
	border-left: 3px solid var(--ogc-ice-400);
}

.ogc-asistencias__warning {
	background: rgba(233, 139, 139, 0.14);
	border: 1px solid rgba(233, 139, 139, 0.35);
	color: var(--ogc-danger);
	padding: 12px 16px;
	border-radius: var(--ogc-radius-sm);
	font-weight: 600;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Viaje Nórdico                                                       */
/* ------------------------------------------------------------------ */

.ogc-card--viaje-nordico.is-locked {
	filter: saturate(0.6);
}

.ogc-viaje-nordico__locked {
	color: rgba(246, 239, 228, 0.55);
}

.ogc-viaje-nordico__item + .ogc-viaje-nordico__item {
	margin-top: 18px;
	padding-top: 18px;
	border-top: var(--ogc-border-glass);
}

/* ------------------------------------------------------------------ */
/* Aula en vivo                                                        */
/* ------------------------------------------------------------------ */

.ogc-card--aula {
	padding: 0;
	overflow: hidden;
}

.ogc-aula__meet {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(155deg, var(--ogc-navy-800), var(--ogc-navy-950));
	padding: 24px;
	text-align: center;
}

.ogc-aula__meet--pendiente p {
	max-width: 32em;
	color: rgba(246, 239, 228, 0.7);
}

.ogc-card--aula .ogc-cta {
	margin: 22px 30px 30px;
}

/* ------------------------------------------------------------------ */
/* Avisos — modal secuencial (regla 90-M)                              */
/* ------------------------------------------------------------------ */

.ogc-avisos-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(5, 7, 17, 0.72);
	backdrop-filter: blur(6px);
}

.ogc-avisos-modal[hidden] {
	display: none;
}

.ogc-avisos-modal__box {
	max-width: 420px;
	width: calc(100% - 40px);
	background: linear-gradient(155deg, var(--ogc-navy-800), var(--ogc-navy-950));
	border: var(--ogc-border-glass);
	border-radius: var(--ogc-radius-lg);
	padding: 30px;
	box-shadow: var(--ogc-shadow-card);
	text-align: center;
}

.ogc-avisos-modal__title {
	font-family: var(--ogc-font-display);
	color: var(--ogc-cream-100);
	margin: 0 0 12px;
}

.ogc-avisos-modal__body {
	color: rgba(246, 239, 228, 0.85);
	margin-bottom: 22px;
	line-height: 1.5;
}

.ogc-avisos-modal__close {
	font-family: var(--ogc-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
	padding: 10px 26px;
	border: 1px solid rgba(191, 239, 245, 0.35);
	border-radius: 999px;
	background: transparent;
	color: var(--ogc-ice-300);
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Banner Keymaster                                                    */
/* ------------------------------------------------------------------ */

.ogc-keymaster-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 10px 20px;
	background: linear-gradient(90deg, #5c1b2c, #7a2438);
	color: #fff;
	font-family: var(--ogc-font-body);
	font-size: 0.85rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ogc-keymaster-banner__stop {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.78rem;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	cursor: pointer;
}

.ogc-keymaster-banner__stop:hover {
	background: rgba(255, 255, 255, 0.26);
}

/* ------------------------------------------------------------------ */
/* Responsive (regla: 390px / 768px / 1024px / 1440px+)                */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.ogc-card {
		padding: 22px 20px;
		border-radius: var(--ogc-radius-md);
	}

	.ogc-card--hero {
		padding: 26px 22px 24px;
	}

	.ogc-cta {
		width: 100%;
	}

	.ogc-manuales__list li,
	.ogc-asistencias__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* ==================================================================== */
/* HOME PÚBLICA (regla 5A) — misma paleta y tipografía que el campus.    */
/* Elementor pone la clase (_css_classes en widgets, css_classes sin     */
/* guion en contenedores — confirmado leyendo el código fuente de la     */
/* versión instalada) en el DIV envolvente del widget, no en la etiqueta */
/* real (h1/p/a) — de ahí los selectores descendientes de abajo.         */
/* ==================================================================== */

.ogc-home-hero,
.ogc-home-niveles,
.ogc-home-cta,
body:has(.ogc-home-hero) {
	background: var(--ogc-navy-950);
}

/* ==================================================================== */
/* BUG SISTÉMICO RAÍZ (encontrado con getComputedStyle en vivo a 1920px, */
/* explica "se ve vacía en desktop" mejor que ningún ajuste puntual):    */
/* CADA sección de nivel superior envuelve a su único hijo real (la      */
/* "-inner") en el .e-con-inner que Elementor genera automáticamente —   */
/* pero ese wrapper, a diferencia de los que ya se corrigieron para      */
/* flex/grid, trae su PROPIO `max-width: min(100%, 1140px)` por defecto  */
/* de Elementor. Confirmado: forzar width:100% incluso con estilo inline */
/* + !important directamente en .ogc-home-hero-inner NO cambiaba nada,   */
/* porque el límite real estaba en su padre (.e-con-inner), no en él —   */
/* cualquier max-width que se le pusiera a .ogc-*-inner (900/1100/1180/  */
/* 1200/1360px) quedaba sin efecto porque el 100% de esos divs se        */
/* resolvía contra un padre ya limitado a 1140px. Esto afectaba TODAS    */
/* las secciones por igual, no sólo el Hero.                             */
/* ==================================================================== */
.ogc-home-hero > .e-con-inner,
.ogc-home-niveles > .e-con-inner,
.ogc-features > .e-con-inner,
.ogc-split > .e-con-inner,
.ogc-metodo > .e-con-inner,
.ogc-home-cta > .e-con-inner,
.ogc-footer > .e-con-inner {
	max-width: none !important;
	width: 100% !important;
}

.ogc-home-hero {
	position: relative;
	padding: 110px 20px 90px;
	text-align: center;
	/* Causa real del overflow horizontal a 1024px: Elementor pone su
	   propio overflow:visible por defecto en cada .e-con sin !important,
	   así que el corte del sangrado de la foto (margin-right:calc(-50vw+
	   50%)) nunca se contenía aquí — se escapaba hasta scrollWidth del
	   documento. Confirmado en vivo: computed overflow-x era "visible"
	   pese a esta regla. */
	overflow: hidden !important;
}

.ogc-home-hero.ogc-home-hero.ogc-home-hero.ogc-home-hero.ogc-home-hero.ogc-home-hero {
	background:
		radial-gradient(circle at 20% 15%, rgba(143, 224, 238, 0.14), transparent 45%),
		radial-gradient(circle at 82% 85%, rgba(233, 195, 206, 0.12), transparent 50%),
		var(--ogc-navy-950) !important;
}

/* .ogc-home-hero is also an Elementor container (e-con), whose own
   ::before (background-overlay feature) matches at equal specificity
   and loads after campus.css — forced here so it isn't silently blanked. */
.ogc-home-hero::before {
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background-image: radial-gradient(rgba(191, 239, 245, 0.35) 1px, transparent 1px) !important;
	background-size: 46px 46px !important;
	opacity: 0.12 !important;
	pointer-events: none !important;
}

.ogc-home-eyebrow p {
	font-family: var(--ogc-font-body) !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--ogc-ice-300) !important;
	opacity: 0.75;
	margin: 0 0 18px !important;
}

/* Tamaño reducido a propósito (regla del Hero: "no volver al H1 gigante
   de 7 líneas" — 3-4 líneas máximo en desktop, la foto debe competir
   visualmente con el título, no ser aplastada por él). */
.ogc-home-title,
.ogc-home-title .elementor-heading-title {
	font-family: var(--ogc-font-display) !important;
	font-size: clamp(2rem, 3.4vw, 3.2rem) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	color: var(--ogc-cream-100) !important;
	margin: 0 0 18px !important;
	line-height: 1.2 !important;
	text-shadow: 0 0 40px rgba(143, 224, 238, 0.2);
}

.ogc-home-subtitle,
.ogc-home-subtitle .elementor-heading-title {
	font-family: var(--ogc-font-body) !important;
	font-size: clamp(0.85rem, 1.6vw, 1.05rem) !important;
	font-weight: 600 !important;
	letter-spacing: 0.32em !important;
	text-transform: uppercase;
	color: var(--ogc-ice-400) !important;
	margin: 0 0 34px !important;
}

.ogc-home-intro {
	max-width: 42em;
	margin: 0 auto 40px;
}

.ogc-home-intro p {
	margin: 0;
	color: rgba(246, 239, 228, 0.78) !important;
	font-size: 1.05rem !important;
	line-height: 1.7 !important;
}

/* Elementor wraps a container's real children in its own .e-con-inner —
   the flex/grid rules below must target that wrapper, confirmed live:
   without this, every one of these rows was stacking as a vertical
   column instead of laying out side by side on desktop. */
/* Elementor también fija sus propios flex-wrap/justify-content por
   defecto en cada .e-con-inner (además del display/flex-direction ya
   corregidos) — confirmado en vivo a 1024px: los dos botones del Hero
   quedaban en "nowrap" y se superponían entre sí en vez de bajar a una
   segunda línea. !important en las 4 propiedades, no sólo 2. */
.ogc-home-hero-actions > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	gap: 16px;
	justify-content: center !important;
	flex-wrap: wrap !important;
}

.ogc-home-hero-actions {
	position: relative;
	z-index: 1;
}

/* These target only the INNER .elementor-button (the actual rendered
   link), never the bare .ogc-cta — that class lands on the Elementor
   widget's OUTER wrapper div (regla Elementor: _css_classes), and giving
   it the same padding/border-radius/border nested a second pill shape
   around the real button. */
.ogc-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ogc-font-body) !important;
	font-weight: 700 !important;
	font-size: 0.92rem !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	padding: 14px 28px !important;
	border-radius: 999px !important;
	color: var(--ogc-navy-950) !important;
	background: linear-gradient(135deg, var(--ogc-ice-300), var(--ogc-ice-500)) !important;
	box-shadow: 0 10px 28px rgba(143, 224, 238, 0.28);
	transition: transform 0.18s ease, filter 0.18s ease;
}

.ogc-cta .elementor-button:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.ogc-cta--ghost .elementor-button {
	background: transparent !important;
	color: var(--ogc-ice-300) !important;
	border: 1px solid rgba(191, 239, 245, 0.35) !important;
	box-shadow: none !important;
}

.ogc-cta--ghost .elementor-button:hover {
	background: rgba(191, 239, 245, 0.1) !important;
}

/* The earlier .ogc-cta rule (used directly on plain <a class="ogc-cta">
   buttons in the campus dashboard widgets) also matches this same class
   on the Elementor wrapper div, since Elementor puts _css_classes on the
   OUTER widget wrapper. Reset it here so the wrapper stays an invisible
   block and only the inner .elementor-button renders as the pill. */
.ogc-cta.elementor-widget-button {
	display: block !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.ogc-home-niveles {
	padding: 80px 20px;
}

.ogc-home-section-title,
.ogc-home-section-title .elementor-heading-title {
	font-family: var(--ogc-font-display) !important;
	text-align: center;
	color: var(--ogc-cream-100) !important;
	font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
	margin: 0 0 12px !important;
}

.ogc-home-section-lead {
	max-width: 36em;
	margin: 0 auto 56px;
}

.ogc-home-section-lead p {
	text-align: center;
	color: rgba(246, 239, 228, 0.65) !important;
	margin: 0 !important;
}

/* Elementor's own .e-con sets `width: var(--width)` (its boxed content-width,
   1140px by default) directly on every container element — confirmed live
   via getComputedStyle that our max-width WON but width stayed at 1140px
   regardless, because an explicit `width` smaller than `max-width` is not
   constrained further by it. Every one of our "-inner"/grid wrappers needs
   its own `width: 100% !important` or it silently clamps to 1140px no
   matter what max-width we set. */
.ogc-home-hero-inner {
	width: 100% !important;
	max-width: 900px;
	margin: 0 auto !important;
	position: relative;
	z-index: 1;
}

/* CTA final en dos mitades (regla 29): prospectos vs. alumnas/os actuales
   nunca comparten la misma fila de botones — cada mitad es su propia
   columna con fondo distinto. */
.ogc-home-cta {
	min-height: 60vh;
	display: flex;
	align-items: stretch;
}

/* La fila real de 2 mitades vive dentro del .e-con-inner que Elementor
   genera automáticamente para los hijos de .ogc-home-cta — mismo patrón
   que el resto del sitio (ver nota grande arriba sobre este bug). */
.ogc-home-cta > .e-con-inner {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	min-height: 60vh;
}

.ogc-home-cta-mitad {
	padding: 70px 48px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	position: relative;
}

/* Elementor "lazy-load below the fold" oculta background-image en
   cualquier .e-con.e-parent más allá de la 2ª-4ª posición de la página
   (el umbral exacto depende de la altura del viewport) hasta que le
   añade su propia clase .e-lazyloaded — y SU regla también es
   `!important`, así que un !important normal empata y la especificidad
   decide: su selector compuesto
   `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload)`
   pesa 5 clases (0,5,0) contra nuestra única clase (0,1,0), y gana.
   Confirmado en vivo con getComputedStyle + getPropertyPriority: esto
   borraba por completo los degradados de esta sección, del scrim de
   Formaciones, de "Clases en vivo", de "Nuestra maestra" y de la tarjeta
   de texto del mosaico. Fix real: repetir la propia clase para igualar o
   superar esa especificidad (truco válido de CSS, no cambia a qué
   elemento aplica, sólo su peso en la cascada). */
.ogc-home-cta-mitad--nuevos.ogc-home-cta-mitad--nuevos.ogc-home-cta-mitad--nuevos.ogc-home-cta-mitad--nuevos.ogc-home-cta-mitad--nuevos.ogc-home-cta-mitad--nuevos {
	background:
		radial-gradient(circle at 20% 20%, rgba(143, 224, 238, 0.14), transparent 55%),
		linear-gradient(155deg, var(--ogc-navy-900), var(--ogc-navy-950)) !important;
	border-right: 1px solid rgba(191, 239, 245, 0.1);
}

.ogc-home-cta-mitad--alumnos.ogc-home-cta-mitad--alumnos.ogc-home-cta-mitad--alumnos.ogc-home-cta-mitad--alumnos.ogc-home-cta-mitad--alumnos.ogc-home-cta-mitad--alumnos {
	background:
		radial-gradient(circle at 80% 20%, rgba(36, 22, 64, 0.55), transparent 55%),
		linear-gradient(155deg, var(--ogc-navy-950), var(--ogc-navy-900)) !important;
}

.ogc-home-cta-titulo,
.ogc-home-cta-titulo .elementor-heading-title {
	font-family: var(--ogc-font-display) !important;
	text-align: left;
	color: var(--ogc-cream-100) !important;
	font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
	margin: 0 0 26px !important;
	max-width: 14em;
}

@media (max-width: 780px) {
	.ogc-home-cta > .e-con-inner {
		grid-template-columns: 1fr !important;
	}
	.ogc-home-cta-mitad {
		padding: 56px 26px;
		align-items: center;
		text-align: center;
	}
	.ogc-home-cta-mitad--nuevos {
		border-right: none;
		border-bottom: 1px solid rgba(191, 239, 245, 0.1);
	}
	.ogc-home-cta-titulo {
		max-width: none;
	}
}

/* ==================================================================== */
/* NAV — transparente sobre el hero, oscuro+blur al hacer scroll         */
/* ==================================================================== */

.ogc-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 32px;
	transition: background 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

.ogc-nav.is-scrolled {
	background: rgba(5, 7, 17, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
	padding: 12px 32px;
}

.ogc-nav__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.ogc-nav__brand img {
	width: 44px !important;
	height: 44px !important;
	max-width: 44px !important;
	object-fit: contain;
	display: block;
	transition: width 0.25s ease, height 0.25s ease;
}

.ogc-nav.is-scrolled .ogc-nav__brand img {
	width: 36px !important;
	height: 36px !important;
	max-width: 36px !important;
}

.ogc-nav__brand span {
	font-family: var(--ogc-font-display);
	color: var(--ogc-cream-100);
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.ogc-nav__links {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogc-nav__links a {
	color: rgba(246, 239, 228, 0.82);
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
	transition: color 0.15s ease;
}

.ogc-nav__links a:hover {
	color: var(--ogc-ice-300);
}

.ogc-nav__cta {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ogc-ice-300), var(--ogc-ice-500));
	color: var(--ogc-navy-950) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	font-size: 0.8rem !important;
	letter-spacing: 0.04em;
}

.ogc-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.ogc-nav__toggle span {
	width: 24px;
	height: 2px;
	background: var(--ogc-cream-100);
	display: block;
}

/* Umbral subido de 900 a 1100px: a 1024px (tablet landscape, uno de los
   anchos que se debe probar explícitamente) los 6 enlaces + botón CTA no
   caben en una sola fila — se veían partidos en 2-3 líneas, encimados
   sobre el botón "Entrar al campus". El menú-drawer mobile ya es sólido,
   así que tablet lo usa también en vez de forzar un nav de escritorio
   apretado. */
@media (max-width: 1100px) {
	.ogc-nav__links {
		position: fixed !important;
		inset: 0 0 0 30% !important;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: 40px;
		gap: 26px;
		background: rgba(5, 7, 17, 0.97);
		backdrop-filter: blur(16px);
		transform: translateX(100%) !important;
		transition: transform 0.3s ease;
	}

	.ogc-nav__links.is-open {
		transform: translateX(0) !important;
	}

	.ogc-nav__links a {
		font-size: 1.1rem;
	}

	.ogc-nav__toggle {
		display: flex;
	}
}

/* Bug reportado: en tablet (1024px) el nav quedaba en "logo diminuto +
   hueco vacío + hamburger", sin identidad. El wordmark ahora se conserva
   hasta 560px — sólo en móvil pequeño se reduce al emblema solo. */
@media (max-width: 560px) {
	.ogc-nav__brand span {
		display: none;
	}
}

/* ==================================================================== */
/* HERO — atmósfera generativa (paleta del logo, sin foto de fondo)     */
/* ==================================================================== */

/* Primera pantalla más compacta (bug real reportado: demasiado espacio
   entre el header y el contenido) — 140px de padding-top asumía un nav
   más alto del que realmente es; 96px es suficiente para despejar el
   nav fijo sin dejar un salto vacío antes del eyebrow. */
.ogc-home-hero {
	position: relative;
	min-height: 84vh;
	display: flex;
	align-items: center;
	padding: 96px 20px 70px !important;
}

/* ==================================================================== */
/* HERO — fotografía real cinematográfica a la derecha (~57%, sangrado   */
/* hasta el borde del viewport), contenido a la izquierda (~42%). Ya NO  */
/* es un símbolo pequeño flotando: la foto compite con el título.        */
/* ==================================================================== */

@media (min-width: 981px) {
	.ogc-home-hero .ogc-home-hero-inner {
		width: 100% !important;
		max-width: 1360px;
		margin: 0 auto !important;
		text-align: left;
	}

	/* Elementor wraps a container's real children in its own .e-con-inner
	   layer, so THAT is the actual flex row — not .ogc-home-hero-inner
	   itself (confirmed by inspecting the live DOM: .ogc-home-hero-inner
	   > .e-con-inner > [.ogc-home-hero-content, the visual's widget]). */
	.ogc-home-hero .ogc-home-hero-inner > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 24px;
	}

	.ogc-home-hero-content {
		flex: 0 0 42%;
		max-width: 42%;
		text-align: left;
	}

	.ogc-home-hero-content .ogc-home-intro {
		margin: 0 0 30px;
		max-width: 32em;
	}

	/* Bug real encontrado: esta regla apuntaba al DIV widget exterior
	   (.ogc-home-hero-actions), pero la fila flex real vive en SU
	   .e-con-inner — por eso los botones seguían centrados pese a que el
	   contenido de texto sí estaba a la izquierda. */
	.ogc-home-hero-content .ogc-home-hero-actions > .e-con-inner {
		justify-content: flex-start !important;
	}

	/* Same wrapper-collapse issue as .ogc-home-hero__bg: this html widget's
	   only child needs the flex-basis/height on the WRAPPER, not just the
	   inner div, or the wrapper sizes to auto/content instead of 57%. The
	   right margin bleeds the photo all the way to the viewport edge —
	   regla explícita: "puede extenderse hasta el borde derecho". */
	.ogc-home-hero-inner > .e-con-inner > .elementor-widget-html:has(> .ogc-home-hero-visual) {
		flex: 0 0 57% !important;
		max-width: 57% !important;
		height: min(82vh, 820px) !important;
		margin-left: -32px !important;
		margin-right: calc(-50vw + 50%) !important;
		position: relative !important;
		z-index: 1 !important;
	}

	.ogc-home-hero-visual {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 28px 0 0 28px;
		box-shadow: inset 0 0 140px 50px rgba(11, 8, 21, 0.4);
	}
}

.ogc-hero-photo {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	/* Color treatment (bug reportado: la foto se sentía "madera+velas",
	   no Oracle Gypsies): baja la saturación cálida de base antes de la
	   capa de recoloración de abajo, para que el resultado sea un grado
	   de color intencional y no una pelea entre naranja y púrpura. */
	filter: saturate(0.7) brightness(0.92) contrast(1.06);
}

.ogc-hero-photo--mobile {
	display: none;
}

/* Capa de recoloración (duotone parcial): usa mix-blend-mode:color para
   virar el tono general de la foto hacia navy/púrpura/azul-hielo
   mientras conserva la luminosidad real de la fotografía — el centro
   (donde están las velas) queda más transparente a propósito para no
   apagar del todo el contraste cálido que pidió el usuario conservar. */
.ogc-hero-photo-grade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: color;
	background:
		radial-gradient(circle at 46% 42%, transparent 0%, rgba(28, 16, 48, 0.25) 30%, rgba(22, 34, 79, 0.55) 60%, rgba(5, 7, 17, 0.7) 100%),
		linear-gradient(160deg, rgba(36, 22, 64, 0.5), rgba(22, 44, 92, 0.35) 55%, rgba(143, 224, 238, 0.18));
}

@media (min-width: 981px) {
	/* Fundido hacia el texto (fade/masking, regla del Hero) + viñeta
	   cinematográfica superior/inferior — "integrar mediante capas,
	   gradientes, masking", nunca un rectángulo duro pegado al texto.
	   Fundido ampliado (22%→38%) y con un segundo paso más suave para que
	   el borde foto/interfaz deje de percibirse como un corte recto. */
	.ogc-home-hero-visual::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 2;
		background:
			linear-gradient(90deg, var(--ogc-navy-950) 0%, rgba(5, 7, 17, 0.5) 18%, transparent 38%);
		pointer-events: none;
	}

	.ogc-home-hero-visual::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 2;
		background:
			linear-gradient(0deg, rgba(5, 7, 17, 0.6) 0%, transparent 32%),
			linear-gradient(180deg, rgba(5, 7, 17, 0.4) 0%, transparent 28%);
		pointer-events: none;
	}
}

/* La etiqueta vertical sólo cabe con aire real en desktop ancho — en
   tablet (1024px) quedaba pegada al borde y se percibía cortada. */
@media (min-width: 1300px) {
	.ogc-hero-sidelabel {
		position: absolute;
		right: 28px;
		bottom: 40px;
		z-index: 3;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-family: var(--ogc-font-body);
		font-size: 0.72rem;
		letter-spacing: 0.22em;
		color: rgba(246, 239, 228, 0.75);
		text-transform: uppercase;
		line-height: 1.6;
	}
}

@media (max-width: 1299px) {
	.ogc-hero-sidelabel {
		display: none;
	}
}

/* Fila de 4 rasgos bajo los CTA (regla del Hero, prototipo de referencia):
   pequeños acentos con la geometría del logo (anillo + punto), discretos —
   la fotografía sigue siendo la protagonista. */
.ogc-hero-rasgos {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 30px;
	margin-top: 34px;
}

.ogc-hero-rasgo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: rgba(246, 239, 228, 0.75);
	text-transform: uppercase;
}

.ogc-hero-rasgo__dot {
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--ogc-ice-400);
	flex-shrink: 0;
}

.ogc-hero-rasgo__dot::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--ogc-ice-400);
	opacity: 0.85;
}

/* ==================================================================== */
/* HERO MOBILE — composición propia, NO el desktop encogido (regla 6):   */
/* banda fotográfica full-bleed arriba (~42vh) que se funde con          */
/* degradado hacia el fondo oscuro, contenido debajo. Recorte vertical   */
/* dedicado de la misma fotografía (no la horizontal de desktop).        */
/* ==================================================================== */

@media (max-width: 980px) {
	.ogc-home-hero {
		padding-top: 0 !important;
		align-items: stretch;
		min-height: 0;
	}

	.ogc-home-hero .ogc-home-hero-inner {
		padding: 0;
		max-width: none;
	}

	.ogc-home-hero .ogc-home-hero-inner > .e-con-inner {
		display: flex !important;
		flex-direction: column !important;
	}

	.ogc-home-hero-inner > .e-con-inner > .elementor-widget-html:has(> .ogc-home-hero-visual) {
		order: -1;
		display: block !important;
		position: relative !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: 42vh !important;
		margin-left: calc(-50vw + 50%) !important;
		margin-right: calc(-50vw + 50%) !important;
	}

	.ogc-home-hero-visual {
		position: absolute;
		inset: 0;
	}

	.ogc-hero-photo--desktop {
		display: none;
	}

	.ogc-hero-photo--mobile {
		display: block;
	}

	.ogc-home-hero-visual::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 45%, var(--ogc-navy-950) 96%);
	}

	.ogc-home-hero-content {
		padding: 30px 26px 50px;
	}

	.ogc-home-hero-content .ogc-home-eyebrow,
	.ogc-home-hero-content .ogc-home-title,
	.ogc-home-hero-content .ogc-home-intro {
		text-align: center;
	}

	.ogc-hero-rasgos {
		justify-content: center;
	}
}

/* ==================================================================== */
/* Reveal al hacer scroll (regla 24: elegante, sin exceso)               */
/* ==================================================================== */

.ogc-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.ogc-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ogc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==================================================================== */
/* Formaciones — tarjetas grandes con imagen/composición propia          */
/* ==================================================================== */

.ogc-formacion {
	position: relative;
	border-radius: var(--ogc-radius-lg);
	overflow: hidden;
	min-height: 540px;
	display: flex;
	align-items: flex-end;
	border: var(--ogc-border-glass);
	box-shadow: var(--ogc-shadow-soft);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ogc-formacion:hover {
	transform: translateY(-6px) scale(1.01);
	box-shadow: var(--ogc-shadow-card);
}

.ogc-formacion:hover .ogc-formacion__art {
	transform: scale(1.05);
}

/* Same wrapper-collapse issue as .ogc-home-hero__bg / .ogc-home-hero-visual:
   this html widget's only child is absolutely positioned, so its wrapper
   has no in-flow content and its auto height collapses to 0 — stretch the
   WRAPPER itself to fill the card. */
.ogc-formacion > .e-con-inner > .elementor-widget-html:has(> .ogc-formacion__art) {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
}

/* Composición generativa a pantalla completa de la tarjeta (regla 8:      */
/* paneles cinematográficos grandes, no cajas de solo texto).             */
.ogc-formacion__art {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	z-index: 0;
	transition: transform 0.5s ease;
}

/* Badge "Próximamente" (regla de Formaciones): esquina superior, no
   inline con el título — Herbolaria debe verse igual de atractiva que
   las otras dos, el badge es un acento, no una disculpa. */
.ogc-formacion__badge {
	position: absolute !important;
	top: 22px;
	right: 22px;
	width: fit-content !important;
	max-width: fit-content !important;
	z-index: 2;
	background: rgba(5, 7, 17, 0.55);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(233, 195, 206, 0.45);
	border-radius: 999px;
	padding: 6px 16px;
}

.ogc-formacion-badge-text p {
	margin: 0 !important;
	font-size: 0.68rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ogc-pink-300) !important;
}

/* Igual que .ogc-formacion__art: Elementor pone su propio position:relative
   por defecto en cada .e-con, y sin !important gana por orden de carga —
   confirmado en vivo (el scrim quedaba con height:20px pegado arriba de la
   tarjeta en vez de cubrirla entera). */
.ogc-formacion__scrim.ogc-formacion__scrim.ogc-formacion__scrim.ogc-formacion__scrim.ogc-formacion__scrim.ogc-formacion__scrim {
	background: linear-gradient(0deg, rgba(5, 7, 17, 0.94) 12%, rgba(5, 7, 17, 0.4) 58%, rgba(5, 7, 17, 0.05) 100%) !important;
}

.ogc-formacion__scrim {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0;
}

.ogc-formacion__body {
	position: relative;
	z-index: 1;
	padding: 32px 30px;
}

/* Bug reportado: "NIVEL I/II/III" competía con el nombre de la
   formación al usar la misma tipografía decorativa que el título — se
   veía como un mini-título, no como un eyebrow. Ahora usa la sans-serif
   del cuerpo, más pequeña, para que RUNAS Y MAGIA NÓRDICA (etc.) sea
   inequívocamente el protagonista de la tarjeta. */
.ogc-formacion-numero,
.ogc-formacion-numero .elementor-heading-title {
	font-family: var(--ogc-font-body) !important;
	font-weight: 700 !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--ogc-ice-400) !important;
	opacity: 0.85;
	margin: 0 0 10px !important;
}

.ogc-formacion-titulo,
.ogc-formacion-titulo .elementor-heading-title {
	font-family: var(--ogc-font-display) !important;
	font-size: 1.7rem !important;
	color: var(--ogc-cream-100) !important;
	margin: 0 0 12px !important;
	line-height: 1.2 !important;
}

.ogc-formacion-desc p {
	color: rgba(246, 239, 228, 0.75) !important;
	font-size: 0.92rem !important;
	line-height: 1.55 !important;
	margin: 0 0 18px !important;
}

.ogc-formaciones-grid {
	width: 100% !important;
	max-width: 1200px;
	margin: 0 auto !important;
}

/* Elementor wraps a container's real children in its own .e-con-inner
   layer (confirmed live: the 3 cards were landing there, not as direct
   grid items of .ogc-formaciones-grid, so the grid rules never reached
   them) — the grid must be applied to THAT wrapper, not the container
   itself. Same fix as the hero row layout. */
.ogc-formaciones-grid > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

/* Mobile/tablet: carrusel horizontal con "peek" de la siguiente tarjeta
   (regla 16) en vez de tres cards enormes apiladas verticalmente — se
   siente como una plataforma digital, no como el desktop encogido. */
@media (max-width: 980px) {
	.ogc-formaciones-grid {
		max-width: 100%;
	}
	.ogc-formaciones-grid > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		padding: 4px 12vw 22px 20px;
		margin: 0 -20px;
	}
	.ogc-formaciones-grid > .e-con-inner::-webkit-scrollbar {
		display: none;
	}
	.ogc-formaciones-grid > .e-con-inner > .ogc-formacion {
		flex: 0 0 82vw;
		scroll-snap-align: center;
	}
	.ogc-formacion {
		min-height: 460px;
	}
}

@media (max-width: 480px) {
	.ogc-formaciones-grid > .e-con-inner > .ogc-formacion {
		flex-basis: 86vw;
	}
}

/* ==================================================================== */
/* Banda editorial ("Una academia, no una biblioteca de videos")         */
/* Introducción editorial entre el Hero y Formaciones — regla de ritmo   */
/* visual: no encadenar dos pantallas de fondo oscuro+título+párrafo.    */
/* ==================================================================== */

.ogc-editorial-band {
	padding: 56px 32px;
	border-top: 1px solid rgba(191, 239, 245, 0.08);
	border-bottom: 1px solid rgba(191, 239, 245, 0.08);
}

.ogc-editorial-band.ogc-editorial-band.ogc-editorial-band.ogc-editorial-band.ogc-editorial-band.ogc-editorial-band {
	background:
		radial-gradient(circle at 85% 30%, rgba(36, 22, 64, 0.5), transparent 55%),
		radial-gradient(circle at 10% 70%, rgba(143, 224, 238, 0.08), transparent 45%),
		linear-gradient(90deg, var(--ogc-navy-900), var(--ogc-navy-950)) !important;
}

.ogc-editorial-band > .e-con-inner {
	width: 100% !important;
	max-width: 1180px;
	margin: 0 auto !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 28px;
}

.ogc-editorial-band__title,
.ogc-editorial-band__title .elementor-heading-title {
	font-family: var(--ogc-font-display) !important;
	font-size: clamp(1.3rem, 2.4vw, 1.8rem) !important;
	color: var(--ogc-cream-100) !important;
	margin: 0 !important;
	line-height: 1.35 !important;
}

@media (max-width: 780px) {
	.ogc-editorial-band > .e-con-inner {
		flex-direction: column !important;
		align-items: flex-start;
		text-align: left;
	}
}

/* ==================================================================== */
/* Feature grid ("Así se vive Oracle Gypsies")                           */
/* ==================================================================== */

.ogc-features {
	padding: 90px 20px;
	background: var(--ogc-navy-950);
}

/* Mosaico editorial: una foto grande + dos secundarias + una tarjeta de
   texto — evita las seis cajas de ícono+párrafo repetidas. */
.ogc-mosaic {
	width: 100% !important;
	max-width: 1180px;
	margin: 0 auto !important;
}

/* Same .e-con-inner wrapping issue as .ogc-formaciones-grid — the grid
   must target the wrapper Elementor actually renders the 4 tiles into. */
.ogc-mosaic > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: 1.3fr 1fr 1fr;
	grid-template-rows: 260px 260px;
	gap: 18px;
}

.ogc-mosaic__tile {
	position: relative;
	border-radius: var(--ogc-radius-lg);
	overflow: hidden;
	border: var(--ogc-border-glass);
}

.ogc-mosaic__tile--big { grid-column: 1; grid-row: 1 / 3; }
.ogc-mosaic__tile:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.ogc-mosaic__tile:nth-of-type(3) { grid-column: 3; grid-row: 1; }

.ogc-mosaic__tile--text {
	grid-column: 2 / 4;
	grid-row: 2;
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ogc-mosaic__tile--text.ogc-mosaic__tile--text.ogc-mosaic__tile--text.ogc-mosaic__tile--text.ogc-mosaic__tile--text.ogc-mosaic__tile--text {
	background: linear-gradient(155deg, rgba(22, 13, 32, 0.6), rgba(11, 8, 21, 0.9)) !important;
}

/* Same wrapper-collapse issue as .ogc-formacion__art: Elementor's own
   .elementor-widget-html wrapper around this raw <img> is itself
   position:relative with no in-flow content, so it collapses to 0
   height and becomes the img's actual containing block instead of the
   tile. Stretch the wrapper itself to fill the tile. */
.ogc-mosaic__tile > .e-con-inner > .elementor-widget-html:has(> img) {
	position: absolute !important;
	inset: 0 !important;
}

.ogc-mosaic__tile img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ogc-mosaic__tile:hover img {
	transform: scale(1.05);
}

.ogc-mosaic__tile:not(.ogc-mosaic__tile--text)::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5, 7, 17, 0.92) 5%, rgba(5, 7, 17, 0.15) 60%, transparent 100%);
	pointer-events: none;
}

.ogc-mosaic__caption {
	position: relative;
	z-index: 1;
	padding: 22px;
	margin-top: auto;
}

.ogc-mosaic__tile--big .ogc-mosaic__caption {
	padding: 30px;
}

.ogc-mosaic__caption-title,
.ogc-mosaic__caption-title .elementor-heading-title {
	font-family: var(--ogc-font-display) !important;
	color: var(--ogc-cream-100) !important;
	margin: 0 0 6px !important;
}

.ogc-mosaic__tile--big .ogc-mosaic__caption-title,
.ogc-mosaic__tile--big .ogc-mosaic__caption-title .elementor-heading-title {
	font-size: 1.5rem !important;
}

.ogc-mosaic__tile:not(.ogc-mosaic__tile--big) .ogc-mosaic__caption-title,
.ogc-mosaic__tile:not(.ogc-mosaic__tile--big) .ogc-mosaic__caption-title .elementor-heading-title {
	font-size: 1.05rem !important;
}

.ogc-mosaic__caption-text p {
	color: rgba(246, 239, 228, 0.78) !important;
	font-size: 0.88rem !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

@media (max-width: 900px) {
	.ogc-mosaic > .e-con-inner {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 260px 200px 200px;
	}
	.ogc-mosaic__tile--big { grid-column: 1 / 3; grid-row: 1; }
	.ogc-mosaic__tile:nth-of-type(2) { grid-column: 1; grid-row: 2; }
	.ogc-mosaic__tile:nth-of-type(3) { grid-column: 2; grid-row: 2; }
	.ogc-mosaic__tile--text { grid-column: 1 / 3; grid-row: 3; }
}

@media (max-width: 600px) {
	.ogc-mosaic > .e-con-inner {
		grid-template-columns: 1fr;
		grid-template-rows: 300px 220px 220px auto;
	}
	.ogc-mosaic__tile--big { grid-column: 1; grid-row: 1; }
	.ogc-mosaic__tile:nth-of-type(2) { grid-column: 1; grid-row: 2; }
	.ogc-mosaic__tile:nth-of-type(3) { grid-column: 1; grid-row: 3; }
	.ogc-mosaic__tile--text { grid-column: 1; grid-row: 4; }
}

/* ==================================================================== */
/* Secciones grandes con imagen (Clases en vivo / Manuales / Viaje)      */
/* ==================================================================== */

.ogc-split {
	padding: 90px 20px;
	position: relative;
	overflow: hidden;
}

.ogc-split-inner {
	width: 100% !important;
	max-width: 1180px;
	margin: 0 auto !important;
}

.ogc-split-inner > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center !important;
}

.ogc-split--reverse .ogc-split-inner > .e-con-inner {
	direction: rtl;
}

.ogc-split--reverse .ogc-split-inner > .e-con-inner > * {
	direction: ltr;
}

@media (max-width: 900px) {
	.ogc-split-inner > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.ogc-split--reverse .ogc-split-inner > .e-con-inner {
		direction: ltr;
	}
}

.ogc-split-eyebrow p {
	font-family: var(--ogc-font-body) !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ogc-ice-400) !important;
	margin: 0 0 14px !important;
}

.ogc-split-title,
.ogc-split-title .elementor-heading-title {
	font-family: var(--ogc-font-display) !important;
	font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
	color: var(--ogc-cream-100) !important;
	margin: 0 0 18px !important;
	line-height: 1.2 !important;
}

.ogc-split-text p {
	color: rgba(246, 239, 228, 0.75) !important;
	font-size: 1rem !important;
	line-height: 1.65 !important;
	margin: 0 0 26px !important;
}

.ogc-split-media {
	position: relative;
	border-radius: var(--ogc-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--ogc-shadow-card);
	border: var(--ogc-border-glass);
}

.ogc-split-media img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
}

.ogc-split-media svg {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

/* Galería de 3 fotos para Viaje Nórdico: una grande + dos apiladas. */
.ogc-split-gallery {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
	aspect-ratio: 4 / 3;
}

.ogc-split-gallery__main {
	grid-column: 1;
	grid-row: 1 / 3;
	position: relative;
	border-radius: var(--ogc-radius-lg);
	overflow: hidden;
	box-shadow: var(--ogc-shadow-card);
	border: var(--ogc-border-glass);
}

.ogc-split-gallery__sub {
	position: relative;
	border-radius: var(--ogc-radius-md);
	overflow: hidden;
	box-shadow: var(--ogc-shadow-soft);
	border: var(--ogc-border-glass);
}

.ogc-split-gallery img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
}

@media (max-width: 560px) {
	.ogc-split-gallery {
		grid-template-columns: 1fr 1fr;
		aspect-ratio: auto;
		grid-template-rows: 200px 140px;
	}
}

.ogc-split-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(155deg, rgba(143, 224, 238, 0.12), transparent 60%);
	pointer-events: none;
}

.ogc-split--tinted.ogc-split--tinted.ogc-split--tinted.ogc-split--tinted.ogc-split--tinted.ogc-split--tinted {
	background:
		radial-gradient(circle at 15% 20%, rgba(143, 224, 238, 0.08), transparent 45%),
		var(--ogc-navy-900) !important;
}

/* Landing pública de una formación (regla 26): primera sección de la
   página, así que necesita espacio para no quedar debajo del nav fijo. */
.ogc-formacion-landing {
	padding-top: 170px;
	min-height: 100vh;
	background: var(--ogc-navy-950);
	display: flex;
	align-items: center;
}

@media (max-width: 900px) {
	.ogc-formacion-landing {
		padding-top: 130px;
		min-height: 0;
	}
}

/* Sección "Metodología" eliminada por completo (regla de simplificación:
   repetía el mismo mensaje de "no es un archivo de videos" ya cubierto
   por la banda editorial — la Home debía hacerse más corta, no más
   larga). Las clases .ogc-metodo* ya no se generan desde PHP. */

/* ==================================================================== */
/* Sobre la academia + Nuestra maestra (secciones 9 y 10)                */
/* ==================================================================== */

.ogc-sobre-maestra.ogc-sobre-maestra.ogc-sobre-maestra.ogc-sobre-maestra.ogc-sobre-maestra.ogc-sobre-maestra {
	background:
		radial-gradient(circle at 75% 30%, rgba(36, 22, 64, 0.35), transparent 55%),
		var(--ogc-navy-950) !important;
}

.ogc-maestra {
	position: relative;
	padding: 34px 0 34px 40px;
	border-left: 1px solid rgba(191, 239, 245, 0.14);
}

.ogc-maestra__accent {
	position: absolute !important;
	top: -20px;
	right: -20px;
	width: 180px;
	height: 180px;
	opacity: 0.7;
	pointer-events: none;
	z-index: 0;
}

.ogc-maestra > * {
	position: relative;
	z-index: 1;
}

.ogc-maestra__quote {
	font-family: var(--ogc-font-display) !important;
	font-style: italic;
	font-size: 1.1rem !important;
	color: var(--ogc-ice-300) !important;
	border-left: 2px solid var(--ogc-ice-400);
	padding-left: 18px;
	margin: 0 0 26px !important;
}

@media (max-width: 900px) {
	.ogc-maestra {
		padding: 34px 0 0;
		border-left: none;
		border-top: 1px solid rgba(191, 239, 245, 0.14);
		margin-top: 10px;
	}
	.ogc-maestra__accent {
		display: none;
	}
}

/* ==================================================================== */
/* Footer                                                                 */
/* ==================================================================== */

.ogc-footer {
	padding: 60px 20px 30px;
	background: var(--ogc-navy-950);
	border-top: var(--ogc-border-glass);
}

.ogc-footer-inner {
	width: 100% !important;
	max-width: 1180px;
	margin: 0 auto !important;
}

.ogc-footer-inner > .e-con-inner {
	width: 100% !important;
	display: grid !important;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

@media (max-width: 780px) {
	.ogc-footer-inner > .e-con-inner {
		grid-template-columns: 1fr 1fr;
	}
}

.ogc-footer-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.ogc-footer-brand img {
	width: 40px !important;
	height: 40px !important;
	max-width: 40px !important;
	object-fit: contain;
}

.ogc-footer-brand-text,
.ogc-footer-brand-text .elementor-heading-title {
	font-family: var(--ogc-font-display) !important;
	color: var(--ogc-cream-100) !important;
	font-size: 1rem !important;
	margin: 0 !important;
}

.ogc-footer-tagline p {
	color: rgba(246, 239, 228, 0.55) !important;
	font-size: 0.85rem !important;
	margin: 0 !important;
}

.ogc-footer-heading,
.ogc-footer-heading .elementor-heading-title {
	font-family: var(--ogc-font-body) !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ogc-ice-400) !important;
	margin: 0 0 16px !important;
}

.ogc-footer-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ogc-footer-links a {
	color: rgba(246, 239, 228, 0.7);
	text-decoration: none;
	font-size: 0.88rem;
}

.ogc-footer-links a:hover {
	color: var(--ogc-ice-300);
}

.ogc-footer-bottom {
	max-width: 1180px;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	text-align: center;
	color: rgba(246, 239, 228, 0.4);
	font-size: 0.78rem;
}

/* ==================================================================== */
/* Responsive general home                                               */
/* ==================================================================== */

@media (max-width: 480px) {
	.ogc-home-hero {
		min-height: 0;
		padding: 0 0 60px !important;
	}
	.ogc-home-hero-inner > .e-con-inner > .elementor-widget-html:has(> .ogc-home-hero-visual) {
		height: 38vh !important;
	}
	.ogc-split,
	.ogc-features,
	.ogc-metodo,
	.ogc-sobre,
	.ogc-home-niveles,
	.ogc-home-cta {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* ==================================================================== */
/* FASE 8B: PANTALLA OFICIAL DE ACCESO (/acceso/)                        */
/* ==================================================================== */

.ogc-auth-body {
	margin: 0;
	padding: 0;
	background: #050711;
	background: radial-gradient(circle at 50% -10%, rgba(36, 22, 64, 0.7), transparent 70%),
	            radial-gradient(circle at 85% 90%, rgba(22, 13, 32, 0.8), transparent 60%),
	            #050711;
	min-height: 100vh;
	font-family: var(--ogc-font-body);
	color: var(--ogc-cream-100);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.ogc-auth-shell {
	width: 100%;
	max-width: 460px;
	padding: 40px 20px;
	margin: 0 auto;
	box-sizing: border-box;
}

.ogc-auth-header {
	text-align: center;
	margin-bottom: 28px;
}

.ogc-auth-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
	gap: 12px;
}

.ogc-auth-logo {
	width: 76px;
	height: 76px;
	object-fit: contain;
	filter: drop-shadow(0 6px 20px rgba(143, 224, 238, 0.25));
}

.ogc-auth-title {
	font-family: var(--ogc-font-display);
	font-size: 1.55rem;
	letter-spacing: 0.12em;
	color: var(--ogc-cream-100);
	margin: 0;
	font-weight: 700;
}

.ogc-auth-badge {
	display: inline-block;
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ogc-ice-400);
	background: rgba(143, 224, 238, 0.1);
	border: 1px solid rgba(143, 224, 238, 0.22);
	padding: 4px 14px;
	border-radius: 999px;
	margin: 10px 0 8px;
	font-weight: 700;
}

.ogc-auth-subtitle {
	font-size: 0.88rem;
	color: rgba(246, 239, 228, 0.7);
	margin: 0;
	line-height: 1.45;
}

.ogc-auth-card {
	background: linear-gradient(160deg, rgba(22, 13, 32, 0.85), rgba(11, 8, 21, 0.95));
	border: 1px solid rgba(191, 239, 245, 0.18);
	border-radius: 20px;
	padding: 34px 30px;
	box-shadow: 0 20px 50px rgba(3, 6, 16, 0.6);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.ogc-auth-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 20px;
	font-size: 0.88rem;
	line-height: 1.4;
}

.ogc-auth-alert--error {
	background: rgba(233, 139, 139, 0.14);
	border: 1px solid rgba(233, 139, 139, 0.35);
	color: #ff9b9b;
}

.ogc-form-group {
	margin-bottom: 20px;
}

.ogc-form-label {
	display: block;
	font-size: 0.84rem;
	font-weight: 600;
	color: rgba(246, 239, 228, 0.85);
	margin-bottom: 8px;
}

.ogc-label-split {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.ogc-label-split .ogc-form-label {
	margin-bottom: 0;
}

.ogc-input-wrap {
	position: relative;
}

.ogc-input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	background: rgba(5, 7, 17, 0.6);
	border: 1px solid rgba(191, 239, 245, 0.18);
	border-radius: 10px;
	color: #fff;
	font-family: var(--ogc-font-body);
	font-size: 0.95rem;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.ogc-input:focus {
	outline: none;
	border-color: var(--ogc-ice-400);
	box-shadow: 0 0 0 3px rgba(143, 224, 238, 0.2);
	background: rgba(5, 7, 17, 0.85);
}

.ogc-input::placeholder {
	color: rgba(246, 239, 228, 0.35);
}

.ogc-form-group--checkbox {
	margin-bottom: 24px;
}

.ogc-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.84rem;
	color: rgba(246, 239, 228, 0.75);
	cursor: pointer;
}

.ogc-checkbox-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--ogc-ice-400);
	cursor: pointer;
}

.ogc-btn-auth {
	width: 100%;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(135deg, #bfeff5 0%, #8fe0ee 50%, #63c9dd 100%);
	color: #050711;
	border: none;
	border-radius: 999px;
	font-family: var(--ogc-font-body);
	font-size: 0.94rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(143, 224, 238, 0.3);
	transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}

.ogc-btn-auth:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 14px 32px rgba(143, 224, 238, 0.4);
}

.ogc-btn-auth:active {
	transform: translateY(0);
}

.ogc-auth-link {
	color: var(--ogc-ice-300);
	text-decoration: none;
	transition: color 0.18s;
}

.ogc-auth-link:hover {
	color: #fff;
	text-decoration: underline;
}

.ogc-auth-link--small {
	font-size: 0.78rem;
}

.ogc-auth-footer {
	text-align: center;
	margin-top: 28px;
}

.ogc-auth-link--back {
	font-size: 0.85rem;
	display: inline-block;
	margin-bottom: 12px;
}

.ogc-auth-copyright {
	font-size: 0.76rem;
	color: rgba(246, 239, 228, 0.4);
	margin: 0;
}

/* ==================================================================== */
/* FASE 9A: REDISEÑO VISUAL DEFINITIVO DEL DASHBOARD DEL ALUMNO (/campus/) */
/* ==================================================================== */

.ogc-dashboard-shell {
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px 24px 70px;
	box-sizing: border-box;
}

.ogc-campus-main-container {
	background: #050711;
	background:
		radial-gradient(ellipse at 15% 0%, rgba(60, 32, 77, 0.4) 0%, transparent 60%),
		radial-gradient(ellipse at 85% 30%, rgba(36, 22, 64, 0.45) 0%, transparent 60%),
		radial-gradient(circle at 50% 80%, rgba(13, 18, 36, 0.8) 0%, transparent 70%),
		#050711;
	min-height: 100vh;
	width: 100%;
}

.ogc-dashboard-shell--v9 {
	color: #f6efe4;
}

/* 1. TOP GREETING BAR */
.ogc-top-greeting-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 32px;
	gap: 24px;
	flex-wrap: wrap;
}

.ogc-greeting-content {
	flex: 1;
	min-width: 280px;
}

.ogc-greeting-headline,
.ogc-student-greeting {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #ffffff;
	margin: 0 0 4px;
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.ogc-greeting-sub,
.ogc-student-welcome {
	font-size: 0.82rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #d8b678;
	font-weight: 700;
	margin: 0 0 12px;
}

.ogc-greeting-motto {
	font-size: 0.96rem;
	font-style: italic;
	color: rgba(246, 239, 228, 0.7);
	margin: 0;
	font-family: Georgia, serif;
	letter-spacing: 0.02em;
}

.ogc-greeting-profile {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ogc-notif-bell {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(13, 18, 36, 0.8);
	border: 1px solid rgba(216, 182, 120, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #f6efe4;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ogc-notif-bell:hover {
	border-color: #d8b678;
	background: rgba(22, 13, 32, 0.9);
	transform: translateY(-2px);
}

.ogc-notif-dot {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ef4444;
	box-shadow: 0 0 8px #ef4444;
}

.ogc-user-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(13, 18, 36, 0.85);
	border: 1px solid rgba(216, 182, 120, 0.25);
	padding: 6px 16px 6px 8px;
	border-radius: 999px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ogc-user-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid #d8b678;
}

.ogc-user-meta {
	display: flex;
	flex-direction: column;
}

.ogc-user-name {
	font-size: 0.88rem;
	font-weight: 700;
	color: #ffffff;
}

.ogc-user-role {
	font-size: 0.72rem;
	color: #d8b678;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ogc-academic-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(22, 13, 32, 0.8);
	border: 1px solid rgba(216, 182, 120, 0.25);
	padding: 8px 18px;
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(3, 6, 16, 0.3);
}

.ogc-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ogc-ice-400);
	box-shadow: 0 0 8px var(--ogc-ice-400);
}

.ogc-badge-text {
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--ogc-ice-300);
}

/* 2. DASHBOARD ROWS & GRIDS */
.ogc-dash-row {
	margin-bottom: 26px;
}

.ogc-dash-row--hero {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
	align-items: stretch;
}

/* HERO CLASS CARD */
.ogc-card--hero-visual,
.ogc-student-hero {
	position: relative;
	background:
		linear-gradient(135deg, rgba(5, 7, 17, 0.95) 0%, rgba(13, 18, 36, 0.85) 55%, rgba(22, 13, 32, 0.6) 100%),
		url('https://oraclegypsies.com/wp-content/uploads/2026/09/hero-runas-gold.webp') right center / cover no-repeat,
		#0d1224;
	border: 1px solid rgba(216, 182, 120, 0.25);
	border-radius: 20px;
	padding: 34px 38px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(216, 182, 120, 0.15);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}

.ogc-card--hero-visual::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 90% 20%, rgba(216, 182, 120, 0.15), transparent 60%);
	pointer-events: none;
}

.ogc-hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
}

.ogc-hero-header-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.ogc-eyebrow-tag,
.ogc-hero__eyebrow {
	font-size: 0.74rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #d8b678;
	font-weight: 700;
}

.ogc-status-pill {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(233, 139, 139, 0.16);
	border: 1px solid rgba(233, 139, 139, 0.35);
	color: #ff9b9b;
}

.ogc-status-pill--live {
	background: rgba(127, 216, 168, 0.2);
	border-color: rgba(127, 216, 168, 0.45);
	color: #7fd8a8;
	animation: ogcPulse 1.8s infinite ease-in-out;
}

.ogc-hero-class-title,
.ogc-hero__title {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: clamp(1.45rem, 2.2vw, 2.1rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
	margin: 0 0 20px;
	line-height: 1.3;
}

.ogc-hero-meta-list {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.ogc-hero-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
	color: rgba(246, 239, 228, 0.85);
}

.ogc-hero-meta-item svg {
	color: #d8b678;
}

.ogc-hero-cta-slot {
	margin-top: auto;
}

.ogc-cta--hero,
.ogc-cta--entrar {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 36px;
	background: linear-gradient(135deg, #1b1528 0%, #0d1224 100%);
	border: 1.5px solid #d8b678;
	color: #f6efe4;
	font-weight: 800;
	font-size: 0.92rem;
	letter-spacing: 0.08em;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(216, 182, 120, 0.2);
	transition: all 0.22s ease-in-out;
	cursor: pointer;
}

.ogc-cta--hero:hover,
.ogc-cta--entrar:hover {
	background: linear-gradient(135deg, #d8b678 0%, #c5a059 100%);
	color: #050711;
	border-color: #ffe08a;
	box-shadow: 0 12px 36px rgba(216, 182, 120, 0.4), 0 0 28px rgba(216, 182, 120, 0.4);
	transform: translateY(-2px);
}

.ogc-cta--disabled {
	opacity: 0.6;
	cursor: not-allowed;
	border-color: rgba(216, 182, 120, 0.3);
}

/* PROGRESS DONUT CARD */
.ogc-card--progress-donut {
	background:
		linear-gradient(155deg, rgba(13, 18, 36, 0.9) 0%, rgba(5, 7, 17, 0.95) 100%),
		#0d1224;
	border: 1px solid rgba(143, 224, 238, 0.16);
	border-radius: 20px;
	padding: 30px 24px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
}

.ogc-card-top-title {
	width: 100%;
}

.ogc-card-title {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 1rem;
	letter-spacing: 0.16em;
	color: #d8b678;
	margin: 0;
	text-transform: uppercase;
	font-weight: 700;
}

.ogc-donut-container {
	position: relative;
	width: 130px;
	height: 130px;
	margin: 18px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ogc-donut-svg {
	width: 100%;
	height: 100%;
}

.ogc-donut-bg {
	fill: none;
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 7;
}

.ogc-donut-fill {
	fill: none;
	stroke: #38bdf8;
	stroke-width: 7;
	stroke-linecap: round;
	filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
	transition: stroke-dashoffset 0.8s ease;
}

.ogc-donut-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ogc-donut-val {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 1.85rem;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.02em;
}

.ogc-donut-footer {
	width: 100%;
}

.ogc-donut-subtitle {
	font-size: 0.88rem;
	color: rgba(246, 239, 228, 0.7);
	margin: 0 0 10px;
}

.ogc-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.84rem;
	color: #d8b678;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.2s ease;
}

.ogc-link-arrow:hover {
	color: #ffe08a;
	transform: translateX(4px);
}

/* 3. MID ROW: CONSEJO DEL DÍA + DERECHA */
.ogc-dash-row--mid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

/* CONSEJO DEL DÍA V9 */
.ogc-card--daily-rune-v9,
.ogc-card--daily-rune {
	position: relative;
	background:
		linear-gradient(180deg, rgba(5, 7, 17, 0.75) 0%, rgba(13, 18, 36, 0.95) 100%),
		radial-gradient(circle at 50% 40%, rgba(60, 32, 77, 0.5), transparent 70%),
		#0d1224;
	border: 1px solid rgba(216, 182, 120, 0.25);
	border-radius: 20px;
	padding: 32px 28px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	overflow: hidden;
}

.ogc-rune-inner-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	width: 100%;
}

.ogc-rune-card-title {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 1.05rem;
	letter-spacing: 0.18em;
	color: #d8b678;
	margin: 0 0 16px;
	text-transform: uppercase;
	font-weight: 700;
}

.ogc-rune-icon-center,
.ogc-rune-graphic {
	color: #d8b678;
	filter: drop-shadow(0 0 24px rgba(216, 182, 120, 0.55));
	margin: 12px 0;
	transition: transform 0.3s ease;
}

.ogc-rune-icon-center:hover,
.ogc-rune-graphic:hover {
	transform: scale(1.06);
	filter: drop-shadow(0 0 32px rgba(216, 182, 120, 0.75));
}

.ogc-rune-name-plate {
	margin: 8px 0 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ogc-rune-display-name,
.ogc-rune-name {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 1.65rem;
	letter-spacing: 0.12em;
	color: #ffffff;
	margin: 0 0 8px;
	font-weight: 700;
}

.ogc-gold-divider {
	width: 44px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #d8b678, transparent);
}

.ogc-rune-tradition-tag {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	color: rgba(216, 182, 120, 0.7);
	text-transform: uppercase;
	font-weight: 600;
}

/* COLUMNA DERECHA MID */
.ogc-mid-right-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* PAYMENT STATUS CARD */
.ogc-card--payment-status {
	background:
		linear-gradient(155deg, rgba(13, 24, 28, 0.85) 0%, rgba(5, 7, 17, 0.95) 100%),
		#0d1224;
	border: 1px solid rgba(127, 216, 168, 0.25);
	border-radius: 20px;
	padding: 24px 26px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}

.ogc-payment-status-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.ogc-payment-icon-badge {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ogc-payment-icon--ok {
	background: rgba(127, 216, 168, 0.15);
	border: 1px solid rgba(127, 216, 168, 0.4);
	color: #7fd8a8;
}

.ogc-payment-icon--alert {
	background: rgba(233, 139, 139, 0.15);
	border: 1px solid rgba(233, 139, 139, 0.4);
	color: #ff9b9b;
}

.ogc-payment-info-text {
	flex: 1;
}

.ogc-payment-status-pill {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7fd8a8;
	margin-bottom: 4px;
}

.ogc-payment-headline {
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 4px;
}

.ogc-payment-sub {
	font-size: 0.84rem;
	color: rgba(246, 239, 228, 0.65);
	margin: 0;
	line-height: 1.45;
}

.ogc-payment-action-row {
	margin-top: 4px;
}

.ogc-cta--ghost-payment {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	color: #f6efe4;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ogc-cta--ghost-payment:hover {
	background: rgba(216, 182, 120, 0.15);
	border-color: #d8b678;
	color: #ffe08a;
}

.ogc-cta--pagar-card,
.ogc-cta--pagar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	background: linear-gradient(135deg, #d8b678 0%, #b38b4d 100%);
	border: none;
	border-radius: 999px;
	color: #050711;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(216, 182, 120, 0.35);
	transition: all 0.2s ease;
}

.ogc-cta--pagar-card:hover,
.ogc-cta--pagar:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(216, 182, 120, 0.45);
}

/* GROUP VISUAL CARD */
.ogc-card--group-visual {
	position: relative;
	background:
		linear-gradient(180deg, rgba(5, 7, 17, 0.8) 0%, rgba(13, 18, 36, 0.92) 100%),
		url('https://oraclegypsies.com/wp-content/uploads/2026/09/viaje-atardecer.webp') center / cover no-repeat,
		#0d1224;
	border: 1px solid rgba(216, 182, 120, 0.2);
	border-radius: 20px;
	padding: 24px 26px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.ogc-group-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ogc-group-title-tag {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	color: #d8b678;
	margin: 0;
	text-transform: uppercase;
	font-weight: 700;
}

.ogc-group-main-info {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ogc-group-avatar-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(60, 32, 77, 0.6);
	border: 1px solid rgba(216, 182, 120, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d8b678;
	flex-shrink: 0;
}

.ogc-group-names {
	flex: 1;
}

.ogc-group-name-text {
	font-size: 1.02rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 4px;
}

.ogc-group-guide {
	font-size: 0.82rem;
	color: rgba(246, 239, 228, 0.7);
	margin: 0;
}

.ogc-group-guide strong {
	color: #d8b678;
}

/* 4. ACCESOS RÁPIDOS (5 CARDS) */
.ogc-section-heading {
	margin-bottom: 16px;
}

.ogc-section-title {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 0.95rem;
	letter-spacing: 0.18em;
	color: #d8b678;
	margin: 0;
	text-transform: uppercase;
	font-weight: 700;
}

.ogc-shortcuts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 16px;
}

.ogc-shortcut-card {
	position: relative;
	height: 190px;
	border-radius: 18px;
	border: 1px solid rgba(216, 182, 120, 0.2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px 18px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
	transition: all 0.25s ease-in-out;
}

.ogc-shortcut-card:hover {
	transform: translateY(-4px);
	border-color: #d8b678;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.7), 0 0 20px rgba(216, 182, 120, 0.2);
}

.ogc-shortcut-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}

.ogc-shortcut-card:hover .ogc-shortcut-bg {
	transform: scale(1.08);
}

.ogc-shortcut-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(5, 7, 17, 0.3) 0%, rgba(5, 7, 17, 0.85) 65%, rgba(5, 7, 17, 0.98) 100%);
}

.ogc-shortcut-card--recordings .ogc-shortcut-bg {
	background-image: url('https://oraclegypsies.com/wp-content/uploads/2026/09/clases-en-vivo-real.webp');
}

.ogc-shortcut-card--manuals .ogc-shortcut-bg {
	background-image: url('https://oraclegypsies.com/wp-content/uploads/2026/09/manuales-grimorio.webp');
}

.ogc-shortcut-card--attendance .ogc-shortcut-bg {
	background-image: url('https://oraclegypsies.com/wp-content/uploads/2026/09/formacion-runas.webp');
}

.ogc-shortcut-card--community .ogc-shortcut-bg {
	background-image: url('https://oraclegypsies.com/wp-content/uploads/2026/09/comunidad-fogata-noche3.webp');
}

.ogc-shortcut-card--nordic-travel .ogc-shortcut-bg {
	background-image: url('https://oraclegypsies.com/wp-content/uploads/2026/09/viaje-playa.webp');
}

.ogc-shortcut-card--saga .ogc-shortcut-bg {
	background: radial-gradient(circle at 50% 30%, rgba(197, 160, 89, 0.4) 0%, rgba(14, 10, 28, 0.95) 100%), #080A0E;
}

.ogc-shortcut-body {
	position: relative;
	z-index: 2;
	margin-bottom: 6px;
}

.ogc-shortcut-title {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #ffffff;
	margin: 0 0 4px;
	line-height: 1.25;
}

.ogc-shortcut-meta {
	font-size: 0.72rem;
	color: rgba(246, 239, 228, 0.65);
}

.ogc-shortcut-btn {
	position: absolute;
	bottom: 14px;
	right: 14px;
	z-index: 3;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(13, 18, 36, 0.8);
	border: 1px solid rgba(216, 182, 120, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #d8b678;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ogc-shortcut-card:hover .ogc-shortcut-btn {
	background: #d8b678;
	color: #050711;
	transform: scale(1.1);
}

/* 5. BOTTOM ROW: PRÓXIMOS PASOS + RECURSOS DESTACADOS */
.ogc-dash-row--bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
}

/* NEXT STEPS */
.ogc-card--next-steps {
	background:
		linear-gradient(155deg, rgba(13, 18, 36, 0.9) 0%, rgba(5, 7, 17, 0.95) 100%),
		#0d1224;
	border: 1px solid rgba(216, 182, 120, 0.2);
	border-radius: 20px;
	padding: 28px 30px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ogc-card-title-sm {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 0.88rem;
	letter-spacing: 0.18em;
	color: #d8b678;
	margin: 0 0 18px;
	text-transform: uppercase;
	font-weight: 700;
}

.ogc-checklist {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ogc-check-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ogc-check-box {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(216, 182, 120, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #38bdf8;
	flex-shrink: 0;
}

.ogc-check-item--done .ogc-check-box {
	background: rgba(56, 189, 248, 0.15);
	border-color: #38bdf8;
}

.ogc-check-label {
	font-size: 0.88rem;
	color: rgba(246, 239, 228, 0.85);
}

.ogc-check-item--done .ogc-check-label {
	color: #ffffff;
}

.ogc-checklist-footer {
	margin-top: auto;
}

/* FEATURED RESOURCE */
.ogc-card--featured-resource {
	background:
		linear-gradient(155deg, rgba(13, 18, 36, 0.9) 0%, rgba(5, 7, 17, 0.95) 100%),
		#0d1224;
	border: 1px solid rgba(216, 182, 120, 0.2);
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
}

.ogc-featured-inner {
	display: flex;
	align-items: center;
	gap: 22px;
	width: 100%;
}

.ogc-featured-thumb {
	width: 130px;
	height: 120px;
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(5, 7, 17, 0.3), rgba(5, 7, 17, 0.8)),
		url('https://oraclegypsies.com/wp-content/uploads/2026/09/viaje-atardecer.webp') center / cover no-repeat;
	border: 1px solid rgba(216, 182, 120, 0.3);
	flex-shrink: 0;
}

.ogc-featured-text-slot {
	flex: 1;
}

.ogc-featured-heading {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 0.98rem;
	font-weight: 700;
	color: #ffffff;
	margin: 6px 0 6px;
	line-height: 1.35;
}

.ogc-featured-desc {
	font-size: 0.82rem;
	color: rgba(246, 239, 228, 0.65);
	margin: 0 0 14px;
}

.ogc-cta--gold-outline {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	background: transparent;
	border: 1px solid #d8b678;
	color: #d8b678;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	border-radius: 999px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.ogc-cta--gold-outline:hover {
	background: #d8b678;
	color: #050711;
}

/* 6. FOOTER BANNER */
.ogc-dashboard-footer-banner {
	margin-top: 40px;
	padding: 24px 32px;
	border-top: 1px solid rgba(216, 182, 120, 0.15);
	border-bottom: 1px solid rgba(216, 182, 120, 0.15);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.ogc-footer-vegvisir {
	color: #d8b678;
	opacity: 0.85;
}

.ogc-footer-quote-wrap {
	text-align: center;
}

.ogc-footer-motto {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 1.05rem;
	letter-spacing: 0.16em;
	color: #ffffff;
	margin: 0;
	font-weight: 600;
}

.ogc-footer-brand {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.ogc-footer-brand-title {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 0.88rem;
	letter-spacing: 0.14em;
	color: #d8b678;
	font-weight: 700;
}

.ogc-footer-brand-sub {
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	color: rgba(246, 239, 228, 0.5);
	text-transform: uppercase;
}

/* FINANCIAL BANNER */
.ogc-financial-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	border-radius: 16px;
	margin-bottom: 24px;
	gap: 16px;
	flex-wrap: wrap;
}

.ogc-banner--danger {
	background: rgba(233, 139, 139, 0.12);
	border: 1px solid rgba(233, 139, 139, 0.35);
	color: #ff9b9b;
}

.ogc-banner--warning {
	background: rgba(240, 201, 107, 0.12);
	border: 1px solid rgba(240, 201, 107, 0.35);
	color: #ffe08a;
}

.ogc-banner--gold {
	background: rgba(243, 217, 225, 0.1);
	border: 1px solid rgba(243, 217, 225, 0.3);
	color: #f7dbe3;
}

.ogc-banner--info {
	background: rgba(143, 224, 238, 0.1);
	border: 1px solid rgba(143, 224, 238, 0.25);
	color: var(--ogc-ice-300);
}

.ogc-banner--success {
	background: rgba(127, 216, 168, 0.12);
	border: 1px solid rgba(127, 216, 168, 0.3);
	color: var(--ogc-success);
}

.ogc-banner-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ogc-banner-headline {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
}

.ogc-banner-sub {
	display: block;
	font-size: 0.82rem;
	opacity: 0.85;
	margin-top: 2px;
}

/* Empty State / Auth Prompt Cards */
.ogc-card--auth-prompt,
.ogc-card--empty-state {
	text-align: center;
	padding: 60px 30px;
	max-width: 580px;
	margin: 40px auto;
}

.ogc-card__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(143, 224, 238, 0.1);
	border: 1px solid rgba(143, 224, 238, 0.25);
	color: var(--ogc-ice-400);
	margin-bottom: 20px;
}

.ogc-prompt__title,
.ogc-empty__title {
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 1.55rem;
	color: #fff;
	margin: 0 0 12px;
}

.ogc-prompt__text,
.ogc-empty__text {
	font-size: 0.94rem;
	color: rgba(246, 239, 228, 0.75);
	line-height: 1.6;
	margin: 0 0 28px;
}

.ogc-cta--contacto {
	background: rgba(240, 201, 107, 0.15);
	border: 1px solid rgba(240, 201, 107, 0.35);
	color: #ffe08a;
}

/* ==================================================================== */
/* RESPONSIVE VIEWPORTS (1024px, 768px, 430x932, 390x844)               */
/* ==================================================================== */

@media (max-width: 1024px) {
	.ogc-shortcuts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.ogc-dashboard-shell {
		padding: 24px 16px 40px;
	}

	.ogc-top-greeting-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.ogc-greeting-profile {
		width: 100%;
		justify-content: space-between;
	}

	.ogc-dash-row--hero,
	.ogc-dash-row--mid,
	.ogc-dash-row--bottom {
		grid-template-columns: 1fr;
	}

	.ogc-shortcuts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.ogc-card--hero-visual {
		padding: 26px 20px;
	}

	.ogc-hero-meta-list {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ogc-cta--hero,
	.ogc-cta--entrar {
		width: 100%;
		justify-content: center;
		padding: 14px 20px;
	}

	.ogc-featured-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.ogc-featured-thumb {
		width: 100%;
		height: 140px;
	}

	.ogc-dashboard-footer-banner {
		flex-direction: column;
		text-align: center;
		gap: 16px;
	}

	.ogc-footer-brand {
		text-align: center;
	}

	.ogc-financial-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.ogc-banner-right {
		width: 100%;
	}

	.ogc-banner-right .ogc-cta {
		width: 100%;
		justify-content: center;
	}

	.ogc-urgent-payment-slot {
		order: -1;
		margin-bottom: 20px;
	}
}

/* ================================================================== */
/* FUNNEL DE DESCUBRIMIENTO & EXPLORA FORMACIONES                     */
/* ================================================================== */

.ogc-funnel-body {
	margin: 0;
	padding: 0;
	background: #08040e;
	color: #f1f5f9;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.ogc-funnel-nav {
	background: rgba(13, 8, 24, 0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(212, 175, 55, 0.18);
	position: sticky;
	top: 0;
	z-index: 100;
}

.ogc-funnel-nav-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ogc-funnel-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.ogc-funnel-brand-text {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 2px;
	color: #f8fafc;
	background: linear-gradient(135deg, #f8fafc 40%, #d4af37 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ogc-btn-subtle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid rgba(212, 175, 55, 0.35);
	background: rgba(212, 175, 55, 0.08);
	color: #d4af37;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	transition: all 0.25s ease;
}

.ogc-btn-subtle:hover {
	background: rgba(212, 175, 55, 0.2);
	border-color: #d4af37;
	color: #fff;
}

/* Hero */
.ogc-funnel-hero {
	padding: 60px 24px 40px;
	text-align: center;
	background: radial-gradient(circle at 50% 20%, rgba(56, 25, 77, 0.45) 0%, rgba(8, 4, 14, 0.95) 75%);
}

.ogc-funnel-hero-content {
	max-width: 800px;
	margin: 0 auto;
}

.ogc-funnel-hero-title {
	font-family: 'Cinzel', serif;
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	font-weight: 700;
	color: #f8fafc;
	margin: 16px 0 14px;
	line-height: 1.25;
	letter-spacing: 0.5px;
}

.ogc-funnel-hero-subtitle {
	font-size: 1.05rem;
	color: #94a3b8;
	line-height: 1.7;
	margin: 0;
}

/* Formations Grid */
.ogc-funnel-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 24px 80px;
	flex: 1;
	width: 100%;
	box-sizing: border-box;
}

.ogc-formation-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 30px;
}

.ogc-formation-card {
	background: linear-gradient(170deg, rgba(22, 13, 36, 0.85) 0%, rgba(11, 7, 20, 0.95) 100%);
	border: 1px solid rgba(212, 175, 55, 0.2);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ogc-formation-card:hover {
	transform: translateY(-6px);
	border-color: rgba(212, 175, 55, 0.6);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 175, 55, 0.15);
}

.ogc-formation-img-wrap {
	position: relative;
	width: 100%;
	height: 220px;
	background: #0d0818;
	overflow: hidden;
}

.ogc-formation-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.ogc-formation-card:hover .ogc-formation-img {
	transform: scale(1.05);
}

.ogc-formation-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(8, 4, 14, 0.85);
	backdrop-filter: blur(8px);
	border: 1px solid #d4af37;
	color: #d4af37;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 4px;
	text-transform: uppercase;
}

.ogc-formation-badge--purple {
	border-color: #a855f7;
	color: #c084fc;
}

.ogc-formation-badge--soon {
	border-color: #38bdf8;
	color: #7dd3fc;
}

.ogc-formation-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ogc-formation-title {
	font-family: 'Cinzel', serif;
	font-size: 1.35rem;
	font-weight: 700;
	color: #f8fafc;
	margin: 0 0 12px;
	letter-spacing: 1px;
}

.ogc-formation-desc {
	font-size: 0.92rem;
	color: #94a3b8;
	line-height: 1.6;
	margin: 0 0 20px;
	flex: 1;
}

.ogc-formation-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 0.8rem;
	color: #cbd5e1;
	background: rgba(10, 6, 18, 0.6);
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: 20px;
}

.ogc-btn-formation {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 20px;
	border-radius: 8px;
	background: linear-gradient(135deg, #d4af37 0%, #a17c1a 100%);
	color: #08040e;
	font-weight: 800;
	font-size: 0.88rem;
	letter-spacing: 1px;
	text-decoration: none;
	transition: all 0.25s ease;
}

.ogc-btn-formation:hover {
	background: linear-gradient(135deg, #f59e0b 0%, #d4af37 100%);
	color: #000;
	box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35);
}

.ogc-btn-formation--soon {
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
	color: #fff;
}

.ogc-btn-formation--soon:hover {
	background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
	color: #fff;
	box-shadow: 0 4px 18px rgba(56, 189, 248, 0.35);
}

/* ================================================================== */
/* PÁGINA SINGLE DE FORMACIÓN                                         */
/* ================================================================== */

.ogc-single-hero {
	background: radial-gradient(circle at 70% 30%, rgba(56, 25, 77, 0.5) 0%, rgba(8, 4, 14, 0.98) 75%);
	border-bottom: 1px solid rgba(212, 175, 55, 0.15);
	padding: 40px 24px;
}

.ogc-single-hero-wrap {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 40px;
	align-items: center;
}

.ogc-single-hero-media {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(212, 175, 55, 0.3);
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
	height: 340px;
}

.ogc-single-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogc-single-title {
	font-family: 'Cinzel', serif;
	font-size: clamp(2rem, 3.5vw, 2.7rem);
	font-weight: 700;
	color: #f8fafc;
	margin: 12px 0 10px;
	line-height: 1.2;
}

.ogc-single-tagline {
	font-size: 1.1rem;
	color: #cbd5e1;
	line-height: 1.6;
	margin: 0 0 18px;
}

.ogc-single-teacher-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(22, 13, 36, 0.85);
	border: 1px solid rgba(212, 175, 55, 0.25);
	padding: 8px 16px;
	border-radius: 30px;
	font-size: 0.88rem;
	color: #d4af37;
	margin-bottom: 18px;
}

.ogc-single-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 24px 80px;
	width: 100%;
	box-sizing: border-box;
}

.ogc-single-content-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 40px;
	align-items: flex-start;
}

.ogc-editorial-card {
	background: rgba(18, 11, 28, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 28px;
	margin-bottom: 24px;
}

.ogc-editorial-title {
	font-family: 'Cinzel', serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: #f8fafc;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.ogc-editorial-subtitle {
	font-family: 'Cinzel', serif;
	font-size: 1.15rem;
	color: #d4af37;
	margin: 0 0 10px;
}

.ogc-editorial-text {
	font-size: 0.96rem;
	color: #cbd5e1;
	line-height: 1.7;
	margin: 0;
}

.ogc-editorial-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ogc-editorial-list li {
	padding: 8px 0;
	font-size: 0.94rem;
	color: #cbd5e1;
	line-height: 1.5;
	display: flex;
	gap: 10px;
}

.ogc-editorial-list li strong {
	color: #d4af37;
}

.ogc-meta-box {
	background: rgba(10, 6, 18, 0.75);
	padding: 14px;
	border-radius: 8px;
	border: 1px solid rgba(212, 175, 55, 0.15);
}

.ogc-meta-box-label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 1px;
	color: #d4af37;
	display: block;
	margin-bottom: 4px;
}

.ogc-meta-box p {
	margin: 0;
	font-size: 0.88rem;
	color: #f8fafc;
	font-weight: 600;
}

.ogc-faqs-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ogc-faq-item {
	background: rgba(10, 6, 18, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	padding: 16px;
}

.ogc-faq-q {
	margin: 0 0 6px;
	font-size: 0.95rem;
	color: #f8fafc;
	font-weight: 700;
}

.ogc-faq-a {
	margin: 0;
	font-size: 0.88rem;
	color: #94a3b8;
	line-height: 1.6;
}

/* Formulario Lead Capture */
.ogc-lead-card {
	background: linear-gradient(170deg, rgba(26, 15, 42, 0.95) 0%, rgba(13, 8, 24, 0.98) 100%);
	border: 1px solid rgba(212, 175, 55, 0.4);
	border-radius: 16px;
	padding: 30px 24px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(212, 175, 55, 0.1);
	position: sticky;
	top: 90px;
}

.ogc-lead-form-title {
	font-family: 'Cinzel', serif;
	font-size: 1.35rem;
	font-weight: 700;
	color: #f8fafc;
	margin: 0 0 6px;
	text-align: center;
}

.ogc-lead-form-sub {
	font-size: 0.85rem;
	color: #94a3b8;
	text-align: center;
	margin: 0 0 20px;
}

.ogc-lead-success {
	text-align: center;
	padding: 20px 10px;
}

/* Footer Funnel */
.ogc-funnel-footer {
	background: #050209;
	border-top: 1px solid rgba(212, 175, 55, 0.15);
	padding: 40px 24px;
	text-align: center;
}

.ogc-funnel-footer-container {
	max-width: 800px;
	margin: 0 auto;
}

.ogc-funnel-motto {
	font-family: 'Cinzel', serif;
	font-size: 1.05rem;
	color: #d4af37;
	letter-spacing: 2px;
	margin: 0 0 16px;
}

.ogc-funnel-links {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 16px;
	font-size: 0.88rem;
}

.ogc-funnel-links a {
	color: #94a3b8;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ogc-funnel-links a:hover {
	color: #d4af37;
}

.ogc-funnel-links span {
	color: #475569;
}

.ogc-funnel-copy {
	font-size: 0.78rem;
	color: #64748b;
	margin: 0;
}

/* Responsive Funnel */
@media (max-width: 900px) {
	.ogc-single-hero-wrap {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ogc-single-hero-media {
		height: 240px;
	}

	.ogc-single-content-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.ogc-lead-card {
		position: static;
	}
}

@media (max-width: 480px) {
	.ogc-funnel-hero {
		padding: 40px 16px 25px;
	}

	.ogc-formation-grid {
		grid-template-columns: 1fr;
	}

	.ogc-formation-img-wrap {
		height: 180px;
	}

	.ogc-editorial-card {
		padding: 20px 16px;
	}

	.ogc-lead-card {
		padding: 24px 16px;
	}
}
/* ==================================================================== */
/* TOP BAR DEL DASHBOARD — jerarquía de la barra de usuario.            */
/*                                                                      */
/* Antes: los 4 elementos (campana, perfil, contexto académico y cerrar */
/* sesión) colgaban sueltos del mismo flex con el mismo gap, y "Cerrar  */
/* sesión" usaba la clase base .ogc-cta — que trae degradado hielo +    */
/* box-shadow luminoso — así que la acción de SALIR era la más brillante*/
/* de toda la pantalla, por encima incluso de "ENTRAR A MI CLASE".      */
/*                                                                      */
/* Ahora: los tres elementos de identidad/contexto se agrupan en        */
/* .ogc-topbar-cluster (gap corto, se leen como una sola pieza) y el    */
/* logout queda separado como acción terciaria, sin relleno ni glow,    */
/* conservando target táctil de 40px y foco visible.                    */
/* ==================================================================== */

.ogc-topbar-cluster {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ogc-greeting-profile {
	gap: 18px;
}

.ogc-topbar-logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid rgba(246, 239, 228, 0.18);
	box-shadow: none;
	color: rgba(246, 239, 228, 0.62);
	font-family: var(--ogc-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ogc-topbar-logout svg {
	opacity: 0.75;
	flex-shrink: 0;
}

.ogc-topbar-logout:hover,
.ogc-topbar-logout:focus-visible {
	color: var(--ogc-danger);
	border-color: rgba(233, 139, 139, 0.45);
	background: rgba(233, 139, 139, 0.08);
	text-decoration: none;
}

.ogc-topbar-logout:hover svg,
.ogc-topbar-logout:focus-visible svg {
	opacity: 1;
}

.ogc-topbar-logout:focus-visible {
	outline: 2px solid var(--ogc-ice-400);
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.ogc-greeting-profile {
		width: 100%;
		justify-content: space-between;
		gap: 12px;
	}

	.ogc-topbar-cluster {
		gap: 8px;
	}
}

@media (max-width: 480px) {
	.ogc-greeting-profile {
		align-items: stretch;
		flex-direction: column;
	}

	.ogc-topbar-cluster {
		justify-content: flex-start;
	}

	/* El logout no debe heredar el width:100% que .ogc-cta toma a 480px:
	   sigue siendo una acción terciaria, no un botón de ancho completo. */
	.ogc-topbar-logout {
		align-self: flex-start;
		width: auto;
	}
}

/* ==========================================================================
   Biblioteca de Manuales de Estudio — Estilos y Responsive Cards en Móvil
   ========================================================================== */
.ogc-status-badge--muted {
	background: rgba(148, 163, 184, 0.12);
	color: #94A3B8;
	border: 1px solid rgba(148, 163, 184, 0.25);
}
.ogc-file-actions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.ogc-btn-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	border-radius: 4px;
	font-family: var(--ogc-font-display, 'Cinzel', serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.ogc-btn-action--view {
	background: rgba(197, 160, 89, 0.12);
	color: #D8B467;
	border: 1px solid rgba(197, 160, 89, 0.4);
}
.ogc-btn-action--view:hover {
	background: rgba(197, 160, 89, 0.25);
	color: #FFF;
	border-color: #C5A059;
}
.ogc-btn-action--download {
	background: linear-gradient(135deg, #C5A059 0%, #9B783E 100%);
	color: #080A0E;
	border: 1px solid #C5A059;
}
.ogc-btn-action--download:hover {
	background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
	color: #000;
	box-shadow: 0 2px 8px rgba(197, 160, 89, 0.35);
}
.ogc-materials-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ogc-material-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}
.ogc-material-item:last-child {
	margin-bottom: 0;
}
.ogc-material-title {
	font-size: 0.85rem;
	color: #E2E8F0;
}
.ogc-unlock-note {
	color: var(--ogc-text-secondary, #94A3B8);
	font-size: 0.75rem;
	margin-top: 4px;
	line-height: 1.3;
}

@media (max-width: 768px) {
	.ogc-data-table.ogc-manuals-table thead {
		display: none;
	}
	.ogc-data-table.ogc-manuals-table,
	.ogc-data-table.ogc-manuals-table tbody,
	.ogc-data-table.ogc-manuals-table tr,
	.ogc-data-table.ogc-manuals-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.ogc-data-table.ogc-manuals-table tr {
		background: rgba(14, 10, 28, 0.75);
		border: 1px solid rgba(197, 160, 89, 0.25);
		border-radius: 10px;
		margin-bottom: 16px;
		padding: 16px;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	}
	.ogc-data-table.ogc-manuals-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		font-size: 0.88rem;
		text-align: left !important;
	}
	.ogc-data-table.ogc-manuals-table td.ogc-col-clase {
		font-family: var(--ogc-font-display, 'Cinzel', serif);
		font-size: 1.05rem;
		color: #D8B467;
		padding-top: 0;
		padding-bottom: 2px;
		border-bottom: none;
	}
	.ogc-data-table.ogc-manuals-table td.ogc-col-clase::before {
		display: none;
	}
	.ogc-data-table.ogc-manuals-table td.ogc-col-tema {
		font-size: 0.98rem;
		font-weight: 600;
		color: #FFFFFF;
		padding-top: 0;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(197, 160, 89, 0.18);
		margin-bottom: 6px;
	}
	.ogc-data-table.ogc-manuals-table td.ogc-col-tema::before {
		display: none;
	}
	.ogc-data-table.ogc-manuals-table td:not(.ogc-col-clase):not(.ogc-col-tema)::before {
		content: attr(data-label);
		font-weight: 600;
		color: #94A3B8;
		font-size: 0.78rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		flex-shrink: 0;
		margin-right: 12px;
	}
	.ogc-data-table.ogc-manuals-table td:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
	.ogc-data-table.ogc-manuals-table td.ogc-col-estado {
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
	}
	.ogc-data-table.ogc-manuals-table td.ogc-col-estado::before {
		align-self: flex-start;
		margin-bottom: -18px;
	}
}

/* ==========================================================================
   FORENSIC POST-P1: HERO LEAD VIEWPORT FIX (DESKTOP BREATHING ROOM)
   ========================================================================== */
.og-theme .og-nh-hero-content,
.og-nh-hero-content {
	box-sizing: border-box !important;
	max-width: calc(620px + max(var(--og-gutter, 24px), calc((100vw - var(--og-max, 1200px)) / 2))) !important;
}

.og-theme .og-nh-hero-lead,
.og-nh-hero-lead {
	max-width: 58ch !important;
	width: 100% !important;
}

@media (max-width: 980px) {
	.og-theme .og-nh-hero-content,
	.og-nh-hero-content {
		max-width: none !important;
	}
}