/*
 * Inprodi Header — scoped, self-contained styles.
 *
 * Transparent bar overlaying the hero (absolute, no layout height so the hero
 * stays full-screen). Logo left, inline nav right on desktop. Below 1024px the
 * nav collapses into a hamburger that opens a full-screen menu with the links
 * and social icons at the bottom. White text; namespaced under .inprodi-header.
 */

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

/* Fixed bar overlaying the page. Transparent at the top (clean over the hero);
   turns into frosted glass once the page is scrolled (.is-scrolled, added by JS).
   OJO — el cristal esmerilado va en el ::before, NO en el <header>: un elemento
   con `backdrop-filter` (igual que con `filter` o `transform`) se convierte en
   BLOQUE CONTENEDOR de sus descendientes `position: fixed`. Con el filtro puesto
   en el header, el menú de móvil (fixed, inset: 0) dejaba de medirse contra la
   ventana y se encogía a la altura de la barra: al hacer scroll y abrir la
   hamburguesa, el menú salía roto dentro del header. En el pseudoelemento el
   mismo efecto se ve idéntico y el header sigue sin ser bloque contenedor. */
.inprodi-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
}

.inprodi-header::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Detrás de todo el contenido del header (que va sin z-index) y sin robar
	   clics. El header es transparente, así que nada lo tapa. */
	z-index: -1;
	pointer-events: none;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	/* Base state (top of page): the blur is NOT transitioned here, so when the
	   header expands back to the top it drops the blur instantly — no smeary,
	   lingering blur over the hero. Only the tint/border fade. */
	transition: background-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
}

.inprodi-header.is-scrolled::before {
	background-color: rgba(17, 24, 39, 0.22);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
	border-bottom-color: rgba(255, 255, 255, 0.10);
	/* Scrolling DOWN into this state: the blur is transitioned here, so it fades in
	   smoothly. (Scrolling back up reverts to the base rule above, which has no
	   blur transition — so it disappears instantly instead of smearing.) */
	transition: background-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, -webkit-backdrop-filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), backdrop-filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Con el menú de móvil abierto la barra se queda limpia: el cristal del menú ya
   cubre la pantalla entera, y dos capas de blur superpuestas ensucian la parte
   de arriba. */
.inprodi-header.menu-open::before {
	opacity: 0;
}

/* Compact bar once scrolled: slimmer padding + smaller logo, so the frosted-glass
   header takes up noticeably less height than at the top of the page.

   ⚠ ESTE ALTO ESTÁ COPIADO EN OTRO SITIO. La barra de tabs de la ficha de
   inspiración se pega justo debajo del header, y su `top` es el token
   `--insp-headh` de inspiracion-single.css, que vale la suma de padding×2 +
   max-height del logo de aquí (80px escritorio, 60px móvil). Si cambias
   cualquiera de esos números, ve allí y rehaz la suma: si sobra, se ve una
   franja de página colándose entre el header y los tabs. */
.inprodi-header.is-scrolled .inprodi-header__inner {
	padding-top: 15px;
	padding-bottom: 15px;
}

.inprodi-header.is-scrolled .inprodi-header__logo-img {
	max-height: 50px;
}

.inprodi-header__inner {
	width: 100%;
	max-width: 80rem; /* max-w-7xl */
	margin: 0 auto;
	padding: 30px 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	transition: padding 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Logo */
.inprodi-header__logo {
	position: relative;
	z-index: 110; /* stays above the open menu so it never moves / re-enters */
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #ffffff;
}

.inprodi-header__logo-img {
	display: block;
	max-height: 74px;
	width: auto;
	transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

/* Con el menú abierto el logo lo pone el propio menú (.inprodi-header__menu-logo,
   más abajo) y el de la barra se apaga. Como son la misma imagen en el mismo
   sitio, el relevo no se ve: solo cambia de dueño.

   Tres cosas que parecen manías y no lo son:
   1. `:has(.inprodi-header__menu-logo)` — el CSS y el HTML pueden ir
      desacompasados: el CSS se recarga solo porque lleva `?ver=` en la URL, pero
      el HTML puede venir de una caché de página con el marcado anterior, que aún
      no tiene el logo del menú. Sin esta condición, ese cruce apagaría el logo de
      la barra sin que nadie tomara el relevo y el menú se quedaría SIN logo. Así,
      si el marcado es antiguo la regla ni se aplica y se ve como antes.
   2. Se apaga la <img> y no el <a>: el <a> lleva la animación de entrada con
      fill-mode `both`, que deja `opacity: 1` fijado y ganaría a esta regla.
   3. Se acota a `__inner` porque el logo del menú usa esta misma clase de imagen. */
.inprodi-header.menu-open:has(.inprodi-header__menu-logo) .inprodi-header__inner .inprodi-header__logo-img {
	opacity: 0;
}

.inprodi-header__logo-text {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: 1.5rem; /* 24px */
	line-height: 1;
	letter-spacing: 0.02em;
	color: #ffffff;
}

/* Inline nav (desktop) */
.inprodi-header__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 2.25rem;
}

.inprodi-header__nav a {
	color: #ffffff;
	font-family: var(--nk-font-sans);
	font-size: 17px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

/* Super-minimal hover: a soft, quiet fade — no underline. */
.inprodi-header__nav a:hover {
	opacity: 0.55;
}

/* Current page: a 4px terracotta dot under the label. Kept as a dot (not an
   underline) to stay in the header's minimal language, and in the brand terra
   so it reads on both the white nav and the dark nav of the light header. */
.inprodi-header__nav a {
	position: relative;
}

.inprodi-header__nav a.is-current::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background-color: #cf8a44;
}

/* Bloque derecho: nav + idioma + hamburguesa */
.inprodi-header__right {
	display: flex;
	align-items: center;
	gap: 2.25rem;
}

/* ---- Conmutador de idioma (TranslatePress) ----
   Disparador con el código del idioma en curso + una flechita (ES ⌄), que
   despliega el resto de idiomas con su nombre completo. Sin caja ni borde: el
   disparador es texto pelado, en la misma línea minimalista que el nav, pero más
   pequeño y en versalitas para que lea como control de interfaz. Se queda por
   encima del menú de móvil abierto (z-index 110, igual que el logo y la
   hamburguesa), así se puede cambiar de idioma sin cerrar el menú. */
.inprodi-header__lang {
	position: relative;
	z-index: 110;
	color: #ffffff;
}

.inprodi-header__lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-family: var(--nk-font-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.inprodi-header__lang-toggle:hover {
	opacity: 0.65;
}

.inprodi-header__lang-caret {
	display: block;
	width: 9px;
	height: auto;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Abierto: la flecha se da la vuelta. */
.inprodi-header__lang.is-open .inprodi-header__lang-caret {
	transform: rotate(180deg);
}

/* Panel desplegable: mismo cristal esmerilado oscuro que el header al hacer
   scroll, para que los dos elementos se lean como la misma pieza. */
.inprodi-header__lang-menu {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: 1;
	min-width: 150px;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	background-color: rgba(17, 24, 39, 0.55);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	backdrop-filter: blur(18px) saturate(130%);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.inprodi-header__lang.is-open .inprodi-header__lang-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.inprodi-header__lang-item {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-family: var(--nk-font-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0; /* nombres completos, no códigos: sin tracking de versalitas */
	white-space: nowrap;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.25s ease, background-color 0.25s ease;
}

.inprodi-header__lang a.inprodi-header__lang-item:hover {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.1);
}

/* El idioma en curso: blanco y con el mismo punto terracota que marca la página
   actual en el nav. No es enlace — ya estás en él. */
.inprodi-header__lang-item.is-current {
	position: relative;
	padding-right: 26px;
	color: #ffffff;
	cursor: default;
}

.inprodi-header__lang-item.is-current::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 12px;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background-color: #cf8a44;
}

/* Header claro (páginas de fondo crema): azul de marca y cristal crema. */
.inprodi-header--light .inprodi-header__lang {
	color: #1c3f58;
}

.inprodi-header--light .inprodi-header__lang-menu {
	border-color: rgba(28, 63, 88, 0.12);
	background-color: rgba(248, 238, 231, 0.95);
	-webkit-backdrop-filter: blur(18px) saturate(120%);
	backdrop-filter: blur(18px) saturate(120%);
}

.inprodi-header--light .inprodi-header__lang-item {
	color: rgba(28, 63, 88, 0.7);
}

.inprodi-header--light .inprodi-header__lang a.inprodi-header__lang-item:hover {
	color: #1c3f58;
	background-color: rgba(28, 63, 88, 0.07);
}

.inprodi-header--light .inprodi-header__lang-item.is-current {
	color: #1c3f58;
}

/* Con el menú de móvil abierto el fondo es oscuro siempre, también en las
   páginas de header claro: el conmutador vuelve al blanco para seguir leyéndose. */
.inprodi-header.menu-open .inprodi-header__lang {
	color: #ffffff;
}

/* Hamburger toggle (mobile) */
.inprodi-header__toggle {
	display: none; /* shown below lg */
	position: relative;
	z-index: 110; /* stays above the open menu so it doubles as the close (X) */
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* Two lines that morph into an X while the menu is open. */
.inprodi-header__toggle span {
	position: absolute;
	left: 3px;
	right: 3px;
	height: 2px;
	border-radius: 2px;
	background-color: #ffffff;
	transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1), top 0.32s cubic-bezier(0.65, 0, 0.35, 1);
}

.inprodi-header__toggle span:nth-child(1) { top: 11px; }
.inprodi-header__toggle span:nth-child(2) { top: 17px; }

.inprodi-header.menu-open .inprodi-header__toggle span:nth-child(1) {
	top: 14px;
	transform: rotate(45deg);
}

.inprodi-header.menu-open .inprodi-header__toggle span:nth-child(2) {
	top: 14px;
	transform: rotate(-45deg);
}

/* ---- Light header (dark logo + dark nav on light-background pages) ----
   Used on the inspiración detail page and Contacto, whose top is light/cream.
   At the top of the page it stays fully transparent (no bg, no border) just
   like the normal header — only the logo/nav colors flip to dark. On scroll it
   turns into frosted-cream glass (instead of the default dark). */
.inprodi-header--light .inprodi-header__logo,
.inprodi-header--light .inprodi-header__logo-text {
	color: #1c3f58;
}

.inprodi-header--light .inprodi-header__nav a {
	color: #1c3f58;
}

.inprodi-header--light .inprodi-header__toggle span {
	background-color: #1c3f58;
}

/* El cristal va en el ::before por lo mismo que el header oscuro: si el filtro
   lo lleva el <header>, el menú de móvil (fixed) se encierra dentro de la barra. */
.inprodi-header--light.is-scrolled::before {
	background-color: rgba(248, 238, 231, 0.90);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	backdrop-filter: blur(16px) saturate(120%);
	border-bottom-color: rgba(28, 63, 88, 0.12);
}

/* Con el menú abierto el fondo pasa a ser oscuro: la hamburguesa (que ahora es
   la X) tiene que volver al blanco también en las páginas de header claro. */
.inprodi-header--light.menu-open .inprodi-header__toggle span {
	background-color: #ffffff;
}

/* ---- Mobile full-screen menu ---- */
.inprodi-header__menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	padding: 28px 24px 32px;
	/* Los iconos sociales viven abajo del todo: con `inset: 0` a secas se meten
	   debajo de la barra del navegador en móvil (inset mide el viewport grande,
	   el de la barra escondida). dvh mide el visible de verdad. */
	padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
	overscroll-behavior: contain;
	/* Frosted dark glass — lower opacity so the blurred page clearly shows through. */
	background-color: rgba(17, 24, 39, 0.28);
	-webkit-backdrop-filter: blur(30px) saturate(130%);
	backdrop-filter: blur(30px) saturate(130%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

@supports (height: 100dvh) {
	.inprodi-header__menu {
		height: 100dvh; /* gana sobre `bottom: 0` del inset: 0 */
	}
}

.inprodi-header__menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


/* Logo del menú. Va en posición absoluta y NO como primer hijo del flex: así cae
   clavado donde estaba el de la barra (mismo top y mismo left que el padding de
   .inprodi-header__inner) sin empujar hacia abajo los enlaces, que siguen
   centrados en toda la altura de la pantalla.
   El tamaño no se declara aquí: la imagen lleva .inprodi-header__logo-img, así
   que hereda el max-height de la barra — incluido el que encoge con el scroll. */
.inprodi-header__menu-logo {
	position: absolute;
	top: 14px;
	left: 1rem;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #ffffff;
	/* El menú entra deslizándose 10px (translateY(-10px) → 0). El logo se mueve
	   con él y se notaría, porque el de la barra que va apagándose debajo está
	   quieto. Este desplazamiento contrario cancela el del padre en los dos
	   estados, así que el logo se queda clavado y solo hace el fundido. */
	transform: translateY(10px);
	transition: transform 0.35s ease;
}

.inprodi-header__menu.is-open .inprodi-header__menu-logo {
	transform: none;
}

/* La barra encoge su padding al hacer scroll; el logo del menú lo sigue, o al
   abrirlo el logo daría un salto hacia abajo. */
.inprodi-header.is-scrolled .inprodi-header__menu-logo {
	top: 11px;
}

.inprodi-header__close {
	position: absolute;
	top: 22px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
}

/* Los enlaces van centrados en el hueco libre. El centrado lo da el `margin: auto`
   de la lista y NO `justify-content: center`: con centrado de flex, si la lista
   no cabe (móvil apaisado, o un menú de muchos enlaces) el desbordamiento se va
   por arriba y no hay forma de alcanzarlo con el scroll. Con `margin: auto` el
   navegador lo pega arriba y sí se puede desplazar. */
.inprodi-header__menu-nav {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Sangrado a la izquierda para que quepa el punto de la página actual.
	   Hace falta porque `overflow-y: auto` obliga al navegador a poner también
	   `overflow-x: auto`, y entonces el nav RECORTA todo lo que se salga de su
	   caja de relleno: el punto, que va en negativo, desaparecía.
	   El margen negativo y el relleno son iguales a propósito: se anulan, así que
	   el borde de recorte se corre a la izquierda pero las etiquetas se quedan
	   exactamente donde estaban, alineadas con los iconos sociales. */
	margin-left: -20px;
	padding-left: 20px;
}

.inprodi-header__menu-nav ul {
	list-style: none;
	margin: auto 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.inprodi-header__menu-nav a {
	color: #ffffff;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 2rem; /* 32px */
	line-height: 1.1;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.inprodi-header__menu-nav a:hover {
	opacity: 0.7;
}

/* Página actual dentro del menú a pantalla completa: el mismo punto terracota,
   A LA IZQUIERDA de la etiqueta.

   Va en `position: absolute`, o sea FUERA del flujo, y ese es el truco: el punto
   no ocupa sitio, así que las etiquetas no se mueven ni un píxel y siguen
   alineadas con los iconos sociales de abajo. Solo el actual pinta el punto y
   ningún otro necesita reservar hueco.

   Las cuentas del hueco: el menú tiene 24px de padding lateral, así que con
   `left: -14px` el punto cae a 10px del borde de la pantalla y deja 8px de aire
   hasta el texto.

   Lo de medir en `em` y no con `top: 50%`: el 50% se mide sobre TODA la altura
   del enlace, y "Inspiraciones de viaje" parte en dos líneas en pantalla
   estrecha — ahí el punto se iría al centro del bloque, entre las dos líneas.
   En em queda siempre sobre la PRIMERA línea, que es donde empieza a leerse.

   Y por qué 0.64em y no 0.5em (que sería lo intuitivo): el `top` se mide desde
   lo alto de la caja de la fuente, no desde donde empiezan a verse las letras.
   Playfair Display tiene mucho ascendente, así que ese hueco de arriba deja el
   0.5em casi 6px por encima del texto. Medido a 32px sobre la fuente real: el
   centro de la mayúscula cae en 0.575em y el de la x en 0.682em. Como la
   etiqueta es casi toda minúscula, el centro óptico está entre los dos.
   Si algún día cambia la fuente del menú, hay que volver a medir.

   Esto es solo de móvil por construcción: el menú a pantalla completa no existe
   a partir de 1024px. El nav de escritorio conserva su punto debajo (regla
   aparte, más arriba). */
.inprodi-header__menu-nav a {
	position: relative;
}

.inprodi-header__menu-nav a.is-current::after {
	content: '';
	position: absolute;
	left: -14px;
	top: 0.64em;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background-color: #cf8a44;
}

.inprodi-header__menu-social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.inprodi-header__menu-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: #ffffff;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.inprodi-header__menu-social a:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
}

.inprodi-header__menu-social svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* ---- Breakpoints ---- */
@media (min-width: 640px) {
	.inprodi-header__inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	/* El logo del menú se pega al mismo margen que el de la barra. */
	.inprodi-header__menu-logo {
		left: 1.5rem;
	}
}

/* Desktop: inline nav, no hamburger, menu never shown. */
@media (min-width: 1024px) {
	.inprodi-header__inner {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.inprodi-header__nav {
		display: block;
	}
	.inprodi-header__toggle {
		display: none;
	}
	.inprodi-header__menu {
		display: none;
	}
}

/* Below lg: hide inline nav, show hamburger. Slimmer bar on mobile. */
@media (max-width: 1023px) {
	.inprodi-header__nav {
		display: none;
	}
	.inprodi-header__toggle {
		display: block;
	}
	.inprodi-header__inner {
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.inprodi-header__logo-img {
		/* Marca ancha en pantalla estrecha: a 54px se comía la barra y quedaba
		   pegada al idioma + hamburguesa. 44px deja aire de sobra y el wordmark
		   se sigue leyendo. */
		max-height: 44px;
	}
	.inprodi-header.is-scrolled .inprodi-header__logo-img {
		max-height: 38px;
	}
	.inprodi-header.is-scrolled .inprodi-header__inner {
		padding-top: 11px;
		padding-bottom: 11px;
	}
	/* Sin el nav por medio, idioma y hamburguesa se juntan: el hueco de escritorio
	   (2.25rem) los dejaría flotando separados en la esquina. */
	.inprodi-header__right {
		gap: 1rem;
	}
	.inprodi-header__lang {
		font-size: 12px;
	}
	/* Área de toque de 44px sin tocar el dibujo: la hamburguesa se sigue viendo
	   de 30px y el código de idioma sigue en su sitio, pero el dedo tiene el
	   margen que pide cualquier guía de accesibilidad. */
	.inprodi-header__toggle::after {
		content: '';
		position: absolute;
		top: -7px;
		right: -7px;
		bottom: -7px;
		left: -7px;
	}
	.inprodi-header__lang-toggle {
		padding: 12px 6px;
		margin: -12px -6px;
	}
}

/* ---- Entrance animation on page load ---- */
@keyframes inprodi-header-intro {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}

.inprodi-header__logo {
	animation: inprodi-header-intro 0.7s ease-out 0.2s both;
}

.inprodi-header__toggle {
	animation: inprodi-header-intro 0.7s ease-out 0.35s both;
}

.inprodi-header__nav li {
	animation: inprodi-header-intro 0.7s ease-out both;
}

.inprodi-header__nav li:nth-child(1) { animation-delay: 0.35s; }
.inprodi-header__nav li:nth-child(2) { animation-delay: 0.45s; }
.inprodi-header__nav li:nth-child(3) { animation-delay: 0.55s; }
.inprodi-header__nav li:nth-child(4) { animation-delay: 0.65s; }
.inprodi-header__nav li:nth-child(5) { animation-delay: 0.75s; }

/* El idioma entra el último, cerrando la cascada del menú. */
.inprodi-header__lang {
	animation: inprodi-header-intro 0.7s ease-out 0.85s both;
}

/* ---- Selectores propios de TranslatePress ----
   El plugin pinta su bolita fija en una esquina (#trp-floater-ls) y envuelve
   cualquier otro selector suyo (shortcode, menú, widget) en estas clases. El
   tema los sustituye TODOS por el conmutador del header, así que se ocultan
   aquí para que no aparezcan duplicados.
   Lo suyo es apagar además el flotante en el plugin (TranslatePress → Ajustes →
   "Selector de idioma flotante" → No); esto es la red de seguridad por si
   alguien lo vuelve a encender desde el panel.
   OJO: si algún día se quiere volver a usar el selector del plugin en algún
   sitio (p. ej. el shortcode dentro del footer), hay que quitar de aquí la
   clase correspondiente — si no, se insertará y no se verá. */
#trp-floater-ls,
.trp-language-switcher,
.trp-language-switcher-container,
.trp_language_switcher_shortcode,
.trp_language_switcher_widget {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.inprodi-header,
	.inprodi-header__inner,
	.inprodi-header__logo-img,
	.inprodi-header__menu,
	.inprodi-header__menu-logo,
	.inprodi-header__nav a,
	.inprodi-header__menu-nav a {
		transition: none;
	}
	.inprodi-header__lang-toggle,
	.inprodi-header__lang-caret,
	.inprodi-header__lang-menu,
	.inprodi-header__lang-item {
		transition: none;
	}
	.inprodi-header__logo,
	.inprodi-header__toggle,
	.inprodi-header__nav li,
	.inprodi-header__lang {
		animation: none;
	}
}