/* =========================================================
   SELLO · estilos del tema
   ---------------------------------------------------------
   Se carga en todas las páginas que NO usan la plantilla
   «Home SELLO» (tienda, producto, carrito, pago, páginas,
   Journal…) y también en el editor (add_editor_style).

   Usa solo los tokens de theme.json, que salen de las
   variables :root de la home (assets/css/sello.css):
     colores ....... var(--wp--preset--color--*)
     tipografías ... var(--wp--preset--font-family--*)
     tamaños ....... var(--wp--preset--font-size--*)
     espacios ...... var(--wp--preset--spacing--*)
     otros ......... var(--wp--custom--*)

   La cabecera y el pie son PROVISIONALES: se sustituirán por
   los de la home cuando esta sea definitiva.
   ========================================================= */

:root {
	color-scheme: dark;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Texto ---------- */
.sello-eyebrow,
.sello-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--fg-dim);
}

.sello-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sello-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: .55;
}

.sello-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	max-width: 42ch;
	opacity: .78;
}

/* Enlaces dentro de textos: subrayados, como pide la accesibilidad.
   (En theme.json los enlaces heredan el color y no llevan subrayado,
   igual que en la home.) */
.wp-block-post-content a:where(:not(.wp-element-button)),
.wp-block-term-description a,
.wp-block-query-no-results a,
.woocommerce-MyAccount-content a:where(:not(.button)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover,
.wp-block-term-description a:hover,
.wp-block-query-no-results a:hover,
.woocommerce-MyAccount-content a:where(:not(.button)):hover {
	text-decoration-thickness: 2px;
}

/* =========================================================
   CABECERA PROVISIONAL (parts/header.html)
   ========================================================= */

/* Cabecera pegajosa. Se desplaza bajo la barra de administración.
   z-index 100: si el cajón del Mini-Cart se pinta dentro del bloque,
   queda dentro de este contexto de apilamiento y tiene que quedar por
   encima de piezas de la página como la lupa de la galería de
   WooCommerce (z-index 99). */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Por debajo de 600 px la barra de administración no es fija. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.wp-block-group.sello-header {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	min-height: var(--wp--custom--header-height);
	padding-inline: var(--wp--preset--spacing--gutter);
	background: rgba(12, 12, 11, .84);
	border-bottom: 1px solid var(--wp--custom--line--dark);
	color: var(--wp--preset--color--fg);
}

/* El desenfoque va en un pseudoelemento y no en la propia cabecera:
   un backdrop-filter en .sello-header convertiría la cabecera en el
   bloque contenedor de sus hijos con position: fixed, y el cajón del
   Mini-Cart de WooCommerce (que puede pintarse dentro del bloque)
   quedaría encerrado en los 68 px de la cabecera. El aspecto es el mismo:
   el fondo semitransparente de la cabecera se pinta encima del desenfoque. */
.wp-block-group.sello-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
}

/* Posiciones fijas: si el menú está vacío, el logo sigue en el centro. */
.sello-header > .wp-block-sello-menu {
	grid-column: 1;
	justify-self: start;
	min-width: 0;
}

.sello-header > .sello-logo {
	grid-column: 2;
	justify-self: center;
}

.sello-header > .sello-header__tools {
	grid-column: 3;
	justify-self: end;
}

.wp-block-group.sello-header__tools {
	gap: 4px;
	align-items: center;
}

/* Cabecera en dos filas (0.13.1): logo y herramientas arriba, el menú debajo.
   Con el menú a la izquierda, el logo en el centro y las herramientas a la derecha, el menú (con el botón
   «Contacto») necesita unos 540 px: por debajo de unos 1220 px de ancho se montaba encima del logo, y en el
   móvil se convertía en una tira con scroll que cortaba el botón. Ahora, de 1219 px para abajo, el menú ocupa
   su propia fila y, si no cabe en una línea (móvil), pasa a la siguiente: todo a la vista, sin desplazarse. */
@media (max-width: 1219px) {
	.wp-block-group.sello-header {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"logo tools"
			"nav nav";
		row-gap: 2px;
		padding-block: 8px 4px;
	}

	/* min-width: 0: un menú largo no ensancha la columna de la cuadrícula ni la página (481 px de ancho en un móvil de 390). */
	.sello-header > .wp-block-sello-menu {
		grid-area: nav;
		min-width: 0;
	}

	.sello-header > .sello-logo {
		grid-area: logo;
		justify-self: start;
	}

	.sello-header > .sello-header__tools {
		grid-area: tools;
	}
}

/* Logo: SELLO + marca 925, como en la home */
.sello-logo {
	margin: 0;
	line-height: 1;
}

.sello-logo a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.sello-logo__word {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 27px;
	letter-spacing: .26em;
	margin-right: -.26em;
	line-height: 1;
}

.sello-logo__stamp {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 19px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 8.5px;
	letter-spacing: .06em;
	line-height: 1;
	opacity: .8;
}

/* Herramientas: buscar, cuenta y bolsa (botones redondos de 42 px) */
.sello-header .wp-block-search__button,
.sello-header .wc-block-mini-cart__button,
.sello-header .sello-bag-link,
.sello-header .wp-block-woocommerce-customer-account a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	min-width: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	box-shadow: none;
	transition: background-color .3s;
}

.sello-header .wp-block-search__button:hover,
.sello-header .wc-block-mini-cart__button:hover,
.sello-header .sello-bag-link:hover,
.sello-header .wp-block-woocommerce-customer-account a:hover {
	background: rgba(236, 233, 227, .08);
	color: inherit;
}

/* min-width/min-height: el CSS del bloque Buscar fija un mínimo de 24 px al icono. */
.sello-header .wp-block-search__button svg,
.sello-header .wp-block-woocommerce-customer-account svg,
.sello-header .wc-block-mini-cart__icon,
.sello-header .sello-bag-link__icon {
	width: 21px;
	height: 21px;
	min-width: 0;
	min-height: 0;
}

.sello-header .wp-block-search__input {
	height: 42px;
	min-height: 42px;
	padding: 0 14px;
	background: transparent;
	color: inherit;
	border: 1px solid var(--wp--custom--line--dark);
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

.sello-header .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	background: transparent;
}

.sello-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
}

/* =========================================================
   MENÚS (bloque sello/menu)
   ========================================================= */
.wp-block-sello-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-sello-menu a {
	color: inherit;
	text-decoration: none;
}

.sello-menu-notice {
	margin: 0;
	padding: 8px 12px;
	border: 1px dashed var(--wp--custom--line--dark);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: .06em;
	color: var(--wp--preset--color--fg-dim);
}

/* Menú de la cabecera: horizontal, con subrayado animado como .hdr-link */
.sello-header .wp-block-sello-menu .sello-menu__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(16px, 2vw, 32px);
}

/* En la cabecera de dos filas (hasta 1219 px, ver arriba) los enlaces pasan a la línea siguiente si no caben. */
@media (max-width: 1219px) {
	.sello-header .wp-block-sello-menu .sello-menu__list {
		flex-wrap: wrap;
		row-gap: 0;
	}
}

.sello-header .wp-block-sello-menu li {
	position: relative;
}

.sello-header .wp-block-sello-menu .sello-menu__list > li > a {
	position: relative;
	display: inline-block;
	padding: 8px 0;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
}

.sello-header .wp-block-sello-menu .sello-menu__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--wp--custom--ease);
}

.sello-header .wp-block-sello-menu .sello-menu__list > li > a:hover::after,
.sello-header .wp-block-sello-menu .sello-menu__list > li > a:focus-visible::after,
.sello-header .wp-block-sello-menu .sello-menu__list > .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Botón destacado «Contacto» (0.13.0): el elemento del menú con la clase CSS «sello-cta»
   (Apariencia › Menús › «Clases CSS»). Píldora con borde fino, como en la cabecera de la home. */
.sello-header .wp-block-sello-menu .sello-menu__list > li.sello-cta > a {
	padding: 9px 18px;
	border: 1px solid currentColor;
	border-radius: 999px;
	line-height: 1.2;
	transition: background-color .45s var(--wp--custom--ease), color .45s var(--wp--custom--ease), border-color .45s var(--wp--custom--ease);
}

.sello-header .wp-block-sello-menu .sello-menu__list > li.sello-cta > a::after {
	content: none;
}

.sello-header .wp-block-sello-menu .sello-menu__list > li.sello-cta > a:hover,
.sello-header .wp-block-sello-menu .sello-menu__list > li.sello-cta > a:focus-visible {
	background: var(--wp--preset--color--fg);
	border-color: var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
}

/* Submenús: ocultos por defecto; desplegables solo en escritorio */
.sello-header .wp-block-sello-menu .sub-menu {
	display: none;
}

@media (min-width: 782px) {
	.sello-header .wp-block-sello-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: -16px;
		z-index: 5;
		min-width: 220px;
		padding: 12px 16px;
		background: rgba(12, 12, 11, .96);
		border: 1px solid var(--wp--custom--line--dark);
	}

	.sello-header .wp-block-sello-menu li:hover > .sub-menu,
	.sello-header .wp-block-sello-menu li:focus-within > .sub-menu {
		display: block;
	}

	.sello-header .wp-block-sello-menu .sub-menu a {
		display: block;
		padding: 6px 0;
		font-size: 15px;
		opacity: .86;
		transition: opacity .3s;
	}

	.sello-header .wp-block-sello-menu .sub-menu a:hover {
		opacity: 1;
	}
}

/* Menús del pie: en columna */
.sello-footer .wp-block-sello-menu .sello-menu__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sello-footer .wp-block-sello-menu a {
	display: inline-block;
	padding-block: 4px;
	font-size: 15px;
	opacity: .82;
	transition: opacity .3s;
}

.sello-footer .wp-block-sello-menu a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.sello-footer .wp-block-sello-menu .sub-menu {
	display: none;
}

/* =========================================================
   PIE PROVISIONAL (parts/footer.html)
   ========================================================= */
.sello-footer {
	padding-top: clamp(64px, 7vw, 104px);
	border-top: 1px solid var(--wp--custom--line--dark);
	color: var(--wp--preset--color--fg);
}

.wp-block-group.sello-footer__grid {
	gap: 40px 32px;
}

/* Con la cuarta columna («Hablemos»), el pie reparte el ancho como el de la home: la de contacto, algo más ancha
   para que la dirección de la tienda quepa en una línea. Por debajo de 900 px vuelve al reparto automático. */
@media (min-width: 900px) {
	.wp-block-group.sello-footer__grid {
		grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
	}
}

.sello-footer__brand .sello-logo__word {
	font-size: 34px;
}

.sello-footer__lead {
	margin: 0;
	max-width: 36ch;
	font-size: 15px;
	color: var(--wp--preset--color--fg-dim);
}

.sello-footer .sello-label {
	margin: 0 0 8px;
}

.wp-block-group.sello-footer__legal {
	margin-top: clamp(48px, 6vw, 90px);
	padding-block: 22px 28px;
	gap: 12px 28px;
	border-top: 1px solid var(--wp--custom--line--dark);
	font-size: 13px;
	color: var(--wp--preset--color--fg-dim);
}

.sello-footer__legal p {
	margin: 0;
}

.sello-footer__legal .wp-block-sello-menu .sello-menu__list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 20px;
}

.sello-footer__legal .wp-block-sello-menu a {
	font-size: 13px;
	opacity: 1;
	padding-block: 8px;
}

.sello-footer__legal .wp-block-sello-menu a:hover {
	color: var(--wp--preset--color--fg);
}

.sello-footer__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
}

/* Columna «Hablemos» (patrón sello/contacto-pie, 0.13.1): las mismas líneas y la misma letra que la columna
   de contacto del pie de la home (15 px; el correo, Fragment Mono 13 px), sin espacio entre líneas. */
.sello-footer__contact > * {
	margin-block: 0;
}

.sello-footer__contact > p:not(.sello-label, .sello-footer__more) {
	font-size: 15px;
	color: rgba(236, 233, 227, .82);
}

.sello-footer__contact > .sello-footer__mail {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
}

.sello-footer__contact p:not(.sello-footer__more) a {
	display: inline-block;
	padding-block: 2px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: rgba(236, 233, 227, .35);
	transition: text-decoration-color .3s;
}

.sello-footer__contact p:not(.sello-footer__more) a:hover,
.sello-footer__contact p:not(.sello-footer__more) a:focus-visible {
	text-decoration-color: currentColor;
}

/* «Ver nuestras tiendas»: como un enlace más de las columnas del pie. */
.sello-footer__contact > .sello-footer__more a {
	display: inline-block;
	padding-block: 10px;
	font-size: 15px;
	opacity: .82;
	transition: opacity .3s;
}

.sello-footer__contact > .sello-footer__more a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* =========================================================
   CONTENIDO
   ========================================================= */
.sello-main {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.sello-page-head {
	margin-bottom: var(--wp--preset--spacing--50);
}

.sello-page-head > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.sello-page-head .wp-block-term-description {
	max-width: 60ch;
	color: var(--wp--preset--color--fg-dim);
}

/* Título de entradas y páginas (0.13.1). theme.json da a los titulares un interlineado de .92, justo para una sola
   línea: si el título ocupa dos, las líneas se tocan. Aquí sube a 1.04 y se compensa con un margen negativo de
   media diferencia (.06em) arriba y abajo, así que un título de una sola línea ocupa la misma altura y queda en el
   mismo sitio que antes; solo ganan aire los que se parten. */
.sello-page-head > .wp-block-post-title {
	line-height: 1.04;
	margin-block-start: -.06em;
	margin-block-end: -.06em;
}

.sello-page-head > * + .wp-block-post-title {
	margin-block-start: calc(var(--wp--preset--spacing--30) - .06em);
}

.sello-main .wp-block-post-featured-image {
	background: var(--wp--preset--color--steel);
	overflow: hidden;
}

/* Lectura de entradas y páginas (0.13.4): más aire encima de los H2 y H3 del texto. Con el hueco normal entre
   bloques (22 px) un titular quedaba pegado a lo de encima, por ejemplo al botón «Ver paños… en Amazon». Solo los
   hijos directos del contenido en las plantillas con .sello-main (entradas y páginas): la home, el pago, las fichas
   de producto y los titulares dentro de columnas o grupos (Tiendas) no cambian. El primero del texto no lo lleva.
   0.13.5:
   - Interlineado 1.04 (theme.json da .92, justo para una sola línea: en los titulares de dos líneas las letras casi
     se tocaban), igual que el título de la página desde la 0.13.1: con un margen negativo de media diferencia (.06em)
     arriba y abajo, un titular de una sola línea ocupa lo mismo y queda en el mismo sitio; solo ganan aire los que
     se parten. Por eso los márgenes de abajo llevan «- .06em».
   - El aire del H3 escala con el del H2: la mitad (32 px a 1440, como antes), pero nunca menos que el hueco normal
     entre bloques (22 px en el móvil; antes, 32 px fijos, casi lo mismo que el H2 allí).
   - Un H2 justo después de un separador (<hr>) ya tiene la línea encima: lleva la mitad del aire (32 px a 1440;
     antes, 64 px más los 22 px del separador).
   - El editor de entradas y páginas usa las mismas reglas (.is-root-container: el contenido en el lienzo). */
.sello-main .wp-block-post-content > :is(h2, h3),
.is-root-container > :is(h2, h3) {
	line-height: 1.04;
	margin-block-end: -.06em;
}

.sello-main .wp-block-post-content > :is(h2, h3):first-child,
.is-root-container > :is(h2, h3):first-child {
	margin-block-start: -.06em;
}

.sello-main .wp-block-post-content > h2:not(:first-child),
.is-root-container > h2:not(:first-child) {
	margin-block-start: calc(var(--wp--preset--spacing--50) - .06em);
}

.sello-main .wp-block-post-content > h3:not(:first-child),
.is-root-container > h3:not(:first-child) {
	margin-block-start: calc(max(var(--wp--preset--spacing--30), var(--wp--preset--spacing--50) / 2) - .06em);
}

/* Un H3 justo debajo de un H2 es su subtítulo: se queda cerca de él, con el hueco normal. (Con «:not(:first-child)»
   para pesar más que la regla de arriba.) */
.sello-main .wp-block-post-content > h2 + h3:not(:first-child),
.is-root-container > h2 + h3:not(:first-child) {
	margin-block-start: calc(var(--wp--preset--spacing--30) - .06em);
}

/* 0.13.5: H2 detrás de un separador (página Colecciones): la mitad del aire, porque la línea ya separa. */
.sello-main .wp-block-post-content > .wp-block-separator + h2:not(:first-child),
.is-root-container > .wp-block-separator + h2:not(:first-child) {
	margin-block-start: calc(var(--wp--preset--spacing--50) / 2 - .06em);
}

/* Tarjetas del Journal y de los archivos (como .post de la home) */
.sello-cards .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.sello-cards .wp-block-post > * {
	margin: 0;
}

.sello-cards .wp-block-post-featured-image img {
	filter: brightness(.9);
	transition: transform 1.4s var(--wp--custom--ease), filter .8s;
}

.sello-cards .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
	filter: brightness(1);
}

.sello-cards .wp-block-post-title a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .6s var(--wp--custom--ease);
}

.sello-cards .wp-block-post:hover .wp-block-post-title a,
.sello-cards .wp-block-post-title a:focus-visible {
	background-size: 100% 1px;
}

/* Paginación */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	gap: 12px;
}

.wp-block-query-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--wp--custom--line--dark);
	border-radius: 999px;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--fg);
	border-color: var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
}

.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
}

/* Navegación entre entradas */
.sello-post-nav {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--line--dark);
	font-size: 15px;
}

/* Etiqueta de las tarjetas del Journal: «Categoría · fecha», como en las tarjetas de la home */
.sello-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
}

.sello-card-meta > * {
	margin: 0;
}

.sello-card-meta .wp-block-post-date::before {
	content: "·";
	margin-right: 10px;
}

.sello-card-meta > .wp-block-post-date:first-child::before {
	content: none;
	margin: 0;
}

/* «← Volver al Journal», al final de cada entrada (patrón sello/volver-al-journal) */
.sello-back {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.sello-back a {
	display: inline-block;
	padding-block: 10px;
	color: var(--wp--preset--color--fg-dim);
	transition: color .3s;
}

.sello-back a:hover,
.sello-back a:focus-visible {
	color: var(--wp--preset--color--fg);
}

/* «Sigue leyendo»: otras tres entradas debajo de cada entrada. Sin otras entradas, no sale nada. */
.sello-related {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--line--dark);
}

.sello-related:not(:has(.wp-block-post)) {
	display: none;
}

.sello-related .sello-related__title {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Formularios (sin especificidad: los bloques de WooCommerce mandan) */
:where(input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], select, textarea) {
	min-height: 48px;
	padding: 12px 16px;
	background-color: transparent;
	color: inherit;
	border: 1px solid var(--wp--custom--line--dark);
	border-radius: 0;
	font: inherit;
}

:where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--fg);
}

::placeholder {
	color: var(--wp--preset--color--fg-dim);
	opacity: 1;
}

.wp-block-search__input {
	min-height: 54px;
	padding: 0 18px;
	background: transparent;
	color: inherit;
	border: 1px solid var(--wp--custom--line--dark);
	border-radius: 0;
}

/* Tablas (pedidos de Mi cuenta, contenido) */
:where(.wp-site-blocks table) {
	width: 100%;
	border-collapse: collapse;
}

:where(.wp-site-blocks th, .wp-site-blocks td) {
	padding: 12px 10px;
	border-bottom: 1px solid var(--wp--custom--line--dark);
	text-align: left;
}

/* =========================================================
   WOOCOMMERCE (base; se afinará con la home definitiva)
   ========================================================= */

/* Nombres de producto en rejillas: como las tarjetas de la home */
.wp-site-blocks :where(.wc-block-product-template, .wp-block-woocommerce-product-template, .wc-block-grid__products) .wp-block-post-title,
.wp-site-blocks .wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

/* Nombre del producto en su ficha (como .qv-name de la home) */
.single-product h1.wp-block-post-title {
	font-size: clamp(32px, 3.2vw, 46px);
}

.wc-block-components-product-price,
.wp-block-woocommerce-product-price,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* Bolsa (Mini-Cart): clara, como el cajón de la home */
.wc-block-mini-cart__drawer .wc-block-components-drawer,
.wc-block-components-drawer {
	color-scheme: light;
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink-fg);
}

.wc-block-components-drawer .wp-element-button {
	background: var(--wp--preset--color--ink-fg);
	color: var(--wp--preset--color--bone);
}

.wc-block-components-drawer .wp-element-button:hover {
	background: var(--wp--preset--gradient--silver);
	color: var(--wp--preset--color--ink-fg);
}

.wc-block-components-drawer .wc-block-mini-cart__footer-cart.wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--ink-fg);
	box-shadow: inset 0 0 0 1px currentColor;
}

/* =========================================================
   TIENDAS (patrón «Tiendas SELLO», patterns/tiendas-sello.php)
   ---------------------------------------------------------
   El patrón son bloques normales de WordPress (Grupo, Columnas,
   Imagen, Encabezado, Párrafo, Lista y Botones). Aquí solo va lo
   que el editor no hace solo: la rejilla de las tres tiendas, el
   recorte de las fotos, las filas «Horario / Teléfono / En
   tienda» y el botón con borde.

     .sello-tiendas-pagina ... el grupo que lo envuelve todo
     .sello-tiendas-intro .... la entrada («Ven a vernos»)
     .sello-tiendas .......... las columnas con las tiendas
     .sello-tienda ........... cada tienda: __foto, __info, __dir,
                               __datos, __fila, __lista, __ir
     .sello-tiendas-online ... la franja clara del final
   ========================================================= */

/* Entrada: una línea fina la separa de las tiendas. */
.sello-tiendas-pagina > .sello-tiendas-intro {
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--custom--line--dark);
}

.sello-tiendas-intro .sello-lead {
	max-width: 46ch;
}

/* Rejilla: tres tiendas por fila en escritorio; por debajo de
   1000 px, una por fila. Con «grid», una cuarta tienda (duplicando
   una columna) baja a la fila siguiente en vez de apretar a las demás. */
.wp-block-columns.sello-tiendas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
	.wp-block-columns.sello-tiendas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Si se quita una tienda y quedan dos, se reparten el ancho
	   (sin hueco a la derecha). */
	.wp-block-columns.sello-tiendas:has(> .sello-tienda:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* …y con fotos cuadradas, para que al ser más anchas no se coman la pantalla. */
	.wp-block-columns.sello-tiendas:has(> .sello-tienda:nth-child(2):last-child) .sello-tienda__foto img {
		aspect-ratio: 1 / 1;
	}
}

/* Cada tienda: foto arriba y datos debajo; el botón queda al pie
   para que los tres se alineen aunque un horario ocupe más líneas. */
.sello-tiendas > .sello-tienda {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sello-tienda > .sello-tienda__foto {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--steel);
}

/* Todas las fotos con el mismo recorte, se suba la que se suba. */
.sello-tienda .sello-tienda__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.sello-tienda > .sello-tienda__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin-top: var(--wp--preset--spacing--30);
}

.sello-tienda .sello-tienda__info > * {
	margin-block: 0;
}

.sello-tienda .sello-tienda__info > .wp-block-heading {
	margin-top: 10px;
	font-size: clamp(38px, 3.6vw, 52px);
}

.sello-tienda .sello-tienda__info > .sello-tienda__dir {
	margin-top: 14px;
	line-height: 1.45;
}

/* Filas «Horario / Teléfono / En tienda»: etiqueta a la izquierda,
   dato a la derecha y una línea fina entre fila y fila. */
.sello-tienda .sello-tienda__info > .sello-tienda__datos {
	margin-top: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--custom--line--dark);
}

.sello-tienda .sello-tienda__datos > .sello-tienda__fila {
	gap: 16px;
	margin: 0;
	padding-block: 14px;
	border-top: 1px solid var(--wp--custom--line--dark);
	font-size: 15px;
	line-height: 1.5;
}

.sello-tienda .sello-tienda__fila > * {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.sello-tienda .sello-tienda__fila > .sello-label {
	flex: 0 0 88px;
	padding-top: 4px;
}

/* El teléfono (y cualquier enlace de las filas), con alto de sobra para el dedo. */
.sello-tienda .sello-tienda__fila a {
	display: inline-block;
	margin-block: -4px;
	padding-block: 4px;
}

.sello-tienda .sello-tienda__lista {
	padding: 0;
	list-style: none;
}

.sello-tienda .sello-tienda__lista li + li {
	margin-top: 4px;
}

/* Botón «Cómo llegar»: al pie de la tienda y a todo el ancho. */
.sello-tienda .sello-tienda__info > .sello-tienda__ir {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.sello-tienda__ir > .wp-block-button {
	width: 100%;
}

.sello-tienda__ir .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
}

/* Flecha «se abre fuera»: dibujada, para no depender de ninguna fuente. */
.sello-tienda__ir .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M2 .5h8.5V9M10.5.5.5 10.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M2 .5h8.5V9M10.5.5.5 10.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .4s var(--wp--custom--ease);
}

.sello-tienda__ir .wp-block-button__link:hover::after {
	transform: translate(2px, -2px);
}

/* Botón con borde (estilo «Contorno» del bloque Botón), como el
   .btn-line de la home: línea fina y, al pasar el ratón, relleno.
   Vale dentro del patrón entero o de cualquiera de sus partes sueltas. */
:is(.sello-tiendas-pagina, .sello-tiendas, .sello-tiendas-online) .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 19px 28px;
	border: 0;
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
	color: inherit;
	transition: background-color .45s var(--wp--custom--ease), color .45s var(--wp--custom--ease), box-shadow .45s var(--wp--custom--ease);
}

:is(.sello-tiendas-pagina, .sello-tiendas, .sello-tiendas-online) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--fg);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
}

/* Franja clara del final (fondo «Hueso»): los botones se invierten,
   como en las bandas claras de la home. */
.sello-tiendas-online p:not(.sello-eyebrow) {
	max-width: 52ch;
}

.sello-tiendas-online .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--ink-fg);
	color: var(--wp--preset--color--bone);
}

.sello-tiendas-online .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--gradient--silver);
	color: var(--wp--preset--color--ink-fg);
}

.sello-tiendas-online .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink-fg);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink-fg);
	color: var(--wp--preset--color--bone);
}

.sello-tiendas-online .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--ink-fg);
}

.sello-tiendas-online ::selection {
	background: var(--wp--preset--color--ink-fg);
	color: var(--wp--preset--color--bone);
}

/* De 1000 a 1199 px las tres columnas son estrechas: la etiqueta
   («Horario», «En tienda»…) va encima de su dato para que los
   horarios no se partan. */
@media (min-width: 1000px) and (max-width: 1199px) {
	.sello-tienda .sello-tienda__datos > .sello-tienda__fila {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.sello-tienda .sello-tienda__fila > .sello-label {
		flex-basis: 100%;
		padding-top: 0;
	}
}

/* Tableta (600–999 px): foto a la izquierda y datos a la derecha. */
@media (min-width: 600px) and (max-width: 999px) {
	.sello-tiendas > .sello-tienda {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--40);
	}

	.sello-tienda > .sello-tienda__info {
		margin-top: 0;
	}

	/* La foto ocupa todo el alto de la tienda. «min-height» y no solo
	   «height»: el editor pone «height: auto» en la propia imagen. */
	.sello-tienda .sello-tienda__foto > a {
		display: block;
		height: 100%;
	}

	.sello-tienda .sello-tienda__foto img {
		height: 100%;
		min-height: 100%;
		aspect-ratio: auto;
	}
}

/* Móvil: foto cuadrada, para que los datos de la tienda no queden lejos,
   y los botones de la franja final a todo el ancho, uno debajo del otro. */
@media (max-width: 599px) {
	.sello-tienda .sello-tienda__foto img {
		aspect-ratio: 1 / 1;
	}

	.sello-tiendas-online .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.sello-tiendas-online .wp-block-button,
	.sello-tiendas-online .wp-block-button__link {
		box-sizing: border-box;
		width: 100%;
	}
}

/* =========================================================
   CAMPOS SUELTOS (0.13.2)
   ---------------------------------------------------------
   El buscador (bloque Buscar: 404, resultados y cabecera), el «Ordenar
   por» de la tienda y el texto del grabado de la ficha llevaban el
   borde de las líneas finas (--wp--custom--line--dark, 1,4:1 sobre el
   fondo): casi no se veía dónde escribir. Llevan el mismo borde que
   los campos de WooCommerce (woocommerce.css, --sello-wc-line): 3,6:1
   (mínimo AA para componentes: 3:1). Solo estos campos: theme.json y
   las líneas finas de la página no cambian. Con el foco, Hueso.
   ========================================================= */
.wp-site-blocks .wp-block-search__input,
.wp-site-blocks .woocommerce-ordering select,
.wp-site-blocks select.orderby,
.wp-site-blocks .sello-grabado__input {
	border-color: rgba(236, 233, 227, .42);
}

.wp-site-blocks .wp-block-search__input:focus,
.wp-site-blocks .woocommerce-ordering select:focus,
.wp-site-blocks select.orderby:focus,
.wp-site-blocks .sello-grabado__input:focus {
	border-color: var(--wp--preset--color--fg);
}

/* =========================================================
   TARJETAS DE PRODUCTO (0.13.6)
   ---------------------------------------------------------
   Rejillas de WooCommerce (Tienda, categorías, etiquetas,
   colecciones, búsqueda y el bloque «Colección de productos»)
   con el aspecto de las tarjetas de «Los más vendidos» de la
   home (.card de sello.css): foto 4:5, 2.ª foto al pasar el
   ratón, etiqueta, nombre y precio en una línea y un botón
   discreto. La clase sello-tarjetas y la foto las pone
   inc/tienda-tarjetas.php. No en las fichas, el carrito ni el
   pago.
   ========================================================= */
.wp-site-blocks .sello-tarjetas {
	row-gap: clamp(32px, 3.4vw, 52px);
}

.wp-site-blocks .sello-tarjetas > li {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 12px;
	align-content: start;
	text-align: left;
}

.wp-site-blocks .sello-tarjetas > li > * {
	grid-column: 1 / -1;
	margin: 0;
	text-align: left;
}

/* Foto: la principal y, encima, la 2.ª de la galería (la pieza puesta) */
.wp-site-blocks .sello-tarjetas .sello-card-media {
	margin: 0 0 14px;
}

.wp-site-blocks .sello-tarjetas .sello-card-media > a {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--prod);
}

.wp-site-blocks .sello-tarjetas .sello-card-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: opacity .7s var(--wp--custom--ease), transform 1.2s var(--wp--custom--ease);
}

.wp-site-blocks .sello-tarjetas .sello-card-m2 {
	opacity: 0;
	transform: scale(1.06);
}

/* Solo con ratón: en el móvil se queda la foto de estudio. Con el teclado, al llegar al nombre. */
@media (hover: hover) and (pointer: fine) {
	.wp-site-blocks .sello-tarjetas > li:hover .sello-card-m1 {
		transform: scale(1.04);
	}

	.wp-site-blocks .sello-tarjetas > li:hover .sello-card-m2 {
		opacity: 1;
		transform: scale(1);
	}
}

.wp-site-blocks .sello-tarjetas > li:focus-within .sello-card-m2 {
	opacity: 1;
	transform: scale(1);
}

/* Etiqueta arriba a la izquierda (como .badge de la home) */
.wp-site-blocks .sello-card-badge {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 1;
	padding: 6px 9px;
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink-fg);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
}

/* Nombre a la izquierda y precio a la derecha, en la misma línea */
.wp-site-blocks .sello-tarjetas > li > .wp-block-post-title {
	grid-column: 1;
	font-family: var(--wp--preset--font-family--text);
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.wp-site-blocks .sello-tarjetas > li > .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-site-blocks .sello-tarjetas > li > .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-site-blocks .sello-tarjetas > li > .wp-block-woocommerce-product-price {
	grid-column: 2;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: right;
	white-space: nowrap;
}

.wp-site-blocks .sello-tarjetas > li > .wp-block-woocommerce-product-price .wc-block-components-product-price {
	font-size: inherit;
	text-align: inherit;
}

/* Botón discreto: línea fina y letra de datos; al pasar el ratón, relleno */
.wp-site-blocks .sello-tarjetas > li > .wc-block-components-product-button,
.wp-site-blocks .sello-tarjetas > li > .wp-block-button {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px 14px;
	margin-top: 14px;
}

.wp-site-blocks .sello-tarjetas .wc-block-components-product-button .wp-block-button__link,
.wp-site-blocks .sello-tarjetas .wc-block-components-product-button .wc-block-components-product-button__button {
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(236, 233, 227, .34);
	color: var(--wp--preset--color--fg);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color .35s var(--wp--custom--ease), color .35s var(--wp--custom--ease), box-shadow .35s var(--wp--custom--ease);
}

.wp-site-blocks .sello-tarjetas .wc-block-components-product-button .wp-block-button__link:hover,
.wp-site-blocks .sello-tarjetas .wc-block-components-product-button .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--fg);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
}

.wp-site-blocks .sello-tarjetas .wc-block-components-product-button .added_to_cart {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fg);
}

/* Móvil: el precio pasa debajo del nombre (como en la home) */
@media (max-width: 599px) {
	.wp-site-blocks .sello-tarjetas > li {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-site-blocks .sello-tarjetas > li > .wp-block-post-title {
		font-size: 14px;
	}

	.wp-site-blocks .sello-tarjetas > li > .wp-block-woocommerce-product-price {
		grid-column: 1;
		margin-top: 4px;
		font-size: 14px;
		text-align: left;
		white-space: normal;
	}
}

/* =========================================================
   ENTRADAS SUAVES (0.13.6)
   ---------------------------------------------------------
   Las tarjetas y los bloques .sello-reveal entran con un
   fundido y una leve subida, escalonados (assets/wp/reveal.js
   pone «is-in» y el retardo). Solo con la clase «sello-anim»
   en <html>, que no se pone con «reducir movimiento».
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
	.sello-anim .sello-tarjetas > li,
	.sello-anim .sello-reveal {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
		transition: opacity .8s var(--wp--custom--ease), transform 1s var(--wp--custom--ease);
		transition-delay: var(--sello-retardo, 0ms);
	}

	.sello-anim .sello-tarjetas > li.is-in,
	.sello-anim .sello-reveal.is-in {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   CABECERA DE CADA COLECCIÓN (0.13.6)
   ---------------------------------------------------------
   Archivo del atributo «Colección»: franja con la foto, el
   nombre grande, la descripción y el número de piezas, como
   los paneles de Colecciones de la home (.col-panel). La pone
   sello_coleccion_cabecera() en el sitio del título.
   ========================================================= */
.wp-site-blocks .sello-col-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(380px, 62svh, 640px);
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	overflow: hidden;
	background: var(--wp--preset--color--steel);
}

.sello-col-hero__foto {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.sello-col-hero__foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 22%;
	filter: brightness(.82);
}

.sello-col-hero.has-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0) 58%),
		linear-gradient(to right, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 62%);
}

.sello-col-hero__txt {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 820px;
	padding: clamp(24px, 3.4vw, 52px);
}

.sello-col-hero__txt > p {
	margin: 0;
}

.sello-col-hero__label,
.sello-col-hero__piezas {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: rgba(236, 233, 227, .8);
}

.sello-col-hero__txt > .sello-col-hero__piezas {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.sello-col-hero__piezas::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: .6;
}

.wp-site-blocks .sello-col-hero__nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(64px, 8.4vw, 136px);
	font-weight: 600;
	line-height: .86;
	text-transform: uppercase;
	color: var(--wp--preset--color--fg);
}

.sello-col-hero__desc {
	max-width: 40ch;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	color: rgba(236, 233, 227, .88);
}

@media (prefers-reduced-motion: no-preference) {
	.sello-col-hero__foto img {
		animation: sello-col-hero-in 1.6s var(--wp--custom--ease) both;
	}

	.sello-col-hero__txt {
		animation: sello-col-hero-txt 1.1s .15s var(--wp--custom--ease) both;
	}
}

@keyframes sello-col-hero-in {
	from { transform: scale(1.06); }
	to { transform: none; }
}

@keyframes sello-col-hero-txt {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to { opacity: 1; transform: none; }
}

/* =========================================================
   PÁGINA COLECCIONES (0.13.6)
   ---------------------------------------------------------
   Patrón «Colecciones SELLO» (patterns/colecciones-sello.php):
   cada colección con su foto grande (alternando izquierda y
   derecha), su texto y una tira de 4 piezas.
   ========================================================= */
.sello-cols-intro .sello-lead {
	max-width: 46ch;
	margin-top: var(--wp--preset--spacing--20);
}

.sello-cols-final > h2 {
	max-width: 22ch;
}

.sello-cols-final > p {
	max-width: 62ch;
}

.sello-main .sello-col-bloque,
.is-root-container .sello-col-bloque {
	margin-block-start: clamp(72px, 9vw, 140px);
}

.sello-col-fila {
	column-gap: clamp(28px, 6vw, 96px);
}

/* Foto a la derecha en las colecciones pares (en el móvil, siempre arriba) */
@media (min-width: 782px) {
	section.sello-col-bloque:nth-of-type(even) .sello-col-fila {
		flex-direction: row-reverse;
	}
}

.sello-col-foto {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--steel);
}

.sello-col-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 1.4s var(--wp--custom--ease);
}

.sello-col-bloque:hover .sello-col-foto img {
	transform: scale(1.03);
}

.sello-col-fila__txt > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-site-blocks .sello-col-nombre,
.is-root-container .sello-col-nombre {
	margin-block: var(--wp--preset--spacing--20) 0;
	font-size: clamp(64px, 7.2vw, 120px);
	line-height: .86;
}

.sello-col-fila__txt .sello-col-piezas {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sello-col-fila__txt .sello-col-piezas::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: .55;
}

.sello-col-ir .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 19px 28px;
	border: 0;
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
	color: inherit;
	transition: background-color .45s var(--wp--custom--ease), color .45s var(--wp--custom--ease), box-shadow .45s var(--wp--custom--ease);
}

.sello-col-ir .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--fg);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
}

.sello-col-bloque > .sello-col-tira {
	margin-block-start: clamp(40px, 5vw, 72px);
}

.sello-main .sello-cols-final,
.is-root-container .sello-cols-final {
	margin-block-start: clamp(80px, 10vw, 160px);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--line--dark);
}

/* =========================================================
   HISTORIA (0.13.8; 0.13.9: portada, tres tiempos por
   capítulo, cierre y suavizado; bloque «SELLO · Historia»)
   ---------------------------------------------------------
   blocks/historia/render.php + assets/wp/historia.js.
   Marcado de base (sin JavaScript, con «reducir movimiento»
   o si historia.js no llega): la portada, cada capítulo como
   una foto fija con todo su texto (título y frase, párrafo,
   dato y nota), uno debajo de otro, y el cierre con botones.
   Con la clase «sello-historia-js» en <html> (la pone un
   script corto antes de pintar) pasa a la versión con vídeo:
   la escena (lienzo, velo e indicador) y las capas de texto
   (.sello-historia__capitulos) quedan fijas a pantalla
   completa mientras se baja por la pista. historia.js pone
   la opacidad y el desplazamiento de cada capa.
     --sello-historia-recorrido ... pantallas de scroll de
                                    todo el bloque
   ========================================================= */
.sello-historia {
	position: relative;
	color: var(--wp--preset--color--fg);
}

/* Sin márgenes de serie (los de cada texto van en su clase, más abajo). */
.sello-historia :where(p, h2, h3) {
	margin: 0;
}

.sello-historia__escena,
.sello-historia__pista,
.sello-historia__pista-txt {
	display: none;
}

.sello-historia__capitulos {
	display: grid;
	gap: clamp(56px, 8vw, 128px);
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--wide-size, 1320px) + 2 * var(--wp--preset--spacing--gutter));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

/* Portada */
.wp-site-blocks .sello-historia__titulo,
.is-root-container .sello-historia__titulo {
	max-width: 11ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(60px, 8.6vw, 148px);
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: .88;
	text-transform: uppercase;
	text-wrap: balance;
}

.sello-historia__entradilla {
	max-width: 32ch;
	margin-top: 22px;
	font-size: clamp(19px, 1.7vw, 26px);
	line-height: 1.35;
	color: var(--wp--preset--color--fg);
}

/* Capítulos */
.sello-historia__cap {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30) clamp(28px, 4vw, 64px);
	align-items: end;
}

.sello-historia__foto {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--steel);
}

.sello-historia__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.sello-historia__tiempo + .sello-historia__tiempo {
	margin-top: 22px;
}

.sello-historia__num {
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: .14em;
	line-height: 1.4;
	color: var(--wp--preset--color--fg-dim);
}

.wp-site-blocks .sello-historia__cap-titulo,
.is-root-container .sello-historia__cap-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(52px, 6.6vw, 112px);
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: .9;
	text-transform: uppercase;
}

.sello-historia__frase {
	max-width: 30ch;
	margin-top: 18px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
}

.sello-historia__parrafo {
	max-width: 36ch;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	color: #c9c5bd;
}

.sello-historia__dato {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(30px, 3.2vw, 46px);
	font-weight: 600;
	letter-spacing: .005em;
	line-height: .95;
	text-transform: uppercase;
}

.sello-historia__nota {
	max-width: 36ch;
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--fg-dim);
}

/* Cierre */
.sello-historia__cierre {
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--line--dark, rgba(236, 233, 227, .14));
}

.wp-site-blocks .sello-historia__cierre-titulo,
.is-root-container .sello-historia__cierre-titulo {
	max-width: 12ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(48px, 6.4vw, 112px);
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: .9;
	text-transform: uppercase;
	text-wrap: balance;
}

.sello-historia__cierre-frase {
	max-width: 34ch;
	margin-top: 20px;
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.45;
}

.sello-historia__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.sello-historia .sello-historia__boton {
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--fg);
	text-decoration: none;
	text-shadow: none;
	transition: background-color .3s var(--wp--custom--ease), color .3s var(--wp--custom--ease), border-color .3s var(--wp--custom--ease);
}

.sello-historia .sello-historia__boton:hover {
	background: var(--wp--preset--color--bone);
	border-color: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
}

.sello-historia .sello-historia__boton--linea {
	background: rgba(12, 12, 11, .25);
	color: var(--wp--preset--color--fg);
}

.sello-historia .sello-historia__boton--linea:hover {
	background: var(--wp--preset--color--fg);
	border-color: var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
}

.sello-historia .sello-historia__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--fg);
	outline-offset: 3px;
}

@media (max-width: 781px) {
	.sello-historia__cap {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Versión con vídeo */
.sello-historia-js .sello-historia__escena {
	display: block;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.sello-historia-js .sello-historia__lienzo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Velo: oscurece abajo (donde va el texto) y un poco arriba (bajo la cabecera). */
.sello-historia-js .sello-historia__velo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(12, 12, 11, .82) 0%, rgba(12, 12, 11, .42) 34%, rgba(12, 12, 11, 0) 60%),
		linear-gradient(to bottom, rgba(12, 12, 11, .5) 0%, rgba(12, 12, 11, 0) 24%);
}

/* Capas de texto: fijas encima de la escena, del mismo tamaño. */
.sello-historia-js .sello-historia__capitulos {
	display: block;
	position: sticky;
	top: 0;
	z-index: 1;
	height: 100vh;
	max-width: none;
	margin: -100vh 0 0;
	padding: 0;
	overflow: hidden;
	text-shadow: 0 1px 18px rgba(12, 12, 11, .55), 0 0 2px rgba(12, 12, 11, .35);
}

.sello-historia-js .sello-historia__pista {
	display: block;
	height: calc(var(--sello-historia-recorrido, 18) * 100vh);
}

.sello-historia-js .sello-historia__portada,
.sello-historia-js .sello-historia__cap,
.sello-historia-js .sello-historia__texto,
.sello-historia-js .sello-historia__cierre {
	position: absolute;
	inset: 0;
	display: block;
}

.sello-historia-js .sello-historia__foto {
	display: none;
}

.sello-historia-js .sello-historia__portada,
.sello-historia-js .sello-historia__tiempo,
.sello-historia-js .sello-historia__cierre {
	box-sizing: border-box;
	will-change: opacity, transform;
}

/* Portada y cierre: a pantalla completa, con el margen izquierdo del ancho de la web. */
.sello-historia-js .sello-historia__portada,
.sello-historia-js .sello-historia__cierre {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 68px max(var(--wp--preset--spacing--gutter), calc((100% - var(--wp--style--global--wide-size, 1320px)) / 2)) 0;
}

.sello-historia-js .sello-historia__portada {
	background: linear-gradient(90deg, rgba(12, 12, 11, .72) 0%, rgba(12, 12, 11, .42) 55%, rgba(12, 12, 11, .2) 100%);
}

.sello-historia-js .sello-historia__cierre {
	margin: 0;
	border: 0;
	background: linear-gradient(90deg, rgba(12, 12, 11, .8) 0%, rgba(12, 12, 11, .5) 60%, rgba(12, 12, 11, .3) 100%);
	opacity: 0;
	visibility: hidden;
}

/* Cada tiempo de un capítulo, abajo a la izquierda; entran y salen de uno en uno. */
.sello-historia-js .sello-historia__tiempo {
	position: absolute;
	right: max(var(--wp--preset--spacing--gutter), calc((100% - var(--wp--style--global--wide-size, 1320px)) / 2));
	bottom: clamp(56px, 12vh, 132px);
	left: max(var(--wp--preset--spacing--gutter), calc((100% - var(--wp--style--global--wide-size, 1320px)) / 2));
	margin: 0;
	opacity: 0;
	visibility: hidden;
}

.sello-historia-js .sello-historia__frase {
	max-width: 26ch;
	font-size: clamp(18px, 1.6vw, 24px);
	text-wrap: balance;
}

.sello-historia-js .sello-historia__parrafo {
	max-width: 28ch;
	font-size: clamp(22px, 2.15vw, 34px);
	letter-spacing: -.005em;
	line-height: 1.3;
	color: var(--wp--preset--color--fg);
	text-wrap: pretty;
}

.sello-historia-js .sello-historia__dato {
	max-width: 12ch;
	font-size: clamp(52px, 6.6vw, 112px);
	line-height: .9;
	text-wrap: balance;
}

.sello-historia-js .sello-historia__nota {
	max-width: 32ch;
	margin-top: 18px;
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.45;
	color: var(--wp--preset--color--fg);
}

/* «Baja»: abajo, en el centro, con una raya que baja despacio. */
.sello-historia-js .sello-historia__pista-txt {
	position: absolute;
	bottom: clamp(24px, 5vh, 48px);
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: .2em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--fg-dim);
}

.sello-historia-js .sello-historia__pista-txt::after {
	content: "";
	width: 1px;
	height: 44px;
	background: linear-gradient(to bottom, currentColor, rgba(158, 154, 145, 0));
	transform-origin: top;
}

@media (prefers-reduced-motion: no-preference) {
	.sello-historia-js .sello-historia__pista-txt::after {
		animation: sello-historia-baja 2.4s var(--wp--custom--ease, ease) infinite;
	}
}

@keyframes sello-historia-baja {
	0% { transform: scaleY(0); opacity: 1; }
	60% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* Indicador de capítulos, a la derecha: solo rayas; la del capítulo en el que estás, más larga. */
.sello-historia__indice {
	position: absolute;
	top: 50%;
	right: var(--wp--preset--spacing--gutter);
	z-index: 1;
	display: grid;
	justify-items: end;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateY(-50%);
	color: var(--wp--preset--color--fg);
	opacity: 0;
	transition: opacity .6s var(--wp--custom--ease);
}

.sello-historia__indice.is-visible {
	opacity: 1;
}

.sello-historia__indice li {
	display: block;
	width: 16px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 0 6px rgba(12, 12, 11, .6);
	opacity: .4;
	transition: width .5s var(--wp--custom--ease), opacity .5s var(--wp--custom--ease);
}

.sello-historia__indice li.is-activo {
	width: 44px;
	opacity: 1;
}

@media (max-width: 781px) {
	.sello-historia__indice {
		top: auto;
		right: var(--wp--preset--spacing--gutter);
		bottom: clamp(40px, 9vh, 112px);
		gap: 12px;
		transform: none;
	}

	.sello-historia__indice li.is-activo {
		width: 28px;
	}

	.sello-historia-js .sello-historia__tiempo {
		right: 64px;
		bottom: clamp(48px, 10vh, 112px);
	}

	.sello-historia-js .sello-historia__velo {
		background:
			linear-gradient(to top, rgba(12, 12, 11, .88) 0%, rgba(12, 12, 11, .55) 38%, rgba(12, 12, 11, 0) 66%),
			linear-gradient(to bottom, rgba(12, 12, 11, .5) 0%, rgba(12, 12, 11, 0) 24%);
	}

	.sello-historia-js .sello-historia__portada,
	.sello-historia-js .sello-historia__cierre {
		background: rgba(12, 12, 11, .55);
	}
}

/* =========================================================
   PÁGINAS NOSOTROS, REGALOS Y PERSONALIZA (0.13.8)
   ---------------------------------------------------------
   Patrones «Nosotros SELLO», «Regalos SELLO» y «Personaliza
   SELLO» (inc/paginas.php). Bloques normales de WordPress:
     .sello-pg-bloque ........ cada sección (aire encima)
     .sello-pg-entrada ....... el primer párrafo, grande
     .sello-pg-fila .......... foto y texto en columnas
                               (-inversa: foto a la derecha)
     .sello-pg-foto .......... recorte de las fotos (4:5;
                               -ancha 2:1, -cuadrada 1:1)
     .sello-pg-rejilla-N ..... tarjetas en N columnas
     .sello-pg-tarjeta ....... número o icono, título y texto
     .sello-icono-* .......... icono de la tarjeta
     .sello-pg-cifras ........ cifras grandes con su texto
     .sello-pg-banda ......... franja de lado a lado
     .sello-letra-* .......... muestra de una letra del grabado
   ========================================================= */
.sello-main .sello-pg-bloque,
.is-root-container .sello-pg-bloque {
	margin-block-start: clamp(72px, 9vw, 140px);
}

.sello-main .sello-historia + .sello-pg-intro,
.is-root-container .wp-block-sello-historia + .sello-pg-intro {
	margin-block-start: clamp(64px, 8vw, 128px);
}

.wp-site-blocks .sello-pg-entrada,
.is-root-container .sello-pg-entrada {
	max-width: 34ch;
	margin: 0;
	font-size: clamp(22px, 2.3vw, 34px);
	letter-spacing: -.005em;
	line-height: 1.3;
	text-wrap: pretty;
}

.wp-site-blocks .sello-pg-titulo,
.is-root-container .sello-pg-titulo {
	max-width: 24ch;
	margin-block: 0 var(--wp--preset--spacing--40);
	line-height: 1;
}

.wp-site-blocks .sello-pg-titulo-grande,
.is-root-container .sello-pg-titulo-grande {
	max-width: 16ch;
	margin-block-end: 0;
	font-size: clamp(40px, 5vw, 80px);
	line-height: .96;
}

/* Foto y texto en columnas */
.sello-pg-fila {
	column-gap: clamp(28px, 6vw, 96px);
}

@media (min-width: 782px) {
	.sello-pg-fila.sello-pg-fila-inversa {
		flex-direction: row-reverse;
	}
}

.sello-pg-foto {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--steel);
}

.sello-pg-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 1.4s var(--wp--custom--ease);
}

.sello-pg-foto.sello-pg-foto-ancha img {
	aspect-ratio: 2 / 1;
}

.sello-pg-foto.sello-pg-foto-cuadrada img {
	aspect-ratio: 1 / 1;
}

.sello-pg-foto.sello-pg-foto-producto {
	background: var(--wp--preset--color--prod);
}

.sello-pg-fila:hover .sello-pg-foto img,
.sello-pg-pieza:hover .sello-pg-foto img {
	transform: scale(1.03);
}

.sello-pg-foto-ancha + .sello-pg-fila {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Cabecera de Regalos y Personaliza */
.sello-pg-cabecera .sello-pg-entrada + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.sello-pg-cabecera .sello-label {
	margin-block-end: 0;
}

/* Rejillas de tarjetas: 1 columna en el móvil, 2 en tableta y las de la clase en escritorio */
.sello-pg-rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40) clamp(20px, 2.4vw, 36px);
}

.sello-pg-rejilla > * {
	min-width: 0;
	margin-block: 0;
}

@media (min-width: 600px) {
	.sello-pg-rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.sello-pg-rejilla.sello-pg-rejilla-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sello-pg-rejilla.sello-pg-rejilla-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sello-pg-rejilla.sello-pg-rejilla-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Tarjeta: línea fina arriba, número o icono, título y texto */
.sello-pg-tarjeta {
	padding-top: 20px;
	border-top: 1px solid var(--wp--custom--line--dark);
}

.sello-pg-tarjeta > * {
	margin-block: 0;
}

.sello-pg-tarjeta > * + * {
	margin-block-start: 12px;
}

.sello-pg-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: .14em;
	line-height: 1.4;
	color: var(--wp--preset--color--fg-dim);
}

.wp-site-blocks .sello-pg-tarjeta__titulo,
.is-root-container .sello-pg-tarjeta__titulo {
	font-size: clamp(22px, 1.9vw, 28px);
	line-height: 1.02;
}

.sello-pg-tarjeta > p:not([class]) {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--fg-dim);
}

.sello-pg-tarjeta > .sello-pg-num + .sello-pg-tarjeta__titulo {
	margin-block-start: 28px;
}

/* Iconos de línea (máscara: toman el color del texto) */
.sello-pg-icono::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 22px;
	background-color: currentColor;
	-webkit-mask: var(--sello-icono) center / contain no-repeat;
	mask: var(--sello-icono) center / contain no-repeat;
}

.sello-icono-caja {
	--sello-icono: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10h17v10.5h-17zM2.5 7h19v3h-19zM12 7v13.5M12 7C10.6 4.2 7.2 3.7 7.2 5.4S10.4 7 12 7c1.6 0 4.8-.1 4.8-1.6S13.4 4.2 12 7'/%3E%3C/svg%3E");
}

.sello-icono-tarjeta {
	--sello-icono: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM6.5 14c.9-1.8 1.7-1.8 2.3 0s1.4 1.8 2.3 0 1.7-1.8 2.3 0 1.4 1.8 2.3 0M6.5 10h6'/%3E%3C/svg%3E");
}

.sello-icono-ticket {
	--sello-icono: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v3.2a1.8 1.8 0 0 0 0 3.6V17H3v-3.2a1.8 1.8 0 0 0 0-3.6zM15 8v1.5M15 11.25v1.5M15 14.5V16'/%3E%3C/svg%3E");
}

.sello-icono-cambio {
	--sello-icono: 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.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h15M15.5 5.5 19 9l-3.5 3.5M20 15H5M8.5 11.5 5 15l3.5 3.5'/%3E%3C/svg%3E");
}

/* Lista «Si no sabes su talla»: título a la izquierda y texto a la derecha */
.sello-pg-lista > .sello-pg-tarjeta {
	display: grid;
	grid-template-columns: minmax(96px, 26%) minmax(0, 1fr);
	gap: 8px 24px;
	align-items: baseline;
	padding-block: 18px;
}

.sello-pg-lista > .sello-pg-tarjeta > * + * {
	margin-block-start: 0;
}

.sello-pg-lista > .sello-pg-tarjeta:last-child {
	border-bottom: 1px solid var(--wp--custom--line--dark);
}

.sello-pg-lista > * + * {
	margin-block-start: 0;
}

/* Cifras grandes (Lo que te prometemos, Plazos) */
.sello-pg-cifras {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) clamp(20px, 2.4vw, 36px);
}

.sello-pg-cifras > * {
	min-width: 0;
	margin-block: 0;
	padding-top: 8px;
	border-top: 1px solid var(--wp--custom--line--dark);
}

@media (min-width: 1080px) {
	.sello-pg-cifras {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sello-pg-cifras.sello-pg-cifras-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sello-pg-cifra > * {
	margin-block: 0;
}

.sello-pg-cifra__valor {
	padding-top: .16em; /* las tildes (DÍAS, AÑOS) quedan dentro del fondo plateado */
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(48px, 5.2vw, 84px);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: .92;
	text-transform: uppercase;
	color: var(--wp--preset--color--fg);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.sello-pg-cifra__valor {
		background: var(--wp--preset--gradient--silver);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

.sello-pg-cifra > .sello-pg-cifra__texto {
	max-width: 28ch;
	margin-block-start: 16px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--fg-dim);
}

/* Franja de lado a lado (Nosotros: el taller) */
.sello-main .sello-pg-banda,
.is-root-container .sello-pg-banda {
	box-sizing: border-box;
	margin-block-start: clamp(72px, 9vw, 140px);
	padding: clamp(64px, 8vw, 128px) max(var(--wp--preset--spacing--gutter), calc((100% - var(--wp--style--global--wide-size, 1320px)) / 2));
	background: var(--wp--preset--color--graphite);
	border-block: 1px solid var(--wp--custom--line--dark);
}

/* Nota final de Nosotros (marca ficticia) */
.sello-main .sello-pg-nota,
.is-root-container .sello-pg-nota {
	margin-block-start: var(--wp--preset--spacing--60);
}

.sello-pg-nota > p {
	max-width: 70ch;
	font-size: 14px;
	color: var(--wp--preset--color--fg-dim);
}

/* Cierre de la página (Dónde encontrarnos, Antes de pedirla) */
.sello-pg-cierre {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--line--dark);
}

.sello-pg-cierre .sello-lead,
.sello-pg-banda .sello-lead {
	max-width: 46ch;
}

/* Botón con borde, como el .btn-line de la home */
.sello-pg-botones .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 19px 28px;
	border: 0;
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
	color: inherit;
	transition: background-color .45s var(--wp--custom--ease), color .45s var(--wp--custom--ease), box-shadow .45s var(--wp--custom--ease);
}

.sello-pg-botones .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--fg);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--fg);
	color: var(--wp--preset--color--ink);
}

/* Regalos: para quién es */
.wp-site-blocks .sello-pg-para__titulo,
.is-root-container .sello-pg-para__titulo {
	margin-block: 14px 0;
	font-size: clamp(40px, 4.6vw, 72px);
	line-height: .94;
}

.sello-pg-para .sello-pg-fila__txt .sello-lead {
	max-width: 40ch;
}

.sello-pg-para > .sello-pg-tira {
	margin-block-start: clamp(40px, 5vw, 72px);
}

.sello-main .sello-pg-para + .sello-pg-para,
.is-root-container .sello-pg-para + .sello-pg-para {
	margin-block-start: clamp(64px, 8vw, 120px);
}

/* Nosotros: la plata que usamos (puntos en 2 columnas) */
.sello-pg-puntos > .sello-pg-tarjeta > .sello-pg-tarjeta__titulo {
	font-size: clamp(20px, 1.6vw, 24px);
}

/* Personaliza: piezas, letras e ideas (la foto o la muestra hace de línea de arriba) */
.sello-pg-tarjeta.sello-pg-pieza,
.sello-pg-tarjeta.sello-pg-muestra,
.sello-pg-tarjeta.sello-pg-idea {
	padding-top: 0;
	border-top: 0;
}

.sello-pg-pieza > .sello-pg-foto + *,
.sello-pg-muestra > .sello-letra + * {
	margin-block-start: 20px;
}

@media (max-width: 599px) {
	.sello-pg-rejilla-3:has(> .sello-pg-pieza) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--wp--preset--spacing--40);
	}
}

.sello-pg-caracteres code {
	padding: 2px 8px;
	background: var(--wp--preset--color--steel);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .92em;
	letter-spacing: .1em;
	white-space: nowrap;
}

/* Muestra de una letra del grabado sobre plata (fuentes del plugin «SELLO Tienda»:
   Romana = Bodoni Moda, Bloque = Antonio, Máquina = Fragment Mono) */
.sello-letra {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-height: 0;
	margin: 0;
	padding: 16px;
	aspect-ratio: 16 / 10;
	background: linear-gradient(rgba(12, 12, 11, .1), rgba(12, 12, 11, .1)), var(--wp--preset--gradient--silver);
	color: rgba(21, 21, 19, .9);
	font-size: clamp(44px, 4.6vw, 72px);
	line-height: 1;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.sello-letra.sello-letra-romana {
	font-family: var(--wp--preset--font-family--romana);
	font-weight: 600;
	letter-spacing: .04em;
}

.sello-letra.sello-letra-bloque {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sello-letra.sello-letra-maquina {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(24px, 2.4vw, 38px);
	letter-spacing: .04em;
}

.sello-letra.sello-letra-peq {
	aspect-ratio: auto;
	min-height: 128px;
	font-size: clamp(30px, 2.6vw, 42px);
}

.sello-letra.sello-letra-peq.sello-letra-maquina {
	font-size: clamp(14px, 1.15vw, 18px);
}

.sello-pg-idea > .sello-letra + p {
	margin-block-start: 16px;
}

/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}