/* =====================================================================
   ESPACIO GAMER — Tema global (v2 "Off-Blacks")
   ---------------------------------------------------------------------
   Se carga en TODO el frontend. Aquí viven las variables de marca y el
   estilo del header de Astra. Las secciones del Inicio y las páginas
   internas se irán sumando a este archivo por etapas.

   ETAPA 1: Header (Astra) + botón de sesión [eg_boton_perfil].
   ===================================================================== */

:root {
	--eg-fondo: #16161a;
	--eg-fondo-banda: #1a1a1f;
	--eg-card: #1e1e24;
	--eg-card-hover: #24242b;
	--eg-card-in: #18181d;
	--eg-linea: rgba(255, 255, 255, 0.06);
	--eg-sep: rgba(255, 255, 255, 0.12);
	--eg-titulo: #ffffff;
	--eg-texto: #f3f3f3;
	--eg-texto-2: #b4b4bf;
	--eg-texto-3: #8f8f9b;
	--eg-naranja: #fe7006;
	--eg-naranja-claro: #ff8a33;
	--eg-naranja-suave: rgba(254, 112, 6, 0.12);
	--eg-radio: 8px;
	--eg-sombra: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 6px rgba(0, 0, 0, 0.22), 0 14px 32px -16px rgba(0, 0, 0, 0.7);
	--eg-sombra-alta: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 10px rgba(0, 0, 0, 0.25), 0 22px 44px -18px rgba(0, 0, 0, 0.8);
	--eg-f-titulo: 'Saira', 'Arial Narrow', sans-serif;
	--eg-f-texto: 'Barlow', system-ui, sans-serif;
	--eg-suave: cubic-bezier(.2, .8, .2, 1);
}

/* =====================================================================
   BASE — fondo gris carbón y tipografías en TODO el sitio
   (se fuerza desde aquí: no depende de la configuración de Astra)
   ===================================================================== */

html,
body,
#page,
.site-content,
.ast-plain-container,
.ast-separate-container,
.ast-page-builder-template {
	background-color: var(--eg-fondo) !important;
	background-image: none !important;
}

body,
button,
input,
select,
textarea,
.entry-content {
	font-family: var(--eg-f-texto);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
	font-family: var(--eg-f-titulo);
	font-style: italic;
	font-stretch: 75%;
	font-variation-settings: "wdth" 75;
}

/* Evita la barra horizontal cuando una sección ocupa todo el ancho
   (clip, no hidden: así el header fijo sigue funcionando). */
html,
body {
	overflow-x: clip;
}

/* Si la página parte con el slider, se pega al header (sin espacio arriba) */
body:has(.entry-content > .eg-hero:first-child) #primary,
body:has(.entry-content > .eg-hero:first-child) .site-main,
body:has(.entry-content > .eg-hero:first-child) article.page,
body:has(.entry-content > .eg-hero:first-child) .entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* =====================================================================
   BOTONES — un solo formato para todo el sitio
   ===================================================================== */

.eg-btn,
.eg-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--eg-radio);
	font-family: var(--eg-f-texto);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s;
}

.eg-btn svg {
	flex: none;
	transition: transform .25s var(--eg-suave);
}

.eg-btn:hover svg {
	transform: translateX(4px);
}

.eg-btn-pri,
.eg-btn-pri:visited {
	background: var(--eg-naranja);
	color: #111 !important;
	box-shadow: 0 6px 18px -6px rgba(254, 112, 6, 0.55);
}

.eg-btn-pri:hover {
	background: var(--eg-naranja-claro);
	color: #111 !important;
}

.eg-btn-sec,
.eg-btn-sec:visited {
	background: rgba(255, 255, 255, 0.08);
	color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.eg-btn-sec:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff !important;
}

/* =====================================================================
   HEADER — fijo arriba al hacer scroll (sin Astra Pro)
   ===================================================================== */

#masthead {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Con la barra negra de WordPress (solo la ven los administradores) */
.admin-bar #masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #masthead {
		top: 46px;
	}
}

/* En celulares muy angostos WordPress no deja fija su barra: el header
   se pega arriba de todo. */
@media (max-width: 600px) {
	.admin-bar #masthead {
		top: 0;
	}
}

/* =====================================================================
   HEADER — fondo, línea inferior y altura
   ===================================================================== */

#masthead .ast-primary-header-bar,
#masthead .main-header-bar {
	background: rgba(26, 26, 31, 0.96) !important;
	background-image: none !important;
	border-bottom: 0 !important;
	box-shadow: 0 1px 0 var(--eg-linea);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

#masthead .ast-primary-header-bar {
	position: relative;
}

/* Línea naranja que se desvanece (a la izquierda, bajo la marca) */
#masthead .ast-primary-header-bar::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--eg-naranja) 0 18%, transparent 60%);
	pointer-events: none;
}

.ast-desktop #masthead .ast-primary-header-bar .site-primary-header-wrap {
	min-height: 80px;
}

/* =====================================================================
   MARCA — logo + "ESPACIO GAMER" / "ESPORTS LEAGUE"
   (en Astra: Título y logotipo → mostrar título y lema, en línea)
   ===================================================================== */

#masthead .ast-site-identity {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
}

#masthead .site-branding .ast-site-title-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1;
	white-space: nowrap;
}

#masthead .site-title,
#masthead .site-title a {
	margin: 0;
	font-family: var(--eg-f-titulo) !important;
	font-style: italic !important;
	font-stretch: 75%;
	font-variation-settings: "wdth" 75;
	font-size: 24px;
	font-weight: 900;
	line-height: .9;
	letter-spacing: .01em;
	text-transform: uppercase;
}

#masthead .site-title a,
#masthead .site-title a:hover,
#masthead .site-title a:visited {
	color: var(--eg-titulo) !important;
	text-decoration: none;
}

#masthead .site-description {
	margin: 2px 0 0;
	padding-left: 1px;
	font-family: var(--eg-f-texto) !important;
	font-size: 8.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--eg-texto-3) !important;
}

/* =====================================================================
   MENÚ PRINCIPAL (escritorio) + separadores
   ===================================================================== */

/* Separador: marca | menú */
.ast-desktop #masthead .ast-builder-menu-1 {
	margin-left: 18px;
	padding-left: 14px;
	border-left: 1px solid var(--eg-sep);
}

/* Separador: menú | cuenta (el bloque HTML 1 con [eg_boton_perfil]) */
.ast-desktop #masthead .ast-header-html-1 {
	margin-left: 16px;
	padding-left: 18px;
	border-left: 1px solid var(--eg-sep);
}

.ast-desktop #masthead .main-header-menu > .menu-item > .menu-link {
	position: relative;
	padding: 0 14px;
	font-family: var(--eg-f-texto) !important;
	font-size: 17px;
	font-weight: 600;
	color: var(--eg-texto-2);
	transition: color .2s;
}

.ast-desktop #masthead .main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 3px;
	border-radius: 2px 2px 0 0;
	background: var(--eg-naranja);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--eg-suave);
}

.ast-desktop #masthead .main-header-menu > .menu-item:hover > .menu-link,
.ast-desktop #masthead .main-header-menu > .menu-item.focus > .menu-link,
.ast-desktop #masthead .main-header-menu > .current-menu-item > .menu-link,
.ast-desktop #masthead .main-header-menu > .current-menu-ancestor > .menu-link {
	color: #fff;
}

.ast-desktop #masthead .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-desktop #masthead .main-header-menu > .menu-item.focus > .menu-link::after,
.ast-desktop #masthead .main-header-menu > .current-menu-item > .menu-link::after,
.ast-desktop #masthead .main-header-menu > .current-menu-ancestor > .menu-link::after {
	transform: scaleX(1);
}

/* Flechita de los ítems con submenú */
.ast-desktop #masthead .main-header-menu .dropdown-menu-toggle,
.ast-desktop #masthead .main-header-menu .ast-header-navigation-arrow {
	color: inherit;
}

/* Submenú desplegable */
.ast-desktop #masthead .main-header-menu .sub-menu {
	min-width: 230px;
	padding: 8px;
	background: var(--eg-card) !important;
	border: 0 !important;
	border-radius: 0 0 var(--eg-radio) var(--eg-radio);
	box-shadow: var(--eg-sombra-alta);
}

.ast-desktop #masthead .main-header-menu .sub-menu .menu-item .menu-link {
	padding: 12px 14px;
	border: 0 !important;
	border-radius: 6px;
	font-family: var(--eg-f-texto);
	font-size: 16px;
	font-weight: 600;
	color: var(--eg-texto) !important;
	background: transparent;
	transition: background .2s, color .2s;
}

.ast-desktop #masthead .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-desktop #masthead .main-header-menu .sub-menu .current-menu-item > .menu-link {
	background: rgba(255, 255, 255, 0.05);
	color: var(--eg-naranja) !important;
}

/* =====================================================================
   BOTÓN DE SESIÓN [eg_boton_perfil]
   ===================================================================== */

/* ---- Sin sesión: "Crear cuenta" | "Iniciar sesión" ---- */
.eg-sesion-inactiva.eg-boton-perfil-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
}

.eg-hdr-registro,
.eg-hdr-registro:visited {
	font-family: var(--eg-f-texto);
	font-size: 15px;
	font-weight: 600;
	color: var(--eg-texto-2) !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .2s;
}

.eg-hdr-registro:hover {
	color: #fff !important;
}

.eg-hdr-sep {
	flex: none;
	width: 1px;
	height: 22px;
	background: var(--eg-sep);
}

.eg-hdr-login,
.eg-hdr-login:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--eg-radio);
	background: var(--eg-naranja);
	box-shadow: 0 6px 18px -6px rgba(254, 112, 6, 0.55);
	color: #111 !important;
	font-family: var(--eg-f-texto);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .2s;
}

.eg-hdr-login:hover {
	background: var(--eg-naranja-claro);
	color: #111 !important;
}

.eg-hdr-login svg {
	flex: none;
}

.eg-hdr-login .eg-txt-corto {
	display: none;
}

/* ---- Con sesión: avatar + nombre + flecha (sin fondo) ---- */
.eg-sesion-activa .eg-btn-avatar-sesion,
.eg-sesion-activa .eg-btn-avatar-sesion:hover,
.eg-sesion-activa .eg-btn-avatar-sesion:focus {
	gap: 10px;
	height: 44px;
	padding: 0 4px !important;
	border: 0;
	border-radius: var(--eg-radio);
	background: transparent !important;
	color: var(--eg-texto);
}

.eg-sesion-activa .eg-avatar-mini-header {
	width: 36px;
	height: 36px;
	border: 0 !important;
}

.eg-sesion-activa .eg-avatar-mini-inicial {
	background: var(--eg-naranja);
	color: #111;
	font-family: var(--eg-f-texto);
	font-size: 13px;
	font-weight: 800;
}

.eg-sesion-activa .eg-punto-notificacion {
	border-color: var(--eg-fondo);
}

.eg-sesion-activa .eg-nombre-header {
	font-family: var(--eg-f-texto);
	font-size: 15px;
	font-weight: 600;
	color: var(--eg-texto);
	transition: color .2s;
}

.eg-sesion-activa .eg-flecha-desplegable {
	display: inline-flex;
	color: var(--eg-texto-2);
	opacity: 1;
	transition: color .2s, transform .2s;
}

.eg-sesion-activa .eg-btn-avatar-sesion:hover .eg-nombre-header,
.eg-sesion-activa .eg-btn-avatar-sesion:hover .eg-flecha-desplegable {
	color: var(--eg-naranja);
}

/* Desplegable de la cuenta */
.eg-boton-perfil-wrap .eg-menu-desplegable-sesion {
	top: calc(100% + 10px);
	min-width: 220px;
	padding: 8px;
	background: var(--eg-card);
	border: 0;
	border-radius: var(--eg-radio);
	box-shadow: var(--eg-sombra-alta);
}

.eg-boton-perfil-wrap .eg-menu-desplegable-sesion a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 6px;
	font-family: var(--eg-f-texto);
	font-size: 16px;
	color: var(--eg-texto) !important;
}

.eg-boton-perfil-wrap .eg-menu-desplegable-sesion a:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--eg-naranja) !important;
}

.eg-boton-perfil-wrap .eg-menu-desplegable-sesion .eg-menu-salir {
	margin-top: 6px;
	border-top: 1px solid var(--eg-linea);
	border-radius: 0 0 6px 6px;
	color: var(--eg-texto-2) !important;
}

/* =====================================================================
   LAPTOP CHICO: si el ancho no alcanza, se esconde "Crear cuenta" del
   header (sigue en el hero y en la página de login).
   ===================================================================== */

@media (max-width: 1180px) {
	.ast-desktop #masthead .main-header-menu > .menu-item > .menu-link {
		padding: 0 10px;
		font-size: 16px;
	}

	.ast-desktop #masthead .main-header-menu > .menu-item > .menu-link::after {
		left: 10px;
		right: 10px;
	}

	.ast-desktop .eg-hdr-registro,
	.ast-desktop .eg-sesion-inactiva .eg-hdr-sep {
		display: none;
	}
}

/* =====================================================================
   CELULAR / TABLET (header móvil de Astra)
   ===================================================================== */

.ast-header-break-point #masthead .site-title {
	font-size: 17px;
}

.ast-header-break-point #masthead .site-description {
	font-size: 7.5px;
}

.ast-header-break-point #masthead .ast-site-identity {
	gap: 9px;
}

/* En el header móvil: solo el botón compacto "Ingresar" */
.ast-header-break-point #masthead .ast-mobile-header-wrap .eg-hdr-registro,
.ast-header-break-point #masthead .ast-mobile-header-wrap .eg-hdr-sep {
	display: none;
}

.ast-header-break-point #masthead .ast-mobile-header-wrap .eg-hdr-login {
	min-height: 38px;
	padding: 0 12px;
	gap: 6px;
	font-size: 13px;
}

.ast-header-break-point .eg-hdr-login .eg-txt-corto {
	display: inline;
}

.ast-header-break-point .eg-hdr-login .eg-txt-largo {
	display: none;
}

/* Con sesión en celular: solo el avatar */
.ast-header-break-point #masthead .ast-mobile-header-wrap .eg-sesion-activa .eg-nombre-header,
.ast-header-break-point #masthead .ast-mobile-header-wrap .eg-sesion-activa .eg-flecha-desplegable {
	display: none;
}

/* Botón hamburguesa */
.ast-header-break-point #masthead .menu-toggle,
.ast-header-break-point #masthead .menu-toggle:hover,
.ast-header-break-point #masthead .menu-toggle:focus {
	background: transparent !important;
	border: 0 !important;
	color: #fff !important;
}

.ast-header-break-point #masthead .menu-toggle .ast-mobile-svg,
.ast-header-break-point #masthead .menu-toggle svg {
	fill: #fff !important;
}

/* ---- Menú móvil (tanto "desplegable" como "fuera del lienzo") ---- */
.ast-mobile-header-content,
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	background: var(--eg-fondo) !important;
}

.ast-mobile-header-content .main-header-menu,
.ast-mobile-popup-content .main-header-menu {
	background: transparent !important;
}

.ast-mobile-header-content .main-header-menu .menu-item .menu-link,
.ast-mobile-popup-content .main-header-menu .menu-item .menu-link {
	padding: 14px 20px !important;
	border: 0 !important;
	box-shadow: 0 1px 0 var(--eg-linea);
	background: transparent !important;
	font-family: var(--eg-f-titulo);
	font-style: italic;
	font-stretch: 75%;
	font-variation-settings: "wdth" 75;
	font-size: 24px;
	font-weight: 800;
	text-transform: uppercase;
	color: #fff !important;
}

.ast-mobile-header-content .main-header-menu .current-menu-item > .menu-link,
.ast-mobile-popup-content .main-header-menu .current-menu-item > .menu-link {
	color: var(--eg-naranja) !important;
}

/* Subpáginas dentro del menú móvil: más chicas y con sangría */
.ast-mobile-header-content .main-header-menu .sub-menu .menu-link,
.ast-mobile-popup-content .main-header-menu .sub-menu .menu-link {
	padding-left: 36px !important;
	font-family: var(--eg-f-texto);
	font-style: normal;
	font-stretch: 100%;
	font-variation-settings: normal;
	font-size: 17px;
	font-weight: 600;
	text-transform: none;
	color: var(--eg-texto-2) !important;
}

.ast-mobile-header-content .ast-menu-toggle,
.ast-mobile-popup-content .ast-menu-toggle {
	color: var(--eg-texto-2) !important;
	border: 0 !important;
}

.ast-mobile-popup-drawer .menu-toggle-close {
	color: #fff !important;
}

/* Botones de cuenta DENTRO del menú móvil (HTML 2 con [eg_boton_perfil]):
   uno bajo el otro, "Iniciar sesión" primero. */
.ast-mobile-header-content .eg-sesion-inactiva.eg-boton-perfil-wrap,
.ast-mobile-popup-content .eg-sesion-inactiva.eg-boton-perfil-wrap {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 18px 20px 8px;
}

.ast-mobile-header-content .eg-hdr-sep,
.ast-mobile-popup-content .eg-hdr-sep {
	display: none !important;
}

.ast-mobile-header-content .eg-hdr-login,
.ast-mobile-popup-content .eg-hdr-login {
	order: 1;
	min-height: 46px;
	font-size: 15px;
}

.ast-mobile-header-content .eg-hdr-login .eg-txt-corto,
.ast-mobile-popup-content .eg-hdr-login .eg-txt-corto {
	display: none;
}

.ast-mobile-header-content .eg-hdr-login .eg-txt-largo,
.ast-mobile-popup-content .eg-hdr-login .eg-txt-largo {
	display: inline;
}

.ast-mobile-header-content .eg-hdr-registro,
.ast-mobile-popup-content .eg-hdr-registro {
	order: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	border-radius: var(--eg-radio);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ast-mobile-header-content .eg-sesion-activa.eg-boton-perfil-wrap,
.ast-mobile-popup-content .eg-sesion-activa.eg-boton-perfil-wrap {
	padding: 14px 20px 8px;
}

/* Espacio arriba y abajo del header en celular (el botón no queda pegado) */
.ast-header-break-point #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.ast-header-break-point #masthead .ast-mobile-header-wrap .site-primary-header-wrap {
	min-height: 52px;
}

/* =====================================================================
   SECCIONES DEL INICIO — cabecera, chip, tarjeta base y carrusel
   (componentes compartidos: competencias, clubes, jugadores…)
   ===================================================================== */

.eg-sec {
	margin: 0 0 56px;
	font-family: var(--eg-f-texto);
	color: var(--eg-texto);
}

.eg-naranja {
	color: var(--eg-naranja);
}

.eg-sec-cab {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 22px;
}

.eg-sec-encabezado {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--eg-texto-3);
}

.eg-sec .eg-sec-titulo {
	margin: 8px 0 0;
	padding: 0;
	font-family: var(--eg-f-titulo);
	font-style: italic;
	font-stretch: 75%;
	font-variation-settings: "wdth" 75;
	font-size: 32px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	color: var(--eg-titulo);
}

.eg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.07);
	font-family: var(--eg-f-texto);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--eg-texto-2);
	white-space: nowrap;
}

.eg-sec *,
.eg-sec *::before,
.eg-sec *::after,
.eg-btn {
	box-sizing: border-box;
}

/* Link "Ver todas…" a la derecha de la cabecera de sección */
.eg-link-mas,
.eg-link-mas:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-family: var(--eg-f-texto);
	font-size: 16px;
	font-weight: 600;
	color: var(--eg-texto-2) !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .2s;
}

.eg-link-mas svg {
	transition: transform .25s var(--eg-suave);
}

.eg-link-mas:hover {
	color: var(--eg-naranja) !important;
}

.eg-link-mas:hover svg {
	transform: translateX(4px);
}

/* Tarjeta base: flota con sombra, esquina naranja, sube al pasar el mouse */
.eg-card {
	position: relative;
	overflow: hidden;
	background: var(--eg-card);
	border-radius: var(--eg-radio);
	box-shadow: var(--eg-sombra);
	transition: transform .25s var(--eg-suave), box-shadow .25s, background .25s;
}

.eg-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 12px;
	height: 12px;
	background: var(--eg-naranja);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.eg-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 3px;
	background: var(--eg-naranja);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--eg-suave);
}

.eg-card:hover {
	transform: translateY(-4px);
	background: var(--eg-card-hover);
	box-shadow: var(--eg-sombra-alta);
}

.eg-card:hover::after {
	transform: scaleX(1);
}

/* Botón dentro de tarjeta (ancho completo, naranja suave) */
.eg-btn-card,
.eg-btn-card:visited {
	width: 100%;
	min-height: 44px;
	padding: 0 16px;
	font-size: 14px;
	background: var(--eg-naranja-suave);
	color: var(--eg-naranja) !important;
	box-shadow: none;
}

.eg-btn-card:hover {
	background: var(--eg-naranja);
	color: #111 !important;
}

/* ---- Carrusel: celular = deslizar · tablet = 2 · PC = 3 a la vez ---- */
.eg-carrusel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 86%;
	gap: 14px;
	margin: -12px 0 0;
	padding: 12px 0 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.eg-carrusel::-webkit-scrollbar {
	display: none;
}

.eg-carrusel > * {
	scroll-snap-align: start;
}

.eg-carrusel:focus-visible {
	outline: 2px solid var(--eg-naranja);
	outline-offset: 4px;
}

.eg-car-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 46px;
}

.eg-car-puntos {
	display: flex;
	gap: 6px;
}

.eg-car-puntos span {
	width: 14px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.22);
	transition: width .3s var(--eg-suave), background .3s;
}

.eg-car-puntos span.activo {
	width: 28px;
	background: var(--eg-naranja);
}

.eg-car-flechas {
	display: none;
	gap: 8px;
}

.eg-car-flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--eg-radio);
	background: var(--eg-card);
	color: #fff;
	box-shadow: var(--eg-sombra);
	cursor: pointer;
	transition: background .2s, color .2s, opacity .2s;
}

.eg-car-flecha:hover {
	background: var(--eg-naranja);
	color: #111;
}

.eg-car-flecha:disabled {
	opacity: .35;
	cursor: default;
	background: var(--eg-card);
	color: #fff;
}

.eg-car-sin-scroll .eg-car-puntos,
.eg-car-sin-scroll .eg-car-flechas {
	visibility: hidden;
}

@media (min-width: 768px) {
	.eg-sec {
		margin-bottom: 72px;
	}

	.eg-sec .eg-sec-titulo {
		font-size: 44px;
	}

	.eg-sec-cab {
		margin-bottom: 28px;
	}

	.eg-carrusel {
		grid-auto-columns: calc((100% - 20px) / 2);
		gap: 20px;
	}

	.eg-car-flechas {
		display: flex;
	}
}

@media (min-width: 1100px) {
	.eg-carrusel {
		grid-auto-columns: calc((100% - 40px) / 3);
	}
}

/* =====================================================================
   COMPETENCIAS [eg_inicio_divisiones]
   ===================================================================== */

.eg-comp {
	display: flex;
	flex-direction: column;
}

.eg-comp-top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	background: radial-gradient(60% 80% at 50% 100%, rgba(254, 112, 6, 0.16), transparent 70%), var(--eg-card-in);
	text-decoration: none !important;
}

.eg-comp-top .eg-chip {
	position: absolute;
	top: 14px;
	left: 18px;
}

.eg-comp-top img {
	width: 92px;
	height: 92px;
	object-fit: contain;
	transition: transform .35s var(--eg-suave);
}

.eg-comp:hover .eg-comp-top img {
	transform: scale(1.06);
}

.eg-comp-inicial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: var(--eg-radio);
	background: var(--eg-naranja);
	color: #111;
	font-family: var(--eg-f-titulo);
	font-style: italic;
	font-size: 40px;
	font-weight: 900;
}

.eg-comp-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	padding: 18px 20px 20px;
}

.eg-comp .eg-comp-nombre {
	margin: 0;
	padding: 0;
	font-family: var(--eg-f-titulo);
	font-style: italic;
	font-stretch: 75%;
	font-variation-settings: "wdth" 75;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
}

.eg-comp-nombre a,
.eg-comp-nombre a:visited {
	color: var(--eg-titulo) !important;
	text-decoration: none !important;
}

.eg-comp-nombre a:hover {
	color: var(--eg-naranja) !important;
}

.eg-comp-sub {
	margin-top: 6px;
	font-size: 15px;
	color: var(--eg-texto-2);
}

.eg-comp-punto {
	margin: 0 6px;
	color: var(--eg-texto-3);
}

.eg-comp-prog-fila {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	color: var(--eg-texto-2);
}

.eg-comp-prog-fila b {
	color: var(--eg-texto);
	font-variant-numeric: tabular-nums;
}

.eg-comp-barra {
	height: 4px;
	margin-top: 8px;
	border-radius: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

.eg-comp-barra i {
	display: block;
	height: 100%;
	border-radius: 2px;
	background: var(--eg-naranja);
}

.eg-comp-pie {
	display: grid;
	gap: 12px;
	margin-top: auto;
}

.eg-comp-estado {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--eg-texto-3);
}

.eg-comp-estado::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--eg-texto-3);
}

.eg-comp-activa .eg-comp-estado {
	color: var(--eg-naranja);
}

.eg-comp-activa .eg-comp-estado::before {
	background: var(--eg-naranja);
	box-shadow: 0 0 0 0 rgba(254, 112, 6, 0.6);
	animation: eg-pulso 1.8s infinite;
}

@keyframes eg-pulso {
	0% { box-shadow: 0 0 0 0 rgba(254, 112, 6, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(254, 112, 6, 0); }
	100% { box-shadow: 0 0 0 0 rgba(254, 112, 6, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.eg-card,
	.eg-card::after,
	.eg-carrusel {
		transition: none;
		scroll-behavior: auto;
	}

	.eg-comp-activa .eg-comp-estado::before {
		animation: none;
	}
}

/* =====================================================================
   LOGIN — "¿No tienes cuenta? Regístrate aquí"
   ===================================================================== */

.eg-link-crear-cuenta {
	margin: 14px 0 0;
	text-align: center;
	font-size: 15px;
	color: var(--eg-texto-2);
}

.eg-link-crear-cuenta a {
	font-weight: 700;
	color: var(--eg-naranja) !important;
	text-decoration: none !important;
}

.eg-link-crear-cuenta a:hover {
	text-decoration: underline !important;
}

@media (prefers-reduced-motion: reduce) {
	#masthead *,
	#masthead *::before,
	#masthead *::after {
		transition: none !important;
	}
}