/* ============================================
   BARRA PRINCIPAL DEL HEADER
   Marcado: header.php · Botón "Equipos": template-parts/megamenu.php
   (el panel del megamenú se estiliza en css/megamenu.css)
   ============================================ */

.cbp-hrmenu {
	width: 100%;
}

.cbp-hrmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.cbp-hrmenu > ul {
	width: 90%;
	max-width: 70em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
	display: inline-block;
}

/* Links y botón "Equipos" comparten el mismo estilo. */
.cbp-hrmenu > ul > li > a,
.cbp-hrmenu > ul > li > .sl-mm__trigger {
	display: inline-block;
	padding: 1em 1.2em;
	font-family: var(--font-legacy); /* la barra mantiene Kanit, como el resto del sitio legacy */
	font-size: var(--text-body-lg);
	font-weight: 400; /* regular: el peso del texto de cuerpo del sistema (no tiene token propio) */
	line-height: 1.5;
	color: var(--color-primary);
	transition: color var(--transition-base);
}

.cbp-hrmenu > ul > li > a:hover {
	color: var(--color-primary);
	border-bottom: none;
}

/* Desktop: la barra nunca se parte en dos líneas. Los ítems no envuelven
   y el padding se achica con el ancho de la pantalla. */
@media screen and (min-width: 769px) {

	nav {
		flex: 1;
		min-width: 0;
		margin-left: 0;
	}

	.cbp-hrmenu > ul {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		max-width: none;
		padding: 0 var(--spacing-sm);
	}

	.cbp-hrmenu > ul > li {
		flex: none;
	}

	.cbp-hrmenu > ul > li > a,
	.cbp-hrmenu > ul > li > .sl-mm__trigger {
		padding-left: clamp(var(--spacing-xs), 1.1vw, 1.2em);
		padding-right: clamp(var(--spacing-xs), 1.1vw, 1.2em);
		white-space: nowrap;
	}

}

/* Desktop angosto (tablet horizontal, notebooks chicas). */
@media screen and (min-width: 769px) and (max-width: 1100px) {

	.area-nav {
		width: 100%;
	}

	.logo {
		width: 200px;
	}

	.cbp-hrmenu > ul > li > a,
	.cbp-hrmenu > ul > li > .sl-mm__trigger {
		font-size: var(--text-body);
	}

}

/* Elementos del menú mobile: no se ven en desktop. */
.sl-mnav__toggle,
.sl-mnav__wa,
.sl-mnav {
	display: none;
}

/* ============================================
   MOBILE (≤768px, mismo corte que el megamenú) — patrón cat.com
   Barra única: ☰ · logo · WhatsApp. El ☰ abre la hoja del nivel 1
   (template-parts/menu-mobile.php); "Equipos" abre el megamenú como
   nivel 2. Con initial-scale=0.6 (header.php) todo se ve al 60%:
   los px de acá están calculados para los tamaños reales indicados.
   ============================================ */
@media screen and (max-width: 768px) {

	/* La franja de contacto se mueve adentro del menú (nivel 1). */
	.informacion {
		display: none;
	}

	header {
		height: auto;
		margin-top: 0;
		z-index: 1001;
		position: relative;
	}

	html.sl-mnav-open header {
		z-index: 9100 !important;
		opacity: 1 !important;
	}

	html.sl-mnav-open,
	html.sl-mnav-open body {
		overflow: hidden;
	}

	/* Barra: ~72px reales de alto. */
	.area-nav {
		width: 100%;
		height: 120px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 4px;
	}

	.area-nav > a:not(.sl-mnav__wa) { /* link del logo */
		flex: 1;
		display: flex;
		justify-content: center;
	}

	/* Logo: ~36px reales de alto (antes 60px y todo el ancho). */
	.logo {
		width: 310px;
		height: 60px;
		margin: 0;
	}

	/* La barra de links de desktop no se ve; su contenedor queda para que
	   el panel del megamenú (position: fixed) siga funcionando. */
	.menu {
		position: absolute;
		width: 0;
		height: 0;
		background: none;
	}

	.cbp-hrmenu > ul > li > a {
		display: none; /* el botón "Equipos" lo oculta css/megamenu.css */
	}

	/* ☰ y WhatsApp: ícono de ~24px en área de ~48px reales. */
	.sl-mnav__toggle,
	.sl-mnav__wa {
		display: grid;
		place-items: center;
		flex: none;
		width: 80px;
		height: 80px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--color-white);
		cursor: pointer;
	}

	.sl-mnav__toggle svg {
		width: calc(var(--icon-size) / .6);
		height: calc(var(--icon-size) / .6);
	}

	.sl-mnav__toggle .sl-mnav__icon-close,
	.sl-mnav__toggle[aria-expanded="true"] .sl-mnav__icon-open {
		display: none;
	}

	.sl-mnav__toggle[aria-expanded="true"] .sl-mnav__icon-close {
		display: block;
	}

	.sl-mnav__wa {
		font-size: calc(var(--icon-size) / .6);
		text-decoration: none;
	}

	/* Bootstrap 3 marca todo :focus (recuadro + subrayado), también al tocar:
	   el anillo de foco queda solo para teclado. */
	.sl-mnav a:focus:not(:focus-visible),
	.sl-mnav button:focus:not(:focus-visible),
	.sl-mnav__toggle:focus:not(:focus-visible),
	.sl-mnav__wa:focus:not(:focus-visible) {
		outline: none;
		text-decoration: none;
	}

	.sl-mnav__toggle:focus-visible,
	.sl-mnav__wa:focus-visible,
	.sl-mnav a:focus-visible,
	.sl-mnav button:focus-visible {
		outline: 2px solid var(--color-safety);
		outline-offset: -4px;
	}

	/* ---------- Nivel 1: hoja debajo de la barra ---------- */
	.sl-mnav {
		position: fixed;
		z-index: 50; /* debajo del panel del megamenú (nivel 2, z-index 100) */
		left: 0;
		right: 0;
		top: var(--sl-mnav-top, 0px);
		bottom: 0;
		display: block;
		overflow-y: auto;
		background: var(--color-white);
		text-align: left;
	}

	.sl-mnav[hidden] {
		display: none;
	}

	.sl-mnav,
	.sl-mnav *:not([class^="fa"]):not([class*=" fa"]) {
		font-family: var(--font-primary);
	}

	.sl-mnav__nav {
		margin: 0; /* anula `nav { margin-left: 100px }` de style.css */
	}

	.sl-mnav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Anula `nav a { padding; text-align: center }` de style.css / arriba. */
	.sl-mnav a {
		padding: 0;
		text-align: left;
		text-decoration: none;
	}

	.sl-mnav .sl-mnav__item {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 92px; /* ≈ 55px reales */
		padding: 0 28px;
		background: none;
		border: 0;
		font-size: 22px; /* ≈ 13px reales */
		font-weight: 600;
		text-align: left;
		color: var(--color-primary);
		cursor: pointer;
	}

	/* "Equipos" tiene subnivel: flecha a la derecha (como cat.com). */
	.sl-mnav__item--sub::after {
		content: "";
		margin-left: auto;
		width: calc(var(--icon-size) / .6);
		height: calc(var(--icon-size) / .6);
		background-color: currentColor;
		-webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
		mask: var(--icon-chevron-down) center / contain no-repeat;
		transform: rotate(-90deg);
	}

	/* Debajo de la línea: datos de contacto, con ícono. */
	.sl-mnav__utils {
		margin: 16px 28px 0 !important;
		padding: 20px 0 32px !important;
		border-top: 1px solid var(--color-mid-grey);
	}

	.sl-mnav .sl-mnav__util {
		display: flex;
		align-items: center;
		gap: 18px;
		min-height: 80px; /* ≈ 48px reales */
		font-size: 20px; /* ≈ 12px reales */
		color: var(--color-secondary);
	}

	.sl-mnav__util i {
		width: 32px;
		font-size: 28px;
		text-align: center;
		color: var(--color-primary);
	}

}

@media (forced-colors: active) {
	.sl-mnav__item--sub::after {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}