/**
 * Header del sitio. Mobile-first: el drawer es el caso base y el nav horizontal es la
 * excepción, no al revés.
 *
 * El breakpoint está en 1200px porque es donde los nueve ítems del menú dejan de
 * apretarse contra el logo y el botón. Por debajo, drawer.
 *
 * Depende de assets/css/base.css.
 */

.radiowp-header {
	--radiowp-header-height: 3.5rem;
	--radiowp-header-gutter: var(--radiowp-gutter);

	position: relative;
	z-index: var(--radiowp-z-header);
	background-color: var(--radiowp-color-surface);
	border-bottom: var(--radiowp-border);
}

/* La firma de la marca: el degradado del logotipo, desenrollado. La lleva lo primero de
   la página. Va como capa de fondo, no como borde, para no participar en el modelo de
   caja. El padding compensa los 3px para que la barra no encoja. */
.radiowp-header--spectrum {
	background-image: linear-gradient(
		90deg,
		var(--radiowp-color-spectrum-start),
		var(--radiowp-color-spectrum-end)
	);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 3px;
	padding-top: 3px;
}

.radiowp-header__bar {
	display: flex;
	align-items: center;
	gap: var(--radiowp-space-sm);
	max-width: var(--radiowp-container);
	min-height: var(--radiowp-header-height);
	margin-inline: auto;
	padding-inline: var(--radiowp-header-gutter);
}

/* --- Marca ---------------------------------------------------------------- */

.radiowp-header__brand {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	margin-inline-end: auto;
	text-decoration: none;
}

/* El alto manda y el ancho lo dicta la proporción del logotipo. El max-height es una
   red: pase lo que pase en el control, el logo no desborda la barra. */
.radiowp-header .radiowp-header__logo {
	display: block;
	width: auto;
	height: var(--radiowp-logo-height, 2.25rem);
	max-height: calc(var(--radiowp-header-height) - 0.75rem);
}

.radiowp-header__wordmark {
	color: var(--radiowp-color-fg);
	font-family: var(--radiowp-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
}

/* --- Acciones ------------------------------------------------------------- */

.radiowp-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--radiowp-space-xs);
}

.radiowp-header__cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--radiowp-color-accent-ink);
	border-radius: var(--radiowp-radius);
	color: var(--radiowp-color-accent-contrast);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 0.6875rem 0.875rem;
	text-decoration: none;
	transition: background-color var(--radiowp-transition);
	white-space: nowrap;
}

/* Solo el color en los estados: el tema pone `a:visited` oscuro, que en modo oscuro
   dejaba este texto gris sobre negro. */
.radiowp-header__cta:visited,
.radiowp-header__cta:hover,
.radiowp-header__cta:focus,
.radiowp-header__cta:active {
	color: var(--radiowp-color-accent-contrast);
}

.radiowp-header__cta:hover,
.radiowp-header__cta:focus-visible {
	background-color: var(--radiowp-color-accent-hover);
	color: var(--radiowp-color-accent-contrast);
}

/* --- Buscador ------------------------------------------------------------- */

.radiowp-header__search-toggle {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radiowp-radius);
	color: var(--radiowp-color-fg);
	cursor: pointer;
	transition: color var(--radiowp-transition);
}

.radiowp-header__search-toggle:hover,
.radiowp-header__search-toggle[aria-expanded="true"] {
	color: var(--radiowp-color-accent-ink);
}

/* Lupa dibujada con bordes: sin fuente de iconos. */
.radiowp-header__lens {
	position: relative;
	display: block;
	width: 0.9375rem;
	height: 0.9375rem;
	border: 2px solid currentColor;
	border-radius: 50%;
	transform: translate(-1px, -1px);
}

.radiowp-header__lens::after {
	content: "";
	position: absolute;
	right: -0.375rem;
	bottom: -0.3125rem;
	width: 0.4375rem;
	height: 2px;
	background-color: currentColor;
	transform: rotate(45deg);
}

/* La barra cuelga bajo el header, a todo el ancho, con el contenido alineado al de la
   barra principal. */
.radiowp-header__search {
	border-top: var(--radiowp-border);
	background-color: var(--radiowp-color-surface);
}

.radiowp-header__search[hidden] {
	display: none;
}

.radiowp-header__search-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--radiowp-space-xs);
	max-width: var(--radiowp-container);
	margin: 0 auto;
	padding: 0.75rem var(--radiowp-header-gutter);
}

.radiowp-header__lens--field {
	position: absolute;
	left: calc(var(--radiowp-header-gutter) + 0.875rem);
	color: var(--radiowp-color-muted);
	pointer-events: none;
}

/* Dos clases: el tema estiliza input[type="search"] y button con más peso que una. */
.radiowp-header .radiowp-header__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.75rem;
	margin: 0;
	padding: 0 0.875rem 0 2.625rem;
	border: 1px solid var(--radiowp-color-border);
	border-radius: var(--radiowp-radius);
	background-color: var(--radiowp-color-bg);
	color: var(--radiowp-color-fg);
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.radiowp-header .radiowp-header__search-input:focus {
	outline: 2px solid var(--radiowp-color-accent);
	outline-offset: -1px;
	border-color: transparent;
}

.radiowp-header .radiowp-header__search-submit {
	flex: 0 0 auto;
	height: 2.75rem;
	margin: 0;
	padding: 0 1.125rem;
	border: 0;
	border-radius: var(--radiowp-radius);
	background-color: var(--radiowp-color-accent-ink);
	color: var(--radiowp-color-accent-contrast);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--radiowp-transition);
}

.radiowp-header .radiowp-header__search-submit:hover,
.radiowp-header .radiowp-header__search-submit:focus-visible {
	background-color: var(--radiowp-color-accent-hover);
}

.radiowp-header .radiowp-header__search-close {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 -0.5rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--radiowp-color-muted);
	cursor: pointer;
}

.radiowp-header .radiowp-header__search-close:hover {
	color: var(--radiowp-color-fg);
}

.radiowp-header__search-close::before,
.radiowp-header__search-close::after {
	content: "";
	grid-area: 1 / 1;
	width: 1.125rem;
	height: 2px;
	background-color: currentColor;
	transform: rotate(45deg);
}

.radiowp-header__search-close::after {
	transform: rotate(-45deg);
}

/* En móvil el botón «Buscar» sobra: el teclado ya trae «Ir». Gana espacio el campo. */
@media (max-width: 30rem) {
	.radiowp-header .radiowp-header__search-submit {
		display: none;
	}
}

/* --- Botón de menú -------------------------------------------------------- */

.radiowp-header__toggle {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline-end: -0.5rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--radiowp-color-fg);
	cursor: pointer;
}

/* Tres trazos: el central es el elemento, los otros dos sus pseudos. */
.radiowp-header__burger,
.radiowp-header__burger::before,
.radiowp-header__burger::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--radiowp-transition), opacity var(--radiowp-transition);
}

.radiowp-header__burger {
	position: relative;
}

.radiowp-header__burger::before,
.radiowp-header__burger::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.radiowp-header__burger::before {
	top: -6px;
}

.radiowp-header__burger::after {
	top: 6px;
}

.radiowp-header__toggle[aria-expanded="true"] .radiowp-header__burger {
	background-color: transparent;
}

.radiowp-header__toggle[aria-expanded="true"] .radiowp-header__burger::before {
	transform: translateY(6px) rotate(45deg);
}

.radiowp-header__toggle[aria-expanded="true"] .radiowp-header__burger::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* --- Drawer (caso base) --------------------------------------------------- */

/* El drawer se ancla al viewport, no al header. Si encima hay una franja de promoción,
   el header ya no empieza en y=0 y el drawer le taparía la hamburguesa. El JS mide el
   borde inferior real del header al abrir y lo escribe en --radiowp-drawer-top; el
   respaldo cubre el caso de que el JS no llegue a correr. */
.radiowp-header__nav {
	position: fixed;
	inset-block: var(--radiowp-drawer-top, var(--radiowp-header-height)) 0;
	inset-inline-end: 0;
	z-index: var(--radiowp-z-header);
	width: min(88vw, 22rem);
	background-color: var(--radiowp-color-surface);
	border-inline-start: var(--radiowp-border);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--radiowp-transition), visibility var(--radiowp-transition);
	visibility: hidden;
}

.radiowp-header__nav[data-open="true"] {
	transform: translateX(0);
	visibility: visible;
}

.radiowp-header__scrim {
	position: fixed;
	inset-block: var(--radiowp-drawer-top, var(--radiowp-header-height)) 0;
	inset-inline: 0;
	z-index: var(--radiowp-z-scrim);
	background-color: rgba(22, 21, 26, 0.4);
	opacity: 0;
	transition: opacity var(--radiowp-transition);
}

.radiowp-header__scrim[data-open="true"] {
	opacity: 1;
}

.radiowp-header__menu,
.radiowp-header__submenu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.radiowp-header__item {
	border-bottom: var(--radiowp-border);
}

/* El enlace ocupa una columna y el botón del submenú la otra: tocar el texto navega,
   tocar el chevron despliega. */
.radiowp-header__item--has-submenu {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.radiowp-header__link {
	display: block;
	color: var(--radiowp-color-fg);
	font-family: var(--radiowp-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
	padding: 0.9375rem var(--radiowp-header-gutter);
	text-decoration: none;
}

/* Solo el color en los estados: el tema pone `a:visited` y `a:hover` oscuros. Va aparte
   porque una regla con estado pesa más que las de escritorio y les pisaría el tamaño. */
.radiowp-header__link:visited,
.radiowp-header__link:hover,
.radiowp-header__link:focus,
.radiowp-header__link:active {
	color: var(--radiowp-color-fg);
}

.radiowp-header__item.is-current > .radiowp-header__link {
	box-shadow: inset 3px 0 0 var(--radiowp-color-accent);
}

.radiowp-header__submenu-toggle {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-inline-end: 0.5rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--radiowp-color-muted);
	cursor: pointer;
}

.radiowp-header__chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--radiowp-transition);
}

.radiowp-header__submenu-toggle[aria-expanded="true"] .radiowp-header__chevron {
	transform: translateY(2px) rotate(-135deg);
}

/* Acordeón sin altura mágica: 0fr → 1fr anima de verdad.
   La visibilidad no es decorativa: sin ella, los enlaces del submenú cerrado siguen
   siendo alcanzables con Tab aunque midan cero. */
.radiowp-header__submenu {
	grid-column: 1 / -1;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--radiowp-transition), visibility var(--radiowp-transition);
	visibility: hidden;
}

.radiowp-header__submenu-list {
	overflow: hidden;
}

.radiowp-header__item[data-open="true"] > .radiowp-header__submenu {
	grid-template-rows: 1fr;
	visibility: visible;
}

.radiowp-header__sublink {
	display: block;
	background-color: var(--radiowp-color-surface-sunken);
	color: var(--radiowp-color-muted);
	font-size: 0.9375rem;
	padding: 0.75rem var(--radiowp-header-gutter);
	text-decoration: none;
}

/* Solo el color en los estados: el tema pone `a:visited` y `a:hover` oscuros. Va aparte
   porque una regla con estado pesa más que las de escritorio y les pisaría el tamaño. */
.radiowp-header__sublink:visited,
.radiowp-header__sublink:hover,
.radiowp-header__sublink:focus,
.radiowp-header__sublink:active {
	color: var(--radiowp-color-muted);
}

.radiowp-header__subitem + .radiowp-header__subitem .radiowp-header__sublink {
	border-top: var(--radiowp-border);
}

.radiowp-header__hint {
	margin: 0;
	padding: var(--radiowp-space-sm) var(--radiowp-header-gutter);
	color: var(--radiowp-color-muted);
	font-size: 0.875rem;
}

/* --- Volver arriba -------------------------------------------------------- */

/* No se usa el atributo `hidden`: desde `display: none` no hay transición. Con
   `visibility` el botón sale del recorrido del tabulador igual, y puede aparecer con
   suavidad. */
.radiowp-header__top {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline-end: 1rem;
	z-index: var(--radiowp-z-scrim);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background-color: var(--radiowp-color-ink);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(22, 21, 26, 0.18), 0 10px 24px rgba(22, 21, 26, 0.16);
	color: var(--radiowp-color-on-ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity var(--radiowp-transition), transform var(--radiowp-transition), visibility var(--radiowp-transition);
	visibility: hidden;
}

.radiowp-header__top[data-visible="true"] {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.radiowp-header__top:hover {
	background-color: #000000;
}

.radiowp-header__top-chevron {
	width: 0.5rem;
	height: 0.5rem;
	border-top: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	transform: translateY(1px) rotate(-45deg);
}

.radiowp-header__top:focus-visible {
	outline: 2px solid var(--radiowp-color-accent);
	outline-offset: 3px;
}

@media (min-width: 48rem) {
	.radiowp-header__top {
		inset-block-end: 1.5rem;
		inset-inline-end: 1.5rem;
	}
}

/* --- Foco ----------------------------------------------------------------- */

.radiowp-header a:focus-visible,
.radiowp-header button:focus-visible {
	outline: 2px solid var(--radiowp-color-accent);
	outline-offset: -2px;
	border-radius: var(--radiowp-radius);
}

/* --- Escritorio ----------------------------------------------------------- */

@media (min-width: 1200px) {
	.radiowp-header {
		--radiowp-header-height: 4.5rem;
	}

	.radiowp-header__bar {
		gap: var(--radiowp-space-md);
	}

	.radiowp-header__brand {
		margin-inline-end: 0;
	}

	.radiowp-header__toggle,
	.radiowp-header__scrim {
		display: none;
	}

	.radiowp-header__nav {
		position: static;
		z-index: auto;
		width: auto;
		margin-inline: auto;
		background: none;
		border: 0;
		overflow: visible;
		transform: none;
		visibility: visible;
	}

	.radiowp-header__menu {
		display: flex;
		align-items: center;
		gap: clamp(0.875rem, 1.4vw, 1.625rem);
	}

	.radiowp-header__item {
		border: 0;
	}

	.radiowp-header__item--has-submenu {
		position: relative;
		display: flex;
		gap: 0.125rem;
	}

	.radiowp-header__link {
		position: relative;
		font-size: 0.8125rem;
		font-weight: 500;
		padding: 0.375rem 0;
		white-space: nowrap;
	}

	/* Subrayado de marca: crece desde el inicio del texto, no aparece de golpe. */
	.radiowp-header__link::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		height: 2px;
		background-color: var(--radiowp-color-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--radiowp-transition);
	}

	.radiowp-header__link:hover::after,
	.radiowp-header__item.is-current > .radiowp-header__link::after {
		transform: scaleX(1);
	}

	.radiowp-header__item.is-current > .radiowp-header__link {
		box-shadow: none;
	}

	.radiowp-header__submenu-toggle {
		width: 1.25rem;
		height: 1.25rem;
		margin: 0;
	}

	.radiowp-header__chevron {
		width: 0.375rem;
		height: 0.375rem;
	}

	/* En escritorio el submenú es una tarjeta flotante, no un acordeón. */
	.radiowp-header__submenu {
		position: absolute;
		inset-block-start: calc(100% + 0.75rem);
		inset-inline-start: -0.75rem;
		display: block;
		min-width: 14rem;
		background-color: var(--radiowp-color-surface);
		border: var(--radiowp-border);
		border-radius: var(--radiowp-radius-lg);
		box-shadow: var(--radiowp-shadow);
		opacity: 0;
		transform: translateY(-0.25rem);
		transition: opacity var(--radiowp-transition), transform var(--radiowp-transition), visibility var(--radiowp-transition);
		visibility: hidden;
	}

	.radiowp-header__item[data-open="true"] > .radiowp-header__submenu {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	.radiowp-header__submenu-list {
		overflow: visible;
		padding: 0.375rem;
	}

	.radiowp-header__sublink {
		background: none;
		border-radius: var(--radiowp-radius);
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
	}

	.radiowp-header__subitem + .radiowp-header__subitem .radiowp-header__sublink {
		border: 0;
	}

	.radiowp-header__sublink:hover {
		background-color: var(--radiowp-color-surface-sunken);
		color: var(--radiowp-color-fg);
	}

	.radiowp-header__cta {
		font-size: 0.8125rem;
		padding: 0.75rem 1.125rem;
	}
}