/*
Theme Name: UNE Joyas Theme
Theme URI: https://unejoyas.cl
Author: UNE Joyas
Description: Tema custom mínimo para UNE Joyas.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: unejoyas-theme
*/

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--une-font-body, "Manrope", "Segoe UI", Arial, sans-serif);
	background: var(--une-color-bg, #f4f0f5);
	color: var(--une-color-text, #2f2031);

	/*
	 * El pie va al fondo de la ventana aunque la pagina sea corta.
	 *
	 * Sin esto, un carrito con un solo producto dejaba el "© UNE Joyas" a media
	 * altura con el fondo siguiendo bajo el - se lee como pagina cortada, no como
	 * pagina corta. Pasa en carrito vacio, gracias por tu compra, resultados sin
	 * resultados y cualquier pagina de texto breve.
	 *
	 * Va con margin-top:auto en el pie y no con flex:1 en el main, porque no
	 * todas las plantillas traen un .une-theme-main -la portada arma el suyo- y
	 * el auto empuja igual sea cual sea el hermano que tenga encima.
	 *
	 * dvh despues de vh: en un telefono, 100vh cuenta la barra de direcciones que
	 * se esconde al hacer scroll, asi que el pie queda un poco mas abajo del
	 * borde y aparece una franja vacia que no deberia estar.
	 */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.une-theme-footer,
.une-home-footer {
	margin-top: auto;
}

img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto;
}

a img,
button img {
	pointer-events: none;
}

:root {
	--une-font-display: "Cormorant Garamond", "Times New Roman", serif;
	--une-font-body: "Manrope", "Segoe UI", Arial, sans-serif;
	--une-font-ui: var(--une-font-body);
	--une-text-base-size: 1rem;
	--une-text-base-line-height: 1.65;
	--une-heading-weight: 500;
	--une-heading-line-height: 1.06;
	--une-section-title-size: clamp(2.1rem, 4vw, 3.2rem);
	--une-display-title-size: clamp(2.9rem, 6vw, 5.2rem);
	--une-card-title-size: clamp(1.12rem, 1.35vw, 1.28rem);
/*
 * PALETA - ciruela empolvada (2026-08-10)
 *
 * UN SOLO MATIZ, 293 grados, en pasos de luminosidad. Antes habia once tonos
 * repartidos entre 255 y 303 grados -48 grados de dispersion- y eso no es una
 * paleta sino una deriva: cada token se eligio en su momento sin anclarse a los
 * demas, y el ojo registraba "dos morados que no calzan". El caso mas visible
 * era el header (303) contra el escenario 3D del configurador (282).
 *
 * Y el header estaba en luminosidad 29% con saturacion 32%, que es la zona
 * donde un color no tiene ni la profundidad de un tono oscuro ni la presencia
 * de uno saturado. De ahi que se viera apagado.
 *
 * Muchos pasos de un color son un sistema; muchos matices son desorden.
 *
 * QUE SE FUSIONO, Y POR QUE
 *
 * - brand y accent eran #60325e y #6b3d6b: 3 grados de matiz y 4 puntos de
 *   luminosidad de diferencia, o sea el mismo color con dos nombres.
 * - surface-alt y bg-secondary hacian el mismo oficio y se distinguian en
 *   1.05:1, que a la vista es nada.
 * - El verde #ccd0cb no tenia familia -108 grados, solo- y ademas se usaba como
 *   color de texto en las etiquetas de producto, donde daba 1.56:1 sobre
 *   blanco. Ilegible. Pasa al ciruela de marca, que da 7.64:1.
 * - --une-color-highlight no lo referenciaba nadie. Eliminado.
 *
 * CONTRASTES VERIFICADOS (minimo AA = 4.5:1)
 *
 *   Texto sobre pagina                13.58:1
 *   Texto sobre tarjeta blanca        15.31:1
 *   Blanco sobre header               15.31:1
 *   Acento sobre pagina                6.78:1
 *   Texto secundario sobre pagina      4.70:1
 *
 * accent-soft lleva texto en tres sitios, asi que NO puede recibir un lila
 * claro por bonito que sea: se queda en un tono que aguante lectura.
 */
	--une-ui-letter-spacing: 0.08em;
	--une-color-bg: #f4f0f5;
	--une-color-bg-secondary: #e7dfe8;
	--une-color-surface: #ffffff;
	--une-color-surface-alt: #e7dfe8;
	--une-color-border: #d3c8d5;
	--une-color-brand: #644b68;
	--une-color-accent: #644b68;
	--une-color-accent-soft: #79657b;
	--une-color-text: #2f2031;
	--une-color-text-soft: #79657b;

/*
 * LA FORMA DEL BOTON. Decidida y aplicada el 2026-08-11.
 *
 * TODO boton del sitio sale de este token. Antes habia tres formas distintas
 * para el mismo acto de agregar al carrito, y ninguna de las diferencias fue
 * una decision: recto en la ficha de producto, 10px en el configurador,
 * pastilla en el carrito y el checkout.
 *
 * La pastilla era el estandar de facto -16 de las 31 reglas de boton del tema
 * la usaban- pero por inercia, no por eleccion. Puesta al lado de la forma del
 * configurador, Piero eligio esta: una esquina moderada se emparenta con las
 * tarjetas y los paneles, que ya corren entre 16 y 30px, mientras la pastilla
 * era la unica geometria del sitio que no compartia con nada.
 *
 * Spinshop lo espeja en --sc-radius-cta, en plugin/assets/themes/une.css.
 *
 * QUE NO ES UN BOTON, Y POR ESO SIGUE REDONDO
 *
 * Quedaron 11 reglas en 999px a proposito, y conviene saber cuales antes de
 * "terminar" el barrido creyendo que se paso alguna:
 *
 *   .une-icon-btn, .une-home-slider-arrow   solo llevan un icono: un boton sin
 *                                           texto es un circulo en todas partes
 *   a.remove                                la X de quitar del carrito
 *   __swatch, __badge                       muestra de color y etiqueta
 *   __quantity                              el contador del resumen de pedido
 *   ::before de carrito vacio y de gracias  decoracion, no control
 *
 * OJO CON EL CHECKOUT. Sus botones son bloques de WooCommerce y sus reglas
 * llevan !important, asi que ahi hay que mirar el resultado y no fiarse del
 * diff: WooCommerce trae su propia hoja y actualiza cada cinco semanas.
 */
	--une-radius-btn: 10px;

/*
 * LA BARRA DE ARRIBA, DEFINIDA UNA SOLA VEZ.
 *
 * Había dos: la de la portada, con relieve y 58px de alto, y la del catálogo y
 * la ficha de producto, plana y de 82. Se leían como dos sitios distintos, y la
 * ficha —que es donde alguien decide comprar— era la que se veía más ajena.
 *
 * Y no fue por falta de intención: el CSS del catálogo tenía escrito al lado
 * "la barra tiene que ser el mismo color en las dos paginas, si una se mueve la
 * otra tambien". Divergieron igual, porque estaba copiado a mano en dos
 * archivos. Un comentario no mantiene nada sincronizado; un token sí.
 *
 * QUÉ HACE EL RELIEVE, para no aplanarlo sin querer:
 *
 *   - El degradado vertical, más claro arriba: es luz cayendo desde el cielo,
 *     que es de donde cae siempre. Las tres paradas van en el matiz 293 y suben
 *     o bajan juntas — mover una sola lo aplana.
 *   - El filo claro de 1px arriba: es el reflejo del canto, y es lo que más
 *     hace por la sensación de material. Se nota más su ausencia.
 *   - La sombra hacia abajo en vez de una línea: una línea entre barra oscura y
 *     página clara se lee como costura; la sombra se lee como que la barra está
 *     ENCIMA, que además es cierto porque va fija al hacer scroll.
 */
	--une-header-fondo: linear-gradient(
		180deg,
		rgba(83, 51, 87, 0.94) 0%,
		rgba(68, 40, 72, 0.96) 58%,
		rgba(56, 32, 59, 0.97) 100%
	);
	--une-header-sombra:
		inset 0 1px 0 rgba(255, 255, 255, 0.11),
		inset 0 -1px 0 rgba(0, 0, 0, 0.4),
		0 8px 22px -10px rgba(33, 22, 34, 0.5);
	--une-header-alto: 58px;
	--une-header-logo: 48px;
	--une-header-logo-movil: 34px;
}

body.une-theme-dark {
	--une-color-bg: #1f1424;
	--une-color-bg-secondary: #2f2031;
	--une-color-surface: #3a2440;
	--une-color-surface-alt: #2f2031;
	--une-color-border: #4d4852;
	--une-color-brand: #644b68;
	--une-color-accent: #644b68;
	--une-color-accent-soft: #79657b;
	--une-color-text: #f2edf4;
	--une-color-text-soft: #c9c1cf;
}

body,
button,
input,
select,
textarea {
	font-family: var(--une-font-body);
	font-size: var(--une-text-base-size);
	line-height: var(--une-text-base-line-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--une-font-display);
	font-weight: var(--une-heading-weight);
	line-height: var(--une-heading-line-height);
	letter-spacing: -0.015em;
}

.une-theme-wrap {
	width: min(1120px, calc(100% - 32px));
	margin: 0 auto;
}

.une-theme-header,
.une-theme-footer {
	background: var(--une-color-surface);
	border-bottom: 1px solid var(--une-color-border);
}

.une-theme-header__inner {
	padding: 18px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.une-theme-brand {
	text-decoration: none;
	color: var(--une-color-text);
	font-family: var(--une-font-ui);
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.une-theme-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}

.une-theme-menu a {
	text-decoration: none;
	color: var(--une-color-brand);
	font-family: var(--une-font-ui);
	font-size: 0.94rem;
	font-weight: 500;
}

.une-theme-footer {
	border-bottom: 0;
	border-top: 1px solid var(--une-color-border);
	padding: 20px 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--une-color-text-soft);
}

.une-theme-main {
	padding: 36px 0 60px;
}

/* ==================================================================
   Utilidades
   ================================================================== */

/*
 * Oculta a la vista pero no al lector de pantalla.
 *
 * El tema ya usaba esta clase —los avisos rotativos del header la ponen en las
 * copias que lee el lector de pantalla— pero nunca la definía. WordPress no la
 * trae para el front-end: la define cada tema. Sin ella, todo lo que estuviera
 * marcado como "solo para lectores" se imprimía a la vista.
 *
 * No se usa display:none ni visibility:hidden porque ambos lo esconden también
 * del lector, que es justo lo contrario de lo que se busca.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Si recibe el foco de teclado sí se muestra: un enlace de salto que
   nadie puede ver cuando lo tiene enfocado no sirve de nada. */
.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* ==================================================================
   Guía de tallas
   ================================================================== */

/*
 * El tema no tiene reset global de box-sizing.
 *
 * style.css, que es la hoja que carga en todo el sitio, no lo declara en ninguna
 * parte; cada CSS de sección trae el suyo por separado. Sin él, un campo con
 * width:100% suma su padding y su borde POR FUERA del ancho, y se desborda de la
 * caja que lo contiene — 34 px en este caso.
 *
 * Se acota a la guía a propósito. Ponerlo global sería lo correcto a la larga,
 * pero cambiaría el ancho de cajas en páginas que nadie está mirando ahora mismo,
 * y ese es un cambio que merece revisarse aparte y no de pasada.
 */
.une-guia,
.une-guia *,
.une-guia *::before,
.une-guia *::after {
	box-sizing: border-box;
}

/*
 * La guía usa el ancho completo del sitio (1120 px), no 64 caracteres.
 *
 * La versión anterior cabía en una columna de lectura y dejaba dos tercios de la
 * pantalla vacíos mientras las dos tarjetas de método se apretaban lado a lado.
 * Ahora el texto va a la izquierda y la calculadora fija a la derecha, que es
 * la forma natural de «lee cómo medir, escribe lo que mediste» sin bajar y
 * subir. En el teléfono todo se apila en una sola columna.
 */
.une-guia {
	padding-bottom: 32px;
}

.une-guia__cabecera {
	max-width: 44rem;
}

.une-guia h1 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 2.9rem);
	line-height: 1.1;
}

.une-guia__lead {
	font-size: 1.1rem;
	color: var(--une-color-text-soft, #79657b);
	margin: 16px 0 0;
	line-height: 1.6;
}

.une-guia h2 {
	margin: 0 0 18px;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.une-guia h3 {
	margin: 0 0 10px;
	font-size: 1.15rem;
}

.une-guia p {
	margin: 0 0 12px;
	line-height: 1.65;
}

.une-guia__cuerpo {
	margin-top: 40px;
}

/*
 * ---- Los métodos, uno bajo otro: dibujo, pasos y SU casilla en la misma fila.
 *
 * La casilla de cada método vive dentro de su fila, no en un panel aparte. Hubo
 * un panel único fijo a la derecha y flotaba: al bajar leyendo se quedaba arriba,
 * despegado del método que se acababa de leer, y encima reservaba una columna
 * entera que dejaba a los consejos encajonados a la izquierda. Sin esa columna,
 * cada fila usa el ancho completo y los consejos también.
 *
 * Tres tramos: en el teléfono todo apilado; desde 560 px el dibujo a la
 * izquierda del texto y la casilla debajo, a lo ancho; desde 1000 px los tres en
 * una fila, con la casilla a la derecha de los pasos que la explican.
 */
.une-guia__metodo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"dibujo"
		"texto"
		"panel";
	gap: 16px 28px;
	padding: 24px 0 28px;
	border-top: 1px solid var(--une-color-border, #d3c8d5);
	align-items: start;
}

.une-guia__dibujo {
	grid-area: dibujo;
}

.une-guia__metodo-texto {
	grid-area: texto;
}

.une-talla {
	grid-area: panel;
}

@media (min-width: 560px) {
	.une-guia__metodo {
		grid-template-columns: 13rem minmax(0, 1fr);
		grid-template-areas:
			"dibujo texto"
			"panel  panel";
	}
}

@media (min-width: 1000px) {
	.une-guia__metodo {
		grid-template-columns: 12rem minmax(0, 1fr) 21rem;
		grid-template-areas: "dibujo texto panel";
		gap: 20px 36px;
	}
}

.une-guia__dibujo {
	margin: 0;
	max-width: 22rem;
	padding: 10px;
	border-radius: var(--une-radius-lg, 14px);
	background: var(--une-color-surface, #fff);
	border: 1px solid var(--une-color-border, #d3c8d5);
}

.une-guia__dibujo svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Los dibujos usan los colores del tema, así que siguen al modo oscuro solos. */
.une-dib__regla {
	fill: var(--une-color-bg, #f4f0f5);
	stroke: var(--une-color-border, #d3c8d5);
	stroke-width: 1.5;
}

.une-dib__marca {
	stroke: var(--une-color-text-soft, #79657b);
	stroke-width: 1.2;
}

.une-dib__cifra {
	font-family: var(--une-font-body);
	font-size: 9px;
	fill: var(--une-color-text-soft, #79657b);
	text-anchor: middle;
}

.une-dib__anillo {
	fill: none;
	stroke: var(--une-color-brand, #644b68);
	stroke-width: 2.5;
}

.une-dib__anillo--dentro {
	stroke-width: 1.5;
	stroke-dasharray: 3 3;
	opacity: 0.7;
}

.une-dib__flecha {
	stroke: var(--une-color-text, #2f2031);
	stroke-width: 1.6;
}

.une-dib__punta {
	fill: var(--une-color-text, #2f2031);
}

.une-dib__guia {
	stroke: var(--une-color-text-soft, #79657b);
	stroke-width: 1;
	stroke-dasharray: 2 3;
}

.une-dib__texto {
	font-family: var(--une-font-body);
	font-size: 10px;
	font-weight: 600;
	fill: var(--une-color-text, #2f2031);
}

.une-dib__dedo {
	fill: var(--une-color-bg-secondary, #e7dfe8);
	stroke: var(--une-color-text-soft, #79657b);
	stroke-width: 1.5;
}

.une-dib__tira {
	fill: none;
	stroke: var(--une-color-brand, #644b68);
	stroke-width: 2;
}

.une-dib__tira-plana {
	fill: var(--une-color-surface, #fff);
	stroke: var(--une-color-brand, #644b68);
	stroke-width: 2;
}

.une-dib__lapiz {
	stroke: #9c3b2f;
	stroke-width: 2.5;
	stroke-linecap: round;
}

.une-guia__tag {
	margin: 0 0 6px;
	font-family: var(--une-font-ui);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--une-color-accent-soft, #79657b);
}

.une-guia__metodo ol {
	margin: 0 0 12px;
	padding-left: 1.2rem;
}

.une-guia__metodo li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.une-guia__ojo {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--une-color-text-soft, #79657b);
}

/* ---- Las tres cosas antes de medir ---- */

.une-guia__ojos {
	padding-top: 22px;
	border-top: 1px solid var(--une-color-border, #d3c8d5);
}

.une-guia__ojos h2 {
	font-size: 1.15rem;
	margin-bottom: 12px;
}

.une-guia__ojos ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

@media (min-width: 720px) {
	.une-guia__ojos ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
}

.une-guia__ojos li {
	padding: 14px 16px;
	border-radius: var(--une-radius-lg, 14px);
	background: var(--une-color-surface, #fff);
	border: 1px solid var(--une-color-border, #d3c8d5);
	font-size: 0.94rem;
	line-height: 1.6;
}

.une-guia__ojos strong {
	display: block;
	margin-bottom: 4px;
	color: var(--une-color-brand, #644b68);
}

/* ---- La casilla de cada método: es la página, no un accesorio ---- */

.une-talla {
	padding: 20px 22px 20px;
	border-radius: var(--une-radius-lg, 14px);
	background: var(--une-color-surface, #fff);
	border: 1px solid var(--une-color-border, #d3c8d5);
}

.une-talla__titulo {
	font-family: var(--une-font-display);
	font-size: 1.25rem;
	margin: 0 0 10px;
	color: var(--une-color-text, #2f2031);
}

.une-talla__label {
	display: block;
	font-family: var(--une-font-ui);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 8px;
	color: var(--une-color-text, #2f2031);
}

/* El campo y su unidad, en una línea, para que se lea «58 mm». */
.une-talla__fila {
	display: flex;
	align-items: center;
	gap: 10px;
}

.une-talla__unidad {
	font-size: 1.3rem;
	color: var(--une-color-text-soft, #79657b);
}

/* Campo grande: se llena con el pulgar, con la regla en la otra mano y
   probablemente de pie. */
.une-talla__campo {
	width: 7.5rem;
	flex: none;
	text-align: center;
	padding: 13px 14px;
	font-size: 1.5rem;
	font-family: var(--une-font-body);
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--une-color-text, #2f2031);
	background: var(--une-color-bg, #f4f0f5);
	border: 1px solid var(--une-color-border, #d3c8d5);
	border-radius: 10px;
	transition: border-color 0.16s ease;
}

/* Fuera las flechitas del input numérico. Nadie ajusta la medida de un
   dedo de a décimas apretando un triangulito. */
.une-talla__campo::-webkit-outer-spin-button,
.une-talla__campo::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.une-talla__campo[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.une-talla__campo::placeholder {
	color: var(--une-color-accent-soft, #79657b);
	opacity: 0.5;
}

.une-talla__campo:focus {
	border-color: var(--une-color-brand, #644b68);
}

.une-talla__campo:focus-visible {
	outline: 2px solid var(--une-color-brand, #644b68);
	outline-offset: 2px;
}

.une-talla__ayuda {
	margin: 10px 0 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--une-color-text-soft, #79657b);
}

/*
 * El resultado se separa con una línea y reserva el alto de la respuesta más
 * larga, para que la tarjeta no salte cuando aparece.
 */
.une-talla__resultado {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--une-color-border, #d3c8d5);
	min-height: 4.6em;
}

.une-talla__resultado strong {
	display: block;
	font-family: var(--une-font-display);
	font-size: clamp(1.6rem, 3vw, 2.05rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--une-color-brand, #644b68);
	/* Cormorant usa cifras de estilo antiguo por defecto y el número se ve
	   descuadrado. Una talla se lee como dato. */
	font-variant-numeric: lining-nums;
}

.une-talla__resultado.is-aviso strong {
	color: #9c3b2f;
}

/* Lo que la casilla entendió, antes de la talla: «17,2 mm por dentro». */
.une-talla__eco {
	display: block;
	margin-bottom: 6px;
	font-family: var(--une-font-ui);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--une-color-text-soft, #79657b);
}

.une-talla__pista {
	display: block;
	margin-top: 8px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--une-color-text-soft, #79657b);
}

.une-talla__pista--vacio {
	margin-top: 0;
	opacity: 0.75;
}

.une-talla__nota {
	margin: 18px 0 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--une-color-text-soft, #79657b);
}

@media (max-width: 520px) {
	.une-talla {
		padding: 20px;
	}
}

/* ---- Medidor a tamaño real ---- */

.une-regla {
	margin-top: 48px;
	padding: 28px;
	border: 1px solid var(--une-color-border, #d3c8d5);
	border-radius: var(--une-radius-lg, 14px);
	background: var(--une-color-surface, #fff);
}

.une-regla__cabecera {
	max-width: 44rem;
}

.une-regla h2 {
	margin: 0 0 8px;
}

.une-regla__intro {
	color: var(--une-color-text-soft, #79657b);
	font-size: 0.95rem;
}

.une-regla__tag {
	margin: 0 0 6px;
	font-family: var(--une-font-ui);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--une-color-accent-soft, #79657b);
}

.une-regla__paso {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--une-color-border, #d3c8d5);
}

/*
 * El lienzo desborda a lo ancho a propósito.
 *
 * La tarjeta calibrada mide 85,6 mm de verdad, y en un teléfono angosto eso
 * puede no caber. Recortarla arruinaría la calibración —el borde derecho es
 * justo lo que hay que hacer calzar—, así que se deja desplazar dentro de su
 * caja en vez de encogerla.
 */
.une-regla__lienzo {
	margin: 14px 0;
	padding: 14px 0;
	overflow-x: auto;
	display: flex;
	justify-content: flex-start;
}

/* Proporción exacta de una tarjeta ID-1: 85,60 × 53,98 mm. */
.une-regla__tarjeta {
	flex: none;
	aspect-ratio: 85.6 / 53.98;
	border: 2px dashed var(--une-color-brand, #644b68);
	border-radius: 10px;
	background: var(--une-color-bg, #f4f0f5);
}

.une-regla__circulo {
	flex: none;
	border-radius: 50%;
	background: var(--une-color-brand, #644b68);
}

.une-regla__control {
	width: 100%;
	max-width: 36rem;
	display: block;
	margin: 6px 0 16px;
	accent-color: var(--une-color-brand, #644b68);
}

.une-regla__resultado {
	margin: 0 0 14px;
	min-height: 3.4em;
}

.une-regla__resultado strong {
	display: block;
	font-family: var(--une-font-display);
	font-size: 1.8rem;
	font-weight: 500;
	font-variant-numeric: lining-nums;
	color: var(--une-color-brand, #644b68);
}

/* ---- La regla en pantalla ---- */

.une-regla__alterna {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--une-color-border, #d3c8d5);
}

.une-regla__alterna h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
}

.une-regla__cinta {
	position: relative;
	flex: none;
	height: 46px;
	border-bottom: 2px solid var(--une-color-brand, #644b68);
}

.une-regla__marca {
	position: absolute;
	bottom: 0;
	width: 1px;
	height: 7px;
	background: var(--une-color-accent-soft, #79657b);
}

.une-regla__marca.es-media {
	height: 12px;
}

.une-regla__marca.es-decena {
	height: 18px;
	width: 1.5px;
	background: var(--une-color-brand, #644b68);
}

.une-regla__marca.es-decena::after {
	content: attr(data-mm);
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--une-font-body);
	font-size: 0.72rem;
	font-variant-numeric: lining-nums;
	color: var(--une-color-text-soft, #79657b);
}

.une-regla__pie {
	margin: 4px 0 16px;
	font-size: 0.92rem;
	color: var(--une-color-text-soft, #79657b);
}

.une-regla__volver {
	border: 0;
	background: none;
	padding: 0;
	font-family: var(--une-font-body);
	font-size: 0.9rem;
	color: var(--une-color-text-soft, #79657b);
	text-decoration: underline;
	cursor: pointer;
}

/* ---- La tabla, plegada ---- */

.une-guia__tabla-detalle {
	margin-top: 40px;
	border-top: 1px solid var(--une-color-border, #d3c8d5);
	padding-top: 18px;
}

.une-guia__tabla-detalle summary {
	cursor: pointer;
	font-family: var(--une-font-ui);
	font-size: 0.94rem;
	color: var(--une-color-brand, #644b68);
}

.une-guia__tabla-detalle summary:focus-visible {
	outline: 2px solid var(--une-color-brand, #644b68);
	outline-offset: 3px;
}

.une-guia__scroller {
	overflow-x: auto;
}

.une-guia__tabla {
	width: 100%;
	max-width: 36rem;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	margin-top: 12px;
}

.une-guia__tabla th,
.une-guia__tabla td {
	text-align: left;
	padding: 9px 16px 9px 0;
	border-bottom: 1px solid var(--une-color-border, #d3c8d5);
}

.une-guia__tabla thead th {
	font-family: var(--une-font-ui);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--une-color-text-soft, #79657b);
	font-weight: 500;
}

.une-guia__tabla tbody th {
	font-weight: 700;
	color: var(--une-color-brand, #644b68);
}

.une-guia__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.une-guia__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border-radius: 999px;
	background: var(--une-color-brand, #644b68);
	color: #fff;
	text-decoration: none;
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	font-weight: 600;
	border: 0;
	cursor: pointer;
	font-family: var(--une-font-ui);
}

.une-guia__btn--suave {
	background: transparent;
	color: var(--une-color-brand, #644b68);
	border: 1px solid var(--une-color-border, #d3c8d5);
}

/* ==================================================================
   Panel lateral del header (móvil)
   ================================================================== */

/* El botón de menú solo existe en móvil; en escritorio el menú cabe en
   la barra y un hamburguesa ahí es esconder cosas por gusto. */
.une-icon-btn--menu {
	display: none;
}

.une-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.une-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(23, 14, 26, 0.55);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.une-drawer.is-open .une-drawer__scrim {
	opacity: 1;
}

.une-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(84vw, 340px);
	background: var(--une-color-surface, #fff);
	box-shadow: -18px 0 42px rgba(23, 14, 26, 0.22);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 28px;
	transform: translateX(100%);
	transition: transform 0.26s ease;
	overflow-y: auto;
}

.une-drawer.is-open .une-drawer__panel {
	transform: translateX(0);
}

.une-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.une-drawer__marca {
	font-family: var(--une-font-display, serif);
	font-size: 1.35rem;
	letter-spacing: 0.04em;
	color: var(--une-color-brand, #644b68);
}

.une-drawer__close {
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--une-color-text, #2f2031);
	cursor: pointer;
	padding: 8px;
}

.une-drawer__close svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.une-drawer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}





/* Cada enlace principal con su razon debajo y una flecha: se lee como una
   puerta, no como una palabra suelta. */
.une-drawer__nav a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--une-color-border, #d3c8d5);
	color: var(--une-color-text, #2f2031);
	text-decoration: none;
}
.une-drawer__nav-titulo {
	font-family: var(--une-font-display, serif);
	font-size: 1.35rem;
	line-height: 1.1;
}
.une-drawer__nav-sub {
	grid-row: 2;
	font-family: var(--une-font-body, sans-serif);
	font-size: 0.8rem;
	color: var(--une-color-text-soft, #79657b);
}
.une-drawer__nav-flecha {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 20px;
	height: 20px;
	fill: var(--une-color-brand, #644b68);
	opacity: 0.7;
}
/* Las tres acciones en una fila de botones, no en otra lista. */
.une-drawer__acciones {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.une-drawer__accion {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 12px 6px 10px;
	border: 1px solid var(--une-color-border, #d3c8d5);
	border-radius: 14px;
	background: transparent;
	color: var(--une-color-brand, #644b68);
	font-family: var(--une-font-body, sans-serif);
	font-size: 0.78rem;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
}
.une-drawer__accion svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	flex: none;
}
/* Las categorias con su foto, en dos columnas: la vitrina chica del menu. */
.une-drawer__categorias {
	margin-top: 18px;
}
.une-drawer__rotulo {
	display: block;
	margin-bottom: 10px;
	font-family: var(--une-font-body, sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--une-color-text-soft, #79657b);
}
.une-drawer__categorias ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.une-drawer__categorias a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px 6px 6px;
	border: 1px solid var(--une-color-border, #d3c8d5);
	border-radius: 999px;
	color: var(--une-color-text, #2f2031);
	font-family: var(--une-font-body, sans-serif);
	font-size: 0.88rem;
	text-decoration: none;
	min-width: 0;
}
.une-drawer__categorias a > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.une-drawer__categoria-foto {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: #f1ebf3;
}
/* WhatsApp abajo del todo, como boton: es por donde de verdad se conversa. */
.une-drawer__pie {
	margin-top: auto;
	padding-top: 18px;
}
.une-drawer__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 999px;
	background: var(--une-color-brand, #644b68);
	color: #fff7fb;
	font-family: var(--une-font-body, sans-serif);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}
.une-drawer__whatsapp svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.une-drawer__nota {
	margin: 12px 0 0;
	text-align: center;
	font-family: var(--une-font-body, sans-serif);
	font-size: 0.76rem;
	color: var(--une-color-text-soft, #79657b);
}

/* Sin esto el dedo mueve la página del fondo en vez del panel. */
body.une-drawer-abierto {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.une-drawer__scrim,
	.une-drawer__panel {
		transition: none;
	}
}

@media (max-width: 860px) {
	.une-icon-btn--menu {
		display: inline-flex;
	}

	/* Los tres iconos y el menú se mudan adentro del panel. */
	.une-home-header__actions .une-icon-btn:not(.une-icon-btn--menu),
	.une-home-nav--desktop {
		display: none;
	}
}

.une-search-results__header {
	margin-bottom: 26px;
}

.une-search-results__eyebrow {
	margin: 0;
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--une-color-brand);
}

.une-search-results__header h1 {
	margin: 10px 0 0;
	font-size: clamp(2.1rem, 4vw, 3.2rem);
}

.une-search-results__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.une-search-results__card {
	border: 1px solid var(--une-color-border);
	background: #fff;
	overflow: hidden;
}

.une-search-results__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
}

.une-search-results__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.une-search-results__body {
	padding: 16px;
	border-top: 1px solid #f1ebf3;
}

.une-search-results__body h2 {
	margin: 0 0 8px;
	font-size: 1.1rem;
	line-height: 1.14;
}

.une-search-results__body h2 a {
	color: var(--une-color-text);
	text-decoration: none;
}

.une-search-results__price {
	font-weight: 700;
	color: var(--une-color-text);
}

.une-search-results__empty {
	padding: 30px 0;
}

@media (max-width: 1100px) {
	.une-search-results__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.une-search-results__grid {
		grid-template-columns: 1fr;
	}
}


/* ==================================================================
   Pagina del configurador de argollas
   ================================================================== */

/*
 * Arriba se aprieta el aire: el configurador trae su propio encabezado y el
 * titulo de la pagina va oculto a lectores (ver page.php), asi que dejar los
 * 36px de siempre seria un hueco sin nada adentro.
 */
.une-page-configurador .une-theme-main {
	padding-top: 14px;
	padding-bottom: 32px;
}