/* Onda Motion — Overlay Menu (menú de navegación fullscreen, WIDGET)
 *
 * R5 Wave 2 (2.86.0): antes feature global; ahora widget. El widget envuelve el
 * burger en `.onda-om-trigger-wrap` y el overlay en `.onda-om`, dentro de
 * `.onda-om-widget`. Las CSS vars van inline en el wrapper del widget desde el
 * render (--onda-om-duration / --onda-om-easing / --onda-om-scrim) y por los
 * selectores de los controles de Style (--onda-om-bg / --onda-om-link /
 * --onda-om-link-max / --onda-om-burger).
 *
 * Burger fijo o en línea (líneas → X), overlay fullscreen oculto por default con
 * clip-path, nav de tipografía grande con reveal por link, fondo color/imagen/
 * video con scrim. Bulletproof responsive: clip-path %, clamp() tipografía, inset:0.
 */

/* ── Wrapper del widget ─────────────────────────────────────────────────── */
.onda-om-trigger-wrap {
	display: flex;
	align-items: center;
}

/* ── Burger ─────────────────────────────────────────────────────────────── */
.onda-om-burger {
	z-index: 2147483601;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 10px;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--onda-om-burger, #fff);
	font: inherit;
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	line-height: 1;
}

/* Posiciones FIJAS (para headers / site-wide): el burger flota en la esquina. */
.onda-om-burger--top-left,
.onda-om-burger--top-right {
	position: fixed;
	top: clamp(16px, 2.4vw, 32px);
}
.onda-om-burger--top-left { left: clamp(14px, 2vw, 40px); }
.onda-om-burger--top-right { right: clamp(14px, 2vw, 40px); }
/* En línea: queda en el flujo del widget (lo alinea .onda-om-trigger-wrap). */
.onda-om-burger--inline { position: relative; }

/* Lado del texto respecto del icono (#30). En el DOM el label va primero (a la
 * izquierda); row-reverse lo lleva a la derecha del icono. */
.onda-om-burger--text-left { flex-direction: row; }
.onda-om-burger--text-right { flex-direction: row-reverse; }

/* Icono custom (cuando no se usan las 2 líneas animadas). */
.onda-om-burger__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.onda-om-burger__icon svg { width: 1.4em; height: 1.4em; fill: currentColor; }
.onda-om-burger__icon i::before { font-size: 1.3em; }

.onda-om-burger__label {
	display: inline-block;
	min-width: 3.2em;
	text-align: left;
}

.onda-om-burger__lines {
	position: relative;
	display: inline-block;
	width: 26px;
	height: 14px;
	flex: 0 0 auto;
}

.onda-om-burger__line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1), top 0.3s ease, opacity 0.2s ease;
}

.onda-om-burger__line:nth-child(1) { top: 3px; }
.onda-om-burger__line:nth-child(2) { top: 9px; }

/* Estado abierto: las 2 líneas cruzan en X (±45°). */
.onda-om-burger.is-active .onda-om-burger__line:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}
.onda-om-burger.is-active .onda-om-burger__line:nth-child(2) {
	top: 6px;
	transform: rotate(-45deg);
}

/* Como CLOSE (botón ACTIVO, sobre el overlay) el toggle usa el color del CONTENIDO
   del menú (var --onda-om-close-color, que el runtime alimenta desde el color de los
   links; default blanco) para ser legible sobre el overlay — independiente del color
   que el Adaptive Header le dé en la PÁGINA. Se aplica por la clase .is-active, así se
   QUITA SOLO al cerrar y el botón recupera el color de la sección sin estado residual
   (clave con el clon del header sticky, que congelaba el blanco). */
.onda-om-burger.is-active {
	color: var(--onda-om-close-color, #fff) !important;
}
.onda-om-burger.is-active .onda-om-burger__label,
.onda-om-burger.is-active .onda-om-burger__icon {
	color: var(--onda-om-close-color, #fff) !important;
}
.onda-om-burger.is-active .onda-om-burger__line {
	background-color: var(--onda-om-close-color, #fff) !important;
}
.onda-om-burger.is-active .onda-om-burger__icon svg {
	fill: var(--onda-om-close-color, #fff) !important;
}

/* ── Overlay fullscreen ─────────────────────────────────────────────────── */
.onda-om {
	position: fixed;
	inset: 0;
	z-index: 99;
	overflow: hidden;
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
	-webkit-clip-path: inset(0 0 100% 0);
	color: var(--onda-om-link, #fff);
	/* Transición CSS para el fallback sin GSAP (el JS la setea inline también). */
	transition: clip-path var(--onda-om-duration, 0.9s) var(--onda-om-easing, cubic-bezier(0.165, 0.84, 0.44, 1)),
		-webkit-clip-path var(--onda-om-duration, 0.9s) var(--onda-om-easing, cubic-bezier(0.165, 0.84, 0.44, 1));
}

/* Direcciones de wipe (estado cerrado) — el JS replica estos valores. */
.onda-om[data-reveal="wipe-up"] { clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); }
.onda-om[data-reveal="wipe-left"] { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
.onda-om[data-reveal="wipe-right"] { clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); }
.onda-om[data-reveal="curtains"] { clip-path: inset(0 50% 0 50%); -webkit-clip-path: inset(0 50% 0 50%); }
.onda-om[data-reveal="fade"] {
	clip-path: inset(0 0 0 0);
	-webkit-clip-path: inset(0 0 0 0);
	opacity: 0;
	transition: opacity var(--onda-om-duration, 0.9s) var(--onda-om-easing, cubic-bezier(0.165, 0.84, 0.44, 1)),
		visibility 0s linear var(--onda-om-duration, 0.9s);
}

.onda-om.is-open {
	clip-path: inset(0 0 0 0);
	-webkit-clip-path: inset(0 0 0 0);
}
.onda-om[data-reveal="fade"].is-open {
	opacity: 1;
	transition: opacity var(--onda-om-duration, 0.9s) var(--onda-om-easing, cubic-bezier(0.165, 0.84, 0.44, 1));
}

/* ── Fondo (color / imagen / video) + scrim ─────────────────────────────── */
.onda-om__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--onda-om-bg, #051236);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.onda-om__bg video,
.onda-om__bg .onda-om__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.onda-om__bg .onda-om__poster { display: none; }

/* Scrim para legibilidad sobre imagen/video. */
.onda-om__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--onda-om-bg, #051236);
	opacity: var(--onda-om-scrim, 0);
	pointer-events: none;
}

/* ── Contenido ──────────────────────────────────────────────────────────── */
.onda-om__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: clamp(72px, 12vh, 160px) clamp(20px, 6vw, 96px) clamp(40px, 8vh, 96px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.onda-om__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.onda-om__nav li {
	margin: 0;
	overflow: hidden; /* máscara por línea para el reveal de ENTRADA */
}
/* Tras completar la entrada (clase is-revealed que pone el JS), se quita la máscara
 * del <li> para que los efectos de HOVER (skew/scale/slide/text-roll) NO se corten al
 * salirse de la caja del ítem. La máscara solo hace falta durante la entrada. */
.onda-om.is-revealed .onda-om__nav li {
	overflow: visible;
}
/* Tras la entrada, los links ya no llevan el retraso escalonado del reveal → el HOVER
 * responde al instante (antes quedaba con el transition-delay de la entrada y se sentía
 * laggy). */
.onda-om.is-revealed .onda-om__nav a {
	transition-delay: 0s !important;
}

.onda-om__nav a {
	display: inline-block;
	position: relative;
	padding: 0.04em 0;
	color: var(--onda-om-link, #fff);
	text-decoration: none;
	line-height: 1.02;
	font-size: clamp(2rem, 9vw, var(--onda-om-link-max, 120px));
	font-weight: 700;
	letter-spacing: -0.01em;
	/* Estado inicial del reveal (el JS/GSAP o el delay CSS lo animan). */
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
		transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
		color 0.3s ease;
	transition-delay: 0s;
}

/* Reveal escalonado (fallback CSS sin GSAP): delays por orden de item. */
.onda-om.is-open .onda-om__nav a { opacity: 1; transform: translateY(0); }
.onda-om.is-open .onda-om__nav li:nth-child(1) a { transition-delay: 0.30s; }
.onda-om.is-open .onda-om__nav li:nth-child(2) a { transition-delay: 0.38s; }
.onda-om.is-open .onda-om__nav li:nth-child(3) a { transition-delay: 0.46s; }
.onda-om.is-open .onda-om__nav li:nth-child(4) a { transition-delay: 0.54s; }
.onda-om.is-open .onda-om__nav li:nth-child(5) a { transition-delay: 0.62s; }
.onda-om.is-open .onda-om__nav li:nth-child(6) a { transition-delay: 0.70s; }
.onda-om.is-open .onda-om__nav li:nth-child(7) a { transition-delay: 0.78s; }
.onda-om.is-open .onda-om__nav li:nth-child(8) a { transition-delay: 0.86s; }
.onda-om.is-open .onda-om__nav li:nth-child(n + 9) a { transition-delay: 0.94s; }

/* Salida (fallback CSS sin GSAP): is-closing dispara el out de los ítems con
 * stagger INVERSO (los de abajo salen primero) usando faster transition; al
 * quitar is-open la cortina (clip-path) corre inversa con el mismo easing. El
 * JS libera el scroll-lock / restaura el foco recién al terminar la transición. */
.onda-om.is-closing .onda-om__nav a {
	opacity: 0;
	transform: translateY(24px);
	transition-duration: 0.32s, 0.32s, 0.3s;
}
.onda-om.is-closing .onda-om__nav li:nth-last-child(1) a { transition-delay: 0s; }
.onda-om.is-closing .onda-om__nav li:nth-last-child(2) a { transition-delay: 0.04s; }
.onda-om.is-closing .onda-om__nav li:nth-last-child(3) a { transition-delay: 0.08s; }
.onda-om.is-closing .onda-om__nav li:nth-last-child(4) a { transition-delay: 0.12s; }
.onda-om.is-closing .onda-om__nav li:nth-last-child(5) a { transition-delay: 0.16s; }
.onda-om.is-closing .onda-om__nav li:nth-last-child(n + 6) a { transition-delay: 0.2s; }

/* ── Hover de los ítems (#31) — presets seleccionables, 100% CSS ───────────
 * Cada preset se activa por la clase del wrapper `.onda-om--hover-<preset>` que
 * emite el render. Hover y focus-visible comparten el estilo (accesible). El
 * color de acento (presets color/underline) viene de --onda-om-hover (control),
 * con fallback al color de link. */

/* underline (DEFAULT): subrayado que crece izq → der + tinte de acento. */
.onda-om--hover-underline .onda-om__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.06em;
	width: 100%;
	height: 2px;
	background: var(--onda-om-hover, currentColor);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.onda-om--hover-underline .onda-om__nav a:hover,
.onda-om--hover-underline .onda-om__nav a:focus-visible {
	color: var(--onda-om-hover, var(--onda-om-link, #fff));
}
.onda-om--hover-underline .onda-om__nav a:hover::after,
.onda-om--hover-underline .onda-om__nav a:focus-visible::after { transform: scaleX(1); }

/* slide: el link se corre a la derecha y aparece una flecha indent. */
.onda-om--hover-slide .onda-om__nav a {
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
		color 0.3s ease;
}
.onda-om--hover-slide .onda-om__nav a::before {
	content: "→";
	position: absolute;
	right: 100%;
	margin-right: 0.18em;
	opacity: 0;
	transform: translateX(-0.3em);
	transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.onda-om--hover-slide .onda-om__nav a:hover,
.onda-om--hover-slide .onda-om__nav a:focus-visible {
	transform: translateX(0.42em);
}
.onda-om--hover-slide .onda-om__nav a:hover::before,
.onda-om--hover-slide .onda-om__nav a:focus-visible::before {
	opacity: 1;
	transform: translateX(0);
}

/* scale: leve crecida (origen izquierdo para no descentrar). */
.onda-om--hover-scale .onda-om__nav a {
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
		color 0.3s ease;
}
.onda-om--hover-scale .onda-om__nav a:hover,
.onda-om--hover-scale .onda-om__nav a:focus-visible { transform: scale(1.06); }

/* color: cambio de color a un acento. */
.onda-om--hover-color .onda-om__nav a:hover,
.onda-om--hover-color .onda-om__nav a:focus-visible {
	color: var(--onda-om-hover, var(--onda-om-link, #fff));
}

/* skew: inclinación sutil + leve desplazamiento. */
.onda-om--hover-skew .onda-om__nav a {
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
		color 0.3s ease;
}
.onda-om--hover-skew .onda-om__nav a:hover,
.onda-om--hover-skew .onda-om__nav a:focus-visible { transform: skewX(-9deg) translateX(0.18em); }

/* text-roll: el texto rueda hacia arriba y entra su clon desde abajo. El clon es
 * un ::after con content: attr(data-text) (el render emite data-text por link).
 * No requiere JS. */
.onda-om--hover-text-roll .onda-om__nav a {
	overflow: hidden;
	transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s ease;
}
.onda-om--hover-text-roll .onda-om__nav a > span,
.onda-om--hover-text-roll .onda-om__nav a {
	display: inline-block;
}
.onda-om--hover-text-roll .onda-om__nav a {
	will-change: transform;
}
.onda-om--hover-text-roll .onda-om__nav a::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	white-space: nowrap;
}
.onda-om--hover-text-roll .onda-om__nav a {
	transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1),
		opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s ease;
}
.onda-om--hover-text-roll .onda-om__nav a:hover,
.onda-om--hover-text-roll .onda-om__nav a:focus-visible {
	transform: translateY(-100%);
}

/* ── Foco accesible SIN recuadro azul nativo (#32) ─────────────────────────
 * Se quita el outline default del navegador en el trigger y en los links
 * (manteniendo el manejo de foco del JS: focus-trap al abrir, restaurar al
 * cerrar). En su lugar, un indicador sutil on-brand SOLO en focus-visible
 * (teclado), sin caja. */
.onda-om-burger:focus,
.onda-om-burger:focus-visible,
.onda-om__nav a:focus,
.onda-om__nav a:focus-visible {
	outline: none;
}
.onda-om-burger:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
}
/* Cuando el autor eligió "Ninguna" como hover-effect de los links (item_hover:
 * none), ninguna de las 6 reglas .onda-om--hover-* de arriba aplica → los links
 * quedaban con outline:none y CERO sustituto visible al tabular (el burger sí
 * tenía su underline, el panel no). Mismo tratamiento que el burger, para no
 * dejar ese caso sin foco visible (WCAG 2.4.7). Los otros 6 hover-effects no
 * se tocan: ya traen su propio indicador. */
.onda-om--hover-none .onda-om__nav a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
}

/* Contenido secundario opcional (redes/contacto). */
.onda-om__extra {
	margin-top: clamp(24px, 5vh, 56px);
	font-size: clamp(0.85rem, 1.4vw, 1.05rem);
	line-height: 1.6;
	opacity: 0.8;
}
.onda-om__extra a { color: inherit; }

/* ── Bloqueo de scroll ──────────────────────────────────────────────────── */
html.onda-om-lock,
body.onda-om-lock {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.onda-om__bg video { display: none; }
	.onda-om__bg .onda-om__poster { display: block; }
	.onda-om__inner { padding: clamp(80px, 14vh, 120px) 20px 48px; }
	/* El tope respeta el control "Tamaño máx. de links" (antes 4.5rem fijo → el
	 * slider no hacía nada en móvil). El mínimo baja a 1rem para que un tope chico
	 * (p.ej. 24px) no quede pisado por el piso de 2rem del clamp. */
	.onda-om__nav a { font-size: clamp(1rem, 13vw, var(--onda-om-link-max, 4.5rem)); }
}

/* ── Editor de Elementor: vista previa TOGGLEABLE del overlay (2.103.0) ────────
 * Patrón Onda (docs/REF-editor-preview.md). ANTES (≤2.102): el preview forzaba el
 * overlay ABIERTO siempre, lo que TAPABA el header/canvas y hacía incómodo editar
 * el resto. AHORA: en el editor el overlay arranca CERRADO (solo se ve el botón,
 * como en el front) y el autor lo ABRE/CIERRA haciendo click en el botón (binding
 * editor-only en el JS que togglea `.is-editor-open` en el overlay + `.is-active`
 * en el botón). Estado ABIERTO = overlay con `.is-editor-open` (toggle por click) o
 * el wrapper con `--editor-open` (control `editor_preview=abierto` → arranca abierto).
 * Cuando está ABIERTO queda position:absolute (no tapa más allá de su caja),
 * inerte salvo el botón, y totalmente estilable (tipografía/color/fondo en vivo).
 * Sin wipe ni stagger: es un frame estático. El front NO cambia. */
/* El wrapper da la caja para el overlay absoluto SOLO cuando está abierto. */
.onda-om-widget--editor {
	position: relative;
	display: block;
}
.onda-om-widget--editor.onda-om-widget--editor-open,
.onda-om-widget--editor:has(.onda-om.is-editor-open) {
	min-height: 70vh;
}
/* Overlay CERRADO en el editor por default: oculto, no tapa el canvas. El estado
 * cerrado base ya lo da `.onda-om` (visibility:hidden + clip-path); reforzamos que
 * NO capture clicks y no anime en el editor. */
.onda-om-widget--editor .onda-om {
	pointer-events: none;
	transition: none !important;
}
/* Overlay ABIERTO en el editor: por toggle (.is-editor-open) o por control
 * (wrapper --editor-open). Revelado, in situ (absolute), estilable en vivo. */
.onda-om-widget--editor.onda-om-widget--editor-open .onda-om,
.onda-om-widget--editor .onda-om.is-editor-open {
	position: absolute;
	visibility: visible;
	opacity: 1;
	clip-path: inset(0 0 0 0) !important;
	-webkit-clip-path: inset(0 0 0 0) !important;
}
/* Links en su estado revelado (anulamos el estado inicial del reveal) SOLO cuando
 * el overlay del editor está abierto. */
.onda-om-widget--editor.onda-om-widget--editor-open .onda-om__nav a,
.onda-om-widget--editor .onda-om.is-editor-open .onda-om__nav a {
	opacity: 1;
	transform: none;
	transition: color 0.3s ease;
	transition-delay: 0s;
}
/* El botón muta a X solo cuando está activo (reusa `.is-active`, que setea el JS al
 * abrir tanto en el front como en el editor) — coherente con el estado del front. */
.onda-om-empty {
	margin: 0;
	padding: 8px 0;
	font-size: 14px;
	opacity: 0.7;
}

/* ── MEGA MENÚ: modo panel desplegable (estilo HALSTON) ─────────────────────
 * El overlay deja de ser pantalla completa: baja desde arriba como un panel y
 * la página queda visible debajo (y borrosa si se activa el blur de fondo). */
.onda-om--panel {
	inset: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	height: var(--onda-om-panel-h, auto);
	max-height: 100vh;
}
/* En panel el contenido se ancla arriba (no centrado vertical como en fullscreen). */
.onda-om--panel .onda-om__inner {
	min-height: 0;
	justify-content: flex-start;
	padding-top: clamp(80px, 12vh, 140px);
}

/* ── MEGA MENÚ: contenedor de plantilla de Elementor ───────────────────────── */
.onda-om__template {
	width: 100%;
}
/* En modo MEGA MENÚ (origen Plantilla) la PLANTILLA de Elementor controla TODO el
   layout: el wrapper del overlay suelta su padding/centrado para que la plantilla
   pueda ir edge-to-edge (como la referencia) y el autor maneje márgenes/padding con
   los controles nativos de Elementor de sus secciones. */
.onda-om--has-template .onda-om__inner {
	/* Default 0 = edge-to-edge (look HALSTON). El control "Espaciado de la plantilla"
	 * del widget alimenta --onda-om-tpl-pad para darle al autor respiro arriba/abajo/
	 * lados que SIEMPRE se refleja (va FUERA de las secciones, no lo absorbe su
	 * centrado flex) y sobrevive el resize vertical (es parte del contenido scrolleable,
	 * no espacio flex que colapsa). */
	padding: var(--onda-om-tpl-pad, 0);
	justify-content: flex-start;
	align-items: stretch;
	text-align: initial; /* no heredar centrado: la plantilla maneja su alineación */
	min-height: 100%;
}
/* MEGA MENÚ fullscreen: la plantilla FLUYE con sus vh/%. El inner se topa al alto
 * del overlay (= viewport) y, si el mega menú es MÁS ALTO que el viewport, hace
 * SCROLL INTERNO (su `overflow-y:auto` ya estaba, pero sin tope de altura nunca
 * disparaba: el inner crecía con el contenido y el overlay —overflow:hidden— le
 * recortaba el final + el margen inferior, sin forma de llegar a ellos). Con el
 * tope, las secciones vh se miden contra el viewport real y todo el contenido
 * (incluido el margen inferior del último bloque) queda alcanzable al resizear.
 * Excluye el modo Panel: ahí el alto lo manda --onda-om-panel-h. */
.onda-om--has-template:not(.onda-om--panel) .onda-om__inner {
	max-height: 100%;
}
.onda-om--has-template.onda-om--panel .onda-om__inner {
	min-height: 0;
}

/* ── MEGA MENÚ: blur de la página de fondo (backdrop) ───────────────────────
 * Capa hermana del <nav> (fuera de su clip-path) que difumina lo que se ve por
 * detrás/debajo del overlay. Se desvanece junto con la apertura. */
.onda-om__backdrop {
	position: fixed;
	inset: 0;
	z-index: 98; /* bajo el overlay (99) y el burger (z altísimo) */
	opacity: 0;
	/* CERRADO: visibility:hidden para que la capa NO PINTE nada. Con solo opacity:0
	 * el backdrop-filter queda compositado permanente y Chromium en Windows (sobre
	 * todo con escalado 125/150%) puede dejar el blur "fantasma" pintado sobre toda
	 * la página aunque la capa sea transparente (visto en Marujo). El flip de
	 * visibility va RETRASADO la duración del fade para que el cierre se siga
	 * viendo igual (primero desvanece, después deja de pintar). */
	visibility: hidden;
	pointer-events: none;
	-webkit-backdrop-filter: blur(var(--onda-om-blur, 0px));
	backdrop-filter: blur(var(--onda-om-blur, 0px));
	transition: opacity var(--onda-om-duration, 0.9s) var(--onda-om-easing, cubic-bezier(0.165, 0.84, 0.44, 1)),
		visibility 0s linear var(--onda-om-duration, 0.9s);
}
.onda-om.is-open ~ .onda-om__backdrop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto; /* bloquea la interacción con la página mientras el menú está abierto */
	transition: opacity var(--onda-om-duration, 0.9s) var(--onda-om-easing, cubic-bezier(0.165, 0.84, 0.44, 1)),
		visibility 0s; /* visible de una al abrir */
}

/* ── Barra de admin de WordPress (SOLO usuarios logueados) ──────────────────
 * Con la admin bar, WP agrega `html{margin-top:32px}` → queda una franja del
 * fondo del body (a menudo BLANCA) arriba. Si el overlay tiene fondo transparente
 * + backdrop blur (mega menú estilo HALSTON), ese blur difumina la franja y se ve
 * un "degradado a blanco" arriba — que SOLO ve el admin, nunca el visitante.
 * El overlay y el backdrop arrancan DEBAJO de la barra para no taparla ni
 * difuminar esa franja. (top sobrescribe el `inset:0`; el alto pasa a viewport-32.) */
body.admin-bar .onda-om,
body.admin-bar .onda-om__backdrop {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .onda-om,
	body.admin-bar .onda-om__backdrop {
		top: 46px;
	}
}

/* ── MEGA MENÚ: texto secundario del trigger en hover (estilo HALSTON) ─────── */
.onda-om-trigger__hover-text {
	display: inline-block;
	font: inherit;
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--onda-om-burger, #fff);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	pointer-events: none;
	white-space: nowrap;
}
.onda-om-trigger__hover-text--left {
	order: -1;
	margin-right: 12px;
	transform: translateX(6px);
}
.onda-om-trigger__hover-text--right {
	margin-left: 12px;
}
.onda-om-trigger-wrap:hover .onda-om-trigger__hover-text {
	opacity: 0.75;
	transform: translateX(0);
}

/* ── prefers-reduced-motion: instantáneo, sin wipe ni stagger ───────────── */
@media (prefers-reduced-motion: reduce) {
	.onda-om,
	.onda-om[data-reveal="fade"] {
		transition: none !important;
	}
	.onda-om__nav a,
	.onda-om.is-closing .onda-om__nav a {
		transition: color 0.3s ease !important;
		transition-delay: 0s !important;
	}
	.onda-om-burger__line { transition: none !important; }
}