/* By Ontop - Megamenu (tema Rife). Breakpoint de Rife: escritorio > 1024px. */
:root {
	--byt-navy: #1e1939;
	--byt-navy-2: #2a2450;
	--byt-gold: #fcbf0e;
	--byt-gold-2: #ffcc33;
}

/* Etiqueta "Coming soon" + item no seleccionable (todas las resoluciones) */
#access li.byt-soon > .byt-soon-label {
	cursor: not-allowed;
	opacity: .55;
}
#access li.byt-soon > .byt-soon-label:hover,
#access li.byt-soon > .byt-soon-label:focus {
	opacity: .55;
}
#access .byt-soon-tag {
	background: var(--byt-navy);
	color: var(--byt-gold-2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* ESCRITORIO                                                          */
/* ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	/* Menu mas compacto: ahora hay 7 items con textos largos */
	#header #access .top-menu > li > a,
	#header #access .top-menu > li > span.title {
		font-size: 16px;
		padding-left: 8px;
		padding-right: 8px;
	}
	#header #access .top-menu.opener-icons-on > li.menu-parent-item > span.title {
		padding-right: 2px;
	}

	/* Tag Coming soon: aparece en hover / foco */
	#access li.byt-soon > .byt-soon-tag {
		position: absolute;
		left: 50%;
		top: 100%;
		transform: translate(-50%, 4px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s, transform .2s, visibility 0s .2s;
		z-index: 260;
		box-shadow: 0 6px 16px rgba(30, 25, 57, .3);
	}
	#access li.byt-soon:hover > .byt-soon-tag,
	#access li.byt-soon:focus-within > .byt-soon-tag {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 8px);
		transition-delay: 0s;
	}

	/* Flecha del opener: gira al abrir */
	#header #access li.byt-dd > i.sub-mark {
		transition: transform .2s;
	}
	#header #access li.byt-dd.byt-open > i.sub-mark {
		transform: rotate(180deg);
	}
	#header #access li.byt-dd.byt-open > span.title {
		color: var(--byt-navy);
	}

	/* Dropdown simple (Solutions / Industries) y base del megamenu */
	#header #access li.byt-dd > ul.sub-menu {
		background: var(--byt-navy);
		border-top: 3px solid var(--byt-gold);
		border-radius: 0 0 12px 12px;
		box-shadow: 0 18px 40px rgba(14, 10, 36, .35);
		padding: 10px 0;
		min-width: 280px;
		z-index: 300;
	}
	#header #access li.byt-dd.byt-open > ul.sub-menu {
		display: block;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
		animation: bytMmPop .2s ease-out;
	}
	#header #access li.byt-dd > ul.sub-menu li {
		white-space: normal;
		min-height: 0;
		padding: 0;
	}
	#header #access li.byt-dd > ul.sub-menu a {
		color: #fff;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.35;
		padding: 9px 24px;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		transition: color .15s, background-color .15s, padding-left .15s;
	}
	#header #access li.byt-dd > ul.sub-menu a:hover,
	#header #access li.byt-dd > ul.sub-menu a:focus-visible {
		color: var(--byt-gold-2);
		background: rgba(255, 255, 255, .06);
		outline: none;
	}
	#header #access li.byt-dd > ul.sub-menu a:focus-visible {
		box-shadow: inset 2px 0 0 var(--byt-gold);
	}

	/* ---- Megamenu Services ---- */
	#header #access li.byt-mega {
		position: static;
	}
	#header #access li.byt-mega > ul.sub-menu {
		position: fixed;
		top: var(--byt-top, 90px);
		left: 0;
		right: 0;
		margin: 0 auto;
		width: min(1180px, calc(100vw - 32px));
		max-height: calc(100vh - var(--byt-top, 90px) - 16px);
		overflow-y: auto;
		border-radius: 0 0 16px 16px;
		background: linear-gradient(160deg, var(--byt-navy) 0%, var(--byt-navy-2) 100%);
	}
	#header #access li.byt-mega.byt-open > ul.sub-menu {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 22px 30px;
		padding: 30px 34px 24px;
	}

	/* Categorias */
	#header #access li.byt-mega li.byt-cat {
		display: block;
		padding: 0;
	}
	#header #access li.byt-mega li.byt-cat > i.sub-mark {
		display: none;
	}
	#header #access li.byt-mega li.byt-cat > span.title {
		display: flex;
		align-items: center;
		gap: 10px;
		cursor: default;
		color: var(--byt-gold-2);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: .05em;
		line-height: 1.25;
		text-transform: uppercase;
		padding: 0 0 10px;
		margin: 0 0 6px;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		overflow: visible;
		white-space: normal;
	}
	#header #access li.byt-mega li.byt-cat > span.title > span {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
	}
	#header #access .byt-ico {
		flex: 0 0 auto;
		box-sizing: content-box;
		width: 22px;
		height: 22px;
		padding: 7px;
		border-radius: 10px;
		background: rgba(252, 191, 14, .14);
		color: var(--byt-gold);
	}

	/* Lista de servicios dentro de cada categoria: siempre visible */
	#header #access li.byt-mega li.byt-cat > ul.sub-menu {
		display: block;
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
		min-width: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
		border: 0;
	}
	#header #access li.byt-mega li.byt-svc > a {
		padding: 6px 8px;
		margin: 0 -8px;
		font-size: 14px;
		border-radius: 6px;
	}

	/* CTA */
	#header #access li.byt-mega li.byt-cta {
		grid-column: 1 / -1;
		margin-top: 2px;
		padding-top: 18px;
		border-top: 1px solid rgba(255, 255, 255, .12);
		text-align: center;
	}
	#header #access li.byt-mega li.byt-cta > a {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		background: var(--byt-gold);
		color: var(--byt-navy);
		font-size: 15px;
		font-weight: 700;
		padding: 12px 26px;
		border-radius: 999px;
		transition: background-color .2s, transform .2s;
	}
	#header #access li.byt-mega li.byt-cta > a::after {
		content: "\2192";
		font-size: 18px;
		line-height: 1;
		transition: transform .2s;
	}
	#header #access li.byt-mega li.byt-cta > a:hover,
	#header #access li.byt-mega li.byt-cta > a:focus-visible {
		background: var(--byt-gold-2);
		color: var(--byt-navy);
		outline: none;
		box-shadow: 0 0 0 3px rgba(252, 191, 14, .35);
	}
	#header #access li.byt-mega li.byt-cta > a:hover::after {
		transform: translateX(4px);
	}
	#header #access li.byt-mega li.byt-cta > a:hover {
		padding-left: 26px;
	}

	/* Foco visible en disparadores */
	#header #access li.byt-dd > span.title:focus-visible,
	#access li.byt-soon > .byt-soon-label:focus-visible {
		outline: 2px solid var(--byt-navy);
		outline-offset: 2px;
		border-radius: 4px;
	}
}

@keyframes bytMmPop {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ */
/* MOVIL / TABLET (menu lateral de Rife, acordeon nativo)              */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.mobile-menu .navigation-bar .top-menu li.byt-soon > .byt-soon-label {
		display: inline-block;
	}
	.mobile-menu .navigation-bar .byt-soon-tag {
		display: inline-block;
		margin-left: 8px;
		vertical-align: middle;
	}

	.mobile-menu .navigation-bar .top-menu li.byt-cat > span.title {
		font-weight: 700;
		color: var(--byt-navy);
	}
	.mobile-menu .navigation-bar .top-menu li.byt-cat > span.title > span {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}
	.mobile-menu .navigation-bar .byt-ico {
		width: 18px;
		height: 18px;
		color: #b07d00;
	}
	.mobile-menu .navigation-bar .top-menu li.byt-svc > a,
	.mobile-menu .navigation-bar .top-menu li.byt-sub > a {
		font-size: 14px;
		line-height: 1.35;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.mobile-menu .navigation-bar .top-menu li.byt-cta {
		padding: 8px 20px 14px;
	}
	.mobile-menu .navigation-bar .top-menu li.byt-cta > a {
		display: inline-block;
		background: var(--byt-gold);
		color: var(--byt-navy);
		font-size: 15px;
		font-weight: 700;
		line-height: 1.3;
		padding: 12px 22px;
		border-radius: 999px;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	#header #access li.byt-dd.byt-open > ul.sub-menu {
		animation: none;
	}
	#header #access li.byt-dd > i.sub-mark,
	#access li.byt-soon > .byt-soon-tag {
		transition: none;
	}
}

/* === Ajustes solicitados 2026-11-05 ===
   1) Todos los ítems de primer nivel legibles sobre el header amarillo/blanco
      (Rife pintaba los "current"/desplegables en dorado, invisible sobre amarillo).
   2) Sin flechas de despliegue en escritorio. */
@media (min-width: 1025px) {
  #header .top-menu > li > a,
  #header .top-menu > li > span.title,
  #header .top-menu > li.current-menu-item > a,
  #header .top-menu > li.current-menu-item > span.title,
  #header .top-menu > li.current-menu-ancestor > span.title {
    color: #1e1939 !important;
  }
  #header .top-menu > li > a:hover,
  #header .top-menu > li > span.title:hover,
  #header .top-menu > li.byt-open > span.title {
    opacity: .7;
  }
  #header .top-menu > li.byt-soon > span.title,
  #header .top-menu > li.byt-soon > a { color: rgba(30,25,57,.45) !important; }
  #header .top-menu > li > i.sub-mark { display: none !important; }
}
