/* =========================================================================
   Cabecera del hijo (propuesta D): cinta de versiones + dos filas.
   Usa los colores del tema (--sk-*), así se adapta a cualquier paleta.
   ========================================================================= */

/* ---- Cinta de versiones ---- */

.mgpl-top {
	background: var(--sk-band-bg);
	color: var(--sk-band-muted, var(--sk-on-band));
	font-size: 13px;
	line-height: 1.2;
}

.mgpl-top-in {
	display: flex;
	align-items: center;
	gap: 0;
	height: 40px;
	min-width: 0;
}

.mgpl-top a {
	text-decoration: none;
}

.mgpl-top-lab {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding-inline-end: 18px;
	border-inline-end: 1px solid var(--sk-band-line, rgba(255, 255, 255, .12));
	color: var(--sk-on-band);
	font-weight: 700;
	white-space: nowrap;
}

.mgpl-top-lab:hover {
	color: var(--sk-on-band);
}

.mgpl-top-dot {
	position: relative;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3ddc84;
}

.mgpl-top-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border: 2px solid #3ddc84;
	border-radius: 50%;
	opacity: 0;
	animation: sk-ring 2s ease-out infinite;
}

.mgpl-tk {
	flex: 1;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.mgpl-tk-in {
	display: flex;
	width: max-content;
	height: 100%;
	animation: mgpl-tk calc(var(--mgpl-tk-n, 10) * 4.5s) linear infinite;
}

.mgpl-tk:hover .mgpl-tk-in,
.mgpl-tk:focus-within .mgpl-tk-in {
	animation-play-state: paused;
}

.mgpl-tk-g {
	display: flex;
	align-items: center;
	gap: 36px;
	padding-inline: 24px 12px;
}

.mgpl-tk-i {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	white-space: nowrap;
	color: var(--sk-band-muted, var(--sk-on-band));
}

.mgpl-tk-i b {
	color: var(--sk-on-band);
	font-weight: 600;
}

.mgpl-tk-i em {
	color: var(--sk-secondary);
	font-style: normal;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.mgpl-tk-i:hover b {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@keyframes mgpl-tk {
	to {
		transform: translateX(-50%);
	}
}

.mgpl-top-r {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-inline-start: 14px;
}

.mgpl-top-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 1px solid color-mix(in srgb, var(--sk-on-band) 30%, transparent);
	border-radius: 999px;
	color: var(--sk-on-band);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s, border-color .2s;
}

.mgpl-top-btn:hover {
	border-color: color-mix(in srgb, var(--sk-on-band) 60%, transparent);
	background: color-mix(in srgb, var(--sk-on-band) 10%, transparent);
	color: var(--sk-on-band);
}

.mgpl-top-btn .sk-i {
	width: 13px;
	height: 13px;
}

.mgpl-top :focus-visible {
	outline-color: var(--sk-on-band);
}

/* ---- Cabecera: dos filas ---- */

.mgpl-hdr {
	box-shadow: 0 1px 0 var(--sk-line), 0 10px 30px -24px rgba(16, 24, 40, .35);
}

.mgpl-r1 {
	display: flex;
	align-items: center;
	gap: 22px;
	min-height: 78px;
	padding-block: 14px;
}

.mgpl-r1 .sk-brand {
	flex: none;
}

/* Búsqueda larga */
.mgpl-search {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding-block: 0;
	padding-inline: 18px 6px;
	border: 1px solid var(--sk-line);
	border-radius: 999px;
	background: var(--sk-surface);
	color: var(--sk-muted);
	font: inherit;
	font-size: 15px;
	text-align: start;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
}

.mgpl-search:hover {
	border-color: color-mix(in srgb, var(--sk-primary) 45%, var(--sk-line));
	box-shadow: 0 0 0 4px var(--sk-primary-soft);
}

.mgpl-search > .sk-i {
	flex: none;
	width: 18px;
	height: 18px;
}

.mgpl-search-t {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mgpl-search .sk-kbd {
	flex: none;
	background: var(--sk-bg);
}

.mgpl-search-go {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sk-primary);
	color: var(--sk-on-primary);
}

.mgpl-search-go .sk-i {
	width: 18px;
	height: 18px;
}

/* Botones redondos */
.mgpl-acts {
	flex: none;
	display: flex;
	align-items: center;
	gap: 16px;
}

.mgpl-act {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--sk-text);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

.mgpl-act:hover {
	color: var(--sk-text);
}

.mgpl-ring {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--sk-primary-soft);
	color: var(--sk-primary);
	transition: background .2s, color .2s, transform .2s;
}

.mgpl-ring .sk-i {
	width: 20px;
	height: 20px;
}

.mgpl-act:hover .mgpl-ring {
	background: color-mix(in srgb, var(--sk-primary) 18%, var(--sk-bg));
}

.mgpl-ring--fill {
	background: var(--sk-primary);
	color: var(--sk-on-primary);
}

.mgpl-act:hover .mgpl-ring--fill {
	background: var(--sk-primary-hover, var(--sk-primary));
}

/* el punto del carrito (lo enciende el tema cuando hay algo en el carrito) */
.mgpl-ring .mgpl-dot {
	top: -1px;
	inset-inline-end: -1px;
	width: 12px;
	height: 12px;
	border: 2px solid var(--sk-bg);
	background: #e5484d;
}

.mgpl-who.sk-hdr-who > * {
	justify-content: flex-start;
}

.mgpl-join {
	flex: none;
	min-height: 44px;
	padding-inline: 20px;
	border-radius: 999px;
	box-shadow: 0 10px 20px -14px var(--sk-primary);
}

html[data-sk-in] .mgpl-join {
	display: none; /* los clientes ya tienen plan */
}

/* el botón del menú del celular, redondo; solo hasta 1080 px (en escritorio el menú está en la fila 2) */
.mgpl-r1 .mgpl-menu-btn {
	display: none;
}

@media (max-width: 1080px) {
	.mgpl-r1 .mgpl-menu-btn {
		display: inline-flex;
	}
}

.mgpl-r1 .sk-menu-btn {
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--sk-surface);
	color: var(--sk-text);
}

/* Fila 2: el menú */
.mgpl-r2 {
	border-top: 1px solid var(--sk-line);
}

.mgpl-r2 .sk-hdr-in {
	height: 52px;
	gap: 8px;
}

.mgpl-r2 .sk-nav {
	flex: 1 1 auto;
}

.mgpl-r2 .sk-menu-a,
.mgpl-r2 .sk-more-btn {
	min-height: 38px;
	padding-inline: 14px;
	border-radius: 10px;
	font-size: 14.5px;
}

.mgpl-xs {
	flex: none;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: auto;
}

.mgpl-x {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 12px;
	border-radius: 10px;
	color: var(--sk-muted);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.mgpl-x:hover {
	background: var(--sk-surface);
	color: var(--sk-text);
}

.mgpl-x .sk-i {
	width: 17px;
	height: 17px;
}

.mgpl-x-n {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--sk-primary);
	color: var(--sk-on-primary);
	font-size: 11.5px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---- Mega menú (los paneles del tema, con otra terminación) ---- */

@media (min-width: 1081px) {
	.mgpl-r2 [data-sk-mi] > .sk-menu-a {
		border-start-end-radius: 0;
		border-end-end-radius: 0;
	}

	.mgpl-r2 [data-sk-mi] > .sk-menu-sub {
		height: 38px;
		border-start-end-radius: 10px;
		border-end-end-radius: 10px;
	}

	.mgpl-r2 .sk-menu-i[data-open] > .sk-menu-a,
	.mgpl-r2 .sk-menu-i[data-open] > .sk-menu-sub {
		background: var(--sk-primary-soft);
		color: var(--sk-primary);
	}

	.mgpl-r2 .sk-menu-drop,
	.mgpl-r2 .sk-menu-panel {
		top: calc(100% - 2px);
		border-color: var(--sk-line);
		border-radius: calc(18px * var(--sko-rk, 1));
		box-shadow: 0 40px 70px -40px rgba(16, 40, 30, .5), 0 2px 6px rgba(16, 24, 40, .05);
	}

	.mgpl-r2 .sk-menu-panel {
		gap: 0;
		padding: 0;
		overflow: hidden;
	}

	.mgpl-r2 .sk-menu-panel > * {
		padding: 22px 24px;
	}

	.mgpl-r2 .sk-menu-tile {
		margin: 18px 0 18px 18px;
		padding: 14px;
		background: var(--sk-surface);
	}

	.mgpl-r2 .sk-menu-main {
		padding-inline: 18px;
	}

	.mgpl-r2 .sk-menu-devs {
		flex-basis: 260px;
		background: var(--sk-band-bg);
		color: var(--sk-on-band);
	}

	.mgpl-r2 .sk-menu-devs .sk-menu-h {
		color: var(--sk-secondary);
	}

	.mgpl-r2 .sk-menu-devs .sk-chip {
		border-color: var(--sk-band-line, rgba(255, 255, 255, .15));
		background: transparent;
		color: var(--sk-on-band);
	}

	.mgpl-r2 .sk-menu-devs .sk-chip:hover {
		border-color: color-mix(in srgb, var(--sk-on-band) 50%, transparent);
		background: color-mix(in srgb, var(--sk-on-band) 8%, transparent);
	}

	.mgpl-r2 .sk-menu-all {
		color: var(--sk-on-band);
	}

	.mgpl-r2 .sk-menu-h {
		letter-spacing: .12em;
		font-size: 11.5px;
	}

	.mgpl-r2 .sk-menu-subs a {
		min-height: 42px;
		border-radius: 10px;
	}

	.mgpl-r2 .sk-menu-view {
		font-weight: 700;
	}
}

/* ---- Hasta 1080 px: el menú es el panel lateral del tema; la fila 2 no ocupa lugar ---- */

@media (max-width: 1080px) {
	.mgpl-r2 {
		border-top: 0;
	}

	.mgpl-r2 .sk-hdr-in {
		height: 0;
	}

	.mgpl-xs,
	.mgpl-act-help,
	.mgpl-act-t {
		display: none;
	}

	.mgpl-acts {
		gap: 8px;
	}

	.mgpl-r1 {
		gap: 14px;
	}
}

/* ---- Celular: búsqueda debajo del logo, a todo el ancho ---- */

@media (max-width: 760px) {
	.mgpl-top-r {
		display: none;
	}

	.mgpl-top-lab {
		padding-inline-end: 12px;
	}

	.mgpl-top-lab span:last-child {
		display: none; /* en el celular queda solo el punto verde y las versiones pasando */
	}

	.mgpl-r1 {
		flex-wrap: wrap;
		gap: 10px;
		min-height: 0;
		padding-block: 10px 12px;
	}

	.mgpl-r1 .sk-brand {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mgpl-search {
		order: 10;
		flex: 1 1 100%;
		height: 44px;
		font-size: 14px;
	}

	.mgpl-search .sk-kbd,
	.mgpl-search-go {
		display: none;
	}

	.mgpl-join {
		display: none;
	}

	.mgpl-ring,
	.mgpl-r1 .sk-menu-btn {
		width: 40px;
		height: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mgpl-tk-in {
		animation: none;
	}

	.mgpl-tk {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.mgpl-tk-g[aria-hidden="true"] {
		display: none;
	}

	.mgpl-top-dot::after {
		display: none;
	}

	.mgpl-search,
	.mgpl-ring,
	.mgpl-top-btn {
		transition: none;
	}
}

/* ---- Logo ---- */

.mgpl-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	color: var(--sk-text);
	text-decoration: none;
}

.mgpl-logo:hover {
	color: var(--sk-text);
}

.mgpl-logo-mk {
	flex: none;
	width: 44px;
	height: 44px;
}

.mgpl-logo-b {
	fill: var(--sk-primary);
}

.mgpl-logo-c {
	fill: none;
	stroke: var(--sk-on-primary, #fff);
	stroke-width: 3.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mgpl-logo-w {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.mgpl-logo-nm {
	display: block;
	width: auto;
	height: 24px;
}

.mgpl-logo-n {
	fill: currentColor;
}

.mgpl-logo-g {
	fill: var(--sk-primary);
}

.mgpl-logo-tag {
	color: var(--sk-muted);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .2em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* en el menú lateral del celular, un poco más chico */
.sk-nav-head .mgpl-logo-mk {
	width: 34px;
	height: 34px;
}

.sk-nav-head .mgpl-logo-nm {
	height: 19px;
}

@media (max-width: 760px) {
	.mgpl-logo {
		gap: 9px;
	}

	.mgpl-logo-mk {
		width: 36px;
		height: 36px;
	}

	.mgpl-logo-nm {
		height: 20px;
	}

	.mgpl-logo-tag {
		font-size: 8px;
		letter-spacing: .16em;
	}
}

@media (max-width: 380px) {
	.mgpl-logo-tag {
		display: none;
	}
}

/* El carrito solo se ve cuando tiene algo (el tema pone data-sk-cart en <html>). Sin JavaScript se ve siempre. */
html[data-sk-js]:not([data-sk-cart]) .mgpl-act-cart:not(.mgpl-act-cart--always) {
	display: none;
}

/* ---- Cabecera que se esconde al bajar y vuelve al subir (mgpl-header.js) ---- */

.mgpl-hdr {
	transition: transform .28s ease, box-shadow .28s ease;
	will-change: transform;
}

html.mgpl-hdr-hidden .mgpl-hdr {
	transform: translateY(calc(-100% - 50px)); /* también por debajo de la barra de administración */
	box-shadow: none;
}

/* Lo que se pega debajo de la cabecera (la caja de compra y las pestañas del producto) sube con ella */
html.mgpl-hdr-hidden {
	--hdr-h: 0px !important;
}

@media (prefers-reduced-motion: reduce) {
	.mgpl-hdr {
		transition: none;
	}
}