/* =========================================================================
   Ukuya — hoja de estilo única del theme.
   Diseño "Acuarela": mucho blanco, serif fina para titulares, sans geométrica
   para el texto, magenta profundo para todo lo que se pulsa.

   Orden: tokens, base, utilidades, cabecera, pie, portada, tienda, producto,
   blog, páginas, responsive.
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------- */
/* Los valores de color salen de medir los píxeles de la papelería nueva.
   El rosa palo y el coral NO pasan contraste para texto pequeño: son para
   el logo, fondos y adornos. El texto va en tinta; lo que se pulsa, en magenta. */
:root {
	--fondo: #FDFBF9;
	--rosa-agua: #FBF2F1;
	--blush: #F7E9E8;
	--arena: #F4EAE4;
	--piedra: #EFEDE6;

	--tinta: #332B2F;
	--tinta-suave: #6B5F64;
	--tinta-tenue: #9A8A90;

	--magenta: #8A2E63;
	--ciruela: #5F1F44;
	--rosa-palo: #C9798F;

	--borde: #EADFDB;
	--borde-fuerte: #D4BFC8;

	--serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--ancho: 1180px;
	--canal: 32px;

	--paso-1: 8px;
	--paso-2: 16px;
	--paso-3: 24px;
	--paso-4: 40px;
	--paso-5: 64px;
	--paso-6: 96px;
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fondo);
	color: var(--tinta);
	font-family: var(--sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 300;
	line-height: 1.1;
}

h1 { font-size: clamp(38px, 6vw, 68px); }
h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.3; }

p { margin: 0 0 var(--paso-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--magenta); text-decoration: none; }
a:hover { color: var(--ciruela); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }
.u-lista-limpia { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* Enlace de salto, visible solo al tabular. */
.u-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--magenta);
	color: var(--fondo);
	padding: 14px 22px;
	z-index: 100;
}
.u-saltar:focus { left: 0; }

/* Texto solo para lectores de pantalla. */
.u-oculto {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Utilidades --------------------------------------------------------- */

.u-ancho {
	max-width: var(--ancho);
	margin: 0 auto;
	padding-inline: var(--canal);
}

.u-etiqueta {
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--magenta);
	margin-bottom: var(--paso-3);
}

.u-entradilla {
	font-size: 18px;
	line-height: 1.7;
	color: var(--tinta-suave);
	max-width: 46ch;
}

.u-seccion { padding-top: var(--paso-6); }

.u-seccion__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--paso-2);
	margin-bottom: var(--paso-4);
}

/* --- Botones ------------------------------------------------------------ */

.u-boton,
.u-boton:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 16px 38px;
	border: 1px solid var(--magenta);
	background: var(--magenta);
	color: var(--fondo);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}
.u-boton:hover { background: var(--ciruela); border-color: var(--ciruela); }

.u-boton--linea,
.u-boton--linea:hover {
	background: transparent;
	border-color: var(--borde-fuerte);
	color: var(--tinta);
}
.u-boton--linea:hover { border-color: var(--magenta); color: var(--magenta); }

.u-boton--ancho { width: 100%; }

/* Enlace subrayado fino, el remate editorial del diseño. */
.u-enlace-fino {
	display: inline-block;
	border-bottom: 1px solid var(--magenta);
	padding-bottom: 4px;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.u-enlace-fino:hover { text-decoration: none; border-bottom-color: var(--ciruela); }

/* --- Campos ------------------------------------------------------------- */

.u-campo {
	width: 100%;
	min-height: 52px;
	padding: 15px 20px;
	border: 1px solid var(--borde-fuerte);
	background: var(--fondo);
	color: var(--tinta);
	font-size: 15px;
}
.u-campo::placeholder { color: var(--tinta-tenue); }

/* --- Barra de anuncio --------------------------------------------------- */

.u-anuncio {
	background: var(--magenta);
	color: var(--fondo);
	text-align: center;
	padding: 11px var(--canal);
	font-size: 13px;
	letter-spacing: 0.08em;
}
.u-anuncio a { color: var(--fondo); text-decoration: underline; }

/* --- Cabecera ----------------------------------------------------------- */

.u-cabecera { border-bottom: 1px solid var(--borde); position: relative; }

/* Lazo de luto, temporal. Esquina superior izquierda de la cabecera. */
.u-luto {
	position: absolute;
	top: 14px;
	left: var(--canal);
	width: 26px;
	line-height: 0;
}
.u-luto svg {
	width: 100%;
	height: auto;
	fill: none;
	stroke: #111;
	stroke-width: 3.6;
}

/* Tres hijos: logo, menú e iconos. En escritorio el logo ocupa la fila entera y
   el menú y los iconos van debajo. En móvil los tres caben en una fila y el menú
   baja a la segunda, plegado. Todo con el mismo HTML: solo cambia el reparto. */
.u-cabecera__interior {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 26px var(--canal) 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.u-logo {
	flex: 1 1 100%;
	order: 1;
	text-align: center;
	font-family: var(--serif);
	font-size: 44px;
	line-height: 1;
	color: var(--rosa-palo);
	letter-spacing: 0.02em;
}
.u-logo:hover { color: var(--magenta); text-decoration: none; }
.u-logo img { max-height: 56px; width: auto; }

.u-nav {
	flex: 1 1 auto;
	order: 2;
	display: flex;
	justify-content: center;
}

.u-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	list-style: none;
}
.u-nav a {
	color: var(--tinta);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-block: 6px;
}
.u-nav a:hover { color: var(--magenta); text-decoration: none; }
.u-nav .current-menu-item > a,
.u-nav .current_page_item > a {
	color: var(--magenta);
	border-bottom: 1px solid var(--magenta);
}

.u-cabecera__iconos {
	order: 3;
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
	color: var(--tinta);
}
.u-cabecera__iconos a,
.u-cabecera__iconos button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: none;
	color: inherit;
}
.u-cabecera__iconos a:hover,
.u-cabecera__iconos button:hover { color: var(--magenta); }

.u-cabecera__carrito { position: relative; }
.u-cabecera__contador {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	background: var(--magenta);
	color: var(--fondo);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	padding-inline: 4px;
}

/* El botón de menú solo existe en móvil. La regla lleva el contenedor delante
   para ganarle a `.u-cabecera__iconos button`, que lo pone en inline-flex. */
.u-cabecera__iconos .u-menu-movil { display: none; }

/* Buscador desplegable de la cabecera. */
.u-buscador { display: none; border-top: 1px solid var(--borde); }
.u-buscador[data-abierto='1'] { display: block; }
.u-buscador form {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 18px var(--canal);
	display: flex;
	gap: 12px;
}
.u-buscador .u-campo { flex: 1 1 auto; }

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

.u-migas {
	font-size: 13px;
	color: var(--tinta-tenue);
}
.u-migas a { color: var(--tinta-tenue); }
.u-migas a:hover { color: var(--magenta); }
.u-migas__sep { margin-inline: 8px; }

/* --- Portada ------------------------------------------------------------ */

.u-portada {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 72px var(--canal) 80px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--paso-5);
}
.u-portada__texto { flex: 1 1 440px; min-width: 0; }
.u-portada__titulo em { font-style: italic; color: var(--magenta); }
.u-portada__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 38px;
}
.u-portada__figura {
	flex: 1 1 420px;
	min-width: 0;
	position: relative;
	margin: 0;
}
/* La mancha rosa detrás de la foto: es la acuarela de la papelería, traducida. */
.u-portada__figura::before {
	content: '';
	position: absolute;
	inset: -26px -26px 40px 40px;
	background: var(--blush);
	border-radius: 240px 240px 180px 180px;
}
.u-portada__figura img {
	position: relative;
	width: 100%;
	height: 460px;
	object-fit: cover;
}

/* --- Tira de razones ---------------------------------------------------- */

.u-razones {
	border-block: 1px solid var(--borde);
}
.u-razones__interior {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 34px var(--canal);
	display: flex;
	flex-wrap: wrap;
	gap: var(--paso-4);
	justify-content: space-between;
}
.u-razon {
	flex: 1 1 240px;
	display: flex;
	gap: 14px;
	align-items: center;
	font-size: 14px;
	color: var(--tinta-suave);
}
.u-razon svg { color: var(--rosa-palo); flex: none; }

/* --- Rejilla de productos ----------------------------------------------- */

/* `ul.products` es la rejilla que arma WooCommerce sola en relacionados y
   upsells. Se le dan las mismas reglas para que se vea igual que la nuestra. */
.u-rejilla,
ul.products {
	display: grid;
	grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr));
	gap: 34px;
	list-style: none;
	padding: 0;
}

/* Cuántas columnas. Va en una clase y no en un `style=` en el HTML: un estilo
   en línea le gana a las media queries y la rejilla no bajaba a 2 en el móvil. */
.u-rejilla--3 { --columnas: 3; }
.u-rejilla--4 { --columnas: 4; }

/* La tarjeta es una columna: así el precio queda a la misma altura en toda la
   fila aunque los nombres ocupen una, dos o tres líneas. */
.u-rejilla > li,
ul.products > li {
	display: flex;
	flex-direction: column;
}

.u-producto__foto {
	display: block;
	background: var(--rosa-agua);
	padding: 22px;
	margin-bottom: 18px;
}
.u-producto__foto img {
	width: 100%;
	height: 300px;
	object-fit: contain;
}
.u-producto__cat {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tinta-tenue);
	margin-bottom: 8px;
}
.u-producto__nombre a { color: var(--tinta); }
.u-producto__nombre a:hover { color: var(--magenta); text-decoration: none; }
.u-producto__precio {
	margin-top: auto;
	padding-top: 10px;
	font-size: 16px;
	color: var(--magenta);
}
.u-producto__precio del { color: var(--tinta-tenue); margin-right: 8px; }
.u-producto__precio ins { text-decoration: none; }

/* --- Tarjetas de categoría ---------------------------------------------- */

.u-categorias {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	list-style: none;
}
/* El <li> estira hasta la altura de la fila; la tarjeta tiene que estirar con
   él, si no las tres cajas rosas terminan a alturas distintas. */
.u-categorias > li { display: flex; }
/* La tarjeta es una columna: el nombre arriba, la foto abajo a la derecha. Antes
   la foto iba posicionada encima y un nombre largo se le montaba. */
.u-categoria {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 40px 36px 28px;
	min-height: 300px;
	background: var(--blush);
	color: var(--tinta);
	overflow: hidden;
}
.u-categoria:nth-child(2) { background: var(--arena); }
.u-categoria:nth-child(3) { background: var(--piedra); }
.u-categoria:hover { text-decoration: none; }
.u-categoria:hover .u-categoria__titulo { color: var(--magenta); }
.u-categoria__titulo {
	font-size: clamp(24px, 2.4vw, 32px);
	text-wrap: balance;
}
.u-categoria__n { margin-top: 10px; font-size: 14px; color: var(--tinta-suave); }
.u-categoria img {
	margin-top: auto;
	align-self: flex-end;
	width: 130px;
	height: 130px;
	object-fit: contain;
}

.u-duo {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: var(--paso-6) var(--canal) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 72px;
	align-items: center;
}
.u-duo__texto { flex: 1 1 380px; min-width: 0; }
.u-duo__texto h2 { font-size: clamp(32px, 4vw, 52px); }
.u-duo__texto p { margin-top: 24px; font-size: 17px; line-height: 1.8; color: var(--tinta-suave); }
.u-duo__media { flex: 1 1 420px; min-width: 0; margin: 0; }
.u-duo__media img { width: 100%; height: auto; }

/* --- Opiniones ---------------------------------------------------------- */

.u-opiniones {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	list-style: none;
}
.u-opiniones:has(> :last-child:nth-child(1)) {
	grid-template-columns: minmax(0, 540px);
	justify-content: center;
}
.u-opiniones:has(> :last-child:nth-child(2)) {
	grid-template-columns: repeat(2, minmax(0, 440px));
	justify-content: center;
}
.u-opinion {
	margin: 0;
	border: 1px solid var(--borde);
	padding: 34px;
}
.u-estrellas { display: flex; gap: 3px; margin-bottom: 18px; color: var(--rosa-palo); }
.u-opinion p {
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.5;
	font-style: italic;
}
.u-opinion footer { margin-top: 20px; font-size: 13px; color: var(--tinta-suave); }

.u-vacio {
	border: 1px dashed var(--borde-fuerte);
	padding: 40px;
	text-align: center;
	color: var(--tinta-suave);
	font-size: 15px;
}

/* --- Newsletter --------------------------------------------------------- */

.u-boletin { margin-top: var(--paso-6); background: var(--blush); }
.u-boletin__interior {
	max-width: 700px;
	margin: 0 auto;
	padding: 76px var(--canal);
	text-align: center;
}
.u-boletin p { margin-top: 16px; color: var(--tinta-suave); }
.u-boletin form {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.u-boletin .u-campo { flex: 1 1 300px; width: auto; }
.u-boletin__letra-chica { margin-top: 18px; font-size: 13px; color: var(--tinta-tenue); }

/* --- Pie ---------------------------------------------------------------- */

.u-pie { border-top: 1px solid var(--borde); }

/* El nombre en el pie es un rótulo, no el logo de la cabecera: no hereda su
   reparto en la fila (que lo dejaba centrado y ocupando todo el ancho). */
/* El selector lleva el contenedor delante para ganarle a `.u-pie__marca p`,
   que fija el tamaño y el color del resto del bloque de contacto. */
.u-pie__marca .u-pie__logo {
	font-family: var(--serif);
	font-size: 38px;
	line-height: 1;
	color: var(--rosa-palo);
	margin: 0;
}
.u-pie__interior {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 68px var(--canal) 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
}
.u-pie__marca { flex: 1 1 280px; }
.u-pie__marca p { margin-top: 14px; font-size: 14px; line-height: 1.9; color: var(--tinta-suave); }
.u-pie__col { flex: 1 1 180px; }
.u-pie__col h2 {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tinta);
	margin-bottom: 18px;
}
.u-pie__col ul { list-style: none; font-size: 14px; line-height: 2.1; }
.u-pie__col a { color: var(--tinta-suave); }
.u-pie__col a:hover { color: var(--magenta); }
.u-pie__legal { border-top: 1px solid var(--borde); }
.u-pie__legal div {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 22px var(--canal);
	font-size: 12px;
	color: var(--tinta-tenue);
}

/* --- Tienda ------------------------------------------------------------- */

.u-tienda__cabeza { padding: 44px var(--canal) 0; max-width: var(--ancho); margin: 0 auto; }
.u-tienda__cabeza h1 { margin-top: 20px; }
.u-tienda__cabeza .u-entradilla { margin-top: 14px; }

.u-tienda {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 48px var(--canal) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	align-items: flex-start;
}

.u-filtros { flex: 1 1 220px; min-width: 0; max-width: 260px; }
/* El título de la columna solo se ve en escritorio: en móvil ese papel lo hace
   el botón que despliega los filtros, y dos títulos seguidos sobran. */
.u-filtros__titulo {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.u-filtros ul { list-style: none; font-size: 15px; }
.u-filtros li + li { margin-top: 2px; }
.u-filtros a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	color: var(--tinta);
}
.u-filtros a:hover { color: var(--magenta); text-decoration: none; }
.u-filtros .is-activo > a { color: var(--magenta); }
.u-filtros__n { color: var(--tinta-tenue); font-size: 13px; flex: none; }

/* En escritorio los filtros están siempre abiertos y el resumen no se ve: el
   título ya lo da el bloque. En móvil el resumen es el botón que los despliega. */
.u-filtros__resumen {
	list-style: none;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 14px 18px;
	border: 1px solid var(--borde-fuerte);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.u-filtros__resumen::-webkit-details-marker { display: none; }
.u-filtros__flecha { transition: transform 0.15s ease; flex: none; }
.u-filtros__plegable[open] .u-filtros__flecha { transform: rotate(180deg); }

/* El contenido crece mucho más que la columna de filtros, pero puede bajar
   hasta 560 px antes de pasar a una fila propia. */
.u-tienda__lista { flex: 999 1 560px; min-width: 0; }

.u-tienda__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--paso-2);
	border-bottom: 1px solid var(--borde);
	padding-bottom: 18px;
	margin-bottom: var(--paso-4);
	font-size: 14px;
	color: var(--tinta-suave);
}
.u-tienda__barra form { display: flex; align-items: center; gap: 12px; }
.u-tienda__barra select {
	border: 1px solid var(--borde-fuerte);
	background: var(--fondo);
	padding: 9px 14px;
	font-size: 14px;
}

.u-paginacion { margin-top: 56px; }
.u-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	margin-right: 10px;
	border: 1px solid var(--borde-fuerte);
	color: var(--tinta);
	font-size: 15px;
}
.u-paginacion .page-numbers:hover { border-color: var(--magenta); color: var(--magenta); text-decoration: none; }
.u-paginacion .current {
	background: var(--magenta);
	border-color: var(--magenta);
	color: var(--fondo);
}
.u-paginacion .dots { border: 0; min-width: 0; }

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

.u-ficha {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 40px var(--canal) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 72px;
	align-items: flex-start;
}
.u-ficha__galeria { flex: 1 1 440px; min-width: 0; }
.u-ficha__datos { flex: 1 1 380px; min-width: 0; }
.u-ficha__datos h1 { margin-top: 12px; font-size: clamp(32px, 4vw, 52px); }
.u-ficha__cat {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.u-ficha__ref { margin-top: var(--paso-3); font-size: 13px; color: var(--tinta-tenue); }

/* La galería es de Woo y viene flotada a la mitad del ancho. Acá ocupa su
   columna entera y el fondo rosa hace de caja, como en las tarjetas. */
.woocommerce div.product div.images,
.woocommerce #content div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce-page #content div.product div.images {
	float: none;
	width: 100%;
	margin: 0;
}
.woocommerce div.product div.summary,
.woocommerce #content div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce-page #content div.product div.summary {
	float: none;
	width: auto;
	margin-bottom: 0;
}
.u-ficha__galeria .woocommerce-product-gallery__wrapper { background: var(--rosa-agua); }
.u-ficha__galeria .woocommerce-product-gallery__image img { width: 100%; }
.u-ficha__galeria .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 12px;
	list-style: none;
}
.u-ficha__galeria .flex-control-thumbs li { width: auto; margin: 0; float: none; }
.u-ficha__galeria .flex-control-thumbs img { background: var(--rosa-agua); opacity: 1; }

/* Las opiniones comparten el ancho de lectura de la descripción: un formulario
   de reseña de 1180 px de ancho se lee fatal y parece un panel de administración. */
.u-ficha__opiniones {
	max-width: 760px;
	margin: 0 auto;
	padding-inline: var(--canal);
}

/* La descripción larga, debajo de la compra y a ancho de lectura. */
.u-ficha__descripcion {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--paso-6) var(--canal) 0;
}
.u-ficha__texto { margin-top: var(--paso-3); font-size: 17px; line-height: 1.85; color: var(--tinta-suave); }
.u-ficha__texto h2, .u-ficha__texto h3 { margin-top: var(--paso-4); color: var(--tinta); }
.u-ficha__texto ul, .u-ficha__texto ol { margin: 0 0 var(--paso-2) 22px; }
.u-ficha__texto li { margin-bottom: 6px; }
.u-ficha__texto strong { color: var(--tinta); font-weight: 500; }
.u-ficha__precio {
	margin-top: 26px;
	font-family: var(--serif);
	font-size: 38px;
	color: var(--magenta);
}
.u-ficha__precio del { color: var(--tinta-tenue); font-size: 26px; margin-right: 10px; }
.u-ficha__precio ins { text-decoration: none; }
.u-ficha__iva { margin-top: 6px; font-size: 13px; color: var(--tinta-tenue); }
.u-ficha__resumen { margin-top: 28px; font-size: 17px; line-height: 1.8; color: var(--tinta-suave); }

.u-ficha .quantity input {
	width: 92px;
	min-height: 52px;
	padding: 15px;
	border: 1px solid var(--borde-fuerte);
	background: var(--fondo);
	text-align: center;
	font-size: 16px;
}
.u-ficha form.cart {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: stretch;
}
.u-ficha form.cart .button {
	flex: 1 1 240px;
	min-height: 52px;
	border: 1px solid var(--magenta);
	background: var(--magenta);
	color: var(--fondo);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.u-ficha form.cart .button:hover { background: var(--ciruela); border-color: var(--ciruela); }

.u-ficha__promesas { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; list-style: none; }
.u-ficha__promesas li { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--tinta-suave); }
.u-ficha__promesas svg { color: var(--rosa-palo); flex: none; }

.u-plegable { border-top: 1px solid var(--borde); margin-top: var(--paso-4); }
.u-plegable details { border-bottom: 1px solid var(--borde); }
.u-plegable summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 0;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.u-plegable summary::-webkit-details-marker { display: none; }
.u-plegable details > *:not(summary) { padding-bottom: 22px; font-size: 15px; line-height: 1.8; color: var(--tinta-suave); }

/* --- Blog --------------------------------------------------------------- */

.u-blog__cabeza { max-width: var(--ancho); margin: 0 auto; padding: 56px var(--canal) 0; }
.u-entradas {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: var(--paso-4) var(--canal) 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}
.u-entrada__foto { display: block; margin-bottom: 20px; }
.u-entrada__foto img { width: 100%; height: 260px; object-fit: cover; }
.u-entrada__foto--vacia { height: 260px; background: var(--blush); }
.u-entrada__fecha {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tinta-tenue);
}
.u-entrada__titulo { margin-top: 10px; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; }
.u-entrada__titulo a { color: var(--tinta); }
.u-entrada__titulo a:hover { color: var(--magenta); text-decoration: none; }
.u-entrada__resumen { margin-top: 12px; color: var(--tinta-suave); font-size: 15px; }

.u-articulo { max-width: 740px; margin: 0 auto; padding: 56px var(--canal) 0; }
.u-articulo__portada { margin: var(--paso-4) 0 0; }
.u-articulo__portada img { width: 100%; height: 420px; object-fit: cover; }
.u-articulo__cuerpo { margin-top: var(--paso-4); font-size: 17px; line-height: 1.85; color: var(--tinta-suave); }
.u-articulo__cuerpo h2 { margin-top: var(--paso-4); color: var(--tinta); }
.u-articulo__cuerpo h3 { margin-top: var(--paso-3); color: var(--tinta); }
.u-articulo__cuerpo ul,
.u-articulo__cuerpo ol { margin: 0 0 var(--paso-2) 22px; }
.u-articulo__cuerpo blockquote {
	margin: var(--paso-4) 0;
	padding-left: 28px;
	border-left: 2px solid var(--rosa-palo);
	font-family: var(--serif);
	font-size: 24px;
	font-style: italic;
	color: var(--tinta);
}

/* --- Página suelta ------------------------------------------------------ */

.u-pagina { max-width: 740px; margin: 0 auto; padding: 56px var(--canal) 0; }

/* Carrito, finalizar compra y mi cuenta: tablas y formularios de dos columnas.
   En la columna de lectura de 740 px no entran. */
.u-pagina--ancha { max-width: var(--ancho); }
.u-pagina__cuerpo { margin-top: var(--paso-4); font-size: 17px; line-height: 1.85; color: var(--tinta-suave); }
.u-pagina__cuerpo h2 { margin-top: var(--paso-4); color: var(--tinta); }

/* Las páginas que todavía arma Elementor se dejan a su ancho, sin el nuestro. */
.u-pagina--elementor { max-width: none; padding: 0; }

/* --- Página no encontrada ---------------------------------------------- */

.u-vacio-pagina {
	max-width: 620px;
	margin: 0 auto;
	padding: var(--paso-6) var(--canal) 0;
	text-align: center;
}
.u-vacio-pagina h1 { margin-top: 10px; }
.u-vacio-pagina em { font-style: italic; color: var(--magenta); }
.u-vacio-pagina .u-entradilla { margin: var(--paso-3) auto 0; }
.u-vacio-pagina__buscador {
	margin-top: var(--paso-4);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.u-vacio-pagina__buscador .u-campo { flex: 1 1 240px; width: auto; }
.u-vacio-pagina__atajos {
	margin-top: var(--paso-3);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	list-style: none;
}

/* --- Avisos de WooCommerce ---------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	max-width: var(--ancho);
	margin: var(--paso-3) auto 0;
	padding: 18px 24px;
	/* Woo marca estos avisos con un borde superior de colores (verde, azul, rojo).
	   Acá el acento es una línea fina a la izquierda, en la paleta de la marca. */
	border: 0;
	border-left: 2px solid var(--magenta);
	background: var(--blush);
	list-style: none;
	font-size: 15px;
}
.woocommerce-error { border-left-color: #A3252C; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { padding-left: 24px; }

/* --- WooCommerce: piezas comunes ---------------------------------------- */
/* Woo trae su propia hoja de estilo con botones morados, tablas grises y
   formularios del navegador. Acá se traducen a la paleta del sitio. Los
   selectores llevan `.woocommerce` delante para empatar con los suyos: como
   esta hoja se carga después, gana la nuestra sin necesidad de !important. */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message .button,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 15px 32px;
	border: 1px solid var(--borde-fuerte);
	border-radius: 0;
	background: transparent;
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: transparent;
	border-color: var(--magenta);
	color: var(--magenta);
}

/* Las acciones principales (comprar, finalizar, acceder) van en magenta. */
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .checkout-button,
.woocommerce form.login button[type='submit'],
.woocommerce form.register button[type='submit'],
.woocommerce form.woocommerce-form-login button[type='submit'] {
	background: var(--magenta);
	border-color: var(--magenta);
	color: var(--fondo);
}
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .checkout-button:hover {
	background: var(--ciruela);
	border-color: var(--ciruela);
	color: var(--fondo);
}
.woocommerce .button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Campos: los del checkout, el login y las reseñas. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce #review_form input[type='text'],
.woocommerce #review_form input[type='email'],
.woocommerce #review_form textarea,
.woocommerce table.cart td.actions .coupon .input-text,
.select2-container .select2-selection--single {
	width: 100%;
	min-height: 52px;
	padding: 14px 18px;
	border: 1px solid var(--borde-fuerte);
	border-radius: 0;
	background: var(--fondo);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.5;
	box-shadow: none;
}
.woocommerce form .form-row textarea,
.woocommerce #review_form textarea { min-height: 140px; }
.woocommerce form .form-row label,
.woocommerce #review_form label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--tinta-suave);
}
.woocommerce form .form-row { margin-bottom: var(--paso-3); padding: 0; }
.woocommerce form .form-row .required { color: var(--magenta); text-decoration: none; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: calc(50% - 10px); }

/* Cantidad: el mismo alto que los botones de al lado. */
.woocommerce .quantity .qty {
	width: 92px;
	min-height: 52px;
	padding: 14px;
	border: 1px solid var(--borde-fuerte);
	border-radius: 0;
	background: var(--fondo);
	color: var(--tinta);
	font-size: 16px;
	text-align: center;
}

/* Tablas: carrito, totales y resumen del pedido. */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	border: 1px solid var(--borde);
	border-radius: 0;
	border-collapse: collapse;
	margin: 0 0 var(--paso-4);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-top: 1px solid var(--borde);
	padding: 18px 20px;
	font-size: 15px;
	color: var(--tinta);
}
.woocommerce table.shop_table thead th {
	border-top: 0;
	background: var(--rosa-agua);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tinta-suave);
}
.woocommerce table.shop_table td.product-name a { color: var(--tinta); }
.woocommerce table.shop_table td.product-name a:hover { color: var(--magenta); }
.woocommerce table.shop_table img { width: 64px; height: auto; }
.woocommerce a.remove {
	color: var(--tinta-tenue);
	font-size: 20px;
	line-height: 1;
}
.woocommerce a.remove:hover { background: transparent; color: var(--magenta); }
/* El cupón: campo y botón en la misma línea mientras quepan. Sin el tope de
   ancho, el campo se come la fila y el botón cae debajo. */
.woocommerce table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	float: none;
}
.woocommerce table.cart td.actions .coupon .input-text { flex: 0 1 260px; width: auto; min-width: 0; }
/* La celda sigue siendo una celda: convertirla en flex rompe el reparto de
   columnas de la tabla. El cupón flota a la izquierda y "actualizar" a la derecha. */
.woocommerce table.cart td.actions { text-align: right; }
.woocommerce table.cart td.actions .button { float: none; }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce .cart-collaterals h2,
.woocommerce .woocommerce-checkout h3,
.woocommerce #order_review_heading,
.woocommerce .u-pagina__cuerpo h2,
.woocommerce .u-pagina__cuerpo h3 {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(26px, 3vw, 34px);
	margin-bottom: var(--paso-3);
}

/* Carrito y checkout en dos columnas cuando hay sitio. */
.u-pagina--ancha .woocommerce { display: block; }
.u-pagina--ancha .cart-collaterals { display: flex; justify-content: flex-end; }
.u-pagina--ancha .cart-collaterals .cart_totals { max-width: 460px; }

/* El checkout en dos columnas: datos a la izquierda, pedido y pago a la derecha.
   Se hace con áreas de rejilla porque el HTML de Woo pone el título del resumen
   como hermano suelto entre los dos bloques; con flex caía en su propia fila y
   partía la página en tres pisos. */
.woocommerce form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	grid-template-areas:
		'cliente resumen-titulo'
		'cliente resumen';
	column-gap: 56px;
	align-items: start;
}
.woocommerce form.checkout #customer_details { grid-area: cliente; width: auto; float: none; }
.woocommerce form.checkout #order_review_heading { grid-area: resumen-titulo; margin-top: 0; }
.woocommerce form.checkout #order_review { grid-area: resumen; width: auto; float: none; }
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 { float: none; width: 100%; }
.woocommerce .col2-set .col-2 { margin-top: var(--paso-4); }
.woocommerce-checkout #payment { background: var(--rosa-agua); border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--borde); }
.woocommerce-checkout #payment div.form-row { padding: var(--paso-3); }
.woocommerce-checkout #payment div.payment_box {
	background: var(--fondo);
	border: 1px solid var(--borde);
	color: var(--tinta-suave);
	font-size: 14px;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--fondo); }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: 14px; color: var(--tinta-suave); }
.woocommerce-checkout #payment .form-row.place-order { text-align: right; }

/* Mi cuenta. */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 24%; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--borde);
	color: var(--tinta);
	font-size: 15px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--magenta); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content { width: 70%; }
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
	border: 1px solid var(--borde);
	border-radius: 0;
	padding: var(--paso-4);
	max-width: 520px;
}

/* Disponibilidad: el verde oliva de Woo no es de esta marca. */
.woocommerce div.product .stock { color: var(--tinta-suave); font-size: 14px; }
.woocommerce div.product .stock.out-of-stock { color: #A3252C; }

/* Valoraciones. */
.woocommerce #reviews #comments ol.commentlist { list-style: none; padding: 0; }
.woocommerce #reviews #comments ol.commentlist li { margin-bottom: var(--paso-3); }
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border: 1px solid var(--borde);
	border-radius: 0;
	padding: var(--paso-3);
	margin-left: 0;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar { display: none; }
.woocommerce #review_form_wrapper { margin-top: var(--paso-4); }
.woocommerce p.stars a { color: var(--rosa-palo); }

/* La rejilla que arma Woo sola (relacionados, upsells, venta cruzada) viene
   flotada y con anchos en porcentaje. Sin esto se pisa con nuestro grid y las
   tarjetas salen de un dedo de ancho. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before { content: none; }
.woocommerce .related > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2 { margin-bottom: var(--paso-4); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
	:root { --canal: 24px; --paso-6: 64px; }

	.u-rejilla, .u-rejilla--3, .u-rejilla--4, ul.products { --columnas: 3; gap: 28px; }
	.u-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.u-opiniones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.u-entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.u-duo { gap: var(--paso-4); }

	.woocommerce form.checkout { column-gap: var(--paso-4); }
	.u-portada { gap: var(--paso-4); padding-block: 48px 56px; }
}

@media (max-width: 760px) {
	:root { --canal: 16px; --paso-6: 48px; --paso-5: 40px; }

	body { font-size: 15px; }

	/* La cabecera pasa a una sola fila: logo a la izquierda, iconos a la derecha. */
	.u-cabecera__interior { justify-content: space-between; padding: 14px var(--canal); gap: 12px; }
	.u-logo { flex: 0 1 auto; order: 1; text-align: left; font-size: 30px; }

	/* El lazo va a la izquierda del logo, centrado en la fila, y el logo le deja sitio. */
	.u-luto { top: 50%; transform: translateY(-50%); width: 16px; }
	.u-cabecera__interior { padding-left: calc(var(--canal) + 26px); }
	.u-cabecera__iconos { order: 2; gap: 2px; margin-left: auto; }

	.u-cabecera__iconos .u-menu-movil {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		border: 0;
		background: none;
		color: var(--tinta);
	}

	.u-nav {
		display: none;
		flex: 1 1 100%;
		order: 3;
		border-top: 1px solid var(--borde);
		padding-top: 14px;
	}
	.u-nav[data-abierto='1'] { display: block; }
	.u-nav ul { flex-direction: column; gap: 0; }
	.u-nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--borde); }

	.u-rejilla, .u-rejilla--3, .u-rejilla--4, ul.products { --columnas: 2; gap: 20px; }
	.u-producto__foto { padding: 14px; }
	.u-producto__foto img { height: 180px; }

	.u-categorias,
	.u-opiniones,
	.u-entradas { grid-template-columns: minmax(0, 1fr); }

	.u-categoria { min-height: 0; padding: 28px 24px 20px; }
	.u-categoria img { width: 96px; height: 96px; }

	.u-portada { padding-block: 32px 40px; gap: 32px; }
	.u-portada__figura::before { inset: -14px -14px 24px 24px; }
	.u-portada__figura img { height: 320px; }
	.u-portada__acciones { margin-top: 28px; }
	.u-boton { width: 100%; padding-inline: 24px; }

	/* Los filtros se pliegan: ocupan toda la fila y empiezan cerrados, para que
	   lo primero que se vea de una categoría sean los productos. */
	.u-tienda { gap: 24px; padding-top: 24px; }
	.u-filtros { max-width: none; flex: 1 1 100%; }
	.u-filtros__titulo { display: none; }
	.u-filtros__resumen { display: flex; }
	.u-filtros__cuerpo { padding: 8px 18px 18px; border: 1px solid var(--borde-fuerte); border-top: 0; }

	.u-tienda__barra { gap: 12px; }
	.u-tienda__barra form { width: 100%; }
	.u-tienda__barra select { flex: 1 1 auto; }

	/* Checkout y carrito en una sola columna. */
	.woocommerce form.checkout { display: block; }
	.woocommerce form.checkout #order_review_heading { margin-top: var(--paso-4); }
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { width: 100%; }
	.u-pagina--ancha .cart-collaterals { display: block; }
	.u-pagina--ancha .cart-collaterals .cart_totals { max-width: none; }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
	.woocommerce table.cart td.actions .coupon .input-text { flex: 1 1 100%; }
	.woocommerce form.login,
	.woocommerce form.register,
	.woocommerce form.lost_reset_password { padding: var(--paso-3); }

	.u-ficha__descripcion { padding-top: var(--paso-5); }
	.u-ficha__galeria .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.u-ficha { gap: 32px; padding-top: 24px; }
	.u-ficha form.cart .button { flex: 1 1 100%; }

	.u-articulo__portada img { height: 240px; }
	.u-boletin__interior { padding-block: 48px; }
	.u-pie__interior { gap: 32px; padding-block: 48px 32px; }
}