/* ============================================================================
   Cabecera Kubari — menú (PROTOTIPO 2026-08-25).

   Dos ajustes sobre el menú de Salient, ambos con clases puestas en los propios
   ítems del menú (kub-menu-destacado / kub-menu-idioma), sin tocar plantillas:

   1. TIENDA se destaca en amarillo: es la acción principal de la web y hasta ahora
      pesaba lo mismo que una página institucional.
   2. ES/EN dejan de parecer secciones. Son una preferencia, no un destino, así que
      pierden la píldora y pasan a un conmutador compacto.
   ========================================================================= */

#header-outer .kub-menu-destacado,
#header-outer .kub-menu-idioma {
	--k-teal: #00828e;
	--k-teal-hondo: #00636c;
	--k-amarillo: #f9ec67;
}

/* ---------- TIENDA destacada ---------- */

/* Fondo amarillo, pero con el MISMO borde teal que el resto de botones: así se
   distingue por color de relleno sin salirse del sistema del menú.

   El color del texto se fija en todos los estados a propósito. Salient lo pone en
   blanco al pasar por encima y en el ítem activo, y blanco sobre este amarillo es
   ilegible (contraste 1.4:1). Con el teal se queda en 5,74 —AA— siempre. */
#header-outer #top nav .kub-menu-destacado > a,
#header-outer #top nav .kub-menu-destacado > a:hover,
#header-outer #top nav .kub-menu-destacado > a:focus,
#header-outer #top nav .kub-menu-destacado > a:active,
#header-outer #top nav .kub-menu-destacado.current-menu-item > a,
#header-outer #top nav .kub-menu-destacado.current_page_item > a {
	background-color: var(--k-amarillo) !important;
	border-color: var(--k-teal) !important;
	color: var(--k-teal-hondo) !important;
}

/* Los span internos heredan: si no, Salient les mete su propio color. */
#header-outer #top nav .kub-menu-destacado > a span,
#header-outer #top nav .kub-menu-destacado > a:hover span,
#header-outer #top nav .kub-menu-destacado.current-menu-item > a span {
	color: inherit !important;
}

#header-outer #top nav .kub-menu-destacado > a:hover {
	filter: brightness(0.96);
}

/* Salient subraya el ítem activo con una línea; sobre el amarillo sobra. */
#header-outer #top nav .kub-menu-destacado > a > span::after {
	display: none !important;
}

/* ---------- conmutador de idioma ---------- */

/* Fuera la píldora: dejan de leerse como una sección más del menú. */
#header-outer #top nav .kub-menu-idioma > a {
	background: none !important;
	border: 0 !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.04em;
	/* Sin atenuar: el idioma alternativo tiene que leerse siempre, no solo al pasar
	   por encima — es justo lo que busca quien no habla español. Con opacidad 0.55
	   el contraste caía a 2,1 sobre el gris del header. La diferencia entre activo e
	   inactivo se hace con el peso, que no toca la legibilidad. */
	font-weight: 500 !important;
	transition: color .15s ease;
}

/* Salient aclara el color al pasar por encima y sobre el gris del header el texto
   desaparecía. Se fija el color de marca en hover y foco, y el realce se hace solo
   con la opacidad. */
#header-outer #top nav .kub-menu-idioma > a:hover,
#header-outer #top nav .kub-menu-idioma > a:focus,
#header-outer #top nav .kub-menu-idioma > a:focus-visible,
#header-outer #top nav .kub-menu-idioma > a:active {
	color: var(--k-teal-hondo) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

#header-outer #top nav .kub-menu-idioma > a:hover span,
#header-outer #top nav .kub-menu-idioma > a:focus span,
#header-outer #top nav .kub-menu-idioma > a:active span {
	color: inherit !important;
}

/* El idioma activo, en firme. La clase la pone TranslatePress. */
#header-outer #top nav .kub-menu-idioma.current-language-menu-item > a {
	color: var(--k-teal-hondo) !important;
	font-weight: 700 !important;
}

/* Separador entre los dos idiomas, para que se lean como un par y no como dos
   entradas sueltas. Va en el segundo, dibujado con el pseudoelemento del li. */
#header-outer #top nav .kub-menu-idioma--es::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 12px;
	margin: 0 2px;
	vertical-align: -1px;
	background: currentColor;
	opacity: 0.28;
}

/* Los dos idiomas van juntos y algo separados del resto del menú. */
#header-outer #top nav .kub-menu-idioma--en {
	margin-left: 10px;
}

#header-outer #top nav .kub-menu-idioma > a > span::after {
	display: none !important;
}

/* Guarda: el selector de idioma va con texto, nunca con banderas.

   TranslatePress usa un switcher distinto en móvil (elige con wp_is_mobile) y ese sí
   las lleva. Además el menú móvil de Salient vive en #slide-out-widget-area, fuera
   del header, así que la regla NO puede acotarse a #header-outer: hay que cubrir el
   documento entero. Ya salieron solas dos veces. */
.trp-flag-image,
.trp-language-switcher img,
.trp-menu-ls-mobile img,
.trp-ls-shortcode-language img,
.kub-menu-idioma img,
li[class*="trp-menu-ls"] img {
	display: none !important;
}

/* Los mismos estilos del conmutador, también en el menú móvil. */
#slide-out-widget-area .kub-menu-idioma > a {
	background: none !important;
	border: 0 !important;
}