/* ==========================================================================
   QueenMary Design — sistema de componentes
   Los tokens (color, tipografía, espaciado) están en theme.json.
   Este archivo solo define comportamiento visual que theme.json no cubre.
   ========================================================================== */

:root {
	--qm-linea: var(--wp--custom--line, 1px) solid var(--wp--preset--color--camel);
	--qm-duracion: var(--wp--custom--motion--duration, 420ms);
	--qm-duracion-rapida: var(--wp--custom--motion--duration-fast, 180ms);
	--qm-curva: var(--wp--custom--motion--ease, ease);
	--qm-foco: var(--wp--preset--color--pizarra);
	--qm-cabecera-alto: 4.5rem;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--qm-cabecera-alto) + 1rem);
}

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

::selection {
	background: var(--wp--preset--color--pizarra);
	color: var(--wp--preset--color--arena);
}

/* Fraunces: suavizamos los remates para acercarnos a la calidez redondeada de Roca One. */
h1,
h2,
.has-display-font-family,
.is-style-display,
.wp-block-site-title,
.wp-block-quote {
	font-variation-settings: "SOFT" 100, "WONK" 0;
}

p,
li {
	text-wrap: pretty;
}

h1,
h2,
h3,
.is-style-display {
	text-wrap: balance;
}

/* Enlaces: subrayado fino, cercano al texto; se engrosa al pasar. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--qm-duracion-rapida) var(--qm-curva),
		text-decoration-thickness var(--qm-duracion-rapida) var(--qm-curva);
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Foco visible y consistente en toda la web. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--qm-foco);
	outline-offset: 3px;
	border-radius: 2px;
}

.has-pizarra-background-color,
.has-granate-background-color,
.qm-pie {
	--qm-foco: var(--wp--preset--color--arena);
}

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

/* --------------------------------------------------------------------------
   2. Jerarquía tipográfica
   -------------------------------------------------------------------------- */

.is-style-display {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--display) !important;
	font-weight: 780;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--teja-intenso);
}

.has-entradilla-font-size {
	line-height: 1.5;
}

.is-style-antetitulo {
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

.is-style-antetitulo + :where(h1, h2, h3) {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   3. Botones y enlaces de acción
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--qm-duracion-rapida) var(--qm-curva),
		color var(--qm-duracion-rapida) var(--qm-curva),
		box-shadow var(--qm-duracion-rapida) var(--qm-curva);
	text-decoration: none;
	min-height: 44px;
}

/* Secundario: contorno, para la segunda acción de un bloque. */
.wp-block-button.is-style-secundario .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--pizarra);
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.wp-block-button.is-style-secundario .wp-block-button__link:hover,
.wp-block-button.is-style-secundario .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--pizarra);
	color: var(--wp--preset--color--arena);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--pizarra);
}

/* Enlace con flecha: acción tranquila, sin peso de botón. */
.wp-block-button.is-style-enlace .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--pizarra);
	padding: 0.35em 0;
	min-height: 0;
	border-radius: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.wp-block-button.is-style-enlace .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform var(--qm-duracion-rapida) var(--qm-curva);
}

.wp-block-button.is-style-enlace .wp-block-button__link:hover {
	text-decoration-thickness: 2px;
}

.wp-block-button.is-style-enlace .wp-block-button__link:hover::after {
	transform: translateX(0.25em);
}

/* Sobre fondos oscuros los botones invierten. */
:where(.has-pizarra-background-color, .has-granate-background-color) .wp-block-button:not(.is-style-secundario):not(.is-style-enlace) .wp-block-button__link {
	background: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--pizarra);
}

:where(.has-pizarra-background-color, .has-granate-background-color) :is(.is-style-secundario, .is-style-enlace) .wp-block-button__link {
	color: var(--wp--preset--color--arena);
}

/* --------------------------------------------------------------------------
   4. Secciones y ritmo
   Tres ritmos: la identidad no cambia, la respiración sí.
   -------------------------------------------------------------------------- */

.is-style-seccion-amplia {
	padding-block: var(--wp--preset--spacing--90) !important;
}

.is-style-seccion-media {
	padding-block: var(--wp--preset--spacing--80) !important;
}

.is-style-seccion-compacta {
	padding-block: var(--wp--preset--spacing--60) !important;
}

main > .wp-block-group:where(.is-style-seccion-amplia, .is-style-seccion-media, .is-style-seccion-compacta) {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   5. Imagen
   Proporciones del sistema: la foto se adapta al hueco, nunca al revés.
   -------------------------------------------------------------------------- */

.wp-block-image:where(.is-style-retrato, .is-style-cuadrado, .is-style-horizontal, .is-style-panoramica) img {
	width: 100%;
	object-fit: cover;
	background: var(--wp--preset--color--arena-claro);
}

.wp-block-image.is-style-retrato img { aspect-ratio: 4 / 5; }
.wp-block-image.is-style-cuadrado img { aspect-ratio: 1 / 1; }
.wp-block-image.is-style-horizontal img { aspect-ratio: 3 / 2; }
.wp-block-image.is-style-panoramica img { aspect-ratio: 16 / 9; }

.wp-block-image figcaption {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   6. Tarjeta
   -------------------------------------------------------------------------- */

.is-style-tarjeta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	height: 100%;
}

.is-style-tarjeta > * {
	margin-block: 0 !important;
}

.is-style-tarjeta .wp-block-image {
	margin-block-end: var(--wp--preset--spacing--30) !important;
}

.is-style-tarjeta :where(h2, h3) {
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--grande);
	font-weight: 400;
	color: var(--wp--preset--color--pizarra);
	font-variation-settings: normal;
	letter-spacing: 0;
	line-height: 1.2;
}

.is-style-tarjeta .wp-block-buttons {
	margin-block-start: auto !important;
	padding-block-start: var(--wp--preset--spacing--20);
}

/* --------------------------------------------------------------------------
   7. Listas
   -------------------------------------------------------------------------- */

.is-style-sin-marcas {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-pasos {
	list-style: none;
	counter-reset: paso;
	padding-inline-start: 0;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.is-style-pasos > li {
	counter-increment: paso;
	position: relative;
	padding-inline-start: 3.75rem;
}

.is-style-pasos > li::before {
	position: absolute;
	left: 0;
	top: 0.1em;
	content: counter(paso, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 100;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--grande);
	color: var(--wp--preset--color--teja-intenso);
	line-height: 1;
}

/* --------------------------------------------------------------------------
   8. Cita / frase destacada
   -------------------------------------------------------------------------- */

.wp-block-quote {
	padding-inline-start: 0;
	margin-inline: 0;
}

.wp-block-quote p {
	text-wrap: balance;
}

.wp-block-quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--pequeno);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--pizarra);
	font-variation-settings: normal;
}

/* --------------------------------------------------------------------------
   9. Preguntas frecuentes (bloque Detalles)
   -------------------------------------------------------------------------- */

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--mediano);
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-height: 44px;
	align-items: center;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--lectura);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--teja-intenso);
	flex-shrink: 0;
	transition: transform var(--qm-duracion-rapida) var(--qm-curva);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-details + .wp-block-details {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   10. Formularios (base común para MailerLite y WooCommerce)
   -------------------------------------------------------------------------- */

.qm-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.qm-form__fila {
	max-width: 30rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.qm-form__fila > input {
	flex: 1 1 14rem;
}

.qm-form label,
.qm-form .qm-form__etiqueta {
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--pequeno);
	letter-spacing: 0.02em;
}

.qm-form input[type="email"],
.qm-form input[type="text"],
.qm-form textarea {
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--pizarra);
	background: var(--wp--preset--color--arena-claro);
	border: 1px solid var(--wp--preset--color--pizarra);
	border-radius: var(--wp--custom--radius);
	padding: 0.75em 0.9em;
	min-height: 48px;
}

.qm-form input::placeholder {
	color: var(--wp--preset--color--pizarra);
	opacity: 0.75;
}

.qm-form button {
	cursor: pointer;
	border: 0;
	min-height: 48px;
}

.qm-form__consentimiento {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	font-family: var(--wp--preset--font-family--lectura) !important;
	font-size: var(--wp--preset--font-size--pequeno) !important;
	letter-spacing: 0 !important;
	line-height: 1.5;
}

.qm-form__consentimiento input {
	accent-color: var(--wp--preset--color--teja-profundo);
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15em;
	flex-shrink: 0;
}

.qm-form__estado {
	font-size: var(--wp--preset--font-size--pequeno);
	min-height: 1.5em;
	margin: 0;
}

.has-pizarra-background-color .qm-form input[type="email"],
.qm-pie .qm-form input[type="email"] {
	background: transparent;
	color: var(--wp--preset--color--arena);
	border-color: var(--wp--preset--color--arena);
}

.has-pizarra-background-color .qm-form input::placeholder,
.qm-pie .qm-form input::placeholder {
	color: var(--wp--preset--color--arena);
}

.has-pizarra-background-color .qm-form button,
.qm-pie .qm-form button {
	background: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--pizarra);
}

.has-pizarra-background-color .qm-form__consentimiento input,
.qm-pie .qm-form__consentimiento input {
	accent-color: var(--wp--preset--color--arena);
}

/* --------------------------------------------------------------------------
   11. Cabecera y navegación
   -------------------------------------------------------------------------- */

/* El contenedor de la plantilla es el que se fija: así la cabecera acompaña todo el recorrido. */
.wp-block-template-part:has(> .qm-cabecera) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.qm-cabecera {
	background: var(--wp--preset--color--arena);
	border-bottom: 1px solid transparent;
	transition: border-color var(--qm-duracion) var(--qm-curva);
}

.admin-bar .wp-block-template-part:has(> .qm-cabecera) { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .wp-block-template-part:has(> .qm-cabecera) { top: 46px; }
}

@media (max-width: 600px) {
	.admin-bar .wp-block-template-part:has(> .qm-cabecera) { top: 0; }
}

.qm-cabecera.is-desplazada {
	border-bottom-color: var(--wp--preset--color--camel);
}

.qm-cabecera__barra {
	min-height: var(--qm-cabecera-alto);
}

.qm-cabecera .wp-block-navigation-item__content {
	padding-block: 0.5rem;
}

.qm-cabecera .wp-block-navigation .wp-block-navigation-item__content:hover,
.qm-cabecera .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.45em;
}

.qm-cabecera .wp-block-navigation__responsive-container-open,
.qm-cabecera .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* Menú móvil: una pantalla tranquila, con enlaces grandes y fáciles de pulsar. */
.qm-cabecera .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--pizarra);
	padding: var(--wp--preset--spacing--50) clamp(1rem, 0.5rem + 2.5vw, 3rem);
}

.qm-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--70);
	align-items: flex-start;
}

.qm-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.qm-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 100;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-grande);
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--pizarra);
}

/* Carrito (bloque Mini-cart de WooCommerce). Siempre visible, también en móvil. */
.qm-cabecera .wc-block-mini-cart__button {
	color: var(--wp--preset--color--pizarra);
	min-width: 44px;
	min-height: 44px;
	padding: 0.4rem;
	border-radius: var(--wp--custom--radius);
}

.qm-cabecera .wc-block-mini-cart__button:hover {
	color: var(--wp--preset--color--teja-profundo);
}

.qm-cabecera .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--teja-profundo) !important;
	color: var(--wp--preset--color--arena) !important;
	border: 0;
	font-family: var(--wp--preset--font-family--jerarquia);
}

.qm-cabecera .wc-block-mini-cart__amount {
	display: none;
}

/* --------------------------------------------------------------------------
   12. Pie
   -------------------------------------------------------------------------- */

.qm-pie a {
	color: inherit;
	text-decoration: none;
}

.qm-pie a:hover {
	text-decoration: underline;
	color: inherit;
}

.qm-pie .is-style-antetitulo {
	opacity: 0.85;
}

.qm-pie .wp-block-site-title,
.qm-pie .wp-block-site-title a {
	color: var(--wp--preset--color--arena);
}

.qm-pie__legal {
	border-top: 1px solid rgb(232 224 213 / 0.25);
}

.qm-pie__legal .wp-block-navigation {
	font-family: var(--wp--preset--font-family--lectura);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wp--preset--font-size--pequeno);
}

/* --------------------------------------------------------------------------
   13. Pop-up de newsletter «Enhebrando historias»
   Panel lateral, no modal: no bloquea la lectura.
   -------------------------------------------------------------------------- */

.qm-popup {
	position: fixed;
	z-index: 60;
	right: clamp(0.75rem, 2vw, 1.5rem);
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	width: min(26rem, calc(100vw - 1.5rem));
	max-height: calc(100vh - 1.5rem);
	overflow: auto;
	background: var(--wp--preset--color--arena-claro);
	border: 1px solid var(--wp--preset--color--camel);
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 18px 50px -20px rgb(70 78 93 / 0.35);
	padding: var(--wp--preset--spacing--50) !important;
	margin: 0 !important;
}

.qm-popup:not(.is-abierto) {
	display: none !important;
}

.qm-popup > * {
	margin-block: 0;
}

.qm-popup > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.qm-popup h2 {
	font-size: var(--wp--preset--font-size--grande);
	padding-inline-end: 2.5rem;
}

.qm-popup__cerrar {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--pizarra);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--wp--custom--radius);
	margin: 0 !important;
}

.qm-popup__cerrar:hover {
	color: var(--wp--preset--color--teja-profundo);
}

/* En móvil el pop-up se reduce a lo esencial para no tapar la lectura. */
@media (max-width: 600px) {
	.qm-popup {
		padding: var(--wp--preset--spacing--40) !important;
	}

	.qm-popup > .is-style-antetitulo {
		display: none;
	}

	.qm-popup h2 {
		font-size: var(--wp--preset--font-size--mediano);
	}
}

.qm-sin-popup .qm-popup {
	display: none !important;
}

/* --------------------------------------------------------------------------
   14. Movimiento
   Solo revela y acompaña. Si la persona pide menos movimiento, no hay ninguno.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.js .qm-revelar {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity var(--qm-duracion) var(--qm-curva),
			transform var(--qm-duracion) var(--qm-curva);
	}

	.js .qm-revelar.is-visible {
		opacity: 1;
		transform: none;
	}

	.qm-popup.is-abierto {
		animation: qm-aparecer var(--qm-duracion) var(--qm-curva);
	}
}

@keyframes qm-aparecer {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   15. Contenido provisional
   Marca visible para revisar: todo lo que lleve esta marca debe sustituirse antes de publicar.
   -------------------------------------------------------------------------- */

.is-style-provisional {
	position: relative;
	outline: 1px dashed var(--wp--preset--color--granate);
	outline-offset: 6px;
}

.is-style-provisional::before {
	content: "Provisional";
	position: absolute;
	top: -0.6rem;
	right: -6px;
	z-index: 1;
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--wp--preset--color--granate);
	color: var(--wp--preset--color--arena);
	padding: 0.1rem 0.45rem;
	border-radius: 2px;
	line-height: 1.4;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   16. Utilidades de la guía del sistema (solo documentación interna)
   -------------------------------------------------------------------------- */

.qm-muestra {
	min-height: 7rem;
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--40) !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border: 1px solid rgb(70 78 93 / 0.12);
}

.qm-muestra p {
	margin: 0;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.4;
}

.qm-escala-espacio {
	display: grid;
	gap: 0.6rem;
}

.qm-escala-espacio__fila {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	align-items: center;
	gap: 1rem;
	font-size: var(--wp--preset--font-size--pequeno);
}

.qm-escala-espacio__barra {
	height: 0.75rem;
	background: var(--wp--preset--color--camel);
	border-radius: 2px;
}

.qm-pie__enlaces-legales {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
}

/* --------------------------------------------------------------------------
   17. Acentos teja
   El naranja aporta energía en puntos concretos; la estructura la da el pizarra.
   · teja (#D76628): solo detalles gráficos (subrayados, líneas, marcas).
   · teja-intenso: titulares destacados y números grandes (≥ 24 px, contraste 3,3:1).
   · teja-profundo: botón principal y texto de acento pequeño (contraste 4,8:1).
   El naranja como texto solo va sobre arena o arena claro; en otros fondos, pizarra.
   -------------------------------------------------------------------------- */

a {
	text-decoration-color: var(--wp--preset--color--teja);
}

:where(.has-pizarra-background-color, .qm-pie) a {
	text-decoration-color: currentColor;
}

.is-style-antetitulo {
	color: var(--wp--preset--color--teja-profundo);
}

:where(.has-arena-profundo-background-color, .has-pizarra-background-color, .has-granate-background-color, .qm-pie) .is-style-antetitulo {
	color: inherit;
}

.is-style-destacado {
	color: var(--wp--preset--color--teja-intenso) !important;
}

.wp-block-button.is-style-enlace .wp-block-button__link {
	text-decoration-color: var(--wp--preset--color--teja);
}

.wp-block-button.is-style-enlace .wp-block-button__link::after {
	color: var(--wp--preset--color--teja-intenso);
}

.wp-block-button.is-style-enlace .wp-block-button__link:hover {
	color: var(--wp--preset--color--teja-profundo);
}

:where(.has-pizarra-background-color, .has-granate-background-color) .is-style-enlace .wp-block-button__link,
:where(.has-pizarra-background-color, .has-granate-background-color) .is-style-enlace .wp-block-button__link::after {
	color: var(--wp--preset--color--arena);
	text-decoration-color: currentColor;
}

.qm-cabecera .wp-block-navigation .wp-block-navigation-item__content:hover,
.qm-cabecera .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	text-decoration-color: var(--wp--preset--color--teja);
	text-decoration-thickness: 2px;
}

/* Frase destacada: una línea corta de acento marca la pausa. */
.wp-block-quote::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	background: var(--wp--preset--color--teja);
	margin-block-end: var(--wp--preset--spacing--50);
}

/* Estados de botón sobre fondos oscuros. */
:where(.has-pizarra-background-color, .has-granate-background-color) .wp-block-button:not(.is-style-secundario):not(.is-style-enlace) .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--arena-profundo);
	color: var(--wp--preset--color--pizarra);
}

:where(.has-pizarra-background-color, .has-granate-background-color) .is-style-secundario .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--pizarra);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--arena);
}

/* Secundario y enlace sobre fondos oscuros (especificidad suficiente para ganar a los estilos base). */
:is(.has-pizarra-background-color, .has-granate-background-color) .wp-block-button:is(.is-style-secundario, .is-style-enlace) .wp-block-button__link,
:is(.has-pizarra-background-color, .has-granate-background-color) .wp-block-button.is-style-enlace .wp-block-button__link::after {
	color: var(--wp--preset--color--arena);
	text-decoration-color: currentColor;
}

:is(.has-pizarra-background-color, .has-granate-background-color) .wp-block-button.is-style-secundario .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--pizarra);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--arena);
}

/* Titulares largos: medida contenida para que respiren. */
.qm-titular-medida {
	max-width: 22ch;
}

/* --------------------------------------------------------------------------
   18. Composición del hero (Home)
   Fragmentos de cinco obras en una sola composición fija, sin recortes:
   todas las fotos son 2:3 y se muestran enteras. Las posiciones son
   porcentajes de un lienzo invisible; el verde manda.
   -------------------------------------------------------------------------- */

.qm-composicion {
	--qm-lienzo-alto: 118; /* alto del lienzo en unidades del ancho (ancho = 100) */
	position: relative;
	width: 100%;
	aspect-ratio: 100 / var(--qm-lienzo-alto);
}

.qm-composicion > .qm-composicion__pieza {
	position: absolute;
	margin: 0 !important;
	left: calc(var(--x) * 1%);
	top: calc(var(--y) / var(--qm-lienzo-alto) * 100%);
	width: calc(var(--w) * 1%);
}

.qm-composicion__pieza img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	box-shadow: 0 1px 2px rgb(70 78 93 / 0.06), 0 10px 28px -16px rgb(70 78 93 / 0.22);
}

/* Disposición según el esquema de María: arriba la abeja junto al verde (principal);
   debajo, la noche estrellada a la izquierda y la mariposa a la derecha; cierra, abajo
   y al centro, el geométrico orgánico. Sin solapes: siempre queda aire entre piezas.
   x, y, ancho en unidades del ancho del lienzo. */
.qm-composicion__pieza--geometrico-verde    { --x: 39; --y: 0;  --w: 42; }
.qm-composicion__pieza--abeja               { --x: 9;  --y: 10; --w: 25; }
.qm-composicion__pieza--noche-estrellada    { --x: 5;  --y: 52; --w: 30; }
.qm-composicion__pieza--mariposa            { --x: 69; --y: 66; --w: 24; }
.qm-composicion__pieza--geometrico-organico { --x: 38; --y: 74; --w: 28; }

@media (min-width: 782px) {
	/* Como el resto del hero, la composición cabe en la primera pantalla. */
	.qm-composicion {
		max-width: min(100%, calc((100vh - 10rem) * 100 / var(--qm-lienzo-alto)));
		margin-inline-start: auto;
	}
}

@media (max-width: 781px) {
	.qm-composicion {
		max-width: 36rem;
		margin-inline: auto;
	}
}

/* Móvil y tablet vertical con columnas estrechas: mismo orden, con más altura
   para que las piezas no se queden pequeñas. */
@media (max-width: 600px), (min-width: 782px) and (max-width: 1199px) and (orientation: portrait) {
	.qm-composicion {
		--qm-lienzo-alto: 211;
	}

	.qm-composicion__pieza--geometrico-verde    { --x: 38; --y: 0;   --w: 56; }
	.qm-composicion__pieza--abeja               { --x: 2;  --y: 22;  --w: 33; }
	.qm-composicion__pieza--noche-estrellada    { --x: 6;  --y: 88;  --w: 40; }
	.qm-composicion__pieza--mariposa            { --x: 54; --y: 96;  --w: 34; }
	.qm-composicion__pieza--geometrico-organico { --x: 30; --y: 152; --w: 38; }
}

@media (max-width: 600px) {
	.qm-composicion {
		max-width: none;
	}
}

/* Entrada única, lenta y escalonada; después, quieta. */
@media (prefers-reduced-motion: no-preference) {
	.js .qm-composicion__pieza {
		animation: qm-aparecer 1.4s var(--qm-curva) both;
	}

	.js .qm-composicion__pieza--abeja               { animation-delay: 0.15s; }
	.js .qm-composicion__pieza--noche-estrellada    { animation-delay: 0.3s; }
	.js .qm-composicion__pieza--mariposa            { animation-delay: 0.45s; }
	.js .qm-composicion__pieza--geometrico-organico { animation-delay: 0.6s; }
}

/* --------------------------------------------------------------------------
   19. Lectura narrativa (Sobre mí)
   -------------------------------------------------------------------------- */

.qm-relato p + p {
	margin-block-start: 1.1em;
}

.qm-frase-giro {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 100, "WONK" 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.3;
	text-wrap: balance;
}

@media (max-width: 781px) {
	.qm-invertir-movil {
		flex-direction: column-reverse;
	}
}

/* Frase final de un recorrido: la idea que queda. En teja sobre fondos claros, en arena sobre pizarra. */
.qm-frase-final {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 100, "WONK" 0;
	font-weight: 740;
	font-size: var(--wp--preset--font-size--xx-grande);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--teja-intenso);
	text-wrap: balance;
	margin-block: var(--wp--preset--spacing--60) !important;
}

.has-pizarra-background-color .qm-frase-final {
	color: var(--wp--preset--color--arena);
}

/* Home · fotografías de los caminos y de María.
   Obra, Tienda y Formación ya están en 3:2, la proporción del hueco: se ven enteras.
   «Gracias mamá» es más cuadrada: se muestra a todo lo alto (sin recortar la foto bordada
   ni el texto), apenas recortando papel arriba y abajo; a los lados queda el fondo de imagen del sistema. */
.wp-block-image.qm-camino-foto--encargos {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--wp--preset--color--arena-claro);
}

.wp-block-image.qm-camino-foto--encargos img {
	display: block;
	width: 88.3%;
	height: auto;
	aspect-ratio: auto;
	object-fit: fill;
	margin: -4.2% auto 0;
}

/* Retrato de María: 2:3 en un hueco 4:5. Se recorta solo pared arriba y falda abajo:
   el rostro, las manos y los dos bastidores quedan completos. */
.wp-block-image.qm-retrato-maria img {
	object-position: 50% 55%;
}

/* Divisor: una línea fina de camel. */
.wp-block-separator {
	border: 0 !important;
	border-top: 1px solid var(--wp--preset--color--camel) !important;
	height: 0;
	opacity: 1;
}

.has-pizarra-background-color .wp-block-separator {
	border-top-color: rgb(232 224 213 / 0.35) !important;
}

/* Con cinco secciones el menú necesita ~900 px: por debajo se usa el menú desplegable. */
@media (max-width: 899px) {
	.qm-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.qm-cabecera .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   20. Logotipo
   -------------------------------------------------------------------------- */

.qm-logo a {
	display: block;
	color: inherit;
	line-height: 0;
}

.qm-logo > span {
	display: block;
	line-height: 0;
}

.qm-logo a:hover {
	color: inherit;
}

.qm-logo svg {
	display: block;
	height: 3.25rem;
	width: auto;
}

.qm-pie .qm-logo svg {
	height: 3.5rem;
}

@media (max-width: 600px) {
	.qm-cabecera .qm-logo svg {
		height: 2.6rem;
	}
}

/* --------------------------------------------------------------------------
   21. Landing de venta de curso
   -------------------------------------------------------------------------- */

/* Autora junto al CTA del hero. */
.qm-autora > * {
	margin: 0 !important;
}

.qm-autora__foto img {
	border-radius: 50%;
}

.qm-autora__nombre {
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.3;
}

.qm-autora .has-pequeno-font-size {
	line-height: 1.3;
}

/* Frases con énfasis (en Hotmart iban en cursiva): Literata cursiva. */
.qm-enfasis {
	font-style: italic;
	line-height: 1.45;
}

.qm-enfasis--linea {
	border-inline-start: 2px solid var(--wp--preset--color--teja);
	padding-inline-start: var(--wp--preset--spacing--40);
}

/* Caja con las frases que la persona se ha dicho a sí misma. */
.qm-caja-citas {
	background: var(--wp--preset--color--arena);
	border: 1px solid var(--wp--preset--color--camel);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) !important;
	margin-block: var(--wp--preset--spacing--50) !important;
}

.qm-caja-citas p {
	margin-block: 0.35em;
	font-style: italic;
}

/* Lista de «No necesitas…» con una línea de acento. */
.qm-lista-linea {
	border-inline-start: 2px solid var(--wp--preset--color--teja);
	padding-inline-start: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50) !important;
}

.qm-lista-linea p {
	margin-block: 0.3em;
}

/* Frase destacada en caja. */
.qm-destacado-caja {
	background: var(--wp--preset--color--arena-claro);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 100, "WONK" 0;
	font-weight: 560;
	font-size: var(--wp--preset--font-size--mediano);
	line-height: 1.35;
	margin-block-start: var(--wp--preset--spacing--50) !important;
}

/* Tarjetas del contenido del curso. */
.qm-tarjeta-curso {
	background: var(--wp--preset--color--arena-claro);
	border: 1px solid rgb(196 159 119 / 0.55);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) !important;
}

.qm-tarjeta-curso > * {
	margin-block: 0 !important;
}

.qm-tarjeta-curso > * + * {
	margin-block-start: var(--wp--preset--spacing--30) !important;
}

.qm-numero {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 100;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1;
	color: var(--wp--preset--color--teja-intenso);
}

/* Lista de lo que te llevas: puntos de acento, dos columnas en escritorio. */
.qm-lista-posibilidades {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	max-width: 62rem !important;
}

.qm-lista-posibilidades > li {
	position: relative;
	background: var(--wp--preset--color--arena-claro);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) calc(var(--wp--preset--spacing--50) + 1.25rem);
	line-height: 1.5;
}

.qm-lista-posibilidades > li::before {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--50);
	top: calc(var(--wp--preset--spacing--50) + 0.6em);
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--teja);
}

.qm-lista-posibilidades > li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@media (max-width: 700px) {
	.qm-lista-posibilidades {
		grid-template-columns: 1fr;
	}
}

.qm-frase-final--media {
	font-size: var(--wp--preset--font-size--x-grande);
}

/* Caja de compra. */
.qm-caja-precio {
	background: var(--wp--preset--color--arena-claro);
	border: 1px solid var(--wp--preset--color--camel);
	border-radius: calc(var(--wp--custom--radius) * 3);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) !important;
}

.qm-etiqueta {
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teja-profundo);
}

.qm-precio {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 100, "WONK" 0;
	font-weight: 740;
	font-size: var(--wp--preset--font-size--xx-grande);
	line-height: 1;
	margin-block: var(--wp--preset--spacing--50) 0 !important;
}

/* --------------------------------------------------------------------------
   22. Tienda — catálogo
   La pieza es la protagonista: foto grande, nombre y precio.
   -------------------------------------------------------------------------- */

.qm-tienda h1 {
	margin: 0;
}

.qm-tienda__barra {
	gap: var(--wp--preset--spacing--40) !important;
	padding-block-end: var(--wp--preset--spacing--40);
	border-bottom: var(--qm-linea);
}

/* Filtros de categoría. */
.qm-filtros ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

.qm-filtros__opcion {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--pizarra);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.qm-filtros__opcion:hover {
	color: var(--wp--preset--color--pizarra);
	border-bottom-color: var(--wp--preset--color--camel);
}

.qm-filtros__opcion.is-activo {
	border-bottom-color: var(--wp--preset--color--teja);
}

/* Ordenación discreta. */
.qm-ordenar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--pequeno);
}

.qm-ordenar select {
	font: inherit;
	color: var(--wp--preset--color--pizarra);
	background: transparent;
	border: 1px solid rgb(70 78 93 / 0.35);
	border-radius: var(--wp--custom--radius);
	padding: 0.5em 2em 0.5em 0.75em;
	min-height: 44px;
	cursor: pointer;
}

/* Rejilla. */
.qm-rejilla-productos {
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.qm-rejilla-productos--cuatro {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.qm-rejilla-productos--cuatro {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.qm-rejilla-productos,
	.qm-rejilla-productos--cuatro {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	}
}

.qm-producto[hidden] {
	display: none;
}

.qm-producto__foto {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--wp--preset--color--arena-claro);
	border-radius: var(--wp--custom--radius);
}

.qm-producto__imagen {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.8s var(--qm-curva);
}

.qm-producto:hover .qm-producto__imagen {
	transform: scale(1.025);
}

.qm-producto.is-agotada .qm-producto__imagen {
	opacity: 0.72;
}

.qm-producto__agotada {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	background: var(--wp--preset--color--arena);
	color: var(--wp--preset--color--pizarra);
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	padding: 0.3em 0.7em;
	border-radius: var(--wp--custom--radius);
}

.qm-producto__nombre {
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--pizarra);
	font-variation-settings: normal;
	letter-spacing: 0;
}

.qm-producto__nombre a {
	text-decoration: none;
	color: inherit;
}

.qm-producto__nombre a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--teja);
}

.qm-producto__precio {
	margin: 0.2rem 0 0 !important;
	font-size: var(--wp--preset--font-size--pequeno);
}

.qm-producto.is-agotada .qm-producto__precio {
	opacity: 0.75;
}

.qm-catalogo__vacio {
	margin-top: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   23. Tienda — ficha de producto
   -------------------------------------------------------------------------- */

.qm-ficha .woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--pizarra);
}

.qm-ficha .woocommerce-breadcrumb a {
	text-decoration: none;
}

.qm-ficha .woocommerce-breadcrumb a:hover {
	text-decoration: underline;
}

/* Galería: imagen principal grande y miniaturas debajo. */
.qm-ficha .wp-block-woocommerce-product-image-gallery {
	max-width: none !important;
	width: 100% !important;
}

.qm-ficha .woocommerce-product-gallery {
	position: relative;
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
}

.qm-ficha .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--arena-claro);
}

.qm-ficha .flex-control-thumbs {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.qm-ficha .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.qm-ficha .flex-control-thumbs img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--qm-duracion-rapida) var(--qm-curva);
}

.qm-ficha .flex-control-thumbs img.flex-active,
.qm-ficha .flex-control-thumbs img:hover {
	opacity: 1;
}

.qm-ficha .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb(243 238 231 / 0.9);
	display: grid;
	place-items: center;
	text-indent: -9999px;
	overflow: hidden;
}

.qm-ficha .woocommerce-product-gallery__trigger::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid var(--wp--preset--color--pizarra);
	border-radius: 50%;
	text-indent: 0;
}

/* Columna de compra. */
@media (min-width: 782px) {
	.qm-ficha__compra {
		position: sticky;
		top: calc(var(--qm-cabecera-alto) + 2rem);
		align-self: flex-start;
	}
}

.qm-ficha__compra > * {
	margin-block: 0;
}

.qm-ficha__nombre {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--pizarra);
}

.qm-ficha__precio {
	margin-top: var(--wp--preset--spacing--30) !important;
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--grande) !important;
}

.qm-sello {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--40) !important;
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teja-profundo);
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius);
	padding: 0.3em 0.7em;
}

.qm-ficha__breve {
	margin-top: var(--wp--preset--spacing--40) !important;
}

.qm-ficha__breve p {
	margin: 0;
}

/* Añadir al carrito. */
.qm-ficha form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0 0 !important;
}

.qm-ficha form.cart .quantity input {
	width: 4.5rem;
	min-height: 48px;
	font: inherit;
	text-align: center;
	color: var(--wp--preset--color--pizarra);
	background: var(--wp--preset--color--arena-claro);
	border: 1px solid rgb(70 78 93 / 0.35);
	border-radius: var(--wp--custom--radius);
}

.qm-ficha form.cart .single_add_to_cart_button {
	flex: 1 1 14rem;
	min-height: 48px;
	font-size: 1.0625rem;
	cursor: pointer;
	border: 0;
}

.qm-ficha form.cart .single_add_to_cart_button.is-cargando {
	opacity: 0.7;
	cursor: progress;
}

.qm-ficha .stock {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-family: var(--wp--preset--font-family--jerarquia);
}

.qm-ficha .stock.out-of-stock {
	display: inline-block;
	background: var(--wp--preset--color--arena-profundo);
	color: var(--wp--preset--color--pizarra);
	padding: 0.5em 1em;
	border-radius: var(--wp--custom--radius);
}

/* Disponibilidad bajo el precio; el aviso propio del formulario de compra no se repite. */
.qm-ficha .qm-ficha__disponibilidad {
	margin-top: var(--wp--preset--spacing--30) !important;
	font-size: var(--wp--preset--font-size--pequeno);
}

.qm-ficha .wp-block-add-to-cart-form .stock,
.qm-ficha .wc-block-add-to-cart-form .stock {
	display: none;
}

/* Preparación, envíos y devoluciones: apartados de las condiciones generales. */
.qm-envios__apartado {
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--base);
}

.qm-envios__apartado + p {
	margin-top: var(--wp--preset--spacing--20);
}

.qm-envios__enlace {
	margin-top: var(--wp--preset--spacing--40);
}

/* Características (medidas, técnica, materiales, acabado y envío): justo bajo el botón. */
.qm-datos-pieza {
	margin: var(--wp--preset--spacing--50) 0 0 !important;
	border-top: var(--qm-linea);
}

.qm-datos-pieza__fila {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	gap: var(--wp--preset--spacing--40);
	padding-block: 0.7rem;
	border-bottom: var(--qm-linea);
	font-size: var(--wp--preset--font-size--pequeno);
}

.qm-datos-pieza dt {
	font-family: var(--wp--preset--font-family--jerarquia);
}

.qm-datos-pieza dd {
	margin: 0;
}

/* Sobre la pieza y desplegables. */
.qm-sobre-pieza__titulo,
.qm-relacionadas__titulo {
	font-size: var(--wp--preset--font-size--grande) !important;
}

.qm-sobre-pieza__texto {
	margin-top: var(--wp--preset--spacing--40);
}

.qm-acordeones-pieza {
	margin-top: var(--wp--preset--spacing--60);
	border-top: var(--qm-linea);
}

.qm-relacionadas .qm-rejilla-productos {
	margin-top: var(--wp--preset--spacing--50);
}

/* Avisos de WooCommerce con la estética del sitio. */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.qm-aviso-envios {
	max-width: 46rem;
	margin: 0 auto var(--wp--preset--spacing--50) !important;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--arena-claro);
	border-inline-start: 2px solid var(--wp--preset--color--teja);
	border-radius: var(--wp--custom--radius);
	font-size: var(--wp--preset--font-size--pequeno);
}

/* --------------------------------------------------------------------------
   24. Carrito lateral, carrito y checkout (bloques de WooCommerce)
   -------------------------------------------------------------------------- */

.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
.wc-block-components-drawer {
	background: var(--wp--preset--color--arena) !important;
	color: var(--wp--preset--color--pizarra);
}

.wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--display) !important;
	font-variation-settings: "SOFT" 100;
	font-weight: 700 !important;
	color: var(--wp--preset--color--pizarra);
}

.wc-block-mini-cart__footer {
	border-top: var(--qm-linea) !important;
}

/* Sin descripciones ni metadatos en las líneas del carrito: foto, nombre, precio, cantidad y eliminar. */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata,
.wc-block-cart .wc-block-components-product-metadata,
.wc-block-components-order-summary .wc-block-components-product-metadata {
	display: none;
}

.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--jerarquia);
	color: var(--wp--preset--color--pizarra) !important;
	text-decoration: none;
}

.wc-block-mini-cart__footer-actions .wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-mini-cart__shopping-button {
	font-family: var(--wp--preset--font-family--jerarquia) !important;
	border-radius: var(--wp--custom--radius) !important;
	min-height: 48px;
}

.wc-block-mini-cart__footer-checkout,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--teja-profundo) !important;
	color: var(--wp--preset--color--arena) !important;
	border: 0 !important;
}

.wc-block-mini-cart__footer-checkout:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--pizarra) !important;
}

.wc-block-mini-cart__footer-cart {
	background: transparent !important;
	color: var(--wp--preset--color--pizarra) !important;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--pizarra) !important;
	border: 0 !important;
}

.wc-block-mini-cart__footer-cart:hover {
	background: var(--wp--preset--color--pizarra) !important;
	color: var(--wp--preset--color--arena) !important;
}

.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
	font-family: var(--wp--preset--font-family--jerarquia);
}

/* Campos del checkout. */
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-textarea,
.wc-blocks-components-select__select {
	background: var(--wp--preset--color--arena-claro) !important;
	border: 1px solid rgb(70 78 93 / 0.45) !important;
	border-radius: var(--wp--custom--radius) !important;
	color: var(--wp--preset--color--pizarra) !important;
}

.wc-block-components-title,
.wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--jerarquia) !important;
	color: var(--wp--preset--color--pizarra);
}

.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--wp--preset--color--arena-claro);
	border-radius: var(--wp--custom--radius);
}

/* Piezas de una sola unidad: sin selector de cantidad, el botón ocupa todo el ancho. */
.qm-ficha form.cart .quantity:has(> input[type="hidden"]) {
	display: none;
}

.qm-ficha form.cart {
	width: 100%;
}

.qm-ficha .wp-block-add-to-cart-form,
.qm-ficha .wc-block-add-to-cart-form {
	padding: 0 !important;
	margin-inline: 0 !important;
	width: 100%;
}

/* --------------------------------------------------------------------------
   25. Textos legales: lectura cómoda, apartados claros
   -------------------------------------------------------------------------- */

.qm-texto-legal h2 {
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--grande);
	font-weight: 400;
	font-variation-settings: normal;
	letter-spacing: 0;
	line-height: 1.25;
	color: var(--wp--preset--color--pizarra);
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-start: var(--wp--preset--spacing--40);
	border-top: var(--qm-linea);
}

.qm-texto-legal ul,
.qm-texto-legal ol {
	padding-inline-start: 1.25em;
}

.qm-texto-legal li + li {
	margin-block-start: 0.5em;
}

.qm-texto-legal li::marker {
	color: var(--wp--preset--color--teja-intenso);
}

.qm-texto-legal a {
	word-break: break-word;
}

/* --------------------------------------------------------------------------
   26. Fotografías del relato (Sobre mí)
   Sin marcos ni efectos: la foto en su formato, con aire alrededor.
   -------------------------------------------------------------------------- */

.qm-foto-relato {
	max-width: 34rem;
	margin-inline: auto;
}

.qm-foto-relato img {
	display: block;
	width: 100%;
	height: auto;
}

/* María creando: la fotografía con más presencia del recorrido. */
.qm-foto-relato--protagonista {
	max-width: 40rem;
	margin-inline: 0;
}

/* --------------------------------------------------------------------------
   27. Formulario «Enhebrando historias» (conectado a MailerLite)
   -------------------------------------------------------------------------- */

.qm-form--newsletter {
	max-width: 34rem;
}

.qm-form__campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.qm-form__campo {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

.qm-form__campo--email {
	grid-column: 1 / -1;
}

@media (max-width: 420px) {
	.qm-form__campos {
		grid-template-columns: 1fr;
	}
}

.qm-form--newsletter input[type="text"],
.qm-form--newsletter input[type="email"] {
	width: 100%;
	box-sizing: border-box;
}

.qm-form--newsletter button[type="submit"] {
	justify-self: start;
	padding-inline: 2em;
}

.qm-form--newsletter button[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.qm-form__exito-titulo {
	font-family: var(--wp--preset--font-family--jerarquia);
	font-size: var(--wp--preset--font-size--mediano);
	margin: 0;
}

.qm-form__exito p:last-child {
	margin-block: 0.4rem 0;
}

/* Sobre fondo oscuro (pie). */
.has-pizarra-background-color .qm-form input[type="text"],
.qm-pie .qm-form input[type="text"] {
	background: transparent;
	color: var(--wp--preset--color--arena);
	border-color: var(--wp--preset--color--arena);
}

.qm-pie .qm-form__consentimiento a {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   28. Landing «Recuerdos bordados»
   La obra se muestra completa, en su proporción: nunca se recorta.
   -------------------------------------------------------------------------- */

.qm-obra {
	margin: 0;
}

.qm-obra img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hero: la obra entera cabe en pantalla. */
.qm-obra--hero img {
	width: auto;
	max-width: 100%;
	max-height: min(82vh, 48rem);
	margin-inline: auto;
}

/* Motivos: tres columnas limpias separadas por una línea fina. */
.qm-motivo {
	border-top: var(--qm-linea);
	padding-top: var(--wp--preset--spacing--50);
}

.qm-motivo h3 {
	font-size: var(--wp--preset--font-size--grande);
}

/* Proceso: recorrido vertical con el número como protagonista. */
.qm-paso {
	display: grid;
	grid-template-columns: minmax(4.5rem, 8rem) 1fr;
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--60);
	border-top: var(--qm-linea);
}

.qm-paso:last-child {
	border-bottom: var(--qm-linea);
}

.qm-paso > * {
	margin-block: 0 !important;
}

.qm-paso__numero {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "SOFT" 100, "WONK" 0;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-grande);
	line-height: 0.9;
	color: var(--wp--preset--color--teja-intenso);
}

.qm-paso__texto > * + * {
	margin-block-start: 0.8em;
}

.qm-paso__texto h3 {
	margin-top: 0;
}

@media (max-width: 600px) {
	.qm-paso {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
}

/* «Hay fotografías que significan más»: la pieza ambientada, con presencia pero sin ser otro hero. */
.qm-obra--lugar img {
	width: auto;
	max-width: 100%;
	max-height: min(70vh, 34rem);
	margin-inline: auto;
}

/* Tablet y móvil: primero el texto y después la pieza, a todo el ancho y con aire. */
@media (max-width: 1099px) {
	.qm-recuerdos-lugar {
		flex-direction: column-reverse;
		flex-wrap: nowrap !important;
	}

	.qm-recuerdos-lugar > .wp-block-column {
		flex-basis: auto !important;
		width: 100%;
	}

	.qm-recuerdos-lugar .qm-obra--lugar img {
		max-height: min(70vh, 30rem);
	}
}

/* «Recuerdos bordados»: las dos piezas completas, en dos tamaños y a dos alturas. Sin solapes. */
.qm-piezas {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 4%;
}

.qm-piezas > .qm-piezas__pieza {
	margin: 0 !important;
}

.qm-piezas .qm-piezas__pieza--primera {
	flex: 0 0 54%;
}

.qm-piezas .qm-piezas__pieza--segunda {
	flex: 0 0 42%;
	margin-top: 22% !important;
}

@media (max-width: 781px) {
	.qm-piezas {
		max-width: 40rem;
		margin-inline: auto;
	}
}

/* Móvil, y columna estrecha de tablet: una sobre otra, desplazadas, para que cada pieza conserve su tamaño. */
@media (max-width: 600px), (min-width: 782px) and (max-width: 1099px) {
	.qm-piezas {
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
	}

	.qm-piezas .qm-piezas__pieza--primera {
		flex: none;
		width: 74%;
	}

	.qm-piezas .qm-piezas__pieza--segunda {
		flex: none;
		width: 64%;
		margin: 0 0 0 auto !important;
	}
}

/*
 * Exposición (sección de María): ocho fotografías intervenidas, todas 2:3 y sin recorte.
 * Cuatro principales y cuatro secundarias a distintas alturas, con huecos de aire entre ellas.
 * Escritorio: dos filas sobre 12 columnas.
 */
.qm-exposicion {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.qm-exposicion > .qm-exposicion__obra {
	margin: 0 !important;
}

.qm-exposicion .qm-exposicion__obra--embarazo       { grid-area: 1 / 1 / 2 / 4; }
.qm-exposicion .qm-exposicion__obra--regadera       { grid-area: 1 / 4 / 2 / 6; margin-top: 7rem !important; }
.qm-exposicion .qm-exposicion__obra--arquitectura   { grid-area: 1 / 7 / 2 / 10; margin-top: 2.5rem !important; }
.qm-exposicion .qm-exposicion__obra--zapato         { grid-area: 1 / 11 / 2 / 13; margin-top: 9rem !important; }
.qm-exposicion .qm-exposicion__obra--puerta         { grid-area: 2 / 1 / 3 / 3; margin-top: 4rem !important; }
.qm-exposicion .qm-exposicion__obra--flores         { grid-area: 2 / 4 / 3 / 7; }
.qm-exposicion .qm-exposicion__obra--ventana        { grid-area: 2 / 8 / 3 / 10; margin-top: 8rem !important; }
.qm-exposicion .qm-exposicion__obra--ventana-pajaro { grid-area: 2 / 10 / 3 / 13; margin-top: 2rem !important; }

/* Tablet y portátil pequeño: zigzag en seis columnas, cada principal junto a una secundaria. */
@media (max-width: 1099px) {
	.qm-exposicion {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		row-gap: var(--wp--preset--spacing--50);
		max-width: 40rem !important;
		margin-inline: auto !important;
	}

	.qm-exposicion .qm-exposicion__obra--embarazo       { grid-area: 1 / 1 / 2 / 5; margin-top: 0 !important; }
	.qm-exposicion .qm-exposicion__obra--regadera       { grid-area: 1 / 5 / 2 / 7; margin-top: 5rem !important; }
	.qm-exposicion .qm-exposicion__obra--zapato         { grid-area: 2 / 1 / 3 / 3; margin-top: 4rem !important; }
	.qm-exposicion .qm-exposicion__obra--arquitectura   { grid-area: 2 / 3 / 3 / 7; margin-top: 0 !important; }
	.qm-exposicion .qm-exposicion__obra--flores         { grid-area: 3 / 1 / 4 / 5; margin-top: 0 !important; }
	.qm-exposicion .qm-exposicion__obra--puerta         { grid-area: 3 / 5 / 4 / 7; margin-top: 6rem !important; }
	.qm-exposicion .qm-exposicion__obra--ventana        { grid-area: 4 / 1 / 5 / 3; margin-top: 3rem !important; }
	.qm-exposicion .qm-exposicion__obra--ventana-pajaro { grid-area: 4 / 3 / 5 / 7; margin-top: 0 !important; }
}

/* Móvil: las principales casi a todo el ancho, alternando lado; las secundarias, en parejas. */
@media (max-width: 600px) {
	.qm-exposicion {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--30);
		row-gap: var(--wp--preset--spacing--50);
	}

	.qm-exposicion .qm-exposicion__obra--embarazo       { grid-area: 1 / 1 / 2 / 11; margin-top: 0 !important; }
	.qm-exposicion .qm-exposicion__obra--regadera       { grid-area: 2 / 1 / 3 / 7; margin-top: 0 !important; }
	.qm-exposicion .qm-exposicion__obra--zapato         { grid-area: 2 / 7 / 3 / 13; margin-top: 2.5rem !important; }
	.qm-exposicion .qm-exposicion__obra--arquitectura   { grid-area: 3 / 3 / 4 / 13; margin-top: 0 !important; }
	.qm-exposicion .qm-exposicion__obra--flores         { grid-area: 4 / 1 / 5 / 11; margin-top: 0 !important; }
	.qm-exposicion .qm-exposicion__obra--puerta         { grid-area: 5 / 1 / 6 / 7; margin-top: 0 !important; }
	.qm-exposicion .qm-exposicion__obra--ventana        { grid-area: 5 / 7 / 6 / 13; margin-top: 2.5rem !important; }
	.qm-exposicion .qm-exposicion__obra--ventana-pajaro { grid-area: 6 / 3 / 7 / 13; margin-top: 0 !important; }
}

/* Cierre con formulario. */
.qm-cierre-encargo .qm-form {
	margin-top: var(--wp--preset--spacing--60);
}

@media (min-width: 782px) {
	.qm-obra--hero img {
		max-height: max(26rem, calc(100vh - 13.5rem));
	}
}

/* Página de registro del curso: el formulario respira bajo el texto. */
.qm-form[data-qm-redireccion] {
	margin-top: var(--wp--preset--spacing--60);
}

/* Registro del curso (anuncios): texto, formulario y una sola imagen, en una pantalla. */
.qm-registro {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.qm-registro__texto > h1 {
	margin-top: 0;
	max-width: 18ch;
}

.qm-registro__texto > p {
	max-width: 34rem;
}

.qm-registro .qm-form[data-qm-redireccion] {
	margin-top: var(--wp--preset--spacing--50);
	max-width: 34rem;
}

.qm-registro__imagen .wp-block-image {
	margin: 0;
}

@media (min-width: 782px) {
	/* La imagen acompaña sin empujar el formulario fuera de la pantalla. */
	.qm-registro__imagen img {
		max-height: max(24rem, calc(100vh - 12rem));
		width: auto;
		max-width: 100%;
		margin-inline: auto;
	}
}

@media (max-width: 781px) {
	.qm-registro {
		padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	}

	/* En móvil, primero el mensaje y el formulario; la imagen, pequeña y al final. */
	.qm-registro__columnas {
		display: flex;
		flex-direction: column;
	}

	.qm-registro__texto { order: 1; }
	.qm-registro__imagen { order: 2; }

	.qm-registro__imagen img {
		aspect-ratio: 3 / 2;
		max-height: 14rem;
	}
}