/*
Theme Name: NAYÚ
Theme URI: https://nayu.co
Author: NAYÚ
Description: Tema de bloques propio para NAYÚ. Croché artesanal hecho a mano. Sin constructores visuales.
Version:            0.9.42
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: nayu
Tags: full-site-editing, block-patterns, e-commerce
*/

/* ==========================================================================
   NAYÚ · Superficies de WooCommerce
   Los colores salen siempre de los tokens de theme.json, nunca literales.
   ========================================================================== */

:root {
	--nayu-transicion: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* --- Cabecera del catálogo ------------------------------------------------ */

.woocommerce-products-header {
	text-align: center;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.woocommerce-products-header__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--grande);
	margin: 0;
}

.woocommerce-products-header .term-description {
	max-width: 52ch;
	margin-inline: auto;
	color: color-mix(in srgb, var(--wp--preset--color--contraste) 72%, transparent);
}

/* La fila de "mostrando N" y el desplegable de orden, como una sola barra. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: var(--wp--preset--font-size--pequeno);
	margin-bottom: var(--wp--preset--spacing--40);
}

.woocommerce .woocommerce-result-count {
	color: color-mix(in srgb, var(--wp--preset--color--contraste) 62%, transparent);
}

.woocommerce .woocommerce-ordering select {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--contraste);
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--arena);
	/* Pildora, a juego con el boton de filtrar que tiene al lado. */
	border-radius: 999px;
	padding: 10px 18px;
}

/* --- Tarjeta de producto -------------------------------------------------- */

.woocommerce ul.products {
	gap: var(--wp--preset--spacing--40);
}

.woocommerce ul.products li.product {
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--arena);
	padding: 16px 16px 24px;
	text-align: center;
	transition: border-color var(--nayu-transicion), transform var(--nayu-transicion);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--wp--preset--color--oliva-claro);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: 16px;
	background: var(--wp--preset--color--base);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
	padding: 0 0 6px;
}

.woocommerce ul.products li.product .price {
	display: block;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	color: var(--wp--preset--color--contraste);
	margin-bottom: 14px;
}

/* El precio anterior, cuando haya rebaja, en discreto y tachado. */
.woocommerce ul.products li.product .price del {
	font-weight: 400;
	opacity: 0.5;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* La etiqueta de oferta usa el magenta del logo: es el unico sitio donde grita. */
.woocommerce span.onsale {
	background: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--base);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 0;
	padding: 5px 11px;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

/* --- Ficha de producto ---------------------------------------------------- */

.woocommerce div.product .product_title {
	font-size: var(--wp--preset--font-size--grande);
	margin-bottom: 10px;
}

.woocommerce div.product p.price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--contraste);
	margin-bottom: 20px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: 46ch;
	margin-bottom: 24px;
}

.woocommerce div.product .images img {
	border: 1px solid var(--wp--preset--color--arena);
	background: var(--wp--preset--color--superficie);
}

.woocommerce div.product form.cart {
	margin-bottom: 26px;
}

.woocommerce .quantity .qty {
	font-family: inherit;
	background: var(--wp--preset--color--superficie);
	border: 1px solid var(--wp--preset--color--arena);
	border-radius: 2px;
	padding: 13px 8px;
	width: 72px;
	text-align: center;
}

.woocommerce div.product .product_meta {
	font-size: var(--wp--preset--font-size--pequeno);
	color: color-mix(in srgb, var(--wp--preset--color--contraste) 62%, transparent);
	border-top: 1px solid var(--wp--preset--color--arena);
	padding-top: 16px;
}

.woocommerce .stock.in-stock {
	color: var(--wp--preset--color--oliva);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
}

.woocommerce .stock.out-of-stock {
	color: var(--wp--preset--color--magenta);
}

/* --- Pestañas de la ficha ------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 0;
	border-bottom: 1px solid var(--wp--preset--color--arena);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 26px 0 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: color-mix(in srgb, var(--wp--preset--color--contraste) 55%, transparent);
	padding: 0 0 12px;
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--contraste);
	border-bottom-color: var(--wp--preset--color--oliva);
}

/* --- Migas de pan --------------------------------------------------------- */

.woocommerce .woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--pequeno);
	color: color-mix(in srgb, var(--wp--preset--color--contraste) 55%, transparent);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* --- Avisos --------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wp--preset--color--superficie);
	border-top: 3px solid var(--wp--preset--color--oliva);
	border-radius: 0;
	color: var(--wp--preset--color--contraste);
}

.woocommerce-error {
	border-top-color: var(--wp--preset--color--magenta);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product {
		transition: none;
	}

	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}

/* ==========================================================================
   NAYÚ · Portada
   ========================================================================== */

/* Dos versiones del hero, una por forma de pantalla. El movil no se queda
   con la foto horizontal recortada, que es donde siempre se pierde la pieza. */

.nayu-solo-movil {
	display: none;
}

@media (max-width: 781px) {
	.nayu-solo-escritorio {
		display: none;
	}

	.nayu-solo-movil {
		display: block;
	}
}

/* El texto se apoya en la pared vacia de la derecha, que es donde la foto
   no tiene nada que contar. El ancho se fija aqui y no en los atributos del
   bloque: alli no se estaba aplicando y el titular caia sobre las piezas. */
.nayu-portada.nayu-solo-escritorio .nayu-portada__texto {
	max-width: 440px;
	/* Con !important porque el maquetado que genera WordPress para el
	   contenedor del cover vuelve a centrar los margenes despues. */
	margin-left: auto !important;
	/* Un respiro contra el borde: pegado del todo se lee apretado. */
	margin-right: clamp(0px, 4vw, 64px) !important;
	text-align: left;
	position: relative;
	z-index: 2;
}

/* Velo desde el borde del texto hacia el centro. Ninguna foto garantiza una
   zona limpia en todos los recortes, y un titular ilegible arruina la
   portada entera: el velo lo asegura sin tapar la pieza. */
.nayu-portada.nayu-solo-escritorio .wp-block-cover__background {
	background: linear-gradient(
		to left,
		var(--wp--preset--color--base, #fbf6ee) 0%,
		color-mix(in srgb, var(--wp--preset--color--base, #fbf6ee) 82%, transparent) 34%,
		transparent 62%
	) !important;
	opacity: 1 !important;
}

.nayu-portada.nayu-solo-movil .wp-block-cover__background {
	background: linear-gradient(
		to top,
		var(--wp--preset--color--base, #fbf6ee) 0%,
		color-mix(in srgb, var(--wp--preset--color--base, #fbf6ee) 80%, transparent) 38%,
		transparent 70%
	) !important;
	opacity: 1 !important;
}

.nayu-portada.nayu-solo-movil .nayu-portada__texto {
	position: relative;
	z-index: 2;
	margin-top: auto;
}

.nayu-portada.nayu-solo-movil .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100%;
}

.nayu-portada .wp-block-cover__inner-container {
	width: 100%;
}

.nayu-portada h1,
.nayu-portada h2 {
	margin-bottom: 14px;
}

.nayu-promesas p {
	margin: 0;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- El taller ----------------------------------------------------------- */

.nayu-taller__foto img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--arena, #e7ddc9);
}

/* --- Galería ------------------------------------------------------------- */

.nayu-galeria.wp-block-gallery {
	gap: 10px;
}

.nayu-galeria.wp-block-gallery figure.wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 600px) {
	.nayu-galeria.wp-block-gallery {
		gap: 6px;
	}
}

/* ==========================================================================
   NAYÚ · Tarjeta de producto en el marcado de bloques
   Las fotos vienen verticales del telefono. Sin recorte cuadrado la parrilla
   queda con las tarjetas a distinta altura y parece desordenada.
   ========================================================================== */

/**
 * El acento de terracota y los dos dibujos viven aqui y no en theme.json a
 * proposito: son decoracion de la tienda, no colores que deban salir en el
 * editor para que alguien se los aplique a un parrafo.
 */
:root {
	--nayu-terracota: #c0573c;

	/* Bolsa del boton de comprar. */
	--nayu-bolsa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");

}

ul.wc-block-product-template {
	gap: var(--wp--preset--spacing--40, 2.5rem) var(--wp--preset--spacing--30, 1.5rem);
}

li.wc-block-product {
	background: var(--wp--preset--color--superficie, #fff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--arena, #e7ddc9) 70%, transparent);
	border-radius: 14px;
	/* Dos sombras: una linea de apoyo pegada al borde y una caida ancha y muy
	   suave. Una sola sombra fuerte ensucia el crema del fondo. */
	box-shadow:
		0 1px 2px rgba(31, 36, 32, 0.05),
		0 16px 34px -16px rgba(31, 36, 32, 0.28);
	padding: 16px 16px 24px;
	text-align: center;
	transition: border-color 180ms ease, box-shadow 220ms ease, transform 180ms ease;
}

li.wc-block-product:hover {
	border-color: color-mix(in srgb, var(--nayu-terracota) 35%, var(--wp--preset--color--arena, #e7ddc9));
	box-shadow:
		0 1px 2px rgba(31, 36, 32, 0.05),
		0 22px 40px -20px rgba(31, 36, 32, 0.3);
	transform: translateY(-3px);
}

li.wc-block-product .wc-block-components-product-image {
	margin-bottom: 16px;
}

li.wc-block-product .wc-block-components-product-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* Redondeada y con aire alrededor: es lo que la hace leerse como una pieza
	   puesta sobre la tarjeta y no como un recorte pegado al borde. */
	border-radius: 10px;
	background: var(--wp--preset--color--base, #fdf6ea);
	display: block;
}

li.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 1.15rem;
	line-height: 1.25;
	margin: 0;
}

li.wc-block-product .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

/* El filete corto bajo el nombre. Separa nombre de precio sin cruzar la
   tarjeta entera, que la partiria en dos mitades. */
li.wc-block-product .wp-block-post-title::after {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	margin: 11px auto 0;
	border-radius: 2px;
	background: var(--nayu-terracota);
}

/* El precio y el boton llevan puesta la clase de preset has-small-font-size,
   que WordPress escribe con !important. Sin repetirlo aqui el tamano no entra
   y se queda en los 13 px del preset. */
li.wc-block-product .wc-block-components-product-price {
	display: block;
	color: var(--wp--preset--color--verde, #2f4034);
	font-size: 1.05rem !important;
	font-weight: 700;
	margin: 12px 0 18px;
}

li.wc-block-product .wc-block-components-product-price del {
	font-weight: 400;
	opacity: 0.5;
	margin-right: 6px;
}

li.wc-block-product .wc-block-components-product-price ins {
	text-decoration: none;
}

/* --- El boton de comprar de la tarjeta ------------------------------------ */

li.wc-block-product .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	border-radius: 8px;
	padding: 0.85em 1.5em;
	font-size: 0.72rem !important;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase;
}

/* La bolsa va de mascara y no de imagen para que herede el color del texto:
   asi sirve igual sobre el verde del boton y sobre el estado de «en el
   carrito», sin tener que guardar dos dibujos. */
li.wc-block-product .wc-block-components-product-button__button::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--nayu-bolsa) center / contain no-repeat;
	mask: var(--nayu-bolsa) center / contain no-repeat;
}

/* El enlace de «ver carrito» que aparece con la pieza ya dentro. */
li.wc-block-product .added_to_cart,
li.wc-block-product .nayu-scroll__ver {
	display: block;
	margin-top: 0.75rem;
	color: color-mix(in srgb, var(--wp--preset--color--contraste) 62%, transparent);
	font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
	li.wc-block-product {
		transition: none;
	}

	li.wc-block-product:hover {
		transform: none;
	}
}

/* ==========================================================================
   NAYÚ · Portada, segunda vuelta
   La web se vuelve casi incolora a proposito: el unico color saturado de la
   pantalla deben ser las piezas. Si la interfaz tambien grita, compiten.
   ========================================================================== */

.nayu-eyebrow {
	margin: 0 0 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--piedra, #8f887c);
}

.nayu-eyebrow--claro {
	color: color-mix(in srgb, var(--wp--preset--color--base, #fbf6ee) 75%, transparent);
}

/* --- Familias en círculos ------------------------------------------------ */

.nayu-familias {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(16px, 2.4vw, 38px);
	max-width: 1240px;
	margin-inline: auto;
}

.nayu-familias__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-decoration: none;
	color: var(--wp--preset--color--contraste, #1f2420);
}

/* El disco. La foto va dentro, con un anillo beige alrededor, en vez de
   recortada al ras del borde: es lo que hace que la pieza se lea como puesta
   sobre algo. El filete de arena que había antes marcaba el recorte y era
   justo lo contrario.

   El relleno va por dentro de la medida, que si no el disco se sale de su
   columna el doble del anillo. */
.nayu-familias__foto {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	padding: 7%;
	border-radius: 50%;
	background: color-mix(
		in srgb,
		var(--wp--preset--color--arena, #e8decb) 92%,
		var(--wp--preset--color--piedra, #8f887c) 8%
	);
	transition: transform 260ms ease, background-color 260ms ease;
}

.nayu-familias__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.nayu-familias__item:hover .nayu-familias__foto,
.nayu-familias__item:focus-visible .nayu-familias__foto {
	transform: translateY(-4px) scale(1.03);
	background: var(--wp--preset--color--arena, #e8decb);
}

.nayu-familias__nombre {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}

/* La flecha. Va en content con texto alternativo vacío para que el lector de
   pantalla no la lea: no añade nada que no diga ya el nombre de la familia. */
.nayu-familias__nombre::after {
	content: "\2192" / "";
	font-weight: 400;
	transition: transform 260ms ease;
}

.nayu-familias__item:hover .nayu-familias__nombre::after,
.nayu-familias__item:focus-visible .nayu-familias__nombre::after {
	transform: translateX(4px);
}

@media (max-width: 900px) {

	.nayu-familias {
		grid-template-columns: repeat(3, 1fr);
		gap: 26px 16px;
	}

	.nayu-familias__item {
		gap: 12px;
	}
}

@media (max-width: 600px) {

	/* A tres columnas en un teléfono el disco baja de 105 px. Con la letra
	   tan espaciada, "NAVIDAD →" parte en dos líneas y descuadra la fila. */
	.nayu-familias__nombre {
		gap: 6px;
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nayu-familias__foto,
	.nayu-familias__nombre::after {
		transition: none;
	}

	.nayu-familias__item:hover .nayu-familias__foto {
		transform: none;
	}

	.nayu-familias__item:hover .nayu-familias__nombre::after {
		transform: none;
	}
}

/* --- Favoritos: texto a un lado, piezas al otro --------------------------- */

.nayu-favoritos .nayu-eyebrow {
	margin-bottom: 14px;
}

.nayu-favoritos h2 {
	margin-bottom: 14px;
}

/* --- El taller ------------------------------------------------------------ */

.nayu-taller {
	gap: 0;
}

.nayu-taller__figura {
	position: relative;
	margin: 0;
	height: 100%;
}

.nayu-taller__figura img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
}

/* La frase va sobre la foto, en cursiva: es la voz de quien teje, no
   una etiqueta de la tienda. */
.nayu-taller__cita {
	position: absolute;
	left: clamp(20px, 4vw, 48px);
	bottom: clamp(20px, 4vw, 48px);
	max-width: 15ch;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-style: italic;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.25;
	color: var(--wp--preset--color--base, #fbf6ee);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.nayu-taller__texto {
	padding: clamp(32px, 5vw, 72px);
}

.nayu-valores {
	list-style: none;
	margin: 26px 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 24px;
}

.nayu-valores li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 14px;
	border-left: 2px solid var(--wp--preset--color--arena, #e8decb);
}

.nayu-valores strong {
	font-size: 0.9375rem;
}

.nayu-valores span {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--piedra, #8f887c);
}

/* --- Talleres ------------------------------------------------------------- */

.nayu-talleres__texto h2 {
	margin-bottom: 14px;
}


@media (max-width: 900px) {
	.nayu-promesas {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px;
	}

	.nayu-valores {
		grid-template-columns: 1fr;
	}

	.nayu-taller__figura img {
		min-height: 320px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nayu-familias__foto {
		transition: none;
	}

	.nayu-familias__item:hover .nayu-familias__foto {
		transform: none;
	}
}

/* --- Marca ---------------------------------------------------------------- */

.wp-block-site-logo img {
	height: auto;
}

.nayu-pie__marca {
	margin: 0 0 14px;
}

.nayu-pie__marca img {
	display: block;
	height: auto;
}

/* --- El hero respeta la proporción de la foto ----------------------------- */

/* Con altura fija la foto se recortaba y perdia la mitad de la escena. Al
   darle su proporcion real (2400x1516 en escritorio, 1400x1750 en movil) se
   ve entera y no hay recorte que decidir. */
.nayu-portada.nayu-solo-escritorio {
	/* La altura sale del ancho de la ventana por la proporcion de la foto
	   (2400x1516 -> 0.6317). Se calcula asi y no con aspect-ratio porque en
	   este montaje esa propiedad no llegaba a aplicarse. */
	min-height: min(86vh, 63.17vw) !important;
	height: min(86vh, 63.17vw);
}

.nayu-portada.nayu-solo-movil {
	/* 1400x1750 -> 1.25 */
	min-height: min(88vh, 125vw) !important;
	height: min(88vh, 125vw);
}

.nayu-portada .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
}

.nayu-portada .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 781px) {
	.nayu-portada.nayu-solo-movil .wp-block-cover__inner-container {
		justify-content: flex-end;
	}
}

/* ==========================================================================
   NAYÚ · Cabecera de tres filas
   Logo al centro y navegacion debajo: con siete entradas de menu no caben
   en la misma linea que la marca sin encogerlo todo.
   ========================================================================== */

.nayu-cabecera__fila {
	align-items: center;
	gap: 16px;
}

/* Hueco vacio al lado contrario de los iconos, del mismo ancho, para que el
   logo quede centrado de verdad y no desplazado por el peso de un lado. */
.nayu-cabecera__hueco,
.nayu-cabecera__iconos {
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
	gap: 18px;
}

.nayu-cabecera__iconos {
	justify-content: flex-end;
}

.nayu-cabecera__marca {
	flex: 0 0 auto;
}

.nayu-cabecera__marca .wp-block-site-logo img {
	display: block;
	height: auto;
}

.nayu-cabecera__menu {
	margin-top: 18px;
}

.nayu-cabecera__menu .wp-block-navigation {
	justify-content: center;
}

.nayu-cabecera__menu .wp-block-navigation-item__content {
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color 160ms ease, color 160ms ease;
}

.nayu-cabecera__menu .wp-block-navigation-item__content:hover,
.nayu-cabecera__menu .wp-block-navigation-item__content:focus-visible {
	border-bottom-color: var(--wp--preset--color--verde, #2f4034);
}

/* WooCommerce mete su bloque de cuenta en la fila del menu por su cuenta.
   El nuestro ya esta arriba junto a la lupa y el carrito, asi que ese sobra. */
.nayu-cabecera__menu .wp-block-woocommerce-customer-account {
	display: none;
}

/* Los tres iconos con el mismo tamano y el mismo trazo. */
.nayu-cabecera__iconos .wc-block-customer-account__link {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	padding: 4px;
}

.nayu-cabecera__iconos .wc-block-customer-account__account-icon {
	width: 21px;
	height: 21px;
	fill: currentColor;
}

.nayu-cabecera__iconos .wc-block-customer-account__account-title {
	display: none;
}

@media (max-width: 781px) {
	.nayu-cabecera__menu {
		margin-top: 12px;
	}

	.nayu-cabecera__iconos {
		gap: 12px;
	}

	.nayu-cabecera__marca .wp-block-site-logo img {
		width: 132px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nayu-cabecera__menu .wp-block-navigation-item__content {
		transition: none;
	}
}




/* ==========================================================================
   NAYÚ · Páginas interiores
   El taller y Contacto. Los colores salen siempre de los tokens de theme.json.
   ========================================================================== */

/* --- Cabecera de página interior ------------------------------------------ */

.nayu-cabeza .wp-block-cover__inner-container {
	width: 100%;
}

/* Igual que en la portada: el maquetado que genera WordPress para el
   contenedor del cover vuelve a fijar el ancho después, así que se manda
   desde aquí y no desde el atributo del bloque. */
.nayu-cabeza .nayu-cabeza__texto {
	max-width: 620px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	position: relative;
	z-index: 2;
}

.nayu-cabeza h1 {
	margin: 0 0 14px;
}

.nayu-cabeza p:last-child {
	margin-bottom: 0;
	font-size: 1.125rem;
	color: color-mix(in srgb, var(--wp--preset--color--base, #fbf6ee) 88%, transparent);
}

/* --- Párrafo de entrada --------------------------------------------------- */

.nayu-intro {
	font-size: 1.1875rem;
	line-height: 1.6;
}

/* --- Pasos numerados ------------------------------------------------------ */

.nayu-pasos {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1240px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px;
}

.nayu-pasos li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--arena, #e8decb);
}

.nayu-pasos__numero {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--arena, #e8decb);
}

.nayu-pasos strong {
	font-size: 1rem;
}

.nayu-pasos span:not(.nayu-pasos__numero) {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wp--preset--color--piedra, #8f887c);
}

/* --- Foto recortada junto a texto ----------------------------------------- */

.nayu-foto-recorte img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 2px;
}

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 1024px) {

	.nayu-pasos {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}

@media (max-width: 781px) {

	.nayu-pasos {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.nayu-foto-recorte img {
		height: 280px;
	}

	.nayu-intro {
		font-size: 1.0625rem;
	}
}

/* ==========================================================================
   NAYÚ · Muro de piezas
   Cinco fotos enmarcadas colgadas como en una pared de salón, con luz de
   ventana entrando por arriba a la izquierda. Las cinco son cuadradas de
   origen, así que la variedad sale del tamaño y del desnivel, y solo se
   recorta a vertical donde el motivo lo aguanta.

   La luz va en dos capas: una detrás, que es la pared iluminada, y otra
   delante, que pasa por encima de los cuadros. Las dos con el mismo ángulo y
   el mismo origen. Es eso lo que hace que los cinco cuadros parezcan estar en
   la misma pared y bajo la misma luz, en vez de cinco recortes pegados.
   ========================================================================== */

/* --- La pared ------------------------------------------------------------- */

/* Se alcanza la sección con :has() en vez de ponerle una clase a mano, porque
   el muro es hijo directo del grupo y así el bloque sigue siendo el que genera
   WordPress, sin marcado añadido en dos sitios. Donde no haya :has() la
   sección se queda en el crema plano de siempre. */
.wp-block-group:has(> .nayu-muro) {
	position: relative;
	isolation: isolate;
	/* Beige, más cálido y más profundo que el crema de la página. La pared es
	   otra superficie, no el mismo papel: si comparte color con el resto, los
	   marcos flotan en vez de estar colgados en algún sitio. */
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--arena, #e8decb) 92%,
		var(--wp--preset--color--piedra, #8f887c) 8%
	)
	/* Con !important porque WordPress marca asi las clases de color de
	   preset, y el bloque lleva has-base-background-color puesto. */
	!important;
	background-image:
		/* El haz principal, el que entra por la ventana. */
		linear-gradient(
			112deg,
			color-mix(in srgb, #fff 62%, transparent) 0%,
			color-mix(in srgb, #fff 44%, transparent) 16%,
			transparent 44%
		),
		/* El segundo haz: el travesaño de la ventana parte la luz en dos. */
		linear-gradient(
			112deg,
			transparent 46%,
			color-mix(in srgb, #fff 22%, transparent) 55%,
			transparent 68%
		),
		/* El rincón en sombra, abajo a la derecha. Marrón y no negro: una
		   sombra sobre pared cálida tira a marrón, en gris se ve sucia. */
		radial-gradient(
			90% 80% at 106% 104%,
			color-mix(in srgb, #4a4034 19%, transparent) 0%,
			transparent 62%
		);
}

/* --- La rejilla ----------------------------------------------------------- */

.nayu-muro {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(14px, 1.8vw, 26px);
	/* La clave del muro: cada cuadro cuelga donde le toca y no se estira para
	   igualar al vecino. Sin esto vuelve a ser una parrilla. */
	align-items: start;
	max-width: 1240px;
	margin-inline: auto;
	position: relative;
}

/* --- El cuadro ------------------------------------------------------------ */

.nayu-muro__pieza {
	margin: 0;
	overflow: hidden;
	/* El paspartú: el relleno deja ver el fondo de la figura entre el marco y
	   la foto, igual que el cartón de un cuadro enmarcado. Va más ancho que el
	   marco, que es la proporción que tienen los cuadros de verdad.

	   En crema y no en blanco: el blanco puro era lo más luminoso de toda la
	   pantalla y se llevaba la mirada antes que las piezas, que es justo lo
	   que no queremos. El crema sigue siendo bastante más claro que la pared,
	   así que el paspartú se lee, pero ya no compite. */
	background: color-mix(
		in srgb,
		var(--wp--preset--color--base, #fbf6ee) 40%,
		var(--wp--preset--color--arena, #e8decb) 60%
	);
	padding: clamp(8px, 1.2vw, 20px);
	/* Marco y paspartú van por dentro de la medida, no sumados a ella: con
	   content-box cada pieza se saldría de su columna por los cuatro lados. */
	box-sizing: border-box;
	border: clamp(3px, 0.4vw, 7px) solid var(--wp--preset--color--contraste, #1f2420);
	/* Las sombras caen hacia abajo y a la derecha porque la luz entra por
	   arriba a la izquierda. Si cayeran rectas, la luz de la pared y la sombra
	   del cuadro contarían cosas distintas y se nota aunque no se sepa por qué.
	   La pegada da el canto del marco; la abierta lo separa de la pared. */
	box-shadow:
		3px 4px 6px color-mix(in srgb, #4a4034 16%, transparent),
		14px 20px 38px color-mix(in srgb, #4a4034 20%, transparent);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.nayu-muro__pieza img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nayu-muro__pieza:hover {
	transform: translateY(-5px);
	box-shadow:
		3px 4px 6px color-mix(in srgb, #4a4034 16%, transparent),
		20px 30px 52px color-mix(in srgb, #4a4034 26%, transparent);
}

/* La capa de luz que va por delante. Mismo ángulo y mismo origen que la de la
   pared, pero más suave: aquí cruza por encima de los marcos y de las fotos.

   Va en la sección y no en el muro: el muro está limitado a 1240px y sacarle
   la capa por los lados para que la luz desbordara empujaba la página a lo
   ancho. La sección ya es de ancho completo, así que inset: 0 basta.

   No captura el ratón, así que el hover de los cuadros sigue vivo. */
.wp-block-group:has(> .nayu-muro)::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background:
		linear-gradient(
			112deg,
			color-mix(in srgb, #fff 30%, transparent) 0%,
			color-mix(in srgb, #fff 16%, transparent) 20%,
			transparent 46%
		),
		radial-gradient(
			88% 78% at 104% 104%,
			color-mix(in srgb, #3a3128 15%, transparent) 0%,
			transparent 60%
		);
}

/* --- Dónde cuelga cada uno ------------------------------------------------ */

/* El desnivel está medido y sube con el ancho de la pantalla, para que no se
   pierda en monitores grandes. Los anchos van a propósito muy desiguales
   —598, 287, 184, 287, 700 en una pantalla de 1280— porque es el contraste de
   tamaño, y sobre todo tener una claramente pequeña, lo que hace que se lea
   como pared de salón y no como parrilla desnivelada. */
.nayu-muro__pieza--a {
	grid-column: 1 / span 6;
	aspect-ratio: 4 / 3;
}

.nayu-muro__pieza--b {
	grid-column: 7 / span 3;
	aspect-ratio: 3 / 4;
	margin-top: clamp(22px, 3.4vw, 48px);
}

/* La pequeña. Cuelga alta y sola, como el cuadrito suelto de una pared. */
.nayu-muro__pieza--c {
	grid-column: 10 / span 2;
	aspect-ratio: 1 / 1;
	margin-top: clamp(40px, 6vw, 96px);
}

.nayu-muro__pieza--d {
	grid-column: 2 / span 3;
	aspect-ratio: 3 / 4;
	margin-top: clamp(12px, 2vw, 26px);
}

.nayu-muro__pieza--e {
	grid-column: 5 / span 7;
	aspect-ratio: 2 / 1;
	margin-top: clamp(28px, 4.2vw, 60px);
}

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 781px) {

	.nayu-muro {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* En dos columnas el escalonado deja huecos que parecen error. El desnivel
	   lo dan aquí las proporciones distintas de cada cuadro, no los márgenes:
	   una ancha arriba y dos parejas debajo, sin ningún hueco. */
	.nayu-muro .nayu-muro__pieza {
		grid-column: auto / span 1;
		margin-top: 0;
		padding: 8px;
		border-width: 3px;
		box-shadow:
			2px 2px 4px color-mix(in srgb, #4a4034 16%, transparent),
			6px 10px 20px color-mix(in srgb, #4a4034 18%, transparent);
	}

	.nayu-muro .nayu-muro__pieza--a {
		grid-column: 1 / span 2;
		aspect-ratio: 4 / 3;
	}

	.nayu-muro .nayu-muro__pieza--b,
	.nayu-muro .nayu-muro__pieza--e {
		aspect-ratio: 3 / 4;
	}

	.nayu-muro .nayu-muro__pieza--c,
	.nayu-muro .nayu-muro__pieza--d {
		aspect-ratio: 1 / 1;
	}

	/* La luz se atenúa: en pantalla pequeña, con los cuadros tan juntos, la
	   misma intensidad ensucia las fotos. */
	.wp-block-group:has(> .nayu-muro)::after {
		opacity: 0.6;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nayu-muro__pieza {
		transition: none;
	}

	.nayu-muro__pieza:hover {
		transform: none;
	}
}


/* ==========================================================================
   NAYÚ · Promesas
   Cuatro razones para comprar. Antes era una fila de iconos pegados al texto;
   ahora es una banda con su propio aire, cada promesa centrada y separada de
   la siguiente por un filete.
   ========================================================================== */

.nayu-promesas {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1240px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.nayu-promesas li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 8px clamp(14px, 2.2vw, 34px);
	text-align: center;
}

/* El filete va entre promesas, nunca en los extremos. */
.nayu-promesas li + li {
	border-left: 1px solid var(--wp--preset--color--arena, #e8decb);
}

.nayu-promesas svg {
	width: 30px;
	height: 30px;
	margin-bottom: 16px;
	color: var(--wp--preset--color--verde, #2f4034);
	transition: transform 0.4s ease;
}

.nayu-promesas strong {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 8px;
}

.nayu-promesas span {
	font-size: 0.8125rem;
	line-height: 1.55;
	max-width: 22ch;
	color: var(--wp--preset--color--piedra, #8f887c);
}

.nayu-promesas li:hover svg {
	transform: translateY(-3px);
}

/* --- El trazo que se dibuja solo ------------------------------------------ */

/* Cada figura del icono lleva pathLength="1" en el marcado, así que su
   longitud es 1 sin importar su forma y un solo valor sirve para todas.
   Todo va dentro del @supports a propósito: donde no haya line de scroll
   (Firefox, hoy) los iconos no llegan a esconderse nunca y salen enteros. */
@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		/* Solo las figuras. Nunca el <g>: dasharray y dashoffset se heredan en
		   SVG, y puesto en el grupo se pisaría con el de cada hija. */
		.nayu-promesas svg path,
		.nayu-promesas svg circle,
		.nayu-promesas svg rect,
		.nayu-promesas svg line,
		.nayu-promesas svg polyline {
			stroke-dasharray: 1;
			stroke-dashoffset: 1;
			animation: nayu-trazo linear both;
			animation-timeline: view();
			animation-range: entry 20% entry 100%;
		}
	}
}

@keyframes nayu-trazo {

	to {
		stroke-dashoffset: 0;
	}
}

@media (max-width: 900px) {

	.nayu-promesas {
		grid-template-columns: repeat(2, 1fr);
		/* Fila y columna a la vez: la regla vieja de 900px dejaba 22px de
		   separación lateral, y aquí la columna la marca el filete. */
		gap: 36px 0;
	}

	/* En dos columnas el filete de la tercera sobra: empieza fila nueva. */
	.nayu-promesas li:nth-child(odd) {
		border-left: 0;
	}
}

@media (max-width: 480px) {

	.nayu-promesas {
		grid-template-columns: 1fr;
		gap: 30px 0;
	}

	.nayu-promesas li + li {
		border-left: 0;
	}
}

/* --- WhatsApp del pie ----------------------------------------------------- */

/* El color de enlace del tema es el verde oscuro, que sobre el pie verde
   oscuro no se ve. Aqui el enlace va en crema. */
.nayu-pie__contacto a {
	color: var(--wp--preset--color--base, #fbf6ee);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.nayu-pie__contacto a:hover {
	color: var(--wp--preset--color--arena, #e8decb);
}

/* --- Promesas: los cuatro bloques en el mismo carril ---------------------- */

/* "Envíos a todo Colombia" ocupa dos líneas y los otros tres una, así que sin
   esto cada subtítulo arranca a una altura distinta y la fila se ve torcida.
   Con subgrid las tres filas (icono, título, subtítulo) las marca la rejilla
   de arriba, y las promesas que comparten fila quedan alineadas entre sí.
   No hace falta declarar las filas por cada tamaño de pantalla: las implícitas
   que crea `span 3` ya son comunes a todas las de la misma fila. */
@supports (grid-template-rows: subgrid) {

	.nayu-promesas li {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		justify-items: center;
		align-content: start;
	}

	/* En subgrid la separación entre icono, título y texto la marca el
	   row-gap de la rejilla, no los márgenes de cada pieza. */
	.nayu-promesas svg,
	.nayu-promesas strong {
		margin-bottom: 0;
	}

	/* El carril lo marca el título más alto, el de dos líneas. Los de una
	   línea se quedarían centrados en él y volverían a desalinearse con el
	   subtítulo de al lado: arriba del todo, y la fila vuelve a leerse recta. */
	.nayu-promesas strong,
	.nayu-promesas span {
		align-self: start;
	}

	.nayu-promesas {
		row-gap: 14px;
	}

	@media (max-width: 900px) {

		.nayu-promesas {
			gap: 14px 0;
		}

		/* Entre la primera y la segunda fila de promesas hace falta más aire
		   que entre el icono y su título. */
		.nayu-promesas li:nth-child(n + 3) {
			margin-top: 26px;
		}
	}
}

/* ==========================================================================
   NAYÚ · Móvil
   Tres arreglos que solo valen en pantalla pequeña: la cabecera en una fila,
   las promesas en cuadros y las familias como carrusel.

   Va al final del archivo a propósito. Las promesas llevan subgrid declarado
   más arriba, y en móvil hay que apagarlo: el subgrid alinea las cuatro a la
   vez, y con dos filas la de abajo se descuadra respecto a la de arriba.
   ========================================================================== */

/* --- Cabecera: hamburguesa, marca e iconos en una sola fila ---------------- */

/* El menú de WordPress se vuelve hamburguesa por debajo de 600px, así que el
   reordenado empieza justo ahí: por encima el menú sigue siendo una fila de
   enlaces y tiene que quedarse debajo de la marca. */
@media (max-width: 600px) {

	/* La fila se disuelve y sus tres hijos pasan a ser celdas de la cabecera,
	   junto al menú, que ya era hermano. Así la hamburguesa sube a la
	   izquierda sin tocar el marcado. */
	.nayu-cabecera {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 8px;
	}

	/* Con !important porque WordPress pinta .wp-block-group.is-layout-flex,
	   que tiene mas especificidad que una clase sola y ganaba: la fila seguia
	   siendo flex, y marca e iconos quedaban apretados dentro de una sola
	   celda en vez de repartirse en dos. */
	.nayu-cabecera__fila {
		display: contents !important;
	}

	/* El maquetado restringido de WordPress le pone ancho máximo y márgenes
	   automáticos a cada hijo, y eso descoloca las celdas. */
	.nayu-cabecera > .nayu-cabecera__menu,
	.nayu-cabecera__marca,
	.nayu-cabecera__iconos {
		max-width: none;
		margin-inline: 0;
	}

	/* Existía solo para centrar la marca cuando el menú iba debajo. */
	.nayu-cabecera__hueco {
		display: none;
	}

	.nayu-cabecera__menu {
		grid-column: 1;
		grid-row: 1;
		/* Con !important por lo mismo: el bloque trae
		   is-content-justification-center y la hamburguesa quedaba centrada en
		   su columna, con los iconos pegados al borde. Descuadraba la fila. */
		justify-content: flex-start !important;
		margin-top: 0;
	}

	.nayu-cabecera__marca {
		grid-column: 2;
		grid-row: 1;
	}

	.nayu-cabecera__iconos {
		grid-column: 3;
		grid-row: 1;
		justify-content: flex-end;
		gap: 10px;
	}
}

/* Las dos columnas de los lados son iguales, así que la marca queda centrada
   de verdad y no hace falta encogerla: a 375px los lados piden 52px de los
   97 que tienen. Solo por debajo de 340 empieza a apretar. */
@media (max-width: 340px) {

	.nayu-cabecera__marca .wp-block-site-logo img {
		width: 112px;
	}

	.nayu-cabecera__iconos {
		gap: 8px;
	}
}

/* --- Promesas: cuadros que llenan el contenedor --------------------------- */

@media (max-width: 900px) {

	.nayu-promesas {
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
	}

	/* Dos por dos. El filete vertical va solo entre las columnas y el
	   horizontal solo entre las filas: dibujan una cruz y ninguno asoma por
	   fuera del bloque. */
	.nayu-promesas li {
		display: flex;
		grid-row: auto;
		padding: 26px 12px;
		margin-top: 0;
	}

	.nayu-promesas li:nth-child(odd) {
		border-left: 0;
	}

	.nayu-promesas li:nth-child(even) {
		border-left: 1px solid var(--wp--preset--color--arena, #e8decb);
	}

	.nayu-promesas li:nth-child(n + 3) {
		border-top: 1px solid var(--wp--preset--color--arena, #e8decb);
	}

	/* Apagado el subgrid, las separaciones vuelven a ser de cada pieza. */
	.nayu-promesas svg {
		margin-bottom: 14px;
	}

	/* Dos líneas de alto fijo: "Envíos a todo Colombia" ocupa dos y las demás
	   una, y sin esto el subtítulo de al lado arrancaba más arriba. */
	.nayu-promesas strong {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 2.8em;
		margin-bottom: 8px;
	}

	/* En columna estrecha el tope de 22ch dejaba el texto en una banda flaca
	   en medio del cuadro. */
	.nayu-promesas span {
		max-width: none;
	}
}

/* --- Familias: carrusel en vez de parrilla -------------------------------- */

@media (max-width: 900px) {

	/* Deja de ser rejilla y pasa a ser una tira que se arrastra. Los márgenes
	   negativos la llevan hasta los bordes de la pantalla mientras la primera
	   pieza sigue alineada con el texto: así el corte de la derecha se ve como
	   "hay más" y no como un fallo de maquetación. */
	.nayu-familias {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		gap: 16px;
		margin-inline: calc(var(--wp--style--root--padding-left, 24px) * -1);
		padding-inline: var(--wp--style--root--padding-left, 24px);
		padding-bottom: 4px;
		/* La barra estorba: el asomo de la pieza siguiente ya dice que hay más. */
		scrollbar-width: none;
	}

	.nayu-familias::-webkit-scrollbar {
		display: none;
	}

	.nayu-familias__item {
		flex: 0 0 clamp(88px, 26vw, 130px);
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   NAYÚ · Portada y cabecera en móvil
   El titular iba a 42 px en una pantalla de 375: se comía la foto y dejaba el
   botón casi fuera de vista. El antetítulo iba en piedra sobre la foto y no se
   leía. Y la lupa, con tres iconos a la derecha, se montaba sobre el logo.
   ========================================================================== */

@media (max-width: 600px) {

	/* --- La lupa sale de la cabecera --------------------------------------- */

	/* El atajo la envuelve en un párrafo, así que se oculta el párrafo entero:
	   dejar el botón oculto dentro habría dejado su margen ocupando sitio.
	   El buscador pasa a estar dentro del menú, como campo. */
	.nayu-cabecera__iconos > p {
		display: none;
	}

	/* --- El titular ------------------------------------------------------- */

	.nayu-portada.nayu-solo-movil h2 {
		/* Con !important porque el bloque lleva has-titular-font-size, y
		   WordPress genera esas clases con !important igual que las de color. */
		font-size: 2rem !important;
		line-height: 1.14;
		margin-bottom: 20px;
	}

	/* --- El antetítulo ----------------------------------------------------- */

	/* En tinta en vez de piedra, y con el degradado subiendo un poco, queda
	   sobre crema y se lee. Más pequeño y más espaciado: a este tamaño una
	   línea de versalitas separadas se lee como etiqueta, no como texto que
	   compite con el titular. */
	.nayu-portada.nayu-solo-movil .nayu-eyebrow {
		color: var(--wp--preset--color--contraste, #1f2420);
		font-size: 0.625rem;
		letter-spacing: 0.26em;
		margin-bottom: 14px;
		opacity: 0.75;
	}

	/* El crema sube hasta la mitad para que el bloque de texto se apoye en
	   superficie limpia. Las piezas están en la parte alta de la foto, así que
	   no les llega. */
	.nayu-portada.nayu-solo-movil .wp-block-cover__background {
		background: linear-gradient(
			to top,
			var(--wp--preset--color--base, #fbf6ee) 0%,
			var(--wp--preset--color--base, #fbf6ee) 44%,
			color-mix(in srgb, var(--wp--preset--color--base, #fbf6ee) 62%, transparent) 52%,
			transparent 62%
		) !important;
	}

	/* --- El botón ---------------------------------------------------------- */

	/* Ocupaba media pantalla de ancho. A este tamaño sigue siendo cómodo de
	   pulsar (43 px de alto, por encima del mínimo de 40) y deja de gritar. */
	.nayu-portada.nayu-solo-movil .wp-block-button__link {
		padding: 13px 26px;
		font-size: 0.6875rem;
		letter-spacing: 0.12em;
	}
}

/* ==========================================================================
   NAYÚ · Muro y portada en móvil, segunda vuelta
   El muro deja de ser una ancha arriba y dos parejas debajo, y pasa a la misma
   pared de salón que en escritorio: tres cuadros de tamaño decreciente arriba,
   cada uno colgado más bajo que el anterior, y dos debajo.

   Va al final del archivo porque tiene que pisar las reglas de móvil del
   propio bloque del muro, declaradas más arriba.
   ========================================================================== */

@media (max-width: 781px) {

	/* Doce columnas también en el teléfono. Con dos no hay forma de que los
	   tres de arriba tengan anchos distintos, que es lo que hace que se lea
	   como pared y no como parrilla. */
	.nayu-muro {
		grid-template-columns: repeat(12, 1fr);
		gap: 8px;
	}

	/* El orden en pantalla no es el del marcado: cada cuadro se coloca por
	   columna, así que la foto que va en cada sitio se elige por cuál aguanta
	   ese recorte, no por dónde esté escrita. */
	.nayu-muro .nayu-muro__pieza {
		padding: 6px;
		border-width: 2px;
		box-shadow:
			2px 3px 5px color-mix(in srgb, #4a4034 14%, transparent),
			5px 9px 18px color-mix(in srgb, #4a4034 16%, transparent);
	}

	/* --- Fila de arriba: grande, mediano, pequeño --------------------------- */

	/* El girasol suelto: es el que mejor aguanta el vertical grande. */
	.nayu-muro .nayu-muro__pieza--b {
		grid-column: 1 / span 5;
		grid-row: 1;
		aspect-ratio: 3 / 4;
		margin-top: 0;
	}

	/* Los tulipanes, también verticales, un paso más pequeños y más abajo. */
	.nayu-muro .nayu-muro__pieza--d {
		grid-column: 6 / span 4;
		grid-row: 1;
		aspect-ratio: 3 / 4;
		margin-top: 26px;
	}

	/* El pequeño suelto, colgado alto y a la derecha. */
	.nayu-muro .nayu-muro__pieza--c {
		grid-column: 10 / span 3;
		grid-row: 1;
		aspect-ratio: 1 / 1;
		margin-top: 54px;
	}

	/* --- Fila de abajo: ancho y alto ---------------------------------------- */

	.nayu-muro .nayu-muro__pieza--a {
		grid-column: 1 / span 7;
		grid-row: 2;
		aspect-ratio: 4 / 3;
		margin-top: 40px;
	}

	/* En 4/5 y no en 3/4: esta foto es una mesa apaisada, y forzarla a
	   vertical del todo le cortaba media escena. */
	.nayu-muro .nayu-muro__pieza--e {
		grid-column: 8 / span 5;
		grid-row: 2;
		aspect-ratio: 4 / 5;
		margin-top: 0;
	}
}

/* ==========================================================================
   NAYÚ · Luz de ventana en la portada
   Una capa por encima de la foto y del texto, con un haz entrando en diagonal
   por arriba a la izquierda y el rincón de abajo a la derecha en sombra. Que
   cruce también el texto es lo que hace que todo parezca estar en el mismo
   sitio, bajo la misma luz, y no un texto pegado sobre una foto.
   ========================================================================== */

.nayu-portada {
	position: relative;
	isolation: isolate;
}

.nayu-portada::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	background:
		/* El haz principal, el que entra por la ventana. */
		linear-gradient(
			112deg,
			color-mix(in srgb, #fff 40%, transparent) 0%,
			color-mix(in srgb, #fff 16%, transparent) 24%,
			transparent 50%
		),
		/* El segundo, más tenue: el travesaño parte la luz en dos. */
		linear-gradient(
			112deg,
			transparent 52%,
			color-mix(in srgb, #fff 12%, transparent) 60%,
			transparent 72%
		),
		/* El rincón en sombra. En marrón y no en negro: sobre una escena
		   cálida, una sombra gris se ve sucia. */
		radial-gradient(
			80% 62% at 104% 102%,
			color-mix(in srgb, #4a4034 16%, transparent) 0%,
			transparent 60%
		);
}

/* --- La flecha del botón --------------------------------------------------- */

/* Con texto alternativo vacío para que el lector de pantalla no la lea: no
   dice nada que no diga ya "Ver la colección". */
.nayu-portada .wp-block-button__link::after {
	content: "\2192" / "";
	display: inline-block;
	margin-left: 10px;
	font-weight: 400;
	transition: transform 0.25s ease;
}

.nayu-portada .wp-block-button__link:hover::after,
.nayu-portada .wp-block-button__link:focus-visible::after {
	transform: translateX(4px);
}

/* --- El bloque de texto en móvil ------------------------------------------- */

@media (max-width: 600px) {

	/* A la izquierda, como en la referencia. A ancho de teléfono un párrafo
	   centrado se lee peor: cada línea empieza en un sitio distinto. */
	/* Con el parrafo, el bloque de texto mide 278px. En una portada de 469
	   el antetitulo caia encima de las piezas. A 620 la foto se ve entera de
	   arriba abajo (se recorta algo de los lados) y queda mesa vacia de sobra
	   debajo de las piezas para apoyar el texto. */
	.nayu-portada.nayu-solo-movil {
		min-height: 620px !important;
	}

	.nayu-portada.nayu-solo-movil .nayu-portada__texto > * {
		text-align: left;
	}

	.nayu-portada.nayu-solo-movil .wp-block-buttons {
		justify-content: flex-start;
	}

	.nayu-portada.nayu-solo-movil .nayu-eyebrow {
		text-align: left;
	}

	/* El párrafo de entrada, que en móvil no estaba. Tope de línea corto: un
	   renglón muy largo en pantalla estrecha cansa de leer. */
	.nayu-portada__entrada {
		max-width: 32ch;
		margin-bottom: 24px;
		font-size: 0.9375rem;
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nayu-portada .wp-block-button__link::after {
		transition: none;
	}

	.nayu-portada .wp-block-button__link:hover::after {
		transform: none;
	}
}

/* ==========================================================================
   NAYÚ · Portada de móvil, foto nueva
   La foto pasa a tener la pared vacía arriba y las piezas abajo, así que el
   bloque de texto sube: eso es lo que pedía la referencia y hasta ahora no se
   podía hacer porque las piezas ocupaban la parte alta.
   ========================================================================== */

/* La luz de ventana se queda solo en el teléfono. En pantalla grande le subía
   el velo a la foto y parecía que hubiera perdido calidad. */
@media (min-width: 601px) {

	.nayu-portada::after {
		display: none;
	}
}

@media (max-width: 600px) {

	.nayu-portada.nayu-solo-movil .wp-block-cover__inner-container {
		justify-content: flex-start;
	}

	.nayu-portada.nayu-solo-movil .nayu-portada__texto {
		margin-top: 0;
		margin-bottom: auto;
	}

	/* El degradado se da la vuelta con la foto: crema arriba, donde se apoya
	   el texto, y transparente antes de llegar a las piezas. El corte está en
	   el 54 %, que es donde asoma el primer girasol. */
	.nayu-portada.nayu-solo-movil .wp-block-cover__background {
		background: linear-gradient(
			to bottom,
			var(--wp--preset--color--base, #fbf6ee) 0%,
			var(--wp--preset--color--base, #fbf6ee) 38%,
			color-mix(in srgb, var(--wp--preset--color--base, #fbf6ee) 55%, transparent) 46%,
			transparent 54%
		) !important;
	}
}

/* ==========================================================================
   NAYÚ · Pie de página
   Cuatro columnas: la marca con su lema y sus redes, y tres de enlaces. Debajo
   una línea de cierre. Los colores salen de los tokens, nunca literales.
   ========================================================================== */

.nayu-pie__marca-col {
	max-width: 360px;
}

.nayu-pie__lema {
	margin: 18px 0 22px;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--wp--preset--color--oliva-claro, #8c9a85);
}

/* --- Títulos de columna --------------------------------------------------- */

.nayu-pie__titulo {
	margin: 0 0 20px;
	padding-bottom: 12px;
	font-family: var(--wp--preset--font-family--texto, sans-serif);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base, #fbf6ee);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--oliva-claro, #8c9a85) 35%, transparent);
}

/* --- Listas de enlaces ---------------------------------------------------- */

.nayu-pie__enlaces,
.nayu-pie__datos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

/* Las legales llegan en su propia lista, desde [nayu_legales], porque solo se
   pintan si estan publicadas. El gap es interno a cada lista, asi que sin esto
   la primera legal quedaria pegada a "Carrito". */
.nayu-pie__enlaces + .nayu-pie__enlaces {
	margin-top: 11px;
}

.nayu-pie__enlaces a,
.nayu-pie__datos a,
.nayu-pie__datos li {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--oliva-claro, #8c9a85);
	text-decoration: none;
	transition: color 0.2s ease;
}

.nayu-pie__enlaces a:hover,
.nayu-pie__enlaces a:focus-visible,
.nayu-pie__datos a:hover,
.nayu-pie__datos a:focus-visible {
	color: var(--wp--preset--color--base, #fbf6ee);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.nayu-pie__horario {
	margin-top: 4px;
	font-size: 0.8125rem !important;
	color: color-mix(in srgb, var(--wp--preset--color--oliva-claro, #8c9a85) 75%, transparent) !important;
}

/* --- Redes ---------------------------------------------------------------- */

/* Solo salen las que tengan enlace cargado. Mientras no haya ninguna, la fila
   entera no se pinta: un icono que no lleva a ningún sitio es peor que nada. */
.nayu-redes {
	list-style: none;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.nayu-redes a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: var(--wp--preset--color--oliva-claro, #8c9a85);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--oliva-claro, #8c9a85) 40%, transparent);
	border-radius: 50%;
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nayu-redes a:hover,
.nayu-redes a:focus-visible {
	color: var(--wp--preset--color--base, #fbf6ee);
	border-color: var(--wp--preset--color--base, #fbf6ee);
	transform: translateY(-2px);
}

/* --- Línea de cierre ------------------------------------------------------ */

.nayu-pie__cierre {
	margin-top: var(--wp--preset--spacing--50, 4rem);
	padding-top: 22px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--oliva-claro, #8c9a85) 26%, transparent);
}

.nayu-pie__firma {
	margin: 0;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--wp--preset--color--oliva-claro, #8c9a85) 80%, transparent);
}

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 781px) {

	/* Las columnas de bloques se apilan solas, pero sin esto la de la marca
	   arrastra su ancho máximo y queda descolgada del resto. */
	.nayu-pie__marca-col {
		max-width: none;
	}

	.nayu-pie__filas {
		gap: var(--wp--preset--spacing--40, 2.5rem);
	}

	/* Apiladas las cuatro, el pie se iba a mil pixeles de alto. Las dos de
	   enlaces caben de sobra a la par y ahorran media pantalla de scroll.
	   Con !important porque el ancho de columna lo fija WordPress en linea. */
	.nayu-pie__filas > .nayu-pie__col:nth-of-type(2),
	.nayu-pie__filas > .nayu-pie__col:nth-of-type(3) {
		flex-basis: calc(50% - 20px) !important;
	}

	.nayu-pie__filas {
		column-gap: 40px;
	}

	.nayu-pie__titulo {
		margin-bottom: 16px;
	}

	.nayu-pie__cierre {
		margin-top: var(--wp--preset--spacing--40, 2.5rem);
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nayu-redes a {
		transition: none;
	}

	.nayu-redes a:hover {
		transform: none;
	}
}

/* ==========================================================================
   NAYÚ · Portada de móvil, encuadre definitivo
   Tres cambios sobre la vuelta anterior: fuera el velo claro de arriba, la
   medida del texto más corta para que el titular caiga en cuatro líneas, y la
   foto encuadrada para que las piezas ocupen lo que les toca.
   ========================================================================== */

@media (max-width: 600px) {

	/* --- Fuera el velo ----------------------------------------------------- */

	/* El degradado crema tapaba la pared de la foto y la dejaba casi blanca.
	   La pared ya es clara de por sí: el texto en tinta se lee de sobra encima
	   sin necesidad de lavarla. Se quita también el velo del 10 % que trae el
	   bloque de cubierta, que sumaba al mismo problema. */
	.nayu-portada.nayu-solo-movil .wp-block-cover__background {
		background: none !important;
		opacity: 0 !important;
	}

	/* --- La medida del texto ----------------------------------------------- */

	/* Corta a propósito. Con la medida larga el titular caía en dos líneas muy
	   anchas; a esta cae en cuatro, que es como está en la referencia y como
	   respira mejor un titular de esta familia. */
	.nayu-portada.nayu-solo-movil .nayu-portada__texto {
		max-width: 268px;
		/* Aire arriba, que pegado al borde el antetitulo se lee apretado. */
		padding-top: 18px;
	}

	/* El titular, mas corto todavia que el parrafo: asi cae en cuatro lineas,
	   como en la referencia. Un titular de esta familia respira mejor en
	   columna estrecha que estirado de lado a lado. */
	.nayu-portada.nayu-solo-movil h2 {
		max-width: 232px;
	}

	.nayu-portada.nayu-solo-movil h2 {
		font-size: 1.9rem !important;
		line-height: 1.08;
		margin-bottom: 12px;
	}

	.nayu-portada.nayu-solo-movil .nayu-eyebrow {
		margin-bottom: 10px;
		opacity: 1;
	}

	.nayu-portada.nayu-solo-movil .nayu-portada__entrada {
		max-width: none;
		margin-bottom: 16px;
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.nayu-portada.nayu-solo-movil .wp-block-button__link {
		padding: 12px 22px;
		font-size: 0.625rem;
	}

	/* --- El encuadre -------------------------------------------------------- */

	/* La foto se ancla abajo: así el recorte se come pared vacía por arriba, que
	   es lo que sobra, y no la mesa por abajo, que es donde están las piezas. */
	.nayu-portada.nayu-solo-movil img.wp-block-cover__image-background {
		object-position: center bottom !important;
	}

	/* 680 y no menos: la foto se escala al alto del contenedor, asi que
	   cuanto mas alto, mas pared queda por encima de las piezas. Con 580 el
	   boton caia justo sobre los girasoles. */
	.nayu-portada.nayu-solo-movil {
		min-height: 680px !important;
	}
}

/* ==========================================================================
   NAYÚ · Pagina del carrito
   Enmarcada como una factura: la tabla con su cabecera y el resumen en su
   propia caja. Es lo que la hace leerse como un documento de compra y no como
   una lista suelta encima del fondo.
   ========================================================================== */

.wc-block-cart .wc-block-cart-items {
	background: var(--wp--preset--color--superficie, #fff);
	border: 1px solid var(--wp--preset--color--arena, #e8decb);
	border-radius: 10px;
	/* Con collapse el navegador se come el redondeo de las esquinas. */
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.wc-block-cart .wc-block-cart-items__header {
	background: color-mix(in srgb, var(--wp--preset--color--base, #fbf6ee) 72%, #fff);
}

.wc-block-cart .wc-block-cart-items__header th {
	padding: 15px 16px;
	border-bottom: 1px solid var(--wp--preset--color--arena, #e8decb);
	color: var(--wp--preset--color--contraste, #1f2420);
	font-size: 0.7rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wc-block-cart .wc-block-cart-items__row td {
	padding: 18px 16px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--arena, #e8decb) 55%, transparent);
}

.wc-block-cart .wc-block-cart-items__row:last-child td {
	border-bottom: 0;
}

.wc-block-cart .wc-block-cart-item__image img {
	border-radius: 8px;
}

/* El resumen y el boton de pagar, en una sola caja.
   La caja va en la columna entera y no en el bloque del resumen, porque el
   boton es hermano suyo y no hijo: enmarcando solo el resumen, el boton se
   quedaba fuera, suelto debajo. */
.wc-block-cart .wc-block-cart__sidebar {
	background: var(--wp--preset--color--superficie, #fff);
	border: 1px solid var(--wp--preset--color--arena, #e8decb);
	border-radius: 10px;
	padding: 0 20px 20px;
	overflow: hidden;
}

.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	background: none;
	border: 0;
	padding: 0;
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-heading-block {
	margin: 0 -20px 16px;
	padding: 15px 20px;
	background: color-mix(in srgb, var(--wp--preset--color--base, #fbf6ee) 72%, #fff);
	border-bottom: 1px solid var(--wp--preset--color--arena, #e8decb);
	color: var(--wp--preset--color--contraste, #1f2420);
	font-size: 0.7rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wc-block-cart .wc-block-cart__submit-button {
	width: 100%;
	border-radius: 8px;
	font-size: 0.78rem !important;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Bajo 782 px WooCommerce apila la tabla y la cabecera sobra. */
@media (max-width: 782px) {

	.wc-block-cart .wc-block-cart-items__header {
		display: none;
	}
}