/*
 * Andaventura — cabecera, menú móvil y pie.
 *
 * La cabecera empieza sin caja sobre el marfil del pliegue, se materializa en
 * cristal al dejarlo atrás y se invierte a verde mientras cruza un tramo
 * oscuro. Los tres estados están documentados en el bloque CABECERA.
 */

/* ================================================================ BOTONES */

/*
 * Primitivo global: lo usan el mirador, el cierre y las plantillas interiores.
 * Vivía dentro del bloque del hero y al rehacer la portada se quedó huérfano;
 * aquí no depende de ninguna sección.
 */

.av-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.6rem;
	border-radius: 999px;
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	overflow: hidden;
	transition:
		color var(--av-fast) var(--av-ease),
		border-color var(--av-fast) var(--av-ease),
		transform 140ms var(--av-ease);
}

/* Pulsar tiene que notarse: confirma que la interfaz ha oído. */
.av-btn:active { transform: scale(0.97); }

.av-btn .av-icon { transition: transform var(--av-fast) var(--av-ease); }

@media (hover: hover) and (pointer: fine) {
	.av-btn:hover .av-icon { transform: translateX(4px); }
}

.av-btn--solid { background: var(--av-ivory); color: var(--av-ink); }

/* El relleno crece desde abajo en lugar de cambiar de color de golpe. */
.av-btn--solid::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--av-clay);
	transform: translateY(101%);
	transition: transform var(--av-mid) var(--av-ease);
}

/*
 * El fantasma toma su borde del color de texto heredado, así funciona igual
 * sobre marfil que sobre verde sin necesitar una variante por contexto.
 */
.av-btn--ghost {
	border: 1px solid currentColor;
	color: inherit;
	opacity: 0.9;
}

.av-btn--ghost:hover { opacity: 1; }

.av-on-dark .av-btn--ghost { color: var(--av-on-forest); }

.av-btn--ink { background: var(--av-ink); color: var(--av-ivory); }
.av-btn--ink::before { background: var(--av-clay); }

@media (hover: hover) and (pointer: fine) {
	.av-btn--solid:hover { color: var(--av-ivory); }
	.av-btn--solid:hover::before { transform: translateY(0); }
}

/* ================================================================ CABECERA */

/*
 * Tres estados y una inversión:
 *
 *   reposo    — no hay barra. El logo vive sobre el marfil del pliegue, sin
 *               caja, sin filete y sin velo. Nació con un degradado oscuro
 *               para sobrevivir sobre la fotografía a sangre del hero
 *               anterior; con la portada en marfil ese velo era una mancha y
 *               el logo claro encima resultaba ilegible.
 *   materia   — pasado el pliegue se condensa: menos alto y un cristal
 *               esmerilado que deja ver el movimiento de la página debajo.
 *               Una barra blanca opaca sobre fondo blanco no se lee como
 *               cabecera, se lee como un corte.
 *   retirada  — al bajar se va; al subir vuelve, ya materializada.
 *
 * La inversión (`is-inverted`) la pasa a verde mientras cruza un tramo
 * oscuro: la barra no puede partir la sección de Venezuela con un rectángulo
 * de otro color.
 *
 * El color de los rótulos lo hereda todo de `.av-header`, así cada estado se
 * declara una vez y no en seis reglas paralelas.
 */

.av-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--av-z-header);
	height: var(--av-header-h);
	display: flex;
	align-items: center;
	color: var(--av-ink-body);
	--av-header-pad: clamp(1.6rem, 3.2vw, 4rem);
	will-change: transform;
	transition:
		height var(--av-mid) var(--av-ease),
		color var(--av-mid) var(--av-ease),
		transform var(--av-mid) var(--av-ease);
}

/*
 * El cristal va en la capa de fondo, no en la cabecera: así se funde con una
 * opacidad y el `backdrop-filter` desaparece con él en el estado de reposo.
 */
.av-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: color-mix(in oklab, var(--av-ivory) 88%, transparent);
	box-shadow:
		0 1px 0 color-mix(in oklab, var(--av-ink-hair) 65%, transparent),
		0 14px 30px -28px rgb(15 40 32 / 0.6);
	opacity: 0;
	transition:
		opacity var(--av-mid) var(--av-ease),
		background-color var(--av-mid) var(--av-ease);
	pointer-events: none;
}

@supports (backdrop-filter: blur(2px)) {
	.av-header::before {
		background: color-mix(in oklab, var(--av-ivory) 84%, transparent);
		-webkit-backdrop-filter: blur(18px) saturate(1.25);
		backdrop-filter: blur(18px) saturate(1.25);
	}
}

.av-header.is-solid {
	height: calc(var(--av-header-h) - 20px);
}

/*
 * En móvil la barra ya nace baja (64px): restarle otros 20 la dejaba en 44 y
 * la marca —de alto fijo por su ancho en clamp()— sobresalía por debajo y se
 * montaba sobre el texto de la página.
 */
@media (max-width: 780px) {
	.av-header.is-solid { height: calc(var(--av-header-h) - 10px); }
	.av-header .av-logo { height: 32px; }
	.av-header.is-solid .av-logo { height: 29px; }
}

.av-header.is-solid::before { opacity: 1; }

/* ---- inversión sobre tramo oscuro ---- */

.av-header.is-inverted { color: var(--av-on-forest); }

/*
 * Invertida no hay cristal: el verde va opaco y exactamente igual que el de
 * la sección. Con cualquier transparencia, en la costura curva se cuela el
 * marfil de arriba y la barra queda de un verde distinto al del tramo que
 * cruza — que es justo lo que se venía a arreglar. Opaca desaparece.
 */
.av-header.is-inverted::before {
	background: var(--av-forest);
	box-shadow: none;
}

@supports (backdrop-filter: blur(2px)) {
	.av-header.is-inverted::before {
		background: var(--av-forest);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/*
 * El interior no usa el canalón general de la portada: en pantallas anchas ese
 * canalón llega a 72px, pero por debajo de 1200 se queda en 4vw y la marca se
 * pegaba al borde. Aquí el mínimo es fijo y generoso, y el logo lleva además
 * su propio margen: es lo primero que se lee y necesita aire propio.
 */
.av-header__inner {
	position: relative;
	width: min(100% - var(--av-header-pad) * 2, 1660px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 2.2vw, 2.4rem);
}

/* ---- logo ---- */

.av-logo-link {
	position: relative;
	display: block;
	flex: none;
	/* El área de clic pasa de los bordes del dibujo: el logo es el enlace a
	   la portada más usado del sitio y no puede pedir puntería. */
	padding: 10px 12px;
	margin-inline-start: -12px;
	border-radius: 6px;
}

.av-logo-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/*
 * La marca se mide contra la altura de la barra, no contra el viewport. Con un
 * ancho en clamp() el dibujo ocupaba el 100% del alto de la barra compacta y se
 * leía apretado; ahora deja siempre el mismo margen arriba y abajo.
 */
.av-logo {
	position: relative;
	flex: none;
	display: block;
	height: calc(var(--av-header-h) * 0.46);
	width: auto;
	aspect-ratio: 547 / 84;
	transition: height var(--av-mid) var(--av-ease);
}

.av-header.is-solid .av-logo { height: calc(var(--av-header-h) * 0.42); }

.av-logo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity var(--av-mid) var(--av-ease);
}

/*
 * Dentro de la cabecera manda la tinta oscura: el fondo es marfil en los tres
 * estados. La tinta clara solo aparece invertida. Fuera de la cabecera (el
 * menú móvil, que es verde) el logo claro sigue siendo el que vale, de ahí
 * que las reglas vayan acotadas a `.av-header`.
 */
.av-header .av-logo__light { opacity: 0; }
.av-header .av-logo__dark { opacity: 1; }
.av-header.is-inverted .av-logo__light { opacity: 1; }
.av-header.is-inverted .av-logo__dark { opacity: 0; }

/* ---- capítulo en curso ---- */

/*
 * El nombre del tramo que se está leyendo, junto al logo. No es decoración:
 * en una portada de nueve capítulos y 9 viewports es la única señal de dónde
 * está uno. Decorativo para el lector de pantalla — la estructura real la dan
 * los encabezados de cada sección.
 */
.av-header__chapter {
	display: none;
	align-items: center;
	gap: 0.85rem;
	margin-inline-start: 1.35rem;
	font-family: var(--av-sans);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--av-ink-muted);
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity var(--av-fast) var(--av-ease),
		transform var(--av-fast) var(--av-ease);
	pointer-events: none;
	white-space: nowrap;
}

.av-header__chapter::before {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
}

.av-header.is-inverted .av-header__chapter { color: var(--av-on-forest-muted); }

.av-header.is-solid .av-header__chapter.is-on {
	opacity: 1;
	transform: none;
}

@media (min-width: 1021px) {
	.av-header__chapter { display: flex; }
}

/* ---- navegación ---- */

.av-nav {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 2.2vw, 2.1rem);
}

.av-nav__link {
	position: relative;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	color: inherit;
	padding-block: 0.4rem;
}

/* Subrayado que crece desde la izquierda; al salir se retira por la derecha. */
.av-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0.1rem;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--av-fast) var(--av-ease);
}

.av-nav__link:hover::after,
.av-nav__link:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.av-nav__link--cta {
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	transition: background-color var(--av-fast) var(--av-ease), color var(--av-fast) var(--av-ease);
}

.av-nav__link--cta::after { display: none; }

.av-nav__link--cta:hover,
.av-nav__link--cta:focus-visible {
	background: var(--av-ink);
	color: var(--av-ivory);
}

.av-header.is-inverted .av-nav__link--cta:hover,
.av-header.is-inverted .av-nav__link--cta:focus-visible {
	background: var(--av-on-forest);
	color: var(--av-forest);
}

/* ---- destinos: desplegable ---- */

.av-nav__group { position: relative; }

.av-nav__link--drop {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: inherit;
	cursor: pointer;
}

/* Punta de flecha dibujada con dos bordes: un carácter tipográfico se
   desalinea con la línea base y un SVG más para esto no compensa. */
.av-nav__chev {
	width: 6px;
	height: 6px;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.55;
	transition: transform var(--av-fast) var(--av-ease), opacity var(--av-fast) var(--av-ease);
}

.av-nav__group.is-open .av-nav__chev {
	transform: translateY(1px) rotate(225deg);
	opacity: 1;
}

/*
 * Dos destinos, no un mega menú. El panel cuelga alineado con su disparador y
 * se abre con un gesto corto: es navegación, no una escena.
 */
.av-drop {
	position: absolute;
	top: calc(100% + 0.9rem);
	left: 50%;
	width: max-content;
	min-width: 230px;
	padding: 0.5rem;
	background: var(--av-ivory);
	border: 1px solid var(--av-ink-hair);
	border-radius: 10px;
	box-shadow: 0 26px 50px -30px rgb(15 40 32 / 0.55);
	opacity: 0;
	transform: translate(-50%, -8px);
	transition:
		opacity var(--av-fast) var(--av-ease),
		transform var(--av-fast) var(--av-ease);
}

/* Puente invisible entre el botón y el panel: sin él, el hueco de 0.9rem
   cancela el hover a mitad de camino. */
.av-drop::before {
	content: '';
	position: absolute;
	inset: -0.9rem 0 100% 0;
}

.av-nav__group.is-open .av-drop {
	opacity: 1;
	transform: translate(-50%, 0);
}

.av-drop__item {
	display: block;
	padding: 0.7rem 0.85rem;
	border-radius: 7px;
	color: var(--av-ink-body);
	transition: background-color var(--av-fast) var(--av-ease);
}

.av-drop__item:hover,
.av-drop__item:focus-visible { background: var(--av-ivory-deep); }

.av-drop__label {
	display: block;
	font-family: var(--av-display);
	font-size: 1.12rem;
	line-height: 1.2;
	color: var(--av-ink-strong);
}

.av-drop__note {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.78rem;
	color: var(--av-ink-muted);
}

.av-header__search {
	display: grid;
	cursor: pointer;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: inherit;
	transition: background-color var(--av-fast) var(--av-ease);
}

.av-header__search:hover { background: color-mix(in oklab, var(--av-ink) 8%, transparent); }
.av-header.is-inverted .av-header__search:hover { background: rgb(255 255 255 / 0.14); }

/* ---- botón del menú móvil ---- */

.av-burger {
	display: none;
	width: 44px;
	height: 44px;
	margin-inline-start: auto;
	place-items: center;
	color: inherit;
}

.av-burger__box { display: block; width: 22px; height: 12px; position: relative; }

.av-burger__box span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--av-fast) var(--av-ease), opacity 120ms linear;
}

.av-burger__box span:nth-child(1) { top: 0; }
.av-burger__box span:nth-child(2) { bottom: 0; }

@media (max-width: 1020px) {
	.av-nav, .av-header__search { display: none; }
	.av-burger { display: grid; }
}

/* ============================================================ MENÚ MÓVIL */

/*
 * No es la barra de escritorio comprimida: es su propia navegación. Los
 * destinos se despliegan en su sitio como una lista corta, el CTA es un botón
 * de verdad y el buscador entra por el mismo panel que en escritorio.
 */
.av-menu:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: var(--av-z-menu);
	background: var(--av-forest);
	color: var(--av-on-forest);
	display: flex;
	flex-direction: column;
	padding: var(--av-s-3) var(--av-gutter) var(--av-s-4);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Cerrado no debe ser alcanzable por teclado ni por lector. */
	visibility: hidden;
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transition:
		clip-path var(--av-mid) var(--av-ease),
		opacity var(--av-fast) linear,
		visibility 0s linear var(--av-mid);
}

.av-menu.is-open {
	visibility: visible;
	opacity: 1;
	clip-path: inset(0 0 0 0);
	transition:
		clip-path var(--av-slow) var(--av-ease),
		opacity 160ms linear,
		visibility 0s;
}

.av-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--av-header-h);
	flex: none;
}

.av-menu__top .av-logo { height: 32px; width: auto; aspect-ratio: 547 / 84; }

.av-menu__close {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.av-menu__nav { margin-block: auto; }

.av-menu__list {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-block: var(--av-s-3);
}

/*
 * Cada línea entra desde su propia máscara, escalonada por `--av-i`. El
 * escalonado va en la variable y no en seis reglas `:nth-child`: el menú tiene
 * ahora un número variable de entradas.
 */
.av-menu__item { overflow: hidden; }

.av-menu__link,
.av-menu__label,
.av-menu__item--cta > * {
	display: block;
	transform: translateY(105%);
	transition: transform var(--av-mid) var(--av-ease);
}

.av-menu.is-open .av-menu__link,
.av-menu.is-open .av-menu__label,
.av-menu.is-open .av-menu__item--cta > * {
	transform: translateY(0);
	transition-delay: calc(90ms + var(--av-i, 0) * 55ms);
}

.av-menu__link,
.av-menu__label {
	font-family: var(--av-display);
	font-size: clamp(1.9rem, 8vw, 2.9rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.02em;
	padding-block: 0.18rem;
}

/* El rótulo del grupo no es un enlace y no debe parecerlo. */
.av-menu__label { color: var(--av-on-forest-muted); }

.av-menu__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.35rem 0 0.9rem;
}

.av-menu__sublink {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.05rem;
	border: 1px solid var(--av-forest-line);
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--av-on-forest);
	transition: background-color var(--av-fast) var(--av-ease);
}

.av-menu__sublink:hover,
.av-menu__sublink:focus-visible { background: var(--av-forest-lift); }

.av-menu__item--group { overflow: visible; }
.av-menu__item--cta { margin-top: var(--av-s-3); }
.av-menu__item--cta .av-btn { background: var(--av-on-forest); color: var(--av-forest); }
.av-menu__item--cta .av-btn::before { background: var(--av-clay); }
.av-menu__item--cta .av-btn:hover { color: var(--av-ivory); }

.av-menu__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--av-s-2);
	padding-top: var(--av-s-3);
	border-top: 1px solid var(--av-forest-line);
	color: var(--av-on-forest-muted);
	font-size: var(--av-t-meta);
	flex: none;
}

.av-menu__search {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.1rem 0.7rem 0.9rem;
	border: 1px solid var(--av-forest-line);
	border-radius: 999px;
	color: var(--av-on-forest);
	font-size: 0.92rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--av-fast) var(--av-ease);
}

.av-menu__search:hover,
.av-menu__search:focus-visible { background: var(--av-forest-lift); }

@media (prefers-reduced-motion: reduce) {
	.av-menu { clip-path: none; }
	.av-menu__link,
	.av-menu__label,
	.av-menu__item--cta > * { transform: none; }
}

/* ==================================================================== PIE */

/*
 * El último capítulo, no un rectángulo verde. Claro como la página; el cierre
 * lo pone la palabra ANDAVENTURA a todo el ancho pisando el borde inferior.
 * La transición desde el contenido la hace el propio cierre editorial
 * (.av-closing) — aquí no hay corte de color que disimular.
 */
.av-footer {
	position: relative;
	overflow: hidden;
	background: var(--av-ivory);
	color: var(--av-ink-body);
	padding-top: var(--av-s-4);
}

.av-footer__inner { position: relative; }

.av-footer__nav {
	display: grid;
	grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr));
	gap: var(--av-s-4);
	padding-bottom: var(--av-s-4);
}

/* La primera columna no es un logo: es la frase de la casa. */
.av-footer__claim {
	font-family: var(--av-display);
	font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
	line-height: 1.25;
	color: var(--av-ink-strong);
	max-width: 18ch;
}

.av-footer__coltitle {
	font-family: var(--av-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
	margin-bottom: var(--av-s-2);
}

.av-footer__list { display: flex; flex-direction: column; gap: 0.55rem; }

.av-footer__list a {
	font-size: 0.95rem;
	color: var(--av-ink-body);
	display: inline-block;
	transition: color var(--av-fast) var(--av-ease), transform var(--av-fast) var(--av-ease);
}

@media (hover: hover) and (pointer: fine) {
	.av-footer__list a:hover { color: var(--av-forest); transform: translateX(3px); }
}

.av-footer__social { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.av-footer__social a {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border: 1px solid var(--av-ink-hair);
	border-radius: 50%;
	color: var(--av-ink-body);
	transition: background-color var(--av-fast) var(--av-ease), color var(--av-fast) var(--av-ease), border-color var(--av-fast) var(--av-ease);
}

@media (hover: hover) and (pointer: fine) {
	.av-footer__social a:hover { background: var(--av-forest); border-color: var(--av-forest); color: var(--av-ivory); }
}

.av-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--av-s-2);
	padding-block: var(--av-s-3);
	border-top: 1px solid var(--av-ink-hair);
	font-size: var(--av-t-meta);
	color: var(--av-ink-muted);
}

.av-footer__legal { display: flex; flex-wrap: wrap; gap: var(--av-s-2); }
.av-footer__legal a { transition: color var(--av-fast) var(--av-ease); }
.av-footer__legal a:hover { color: var(--av-ink-strong); }

/*
 * El cierre de marca. La palabra ocupa el ancho completo y queda cortada por
 * el borde inferior: paisaje gráfico, no texto. El detalle verde es la única
 * aparición del bosque fuera de Venezuela.
 */
.av-footer__word {
	font-family: var(--av-display);
	font-weight: 500;
	/* 12.9vw deja las once letras con tracking apretado ocupando el ancho. */
	font-size: 12.9vw;
	line-height: 0.72;
	letter-spacing: -0.03em;
	text-align: center;
	white-space: nowrap;
	color: var(--av-forest);
	opacity: 0.92;
	user-select: none;
	pointer-events: none;
	transform: translateY(0.075em); /* pisa el borde: se corta el trazo inferior */
}

@media (max-width: 1000px) {
	.av-footer__nav { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
	.av-footer__col--claim { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.av-footer__nav { grid-template-columns: 1fr; gap: var(--av-s-3); }
}

/*
 * La retirada va en `transform`, nunca en `top`: así no toca el layout en
 * cada frame. La declaración de estados vive arriba, en el bloque CABECERA.
 */
.av-header.is-away { transform: translateY(-100%); }

/* Con el menú móvil abierto la cabecera no se puede esconder. */
.av-header.is-open { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.av-header.is-away { transform: none; }
}

/* ========================================================== BUSCADOR */

/*
 * Panel propio, no un desplegable del navegador. Cae desde la cabecera —donde
 * está la lupa— en lugar de aparecer en el centro de la pantalla: el origen
 * del gesto y su resultado tienen que estar en el mismo sitio.
 *
 * Dentro es un formulario de verdad, con `action` a la búsqueda de WordPress:
 * sin JavaScript se escribe y se envía igual.
 */
/*
 * OJO con el orden de estas dos reglas. `display: flex` en una clase gana al
 * `display: none` que el navegador aplica a `[hidden]`, que es una regla de
 * agente de usuario sin especificidad. El panel cerrado seguía ocupando la
 * pantalla entera con su velo a opacidad 0: invisible, pero interceptando
 * todos los clics de la cabecera y del hero. Por eso el estado cerrado se
 * declara explícitamente y el abierto va en `:not([hidden])`.
 */
.av-search[hidden],
.av-menu[hidden] { display: none; }

.av-search:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: var(--av-z-search, 70);
	display: flex;
	flex-direction: column;
}

.av-search__veil {
	position: absolute;
	inset: 0;
	background: rgb(18 26 22 / 0.34);
	opacity: 0;
	transition: opacity var(--av-mid) var(--av-ease);
}

.av-search.is-open .av-search__veil { opacity: 1; }

.av-search__panel {
	position: relative;
	background: var(--av-ivory);
	border-bottom: 1px solid var(--av-ink-hair);
	box-shadow: 0 30px 60px -40px rgb(15 40 32 / 0.6);
	max-height: min(84vh, 760px);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(-14px);
	opacity: 0;
	transition:
		transform var(--av-mid) var(--av-ease),
		opacity var(--av-fast) var(--av-ease);
}

.av-search.is-open .av-search__panel {
	transform: none;
	opacity: 1;
}

.av-search__inner {
	width: min(100% - var(--av-header-pad, 2rem) * 2, 900px);
	margin-inline: auto;
	padding-block: clamp(1.2rem, 2.4vw, 2rem) clamp(1.6rem, 3vw, 2.6rem);
}

.av-search__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--av-s-2);
}

.av-search__title {
	font-family: var(--av-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
}

.av-search__close {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--av-ink-body);
	cursor: pointer;
	border-radius: 50%;
	transition: background-color var(--av-fast) var(--av-ease);
}

.av-search__close:hover { background: var(--av-ivory-deep); }

/*
 * El campo es la pieza principal: tipografía de titular, no de formulario.
 *
 * Acotado a `.av-search`: `av-search__form` es también la clase del formulario
 * de `searchform.php`, que se usa en la página de resultados y en el 404. Sin
 * acotar, aquella heredaba el filete inferior del panel.
 */
.av-search .av-search__form {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 0.6rem;
	padding-bottom: 0.9rem;
	border-bottom: 1.5px solid var(--av-ink-strong);
}

.av-search .av-search__form .av-icon { flex: none; color: var(--av-ink-muted); }

.av-search .av-search__field {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--av-display);
	font-size: clamp(1.4rem, 3.4vw, 2.1rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--av-ink-strong);
}

.av-search .av-search__field::placeholder { color: var(--av-ink-muted); opacity: 1; }
.av-search .av-search__field:focus { outline: none; }
.av-search .av-search__field::-webkit-search-cancel-button { display: none; }

.av-search .av-search__submit {
	flex: none;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--av-ink-hair);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--av-ink-body);
	cursor: pointer;
	transition: background-color var(--av-fast) var(--av-ease), color var(--av-fast) var(--av-ease);
}

.av-search .av-search__submit:hover { background: var(--av-ink); color: var(--av-ivory); }

.av-search__body { margin-top: var(--av-s-3); }

.av-search__hintlabel {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
	margin-bottom: 0.7rem;
}

.av-search__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.av-search__chip {
	padding: 0.5rem 1.05rem;
	border: 1px solid var(--av-ink-hair);
	border-radius: 999px;
	font-family: var(--av-display);
	font-size: 1rem;
	color: var(--av-ink-body);
	cursor: pointer;
	transition: border-color var(--av-fast) var(--av-ease), color var(--av-fast) var(--av-ease);
}

.av-search__chip:hover,
.av-search__chip:focus-visible { border-color: var(--av-clay); color: var(--av-clay); }

/* ---- resultados en vivo ---- */

.av-results { display: flex; flex-direction: column; }

/*
 * La unidad entera es el enlace: imagen, clúster, titular y extracto. Un
 * resultado en el que solo se puede pinchar el título obliga a apuntar.
 */
.av-result {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: var(--av-s-2);
	align-items: center;
	padding: 0.8rem 0.6rem;
	margin-inline: -0.6rem;
	border-radius: 8px;
	transition: background-color var(--av-fast) var(--av-ease);
}

.av-result + .av-result { border-top: 1px solid var(--av-ink-hair); }

.av-result:hover,
.av-result:focus-visible { background: var(--av-ivory-deep); }

.av-result--nomedia { grid-template-columns: minmax(0, 1fr); }

.av-result__media {
	aspect-ratio: 3 / 2;
	border-radius: 4px;
	overflow: hidden;
	background: var(--av-ivory-deep);
}

.av-result__media img { width: 100%; height: 100%; object-fit: cover; }

.av-result__context {
	display: block;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--av-clay);
	margin-bottom: 0.15rem;
}

.av-result__title {
	display: block;
	font-family: var(--av-display);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.22;
	color: var(--av-ink-strong);
}

.av-result__excerpt {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--av-ink-muted);
}

.av-search__all {
	display: inline-block;
	margin-top: var(--av-s-2);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--av-ink-strong);
	border-bottom: 1px solid var(--av-ink-hair);
	padding-bottom: 0.2rem;
}

.av-search__all:hover { border-color: var(--av-clay); color: var(--av-clay); }

.av-search__none { font-size: 0.95rem; color: var(--av-ink-muted); max-width: 52ch; }
.av-search__none a { text-decoration: underline; }

@media (max-width: 620px) {
	.av-result { grid-template-columns: 68px minmax(0, 1fr); gap: 0.85rem; }
	.av-result__excerpt { display: none; }
	.av-search .av-search__submit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.av-search__panel { transform: none; }
}

/* Con un panel abierto la página de debajo no se mueve. */
html.av-locked { overflow: hidden; }