/* ==========================================================================
   AutoEncaja Premium 1.5 — navegación y movimiento (archivo nuevo, solo CSS)
   - Refina lo que ya hacen el tema y core/navigation; no añade otro
     controlador de menú (WordPress gestiona hover, clic, Escape, foco y modal).
   - Solo transform/opacity; nada perpetuo; todo se apaga con reducir movimiento.
   ========================================================================== */
:root {
	--aem-ease: cubic-bezier(.25, .1, .25, 1);       /* estándar suave */
	--aem-out: cubic-bezier(.22, 1, .36, 1);          /* desaceleración larga */
	--aem-spring: cubic-bezier(.34, 1.36, .64, 1);    /* pequeño rebote, un solo ciclo */
	--aem-fast: 160ms; --aem-mid: 240ms; --aem-slow: 380ms;
	--aem-focus: 0 0 0 2px #0B111B, 0 0 0 4px #49D6BD;
}

/* ---- Logo: «asentarse» con muelle al pasar o enfocar (sustituye al giro de 8°) */
.ae-logo { border-radius: 10px; outline: none; }
.ae-logo svg { transition: transform var(--aem-slow) var(--aem-spring); transform-origin: 50% 60%; }
.ae-logo:hover svg, .ae-logo:focus-visible svg { transform: rotate(-4deg) scale(1.06); }
.ae-logo:active svg { transform: scale(.94); transition-duration: var(--aem-fast); }
.ae-logo b { transition: color var(--aem-mid) var(--aem-ease); }
.ae-logo:hover b { color: #77DFC9; }
.ae-logo:focus-visible { box-shadow: var(--aem-focus); }

/* ---- Enlaces del menú (escritorio): subrayado desde el centro, estado actual y foco */
@media (min-width: 600px) {
	.ae-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		transform-origin: 50% 50%; transition: transform var(--aem-mid) var(--aem-out) !important; border-radius: 2px;
	}
	.ae-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
	.ae-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current]::after,
	.ae-header .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
	body .ae-header .wp-block-navigation .wp-block-navigation-item__content[aria-current],
	body .ae-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: #F5F7FA; }
}
.ae-header .wp-block-navigation-item__content:focus-visible,
.ae-header .wp-block-navigation-submenu__toggle:focus-visible,
.ae-header .wp-block-navigation__responsive-container-open:focus-visible,
.ae-header .wp-block-navigation__responsive-container-close:focus-visible { outline: none; box-shadow: var(--aem-focus); border-radius: 8px; }

/* ---- Desplegable «Categorías»: panel moderno, dos columnas en escritorio ancho,
 * aparición suave (WordPress decide cuándo está abierto; aquí solo el cómo). */
@media (min-width: 600px) {
	.ae-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		border-radius: 16px !important; padding: .5rem !important;
		background: rgba(21, 33, 48, .97) !important; border-color: rgba(255, 255, 255, .1) !important;
		box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 28px 56px -24px rgba(0, 0, 0, .75) !important;
		transform: translate3d(0, -6px, 0) scale(.985); transform-origin: 20% 0;
		transition: opacity var(--aem-fast) var(--aem-ease), transform var(--aem-mid) var(--aem-out) !important;
		margin-top: .35rem !important;
	}
	.ae-header .has-child:hover > .wp-block-navigation__submenu-container,
	.ae-header .has-child:focus-within > .wp-block-navigation__submenu-container,
	.ae-header .has-child > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container { transform: none; }
	.ae-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex !important; align-items: center; justify-content: space-between; gap: 1rem;
		box-sizing: border-box; min-height: 44px; transition: background-color var(--aem-fast) var(--aem-ease), color var(--aem-fast) var(--aem-ease);
	}
	.ae-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
		content: "→"; content: "→" / ""; opacity: 0; transform: translateX(-4px); color: #49D6BD;
		transition: opacity var(--aem-fast) var(--aem-ease), transform var(--aem-mid) var(--aem-out);
	}
	.ae-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
	.ae-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { background: rgba(73, 214, 189, .12); }
	/* Flecha del botón de submenú: gira al abrir */
	.ae-header .wp-block-navigation-submenu__toggle svg { transition: transform var(--aem-mid) var(--aem-out); }
	.ae-header .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg,
	.ae-header .has-child:hover > .wp-block-navigation-submenu__toggle svg { transform: rotate(180deg); }
	/* Área táctil ≥ 24×24 (WCAG 2.5.8) sin cambiar la maquetación: pseudo-elemento invisible. */
	.ae-header .wp-block-navigation-submenu__toggle { position: relative; border-radius: 6px; }
	.ae-header .wp-block-navigation-submenu__toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); }
}
@media (min-width: 1100px) {
	.ae-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container { min-width: 440px !important; }
	.ae-header .has-child:hover > .wp-block-navigation__submenu-container,
	.ae-header .has-child:focus-within > .wp-block-navigation__submenu-container,
	.ae-header .has-child > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: 1fr 1fr; gap: .15rem; }
}

/* ---- Menú móvil (modal de WordPress): entrada del panel y de los enlaces, una vez por apertura */
@keyframes aem-sheet { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes aem-item { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
.ae-header .wp-block-navigation__responsive-container.is-menu-open { animation: aem-sheet var(--aem-mid) var(--aem-out) both; }
.ae-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { animation: aem-item var(--aem-slow) var(--aem-out) both; }
.ae-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 40ms; }
.ae-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 80ms; }
.ae-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 120ms; }
.ae-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 160ms; }
.ae-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: 200ms; }
.ae-header .wp-block-navigation__responsive-container-open,
.ae-header .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 12px; transition: background-color var(--aem-fast) var(--aem-ease), transform var(--aem-fast) var(--aem-ease); }
.ae-header .wp-block-navigation__responsive-container-open:active,
.ae-header .wp-block-navigation__responsive-container-close:active { transform: scale(.94); }
.ae-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { box-sizing: border-box; min-height: 44px; display: flex !important; align-items: center; }

/* ---- Botones: respuesta táctil y elevación con la misma curva en todo el sitio */
.wp-block-button__link, .v3-btn, .ae-btn, .aec__pg, .aep-more__a {
	transition-timing-function: var(--aem-out) !important;
	transition-duration: var(--aem-mid) !important;
}
.wp-block-button__link:active, .v3-btn:active, .ae-btn:active, .aec__pg:active, .aep-more__a:active { transform: scale(.97) !important; transition-duration: 90ms !important; }
.ae-header__cta .wp-block-button__link { border-radius: 12px !important; }
.ae-header__cta .wp-block-button__link:focus-visible, .v3-btn:focus-visible, .ae-btn:focus-visible { outline: none; box-shadow: var(--aem-focus) !important; }

/* ---- Accesibilidad del movimiento */
@media (prefers-reduced-motion: reduce) {
	.ae-header .wp-block-navigation__responsive-container-open,
	.ae-header .wp-block-navigation__responsive-container-close,
	.ae-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { transition: none !important; }
	.ae-header .wp-block-navigation__responsive-container-open:active,
	.ae-header .wp-block-navigation__responsive-container-close:active { transform: none !important; }
	.ae-logo svg, .ae-logo b,
	.ae-header .wp-block-navigation-item__content::after,
	.ae-header .wp-block-navigation__submenu-container,
	.ae-header .wp-block-navigation-submenu__toggle svg,
	.wp-block-button__link, .v3-btn, .ae-btn, .aec__pg, .aep-more__a { transition: none !important; }
	.ae-header .wp-block-navigation__responsive-container.is-menu-open,
	.ae-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { animation: none !important; }
	.ae-logo:hover svg, .ae-logo:focus-visible svg, .ae-logo:active svg,
	.ae-header .has-child > .wp-block-navigation__submenu-container,
	.wp-block-button__link:active, .v3-btn:active, .ae-btn:active, .aec__pg:active, .aep-more__a:active { transform: none !important; }
}
@media (forced-colors: active) {
	.ae-header .wp-block-navigation-item__content:focus-visible, .ae-logo:focus-visible,
	.ae-header button:focus-visible, .wp-block-button__link:focus-visible,
	.v3-btn:focus-visible, .ae-btn:focus-visible { outline: 2px solid CanvasText; outline-offset: 3px; }
}
