/*
 * Tema ProtecSoft — estilos propios.
 *
 * Todo color, tipografía y espaciado sale de los presets de theme.json,
 * de modo que un cambio de paleta se hace en un solo archivo.
 * Aquí viven únicamente los componentes que los bloques nativos no cubren.
 */

:root {
	--ps-radio: 12px;
	--ps-sombra: 0 1px 2px rgba(23, 34, 60, 0.04);
	--ps-sombra-alta: 0 1px 2px rgba(23, 34, 60, 0.04), 0 10px 28px rgba(23, 34, 60, 0.05);
}

/* ---------------------------------------------------------------
   Estilos de bloque registrados en functions.php
   --------------------------------------------------------------- */

.is-style-etiqueta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0;
}

.is-style-entradilla {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
	max-width: 58ch;
	margin-inline: 0 auto;
}

.wp-block-group.is-style-tarjeta {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ps-radio);
	box-shadow: var(--ps-sombra);
	padding: var(--wp--preset--spacing--30);
}

.wp-block-group.is-style-banda-suave {
	background: var(--wp--preset--color--surface);
}

.wp-block-list.is-style-marcada li::marker {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------
   Cabecera y pie
   --------------------------------------------------------------- */

.ps-cabecera {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: sticky;
	top: 0;
	z-index: 30;
}

.ps-cabecera .wp-block-site-title a {
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.ps-cabecera .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}

.ps-cabecera .wp-block-navigation a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.ps-cabecera .wp-block-navigation a:hover,
.ps-cabecera .wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--accent);
}

.ps-pie {
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.ps-pie a { text-decoration: none; }
.ps-pie a:hover { text-decoration: underline; }

.ps-pie h3,
.ps-pie .ps-pie-titulo {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
	font-weight: 400;
}

/* ---------------------------------------------------------------
   Consola de tramas (hero)
   --------------------------------------------------------------- */

.ps-consola {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: var(--ps-radio);
	box-shadow: var(--ps-sombra-alta);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.8px;
	line-height: 1.85;
	overflow: hidden;
}

.ps-consola__barra {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 18px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
}

.ps-consola__estado { color: var(--wp--preset--color--live); }

.ps-consola__estado::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--live);
	margin-right: 7px;
	vertical-align: middle;
}

.ps-consola__cuerpo {
	padding: 16px 18px;
	overflow-x: auto;
}

.ps-consola__linea {
	display: block;
	white-space: pre;
	color: var(--wp--preset--color--ink-soft);
}

.ps-consola__linea--tit { color: var(--wp--preset--color--ink); font-weight: 700; }
.ps-consola__linea--val { color: var(--wp--preset--color--ink); }
.ps-consola__linea--raw { color: var(--wp--preset--color--ink-faint); }
.ps-consola__linea--tx  { color: var(--wp--preset--color--live); }
.ps-consola__linea--gap { height: 10px; }

.ps-consola__cursor {
	display: inline-block;
	width: 7px;
	height: 1.05em;
	background: var(--wp--preset--color--accent);
	vertical-align: text-bottom;
	animation: ps-parpadeo 1.05s step-end infinite;
}

@keyframes ps-parpadeo { 50% { opacity: 0; } }

.ps-consola__pie {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 12px 18px;
	font-size: 11.5px;
	color: var(--wp--preset--color--ink-faint);
	background: var(--wp--preset--color--surface);
}

/* ---------------------------------------------------------------
   Cadena del dato
   --------------------------------------------------------------- */

.ps-cadena {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ps-radio);
	background: var(--wp--preset--color--base);
	padding: 30px 26px;
	box-shadow: var(--ps-sombra);
}

.ps-cadena svg { display: block; min-width: 880px; width: 100%; height: auto; }
.ps-cadena .s-box  { fill: var(--wp--preset--color--surface); stroke: var(--wp--preset--color--line-strong); }
.ps-cadena .s-tag  { fill: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--mono); font-size: 9.5px; letter-spacing: 0.12em; }
.ps-cadena .s-name { fill: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--sans); font-size: 13px; font-weight: 600; }
.ps-cadena .s-desc { fill: var(--wp--preset--color--ink-soft); font-family: var(--wp--preset--font-family--sans); font-size: 11px; }
.ps-cadena .s-arrow { stroke: var(--wp--preset--color--line-strong); fill: none; }
.ps-cadena .s-head { fill: var(--wp--preset--color--line-strong); }
.ps-cadena .s-rule { stroke: var(--wp--preset--color--line); }
.ps-cadena .s-own  { fill: var(--wp--preset--color--live); font-family: var(--wp--preset--font-family--mono); font-size: 9.5px; letter-spacing: 0.1em; }

/* La misma cadena apilada, para cuando seis tramos en fila no caben.
   En escritorio manda el diagrama y esta parte no existe. */
.ps-cadena__titulo,
.ps-cadena__lista,
.ps-cadena__pie { display: none; }

@media (max-width: 900px) {
	.ps-cadena {
		overflow-x: visible;
		padding: 22px 20px;
	}

	/* Con la clase sola no basta: «.ps-cadena svg» de más arriba pesa más. */
	.ps-cadena .ps-cadena__svg { display: none; }

	.ps-cadena__titulo {
		display: block;
		margin: 0 0 18px;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 11px;
		letter-spacing: 0.12em;
		color: var(--wp--preset--color--accent);
	}

	.ps-cadena__lista {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* El borde izquierdo es el hilo del recorrido; el punto, cada tramo. */
	.ps-cadena__paso {
		position: relative;
		padding: 0 0 22px 22px;
		border-left: 1px solid var(--wp--preset--color--line);
	}

	.ps-cadena__paso:last-child {
		border-left-color: transparent;
		padding-bottom: 4px;
	}

	.ps-cadena__paso::before {
		content: "";
		position: absolute;
		left: -5px;
		top: 4px;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--wp--preset--color--base);
		border: 2px solid var(--wp--preset--color--accent);
	}

	.ps-cadena__tag {
		display: block;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 10.5px;
		letter-spacing: 0.12em;
		color: var(--wp--preset--color--accent);
		line-height: 1.4;
	}

	.ps-cadena__nombre {
		display: block;
		margin-top: 2px;
		font-weight: 600;
		color: var(--wp--preset--color--ink);
	}

	.ps-cadena__desc {
		display: block;
		margin-top: 2px;
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--ink-soft);
	}

	.ps-cadena__pie {
		display: block;
		margin: 18px 0 0;
		padding-top: 14px;
		border-top: 1px solid var(--wp--preset--color--line);
		font-family: var(--wp--preset--font-family--mono);
		font-size: 10px;
		letter-spacing: 0.08em;
		color: var(--wp--preset--color--live);
	}
}

/* En tablet la lista tiene ancho de sobra: seis tramos en una columna
   dejarían líneas de 850 px para tres palabras. */
@media (min-width: 601px) and (max-width: 900px) {
	.ps-cadena__lista {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------------
   Ejes numerados
   --------------------------------------------------------------- */

.ps-eje__numero {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	line-height: 1;
	padding: 9px 13px;
	border-radius: 6px;
	display: inline-block;
}

/* ---------------------------------------------------------------
   Tablas técnicas
   --------------------------------------------------------------- */

.wp-block-table.is-style-tecnica {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ps-radio);
	overflow: hidden;
	box-shadow: var(--ps-sombra);
}

.wp-block-table.is-style-tecnica table { border-collapse: collapse; width: 100%; }

.wp-block-table.is-style-tecnica th {
	text-align: left;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
	font-weight: 600;
	padding: 15px 18px;
	background: var(--wp--preset--color--surface);
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	white-space: nowrap;
}

.wp-block-table.is-style-tecnica td {
	padding: 15px 18px;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
	color: var(--wp--preset--color--ink-soft);
}

.wp-block-table.is-style-tecnica td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.wp-block-table.is-style-tecnica tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------
   Fichas de interfaz (páginas de capacidad)
   --------------------------------------------------------------- */

.ps-fichas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 760px) {
	.ps-fichas { grid-template-columns: 1fr 1fr; }
}

.ps-ficha {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ps-radio);
	box-shadow: var(--ps-sombra);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ps-ficha__cabeza {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.ps-ficha__nombre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.ps-ficha__tipo {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.ps-ficha dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 14px;
	font-size: 13.5px;
}

.ps-ficha dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
	padding-top: 3px;
}

.ps-ficha dd { margin: 0; color: var(--wp--preset--color--ink-soft); }

.ps-ficha__nota {
	font-size: 13.5px;
	color: var(--wp--preset--color--ink-soft);
	border-top: 1px dashed var(--wp--preset--color--line);
	padding-top: 10px;
	margin: 0;
}

.ps-ficha__nota strong { color: var(--wp--preset--color--ink); font-weight: 600; }

/* ---------------------------------------------------------------
   Preguntas frecuentes
   --------------------------------------------------------------- */

.ps-faq {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ps-radio);
	overflow: hidden;
}

.ps-faq details { background: var(--wp--preset--color--base); }

.ps-faq summary {
	cursor: pointer;
	padding: 16px 20px;
	font-weight: 600;
	letter-spacing: -0.015em;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 14px;
}

.ps-faq summary::-webkit-details-marker { display: none; }
.ps-faq summary::after { content: "+"; color: var(--wp--preset--color--accent); font-weight: 700; }
.ps-faq details[open] summary::after { content: "\2212"; }

.ps-faq details > p {
	padding: 0 20px 18px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	max-width: 72ch;
}

/* ---------------------------------------------------------------
   Migas y columna lateral
   --------------------------------------------------------------- */

.ps-migas {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
}

.ps-migas a { color: var(--wp--preset--color--ink-faint); text-decoration: none; }
.ps-migas a:hover { color: var(--wp--preset--color--accent); }

.ps-rail {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ps-radio);
	background: var(--wp--preset--color--base);
	padding: 18px 20px;
}

.ps-rail__titulo {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 10px;
}

@media (min-width: 980px) {
	.ps-columna-lateral { position: sticky; top: 96px; align-self: start; }
}

/* ---------------------------------------------------------------
   Detalles generales
   --------------------------------------------------------------- */

.ps-mono { font-family: var(--wp--preset--font-family--mono); }

.ps-declaracion {
	background: var(--wp--preset--color--accent-soft);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ps-radio);
}

.wp-block-post-content > *:first-child { margin-top: 0; }

/* Tablas y bloques anchos nunca desbordan la página. */
.wp-block-table { overflow-x: auto; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------
   Escala tipográfica en pantallas pequeñas.
   Sustituye a la tipografía fluida de WordPress, que recalcula sus
   propios límites e ignora los declarados por el tema.
   --------------------------------------------------------------- */

@media (max-width: 781px) {
	:root {
		--wp--preset--font-size--xx-large: 2.25rem;
		--wp--preset--font-size--x-large: 1.625rem;
		--wp--preset--font-size--large: 1.125rem;
	}
	.is-style-entradilla { font-size: 1.125rem; }
}

@media (min-width: 782px) and (max-width: 1100px) {
	:root {
		--wp--preset--font-size--xx-large: 2.75rem;
		--wp--preset--font-size--x-large: 1.8125rem;
	}
}

/* ---------------------------------------------------------------
   Ajustes de proporción del hero
   --------------------------------------------------------------- */

.wp-block-button__link.wp-element-button {
	padding: 13px 22px;
	font-size: 0.9375rem;
}

.wp-block-buttons { gap: 12px; }

@media (max-width: 1200px) {
	.ps-consola { font-size: 11px; }
}

/* ---------------------------------------------------------------
   Longitud de línea y ritmo vertical
   --------------------------------------------------------------- */

/* En las bandas anchas el texto llega a las cien columnas: incómodo de leer.
   Las etiquetas y las migas quedan fuera porque son de una línea. */
.wp-block-post-content p:not(.is-style-etiqueta):not(.ps-migas):not(.ps-ficha__nota),
.wp-block-post-content li {
	max-width: 74ch;
	margin-inline: 0 auto;
}

/* El número del eje no necesita una columna entera a su lado. */
@media (min-width: 782px) {
	.wp-block-columns > .wp-block-column:has(> .ps-eje__numero) {
		flex-basis: 96px !important;
		flex-grow: 0;
	}
}

/* El diagrama respiraba de más. */
.ps-cadena { padding: 24px 22px; }

/* Los enlaces de continuación se leen mejor con algo de aire por encima. */
.wp-block-post-content p > a:only-child {
	display: inline-block;
	margin-top: 0.25rem;
}

/* ---------------------------------------------------------------
   Gráficos técnicos
   --------------------------------------------------------------- */

.ps-grafico {
	margin: var(--wp--preset--spacing--40) 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ps-radio);
	background: var(--wp--preset--color--base);
	box-shadow: var(--ps-sombra);
	overflow: hidden;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.ps-grafico img {
	display: block;
	width: 100%;
	height: auto;
}

.ps-grafico figcaption {
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	padding: 12px 18px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

/* El logo de la cabecera: alto contenido para que la barra no crezca. */
.ps-cabecera .wp-block-site-logo img {
	max-height: 34px;
	width: auto;
}

/* ---------------------------------------------------------------
   Gráficos en pantallas pequeñas
   Los que tienen versión vertical (ps-grafico--adaptado, servida por el
   shortcode con <picture>) caben enteros y no necesitan nada. El resto
   conserva el desplazamiento lateral dentro de su caja.

   El degradado que insinuaba la continuación era un ::after con
   «margin-top: -100%»: los porcentajes de margen se resuelven contra el
   ANCHO del contenedor, así que restaba el ancho de la caja a su altura y
   aplastaba el gráfico —a 58 px en el teléfono y a nada en tablet—. Ahora
   la sombra va en el fondo del propio contenedor, que no toca el flujo y
   además se apaga sola al llegar al final del recorrido.
   --------------------------------------------------------------- */

@media (max-width: 900px) {
	.ps-grafico:not(.ps-grafico--adaptado) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		background-image:
			linear-gradient(to right, var(--wp--preset--color--base) 30%, rgba(255,255,255,0)),
			linear-gradient(to left, var(--wp--preset--color--base) 30%, rgba(255,255,255,0)),
			linear-gradient(to right, rgba(23,34,60,0.10), rgba(23,34,60,0)),
			linear-gradient(to left, rgba(23,34,60,0.10), rgba(23,34,60,0));
		background-position: 0 0, 100% 0, 0 0, 100% 0;
		background-repeat: no-repeat;
		background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
		background-attachment: local, local, scroll, scroll;
	}

	.ps-grafico:not(.ps-grafico--adaptado) img {
		min-width: 860px;
	}

	.ps-grafico:not(.ps-grafico--adaptado) figcaption {
		position: sticky;
		left: 0;
		min-width: 0;
	}
}

/* La cabecera en móvil: logo algo más contenido para dejar sitio al menú. */
@media (max-width: 600px) {
	.ps-cabecera .wp-block-site-logo img { max-height: 28px; }
	.ps-cabecera .wp-block-buttons { display: none; }
}

/* ---------------------------------------------------------------
   Menú desplegable en móvil
   En escritorio la navegación va alineada a la derecha; dentro del
   panel a pantalla completa eso se lee mal, así que vuelve a la izquierda.
   --------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	padding-block: 6px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink-soft);
}

/* El acceso a Contacto solo hace falta en el panel móvil: en escritorio
   ya está el botón de la cabecera. */
@media (min-width: 601px) {
	.ps-nav-contacto { display: none; }
}

/* WordPress genera una clase de layout propia con la alineación a la
   derecha; dentro del panel móvil hay que ganarle. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
	width: 100%;
}

/* Faltaba el propio <li>. Los que tienen submenú pasan a columna dentro
   del panel y, con el align-items:flex-end heredado de la navegación
   alineada a la derecha del escritorio, su enlace se iba al extremo
   derecho del bloque: «Capacidades» arrancaba en 161 px y «Aplicaciones»
   en 187 mientras «Inicio» lo hacía en 0. De ahí el zigzag. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
}

/* El panel no tenía margen lateral: los ítems de primer nivel tocaban el
   borde de la pantalla y los del submenú llevaban 32 px, así que ninguna
   indentación se leía como tal. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-inline: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 4px 0 8px var(--wp--preset--spacing--20);
	border-left: 1px solid var(--wp--preset--color--line);
	margin-left: 3px;
}

/* El aspa quedaba pegada a la esquina. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--20);
	right: var(--wp--preset--spacing--30);
	padding: 6px;
}

/* ---------------------------------------------------------------
   El menú en línea no cabe en tablet: la cabecera se parte en dos
   filas. WordPress activa el panel desplegable bajo 600px; aquí se
   extiende hasta 900px, que es donde el menú deja de caber.
   --------------------------------------------------------------- */

@media (max-width: 900px) {
	.ps-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.ps-cabecera .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}