/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  GeneratePress Child Theme
 Author:       Roberto
 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 */
}