/* Nuevas reglas para el contenedor del menú */
.menu-wrapper {
	display: flex; /* Convierte los enlaces en elementos flex */
	flex-wrap: wrap; /* Permite que los enlaces del menú se envuelvan */
	align-items: center;
}
/* Configuración general */
.contenido-escritorio,
.contenido-movil {
	display: flex; /* Usar flexbox para alinear los elementos */
	justify-content: center; /* Centramos el contenido */
	align-items: center; /* Centra verticalmente */
	padding: 10px;
	 flex-wrap: nowrap;/* Evita que los elementos salten de línea */
}

.navi a {
	margin: 0 10px; /* Espaciado entre enlaces del menú */
	Opcional: elimina el subrayado */
	color: #2f2f2f; /* Asegura un color coherente */
}

/* Esconder/Mostrar según el tamaño de pantalla */
.contenido-escritorio {
	display: flex; /* Mostrar en escritorio */
	width: 100%; /* Asegura que ocupe todo el ancho */
}

.contenido-movil {
	display: none; /* Ocultar en escritorio */
}

@media screen and (max-width: 650px) {
	.contenido-escritorio {
		display: none; /* Ocultar en móvil */
	}
	
	.contenido-movil {
		display: flex; /* Mostrar en móvil */
		flex-direction: column; /* Apilar elementos en columna */
		text-align: center; /* Centrar los elementos */
		padding: 20px; /* Añade espacio en móvil */
	}
}

/* Aplica estilo a todas las imágenes dentro de un campo personalizado */
.wpuf_customs img {
    display: block; /* Cambia el elemento 'img' a un bloque para que aparezca en una nueva línea */
    max-width: 100%; /* Limita el ancho máximo de la imagen */
    height: auto; /* Permite que la altura se ajuste automáticamente */
    margin-bottom: 10px; /* Agrega un margen inferior para separar las imágenes del texto */
}
.menui-item {
	position: relative;
	display: inline-block;
	margin-right: 20px;
	/* Espaciado entre elementos del menú, ajusta según necesidad */
}

/* Color base del texto del primer nivel del menú */
.menui-item > .wp-block-navigation-item__content {
    color: #2f2f2f; /* Color inicial en gris oscuro */
    text-decoration: none; /* Quitar cualquier subrayado predeterminado */
    transition: color .3s ease; /* Transición suave del color del texto */
outline: none;
}

/* Cambiar el color del texto al pasar el ratón solo en el primer nivel */
.menui-item:hover > .wp-block-navigation-item__content {
    color: rgb(221, 0, 96); /* Cambia el color del texto al rosa */
}

/* Subrayado animado de izquierda a derecha en el primer nivel */
.menui-item::after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 0; /* Ancho inicial del subrayado */
	height: 4px; /* Grosor del subrayado */
	background-color: rgb(221, 0, 96); /* Color del subrayado */
	transition: width .3s ease; /* Transición animada del ancho del subrayado */
}

.menui-item:hover::after {
	width: 100%; /* Ancho completo al pasar el ratón */
}

.menui-item img {
	width: 75px; /* Ajusta el ancho de la imagen según sea necesario */
	height: 15px; /* Ajusta la altura de la imagen según sea necesario */
}

/* Ajuste en móviles: desactivar subrayado y aumentar espacio entre enlaces */
@media (max-width: 768px) {
    .menui-item::after {
        display: none; /* Desactiva el subrayado en móviles */
    }

    .menui-item {
        margin-right: 10px; /* Aumenta la distancia entre enlaces */
    }

    /* Opcional: añade más espacio arriba y abajo de cada enlace */
    .menui-item > .wp-block-navigation-item__content {
        padding: 75px 0; /* Espacio vertical extra en móviles */
    }
}

.um-faicon-cog {
    display: none;
}
.justificar {
    text-align: justify !important;
}

/* Clase personalizada para espaciado de imágenes */
.imag {
     position: relative;
    top: 5px;
}

.detaills:hover {
	box-shadow: 5px 5px 15px #d9d9d9;
}

/* Estilo inicial de la imagen */
.galon-imagen {
  width: auto;
  height: auto;
  transition: transform 0.3s, filter 0.3s, box-shadow 0.3s; /* Transiciones suaves */
  outline: none; /* Evita bordes al seleccionarla */
  border: none; /* Sin bordes iniciales */
}

/* Efecto al pasar el mouse */
.galon-imagen:hover {
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /*
}

/* Efecto al hacer clic */
.galon-imagen:active {
  filter: grayscale(100%); /* Convierte a blanco y negro */
  transform: scale(1.2); /* Zoom adicional */
  box-shadow: none; /* Sin sombra al hacer clic */
}

/* Elimina cualquier borde residual tras el clic o enfoque */
.galon-imagen:focus {
  outline: none !important; /* Quita contorno */
  border: none !important; /* Asegura que no haya bordes */
  box-shadow: none !important; /* Sin sombras */
}
/* Reinicia el estado después del foco */
.galon-imagen:focus-visible {
  outline: none !important;
}