/* ==========================================================================
   El Método — Chrome (barra superior slim + footer)
   Oscuro, de marca, ligero. Namespaced bajo .emt-topbar / .emt-site-footer.
   ========================================================================== */

/* Fuente de marca. El @font-face vivía en el CSS de la cabecera de Elementor
   (que ahora suprimimos), así que la declaramos aquí desde los archivos reales.
   Rutas relativas al propio CSS → funcionan igual en staging y producción. */
@font-face {
	font-family: 'GothamEMT';
	src: url('../../../uploads/2025/05/gotham-book.woff2') format('woff2'),
	     url('../../../uploads/2025/05/gotham-book.woff') format('woff');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'GothamEMT';
	src: url('../../../uploads/2025/05/gotham-bold.woff2') format('woff2'),
	     url('../../../uploads/2025/05/gotham-bold.woff') format('woff');
	font-weight: 700 900;
	font-style: normal;
	font-display: swap;
}

/* Lienzo oscuro consistente en todas las páginas con chrome propio (no la home). */
body.emt-chrome {
	background: #0e0e12 !important;
}

/* Preloader de transición del tema: se deforma sobre nuestro fondo → lo ocultamos en páginas con chrome. */
body.emt-chrome #custom-preloader { display: none !important; }

.emt-topbar,
.emt-site-footer {
	--tb-bg: #0e0e12;
	--tb-bg2: #16161d;
	--tb-line: rgba(255, 255, 255, .09);
	--tb-txt: #e9e9f0;
	--tb-mut: #9a9aa8;
	--tb-yellow: #fff52a;
	--tb-red: #d82f13;
	--tb-font: 'GothamEMT', 'Gotham2', 'Gotham', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	font-family: var(--tb-font);
}
.emt-topbar *,
.emt-site-footer * { box-sizing: border-box; font-family: var(--tb-font); }

/* ---------- Barra superior ---------- */
.emt-topbar {
	position: sticky;
	top: 0;
	z-index: 9990;
	background: rgba(14, 14, 18, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--tb-line);
}
.emt-topbar-in {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 58px;
	padding: 0 20px;
}
.emt-tb-logo { display: inline-flex; align-items: center; text-decoration: none; }
.emt-tb-logo img { height: 34px; width: auto; display: block; }
.emt-tb-word { color: var(--tb-yellow); font-weight: 800; font-size: 18px; letter-spacing: .01em; }

.emt-tb-nav { display: flex; gap: 4px; margin-left: 8px; }
.emt-tb-nav a {
	color: var(--tb-mut);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 9px;
	transition: color .15s, background .15s;
	white-space: nowrap;
}
.emt-tb-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.emt-tb-spacer { flex: 1 1 auto; }

.emt-tb-actions { display: flex; align-items: center; gap: 8px; }

.emt-tb-ic {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	color: var(--tb-txt);
	text-decoration: none;
	border: 1px solid #2a2a35;
	background: #16161d;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.emt-tb-ic:hover { background: rgba(255, 245, 42, .10); border-color: rgba(255, 245, 42, .35); color: #fff; }
/* Tamaño uniforme de los tres iconos (carrito, usuario y campanita) */
.emt-topbar .emt-tb-actions svg { width: 22px !important; height: 22px !important; display: block; }

.emt-cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--tb-yellow);
	color: #111;
	font-size: 11px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
}
.emt-cart-count[data-empty="1"] { display: none; }

.emt-tb-login {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	margin-left: 4px;
	border-radius: 10px;
	background: var(--tb-yellow);
	color: var(--tb-red);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	transition: transform .12s, filter .15s;
}
.emt-tb-login:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Avatar con la inicial (sustituye al icono de usuario) */
.emt-tb-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	margin-left: 2px;
	cursor: pointer;
	background: linear-gradient(135deg, #fff52a 0%, #ff8a1e 100%);
	color: #7a1a05;
	font-weight: 800;
	font-size: 17px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tb-font);
	transition: filter .15s, transform .12s;
}
.emt-tb-avatar:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Botón hamburguesa (solo móvil, solo si la página tiene menú lateral) — cajita con borde, 3 líneas SVG */
.emt-tb-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0; /* anula el padding global de botón (.5rem 1rem) que estrujaba el icono */
	box-sizing: border-box;
	border: 1px solid #2a2a35;
	background: #16161d;
	color: var(--tb-txt);
	border-radius: 12px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.emt-tb-burger:hover { background: rgba(255, 245, 42, .10); border-color: rgba(255, 245, 42, .35); color: #fff; }
/* Menú (Mi cuenta y Cursos): hamburguesa de 3 líneas horizontales, igual en ambos. */
.emt-tb-burger .emt-burger-lines {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 20px;
}
.emt-tb-burger .emt-burger-lines i {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
}

/* Overlay del cajón lateral (Mi cuenta) */
.emt-chrome-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
	z-index: 9994;
}
.emt-chrome-overlay.show { opacity: 1; pointer-events: auto; }
@media (min-width: 881px) { .emt-chrome-overlay { display: none; } }
@media (max-width: 880px) {
	.emt-tb-burger { display: inline-flex; }
	/* El hamburguesa de la barra reemplaza al botón "Contenido del curso" de dentro */
	.emt-ld-burger { display: none !important; }
	/* El cajón lateral de cursos debe quedar por encima de la barra sticky */
	.emt-ld-overlay { z-index: 9994 !important; }
	.emt-ld-side { z-index: 9995 !important; }
}

/* Menú de usuario */
.emt-tb-user { position: relative; }
.emt-tb-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 200px;
	background: var(--tb-bg2);
	border: 1px solid var(--tb-line);
	border-radius: 12px;
	padding: 6px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
	display: none;
}
.emt-tb-user.open .emt-tb-menu { display: block; }
.emt-tb-menu .hd {
	padding: 8px 12px 10px;
	color: var(--tb-mut);
	font-size: 12px;
	font-weight: 700;
	border-bottom: 1px solid var(--tb-line);
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.emt-tb-menu a {
	display: block;
	padding: 10px 12px;
	color: var(--tb-txt);
	text-decoration: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}
.emt-tb-menu a:hover { background: rgba(255, 255, 255, .07); }
.emt-tb-menu a.out { color: var(--tb-red); }

/* Campanita del plugin propio (elmetodo-notificaciones): la tratamos como un icono más de la barra */
.emt-tb-bell { display: inline-flex; align-items: center; }
.emt-tb-bell .elm-notif { margin: 0 !important; line-height: 0; }
.emt-tb-bell .elm-notif-btn {
	width: 40px;
	height: 40px;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	border: 1px solid #2a2a35 !important;
	background: #16161d !important;
	color: var(--tb-txt);
	transition: background .15s, color .15s, border-color .15s;
}
.emt-tb-bell .elm-notif-btn:hover { background: rgba(255, 245, 42, .10) !important; border-color: rgba(255, 245, 42, .35) !important; color: #fff; }
.emt-tb-bell .elm-notif-icon { width: 22px; height: 22px; }

/* En móvil, el panel de notificaciones no debe salirse por la izquierda:
   lo fijamos al ancho del móvil (la barra, con backdrop-filter, es su bloque contenedor). */
@media (max-width: 600px) {
	.emt-tb-bell .elm-notif-panel {
		position: fixed !important;
		top: 58px !important;
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
		max-width: none !important;
		z-index: 9999 !important;
	}
}

@media (max-width: 600px) {
	.emt-topbar-in { gap: 6px; padding: 0 12px; height: 54px; }
	.emt-tb-login { padding: 0 13px; }
}

/* ---------- Footer unificado (minimal) ---------- */
.emt-site-footer {
	background: var(--tb-bg);
	color: var(--tb-mut);
	margin-top: 0;
}
/* Todo el footer en Gotham y SIN negrita (ningún texto en bold).
   !important en la fuente porque el kit de Elementor (.elementor-kit-NNNN a)
   pisa los enlaces con su tipografía global si no. */
.emt-site-footer,
.emt-site-footer * {
	font-family: var(--tb-font) !important;
	font-weight: 400 !important;
}

/* PC: una sola fila — logo (izq) · enlaces (centro) · redes (der). */
.emt-sf--min .emt-sf-in {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 24px 0;
	display: flex;
	align-items: center;
	gap: 20px 28px;
	flex-wrap: wrap;
}
.emt-sf-logo { display: inline-flex; flex: 0 0 auto; text-decoration: none; }
.emt-sf-logo img { height: 34px; width: auto; display: block; }
.emt-sf-logo .emt-tb-word { color: var(--tb-yellow); font-weight: 400; font-size: 18px; }

.emt-sf-links {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 0;
}
.emt-sf-links a {
	color: var(--tb-mut);
	text-decoration: none;
	font-size: 13px;
	font-weight: 400;
	white-space: nowrap;
	transition: color .15s;
}
.emt-sf-links a:hover { color: var(--tb-yellow); }
/* Separador de punto entre enlaces (·). Va antes de cada enlace salvo el primero. */
.emt-sf-links a + a::before {
	content: "·";
	color: var(--tb-mut);
	margin: 0 11px;
	font-weight: 400;
}

.emt-sf-social { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.emt-sf-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	border: 1px solid #2a2a35;
	background: #16161d;
	color: var(--tb-txt);
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}
.emt-sf-social a:hover { background: rgba(255, 245, 42, .10); border-color: rgba(255, 245, 42, .35); color: #fff; }
.emt-sf-social svg { width: 19px !important; height: 19px !important; display: block; }

.emt-sf--min .emt-sf-bottom {
	max-width: 1280px;
	margin: 0 auto;
	padding: 18px 24px 24px;
	text-align: center;
	font-size: 12px;
	font-weight: 400;
	color: var(--tb-mut);
}
/* Divisor CORTO y centrado ENTRE los enlaces y la línea de copyright. */
.emt-sf--min .emt-sf-bottom::before {
	content: "";
	display: block;
	width: 72px;
	height: 2px;
	border-radius: 2px;
	margin: 0 auto 16px;
	background: var(--tb-line);
}

/* Móvil/tablet estrecho: apilado y centrado. Los enlaces van en fila que ENVUELVE
   (varios por línea, compacto) y SIN puntos, para que ningún separador quede
   colgando a izquierda o derecha al hacer wrap. */
@media (max-width: 900px) {
	.emt-sf--min .emt-sf-in {
		flex-direction: column;
		text-align: center;
		gap: 18px;
		padding: 24px 20px 12px;
	}
	.emt-sf-logo { order: 1; }
	.emt-sf-social { order: 2; }
	.emt-sf-links {
		order: 3;
		gap: 8px 16px;
	}
	.emt-sf-links a + a::before { content: none; }
}

/* La home ya no pinta su pie incrustado de Elementor: ahora comparte este footer. */
.home .elementor-element-f9db446 { display: none !important; }