/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  GeneratePress Child Theme
 Author:       The Rootsons SL
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child
*/

.ai-loop-cards {
	position: relative;
	width: 100%;
}

.ai-loop-card {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.ai-loop-card.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	z-index: 2;
}

.ai-loop-node.is-active {
	transform: scale(1.3);
	box-shadow: 0 0 0 6px var(--accent-50);
}

@media (max-width: 1024px) {
	.ai-loop-layout {
		grid-template-columns: 1fr !important;
	}

	.ai-loop-card {
		position: relative;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.ai-loop-card.is-active {
		display: block;
	}
}
/* --- Estructura principal del menú nativo --- */
.un-main-menu {
    /* Ocultar en móviles para replicar el comportamiento de tu bloque manual */
    display: none; 
}

@media (min-width: 768px) {
    .un-main-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- Lista interna (<ul>) del bloque nativo --- */
.un-main-menu ul.wp-block-navigation__container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px; /* El mismo espaciado que definiste en GenerateBlocks */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- Estilos de los enlaces (Tipografía y Colores) --- */
.un-main-menu a.wp-block-navigation-item__content {
    text-decoration: none;
    color: var(--contrast); /* Tu variable CSS de color oscuro */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.3s ease;
    padding: 0; /* Limpia cualquier padding nativo de WP por defecto */
}

/* --- Efecto Hover de los enlaces --- */
.un-main-menu a.wp-block-navigation-item__content:hover,
.un-main-menu a.wp-block-navigation-item__content:focus {
    color: var(--accent); /* Tu variable CSS para el color morado/acento */
}

/* Sistema AOS: configuración global */
:root {
  --aos-distance: 30px;
  --aos-duration: 0.7s;
  --aos-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --aos-delay: 0s;
}

/* Sistema AOS: estado inicial */
.animate-on-scroll {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity var(--aos-duration) var(--aos-easing) var(--aos-delay),
              transform var(--aos-duration) var(--aos-easing) var(--aos-delay);
}

/* AOS: variantes de dirección */
.animate-on-scroll.fade-up { transform: translate3d(0, var(--aos-distance), 0); }
.animate-on-scroll.fade-down { transform: translate3d(0, calc(var(--aos-distance) * -1), 0); }
.animate-on-scroll.fade-left { transform: translate3d(calc(var(--aos-distance) * -1), 0, 0); }
.animate-on-scroll.fade-right { transform: translate3d(var(--aos-distance), 0, 0); }

/* AOS: estado visible (con optimización de GPU) */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: opacity, transform; /* Solo consume memoria cuando se está animando */
}

/* AOS: delays (puedes añadir más si lo necesitas) */
.delay-100 { --aos-delay: 100ms; }
.delay-200 { --aos-delay: 200ms; }
.delay-300 { --aos-delay: 300ms; }
.delay-400 { --aos-delay: 400ms; }
.delay-500 { --aos-delay: 500ms; }
.delay-600 { --aos-delay: 600ms; }

/* AOS: Excepción obligatoria para Sliders (evita elementos fantasma) */
.swiper-wrapper .animate-on-scroll,
.gb-carousel-items .animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* AOS: Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}