.mcj-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99990;
	box-sizing: border-box;
	background: linear-gradient(135deg, var(--mcj-header-bg-start, #fff), var(--mcj-header-bg-end, #eee));
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	transition: top .4s cubic-bezier(.4,0,.2,1), left .4s cubic-bezier(.4,0,.2,1), right .4s cubic-bezier(.4,0,.2,1), border-radius .4s ease, box-shadow .3s ease, max-width .4s ease;
}

/* Modo píldora: flotando, separada de los bordes, redondeada — solo
   mientras el usuario no haya hecho scroll (ver .is-scrolled más abajo,
   agregado/quitado por JS). El top bar de cotizaciones (si está
   activo) NO es fixed — ocupa espacio normal arriba de todo — así que
   sumamos su alto real (medido por JS) para que la píldora empiece
   justo debajo de él, nunca encima. */
.mcj-header--pill:not(.is-scrolled) {
	top: calc(var(--mcj-header-margin, 16px) + var(--mcj-header-topbar-h, 0px));
	left: max(var(--mcj-header-margin, 16px), calc(50% - 620px));
	right: max(var(--mcj-header-margin, 16px), calc(50% - 620px));
	border-radius: 999px;
}

/* Al hacer scroll (o si la píldora está desactivada en el widget):
   header normal, ancho completo, pegado arriba. */
.mcj-header.is-scrolled,
.mcj-header--plain {
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
	box-shadow: 0 4px 22px rgba(0,0,0,0.12);
}

.mcj-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 12px 28px;
}

.mcj-header__brand { display: flex; align-items: center; flex-shrink: 0; }
.mcj-header__brand img { display: block; width: auto; }
.mcj-header__brand-text {
	font-weight: 800;
	font-size: 18px;
	color: var(--mcj-header-text, #132720);
	white-space: nowrap;
}

.mcj-header__nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.mcj-header__no-menu { font-size: 13px; opacity: .6; color: var(--mcj-header-text); }

/* Cuando se elige un menú distinto para móvil, se imprimen los dos y
   aquí se decide cuál se ve según el ancho de pantalla. Si solo hay un
   menú, no lleva ninguna de estas dos clases y se muestra siempre. */
.mcj-header__menu--movil { display: none; }

/* El logo y las redes sociales de acá abajo son SOLO para el panel
   desplegable móvil — en escritorio el <nav> se ve como el menú
   horizontal normal, sin ellos (el media query más abajo los vuelve a
   mostrar en pantallas angostas). */
.mcj-header__nav-logo,
.mcj-header__nav-social,
.mcj-header__nav-close {
	display: none;
}

.mcj-header__menu {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mcj-header__menu li { position: relative; }
.mcj-header__menu a {
	display: inline-block;
	color: var(--mcj-header-text, #132720);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	transition: color .2s ease;
}
.mcj-header__menu > li > a { padding: 8px 0; }
.mcj-header__menu a:hover,
.mcj-header__menu .current-menu-item > a { color: var(--mcj-header-accent, #26C48C); }
.mcj-header__menu .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px; height: 6px;
	margin-left: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: .6;
}

.mcj-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 16px 38px rgba(0,0,0,0.14);
	padding: 8px;
	margin: 6px 0 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 10;
}
.mcj-header__menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mcj-header__menu .sub-menu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; }
.mcj-header__menu .sub-menu a:hover { background: rgba(38,196,140,0.08); }

.mcj-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.mcj-header__contact {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	background: rgba(19,39,32,0.06);
	color: var(--mcj-header-text, #132720);
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
}
.mcj-header__contact i,
.mcj-header__contact svg { color: var(--mcj-header-accent, #26C48C); font-size: 13px; width: 13px; height: 13px; }

.mcj-header__btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--mcj-header-accent, #26C48C);
	color: #fff !important;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none !important;
	white-space: nowrap;
	transition: filter .2s ease, transform .15s ease;
}
.mcj-header__btn:hover { filter: brightness(0.92); transform: translateY(-1px); }

.mcj-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}
.mcj-header__toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--mcj-header-text, #132720);
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease, width .2s ease;
}
.mcj-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 100%; }
.mcj-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mcj-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 100%; }

.mcj-header__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(8,21,17,0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 99985;
}
.mcj-header__backdrop.is-visible { opacity: 1; visibility: visible; }

@media (max-width: 992px) {
	.mcj-header--pill:not(.is-scrolled) {
		left: 10px;
		right: 10px;
		top: calc(10px + var(--mcj-header-topbar-h, 0px));
	}
	.mcj-header__inner { padding: 10px 16px; gap: 10px; }

	/* El botón "Panel Divisas" (o el que hayas puesto) se oculta en la
	   barra móvil por defecto — con logo + botón + hamburguesa a la vez
	   no cabe bien en una píldora angosta. Actívalo desde el widget
	   ("Mostrar también en la barra móvil") si de verdad lo necesitas
	   ahí; siempre puedes dejar el enlace dentro del menú desplegable. */
	.mcj-header__btn { display: none; }
	.mcj-header--btn-mobile .mcj-header__btn {
		display: inline-flex;
		padding: 8px 14px;
		font-size: 12px;
	}

	.mcj-header__nav {
		position: fixed;
		top: 0;
		right: -100%;
		width: min(320px, 86vw);
		height: 100vh;
		height: 100dvh; /* respeta la barra inferior dinámica de algunos navegadores móviles */
		background: #fff;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 22px 26px calc(26px + env(safe-area-inset-bottom, 0px));
		box-sizing: border-box;
		box-shadow: -12px 0 40px rgba(0,0,0,0.18);
		transition: right .35s cubic-bezier(.4,0,.2,1);
		z-index: 99991;
		overflow-y: auto;
	}
	.mcj-header__nav.is-open { right: 0; }

	.mcj-header__menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
	.mcj-header__menu--escritorio { display: none; }
	.mcj-header__menu--movil { display: flex; }
	.mcj-header__menu > li { width: 100%; }
	.mcj-header__menu a { padding: 13px 4px; width: 100%; border-bottom: 1px solid rgba(19,39,32,0.06); }
	.mcj-header__menu .menu-item-has-children > a::after { float: right; margin-top: 6px; }

	.mcj-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: rgba(19,39,32,0.03);
		padding: 4px 4px 4px 16px;
		margin: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}
	.mcj-header__menu li.is-open > .sub-menu { max-height: 600px; }

	.mcj-header__contact { display: none; }
	.mcj-header__toggle { display: flex; }

	.mcj-header__nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: flex-end;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: rgba(19,39,32,0.06);
		border: none;
		cursor: pointer;
		padding: 0;
		margin-bottom: 18px;
		color: var(--mcj-header-text, #132720);
		flex-shrink: 0;
		transition: background .2s ease;
	}
	.mcj-header__nav-close:hover { background: rgba(19,39,32,0.12); }
	.mcj-header__nav-close svg { width: 16px; height: 16px; }

	.mcj-header__nav-logo {
		display: flex;
		align-items: center;
		margin-bottom: 26px;
		padding-bottom: 20px;
		border-bottom: 1px solid rgba(19,39,32,0.08);
	}
	.mcj-header__nav-logo img { height: 32px; width: auto; display: block; }

	.mcj-header__nav-social {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: auto;
		padding-top: 20px;
		border-top: 1px solid rgba(19,39,32,0.08);
	}
	.mcj-header__nav-social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: rgba(38,196,140,0.1);
		color: var(--mcj-header-accent, #26C48C);
		transition: background .2s ease, color .2s ease;
	}
	.mcj-header__nav-social a svg {
		width: 17px;
		height: 17px;
		flex-shrink: 0;
	}
	.mcj-header__nav-social a:hover {
		background: var(--mcj-header-accent, #26C48C);
		color: #fff;
	}
}

@media (max-width: 480px) {
	.mcj-header__brand-text { font-size: 15px; }
	.mcj-header__btn { padding: 9px 16px; font-size: 12.5px; }
}