/**
 * Cabecera San José Obrero.
 *
 * Variables locales que heredan de la paleta de theme.json (con valor de
 * respaldo por si el bloque se usa fuera del theme).
 */

.sjo-header {
	--sjo-azul: var( --wp--preset--color--azul, #004078 );
	--sjo-rojo: var( --wp--preset--color--rojo, #e00026 );
	--sjo-rojo-oscuro: var( --wp--preset--color--rojo-oscuro, #ad001d );
	--sjo-azul-oscuro: var( --wp--preset--color--azul-oscuro, #002a50 );
	--sjo-azul-medio: var( --wp--preset--color--azul-medio, #006ba1 );
	--sjo-line: var( --wp--preset--color--border, #e4e4e7 );
	--sjo-surface: var( --wp--preset--color--base, #ffffff );
	--sjo-text: #1f2024;
	--sjo-text-soft: #55575e;
	/* Texto atenuado sobre el azul, tal y como lo define Figma
	   (semantic/text/on-inverse-muted). Da 6,6:1 sobre #004078. */
	--sjo-on-inverse-muted: var( --wp--preset--color--azul-200, #bcd0e0 );

	/* Guía lateral.
	 *
	 * La cabecera ocupa el ancho completo de la pantalla: no encierra su
	 * contenido en la columna de 1240 px del pie, sino que reparte logotipo,
	 * navegación y botón de lado a lado y solo respeta un canalón. Ese canalón
	 * sigue a la ventana hasta los 100 px que marca la maqueta sobre un lienzo
	 * de 1440 y ahí se queda, de modo que en un monitor ancho la barra se
	 * estira en vez de dejar el logotipo descolgado hacia el centro. */
	--sjo-gutter: clamp( 1.25rem, 6.94vw, 100px );
	--sjo-inset: var( --sjo-gutter );

	/* Medidas de la maqueta: cinta de accesos de 40 px, barra de 100 px y
	   logotipo de 78x68 dentro de ella. */
	--sjo-topbar-height: 40px;
	--sjo-bar-height: 100px;
	--sjo-logo-width: 78px;
	--sjo-logo-height: 68px;
	--sjo-nav-gap: clamp( 1rem, 2.08vw, 30px );

	/* Esquina inferior izquierda de los botones. */
	--sjo-radio-sutil: var( --wp--custom--radius--md, 8px );
	--sjo-shadow: 0 18px 40px rgba( 15, 17, 21, 0.13 );
	--sjo-ease: 180ms cubic-bezier( 0.4, 0, 0.2, 1 );

	position: relative;
	z-index: 100;

	/* La cabecera entera va sobre el azul institucional, no solo su cinta
	   superior: es el cambio de fondo que trae esta versión del diseño. El
	   color se declara aquí y no solo en las dos franjas para que cualquier
	   hueco de redondeo o de subpíxel entre ellas siga siendo azul. */
	background-color: var( --sjo-azul );
	color: #fff;

	/* Montserrat es la tipografía de todo el texto de la cabecera —rótulos,
	   navegación y botón—, tal y como la escribe la maqueta. */
	font-family: var( --wp--preset--font-family--heading, inherit );

	/* Red de seguridad: nada de la cabecera puede generar desplazamiento
	   horizontal en la página. « clip » recorta solo el eje X y deja el eje Y
	   visible, de modo que los megamenús siguen colgando hacia abajo. */
	overflow-x: clip;
}

.sjo-header *,
.sjo-header *::before,
.sjo-header *::after {
	box-sizing: border-box;
}

/* Reinicios de elemento. Van dentro de :where() para que no sumen
   especificidad: de lo contrario «.sjo-header button» (0,1,1) le gana a
   «.sjo-nav__link» (0,1,0) y los ítems con megamenú se quedan sin el padding
   ni la tipografía de la clase, mientras que los que son un simple enlace sí
   los reciben. Con :where() manda siempre la clase del componente y un
   <button> se pinta exactamente igual que un <a>. */

.sjo-header :where( ul ) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjo-header :where( a ) {
	text-decoration: none;
	color: inherit;
}

.sjo-header :where( button ) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* El foco se dibuja en blanco porque las dos franjas de la cabecera son
   azules; dentro de los paneles del megamenú, que sí van sobre blanco, vuelve
   al azul institucional. */
.sjo-header :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 3px;
}

.sjo-dropdown :focus-visible {
	outline-color: var( --sjo-azul );
}

.sjo-header .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.sjo-icon {
	flex: none;
	width: 1em;
	height: 1em;
}

/* ---------------------------------------------------------------------------
 * 1. Cinta de accesos
 *
 * Una sola franja de 40 px en el azul profundo con los accesos a plataforma
 * alineados a la derecha. En la maqueta solo hay uno —SIEWEB—, pero el markup
 * recorre la lista: si el administrador añade otro al menú, entra en la fila.
 * ------------------------------------------------------------------------ */

.sjo-topbar {
	background-color: var( --sjo-azul-oscuro );
	color: #fff;
}

.sjo-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: var( --sjo-topbar-height );
	padding-inline: var( --sjo-inset );
}

.sjo-topbar__links {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* El acceso es un rótulo en versalitas con una flecha, no una píldora de
   color: el diseño reserva el rojo para el único botón de la cabecera. El
   contorno nace del color de la propia cinta —o sea, invisible— y solo aparece
   al apuntar o al enfocar, que es donde hace falta el acuse de recibo. */
.sjo-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 14px 5px 16px;
	border: 1px solid transparent;
	border-radius: 0 13px 13px var( --sjo-radio-sutil );
	color: #fff;
	transition: border-color var( --sjo-ease ), background-color var( --sjo-ease );
}

.sjo-topbar__link-label {
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.sjo-topbar__link-arrow {
	font-size: 13px;
	line-height: 16px;
	transition: transform var( --sjo-ease );
}

/* El rótulo ya es blanco en reposo, así que aquí solo cambian el filete y el
   velo de fondo. Repetir « color: #fff » junto a un fondo blanco translúcido no
   añadía nada y se lee como blanco sobre blanco en el análisis estático. */
.sjo-topbar__link:hover,
.sjo-topbar__link:focus-visible {
	border-color: rgba( 255, 255, 255, 0.35 );
	background-color: rgba( 255, 255, 255, 0.08 );
}

.sjo-topbar__link:hover .sjo-topbar__link-arrow {
	transform: translateX( 3px );
}

/* ---------------------------------------------------------------------------
 * 2. Barra principal
 * ------------------------------------------------------------------------ */

.sjo-header__main {
	position: relative;
	background-color: var( --sjo-azul );
}

.sjo-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var( --sjo-bar-height );
	padding-inline: var( --sjo-inset );
}

.sjo-header__brand {
	flex: none;
}

.sjo-header__logo {
	display: flex;
	align-items: center;
	width: var( --sjo-logo-width );
	height: var( --sjo-logo-height );
}

.sjo-header__logo-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.sjo-header__logo--text {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	font-family: var( --wp--preset--font-family--heading, inherit );
}

/* Botón hamburguesa (móvil y tablet). */

.sjo-header__burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-inline-start: auto;
	border-radius: 8px;
	color: #fff;
	transition: background-color var( --sjo-ease );
}

.sjo-header__burger:hover {
	background-color: rgba( 255, 255, 255, 0.12 );
}

.sjo-header__burger .sjo-icon {
	width: 24px;
	height: 24px;
}

.sjo-header__burger .sjo-icon:last-child,
.sjo-header.is-nav-open .sjo-header__burger .sjo-icon:first-child {
	display: none;
}

.sjo-header.is-nav-open .sjo-header__burger .sjo-icon:last-child {
	display: block;
}


/* Llamada a la acción de la barra principal.
 *
 * Píldora roja a la derecha de la navegación, como en la maqueta. Vive dentro
 * de .sjo-header__collapse para no duplicar markup: en escritorio la fila es
 * « navegación + botón » y el botón queda pegado al margen derecho; en móvil
 * cae al final del cajón, donde se estira a todo el ancho.
 *
 * Blanco sobre #e00026 da 5,00:1 y cumple la WCAG AA. */

.sjo-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: none;
	/* Medidas exactas de la maqueta: 42 px de alto y 30/26 px de costado, con
	   el rótulo en Montserrat SemiBold 15/20. */
	height: 42px;
	padding: 0 26px 0 30px;
	/* Solo la esquina superior izquierda es recta; las otras tres, píldora. La
	   inferior izquierda estaba en 8 px y en el diseño va redondeada como las
	   demás. */
	border-radius: 0 999px 999px 999px;
	background-color: var( --sjo-rojo );
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	letter-spacing: 0.2px;
	text-align: center;
	white-space: nowrap;
	transition: background-color var( --sjo-ease );
}

/* La flecha existe siempre y arranca invisible, pero reservando su sitio: en la
   maqueta el botón mide 195 px tanto en reposo como al pasar el cursor, así que
   solo se anima la opacidad y la píldora no da ningún salto. El componente de
   Figma la describe entrando a la vez que el rojo se oscurece. */
.sjo-header__cta::after {
	content: "\2192";
	display: inline-block;
	width: 1ch;
	font-weight: 500;
	font-size: 16px;
	opacity: 0;
	transition: opacity var( --sjo-ease );
}

.sjo-header__cta:hover,
.sjo-header__cta:focus-visible {
	background-color: var( --sjo-rojo-oscuro );
	color: #fff;
}

.sjo-header__cta:hover::after,
.sjo-header__cta:focus-visible::after {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 3. Navegación principal
 * ------------------------------------------------------------------------ */

.sjo-nav {
	min-width: 0;
}

.sjo-nav__list {
	display: flex;
	align-items: center;
	gap: var( --sjo-nav-gap );
}

.sjo-nav__item {
	position: relative;
}

/* Montserrat Medium 14/20 en blanco, sin píldora ni relleno: en la maqueta los
   rótulos van sueltos sobre el azul y solo los separa el hueco de 30 px. */
.sjo-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #fff;
	white-space: nowrap;
	transition: color var( --sjo-ease );
}

/* Puntero, foco o panel abierto: el rótulo se subraya. Sobre el azul no hay
   sitio para un cambio de color —el blanco ya es el tope de contraste—, así
   que el acuse de recibo es el trazo. */
.sjo-nav__item:hover > .sjo-nav__link,
.sjo-nav__item.is-open > .sjo-nav__link,
.sjo-nav__link:focus-visible {
	color: #fff;
}

/* El filete de debajo del rótulo, uno solo para los dos estados.
 *
 * Antes eran dos cosas distintas: el ítem activo llevaba este filete de 3 px y
 * el hover, un « text-decoration: underline » de 2 px colgado de la línea base.
 * Al pasar el puntero por encima de la sección activa se veían las dos rayas a
 * distinta altura, distinto grosor y distinto ancho —el subrayado sigue al
 * texto y el filete, a la caja—. Ahora es el mismo pseudoelemento y lo único
 * que cambia es el color, así que la blanca del hover cae exactamente donde
 * caería la roja.
 *
 * El rojo marca tanto la sección que es la página actual como aquella de la que
 * cuelga el subelemento que se está viendo, y va el último a propósito: sobre
 * la sección activa manda su color, que es un estado permanente, y no el
 * blanco del puntero, que es pasajero. */
.sjo-nav__link::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	height: 3px;
	border-radius: 999px;
	background-color: transparent;
	transition: background-color var( --sjo-ease );
}

.sjo-nav__item:hover > .sjo-nav__link::before,
.sjo-nav__item.is-open > .sjo-nav__link::before,
.sjo-nav__link:focus-visible::before {
	background-color: #fff;
}

.sjo-nav__item.is-current > .sjo-nav__link::before {
	background-color: var( --sjo-rojo );
}

/* ---------------------------------------------------------------------------
 * 4. Desplegable de sección
 *
 * Panel compacto anclado bajo su ítem: una fila por categoría. Bajo cada fila
 * cuelgan sus enlaces (.sjo-dropdown__sublist), que solo se imprimen si la
 * categoría tiene alguno.
 * ------------------------------------------------------------------------ */

.sjo-dropdown__list {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.sjo-dropdown__row {
	display: flex;
	align-items: center;
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	color: var( --sjo-text );
	transition: background-color var( --sjo-ease ), color var( --sjo-ease );
}

.sjo-dropdown__label {
	font-size: 0.9063rem;
	font-weight: 500;
	line-height: 1.35;
}

.sjo-dropdown__row--link:hover,
.sjo-dropdown__row--link:focus-visible {
	background-color: rgba( 0, 64, 120, 0.07 );
	color: var( --sjo-azul );
}

/* Categoría de la página que se está viendo. */
.sjo-dropdown__row.is-current {
	background-color: rgba( 0, 64, 120, 0.07 );
	color: var( --sjo-azul );
}

.sjo-dropdown__row.is-current .sjo-dropdown__label {
	font-weight: 600;
}

/* Enlaces finales de la categoría. */

.sjo-dropdown__sublist {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0.1rem 0 0.6rem 1.45rem;
	padding-left: 0.75rem;
	border-left: 1px solid var( --sjo-line );
	font-size: 0.8438rem;
}

.sjo-dropdown__link {
	display: block;
	color: var( --sjo-text-soft );
	transition: color var( --sjo-ease );
}

.sjo-dropdown__link:hover,
.sjo-dropdown__link:focus-visible {
	color: var( --sjo-azul );
}

.sjo-dropdown__link.is-featured {
	font-weight: 600;
	color: var( --sjo-text );
}

/* Enlace de la página que se está viendo. */
.sjo-dropdown__link.is-current {
	font-weight: 600;
	color: var( --sjo-azul );
}

/* ---------------------------------------------------------------------------
 * 4b. Piezas exclusivas del cajón móvil
 *
 * Se declaran ocultas de partida y solo el bloque de móvil las enciende, de
 * modo que en escritorio no existen ni para el lector de pantalla: el nombre
 * de cada sección se anuncia una sola vez, desde el botón del megamenú.
 * ------------------------------------------------------------------------ */

.sjo-drawer__top,
.sjo-drawer__accesos,
.sjo-nav__section {
	display: none;
}

/* Con el cajón abierto el documento de detrás no se desplaza. La clase la pone
   y la quita view.js.

   « scrollbar-gutter » reserva el hueco de la barra de desplazamiento que
   « overflow: hidden » acaba de quitar. Sin esa reserva la página se ensancha
   unos 15 px al abrir el cajón y otros tantos al cerrarlo, y ese salto se ve
   como un parpadeo en cada pulsación —solo en navegador de escritorio con la
   ventana estrecha, que es justo como se prueba el diseño móvil—. */
html.sjo-nav-abierto {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* ---------------------------------------------------------------------------
 * 5. Móvil y tablet: cajón desplegable
 * ------------------------------------------------------------------------ */

@media ( max-width: 1199px ) {

	/* El recorte « overflow-x: clip » de la cabecera protege a la página de
	   los paneles flotantes del megamenú, y conviene conservarlo: es lo que
	   evita el desplazamiento lateral. Solo se levanta mientras el cajón está
	   abierto, porque este se posiciona respecto a la ventana y algún
	   navegador lo recortaría contra su ancestro. */
	.sjo-header.is-nav-open {
		overflow: visible;
	}

	/* El cajón es una capa a pantalla completa en el azul institucional, no un
	   panel colgado de la barra: cubre la cabecera entera, incluida la barra
	   superior, y lleva dentro su propio logotipo, su botón de cierre y los
	   accesos. Es la única forma de reproducir la maqueta, donde el menú
	   ocupa los 375 px de ancho y se desplaza solo. */
	.sjo-header__collapse {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: flex;
		flex-direction: column;
		padding: 0 20px 40px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var( --sjo-azul );
		color: #fff;
		opacity: 0;
		visibility: hidden;
		transform: translateY( -0.5rem );
		transition: opacity var( --sjo-ease ), transform var( --sjo-ease ), visibility var( --sjo-ease );
	}

	.sjo-header.is-nav-open .sjo-header__collapse {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Cabecera del cajón: logotipo en blanco y botón de cierre. */

	.sjo-drawer__top {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		height: 72px;
	}

	.sjo-drawer__top .sjo-header__logo {
		width: 96px;
		height: 42px;
	}

	.sjo-drawer__close {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: var( --wp--custom--radius--pill, 999px );
		background-color: var( --sjo-azul-oscuro );
		color: #fff;
		font-size: 18px;
		line-height: 1;
		transition: background-color var( --sjo-ease );
	}

	.sjo-drawer__close:hover,
	.sjo-drawer__close:focus-visible {
		background-color: var( --sjo-azul-medio );
	}

	/* Fila de accesos. Los dos primeros van en el azul profundo y el CTA en
	   rojo, y este último se estira para ocupar el hueco que quede. */

	.sjo-drawer__accesos {
		display: flex;
		flex: none;
		align-items: center;
		gap: 8px;
		padding-bottom: 22px;
	}

	.sjo-drawer__acceso,
	.sjo-drawer__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 0 16px;
		/* Misma silueta que el botón de la barra: recta solo arriba a la
		   izquierda. */
		border-radius: 0 999px 999px 999px;
		font-family: var( --wp--preset--font-family--heading, inherit );
		font-weight: 600;
		font-size: 13px;
		line-height: 1;
		white-space: nowrap;
		transition: background-color var( --sjo-ease );
	}

	.sjo-drawer__acceso {
		flex: none;
		background-color: var( --sjo-azul-oscuro );
		color: #fff;
	}

	.sjo-drawer__acceso:hover,
	.sjo-drawer__acceso:focus-visible {
		background-color: var( --sjo-azul-medio );
		color: #fff;
	}

	.sjo-drawer__cta {
		flex: 1 0 0;
		min-width: 0;
	}

	/* El CTA de la barra solo existe en escritorio: en móvil su sitio es la
	   fila de accesos de aquí arriba. */
	.sjo-header__cta--bar {
		display: none;
	}

	/* Navegación: lista plana. Cada sección abre con un filete y su rótulo, y
	   debajo cuelgan todos sus enlaces a la vista. No hay acordeón. */

	.sjo-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sjo-nav__item {
		border-top: 1px solid rgba( 255, 255, 255, 0.18 );
	}

	.sjo-nav__section {
		display: flex;
		align-items: center;
		min-height: 100px;
		padding-top: 18px;
		padding-bottom: 6px;
		color: var( --sjo-on-inverse-muted );
		font-family: var( --wp--preset--font-family--heading, inherit );
		font-weight: 700;
		font-size: 12px;
		line-height: 1.25;
		letter-spacing: 1.2px;
		text-transform: uppercase;
	}

	/* En móvil la sección no se pulsa: manda el rótulo de arriba. */
	.sjo-nav__link--toggle {
		display: none;
	}

	/* Filas de enlace: 46 px de alto, rótulo a la izquierda y flecha a la
	   derecha. La flecha es decorativa, así que se pinta con un
	   pseudoelemento y no llega al lector de pantalla. */
	.sjo-nav__link,
	.sjo-dropdown__row--link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		width: 100%;
		height: 46px;
		padding: 0;
		border-radius: 0;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.25;
	}

	.sjo-nav__link::after,
	.sjo-dropdown__row--link::after {
		content: "\2192";
		flex: none;
		color: var( --sjo-on-inverse-muted );
		font-size: 15px;
		font-weight: 400;
	}

	.sjo-nav__item:hover > .sjo-nav__link,
	.sjo-nav__link:focus-visible,
	.sjo-dropdown__row--link:focus-visible {
		color: #fff;
		text-decoration: underline;
	}

	/* El filete rojo del ítem activo es de la barra de escritorio: en una lista
	   apilada quedaría cruzando la fila de debajo. Aquí la página en curso se
	   marca con el rótulo en el azul claro. */
	.sjo-nav__item.is-current > .sjo-nav__link,
	.sjo-dropdown__row--link.is-current {
		background-color: transparent;
		color: var( --sjo-on-inverse-muted );
	}

	.sjo-nav__link::before {
		display: none;
	}

	/* El panel del megamenú deja de ser plegable y se convierte en la lista de
	   enlaces de la sección. */
	.sjo-dropdown {
		display: block;
		visibility: visible;
	}

	.sjo-dropdown__list {
		gap: 0;
	}

	.sjo-dropdown__list,
	.sjo-dropdown__sublist {
		padding: 0;
		overflow: visible;
	}

	.sjo-dropdown__label {
		flex: 1 1 auto;
		min-width: 0;
	}
}
@media ( max-width: 639px ) {

	/* En móvil el logotipo vertical se reduce para no comerse la pantalla. */
	.sjo-header {
		--sjo-logo-width: 79px;
		--sjo-logo-height: 68px;
		--sjo-bar-height: 88px;
	}

	.sjo-topbar__links {
		gap: 0.35rem;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Escritorio: panel flotante anclado al ítem
 * ------------------------------------------------------------------------ */

@media ( min-width: 1200px ) {

	.sjo-header__burger {
		display: none;
	}

	.sjo-header__collapse {
		display: flex;
		flex: 1;
		align-items: center;
		gap: clamp( 1rem, 2vw, 2.5rem );
	}

	/* La navegación se va al lado opuesto del logotipo: el margen automático a
	   la izquierda la empuja contra el botón de Admisión, de modo que ambos
	   forman un único bloque pegado al borde derecho de la barra. */
	.sjo-nav {
		margin-inline-start: auto;
	}

	/* El ítem ocupa toda la altura de la barra aunque su enlace sea una
	   píldora: así el panel sigue colgando del borde inferior de la cabecera. */
	.sjo-nav__item {
		display: flex;
		align-items: center;
		height: var( --sjo-bar-height );
	}

	.sjo-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		width: max-content;
		min-width: 236px;
		max-width: min( 320px, 92vw );
		padding: 0.5rem;
		background-color: var( --sjo-surface );
		border: 1px solid var( --sjo-line );
		border-radius: 0 0 14px 14px;
		box-shadow: var( --sjo-shadow );
		opacity: 0;
		visibility: hidden;
		transform: translateY( -0.35rem );
		transition: opacity var( --sjo-ease ), transform var( --sjo-ease ), visibility var( --sjo-ease );
	}

	/* Si el panel se saldría por la derecha, view.js lo alinea al otro borde. */
	.sjo-nav__item.is-right > .sjo-dropdown {
		left: auto;
		right: 0;
	}

	/* Los dos últimos ítems se anclan a la derecha de salida, sin esperar a
	   view.js.
	   Motivo: «visibility: hidden» oculta el panel pero NO lo saca del layout,
	   así que un panel cerrado sigue contando para el área de desplazamiento de
	   la página. Como la navegación va pegada al margen derecho y el panel se
	   ancla en «left: 0» del ítem con 236 px mínimos, el del último ítem se
	   salía ~88 px por la derecha y creaba barra de desplazamiento horizontal
	   —y la franja en blanco al costado— en cualquier pantalla de 1200 px o
	   más. La clase « is-right » solo llega al abrir, que era demasiado tarde;
	   esto además funciona sin JavaScript. */
	.sjo-nav__item--parent:nth-last-child( -n + 2 ) > .sjo-dropdown {
		left: auto;
		right: 0;
	}

	/* Apertura por puntero, foco o clic (la clase la añade view.js). */
	.sjo-nav__item--parent:hover > .sjo-dropdown,
	.sjo-nav__item--parent:focus-within > .sjo-dropdown,
	.sjo-nav__item.is-open > .sjo-dropdown {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 7. Preferencias de movimiento reducido
 * ------------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {

	.sjo-header *,
	.sjo-header *::after {
		transition-duration: 1ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * 8. Previsualización en el Editor de Sitio
 * ------------------------------------------------------------------------ */

.sjo-header-preview .sjo-header {
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * La cabecera sobre el banner
 *
 * En la portada la cabecera no es una barra: flota sobre la fotografía del
 * banner, que empieza en el borde superior de la página. Es lo que hace la
 * maqueta, y es lo que le da al banner los 900 px enteros en vez de 900 menos
 * la cabecera.
 *
 * Se coloca en absoluto y no en fijo a propósito: en el Figma la cabecera se va
 * con el desplazamiento, no acompaña. Al salir de ella el fondo de la sección
 * siguiente ya es opaco y no hay nada que resolver.
 *
 * La cinta de accesos conserva su azul —en la maqueta se ve como una franja
 * sólida sobre la fotografía— y lo que se queda sin fondo es la barra del
 * logotipo y la navegación.
 * ------------------------------------------------------------------------ */

.sjo-header--sobre-banner {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background-color: transparent;
}

/* La barra del logotipo y la navegación se queda sin fondo, y a cambio el texto
   gana un poco de sombra: sin ella dependería de lo que haya detrás, y el velo
   del banner aclara y oscurece según la fotografía que suban. */
.sjo-header--sobre-banner .sjo-header__main {
	background-color: transparent;
	text-shadow: 0 1px 12px rgba( 0, 27, 52, 0.45 );
}

/* La cinta, en el azul profundo que le da el diseño a esta versión. */
.sjo-header--sobre-banner .sjo-topbar {
	background-color: #022d55;
}

/* El botón y el cajón del móvil llevan fondo propio, así que ahí la sombra
   sobra: solo la necesita el texto que va suelto sobre la fotografía. */
.sjo-header--sobre-banner .sjo-header__cta,
.sjo-header--sobre-banner .sjo-header__collapse {
	text-shadow: none;
}

/* El cajón del móvil ya es una capa fija a pantalla completa con su propio
   azul —lo pone la hoja de más arriba—, así que cubre la cabecera flotante sin
   que haya que hacer nada más. */