/**
 * NAYÚ · Barra de anuncios
 *
 * El desfile continuo se consigue con dos copias identicas del mismo
 * contenido: cuando el carril se ha desplazado la mitad de su ancho, la
 * segunda copia esta exactamente donde arranco la primera, asi que el
 * salto al reiniciar la animacion es invisible.
 */

.nayu-barra {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 100%;
	min-height: 38px;
	padding: 9px 0;
	overflow: hidden;
	box-sizing: border-box;
	background: var(--nayu-barra-fondo, #2f4034);
	color: var(--nayu-barra-texto, #fdf6ea);
}

.nayu-barra__carril {
	display: flex;
	align-items: center;
	width: max-content;
	flex: 0 0 auto;
}

/* Hasta que el guion no ha medido el ancho no se anima: si no, el primer
   fotograma da un tiron con una duracion que todavia no es la correcta. */
.nayu-barra.esta-lista .nayu-barra__carril {
	animation: nayu-barra-desfile var(--nayu-barra-duracion, 26s) linear infinite;
	will-change: transform;
}

.nayu-barra:hover .nayu-barra__carril,
.nayu-barra:focus-within .nayu-barra__carril {
	animation-play-state: paused;
}

.nayu-barra__copia {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex: 0 0 auto;
	min-width: 100vw;
	box-sizing: border-box;
	gap: clamp(20px, 3vw, 38px);
	padding-inline: clamp(10px, 1.5vw, 19px);
	white-space: nowrap;
	line-height: 1;
}

.nayu-barra__frase,
.nayu-barra__sep {
	font-size: clamp(10px, 1vw, 12px);
	font-weight: 500;
	letter-spacing: clamp(1.2px, 0.22vw, 2.4px);
	text-transform: uppercase;
	white-space: nowrap;
}

/* El separador es la flor del logo, no un punto: repetirla a lo largo de la
   barra convierte un elemento utilitario en un detalle de marca. */
.nayu-barra__sep {
	display: block;
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	background: currentColor;
	opacity: 0.75;
	-webkit-mask: var(--nayu-barra-flor) center / contain no-repeat;
	mask: var(--nayu-barra-flor) center / contain no-repeat;
}

/* Los bordes se desvanecen hacia el fondo para que las frases no aparezcan
   ni desaparezcan de golpe contra el filo de la pantalla. */
.nayu-barra::before,
.nayu-barra::after {
	content: "";
	position: absolute;
	top: 0;
	z-index: 2;
	width: clamp(20px, 6vw, 76px);
	height: 100%;
	pointer-events: none;
}

.nayu-barra::before {
	left: 0;
	background: linear-gradient(to right, var(--nayu-barra-fondo, #2f4034), transparent);
}

.nayu-barra::after {
	right: 0;
	background: linear-gradient(to left, var(--nayu-barra-fondo, #2f4034), transparent);
}

@keyframes nayu-barra-desfile {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* --- Franja dentro de la página ------------------------------------------ */

/* La franja va del mismo color que la pagina, con dos lineas finas. Con
   fondo propio quedaba como una tira metida entre dos bloques. */
.nayu-barra.es-franja {
	min-height: 56px;
	padding: 17px 0;
	border-top: 1px solid var(--wp--preset--color--arena, #e8decb);
	border-bottom: 1px solid var(--wp--preset--color--arena, #e8decb);
}

/* Sin fondo propio, los degradados de los bordes tampoco tienen sentido. */
.nayu-barra.es-franja::before,
.nayu-barra.es-franja::after {
	display: none;
}

.nayu-barra.es-franja .nayu-barra__frase,
.nayu-barra.es-franja .nayu-barra__sep {
	font-size: clamp(11px, 1.15vw, 13px);
	font-weight: 700;
	letter-spacing: clamp(1.4px, 0.26vw, 2.6px);
}

.nayu-barra.es-franja .nayu-barra__copia {
	gap: clamp(34px, 5vw, 68px);
}

/* Las frases no se parten aunque la pantalla sea estrecha. */
.nayu-barra__copia {
	align-items: center;
}

@media (prefers-reduced-motion: reduce) {
	/* No se detiene: se sirve el mismo desfile mas lento desde el guion.
	   Pararlo dejaba frases sin ver, que es peor que el movimiento. */
	.nayu-barra.esta-lista .nayu-barra__carril {
		animation-timing-function: linear;
	}
}

/* --- Divisor de sección --------------------------------------------------- */

/* Las etiquetas se superponen en el mismo sitio y se cruzan con un fundido.
   Solo se listan las que hoy llevan a productos. */
.nayu-divisor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 12px;
	overflow: hidden;
	box-sizing: border-box;
	background: #f2ede3;
	border-top: 1px solid var(--wp--preset--color--arena, #e8decb);
	border-bottom: 1px solid var(--wp--preset--color--arena, #e8decb);
}

.nayu-divisor__carril {
	position: relative;
	width: 100%;
	height: 1.5em;
}

.nayu-divisor__opcion {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 700ms ease;
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contraste, #1f2420);
}

.nayu-divisor__opcion.esta-visible {
	opacity: 1;
	pointer-events: auto;
}

.nayu-divisor__opcion:hover span:last-child,
.nayu-divisor__opcion:focus-visible span:last-child {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* La flor de la marca, donde otras tiendas ponen una estrella generica. */
.nayu-divisor__flor {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	background: currentColor;
	opacity: 0.7;
	-webkit-mask: var(--nayu-divisor-flor) center / contain no-repeat;
	mask: var(--nayu-divisor-flor) center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.nayu-divisor__opcion {
		transition: opacity 300ms ease;
	}
}

/* El divisor ocupa todo el ancho de la ventana aunque quede dentro de un
   contenedor con margenes: metido en una caja se ve como un recuadro
   pegado, no como una separacion de la pagina. */
.nayu-divisor {
	margin-inline: 0;
	max-width: none;
}

.wp-block-group > .nayu-divisor,
.wp-block-post-content > .nayu-divisor {
	width: 100%;
}